diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
index 983ef02..527d357 100644
--- a/client/src/app/layout.tsx
+++ b/client/src/app/layout.tsx
@@ -2,6 +2,7 @@ import "@/styles/globals.css";
 
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
+import AuthModal from "@/components/AuthModal";
 
 export const metadata = {
   title: "chessu",
@@ -14,11 +15,12 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body>
         <Navbar />
 
-        <main className="bg-base-200 mx-1 flex min-h-[70vh] justify-center rounded-3xl shadow-md md:mx-16 lg:mx-40">
-          {children}
-        </main>
+        <main className="mx-1 flex min-h-[70vh] justify-center md:mx-16 lg:mx-40">{children}</main>
 
         <Footer />
+
+        {/* auth modal, put in separate component */}
+        <AuthModal />
       </body>
     </html>
   );
diff --git a/client/src/components/AuthModal.tsx b/client/src/components/AuthModal.tsx
new file mode 100644
index 0000000..39f509d
--- /dev/null
+++ b/client/src/components/AuthModal.tsx
@@ -0,0 +1,42 @@
+export default function AuthModal() {
+  return (
+    <>
+      <input type="checkbox" id="auth-modal" className="modal-toggle" />
+      <label htmlFor="auth-modal" className="modal">
+        <label className="modal-box flex flex-col gap-4 pt-2">
+          <div className="flex w-full gap-2">
+            <div className="tabs flex-grow">
+              <a className="tab tab-bordered tab-active flex-grow">Guest</a>
+              <a className="tab tab-bordered tab-disabled flex-grow">Login</a>
+              <a className="tab tab-bordered tab-disabled flex-grow">Register</a>
+            </div>
+            <label htmlFor="auth-modal" className="btn btn-sm btn-circle btn-ghost">
+              ✕
+            </label>
+          </div>
+
+          <div className="flex flex-col">
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text">Update guest name</span>
+              </label>
+              <label className="input-group">
+                <span>Name</span>
+                <input
+                  type="text"
+                  placeholder="Enter name here..."
+                  className="input input-bordered flex-grow"
+                />
+              </label>
+            </div>
+            <div className="modal-action">
+              <label htmlFor="auth-modal" className="btn">
+                Confirm
+              </label>
+            </div>
+          </div>
+        </label>
+      </label>
+    </>
+  );
+}
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
index ae696bc..2d84ee0 100644
--- a/client/src/components/Navbar.tsx
+++ b/client/src/components/Navbar.tsx
@@ -17,31 +17,11 @@ export default function Navbar() {
         <div className="btn btn-ghost btn-circle">
           <IconSun className="m-auto block h-full" />
         </div>
-        <div className="dropdown dropdown-end">
-          {/* ^ wrap this in client component too */}
-          <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
-            <div className="w-10 rounded-full">
-              <IconUser className="m-auto block h-full" />
-            </div>
-          </label>
-          <ul
-            tabIndex={0}
-            className="menu menu-compact dropdown-content rounded-box bg-base-100 w-52 p-2 shadow"
-          >
-            <li>
-              <a>Change guest name</a>
-            </li>
-            <li>
-              <a className="pointer-events-none justify-between">
-                Sign in
-                <span className="badge">WIP</span>
-              </a>
-            </li>
-            <li>
-              <a className="pointer-events-none">Register</a>
-            </li>
-          </ul>
-        </div>
+        <label tabIndex={0} htmlFor="auth-modal" className="btn btn-ghost btn-circle avatar">
+          <div className="w-10 rounded-full">
+            <IconUser className="m-auto block h-full" />
+          </div>
+        </label>
       </div>
     </header>
   );
