diff --git a/frontend/e2e/auth-fixes.spec.ts b/frontend/e2e/auth-fixes.spec.ts
index e745906..ff851b7 100644
--- a/frontend/e2e/auth-fixes.spec.ts
+++ b/frontend/e2e/auth-fixes.spec.ts
@@ -2,14 +2,7 @@ import { test, expect, dismissCookieBanner } from './fixtures';
 
 /**
  * auth-fixes.spec.ts
- * E2E tests that specifically cover the auth bugs fixed in the last PR:
- *
- *  1. Login form is visible on dark background (correct text/input colors)
- *  2. Empty-field validation shows inline error (no navigation away)
- *  3. Wrong-credentials shows inline error message (not a blank screen)
- *  4. Guest login "Continue as Guest" button works end-to-end
- *  5. "Sign up" link navigates to /register
- *  6. "Sign in" link on register page navigates to /login
+ * E2E tests for auth pages in light mode — Login & Register.
  */
 
 test.describe('Login Page — Visual & Validation', () => {
@@ -18,20 +11,19 @@ test.describe('Login Page — Visual & Validation', () => {
     await dismissCookieBanner(page);
   });
 
-  test('h1 heading is visible against dark background', async ({ page }) => {
+  test('h1 heading is visible and reads "Log in"', async ({ page }) => {
     const heading = page.locator('h1');
     await expect(heading).toBeVisible();
-    await expect(heading).toContainText('Welcome Back');
+    await expect(heading).toContainText('Log in');
   });
 
-  test('email label is visible (dark-mode text color)', async ({ page }) => {
-    // Label must be visible — previously used text-gray-700 on dark bg
+  test('email label is visible', async ({ page }) => {
     const emailLabel = page.locator('label[for="email"]');
     await expect(emailLabel).toBeVisible();
     await expect(emailLabel).toContainText('Email');
   });
 
-  test('password label is visible (dark-mode text color)', async ({ page }) => {
+  test('password label is visible', async ({ page }) => {
     const passLabel = page.locator('label[for="password"]');
     await expect(passLabel).toBeVisible();
     await expect(passLabel).toContainText('Password');
@@ -50,31 +42,19 @@ test.describe('Login Page — Visual & Validation', () => {
   test('eye toggle reveals and hides password', async ({ page }) => {
     const input = page.locator('#password');
     await input.fill('secret123');
-
-    // Click the toggle button inside the password wrapper
     const toggle = page.locator('#password').locator('..').locator('button');
     await toggle.click();
     await expect(input).toHaveAttribute('type', 'text');
-
     await toggle.click();
     await expect(input).toHaveAttribute('type', 'password');
   });
 
-  test('remember me checkbox is visible and toggleable', async ({ page }) => {
-    const checkbox = page.locator('input[type="checkbox"]');
-    await expect(checkbox).toBeVisible();
-    await checkbox.check();
-    await expect(checkbox).toBeChecked();
-    await checkbox.uncheck();
-    await expect(checkbox).not.toBeChecked();
-  });
-
   test('forgot password link is visible', async ({ page }) => {
-    await expect(page.locator('text=Forgot password?')).toBeVisible();
+    await expect(page.locator('text=Forgot password')).toBeVisible();
   });
 
-  test('"Don\'t have an account? Sign up" link is visible', async ({ page }) => {
-    await expect(page.getByRole('link', { name: /sign up/i })).toBeVisible();
+  test('"Register Now" link is visible', async ({ page }) => {
+    await expect(page.getByRole('link', { name: /register now/i })).toBeVisible();
   });
 
   test('"Continue as Guest" button is visible', async ({ page }) => {
@@ -82,68 +62,52 @@ test.describe('Login Page — Visual & Validation', () => {
   });
 });
 
-test.describe('Login Page — Validation errors (inline, no toast spam)', () => {
+test.describe('Login Page — Validation errors', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/login');
     await dismissCookieBanner(page);
   });
 
   test('shows inline error when both fields are empty', async ({ page }) => {
-    await page.getByRole('button', { name: /sign in$/i }).click();
-
-    // Inline error banner should appear inside the form
-    const errorBanner = page.locator('div.bg-red-900\\/50, [class*="bg-red"]').first();
+    await page.getByRole('button', { name: /sign in/i }).click();
+    const errorBanner = page.locator('[class*="bg-red"]').first();
     await expect(errorBanner).toBeVisible({ timeout: 5000 });
     await expect(errorBanner).toContainText(/fill in all fields/i);
-
-    // Must NOT have navigated away
     await expect(page).toHaveURL('/login');
   });
 
   test('shows inline error when password field is empty', async ({ page }) => {
     await page.locator('#email').fill('user@test.com');
-    await page.getByRole('button', { name: /sign in$/i }).click();
-
-    const errorBanner = page.locator('div.bg-red-900\\/50, [class*="bg-red"]').first();
+    await page.getByRole('button', { name: /sign in/i }).click();
+    const errorBanner = page.locator('[class*="bg-red"]').first();
     await expect(errorBanner).toBeVisible({ timeout: 5000 });
     await expect(page).toHaveURL('/login');
   });
 
-  test('shows inline error (not just a toast) on wrong credentials', async ({ page }) => {
+  test('shows inline error on wrong credentials', async ({ page }) => {
     await page.locator('#email').fill('wrong@test.com');
     await page.locator('#password').fill('WrongPass123');
-    await page.getByRole('button', { name: /sign in$/i }).click();
-
-    // The inline red error box should appear
-    const errorBanner = page.locator('div.bg-red-900\\/50, [class*="bg-red"]').first();
+    await page.getByRole('button', { name: /sign in/i }).click();
+    const errorBanner = page.locator('[class*="bg-red"]').first();
     await expect(errorBanner).toBeVisible({ timeout: 10000 });
-
-    // Page should still be /login (no redirect)
     await expect(page).toHaveURL('/login');
   });
 
   test('sign-in button shows spinner while loading', async ({ page }) => {
     await page.locator('#email').fill('test@example.com');
     await page.locator('#password').fill('password123');
-
-    // Click and immediately check for spinner
-    await page.getByRole('button', { name: /sign in$/i }).click();
-
-    // The loader / spinner should appear briefly
-    const spinner = page.locator('.animate-spin');
-    // If the network is fast the spinner may disappear immediately — use a
-    // soft check rather than strict assertion
-    await spinner.isVisible().catch(() => false);
-    // Just assert the page stays on /login or moves to /dashboard — no crash
+    await page.getByRole('button', { name: /sign in/i }).click();
+    // Soft check — spinner may disappear fast on fast connections
+    await page.locator('.animate-spin').isVisible().catch(() => false);
     await expect(page.locator('body')).toBeVisible();
   });
 });
 
 test.describe('Login → Register navigation', () => {
-  test('clicking Sign up navigates to /register', async ({ page }) => {
+  test('clicking Register Now navigates to /register', async ({ page }) => {
     await page.goto('/login');
     await dismissCookieBanner(page);
-    await page.getByRole('link', { name: /sign up/i }).click();
+    await page.getByRole('link', { name: /register now/i }).click();
     await expect(page).toHaveURL('/register');
   });
 
@@ -157,7 +121,6 @@ test.describe('Login → Register navigation', () => {
 
 test.describe('Guest Login Flow', () => {
   test.beforeEach(async ({ page }) => {
-    // Start from a clean state
     await page.goto('/privacy-policy');
     await page.evaluate(() => localStorage.clear());
   });
@@ -174,11 +137,8 @@ test.describe('Guest Login Flow', () => {
     await dismissCookieBanner(page);
     await page.getByRole('button', { name: /continue as guest/i }).click();
     await expect(page).toHaveURL('/dashboard', { timeout: 15000 });
-
-    // Navigate to a protected page
     await page.goto('/tasks');
     await expect(page).toHaveURL('/tasks');
-
     await page.goto('/pomodoro');
     await expect(page).toHaveURL('/pomodoro');
   });
@@ -188,8 +148,6 @@ test.describe('Guest Login Flow', () => {
     await dismissCookieBanner(page);
     await page.getByRole('button', { name: /continue as guest/i }).click();
     await expect(page).toHaveURL('/dashboard', { timeout: 15000 });
-
-    // Try to go back to login — should be redirected
     await page.goto('/login');
     await expect(page).toHaveURL('/dashboard');
   });
diff --git a/frontend/e2e/auth.spec.ts b/frontend/e2e/auth.spec.ts
index 79e829a..0b672bf 100644
--- a/frontend/e2e/auth.spec.ts
+++ b/frontend/e2e/auth.spec.ts
@@ -8,25 +8,35 @@ test.describe('Registration Page', () => {
     await dismissCookieBanner(page);
   });
 
-  test('should display all form fields and buttons', async ({ page }) => {
-    await expect(page.locator('h1')).toContainText('Create an Account');
+  test('should display register heading', async ({ page }) => {
+    await expect(page.locator('h1')).toContainText('Register');
+  });
+
+  test('should show step 1 fields by default (name + email)', async ({ page }) => {
     await expect(page.locator('#name')).toBeVisible();
     await expect(page.locator('#email')).toBeVisible();
-    await expect(page.locator('#password')).toBeVisible();
-    await expect(page.locator('#confirmPassword')).toBeVisible();
-    await expect(page.getByRole('button', { name: /create account/i })).toBeVisible();
+    await expect(page.getByRole('button', { name: /next/i })).toBeVisible();
     await expect(page.getByRole('button', { name: /start as guest/i })).toBeVisible();
     await expect(page.getByRole('link', { name: /sign in/i })).toBeVisible();
   });
 
-  test('should reject empty form submission', async ({ page }) => {
-    await page.getByRole('button', { name: /create account/i }).click();
-    await expect(page.locator('text=Please fill in all fields')).toBeVisible();
+  test('should reject empty step 1 submission', async ({ page }) => {
+    await page.getByRole('button', { name: /next/i }).click();
+    await expect(page.locator('[class*="bg-red"]').first()).toBeVisible({ timeout: 5000 });
+  });
+
+  test('should advance to step 2 with valid name + email', async ({ page }) => {
+    await page.locator('#name').fill('Test User');
+    await page.locator('#email').fill('test@example.com');
+    await page.getByRole('button', { name: /next/i }).click();
+    await expect(page.locator('#password')).toBeVisible();
+    await expect(page.locator('#confirmPassword')).toBeVisible();
   });
 
   test('should reject password shorter than 8 characters', async ({ page }) => {
     await page.locator('#name').fill('Test User');
     await page.locator('#email').fill('short@test.com');
+    await page.getByRole('button', { name: /next/i }).click();
     await page.locator('#password').fill('abc12');
     await page.locator('#confirmPassword').fill('abc12');
     await page.getByRole('button', { name: /create account/i }).click();
@@ -36,6 +46,7 @@ test.describe('Registration Page', () => {
   test('should reject password without a letter', async ({ page }) => {
     await page.locator('#name').fill('Test User');
     await page.locator('#email').fill('noletter@test.com');
+    await page.getByRole('button', { name: /next/i }).click();
     await page.locator('#password').fill('12345678');
     await page.locator('#confirmPassword').fill('12345678');
     await page.getByRole('button', { name: /create account/i }).click();
@@ -45,6 +56,7 @@ test.describe('Registration Page', () => {
   test('should reject password without a number', async ({ page }) => {
     await page.locator('#name').fill('Test User');
     await page.locator('#email').fill('nonumber@test.com');
+    await page.getByRole('button', { name: /next/i }).click();
     await page.locator('#password').fill('abcdefgh');
     await page.locator('#confirmPassword').fill('abcdefgh');
     await page.getByRole('button', { name: /create account/i }).click();
@@ -54,6 +66,7 @@ test.describe('Registration Page', () => {
   test('should reject mismatched passwords', async ({ page }) => {
     await page.locator('#name').fill('Test User');
     await page.locator('#email').fill('mismatch@test.com');
+    await page.getByRole('button', { name: /next/i }).click();
     await page.locator('#password').fill('TestPass123');
     await page.locator('#confirmPassword').fill('Different456');
     await page.getByRole('button', { name: /create account/i }).click();
@@ -61,29 +74,32 @@ test.describe('Registration Page', () => {
   });
 
   test('should show password strength indicator', async ({ page }) => {
+    await page.locator('#name').fill('Test User');
+    await page.locator('#email').fill('pw@test.com');
+    await page.getByRole('button', { name: /next/i }).click();
     await page.locator('#password').fill('abc');
-    // The PasswordStrengthIndicator should render
     await expect(page.locator('text=weak')).toBeVisible();
-
     await page.locator('#password').fill('abcdefgh');
     await expect(page.locator('text=fair')).toBeVisible();
   });
 
   test('should show passwords match indicator', async ({ page }) => {
+    await page.locator('#name').fill('Test User');
+    await page.locator('#email').fill('match@test.com');
+    await page.getByRole('button', { name: /next/i }).click();
     await page.locator('#password').fill('TestPass123');
     await page.locator('#confirmPassword').fill('TestPass123');
     await expect(page.locator('text=Passwords match')).toBeVisible();
   });
 
   test('should toggle password visibility', async ({ page }) => {
+    await page.locator('#name').fill('Test User');
+    await page.locator('#email').fill('toggle@test.com');
+    await page.getByRole('button', { name: /next/i }).click();
     const passwordInput = page.locator('#password');
     await passwordInput.fill('TestPass123');
-
-    // Initially hidden
     await expect(passwordInput).toHaveAttribute('type', 'password');
-
-    // Click eye button to show
-    await page.locator('#password ~ button, [id="password"] + button, #password').locator('..').locator('button').click();
+    await page.locator('#password').locator('..').locator('button').click();
     await expect(passwordInput).toHaveAttribute('type', 'text');
   });
 
@@ -100,51 +116,38 @@ test.describe('Login Page', () => {
     await dismissCookieBanner(page);
   });
 
+  test('should display login heading', async ({ page }) => {
+    await expect(page.locator('h1')).toContainText('Log in');
+  });
+
   test('should display all form fields and buttons', async ({ page }) => {
-    await expect(page.locator('h1')).toContainText('Welcome Back');
     await expect(page.locator('#email')).toBeVisible();
     await expect(page.locator('#password')).toBeVisible();
-    await expect(page.getByRole('button', { name: /sign in$/i })).toBeVisible();
+    await expect(page.getByRole('button', { name: /sign in/i })).toBeVisible();
     await expect(page.getByRole('button', { name: /continue as guest/i })).toBeVisible();
-    await expect(page.getByRole('link', { name: /sign up/i })).toBeVisible();
-  });
-
-  test('should reject empty password on submit', async ({ page }) => {
-    await page.locator('#email').fill('user@test.com');
-    await page.getByRole('button', { name: /sign in$/i }).click();
-    await expect(page.locator('text=Please fill in all fields')).toBeVisible();
+    await expect(page.getByRole('link', { name: /register now/i })).toBeVisible();
   });
 
-  test('should reject empty email on submit', async ({ page }) => {
-    await page.locator('#password').fill('password123');
-    // Browser HTML5 validation on type="email" will prevent submission,
-    // so we need to remove the type attribute first
-    await page.locator('#email').evaluate((el) => el.removeAttribute('type'));
-    await page.getByRole('button', { name: /sign in$/i }).click();
-    await expect(page.locator('text=Please fill in all fields')).toBeVisible();
+  test('should reject empty form submission', async ({ page }) => {
+    await page.getByRole('button', { name: /sign in/i }).click();
+    await expect(page.locator('[class*="bg-red"]').first()).toBeVisible({ timeout: 5000 });
+    await expect(page).toHaveURL('/login');
   });
 
   test('should toggle password visibility', async ({ page }) => {
     const passwordInput = page.locator('#password');
     await passwordInput.fill('TestPass123');
     await expect(passwordInput).toHaveAttribute('type', 'password');
-
-    // Click the eye toggle button
     await page.locator('#password').locator('..').locator('button').click();
     await expect(passwordInput).toHaveAttribute('type', 'text');
   });
 
-  test('should have remember me checkbox', async ({ page }) => {
-    const checkbox = page.locator('input[type="checkbox"]');
-    await expect(checkbox).toBeVisible();
-  });
-
   test('should have forgot password link', async ({ page }) => {
-    await expect(page.locator('text=Forgot password?')).toBeVisible();
+    await expect(page.locator('text=Forgot password')).toBeVisible();
   });
 
   test('should navigate to register page', async ({ page }) => {
-    await page.getByRole('link', { name: /sign up/i }).click();
+    await page.getByRole('link', { name: /register now/i }).click();
     await expect(page).toHaveURL('/register');
   });
 });
@@ -165,11 +168,8 @@ test.describe('Guest Login', () => {
   test('should login as guest and reach dashboard', async ({ page }) => {
     await page.goto('/login');
     await dismissCookieBanner(page);
-
     const guestBtn = page.getByRole('button', { name: /continue as guest/i });
     await guestBtn.click();
-
-    // Should navigate to dashboard (may take a moment for API call)
     await expect(page).toHaveURL('/dashboard', { timeout: 15000 });
   });
 });
@@ -183,35 +183,34 @@ test.describe('Full Registration + Login Flow', () => {
   };
 
   test('should register → land on dashboard → logout → login again', async ({ page }) => {
-    // 1. Register
+    // 1. Register - step 1
     await page.goto('/register');
     await dismissCookieBanner(page);
-
     await page.locator('#name').fill(testUser.name);
     await page.locator('#email').fill(testUser.email);
+    await page.getByRole('button', { name: /next/i }).click();
+
+    // 2. Register - step 2
     await page.locator('#password').fill(testUser.password);
     await page.locator('#confirmPassword').fill(testUser.password);
     await page.getByRole('button', { name: /create account/i }).click();
 
-    // 2. Should land on dashboard
+    // 3. Should land on dashboard
     await expect(page).toHaveURL('/dashboard', { timeout: 15000 });
 
-    // 3. Logout — navigate to login
-    await page.goto('/login');
+    // 4. Logout — clear auth and navigate to login
     await page.evaluate(() => {
       localStorage.removeItem('isAuthenticated');
       localStorage.removeItem('isGuest');
     });
-    await page.reload();
-
-    // 4. Should be on login page
+    await page.goto('/login');
     await expect(page).toHaveURL('/login');
 
     // 5. Login with same credentials
     await dismissCookieBanner(page);
     await page.locator('#email').fill(testUser.email);
     await page.locator('#password').fill(testUser.password);
-    await page.getByRole('button', { name: /sign in$/i }).click();
+    await page.getByRole('button', { name: /sign in/i }).click();
 
     // 6. Should land on dashboard again
     await expect(page).toHaveURL('/dashboard', { timeout: 15000 });
diff --git a/frontend/public/ai_elements.png b/frontend/public/ai_elements.png
new file mode 100644
index 0000000..0c19151
Binary files /dev/null and b/frontend/public/ai_elements.png differ
diff --git a/frontend/public/deep_work_elements.png b/frontend/public/deep_work_elements.png
new file mode 100644
index 0000000..5723695
Binary files /dev/null and b/frontend/public/deep_work_elements.png differ
diff --git a/frontend/public/hero_light.png b/frontend/public/hero_light.png
new file mode 100644
index 0000000..aeb7d88
Binary files /dev/null and b/frontend/public/hero_light.png differ
diff --git a/frontend/public/plan_focus.png b/frontend/public/plan_focus.png
new file mode 100644
index 0000000..f9e314b
Binary files /dev/null and b/frontend/public/plan_focus.png differ
diff --git a/frontend/public/productivity_element.png b/frontend/public/productivity_element.png
new file mode 100644
index 0000000..89104de
Binary files /dev/null and b/frontend/public/productivity_element.png differ
diff --git a/frontend/public/sportify_elements.png b/frontend/public/sportify_elements.png
new file mode 100644
index 0000000..61928dc
Binary files /dev/null and b/frontend/public/sportify_elements.png differ
diff --git a/frontend/public/time_tracker_elements.png b/frontend/public/time_tracker_elements.png
new file mode 100644
index 0000000..6b8f738
Binary files /dev/null and b/frontend/public/time_tracker_elements.png differ
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c39752c..92bfc23 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -95,7 +95,7 @@ const App = () => {
   return (
     <DeviceProvider>
       <QueryClientProvider client={queryClient}>
-        <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+        <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
           <AuthProvider>
             <GlobalTimer />
             <CookieConsentBanner />
diff --git a/frontend/src/components/ProtectedRoute.tsx b/frontend/src/components/ProtectedRoute.tsx
index a8f67e8..367753e 100644
--- a/frontend/src/components/ProtectedRoute.tsx
+++ b/frontend/src/components/ProtectedRoute.tsx
@@ -14,7 +14,7 @@ export const ProtectedRoute = () => {
   }
 
   if (!isAuthenticated) {
-    return <Navigate to="/login" replace />;
+    return <Navigate to="/" replace />;
   }
 
   return <Outlet />;
diff --git a/frontend/src/components/TopBar.tsx b/frontend/src/components/TopBar.tsx
index 29351f8..2b0d746 100644
--- a/frontend/src/components/TopBar.tsx
+++ b/frontend/src/components/TopBar.tsx
@@ -72,8 +72,8 @@ export function TopBar({ onMenuClick }: TopBarProps) {
   };
 
   const handleLogout = () => {
+    navigate('/');
     logout();
-    navigate('/login');
   };
 
   const themes = [
diff --git a/frontend/src/components/landing-page-modern/cta/FinalCTASection.tsx b/frontend/src/components/landing-page-modern/cta/FinalCTASection.tsx
index 7d17d3f..483366f 100644
--- a/frontend/src/components/landing-page-modern/cta/FinalCTASection.tsx
+++ b/frontend/src/components/landing-page-modern/cta/FinalCTASection.tsx
@@ -6,28 +6,70 @@ export const FinalCTASection = () => {
   const navigate = useNavigate();
 
   return (
-    <section id="pricing" className="relative w-full bg-transparent py-20 md:py-32 lg:py-40 px-4 md:px-8 lg:px-20">
-      <div className="mx-auto max-w-4xl text-center">
-        {/* Main CTA */}
+    <section
+      id="pricing"
+      className="relative w-full overflow-hidden py-24 md:py-36 px-6 lg:px-16 xl:px-24"
+    >
+      {/* Premium gradient background */}
+      <div
+        className="absolute inset-0 -z-10"
+        style={{
+          background: 'linear-gradient(135deg, #eef2ff 0%, #f5f3ff 40%, #fdf4ff 70%, #fff7ed 100%)',
+        }}
+      />
+      {/* Top border accent */}
+      <div
+        className="absolute top-0 left-0 right-0 h-px"
+        style={{
+          background: 'linear-gradient(90deg, transparent, rgba(109,94,249,0.4), transparent)',
+        }}
+      />
+      {/* Decorative blobs */}
+      <div
+        className="absolute top-1/2 left-1/4 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] rounded-full pointer-events-none"
+        style={{
+          background: 'radial-gradient(circle, rgba(109,94,249,0.08) 0%, transparent 70%)',
+          filter: 'blur(60px)',
+        }}
+      />
+      <div
+        className="absolute top-1/2 right-1/4 translate-x-1/2 -translate-y-1/2 w-[400px] h-[400px] rounded-full pointer-events-none"
+        style={{
+          background: 'radial-gradient(circle, rgba(245,158,11,0.07) 0%, transparent 70%)',
+          filter: 'blur(60px)',
+        }}
+      />
+
+      <div className="mx-auto max-w-4xl text-center relative">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6 }}
           viewport={{ once: true }}
         >
-          <h2 className="text-5xl md:text-6xl lg:text-7xl font-black text-white mb-6 leading-tight">
-            Ready to Transform Your Workflow?
+
+          <h2 className="text-4xl md:text-5xl lg:text-7xl font-black text-slate-900 mb-6 leading-[0.95] tracking-tight">
+            Ready to do your<br />
+            <span
+              style={{
+                background: 'linear-gradient(135deg, #6D5EF9 0%, #a78bfa 100%)',
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+              }}
+            >
+              best work ever?
+            </span>
           </h2>
 
-          <p className="text-lg md:text-xl text-slate-300 mb-12 max-w-2xl mx-auto leading-relaxed">
-            Join thousands of professionals who have reclaimed their focus and
-            transformed how they work. Start your free trial today.
+          <p className="text-lg md:text-xl text-slate-500 mb-12 max-w-2xl mx-auto leading-relaxed">
+            Join thousands of people who have reclaimed their focus and
+            transformed how they work — completely free, no credit card required.
           </p>
         </motion.div>
 
         {/* CTA Buttons */}
         <motion.div
-          className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center items-center"
+          className="flex flex-col sm:flex-row gap-4 justify-center items-center"
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6, delay: 0.1 }}
@@ -35,36 +77,47 @@ export const FinalCTASection = () => {
         >
           <motion.button
             onClick={() => navigate('/register')}
-            className="group relative px-8 py-4 bg-orange-500 hover:bg-orange-600 text-white font-semibold rounded-lg overflow-hidden transition-colors"
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
+            className="group relative px-8 py-4 text-white font-bold rounded-xl overflow-hidden transition-all shadow-lg shadow-indigo-500/25 hover:shadow-indigo-500/40"
+            style={{
+              background: 'linear-gradient(135deg, #6D5EF9 0%, #8B7CF6 100%)',
+            }}
+            whileHover={{ scale: 1.04 }}
+            whileTap={{ scale: 0.97 }}
           >
+            <div className="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity" />
             <span className="relative flex items-center gap-2">
-              Start Free Trial
-              <ArrowRight className="w-4 h-4" />
+              Get Started Free
+              <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
             </span>
           </motion.button>
 
           <motion.button
-            onClick={() => window.open('https://demo.focusmaster.dev', '_blank')}
-            className="px-8 py-4 border border-slate-700 hover:border-indigo-500/50 text-slate-300 hover:text-indigo-400 font-semibold rounded-lg transition-all hover:bg-indigo-500/5"
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
+            onClick={() => navigate('/login')}
+            className="px-8 py-4 border border-slate-200 hover:border-indigo-300 text-slate-600 hover:text-indigo-700 font-semibold rounded-xl transition-all hover:bg-indigo-50/60 bg-white/80 backdrop-blur-sm"
+            whileHover={{ scale: 1.04 }}
+            whileTap={{ scale: 0.97 }}
           >
-            Schedule a Demo
+            Sign In
           </motion.button>
         </motion.div>
 
-        {/* Trust statement */}
-        <motion.p
-          className="mt-12 text-sm text-slate-500 font-mono uppercase tracking-widest"
+        {/* Trust micro-copy */}
+        <motion.div
+          className="mt-10 flex flex-wrap items-center justify-center gap-6 text-sm text-slate-400"
           initial={{ opacity: 0 }}
           whileInView={{ opacity: 1 }}
           transition={{ duration: 0.6, delay: 0.2 }}
           viewport={{ once: true }}
         >
-           • Trusted YourSelf
-        </motion.p>
+          {['No credit card', 'Free forever', 'Open source'].map((item) => (
+            <span key={item} className="flex items-center gap-1.5">
+              <svg className="w-3.5 h-3.5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+              {item}
+            </span>
+          ))}
+        </motion.div>
       </div>
     </section>
   );
diff --git a/frontend/src/components/landing-page-modern/detailed-features/DetailedFeaturesSection.tsx b/frontend/src/components/landing-page-modern/detailed-features/DetailedFeaturesSection.tsx
index a49c8b8..322159d 100644
--- a/frontend/src/components/landing-page-modern/detailed-features/DetailedFeaturesSection.tsx
+++ b/frontend/src/components/landing-page-modern/detailed-features/DetailedFeaturesSection.tsx
@@ -5,13 +5,6 @@ import {
   BarChart2,
   Music2,
   Clock,
-  Play,
-  Pause,
-  SkipBack,
-  SkipForward,
-  Coffee,
-  LogOut,
-  MessageSquare,
   Bot,
 } from 'lucide-react';
 
@@ -117,7 +110,7 @@ export const DetailedFeaturesSection = () => {
                 {/* Text Content */}
                 <div className="lg:w-1/2 space-y-6">
                   {/* Badge */}
-                  <div className="inline-flex items-center gap-3 px-4 py-2 rounded-lg bg-slate-900/50">
+                  <div className="inline-flex items-center gap-3 px-4 py-2 rounded-lg bg-slate-100/80">
                     <div className={`p-2 rounded-lg ${colors.bg}`}>
                       <Icon className={`w-5 h-5 ${colors.text}`} />
                     </div>
@@ -127,7 +120,7 @@ export const DetailedFeaturesSection = () => {
                   </div>
 
                   {/* Title */}
-                  <h3 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white tracking-tight leading-tight">
+                  <h3 className="text-2xl md:text-3xl lg:text-4xl font-bold text-slate-900 tracking-tight leading-tight">
                     {feature.title}
                   </h3>
 
@@ -145,7 +138,7 @@ export const DetailedFeaturesSection = () => {
                         <div
                           className={`w-1.5 h-1.5 rounded-full flex-shrink-0 mt-2.5 ${colors.dot}`}
                         />
-                        <span className="text-slate-300 text-lg leading-relaxed">
+                        <span className="text-slate-600 text-lg leading-relaxed">
                           {feat}
                         </span>
                       </motion.li>
@@ -161,222 +154,49 @@ export const DetailedFeaturesSection = () => {
                   transition={{ duration: 0.6 }}
                   viewport={{ once: true }}
                 >
-                  <div
-                    className={`p-6 rounded-2xl border border-slate-800 bg-slate-950/80 backdrop-blur-md shadow-lg relative overflow-hidden`}
-                  >
-                    
-                    <div className={`aspect-video rounded-xl flex items-center justify-center p-4`}>
-                      {/* Focus Engine (Timer) */}
-                      {feature.subtitle === 'Focus Engine' && (
-                        <div className="flex flex-col items-center justify-center w-full">
-                          <div className="relative w-36 h-36 rounded-full border-4 border-indigo-500/20 flex items-center justify-center">
-                            {/* Glowing circular progress mask */}
-                            <svg className="absolute -inset-1 w-[152px] h-[152px] -rotate-90">
-                              <circle
-                                cx="76"
-                                cy="76"
-                                r="70"
-                                fill="transparent"
-                                stroke="#4f46e5"
-                                strokeWidth="4"
-                                strokeDasharray="440"
-                                strokeDashoffset="110"
-                                className=""
-                              />
-                            </svg>
-                            <div className="flex flex-col items-center">
-                              <span className="text-4xl font-mono font-bold text-white tracking-wider">
-                                25:00
-                              </span>
-                              <span className="text-[10px] uppercase tracking-widest text-indigo-400 font-semibold mt-1">
-                                Focus
-                              </span>
-                            </div>
-                          </div>
-                          <div className="flex gap-4 mt-6">
-                            <button className="w-10 h-10 rounded-full bg-indigo-600 hover:bg-indigo-500 flex items-center justify-center text-white transition-transform hover:scale-105 shadow-md">
-                              <Play className="w-4 h-4 fill-white ml-0.5" />
-                            </button>
-                            <button className="w-10 h-10 rounded-full bg-slate-800 hover:bg-slate-700 flex items-center justify-center text-slate-300 transition-transform hover:scale-105 border border-slate-700">
-                              <Coffee className="w-4 h-4" />
-                            </button>
-                          </div>
-                        </div>
-                      )}
-
-                      {/* Task Manager (Kanban) */}
-                      {feature.subtitle === 'Task Manager' && (
-                        <div className="flex gap-4 w-full h-full text-left">
-                          {/* Column 1 */}
-                          <div className="flex-1 flex flex-col bg-slate-900/60 rounded-xl p-3 border border-slate-800/80">
-                            <span className="text-[10px] font-bold text-emerald-400 uppercase tracking-wider mb-3">To Do</span>
-                            <div className="space-y-2 overflow-y-auto pr-0.5">
-                              <div className="bg-slate-950 p-2.5 rounded-lg border border-slate-800 hover:border-slate-700 transition-all cursor-pointer">
-                                <p className="text-xs font-semibold text-white">Database Migration</p>
-                                <span className="inline-block mt-2 px-1.5 py-0.5 text-[8px] bg-indigo-500/10 text-indigo-400 rounded font-bold uppercase">High</span>
-                              </div>
-                              <div className="bg-slate-950 p-2.5 rounded-lg border border-slate-800">
-                                <p className="text-xs font-semibold text-white">Update API docs</p>
-                              </div>
-                            </div>
-                          </div>
-                          {/* Column 2 */}
-                          <div className="flex-1 flex flex-col bg-slate-900/60 rounded-xl p-3 border border-slate-800/80">
-                            <div className="flex justify-between items-center mb-3">
-                              <span className="text-[10px] font-bold text-indigo-400 uppercase tracking-wider">In Progress</span>
-                              <span className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse" />
-                            </div>
-                            <div className="space-y-2">
-                              <div className="bg-slate-950 p-2.5 rounded-lg border border-indigo-500/30">
-                                <p className="text-xs font-semibold text-white">Design Landing Page</p>
-                                <div className="mt-3 w-full bg-slate-800 h-1 rounded-full overflow-hidden">
-                                  <div className="bg-indigo-500 h-full w-[70%]" />
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      )}
-
-                      {/* Productivity Analytics */}
-                      {feature.subtitle === 'Productivity Analytics' && (
-                        <div className="flex flex-col w-full h-full justify-between">
-                          <div className="flex justify-between items-center border-b border-slate-800 pb-2">
-                            <span className="text-[10px] font-bold uppercase tracking-wider text-slate-400">Weekly Performance</span>
-                            <span className="text-[10px] px-2 py-0.5 bg-violet-500/20 text-violet-400 rounded-full font-bold">Peak Focus: 4.8h</span>
-                          </div>
-                          <div className="flex items-end justify-between w-full px-4 h-32 gap-3 mt-4">
-                            {[
-                              { h: 30, day: 'Mon' },
-                              { h: 60, day: 'Tue' },
-                              { h: 45, day: 'Wed' },
-                              { h: 90, day: 'Thu' },
-                              { h: 70, day: 'Fri' }
-                            ].map((item, i) => (
-                              <div key={i} className="flex-1 flex flex-col items-center gap-2">
-                                <div className="w-full bg-slate-900 rounded-t-lg h-24 relative overflow-hidden flex items-end">
-                                  <motion.div
-                                    initial={{ height: 0 }}
-                                    whileInView={{ height: `${item.h}%` }}
-                                    transition={{ duration: 1, delay: i * 0.1 }}
-                                    className="w-full bg-violet-600 rounded-t-lg"
-                                  />
-                                </div>
-                                <span className="text-[9px] text-slate-500 font-bold uppercase">{item.day}</span>
-                              </div>
-                            ))}
-                          </div>
-                        </div>
-                      )}
-
-                      {/* Spotify Control */}
-                      {feature.subtitle === 'Spotify Control' && (
-                        <div className="flex flex-col bg-slate-900/60 p-4 rounded-xl border border-slate-800/80 w-full max-w-[340px]">
-                          <div className="flex items-center gap-4">
-                            {/* album cover art placeholder */}
-                            <div className="w-16 h-16 rounded-lg bg-pink-600 flex items-center justify-center relative overflow-hidden flex-shrink-0">
-                              <Music2 className="w-8 h-8 text-white" />
-                            </div>
-                            <div className="min-w-0 flex-1 text-left">
-                              <h4 className="text-sm font-bold text-white truncate">Lofi Focus Beats</h4>
-                              <p className="text-xs text-rose-400 truncate mt-0.5">FocusMaster Radio</p>
-                              <div className="mt-3 flex items-center gap-1.5">
-                                <span className="w-1.5 h-1.5 rounded-full bg-rose-500 animate-pulse" />
-                                <span className="text-[9px] uppercase tracking-wider text-slate-400 font-bold">Connected</span>
-                              </div>
-                            </div>
-                          </div>
-                          {/* Seek bar */}
-                          <div className="mt-4">
-                            <div className="w-full bg-slate-800 h-1 rounded-full overflow-hidden">
-                              <div className="bg-rose-500 h-full w-[45%]" />
-                            </div>
-                            <div className="flex justify-between items-center mt-1.5">
-                              <span className="text-[9px] text-slate-500 font-mono">1:24</span>
-                              <span className="text-[9px] text-slate-500 font-mono">3:45</span>
-                            </div>
-                          </div>
-                          {/* Controls */}
-                          <div className="flex items-center justify-center gap-6 mt-2">
-                            <button className="text-slate-400 hover:text-white transition-colors">
-                              <SkipBack className="w-4 h-4 fill-current" />
-                            </button>
-                            <button className="w-8 h-8 rounded-full bg-rose-600 hover:bg-rose-500 text-white flex items-center justify-center transition-transform hover:scale-110 shadow-md">
-                              <Pause className="w-3.5 h-3.5 fill-white" />
-                            </button>
-                            <button className="text-slate-400 hover:text-white transition-colors">
-                              <SkipForward className="w-4 h-4 fill-current" />
-                            </button>
-                          </div>
-                        </div>
-                      )}
-
-                      {/* Time Tracking */}
-                      {feature.subtitle === 'Time Tracking' && (
-                        <div className="flex flex-col bg-slate-900/60 p-4 rounded-xl border border-slate-800/80 w-full max-w-[340px] text-left">
-                          <div className="flex justify-between items-center mb-4">
-                            <span className="text-[10px] font-bold text-amber-500 uppercase tracking-wider">Shift Tracker</span>
-                            <div className="flex items-center gap-1.5 bg-amber-500/10 px-2.5 py-0.5 rounded-full border border-amber-500/20">
-                              <span className="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse" />
-                              <span className="text-[8px] uppercase tracking-wider text-amber-400 font-bold">Clocked In</span>
-                            </div>
-                          </div>
-                          <div className="mb-4">
-                            <span className="text-[10px] uppercase tracking-wider text-slate-400 font-bold block mb-1">Time Elapsed</span>
-                            <span className="text-3xl font-mono font-bold text-white tracking-widest">04:32:18</span>
-                          </div>
-                          <div className="flex gap-2">
-                            <button className="flex-1 py-2 rounded-lg bg-slate-950 hover:bg-slate-900 border border-slate-800 text-slate-300 font-bold text-xs uppercase tracking-wide transition-colors flex items-center justify-center gap-1.5">
-                              <Coffee className="w-3.5 h-3.5" /> Break
-                            </button>
-                            <button className="flex-1 py-2 rounded-lg bg-amber-600 hover:bg-amber-700 text-white font-bold text-xs uppercase tracking-wide transition-colors flex items-center justify-center gap-1.5">
-                              <LogOut className="w-3.5 h-3.5" /> Clock Out
-                            </button>
-                          </div>
-                        </div>
-                      )}
-
-                      {/* AI Coach */}
-                      {feature.subtitle === 'FocusMaster AI' && (
-                        <div className="flex flex-col w-full h-full text-left relative overflow-hidden justify-center space-y-4">
-                          {/* Shimmer effect */}
-                          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-500/10 to-transparent -translate-x-[100%] animate-[shimmer_3s_infinite] pointer-events-none" />
-                          
-                          <div className="flex justify-between items-center mb-4 relative z-10">
-                            <div className="flex items-center gap-2">
-                              <Bot className="w-5 h-5 text-cyan-400" />
-                              <span className="text-xs font-bold text-white tracking-wide">FocusMaster AI</span>
-                            </div>
-                            <span className="px-2 py-0.5 rounded-full bg-cyan-500/20 text-cyan-300 text-[9px] font-bold uppercase">Online</span>
-                          </div>
-                          
-                          <div className="space-y-3 relative z-10">
-                            <div className="bg-slate-800/50 rounded-lg p-3 border border-slate-700/50">
-                              <p className="text-[10px] text-slate-300 leading-relaxed">
-                                <span className="font-semibold text-cyan-400">Insight:</span> I noticed your focus drops off around the 40-minute mark. I've adjusted your timer to 35 minutes for optimal retention.
-                              </p>
-                            </div>
-                            
-                            <div className="bg-slate-800/50 rounded-lg p-3 border border-slate-700/50 ml-6">
-                              <div className="flex items-center gap-2 mb-1">
-                                <MessageSquare className="w-3 h-3 text-slate-400" />
-                                <span className="text-[9px] text-slate-400 font-semibold uppercase">You</span>
-                              </div>
-                              <p className="text-[10px] text-slate-300">Generate a quiz from my physics notes.</p>
-                            </div>
-
-                            <div className="bg-cyan-950/40 rounded-lg p-3 border border-cyan-800/50">
-                              <p className="text-[10px] text-slate-300">
-                                Generating 5 MCQs on <span className="font-semibold text-cyan-300">Quantum Mechanics.pdf</span>...
-                              </p>
-                              <div className="mt-2 h-1 w-full bg-slate-800 rounded-full overflow-hidden">
-                                <div className="h-full bg-cyan-500 w-[60%] animate-pulse" />
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      )}
-                    </div>
+                  <div className="w-full flex justify-center items-center overflow-visible">
+                    {feature.subtitle === 'Focus Engine' && (
+                      <img
+                        src="/deep_work_elements.png"
+                        alt="Deep Work Focus Session"
+                        className="w-full h-auto object-contain drop-shadow-2xl"
+                      />
+                    )}
+                    {feature.subtitle === 'Task Manager' && (
+                      <img
+                        src="/plan_focus.png"
+                        alt="Plan & Focus Task Manager"
+                        className="w-full h-auto object-contain drop-shadow-2xl"
+                      />
+                    )}
+                    {feature.subtitle === 'Productivity Analytics' && (
+                      <img
+                        src="/productivity_element.png"
+                        alt="Productivity Analytics"
+                        className="w-full h-auto object-contain drop-shadow-2xl"
+                      />
+                    )}
+                    {feature.subtitle === 'FocusMaster AI' && (
+                      <img
+                        src="/ai_elements.png"
+                        alt="FocusMaster AI"
+                        className="w-full h-auto object-contain drop-shadow-2xl"
+                      />
+                    )}
+                    {feature.subtitle === 'Spotify Control' && (
+                      <img
+                        src="/sportify_elements.png"
+                        alt="Spotify Control"
+                        className="w-full h-auto object-contain drop-shadow-2xl"
+                      />
+                    )}
+                    {feature.subtitle === 'Time Tracking' && (
+                      <img
+                        src="/time_tracker_elements.png"
+                        alt="Time Tracking"
+                        className="w-full h-auto object-contain drop-shadow-2xl"
+                      />
+                    )}
                   </div>
                 </motion.div>
               </motion.div>
diff --git a/frontend/src/components/landing-page-modern/features/FeatureShowcaseSection.tsx b/frontend/src/components/landing-page-modern/features/FeatureShowcaseSection.tsx
new file mode 100644
index 0000000..bba77a2
--- /dev/null
+++ b/frontend/src/components/landing-page-modern/features/FeatureShowcaseSection.tsx
@@ -0,0 +1,193 @@
+import { useRef } from 'react';
+import { motion, useInView } from 'framer-motion';
+import { Brain, CalendarCheck, BarChart3, ArrowRight } from 'lucide-react';
+
+const cards = [
+  {
+    tag: 'Deep Work',
+    tagColor: '#6D5EF9',
+    tagBg: 'rgba(109,94,249,0.08)',
+    tagBorder: 'rgba(109,94,249,0.2)',
+    title: 'Enter a state of unbreakable focus',
+    description:
+      'Block distractions and immerse yourself in deep work sessions that actually move the needle. Proven Pomodoro intervals keep you locked in.',
+    image: '/deep_work_elements.png',
+    icon: Brain,
+    accent: '#6D5EF9',
+    imagePosition: 'center top',
+    wide: true,
+  },
+  {
+    tag: 'Focus Planning',
+    tagColor: '#10b981',
+    tagBg: 'rgba(16,185,129,0.08)',
+    tagBorder: 'rgba(16,185,129,0.2)',
+    title: 'Plan your sessions, own your day',
+    description:
+      'Structure your week with intelligent focus plans. Set intentions before each session and review progress as you go.',
+    image: '/plan_focus.png',
+    icon: CalendarCheck,
+    accent: '#10b981',
+    imagePosition: 'center center',
+    wide: false,
+  },
+  {
+    tag: 'Productivity',
+    tagColor: '#f59e0b',
+    tagBg: 'rgba(245,158,11,0.08)',
+    tagBorder: 'rgba(245,158,11,0.2)',
+    title: "Track what you've actually done",
+    description:
+      'Visual analytics show your productive hours, streaks, and patterns — so you can improve what matters most.',
+    image: '/productivity_element.png',
+    icon: BarChart3,
+    accent: '#f59e0b',
+    imagePosition: 'center center',
+    wide: false,
+  },
+];
+
+const FeatureCard = ({
+  card,
+  index,
+}: {
+  card: (typeof cards)[0];
+  index: number;
+}) => {
+  const ref = useRef(null);
+  const inView = useInView(ref, { once: true, margin: '-80px' });
+  const Icon = card.icon;
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={{ opacity: 0, y: 40 }}
+      animate={inView ? { opacity: 1, y: 0 } : {}}
+      transition={{ duration: 0.65, ease: [0.16, 1, 0.3, 1], delay: index * 0.12 }}
+      className={`group relative flex flex-col overflow-hidden rounded-2xl bg-white border border-slate-200/80 shadow-sm hover:shadow-xl transition-shadow duration-500 ${
+        card.wide ? 'md:col-span-2' : 'md:col-span-1'
+      }`}
+      style={{ minHeight: card.wide ? '420px' : '380px' }}
+    >
+      {/* Image area */}
+      <div
+        className="relative flex-1 overflow-hidden bg-slate-50"
+        style={{ minHeight: card.wide ? '260px' : '200px' }}
+      >
+        <img
+          src={card.image}
+          alt={card.title}
+          className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
+          style={{ objectPosition: card.imagePosition }}
+        />
+        {/* Subtle bottom scrim so text doesn't clash */}
+        <div
+          className="absolute bottom-0 left-0 right-0"
+          style={{
+            height: '80px',
+            background: 'linear-gradient(to top, rgba(255,255,255,0.95) 0%, transparent 100%)',
+          }}
+        />
+      </div>
+
+      {/* Text area */}
+      <div className="p-6 pt-4 flex flex-col gap-3">
+        {/* Tag */}
+        <span
+          className="inline-flex items-center gap-1.5 self-start px-2.5 py-1 rounded-full text-[11px] font-bold uppercase tracking-wider"
+          style={{
+            color: card.tagColor,
+            backgroundColor: card.tagBg,
+            border: `1px solid ${card.tagBorder}`,
+          }}
+        >
+          <Icon size={11} />
+          {card.tag}
+        </span>
+
+        <h3 className="text-lg font-bold text-slate-900 leading-snug">
+          {card.title}
+        </h3>
+
+        <p className="text-sm text-slate-500 leading-relaxed">
+          {card.description}
+        </p>
+
+        <button
+          className="mt-1 inline-flex items-center gap-1.5 text-[13px] font-semibold transition-colors self-start"
+          style={{ color: card.accent }}
+          onMouseEnter={e => {
+            (e.currentTarget as HTMLElement).style.gap = '8px';
+          }}
+          onMouseLeave={e => {
+            (e.currentTarget as HTMLElement).style.gap = '6px';
+          }}
+        >
+          Learn more
+          <ArrowRight size={13} className="transition-transform group-hover:translate-x-1" />
+        </button>
+      </div>
+
+      {/* Hover accent border */}
+      <div
+        className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"
+        style={{ border: `1.5px solid ${card.tagBorder}` }}
+      />
+    </motion.div>
+  );
+};
+
+export const FeatureShowcaseSection = () => {
+  const ref = useRef(null);
+  const inView = useInView(ref, { once: true, margin: '-60px' });
+
+  return (
+    <section className="relative py-24 px-6 lg:px-16 xl:px-24 bg-[#f8f9fc]">
+      {/* Subtle background pattern */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          backgroundImage: `radial-gradient(circle at 1px 1px, rgba(15,23,42,0.04) 1px, transparent 0)`,
+          backgroundSize: '28px 28px',
+        }}
+      />
+
+      <div className="relative max-w-6xl mx-auto">
+        {/* Section header */}
+        <motion.div
+          ref={ref}
+          initial={{ opacity: 0, y: 24 }}
+          animate={inView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
+          className="mb-14 max-w-2xl"
+        >
+          <span
+            className="inline-block px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-widest mb-4"
+            style={{
+              color: '#6D5EF9',
+              backgroundColor: 'rgba(109,94,249,0.08)',
+              border: '1px solid rgba(109,94,249,0.2)',
+            }}
+          >
+            Built for performance
+          </span>
+          <h2 className="text-4xl md:text-5xl font-black text-slate-900 tracking-tight leading-tight mb-4">
+            Everything you need to<br />
+            <span style={{ color: '#6D5EF9' }}>do your best work</span>
+          </h2>
+          <p className="text-slate-500 text-lg leading-relaxed">
+            FocusMaster brings together the tools that high performers rely on —
+            packaged in a single, distraction-free experience.
+          </p>
+        </motion.div>
+
+        {/* Bento grid — wide card + 2 stacked */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
+          {cards.map((card, i) => (
+            <FeatureCard key={card.tag} card={card} index={i} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/frontend/src/components/landing-page-modern/footer/FooterSection.tsx b/frontend/src/components/landing-page-modern/footer/FooterSection.tsx
index 051892c..f50f753 100644
--- a/frontend/src/components/landing-page-modern/footer/FooterSection.tsx
+++ b/frontend/src/components/landing-page-modern/footer/FooterSection.tsx
@@ -2,7 +2,7 @@ import { Github, Linkedin, Twitter } from 'lucide-react';
 
 export const FooterSection = () => {
   return (
-    <footer className="relative z-10 border-t border-slate-800 bg-transparent pt-20 pb-12 overflow-hidden">
+    <footer className="relative z-10 border-t border-slate-200 bg-white/80 pt-20 pb-12 overflow-hidden">
       <div className="mx-auto max-w-6xl px-4 md:px-8 lg:px-20 relative">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 lg:gap-8 mb-16">
           
@@ -14,11 +14,11 @@ export const FooterSection = () => {
                 alt="FocusMaster Logo"
                 className="h-9 w-auto"
               />
-              <span className="font-extrabold text-2xl tracking-tight text-white">
+              <span className="font-extrabold text-2xl tracking-tight text-slate-900">
                 FocusMaster
               </span>
             </div>
-            <p className="text-slate-400 leading-relaxed max-w-sm">
+            <p className="text-slate-500 leading-relaxed max-w-sm">
               Elevate your productivity with our modern focus engine. Track time, manage tasks, and achieve deep work effortlessly without context switching.
             </p>
             <div className="flex items-center gap-3 mt-2">
@@ -42,42 +42,42 @@ export const FooterSection = () => {
 
           {/* Links - Product */}
           <div>
-            <h4 className="text-slate-100 font-bold mb-6 tracking-wide uppercase text-xs">Product</h4>
-            <ul className="space-y-4 text-sm text-slate-400 font-medium">
-              <li><a href="#features" className="hover:text-indigo-400 transition-colors">Features</a></li>
-              <li><a href="#pricing" className="hover:text-indigo-400 transition-colors">Pricing</a></li>
-              <li><a href="/login" className="hover:text-indigo-400 transition-colors">Login</a></li>
-              <li><a href="/register" className="hover:text-indigo-400 transition-colors">Start Free Trial</a></li>
+            <h4 className="text-slate-700 font-bold mb-6 tracking-wide uppercase text-xs">Product</h4>
+            <ul className="space-y-4 text-sm text-slate-500 font-medium">
+              <li><a href="#features" className="hover:text-indigo-600 transition-colors">Features</a></li>
+              <li><a href="#pricing" className="hover:text-indigo-600 transition-colors">Pricing</a></li>
+              <li><a href="/login" className="hover:text-indigo-600 transition-colors">Login</a></li>
+              <li><a href="/register" className="hover:text-indigo-600 transition-colors">Start Free Trial</a></li>
             </ul>
           </div>
 
           {/* Links - Resources */}
           <div>
-            <h4 className="text-slate-100 font-bold mb-6 tracking-wide uppercase text-xs">Resources</h4>
-            <ul className="space-y-4 text-sm text-slate-400 font-medium">
-              <li><a href="#" className="hover:text-indigo-400 transition-colors">Blog</a></li>
-              <li><a href="#" className="hover:text-indigo-400 transition-colors">Help Center</a></li>
-              <li><a href="#" className="hover:text-indigo-400 transition-colors">Community</a></li>
-              <li><a href="#" className="hover:text-indigo-400 transition-colors">Guides & Tutorials</a></li>
+            <h4 className="text-slate-700 font-bold mb-6 tracking-wide uppercase text-xs">Resources</h4>
+            <ul className="space-y-4 text-sm text-slate-500 font-medium">
+              <li><a href="#" className="hover:text-indigo-600 transition-colors">Blog</a></li>
+              <li><a href="#" className="hover:text-indigo-600 transition-colors">Help Center</a></li>
+              <li><a href="#" className="hover:text-indigo-600 transition-colors">Community</a></li>
+              <li><a href="#" className="hover:text-indigo-600 transition-colors">Guides & Tutorials</a></li>
             </ul>
           </div>
 
           {/* Links - Legal */}
           <div>
-            <h4 className="text-slate-100 font-bold mb-6 tracking-wide uppercase text-xs">Legal</h4>
-            <ul className="space-y-4 text-sm text-slate-400 font-medium">
-              <li><a href="/privacy-policy" className="hover:text-indigo-400 transition-colors">Privacy Policy</a></li>
-              <li><a href="/terms-of-service" className="hover:text-indigo-400 transition-colors">Terms of Service</a></li>
-              <li><a href="/cookie-settings" className="hover:text-indigo-400 transition-colors">Cookie Policy</a></li>
+            <h4 className="text-slate-700 font-bold mb-6 tracking-wide uppercase text-xs">Legal</h4>
+            <ul className="space-y-4 text-sm text-slate-500 font-medium">
+              <li><a href="/privacy-policy" className="hover:text-indigo-600 transition-colors">Privacy Policy</a></li>
+              <li><a href="/terms-of-service" className="hover:text-indigo-600 transition-colors">Terms of Service</a></li>
+              <li><a href="/cookie-settings" className="hover:text-indigo-600 transition-colors">Cookie Policy</a></li>
             </ul>
           </div>
         </div>
 
         {/* Divider */}
-        <div className="border-t border-slate-800/60 my-8" />
+        <div className="border-t border-slate-200 my-8" />
 
         {/* Bottom Section */}
-        <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-slate-500 font-medium">
+        <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-slate-400 font-medium">
           <p>© {new Date().getFullYear()} FocusMaster. All rights reserved.</p>
           <p className="flex items-center gap-1.5">
             Built with focus by{' '}
@@ -85,7 +85,7 @@ export const FooterSection = () => {
               href="https://github.com/codxbrexx"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-indigo-400 hover:text-indigo-300 transition-colors font-bold"
+              className="text-indigo-500 hover:text-indigo-600 transition-colors font-bold"
             >
               codxbrexx
             </a>
@@ -110,7 +110,7 @@ const SocialLink = ({
     target="_blank"
     rel="noopener noreferrer"
     aria-label={label}
-    className="p-2.5 rounded-lg bg-slate-900 border border-slate-800 text-slate-400 hover:text-white hover:border-indigo-500/50 hover:bg-indigo-500/10 transition-all duration-300 hover:-translate-y-1 shadow-sm"
+    className="p-2.5 rounded-lg bg-slate-100 border border-slate-200 text-slate-500 hover:text-indigo-600 hover:border-indigo-300 hover:bg-indigo-50 transition-all duration-300 hover:-translate-y-1 shadow-sm"
   >
     {icon}
   </a>
diff --git a/frontend/src/components/landing-page-modern/header/Header.tsx b/frontend/src/components/landing-page-modern/header/Header.tsx
index 6ede2cc..0f9bd60 100644
--- a/frontend/src/components/landing-page-modern/header/Header.tsx
+++ b/frontend/src/components/landing-page-modern/header/Header.tsx
@@ -41,11 +41,11 @@ const Header = () => {
       style={
         isScrolled
           ? {
-              background: 'rgba(10, 10, 16, 0.65)',
+              background: 'rgba(248, 249, 252, 0.88)',
               backdropFilter: 'blur(24px)',
               WebkitBackdropFilter: 'blur(24px)',
-              border: '1px solid rgba(255,255,255,0.08)',
-              boxShadow: '0 20px 40px -10px rgba(0,0,0,0.5)',
+              border: '1px solid rgba(15,23,42,0.1)',
+              boxShadow: '0 4px 24px rgba(15,23,42,0.08)',
             }
           : {
               background: 'transparent',
@@ -65,7 +65,7 @@ const Header = () => {
             alt="FocusMaster"
             className="w-auto h-10 md:h-11 object-contain"
           />
-          <span className="text-[15px] md:text-base font-bold text-white tracking-tight">
+          <span className="text-[15px] md:text-base font-bold text-slate-900 tracking-tight">
             FocusMaster
           </span>
         </a>
@@ -77,7 +77,7 @@ const Header = () => {
               key={link.href}
               href={link.href}
               onClick={(e) => scrollToSection(e, link.href)}
-              className="px-4 py-2 text-[13px] font-semibold text-slate-400 hover:text-white rounded-full transition-all duration-300 hover:bg-white/5"
+              className="px-4 py-2 text-[13px] font-semibold text-slate-500 hover:text-slate-900 rounded-full transition-all duration-300 hover:bg-slate-100"
             >
               {link.label}
             </a>
@@ -88,7 +88,7 @@ const Header = () => {
         <div className="hidden md:flex items-center gap-3">
           <a
             href="/login"
-            className="text-[13px] font-semibold text-slate-300 hover:text-white transition-colors px-4 py-2"
+            className="text-[13px] font-semibold text-slate-600 hover:text-slate-900 transition-colors px-4 py-2"
           >
             Log in
           </a>
@@ -110,20 +110,20 @@ const Header = () => {
             <SheetTrigger asChild>
               <button
                 aria-label="Open navigation menu"
-                className="flex items-center justify-center w-10 h-10 rounded-full bg-white/5 border border-white/10 text-white hover:bg-white/10 transition-colors"
+                className="flex items-center justify-center w-10 h-10 rounded-full bg-slate-100 border border-slate-200 text-slate-700 hover:bg-slate-200 transition-colors"
               >
                 {mobileOpen ? <X size={18} /> : <Menu size={18} />}
               </button>
             </SheetTrigger>
             <SheetContent
               side="right"
-              className="w-full sm:w-[320px] p-0 border-l border-white/10 bg-[#070710]/95 backdrop-blur-2xl"
+              className="w-full sm:w-[320px] p-0 border-l border-slate-200 bg-white/95 backdrop-blur-2xl"
             >
               <div className="flex flex-col h-full p-8">
                 {/* Mobile brand */}
                 <a href="/" className="flex items-center gap-3 mb-12">
                   <img src="/FM_logo.png" alt="FocusMaster" className="h-10 w-auto" />
-                  <span className="text-[15px] font-bold text-white tracking-tight">FocusMaster</span>
+                  <span className="text-[15px] font-bold text-slate-900 tracking-tight">FocusMaster</span>
                 </a>
 
                 {/* Nav links */}
@@ -133,7 +133,7 @@ const Header = () => {
                       key={link.href}
                       href={link.href}
                       onClick={(e) => scrollToSection(e, link.href)}
-                      className="px-4 py-3 text-sm font-semibold text-slate-300 hover:text-white hover:bg-white/5 rounded-xl transition-colors"
+                      className="px-4 py-3 text-sm font-semibold text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-xl transition-colors"
                     >
                       {link.label}
                     </a>
@@ -141,10 +141,10 @@ const Header = () => {
                 </nav>
 
                 {/* Auth buttons */}
-                <div className="flex flex-col gap-3 pt-8 border-t border-white/10">
+                <div className="flex flex-col gap-3 pt-8 border-t border-slate-200">
                   <a
                     href="/login"
-                    className="w-full text-center py-3 text-sm font-semibold text-slate-300 hover:text-white border border-white/10 hover:border-white/20 rounded-xl transition-all"
+                    className="w-full text-center py-3 text-sm font-semibold text-slate-700 hover:text-slate-900 border border-slate-200 hover:border-slate-300 rounded-xl transition-all"
                   >
                     Log in
                   </a>
diff --git a/frontend/src/components/landing-page-modern/hero/ModernHero.tsx b/frontend/src/components/landing-page-modern/hero/ModernHero.tsx
index d7c3e1e..3cf60cc 100644
--- a/frontend/src/components/landing-page-modern/hero/ModernHero.tsx
+++ b/frontend/src/components/landing-page-modern/hero/ModernHero.tsx
@@ -63,12 +63,12 @@ export const ModernHero = () => {
       {isLoading && <LoadingPage customMessage="Setting up guest session..." />}
       <section
         className="relative w-full overflow-hidden selection:bg-indigo-500 selection:text-white"
-        style={{ minHeight: '100vh', backgroundColor: '#05060a' }}
+        style={{ minHeight: '100vh', backgroundColor: '#f8f9fc' }}
       >
 
       <div className="absolute inset-0 z-0">
         <img
-          src="/hero_image.png"
+          src="/hero_light.png"
           alt=""
           aria-hidden="true"
           className="w-full h-full object-cover"
@@ -80,21 +80,20 @@ export const ModernHero = () => {
           className="absolute top-0 left-0 right-0 z-10"
           style={{
             height: '180px',
-            background: 'linear-gradient(to bottom, #05060a 0%, rgba(5,6,10,0.6) 40%, transparent 100%)',
+            background: 'linear-gradient(to bottom, #f8f9fc 0%, rgba(248,249,252,0.6) 40%, transparent 100%)',
           }}
         />
         <div
           className="absolute bottom-0 left-0 right-0"
           style={{
             height: '380px',
-            background: 'linear-gradient(to top, #05060a 0%, #05060a 12%, rgba(5,6,10,0.92) 30%, rgba(5,6,10,0.7) 50%, rgba(5,6,10,0.3) 70%, transparent 100%)',
+            background: 'linear-gradient(to top, #f8f9fc 0%, #f8f9fc 12%, rgba(248,249,252,0.92) 30%, rgba(248,249,252,0.7) 50%, rgba(248,249,252,0.3) 70%, transparent 100%)',
           }}
         />
       </div>
 
       <div
-        className="relative z-10 w-full"
-        style={{ minHeight: '111.1vh', display: 'flex', flexDirection: 'column', transform: 'scale(0.9)', transformOrigin: 'top center', width: '111.1%', marginLeft: '-5.55%' }}
+        className="relative z-10 w-full min-h-[100vh] flex flex-col"
       >
         {/* Content row — fills the viewport */}
         <div
@@ -112,8 +111,8 @@ export const ModernHero = () => {
               transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1], delay: 0.05 }}
             >
               <h2
-                className="font-black uppercase tracking-tighter"
-                style={{ fontSize: 'clamp(2.75rem, 8vw, 6.5rem)', color: '#ffffff', lineHeight: 0.88 }}
+                className="font-black uppercase tracking-tighter text-5xl md:text-6xl lg:text-7xl xl:text-[6.5rem]"
+                style={{ color: '#0f172a', lineHeight: 0.95 }}
               >
                 Transform<br />
                 Your<br />
@@ -127,7 +126,7 @@ export const ModernHero = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.65, ease: [0.16, 1, 0.3, 1], delay: 0.18 }}
               className="mt-6 text-[13px] sm:text-sm md:text-base leading-relaxed max-w-[320px] md:max-w-[400px]"
-              style={{ color: 'rgba(255,255,255,0.48)' }}
+              style={{ color: 'rgba(15,23,42,0.56)' }}
             >
               We engineer immersive focus experiences<br />
               through advanced productivity tools and<br />
@@ -139,7 +138,7 @@ export const ModernHero = () => {
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.65, ease: [0.16, 1, 0.3, 1], delay: 0.28 }}
-              style={{ marginTop: '36px', marginBottom: '32px', display: 'flex', gap: '14px', flexWrap: 'wrap' }}
+              className="mt-8 mb-8 flex flex-col sm:flex-row w-full sm:w-auto gap-3.5"
             >
               <a
                 href="/register"
@@ -174,12 +173,12 @@ export const ModernHero = () => {
                   justifyContent: 'center',
                   padding: '13px 28px',
                   backgroundColor: 'transparent',
-                  color: '#ffffff',
+                  color: '#0f172a',
                   fontSize: '13px',
                   fontWeight: 700,
                   letterSpacing: '0.08em',
                   textTransform: 'uppercase',
-                  border: '1.5px solid rgba(255,255,255,0.25)',
+                  border: '1.5px solid rgba(15,23,42,0.25)',
                   borderRadius: '2px',
                   textDecoration: 'none',
                   transition: 'border-color 0.2s, background-color 0.2s',
@@ -189,12 +188,12 @@ export const ModernHero = () => {
                 }}
                 onMouseEnter={e => {
                   if (isLoading) return;
-                  e.currentTarget.style.borderColor = 'rgba(255,255,255,0.5)';
-                  e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.05)';
+                  e.currentTarget.style.borderColor = 'rgba(109,94,249,0.6)';
+                  e.currentTarget.style.backgroundColor = 'rgba(109,94,249,0.06)';
                 }}
                 onMouseLeave={e => {
                   if (isLoading) return;
-                  e.currentTarget.style.borderColor = 'rgba(255,255,255,0.25)';
+                  e.currentTarget.style.borderColor = 'rgba(15,23,42,0.25)';
                   e.currentTarget.style.backgroundColor = 'transparent';
                 }}
               >
@@ -232,17 +231,18 @@ export const ModernHero = () => {
                     alignItems: 'flex-start',
                     gap: '14px',
                     padding: '16px 18px',
-                    backgroundColor: 'rgba(8,8,20,0.85)',
-                    border: '1px solid rgba(255,255,255,0.09)',
+                    backgroundColor: 'rgba(255,255,255,0.85)',
+                    border: '1px solid rgba(15,23,42,0.1)',
                     borderRadius: 0,
                     cursor: 'default',
                     transition: 'border-color 0.2s',
+                    boxShadow: '0 2px 12px rgba(15,23,42,0.06)',
                   }}
                   onMouseEnter={e => {
                     (e.currentTarget as HTMLElement).style.borderColor = 'rgba(109,94,249,0.45)';
                   }}
                   onMouseLeave={e => {
-                    (e.currentTarget as HTMLElement).style.borderColor = 'rgba(255,255,255,0.09)';
+                    (e.currentTarget as HTMLElement).style.borderColor = 'rgba(15,23,42,0.1)';
                   }}
                 >
                   <div
@@ -253,18 +253,18 @@ export const ModernHero = () => {
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'center',
-                      backgroundColor: 'rgba(109,94,249,0.12)',
+                      backgroundColor: 'rgba(109,94,249,0.1)',
                       border: '1px solid rgba(109,94,249,0.22)',
                       borderRadius: 0,
                     }}
                   >
-                    <Icon size={15} style={{ color: '#A78BFA' }} />
+                    <Icon size={15} style={{ color: '#6D5EF9' }} />
                   </div>
                   <div>
-                    <p style={{ fontSize: '13px', fontWeight: 600, color: '#fff', marginBottom: '4px' }}>
+                    <p style={{ fontSize: '13px', fontWeight: 600, color: '#0f172a', marginBottom: '4px' }}>
                       {card.title}
                     </p>
-                    <p style={{ fontSize: '11px', color: 'rgba(255,255,255,0.48)', lineHeight: '1.55' }}>
+                    <p style={{ fontSize: '11px', color: 'rgba(15,23,42,0.5)', lineHeight: '1.55' }}>
                       {card.description}
                     </p>
                   </div>
@@ -280,7 +280,7 @@ export const ModernHero = () => {
           style={{
             paddingBottom: '52px',
             paddingTop: '32px',
-            borderTop: '1px solid rgba(255,255,255,0.06)',
+            borderTop: '1px solid rgba(15,23,42,0.08)',
           }}
         >
           <div
@@ -296,7 +296,7 @@ export const ModernHero = () => {
                   transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1], delay: 0.5 + i * 0.1 }}
                   style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}
                 >
-                  {/* Round icon container — matches the reference */}
+                  {/* Round icon container */}
                   <div
                     style={{
                       width: '52px',
@@ -305,17 +305,17 @@ export const ModernHero = () => {
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'center',
-                      backgroundColor: 'rgba(255,255,255,0.06)',
-                      border: '1px solid rgba(255,255,255,0.1)',
+                      backgroundColor: 'rgba(109,94,249,0.08)',
+                      border: '1px solid rgba(109,94,249,0.18)',
                       marginBottom: '14px',
                     }}
                   >
-                    <Icon size={20} style={{ color: '#8B7CF6' }} />
+                    <Icon size={20} style={{ color: '#6D5EF9' }} />
                   </div>
-                  <p style={{ fontSize: '13px', fontWeight: 600, color: '#fff', marginBottom: '6px' }}>
+                  <p style={{ fontSize: '13px', fontWeight: 600, color: '#0f172a', marginBottom: '6px' }}>
                     {f.title}
                   </p>
-                  <p style={{ fontSize: '11.5px', color: 'rgba(255,255,255,0.4)', lineHeight: '1.55' }}>
+                  <p style={{ fontSize: '11.5px', color: 'rgba(15,23,42,0.45)', lineHeight: '1.55' }}>
                     {f.description}
                   </p>
                 </motion.div>
diff --git a/frontend/src/components/settings/AccountSettings.tsx b/frontend/src/components/settings/AccountSettings.tsx
index c26a5fd..6b36d63 100644
--- a/frontend/src/components/settings/AccountSettings.tsx
+++ b/frontend/src/components/settings/AccountSettings.tsx
@@ -156,6 +156,7 @@ const DeleteAccountDialog = () => {
     try {
       await api.delete('/gdpr/delete');
       toast.success('Account deleted successfully');
+      window.location.href = '/';
       logout();
     } catch (error: any) {
       console.error(error);
diff --git a/frontend/src/components/settings/AppearanceSettings.tsx b/frontend/src/components/settings/AppearanceSettings.tsx
index 171e484..861c7cf 100644
--- a/frontend/src/components/settings/AppearanceSettings.tsx
+++ b/frontend/src/components/settings/AppearanceSettings.tsx
@@ -1,92 +1,24 @@
-import { Palette, Moon, Monitor, Shield, Sun, Check } from 'lucide-react';
+import { Palette, Sun } from 'lucide-react';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
-import { useSettingsStore } from '@/store/useSettingsStore';
-import { useTheme } from '@/context/ThemeContext';
 
 export function AppearanceSettings() {
-  const { settings, updateSettings } = useSettingsStore();
-  const { setTheme } = useTheme();
-
-  const themes = [
-    {
-      id: 'dark',
-      name: 'Charcoal',
-      bg: 'bg-[#0c0c0e]',
-      text: 'text-zinc-50',
-      icon: Moon,
-    },
-    {
-      id: 'blue',
-      name: 'Navy',
-      bg: 'bg-[#020617]',
-      text: 'text-blue-400',
-      icon: Monitor,
-    },
-    {
-      id: 'green',
-      name: 'Forest',
-      bg: 'bg-[#020905]',
-      text: 'text-emerald-400',
-      icon: Shield,
-    },
-    {
-      id: 'light',
-      name: 'Paper',
-      bg: 'bg-white',
-      text: 'text-zinc-900',
-      icon: Sun,
-    },
-  ];
-
   return (
     <Card className="bg-card border border-border shadow-sm">
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <Palette className="w-5 h-5 text-primary" /> Theme & Interface
         </CardTitle>
-        <CardDescription>Choose the look that suits your eyes.</CardDescription>
+        <CardDescription>Your current interface appearance.</CardDescription>
       </CardHeader>
       <CardContent>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          {themes.map((theme) => (
-            <div
-              key={theme.id}
-              onClick={() => {
-                updateSettings({ theme: theme.id as any });
-                setTheme(theme.id as any);
-              }}
-              className={`
-                relative cursor-pointer group rounded-xl border-2 transition-all duration-200 overflow-hidden
-                ${settings.theme === theme.id ? 'border-primary ring-2 ring-primary/20 scale-[1.02]' : 'border-transparent hover:border-border'}
-              `}
-            >
-              {/* Fake UI Preview */}
-              <div className={`h-28 w-full p-3 ${theme.bg} flex flex-col gap-2`}>
-                <div className={`w-3/4 h-2 rounded-full opacity-20 bg-white`} />
-                <div className={`w-1/2 h-2 rounded-full opacity-20 bg-white`} />
-                {/* Dot Matrix Preview hint */}
-                <div
-                  className="absolute inset-0 opacity-20"
-                  style={{
-                    backgroundImage: `radial-gradient(circle, currentColor 1px, transparent 1px)`,
-                    backgroundSize: '12px 12px',
-                  }}
-                />
-
-                <div className="mt-auto flex justify-between items-center z-10">
-                  <theme.icon className={`w-5 h-5 ${theme.text}`} />
-                  {settings.theme === theme.id && (
-                    <div className="bg-primary rounded-full p-1">
-                      <Check className="w-3 h-3 text-primary-foreground" />
-                    </div>
-                  )}
-                </div>
-              </div>
-              <div className="p-2 text-center text-sm font-medium bg-secondary">
-                {theme.name}
-              </div>
-            </div>
-          ))}
+        <div className="flex items-center gap-4 p-4 rounded-xl border-2 border-primary bg-primary/5">
+          <div className="p-3 rounded-lg bg-primary/10">
+            <Sun className="w-6 h-6 text-primary" />
+          </div>
+          <div>
+            <p className="font-semibold text-foreground">Light Mode</p>
+            <p className="text-sm text-muted-foreground">Currently active theme</p>
+          </div>
         </div>
       </CardContent>
     </Card>
diff --git a/frontend/src/components/sidebar/ProfileMenu.tsx b/frontend/src/components/sidebar/ProfileMenu.tsx
index 6f98c59..8164318 100644
--- a/frontend/src/components/sidebar/ProfileMenu.tsx
+++ b/frontend/src/components/sidebar/ProfileMenu.tsx
@@ -34,8 +34,8 @@ export const ProfileMenu = ({ isOpen }: ProfileMenuProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const handleLogout = () => {
+    navigate('/');
     logout();
-    navigate('/login');
   };
 
   useEffect(() => {
diff --git a/frontend/src/components/sidebar/Sidebar.tsx b/frontend/src/components/sidebar/Sidebar.tsx
index 2579acd..542bf63 100644
--- a/frontend/src/components/sidebar/Sidebar.tsx
+++ b/frontend/src/components/sidebar/Sidebar.tsx
@@ -101,11 +101,11 @@ export const Sidebar = ({ open, onOpenChange }: SidebarProps) => {
           }}
         >
           <div className="relative shrink-0 flex items-center justify-center">
-            <div className="absolute inset-0 bg-primary/40 blur-2xl group-hover:bg-primary/50 transition-all duration-500 rounded-full" />
+            <div className="absolute inset-0 bg-primary blur-2xl group-hover:bg-primary/50 transition-all duration-500 rounded-full" />
             <img
               src="/FM_logo.png"
               alt="FocusMaster"
-              className="relative w-14 h-14 shadow-2xl transition-transform duration-300 shrink-0 object-contain drop-shadow-[0_0_15px_rgba(124,58,237,0.5)]"
+              className="relative w-14 h-14 transition-transform duration-300 shrink-0 object-contain drop-shadow-[0_0_15px_rgba(124,58,237,0.5)]"
             />
           </div>
 
diff --git a/frontend/src/context/ThemeContext.tsx b/frontend/src/context/ThemeContext.tsx
index ca66288..1363508 100644
--- a/frontend/src/context/ThemeContext.tsx
+++ b/frontend/src/context/ThemeContext.tsx
@@ -14,7 +14,7 @@ type ThemeProviderState = {
 };
 
 const initialState: ThemeProviderState = {
-  theme: 'system',
+  theme: 'light',
   setTheme: () => null,
 };
 
@@ -22,14 +22,16 @@ const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 
 export function ThemeProvider({
   children,
-  defaultTheme = 'system',
+  defaultTheme = 'light',
   storageKey = 'vite-ui-theme',
 }: ThemeProviderProps) {
   const [theme, setTheme] = useState<Theme>(
-    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+    () => defaultTheme
   );
 
   useEffect(() => {
+    // Clear any previously stored theme so light mode is always enforced
+    localStorage.removeItem(storageKey);
     const root = window.document.documentElement;
 
     root.classList.remove('light', 'dark', 'blue', 'green', 'purple');
@@ -44,7 +46,7 @@ export function ThemeProvider({
     }
 
     root.classList.add(theme);
-  }, [theme]);
+  }, [theme, storageKey]);
 
   const value = {
     theme,
diff --git a/frontend/src/pages/LandingPageModern.tsx b/frontend/src/pages/LandingPageModern.tsx
index 55da2e8..606c2dd 100644
--- a/frontend/src/pages/LandingPageModern.tsx
+++ b/frontend/src/pages/LandingPageModern.tsx
@@ -1,14 +1,13 @@
 import { Suspense } from 'react';
 import { ModernHero } from '../components/landing-page-modern/hero/ModernHero';
 import { DetailedFeaturesSection } from '../components/landing-page-modern/detailed-features/DetailedFeaturesSection';
-
 import { FinalCTASection } from '../components/landing-page-modern/cta/FinalCTASection';
 import { FooterSection } from '../components/landing-page-modern/footer/FooterSection';
 import { Loader } from '../components/ui/Loader';
 import Header from '../components/landing-page-modern/header/Header';
 
 const LoadingFallback = () => (
-  <div className="min-h-screen w-full bg-[#020202] flex items-center justify-center">
+  <div className="min-h-screen w-full bg-[#f8f9fc] flex items-center justify-center">
     <div className="text-center">
       <Loader message="Preparing your experience" size={50} />
     </div>
@@ -17,32 +16,88 @@ const LoadingFallback = () => (
 
 export function LandingPageModern() {
   return (
-    <div 
-      className="dark min-h-screen text-white overflow-x-hidden selection:bg-indigo-500 selection:text-white relative bg-[#05060A]"
+    <div
+      className="light min-h-screen overflow-x-hidden selection:bg-indigo-500 selection:text-white relative bg-[#f8f9fc]"
     >
       <Suspense fallback={<LoadingFallback />}>
-        {/* Foreground Content */}
         <div className="relative z-10 flex-grow flex flex-col pointer-events-auto w-full">
           <Header />
-          {/* Visually hidden h1 */}
           <h1 className="sr-only">
             FocusMaster — Free Pomodoro Timer, Task Manager &amp; Productivity Dashboard
           </h1>
           <main aria-label="FocusMaster productivity app landing page">
             <ModernHero />
-            
-            {/* Elements below the hero with standard stacking (no inversion) */}
-            <div className="relative z-10">
-              <div id="features" aria-label="Features">
-                <DetailedFeaturesSection />
-              </div>
-
-              <FinalCTASection />
-              <FooterSection />
+
+            {/* Social proof strip */}
+            <SocialProofStrip />
+
+
+
+            {/* Detailed feature deep-dives */}
+            <div aria-label="Detailed features">
+              <DetailedFeaturesSection />
             </div>
+
+            <FinalCTASection />
+            <FooterSection />
           </main>
         </div>
       </Suspense>
     </div>
   );
 }
+
+/** Lightweight inline social-proof bar between hero and features */
+const SocialProofStrip = () => (
+  <div
+    className="relative w-full border-y border-slate-200/70 bg-white/60 backdrop-blur-sm py-5 px-6 lg:px-16 xl:px-24"
+  >
+    <div className="max-w-6xl mx-auto flex flex-wrap items-center justify-center sm:justify-between gap-y-4 gap-x-8">
+      {/* Left — user count */}
+      <div className="flex items-center gap-3">
+        <div className="flex -space-x-2">
+          {['#6D5EF9', '#10b981', '#f59e0b', '#ef4444'].map((c, i) => (
+            <div
+              key={i}
+              className="w-7 h-7 rounded-full border-2 border-white flex items-center justify-center text-white text-[9px] font-bold"
+              style={{ backgroundColor: c }}
+            >
+              {String.fromCharCode(65 + i)}
+            </div>
+          ))}
+        </div>
+        <p className="text-sm text-slate-600 font-medium">
+          Join <span className="font-bold text-slate-900">1,200+</span> productive people
+        </p>
+      </div>
+
+      {/* Center — trust badges */}
+      <div className="hidden sm:flex items-center gap-6">
+        {[
+          { label: 'Free forever', emoji: '' },
+          { label: 'No credit card', emoji: '' },
+          { label: 'Open source', emoji: '' },
+        ].map((b) => (
+          <div key={b.label} className="flex items-center gap-1.5 text-sm text-slate-500 font-medium">
+            <span>{b.emoji}</span>
+            {b.label}
+          </div>
+        ))}
+      </div>
+
+      {/* Right — rating */}
+      <div className="flex items-center gap-2">
+        <div className="flex">
+          {[1,2,3,4,5].map(s => (
+            <svg key={s} className="w-4 h-4 text-amber-400 fill-amber-400" viewBox="0 0 20 20">
+              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+            </svg>
+          ))}
+        </div>
+        <span className="text-sm text-slate-600 font-medium">
+          <span className="font-bold text-slate-900">4.9</span> / 5.0
+        </span>
+      </div>
+    </div>
+  </div>
+);
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 38114dc..74c1909 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -60,9 +60,9 @@ export function Login() {
   }
 
   return (
-    <div className="flex min-h-[100dvh] w-full items-center justify-center bg-[#050505] p-4 sm:p-6 lg:p-8">
+    <div className="flex min-h-[100dvh] w-full items-center justify-center bg-[#f0f2f7] p-4 sm:p-6 lg:p-8">
       {/* Card Container */}
-      <div className="flex w-full max-w-[1000px] overflow-hidden rounded-2xl bg-[#0f111a] shadow-[0_0_50px_rgba(0,0,0,0.5)] border border-white/5">
+      <div className="flex w-full max-w-[1000px] overflow-hidden rounded-2xl bg-white shadow-[0_8px_40px_rgba(0,0,0,0.12)] border border-slate-200/80">
         {/* Left side - Image */}
         <div className="hidden md:block md:w-5/12 lg:w-1/2 relative">
           <img
@@ -73,24 +73,24 @@ export function Login() {
         </div>
 
         {/* Right side - Form */}
-        <div className="w-full md:w-7/12 lg:w-1/2 p-8 sm:p-12 relative flex flex-col justify-center min-h-[600px]">
+        <div className="w-full md:w-7/12 lg:w-1/2 p-8 sm:p-12 relative flex flex-col justify-center min-h-[600px] bg-white">
           {/* Close Button */}
-          <Link to="/" className="absolute right-6 top-6 text-slate-500 hover:text-white transition-colors bg-[#1a1d27]/50 hover:bg-[#1a1d27] p-2 rounded-md">
+          <Link to="/" className="absolute right-6 top-6 text-slate-400 hover:text-slate-700 transition-colors bg-slate-100 hover:bg-slate-200 p-2 rounded-md">
             <X className="h-4 w-4" />
           </Link>
 
           <div className="w-full max-w-[400px] mx-auto">
             {/* Header */}
             <div className="mb-8">
-              <h1 className="text-3xl font-bold text-white mb-2">Log in</h1>
-              <p className="text-sm text-slate-400">
-                New user? <Link to="/register" className="text-indigo-400 hover:text-indigo-300 font-medium">Register Now</Link>
+              <h1 className="text-3xl font-bold text-slate-900 mb-2">Log in</h1>
+              <p className="text-sm text-slate-500">
+                New user? <Link to="/register" className="text-indigo-600 hover:text-indigo-500 font-medium">Register Now</Link>
               </p>
             </div>
 
             {/* Error Message */}
             {error && (
-              <div className="mb-4 p-3 rounded-lg bg-red-900/50 border border-red-500/30 text-red-400 text-sm">
+              <div className="mb-4 p-3 rounded-lg bg-red-50 border border-red-200 text-red-600 text-sm">
                 {error}
               </div>
             )}
@@ -125,23 +125,23 @@ export function Login() {
 
             {/* Divider */}
             <div className="flex items-center gap-3 mb-6">
-              <div className="flex-1 h-px bg-[#2a2d3a]"></div>
-              <span className="text-xs text-slate-500">or</span>
-              <div className="flex-1 h-px bg-[#2a2d3a]"></div>
+              <div className="flex-1 h-px bg-slate-200"></div>
+              <span className="text-xs text-slate-400">or</span>
+              <div className="flex-1 h-px bg-slate-200"></div>
             </div>
 
             {/* Form */}
             <form onSubmit={handleSubmit} className="space-y-4">
               {/* Email Field */}
               <div>
-                <label htmlFor="email" className="block text-sm font-medium text-slate-300 mb-2">
+                <label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-2">
                   Username or Email
                 </label>
                 <Input
                   id="email"
                   type="email"
                   placeholder="Username or Email"
-                  className="h-11 bg-[#1a1d27] border-[#2a2d3a] text-white placeholder:text-slate-500 focus:border-indigo-500 focus-visible:ring-0 focus-visible:ring-offset-0 rounded-md"
+                  className="h-11 bg-slate-50 border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-400 focus-visible:ring-0 focus-visible:ring-offset-0 rounded-md"
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   disabled={isAnyLoading}
@@ -150,7 +150,7 @@ export function Login() {
 
               {/* Password Field */}
               <div>
-                <label htmlFor="password" className="block text-sm font-medium text-slate-300 mb-2">
+                <label htmlFor="password" className="block text-sm font-medium text-slate-700 mb-2">
                   Password
                 </label>
                 <div className="relative">
@@ -158,7 +158,7 @@ export function Login() {
                     id="password"
                     type={isPasswordVisible ? 'text' : 'password'}
                     placeholder="Enter password"
-                    className="h-11 bg-[#1a1d27] border-[#2a2d3a] text-white placeholder:text-slate-500 focus:border-indigo-500 focus-visible:ring-0 focus-visible:ring-offset-0 pr-10 rounded-md"
+                    className="h-11 bg-slate-50 border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-400 focus-visible:ring-0 focus-visible:ring-offset-0 pr-10 rounded-md"
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
                     disabled={isAnyLoading}
@@ -166,7 +166,7 @@ export function Login() {
                   <button
                     type="button"
                     onClick={() => setIsPasswordVisible(!isPasswordVisible)}
-                    className="absolute right-3 top-3 text-slate-400 hover:text-slate-200"
+                    className="absolute right-3 top-3 text-slate-400 hover:text-slate-600"
                     tabIndex={-1}
                     disabled={isAnyLoading}
                   >
@@ -181,7 +181,7 @@ export function Login() {
 
               {/* Forgot */}
               <div className="pt-1">
-                <a href="#" className="text-sm text-[#5b52ff] hover:text-indigo-400 font-medium">
+                <a href="#" className="text-sm text-indigo-600 hover:text-indigo-500 font-medium">
                   Forgot password
                 </a>
               </div>
@@ -189,7 +189,7 @@ export function Login() {
               {/* Sign In Button */}
               <button
                 type="submit"
-                className="w-full h-11 mt-4 bg-[#5b52ff] hover:bg-[#4f46e5] text-white font-medium rounded-md transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                className="w-full h-11 mt-4 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-md transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
                 disabled={isAnyLoading}
               >
                 {isLoading ? (
@@ -205,7 +205,7 @@ export function Login() {
               {/* Guest Login */}
               <button
                 type="button"
-                className="w-full h-11 border border-[#2a2d3a] text-slate-300 font-medium rounded-md hover:bg-[#1a1d27] transition-colors cursor-pointer"
+                className="w-full h-11 border border-slate-200 text-slate-600 font-medium rounded-md hover:bg-slate-50 transition-colors cursor-pointer"
                 onClick={async () => {
                   try {
                     setIsLoading(true);
@@ -224,10 +224,10 @@ export function Login() {
             </form>
 
             {/* Bottom Text */}
-            <p className="text-center text-xs text-slate-500 mt-8">
+            <p className="text-center text-xs text-slate-400 mt-8">
               By creating this account, you agree to our{' '}
-              <a href="#" className="text-slate-300 hover:text-white transition-colors">Privacy Policy</a> &{' '}
-              <a href="#" className="text-slate-300 hover:text-white transition-colors">Cookie Policy</a>.
+              <a href="#" className="text-slate-600 hover:text-slate-900 transition-colors">Privacy Policy</a> &{' '}
+              <a href="#" className="text-slate-600 hover:text-slate-900 transition-colors">Cookie Policy</a>.
             </p>
           </div>
         </div>
diff --git a/frontend/src/pages/Register.tsx b/frontend/src/pages/Register.tsx
index a80342c..2eb1bc7 100644
--- a/frontend/src/pages/Register.tsx
+++ b/frontend/src/pages/Register.tsx
@@ -26,7 +26,7 @@ const PasswordStrengthIndicator = ({ password }: { password: string }) => {
   return (
     <div className="flex gap-2 items-center mt-2">
       <div className={`h-1 flex-1 rounded-full ${colors[strength]}`} />
-      <span className="text-xs text-gray-500 capitalize">{strength}</span>
+      <span className="text-xs text-slate-400 capitalize">{strength}</span>
     </div>
   );
 };
@@ -137,9 +137,9 @@ export function Register() {
   }
 
   return (
-    <div className="flex min-h-[100dvh] w-full items-center justify-center bg-[#050505] p-4 sm:p-6 lg:p-8">
+    <div className="flex min-h-[100dvh] w-full items-center justify-center bg-[#f0f2f7] p-4 sm:p-6 lg:p-8">
       {/* Card Container */}
-      <div className="flex w-full max-w-[1000px] overflow-hidden rounded-2xl bg-[#0f111a] shadow-[0_0_50px_rgba(0,0,0,0.5)] border border-white/5">
+      <div className="flex w-full max-w-[1000px] overflow-hidden rounded-2xl bg-white shadow-[0_8px_40px_rgba(0,0,0,0.12)] border border-slate-200/80">
         {/* Left side - Image */}
         <div className="hidden md:block md:w-5/12 lg:w-1/2 relative">
           <img
@@ -150,24 +150,24 @@ export function Register() {
         </div>
 
         {/* Right side - Form */}
-        <div className="w-full md:w-7/12 lg:w-1/2 p-8 sm:p-12 relative flex flex-col justify-center min-h-[600px] overflow-y-auto">
+        <div className="w-full md:w-7/12 lg:w-1/2 p-8 sm:p-12 relative flex flex-col justify-center min-h-[600px] overflow-y-auto bg-white">
           {/* Close Button */}
-          <Link to="/" className="absolute right-6 top-6 text-slate-500 hover:text-white transition-colors bg-[#1a1d27]/50 hover:bg-[#1a1d27] p-2 rounded-md z-10">
+          <Link to="/" className="absolute right-6 top-6 text-slate-400 hover:text-slate-700 transition-colors bg-slate-100 hover:bg-slate-200 p-2 rounded-md z-10">
             <X className="h-4 w-4" />
           </Link>
 
           <div className="w-full max-w-[400px] mx-auto py-4">
             {/* Header */}
             <div className="mb-8">
-              <h1 className="text-3xl font-bold text-white mb-2">Register</h1>
-              <p className="text-sm text-slate-400">
-                Already have an account? <Link to="/login" className="text-indigo-400 hover:text-indigo-300 font-medium">Sign in</Link>
+              <h1 className="text-3xl font-bold text-slate-900 mb-2">Register</h1>
+              <p className="text-sm text-slate-500">
+                Already have an account? <Link to="/login" className="text-indigo-600 hover:text-indigo-500 font-medium">Sign in</Link>
               </p>
             </div>
 
             {/* Error Message */}
             {error && (
-              <div className="mb-4 p-3 rounded-lg bg-red-900/50 border border-red-500/30 text-red-400 text-sm">
+              <div className="mb-4 p-3 rounded-lg bg-red-50 border border-red-200 text-red-600 text-sm">
                 {error}
               </div>
             )}
@@ -202,9 +202,9 @@ export function Register() {
 
             {/* Divider */}
             <div className="flex items-center gap-3 mb-6">
-              <div className="flex-1 h-px bg-[#2a2d3a]"></div>
-              <span className="text-xs text-slate-500">or</span>
-              <div className="flex-1 h-px bg-[#2a2d3a]"></div>
+              <div className="flex-1 h-px bg-slate-200"></div>
+              <span className="text-xs text-slate-400">or</span>
+              <div className="flex-1 h-px bg-slate-200"></div>
             </div>
 
             {/* Form */}
@@ -213,14 +213,14 @@ export function Register() {
                 <>
                   {/* Full Name Field */}
                   <div>
-                    <label htmlFor="name" className="block text-sm font-medium text-slate-300 mb-2">
+                    <label htmlFor="name" className="block text-sm font-medium text-slate-700 mb-2">
                       Full Name
                     </label>
                     <Input
                       id="name"
                       type="text"
                       placeholder="Name"
-                      className="h-11 bg-[#1a1d27] border-[#2a2d3a] text-white placeholder:text-slate-500 focus:border-indigo-500 focus-visible:ring-0 focus-visible:ring-offset-0 rounded-md"
+                      className="h-11 bg-slate-50 border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-400 focus-visible:ring-0 focus-visible:ring-offset-0 rounded-md"
                       value={name}
                       onChange={(e) => setName(e.target.value)}
                       disabled={isAnyLoading}
@@ -229,14 +229,14 @@ export function Register() {
 
                   {/* Email Field */}
                   <div>
-                    <label htmlFor="email" className="block text-sm font-medium text-slate-300 mb-2">
+                    <label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-2">
                       Email
                     </label>
                     <Input
                       id="email"
                       type="email"
                       placeholder="name@example.com"
-                      className="h-11 bg-[#1a1d27] border-[#2a2d3a] text-white placeholder:text-slate-500 focus:border-indigo-500 focus-visible:ring-0 focus-visible:ring-offset-0 rounded-md"
+                      className="h-11 bg-slate-50 border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-400 focus-visible:ring-0 focus-visible:ring-offset-0 rounded-md"
                       value={email}
                       onChange={(e) => setEmail(e.target.value)}
                       disabled={isAnyLoading}
@@ -246,7 +246,7 @@ export function Register() {
                   {/* Next Button */}
                   <button
                     type="submit"
-                    className="w-full h-11 mt-6 bg-[#5b52ff] hover:bg-[#4f46e5] text-white font-medium rounded-md transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                    className="w-full h-11 mt-6 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-md transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
                     disabled={isAnyLoading}
                   >
                     Next <ArrowRight className="h-4 w-4" />
@@ -255,7 +255,7 @@ export function Register() {
                   {/* Start as Guest Button */}
                   <button
                     type="button"
-                    className="w-full h-11 border border-[#2a2d3a] text-slate-300 font-medium rounded-md hover:bg-[#1a1d27] transition-colors cursor-pointer"
+                    className="w-full h-11 border border-slate-200 text-slate-600 font-medium rounded-md hover:bg-slate-50 transition-colors cursor-pointer"
                     onClick={async () => {
                       try {
                         setIsLoading(true);
@@ -278,7 +278,7 @@ export function Register() {
                 <>
                   {/* Password Field */}
                   <div>
-                    <label htmlFor="password" className="block text-sm font-medium text-slate-300 mb-2">
+                    <label htmlFor="password" className="block text-sm font-medium text-slate-700 mb-2">
                       Password
                     </label>
                     <div className="relative">
@@ -286,7 +286,7 @@ export function Register() {
                         id="password"
                         type={isPasswordVisible ? 'text' : 'password'}
                         placeholder="Enter password"
-                        className="h-11 bg-[#1a1d27] border-[#2a2d3a] text-white placeholder:text-slate-500 focus:border-indigo-500 focus-visible:ring-0 focus-visible:ring-offset-0 pr-10 rounded-md"
+                        className="h-11 bg-slate-50 border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-400 focus-visible:ring-0 focus-visible:ring-offset-0 pr-10 rounded-md"
                         value={password}
                         onChange={(e) => setPassword(e.target.value)}
                         disabled={isAnyLoading}
@@ -294,7 +294,7 @@ export function Register() {
                       <button
                         type="button"
                         onClick={() => setIsPasswordVisible(!isPasswordVisible)}
-                        className="absolute right-3 top-3 text-slate-400 hover:text-slate-200"
+                        className="absolute right-3 top-3 text-slate-400 hover:text-slate-600"
                         tabIndex={-1}
                         disabled={isAnyLoading}
                       >
@@ -310,7 +310,7 @@ export function Register() {
 
                   {/* Confirm Password Field */}
                   <div>
-                    <label htmlFor="confirmPassword" className="block text-sm font-medium text-slate-300 mb-2">
+                    <label htmlFor="confirmPassword" className="block text-sm font-medium text-slate-700 mb-2">
                       Confirm Password
                     </label>
                     <div className="relative">
@@ -318,7 +318,7 @@ export function Register() {
                         id="confirmPassword"
                         type={isConfirmPasswordVisible ? 'text' : 'password'}
                         placeholder="Confirm password"
-                        className="h-11 bg-[#1a1d27] border-[#2a2d3a] text-white placeholder:text-slate-500 focus:border-indigo-500 focus-visible:ring-0 focus-visible:ring-offset-0 pr-10 rounded-md"
+                        className="h-11 bg-slate-50 border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-400 focus-visible:ring-0 focus-visible:ring-offset-0 pr-10 rounded-md"
                         value={confirmPassword}
                         onChange={(e) => setConfirmPassword(e.target.value)}
                         disabled={isAnyLoading}
@@ -326,7 +326,7 @@ export function Register() {
                       <button
                         type="button"
                         onClick={() => setIsConfirmPasswordVisible(!isConfirmPasswordVisible)}
-                        className="absolute right-3 top-3 text-slate-400 hover:text-slate-200"
+                        className="absolute right-3 top-3 text-slate-400 hover:text-slate-600"
                         tabIndex={-1}
                         disabled={isAnyLoading}
                       >
@@ -338,7 +338,7 @@ export function Register() {
                       </button>
                     </div>
                     {passwordsMatch && (
-                      <div className="flex items-center gap-2 text-xs text-green-500 mt-2">
+                      <div className="flex items-center gap-2 text-xs text-green-600 mt-2">
                         <CheckCircle2 className="h-3 w-3" />
                         Passwords match
                       </div>
@@ -348,7 +348,7 @@ export function Register() {
                   {/* Create Account Button */}
                   <button
                     type="submit"
-                    className="w-full h-11 mt-6 bg-[#5b52ff] hover:bg-[#4f46e5] text-white font-medium rounded-md transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                    className="w-full h-11 mt-6 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-md transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
                     disabled={isAnyLoading}
                   >
                     {isLoading ? (
@@ -364,7 +364,7 @@ export function Register() {
                   {/* Back Button */}
                   <button
                     type="button"
-                    className="w-full h-11 border border-[#2a2d3a] text-slate-300 font-medium rounded-md hover:bg-[#1a1d27] transition-colors cursor-pointer"
+                    className="w-full h-11 border border-slate-200 text-slate-600 font-medium rounded-md hover:bg-slate-50 transition-colors cursor-pointer"
                     onClick={() => setStep(1)}
                     disabled={isAnyLoading}
                   >
@@ -375,10 +375,10 @@ export function Register() {
             </form>
 
             {/* Bottom Text */}
-            <p className="text-center text-xs text-slate-500 mt-8">
+            <p className="text-center text-xs text-slate-400 mt-8">
               By creating this account, you agree to our{' '}
-              <a href="#" className="text-slate-300 hover:text-white transition-colors">Privacy Policy</a> &{' '}
-              <a href="#" className="text-slate-300 hover:text-white transition-colors">Cookie Policy</a>.
+              <a href="#" className="text-slate-600 hover:text-slate-900 transition-colors">Privacy Policy</a> &{' '}
+              <a href="#" className="text-slate-600 hover:text-slate-900 transition-colors">Cookie Policy</a>.
             </p>
           </div>
         </div>
diff --git a/frontend/src/store/useSettingsStore.ts b/frontend/src/store/useSettingsStore.ts
index 086649e..4080b04 100644
--- a/frontend/src/store/useSettingsStore.ts
+++ b/frontend/src/store/useSettingsStore.ts
@@ -32,7 +32,7 @@ const defaultSettings: PomodoroSettings = {
   motivationalQuotes: true,
   strictMode: false,
   dailyGoal: 8,
-  theme: 'dark',
+  theme: 'light',
 };
 
 export const useSettingsStore = create<SettingsState>((set, get) => ({