diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 981b02f..9370b5d 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -10,15 +10,28 @@ export default function LoginPage() {
   const [password, setPassword] = useState("");
 
   return (
-    <ThemeProvider>
-      <NavbarStyleApple
-        navItems={[
-          { name: "Home", id: "/" },
-          { name: "Login", id: "/login" },
-          { name: "Register", id: "/register" },
-        ]}
-        brandName="FinanceAI"
-      />
+    <ThemeProvider 
+      defaultButtonVariant="text-stagger" 
+      defaultTextAnimation="entrance-slide" 
+      borderRadius="rounded" 
+      contentWidth="medium" 
+      sizing="medium" 
+      background="circleGradient" 
+      cardStyle="glass-elevated" 
+      primaryButtonStyle="gradient" 
+      secondaryButtonStyle="glass" 
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Login", id: "/login" },
+            { name: "Register", id: "/register" },
+          ]}
+          brandName="FinanceAI"
+        />
+      </div>
       <div className="min-h-screen flex items-center justify-center pt-24 pb-12">
         <div className="max-w-md w-full p-8 border rounded-lg shadow-lg bg-card">
           <h1 className="text-2xl font-bold mb-6 text-center">Login</h1>
@@ -41,7 +54,9 @@ export default function LoginPage() {
           </button>
         </div>
       </div>
-      <FooterCard logoText="FinanceAI" />
+      <div id="footer" data-section="footer">
+        <FooterCard logoText="FinanceAI" />
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file