diff --git a/package.json b/package.json
index 68e488d..3984f82 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,8 @@
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.4",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "zustand": "^5.0.0-rc.2"
   },
   "devDependencies": {
     "@types/eslint": "^8.56.10",
diff --git a/public/logo.svg b/public/logo.svg
new file mode 100644
index 0000000..e6fe743
--- /dev/null
+++ b/public/logo.svg
@@ -0,0 +1,9 @@
+<svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20.5" cy="20.5" r="20.5" fill="url(#paint0_linear_104_132)"/>
+<defs>
+<linearGradient id="paint0_linear_104_132" x1="20.5" y1="0" x2="20.5" y2="41" gradientUnits="userSpaceOnUse">
+<stop stop-color="#020817"/>
+<stop offset="1" stop-color="#2563EB" stop-opacity="0.47"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/app/problems/_components/mobile-dropdown.tsx b/src/app/problems/_components/mobile-dropdown.tsx
new file mode 100644
index 0000000..45b42df
--- /dev/null
+++ b/src/app/problems/_components/mobile-dropdown.tsx
@@ -0,0 +1,34 @@
+"use client";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import { MenuIcon } from "lucide-react";
+import { Button } from "~/components/ui/button";
+import { DropdownMenuSeparator } from "~/components/ui/dropdown-menu";
+import { useAuthStore } from "~/providers/auth-store-provider";
+
+export function MobileDropdown() {
+  const session = useAuthStore((state) => state.session);
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="h-9 w-9 sm:hidden" size="icon">
+          <MenuIcon />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem>Profile</DropdownMenuItem>
+        <DropdownMenuItem>Multiplayer</DropdownMenuItem>
+        {session && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>Sign Out</DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/src/app/problems/_components/navbar.tsx b/src/app/problems/_components/navbar.tsx
new file mode 100644
index 0000000..1670788
--- /dev/null
+++ b/src/app/problems/_components/navbar.tsx
@@ -0,0 +1,17 @@
+import Link from "next/link";
+import { MobileDropdown } from "./mobile-dropdown";
+import { Button } from "~/components/ui/button";
+
+export function Navbar() {
+  return (
+    <nav className="mb-2 flex h-14 items-center justify-between border-b px-8">
+      <Link href="/" className="flex items-center gap-2 text-xl font-bold">
+        FEPrep
+      </Link>
+      <div className="flex items-center gap-2">
+        <Button size="sm">Sign Up</Button>
+        <MobileDropdown />
+      </div>
+    </nav>
+  );
+}
diff --git a/src/app/problems/page.tsx b/src/app/problems/page.tsx
new file mode 100644
index 0000000..418f46b
--- /dev/null
+++ b/src/app/problems/page.tsx
@@ -0,0 +1,13 @@
+import { AuthStoreProvider } from "~/providers/auth-store-provider";
+import { Navbar } from "./_components/navbar";
+import { validateRequest } from "~/lib/auth/validate-request";
+
+export default async function Problems() {
+  const auth = await validateRequest();
+  return (
+    <AuthStoreProvider auth={auth}>
+      <Navbar />
+      <main className="px-8">Problems</main>
+    </AuthStoreProvider>
+  );
+}
diff --git a/src/providers/auth-store-provider.tsx b/src/providers/auth-store-provider.tsx
new file mode 100644
index 0000000..87f42fb
--- /dev/null
+++ b/src/providers/auth-store-provider.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { createContext, useContext, useRef } from "react";
+import { type validateRequest } from "~/lib/auth/validate-request";
+import { type AuthStore, createAuthStore } from "~/stores/auth-store";
+import { useStore } from "zustand";
+
+export type AuthStoreApi = ReturnType<typeof createAuthStore>;
+
+export const AuthStoreContext = createContext<AuthStoreApi | undefined>(
+  undefined,
+);
+
+export function AuthStoreProvider({
+  children,
+  auth,
+}: {
+  children: React.ReactNode;
+  auth: Awaited<ReturnType<typeof validateRequest>>;
+}) {
+  const storeRef = useRef<AuthStoreApi>();
+  if (!storeRef.current) {
+    storeRef.current = createAuthStore(auth);
+  }
+
+  return (
+    <AuthStoreContext.Provider value={storeRef.current}>
+      {children}
+    </AuthStoreContext.Provider>
+  );
+}
+
+export function useAuthStore<T>(selector: (state: AuthStore) => T): T {
+  const authStore = useContext(AuthStoreContext);
+  if (!authStore) {
+    throw new Error("useAuthStore must be used within an AuthStoreProvider");
+  }
+  return useStore(authStore, selector);
+}
diff --git a/src/stores/auth-store.ts b/src/stores/auth-store.ts
new file mode 100644
index 0000000..a84fbac
--- /dev/null
+++ b/src/stores/auth-store.ts
@@ -0,0 +1,19 @@
+import { createStore } from "zustand/vanilla";
+import { type validateRequest } from "~/lib/auth/validate-request";
+
+export type AuthState = Awaited<ReturnType<typeof validateRequest>>;
+
+export type AuthStore = AuthState;
+
+export const defaultAuthState: AuthState = {
+  user: null,
+  session: null,
+};
+
+export const createAuthStore = (
+  initialAuthState: AuthState = defaultAuthState,
+) => {
+  return createStore<AuthStore>()(() => ({
+    ...initialAuthState,
+  }));
+};