diff --git a/client/src/app/Footer.tsx b/client/src/app/Footer.tsx
new file mode 100644
index 0000000..c36bec3
--- /dev/null
+++ b/client/src/app/Footer.tsx
@@ -0,0 +1,27 @@
+import { IconBrandGithub } from "@tabler/icons-react";
+
+export default function Footer() {
+  return (
+    <footer className="footer text-base-content mx-1 mt-4 w-auto grid-flow-col items-center justify-between p-4 md:mx-16 lg:mx-40">
+      <div className="items-center">
+        <p>
+          &copy; 2023{" "}
+          <a href="https://nize.ph" target="_blank" rel="noreferrer" className="link-hover">
+            nize
+          </a>
+        </p>
+      </div>
+      <div className="items-center">
+        <a
+          href="https://github.com/nizewn/chessu"
+          target="_blank"
+          rel="noreferrer"
+          className="btn btn-ghost btn-sm gap-1 normal-case"
+        >
+          <IconBrandGithub className="inline-block" size={16} />
+          GitHub
+        </a>
+      </div>
+    </footer>
+  );
+}
diff --git a/client/src/app/Navbar.tsx b/client/src/app/Navbar.tsx
new file mode 100644
index 0000000..8e95b0f
--- /dev/null
+++ b/client/src/app/Navbar.tsx
@@ -0,0 +1,48 @@
+import { IconUser, IconSun, IconMoon } from "@tabler/icons-react";
+import Link from "next/link";
+
+export default function Navbar() {
+  return (
+    <header className="navbar mx-1 w-auto justify-center drop-shadow-sm md:mx-16 lg:mx-40">
+      <div className="flex-1">
+        <Link
+          href="/"
+          className="btn btn-ghost no-animation gap-1 text-xl normal-case hover:bg-transparent"
+        >
+          chessu
+          <span className="badge badge-sm">alpha</span>
+        </Link>
+      </div>
+      <div className="flex-none">
+        <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>
+      </div>
+    </header>
+  );
+}
diff --git a/client/src/app/PublicGames.tsx b/client/src/app/PublicGames.tsx
new file mode 100644
index 0000000..581de7e
--- /dev/null
+++ b/client/src/app/PublicGames.tsx
@@ -0,0 +1,51 @@
+import { IconRefresh } from "@tabler/icons-react";
+
+export default function PublicGames() {
+  return (
+    <div className="flex flex-col items-center">
+      <h2 className="mb-2 text-2xl font-bold leading-tight">
+        Public games{" "}
+        <div className="btn btn-sm btn-ghost">
+          <IconRefresh size={16} className="" />
+        </div>
+      </h2>
+
+      <div className="flex max-h-80 overflow-y-auto rounded-xl p-4">
+        <table className="table-compact lg:table-normal table rounded-none">
+          <thead>
+            <tr>
+              <th>Host</th>
+              <th>Opponent</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            {/* <tr>
+                <td>(empty)</td>
+                <td></td>
+                <td></td>
+              </tr> */}
+            <tr className="group">
+              <td>sample user</td>
+              <td>nize</td>
+              <th>
+                <button className="btn btn-ghost btn-xs focus:opacity-100 lg:opacity-0 lg:group-hover:opacity-100">
+                  Join
+                </button>
+              </th>
+            </tr>
+
+            {/* invisible last row to set max column widths */}
+            <tr aria-hidden="true" className="pointer-events-none opacity-0">
+              <td>WPlaceholder_Text</td>
+              <td>WPlaceholder_Text</td>
+              <th>
+                <button className="btn btn-xs">Join</button>
+              </th>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx
index 5345dd9..b26b8a8 100644
--- a/client/src/app/layout.tsx
+++ b/client/src/app/layout.tsx
@@ -1,77 +1,20 @@
 import "./globals.css";
-import { IconUser, IconSun, IconMoon, IconBrandGithub } from "@tabler/icons-react";
-import Link from "next/link";
+
+import Navbar from "./Navbar";
+import Footer from "./Footer";
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html>
       <head />
       <body>
-        <header className="navbar mx-1 w-auto justify-center drop-shadow-sm md:mx-16 lg:mx-40">
-          <div className="flex-1">
-            <Link
-              href="/"
-              className="btn btn-ghost no-animation gap-1 text-xl normal-case hover:bg-transparent"
-            >
-              chessu
-              <span className="badge badge-sm">alpha</span>
-            </Link>
-          </div>
-          <div className="flex-none">
-            <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>
-          </div>
-        </header>
+        <Navbar />
+
         <main className="bg-base-200 mx-1 my-8 flex min-h-[70vh] justify-center rounded-3xl shadow-md md:mx-16 lg:mx-40">
           {children}
         </main>
-        <footer className="footer text-base-content mx-1 mt-4 w-auto grid-flow-col items-center justify-between p-4 md:mx-16 lg:mx-40">
-          <div className="items-center">
-            <p>
-              &copy; 2023{" "}
-              <a href="https://nize.ph" target="_blank" rel="noreferrer" className="link-hover">
-                nize
-              </a>
-            </p>
-          </div>
-          <div className="items-center">
-            <a
-              href="https://github.com/nizewn/chessu"
-              target="_blank"
-              rel="noreferrer"
-              className="btn btn-ghost btn-sm gap-1 normal-case"
-            >
-              <IconBrandGithub className="inline-block" size={16} />
-              GitHub
-            </a>
-          </div>
-        </footer>
+
+        <Footer />
       </body>
     </html>
   );
diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
index ff491a6..b27e044 100644
--- a/client/src/app/page.tsx
+++ b/client/src/app/page.tsx
@@ -1,52 +1,10 @@
-import { IconRefresh } from "@tabler/icons-react";
+import PublicGames from "./PublicGames";
 
 export default function Home() {
   return (
     <div className="flex w-full flex-wrap items-center justify-evenly gap-4 px-4 py-10 lg:gap-0">
-      <div className="flex flex-col items-center">
-        <h2 className="mb-2 text-2xl font-bold leading-tight">
-          Public games{" "}
-          <div className="btn btn-sm btn-ghost">
-            <IconRefresh size={16} className="" />
-          </div>
-        </h2>
-        <div className="flex max-h-80 overflow-y-auto rounded-xl p-4">
-          <table className="table-compact lg:table-normal table rounded-none">
-            <thead>
-              <tr>
-                <th>Host</th>
-                <th>Opponent</th>
-                <th></th>
-              </tr>
-            </thead>
-            <tbody>
-              {/* <tr>
-                <td>(empty)</td>
-                <td></td>
-                <td></td>
-              </tr> */}
-              <tr className="group">
-                <td>sample user</td>
-                <td>nize</td>
-                <th>
-                  <button className="btn btn-ghost btn-xs focus:opacity-100 lg:opacity-0 lg:group-hover:opacity-100">
-                    Join
-                  </button>
-                </th>
-              </tr>
+      <PublicGames />
 
-              {/* invisible last row to set max column widths */}
-              <tr aria-hidden="true" className="pointer-events-none opacity-0">
-                <td>WPlaceholder_Text</td>
-                <td>WPlaceholder_Text</td>
-                <th>
-                  <button className="btn btn-xs">Join</button>
-                </th>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
       <div className="flex flex-col items-center">
         <h2 className="mb-4 text-xl font-bold leading-tight">Join from invite</h2>
         <div className="form-control">