diff --git a/packages/app/src/app/sign-in/[[...sign-in]]/page.tsx b/packages/app/src/app/sign-in/[[...sign-in]]/page.tsx
index 1cb397e..3302a9b 100644
--- a/packages/app/src/app/sign-in/[[...sign-in]]/page.tsx
+++ b/packages/app/src/app/sign-in/[[...sign-in]]/page.tsx
@@ -1,8 +1,26 @@
+'use client';
+
 import { SignIn } from '@clerk/nextjs';
+import { useCanvasTheme } from '@/store/canvasTheme';
 
 export default function SignInPage() {
+  const T = useCanvasTheme();
+
   return (
-    <main style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
+    <main
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        // Use the exact canvas background tokens so this page matches the
+        // product's dark / light canvas aesthetic.
+        background: T.canvasBg,
+        backgroundImage: `radial-gradient(circle, ${T.dotColor} 1px, transparent 1px)`,
+        backgroundSize: '24px 24px',
+        transition: 'background 0.2s',
+      }}
+    >
       <SignIn />
     </main>
   );
diff --git a/packages/app/src/app/sign-up/[[...sign-up]]/page.tsx b/packages/app/src/app/sign-up/[[...sign-up]]/page.tsx
index 75cf26b..c713df2 100644
--- a/packages/app/src/app/sign-up/[[...sign-up]]/page.tsx
+++ b/packages/app/src/app/sign-up/[[...sign-up]]/page.tsx
@@ -1,8 +1,26 @@
+'use client';
+
 import { SignUp } from '@clerk/nextjs';
+import { useCanvasTheme } from '@/store/canvasTheme';
 
 export default function SignUpPage() {
+  const T = useCanvasTheme();
+
   return (
-    <main style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
+    <main
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        // Use the exact canvas background tokens so this page matches the
+        // product's dark / light canvas aesthetic.
+        background: T.canvasBg,
+        backgroundImage: `radial-gradient(circle, ${T.dotColor} 1px, transparent 1px)`,
+        backgroundSize: '24px 24px',
+        transition: 'background 0.2s',
+      }}
+    >
       <SignUp />
     </main>
   );