diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
index 527d357..954f8a3 100644
--- a/client/src/app/layout.tsx
+++ b/client/src/app/layout.tsx
@@ -2,7 +2,9 @@ import "@/styles/globals.css";
 
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
-import AuthModal from "@/components/AuthModal";
+import AuthModal from "@/components/auth/AuthModal";
+
+import ContextProvider from "@/context/ContextProvider";
 
 export const metadata = {
   title: "chessu",
@@ -13,14 +15,17 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en">
       <body>
-        <Navbar />
+        <ContextProvider>
+          <Navbar />
 
-        <main className="mx-1 flex min-h-[70vh] justify-center 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>
+
+          <AuthModal />
+        </ContextProvider>
 
         <Footer />
-
-        {/* auth modal, put in separate component */}
-        <AuthModal />
       </body>
     </html>
   );
diff --git a/client/src/components/AuthModal.tsx b/client/src/components/AuthModal.tsx
deleted file mode 100644
index 39f509d..0000000
--- a/client/src/components/AuthModal.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-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/auth/AuthModal.tsx b/client/src/components/auth/AuthModal.tsx
new file mode 100644
index 0000000..939793a
--- /dev/null
+++ b/client/src/components/auth/AuthModal.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import type { FormEvent } from "react";
+import { useRef, useState, useContext } from "react";
+import { SessionContext } from "@/context/session";
+import { setGuestSession } from "@/lib/auth";
+
+// TODO: add login and register views
+
+export default function AuthModal() {
+  const session = useContext(SessionContext);
+  const [buttonLoading, setButtonLoading] = useState(false);
+  const modalToggleRef = useRef<HTMLInputElement>(null);
+
+  async function updateGuestName(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+
+    const target = e.target as HTMLFormElement;
+    const guestName = target.elements.namedItem("guestName") as HTMLInputElement;
+    if (!guestName || !guestName.value) return;
+
+    setButtonLoading(true);
+    const user = await setGuestSession(guestName.value);
+    if (user) {
+      session?.setUser(user);
+      if (modalToggleRef.current?.checked) {
+        modalToggleRef.current.checked = false;
+      }
+    }
+    guestName.value = "";
+    setButtonLoading(false);
+  }
+
+  return (
+    <>
+      <input type="checkbox" id="auth-modal" className="modal-toggle" ref={modalToggleRef} />
+
+      <label
+        htmlFor="auth-modal"
+        className={"modal" + (session?.user === null ? " modal-open" : "")}
+      >
+        <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>
+            {session?.user !== null && (
+              <label htmlFor="auth-modal" className="btn btn-sm btn-circle btn-ghost">
+                ✕
+              </label>
+            )}
+          </div>
+
+          <form className="flex flex-col" onSubmit={updateGuestName}>
+            <div className="form-control">
+              <label className="label">
+                <span className="label-text">Hello, {session?.user?.name || "unknown guest"}!</span>
+              </label>
+              <label className="input-group">
+                <span>Name</span>
+                <input
+                  type="text"
+                  id="guestName"
+                  name="guestName"
+                  placeholder="Enter name here..."
+                  className="input input-bordered flex-grow"
+                  maxLength={16}
+                  minLength={2}
+                  required
+                />
+              </label>
+            </div>
+            <div className="modal-action">
+              <button className={"btn" + (buttonLoading ? " loading" : "")} type="submit">
+                Update
+              </button>
+            </div>
+          </form>
+        </label>
+      </label>
+    </>
+  );
+}
