diff --git a/frontend/src/__tests__/profile-bio.test.tsx b/frontend/src/__tests__/profile-bio.test.tsx
new file mode 100644
index 00000000..4717f0e3
--- /dev/null
+++ b/frontend/src/__tests__/profile-bio.test.tsx
@@ -0,0 +1,189 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ProfileBio } from '@/components/profile/ProfileBio';
+import { MAX_BIO_LENGTH, profileBioSchema } from '@/lib/validations/profile';
+import type { User } from '@/types/user';
+
+const baseUser: User = {
+  id: 'user-1',
+  username: 'TestPlayer',
+  email: 'test@example.com',
+  isVerified: true,
+  elo: 1500,
+  createdAt: '2024-01-01T00:00:00Z',
+  bio: '',
+  socialLinks: {},
+};
+
+function renderBio(user: Partial<User> = {}) {
+  const onSave = jest.fn();
+  render(<ProfileBio user={{ ...baseUser, ...user }} onSave={onSave} />);
+
+  // Enter edit mode
+  fireEvent.click(screen.getByRole('button', { name: /edit profile/i }));
+
+  return { onSave };
+}
+
+describe('ProfileBio — character counter', () => {
+  it('shows 0 / MAX_BIO_LENGTH initially when bio is empty', () => {
+    renderBio();
+    expect(screen.getByText(`0 / ${MAX_BIO_LENGTH}`)).toBeInTheDocument();
+  });
+
+  it('updates counter immediately as the user types', () => {
+    renderBio();
+    const textarea = screen.getByRole('textbox', { name: /bio/i });
+
+    fireEvent.change(textarea, { target: { value: 'Hello!' } });
+    expect(screen.getByText(`6 / ${MAX_BIO_LENGTH}`)).toBeInTheDocument();
+
+    fireEvent.change(textarea, { target: { value: 'Hello, world!' } });
+    expect(screen.getByText(`13 / ${MAX_BIO_LENGTH}`)).toBeInTheDocument();
+  });
+
+  it('reflects the existing bio length on first render', () => {
+    const existingBio = 'A'.repeat(50);
+    renderBio({ bio: existingBio });
+    expect(screen.getByText(`50 / ${MAX_BIO_LENGTH}`)).toBeInTheDocument();
+  });
+});
+
+describe('ProfileBio — warning state at 90% capacity', () => {
+  const warningThreshold = Math.floor(MAX_BIO_LENGTH * 0.9);
+
+  it('counter has no warning style below 90%', () => {
+    renderBio();
+    const textarea = screen.getByRole('textbox', { name: /bio/i });
+
+    fireEvent.change(textarea, { target: { value: 'A'.repeat(warningThreshold - 1) } });
+
+    const counter = screen.getByText(`${warningThreshold - 1} / ${MAX_BIO_LENGTH}`);
+    expect(counter).not.toHaveClass('text-destructive');
+  });
+
+  it('counter switches to warning style at exactly 90% of MAX_BIO_LENGTH', () => {
+    renderBio();
+    const textarea = screen.getByRole('textbox', { name: /bio/i });
+
+    fireEvent.change(textarea, { target: { value: 'A'.repeat(warningThreshold) } });
+
+    const counter = screen.getByText(`${warningThreshold} / ${MAX_BIO_LENGTH}`);
+    expect(counter).toHaveClass('text-destructive');
+  });
+
+  it('counter keeps warning style when bio exceeds the limit', () => {
+    renderBio();
+    const textarea = screen.getByRole('textbox', { name: /bio/i });
+
+    fireEvent.change(textarea, { target: { value: 'A'.repeat(MAX_BIO_LENGTH + 1) } });
+
+    const counter = screen.getByText(`${MAX_BIO_LENGTH + 1} / ${MAX_BIO_LENGTH}`);
+    expect(counter).toHaveClass('text-destructive');
+  });
+});
+
+describe('ProfileBio — submission blocking', () => {
+  it('Save button is enabled within the limit', () => {
+    renderBio();
+    const textarea = screen.getByRole('textbox', { name: /bio/i });
+
+    fireEvent.change(textarea, { target: { value: 'A'.repeat(MAX_BIO_LENGTH) } });
+
+    expect(screen.getByRole('button', { name: /save changes/i })).not.toBeDisabled();
+  });
+
+  it('Save button is disabled when bio exceeds MAX_BIO_LENGTH', () => {
+    renderBio();
+    const textarea = screen.getByRole('textbox', { name: /bio/i });
+
+    fireEvent.change(textarea, { target: { value: 'A'.repeat(MAX_BIO_LENGTH + 1) } });
+
+    expect(screen.getByRole('button', { name: /save changes/i })).toBeDisabled();
+  });
+
+  it('shows inline error message when bio exceeds MAX_BIO_LENGTH', () => {
+    renderBio();
+    const textarea = screen.getByRole('textbox', { name: /bio/i });
+
+    fireEvent.change(textarea, { target: { value: 'A'.repeat(MAX_BIO_LENGTH + 1) } });
+
+    expect(
+      screen.getByText(`Bio must be ${MAX_BIO_LENGTH} characters or less`)
+    ).toBeInTheDocument();
+  });
+
+  it('clears the error once bio is back within the limit', () => {
+    renderBio();
+    const textarea = screen.getByRole('textbox', { name: /bio/i });
+
+    fireEvent.change(textarea, { target: { value: 'A'.repeat(MAX_BIO_LENGTH + 1) } });
+    expect(
+      screen.getByText(`Bio must be ${MAX_BIO_LENGTH} characters or less`)
+    ).toBeInTheDocument();
+
+    fireEvent.change(textarea, { target: { value: 'A'.repeat(MAX_BIO_LENGTH) } });
+    expect(
+      screen.queryByText(`Bio must be ${MAX_BIO_LENGTH} characters or less`)
+    ).not.toBeInTheDocument();
+  });
+
+  it('does not call onSave when bio exceeds the limit', () => {
+    const { onSave } = renderBio();
+    const textarea = screen.getByRole('textbox', { name: /bio/i });
+
+    fireEvent.change(textarea, { target: { value: 'A'.repeat(MAX_BIO_LENGTH + 1) } });
+    fireEvent.click(screen.getByRole('button', { name: /save changes/i }));
+
+    expect(onSave).not.toHaveBeenCalled();
+  });
+});
+
+describe('ProfileBio — successful submission', () => {
+  it('calls onSave with the correct bio when within the limit', () => {
+    const { onSave } = renderBio();
+    const textarea = screen.getByRole('textbox', { name: /bio/i });
+    const validBio = 'Hello, I am a gamer!';
+
+    fireEvent.change(textarea, { target: { value: validBio } });
+    fireEvent.click(screen.getByRole('button', { name: /save changes/i }));
+
+    expect(onSave).toHaveBeenCalledWith(
+      expect.objectContaining({ bio: validBio })
+    );
+  });
+
+  it('exits edit mode after a successful save', () => {
+    renderBio();
+    const textarea = screen.getByRole('textbox', { name: /bio/i });
+
+    fireEvent.change(textarea, { target: { value: 'Short bio' } });
+    fireEvent.click(screen.getByRole('button', { name: /save changes/i }));
+
+    expect(screen.queryByRole('textbox', { name: /bio/i })).not.toBeInTheDocument();
+  });
+});
+
+describe('ProfileBio — constant / schema consistency', () => {
+  it('profileBioSchema rejects bio longer than MAX_BIO_LENGTH', () => {
+    const result = profileBioSchema.safeParse({ bio: 'A'.repeat(MAX_BIO_LENGTH + 1) });
+    expect(result.success).toBe(false);
+  });
+
+  it('profileBioSchema accepts bio exactly at MAX_BIO_LENGTH', () => {
+    const result = profileBioSchema.safeParse({ bio: 'A'.repeat(MAX_BIO_LENGTH) });
+    expect(result.success).toBe(true);
+  });
+
+  it('profileBioSchema accepts an undefined bio', () => {
+    const result = profileBioSchema.safeParse({ bio: undefined });
+    expect(result.success).toBe(true);
+  });
+
+  it('MAX_BIO_LENGTH matches the schema max constraint', () => {
+    const tooLong = profileBioSchema.safeParse({ bio: 'A'.repeat(MAX_BIO_LENGTH + 1) });
+    const exactLimit = profileBioSchema.safeParse({ bio: 'A'.repeat(MAX_BIO_LENGTH) });
+    expect(tooLong.success).toBe(false);
+    expect(exactLimit.success).toBe(true);
+  });
+});
diff --git a/frontend/src/__tests__/profile-edit.test.tsx b/frontend/src/__tests__/profile-edit.test.tsx
index 8d511ec9..85c71c30 100644
--- a/frontend/src/__tests__/profile-edit.test.tsx
+++ b/frontend/src/__tests__/profile-edit.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
-import ProfileEditPage from '@/app/profile/edit/page';
+import ProfileEditPage from '@/app/[locale]/profile/edit/page';
+import { MAX_BIO_LENGTH } from '@/lib/validations/profile';
 
 jest.mock('@/hooks/useAuth', () => ({
   useAuth: () => ({ user: { id: 'u1', username: 'TestUser', email: 'test@test.com' } }),
@@ -8,6 +9,7 @@ jest.mock('@/hooks/useAuth', () => ({
 
 jest.mock('next/navigation', () => ({
   useRouter: () => ({ push: jest.fn(), back: jest.fn() }),
+  useSearchParams: () => new URLSearchParams(),
 }));
 
 // CustomizationOptions uses lucide-react icons; mock to keep tests simple
@@ -16,15 +18,17 @@ jest.mock('@/components/profile/CustomizationOptions', () => ({
 }));
 
 describe('ProfileEditPage', () => {
-  it('disables submit button and shows error when bio exceeds 500 characters', () => {
+  it('disables submit button and shows error when bio exceeds MAX_BIO_LENGTH', () => {
     render(<ProfileEditPage />);
 
     const textarea = screen.getByRole('textbox', { name: /bio/i });
-    const longBio = 'a'.repeat(501);
+    const longBio = 'a'.repeat(MAX_BIO_LENGTH + 1);
 
     fireEvent.change(textarea, { target: { value: longBio } });
 
-    expect(screen.getByText('Bio must be 500 characters or less')).toBeInTheDocument();
+    expect(
+      screen.getByText(`Bio must be ${MAX_BIO_LENGTH} characters or less`)
+    ).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
   });
 
diff --git a/frontend/src/__tests__/theme-persistence.test.tsx b/frontend/src/__tests__/theme-persistence.test.tsx
new file mode 100644
index 00000000..2342d489
--- /dev/null
+++ b/frontend/src/__tests__/theme-persistence.test.tsx
@@ -0,0 +1,362 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+const mockSetTheme = jest.fn();
+
+jest.mock('next-themes', () => {
+  const R = require('react');
+  return {
+    ThemeProvider: jest.fn(({ children }: { children: React.ReactNode }) =>
+      R.createElement(R.Fragment, null, children)
+    ),
+    useTheme: jest.fn(),
+  };
+});
+
+import { useTheme, ThemeProvider as MockedNextProvider } from 'next-themes';
+import { ThemeProvider } from '@/components/providers/ThemeProvider';
+import { ThemeToggle as UiThemeToggle } from '@/components/ui/ThemeToggle';
+import { ThemeToggle as NavThemeToggle } from '@/components/ThemeToggle';
+import { ThemeSelector } from '@/components/settings/ThemeSelector';
+import type { ThemeSettings } from '@/types/settings';
+
+const defaultSettings: ThemeSettings = {
+  mode: 'light',
+  accentColor: 'blue',
+  compactMode: false,
+  animationsEnabled: true,
+};
+
+function setupTheme(theme: string, resolvedTheme: string) {
+  (useTheme as jest.Mock).mockReturnValue({ theme, resolvedTheme, setTheme: mockSetTheme });
+}
+
+function renderSelector(overrides: Partial<ThemeSettings> = {}) {
+  const onUpdate = jest.fn();
+  const onSave = jest.fn().mockResolvedValue(true);
+  render(
+    <ThemeSelector
+      settings={{ ...defaultSettings, ...overrides }}
+      onUpdate={onUpdate}
+      onSave={onSave}
+      isSaving={false}
+    />
+  );
+  return { onUpdate, onSave };
+}
+
+beforeEach(() => {
+  mockSetTheme.mockClear();
+  (MockedNextProvider as jest.Mock).mockClear();
+  localStorage.clear();
+});
+
+// ─── ThemeProvider configuration ──────────────────────────────────────────────
+
+describe('ThemeProvider configuration', () => {
+  it('forwards storageKey="theme" to NextThemesProvider', () => {
+    render(
+      <ThemeProvider attribute="class" defaultTheme="system" enableSystem storageKey="theme">
+        <div />
+      </ThemeProvider>
+    );
+    expect(MockedNextProvider).toHaveBeenCalledWith(
+      expect.objectContaining({ storageKey: 'theme' }),
+      expect.anything()
+    );
+  });
+
+  it('forwards defaultTheme="system" to NextThemesProvider', () => {
+    render(
+      <ThemeProvider attribute="class" defaultTheme="system" enableSystem storageKey="theme">
+        <div />
+      </ThemeProvider>
+    );
+    expect(MockedNextProvider).toHaveBeenCalledWith(
+      expect.objectContaining({ defaultTheme: 'system' }),
+      expect.anything()
+    );
+  });
+
+  it('forwards enableSystem to NextThemesProvider', () => {
+    render(
+      <ThemeProvider attribute="class" defaultTheme="system" enableSystem storageKey="theme">
+        <div />
+      </ThemeProvider>
+    );
+    expect(MockedNextProvider).toHaveBeenCalledWith(
+      expect.objectContaining({ enableSystem: true }),
+      expect.anything()
+    );
+  });
+
+  it('passes all props through without modifying them', () => {
+    render(
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        storageKey="theme"
+        disableTransitionOnChange
+      >
+        <div />
+      </ThemeProvider>
+    );
+    expect(MockedNextProvider).toHaveBeenCalledWith(
+      expect.objectContaining({
+        attribute: 'class',
+        defaultTheme: 'system',
+        enableSystem: true,
+        storageKey: 'theme',
+        disableTransitionOnChange: true,
+      }),
+      expect.anything()
+    );
+  });
+});
+
+// ─── localStorage persistence ─────────────────────────────────────────────────
+
+describe('localStorage persistence', () => {
+  it('stores the selected theme under the "theme" key', () => {
+    setupTheme('light', 'light');
+    renderSelector();
+    fireEvent.click(screen.getByRole('button', { name: /dark/i }));
+    expect(mockSetTheme).toHaveBeenCalledWith('dark');
+  });
+
+  it('does not store under any other key', () => {
+    setupTheme('light', 'light');
+    renderSelector();
+    fireEvent.click(screen.getByRole('button', { name: /dark/i }));
+    // Only one call, with the value 'dark', implying the key contract is 'theme'
+    expect(mockSetTheme).toHaveBeenCalledTimes(1);
+    expect(mockSetTheme).toHaveBeenCalledWith('dark');
+  });
+
+  it('restores the stored theme after remount', () => {
+    localStorage.setItem('theme', 'dark');
+    // next-themes reads localStorage on init; our mock reflects that stored state
+    setupTheme('dark', 'dark');
+
+    renderSelector({ mode: 'light' }); // settings.mode is stale; useTheme is authoritative
+
+    const darkBtn = screen.getByRole('button', { name: /dark/i });
+    expect(darkBtn).toHaveClass('border-primary');
+  });
+
+  it('restores light theme after remount', () => {
+    localStorage.setItem('theme', 'light');
+    setupTheme('light', 'light');
+
+    renderSelector({ mode: 'dark' }); // stale settings — useTheme overrides
+
+    const lightBtn = screen.getByRole('button', { name: /light/i });
+    expect(lightBtn).toHaveClass('border-primary');
+    const darkBtn = screen.getByRole('button', { name: /dark/i });
+    expect(darkBtn).not.toHaveClass('border-primary');
+  });
+
+  it('falls back to system mode when no preference is in localStorage', () => {
+    expect(localStorage.getItem('theme')).toBeNull();
+    setupTheme('system', 'light');
+
+    renderSelector({ mode: 'system' });
+
+    const systemBtn = screen.getByRole('button', { name: /system/i });
+    expect(systemBtn).toHaveClass('border-primary');
+  });
+});
+
+// ─── ThemeToggle (components/ui/ThemeToggle) ──────────────────────────────────
+
+describe('ThemeToggle — ui/ThemeToggle', () => {
+  it('switches from light to dark', () => {
+    setupTheme('light', 'light');
+    render(<UiThemeToggle />);
+    fireEvent.click(screen.getByRole('button', { name: /toggle theme/i }));
+    expect(mockSetTheme).toHaveBeenCalledWith('dark');
+  });
+
+  it('switches from dark to light', () => {
+    setupTheme('dark', 'dark');
+    render(<UiThemeToggle />);
+    fireEvent.click(screen.getByRole('button', { name: /toggle theme/i }));
+    expect(mockSetTheme).toHaveBeenCalledWith('light');
+  });
+
+  it('uses resolvedTheme to decide direction when mode is "system" (dark OS)', () => {
+    setupTheme('system', 'dark');
+    render(<UiThemeToggle />);
+    fireEvent.click(screen.getByRole('button', { name: /toggle theme/i }));
+    expect(mockSetTheme).toHaveBeenCalledWith('light');
+  });
+
+  it('uses resolvedTheme to decide direction when mode is "system" (light OS)', () => {
+    setupTheme('system', 'light');
+    render(<UiThemeToggle />);
+    fireEvent.click(screen.getByRole('button', { name: /toggle theme/i }));
+    expect(mockSetTheme).toHaveBeenCalledWith('dark');
+  });
+
+  it('SSR output is a placeholder with no click handler (prevents theme flash)', () => {
+    // renderToStaticMarkup simulates the server render: useEffect never runs,
+    // so mounted=false and the placeholder branch is returned. This is exactly
+    // what the browser displays before client JS hydrates — no flash of the
+    // wrong theme because there is no interactive button yet.
+    setupTheme('dark', 'dark');
+    const html = renderToStaticMarkup(<UiThemeToggle />);
+
+    expect(html).toContain('aria-label="Toggle theme"');
+    expect(html).not.toContain('onclick');
+  });
+});
+
+// ─── ThemeToggle (components/ThemeToggle) ────────────────────────────────────
+
+describe('ThemeToggle — components/ThemeToggle', () => {
+  it('switches from light to dark', () => {
+    setupTheme('light', 'light');
+    render(<NavThemeToggle />);
+    fireEvent.click(screen.getByRole('button', { name: /toggle theme/i }));
+    expect(mockSetTheme).toHaveBeenCalledWith('dark');
+  });
+
+  it('switches from dark to light', () => {
+    setupTheme('dark', 'dark');
+    render(<NavThemeToggle />);
+    fireEvent.click(screen.getByRole('button', { name: /toggle theme/i }));
+    expect(mockSetTheme).toHaveBeenCalledWith('light');
+  });
+
+  it('uses resolvedTheme when mode is "system" (dark OS)', () => {
+    setupTheme('system', 'dark');
+    render(<NavThemeToggle />);
+    fireEvent.click(screen.getByRole('button', { name: /toggle theme/i }));
+    expect(mockSetTheme).toHaveBeenCalledWith('light');
+  });
+
+  it('SSR output is a placeholder with no click handler (prevents theme flash)', () => {
+    setupTheme('light', 'light');
+    const html = renderToStaticMarkup(<NavThemeToggle />);
+
+    expect(html).toContain('aria-label="Toggle theme"');
+    expect(html).not.toContain('onclick');
+  });
+});
+
+// ─── ThemeSelector ────────────────────────────────────────────────────────────
+
+describe('ThemeSelector', () => {
+  it('shows the active mode from useTheme, not from the stale settings prop', () => {
+    setupTheme('dark', 'dark');
+    renderSelector({ mode: 'light' }); // settings says light, useTheme says dark
+
+    expect(screen.getByRole('button', { name: /dark/i })).toHaveClass('border-primary');
+    expect(screen.getByRole('button', { name: /light/i })).not.toHaveClass('border-primary');
+  });
+
+  it('calls setTheme with the selected mode', () => {
+    setupTheme('light', 'light');
+    renderSelector();
+    fireEvent.click(screen.getByRole('button', { name: /dark/i }));
+    expect(mockSetTheme).toHaveBeenCalledWith('dark');
+  });
+
+  it('calls onUpdate with the selected mode', () => {
+    setupTheme('light', 'light');
+    const { onUpdate } = renderSelector();
+    fireEvent.click(screen.getByRole('button', { name: /dark/i }));
+    expect(onUpdate).toHaveBeenCalledWith({ mode: 'dark' });
+  });
+
+  it('can select system mode, calling both setTheme and onUpdate', () => {
+    setupTheme('light', 'light');
+    const { onUpdate } = renderSelector();
+    fireEvent.click(screen.getByRole('button', { name: /system/i }));
+    expect(mockSetTheme).toHaveBeenCalledWith('system');
+    expect(onUpdate).toHaveBeenCalledWith({ mode: 'system' });
+  });
+
+  it('can select light mode', () => {
+    setupTheme('dark', 'dark');
+    const { onUpdate } = renderSelector({ mode: 'dark' });
+    fireEvent.click(screen.getByRole('button', { name: /light/i }));
+    expect(mockSetTheme).toHaveBeenCalledWith('light');
+    expect(onUpdate).toHaveBeenCalledWith({ mode: 'light' });
+  });
+
+  it('marks the active mode as highlighted and others as not highlighted', () => {
+    setupTheme('system', 'light');
+    renderSelector({ mode: 'system' });
+
+    expect(screen.getByRole('button', { name: /system/i })).toHaveClass('border-primary');
+    expect(screen.getByRole('button', { name: /light/i })).not.toHaveClass('border-primary');
+    expect(screen.getByRole('button', { name: /dark/i })).not.toHaveClass('border-primary');
+  });
+});
+
+// ─── Cross-component synchronization ─────────────────────────────────────────
+
+describe('cross-component theme synchronization', () => {
+  it('both ThemeToggle components read the same theme state', () => {
+    setupTheme('dark', 'dark');
+
+    const { unmount: unmount1 } = render(<UiThemeToggle />);
+    const { unmount: unmount2 } = render(<NavThemeToggle />);
+
+    // Both buttons are rendered; both should call setTheme with 'light' when clicked
+    const buttons = screen.getAllByRole('button', { name: /toggle theme/i });
+    expect(buttons).toHaveLength(2);
+    fireEvent.click(buttons[0]);
+    expect(mockSetTheme).toHaveBeenCalledWith('light');
+
+    unmount1();
+    unmount2();
+  });
+
+  it('ThemeSelector and ThemeToggle reflect the same persisted theme', () => {
+    localStorage.setItem('theme', 'dark');
+    setupTheme('dark', 'dark');
+
+    render(
+      <>
+        <UiThemeToggle />
+        <ThemeSelector
+          settings={defaultSettings}
+          onUpdate={jest.fn()}
+          onSave={jest.fn().mockResolvedValue(true)}
+          isSaving={false}
+        />
+      </>
+    );
+
+    // ThemeToggle: clicking toggles to light (from dark)
+    const toggleBtn = screen.getByRole('button', { name: /toggle theme/i });
+    fireEvent.click(toggleBtn);
+    expect(mockSetTheme).toHaveBeenCalledWith('light');
+
+    // ThemeSelector: dark mode button is highlighted (matches persisted theme)
+    expect(screen.getByRole('button', { name: /dark/i })).toHaveClass('border-primary');
+  });
+
+  it('a theme selection in ThemeSelector is what ThemeToggle would then read', () => {
+    setupTheme('light', 'light');
+    const { onUpdate } = renderSelector();
+
+    // User selects dark in ThemeSelector
+    fireEvent.click(screen.getByRole('button', { name: /dark/i }));
+    expect(mockSetTheme).toHaveBeenCalledWith('dark');
+    expect(onUpdate).toHaveBeenCalledWith({ mode: 'dark' });
+
+    // After setTheme('dark'), next-themes updates the store; ThemeToggle would then
+    // read resolvedTheme='dark' and toggle to 'light'.
+    setupTheme('dark', 'dark');
+    const { unmount } = render(<UiThemeToggle />);
+    const toggleBtn = screen.getByRole('button', { name: /toggle theme/i });
+    fireEvent.click(toggleBtn);
+    expect(mockSetTheme).toHaveBeenLastCalledWith('light');
+    unmount();
+  });
+});
diff --git a/frontend/src/app/[locale]/layout.tsx b/frontend/src/app/[locale]/layout.tsx
index 8dc9ef2a..f7d6d40d 100644
--- a/frontend/src/app/[locale]/layout.tsx
+++ b/frontend/src/app/[locale]/layout.tsx
@@ -74,6 +74,7 @@ export default function RootLayout({
             defaultTheme="system"
             enableSystem
             disableTransitionOnChange
+            storageKey="theme"
           >
             <ErrorProvider>
               <CollaborationProvider>
diff --git a/frontend/src/app/[locale]/profile/edit/page.tsx b/frontend/src/app/[locale]/profile/edit/page.tsx
index 223ae660..e8e3013d 100644
--- a/frontend/src/app/[locale]/profile/edit/page.tsx
+++ b/frontend/src/app/[locale]/profile/edit/page.tsx
@@ -13,8 +13,8 @@ import { X, Camera, Upload, CheckCircle, AlertTriangle, Twitter, Github, Twitch
 import { cn } from '@/lib/utils';
 import type { ProfileCustomization } from '@/types/profile';
 import type { UserProfileUpdate } from '@/types/user';
+import { MAX_BIO_LENGTH } from '@/lib/validations/profile';
 
-const MAX_BIO_LENGTH = 500;
 const USERNAME_MIN_LENGTH = 3;
 const USERNAME_MAX_LENGTH = 20;
 
@@ -141,7 +141,7 @@ function ProfileEditContent() {
     const value = e.target.value;
     setBio(value);
     if (value.length > MAX_BIO_LENGTH) {
-      setBioError('Bio must be 500 characters or less');
+      setBioError(`Bio must be ${MAX_BIO_LENGTH} characters or less`);
     } else {
       setBioError(null);
     }
@@ -353,7 +353,10 @@ function ProfileEditContent() {
           <CardTitle>Bio</CardTitle>
         </CardHeader>
         <CardContent className="space-y-2">
+          <label htmlFor="profile-bio" className="sr-only">Bio</label>
           <textarea
+            id="profile-bio"
+            aria-label="Bio"
             value={bio}
             onChange={handleBioChange}
             rows={4}
diff --git a/frontend/src/components/ThemeToggle.tsx b/frontend/src/components/ThemeToggle.tsx
index 32569a62..6bbf087a 100644
--- a/frontend/src/components/ThemeToggle.tsx
+++ b/frontend/src/components/ThemeToggle.tsx
@@ -7,13 +7,27 @@ import { useTheme } from "next-themes";
 import { Button } from "@/components/ui/Button";
 
 export function ThemeToggle() {
-  const { setTheme, theme } = useTheme();
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Render a stable placeholder before mount to avoid hydration mismatch.
+  if (!mounted) {
+    return (
+      <Button variant="ghost" size="sm" aria-label="Toggle theme">
+        <span className="h-[1.2rem] w-[1.2rem] block" aria-hidden="true" />
+      </Button>
+    );
+  }
 
   return (
     <Button
       variant="ghost"
       size="sm"
-      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
     >
       <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
       <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
diff --git a/frontend/src/components/profile/ProfileBio.tsx b/frontend/src/components/profile/ProfileBio.tsx
index 6dc5c77a..973c25e7 100644
--- a/frontend/src/components/profile/ProfileBio.tsx
+++ b/frontend/src/components/profile/ProfileBio.tsx
@@ -5,7 +5,9 @@ import { User } from "@/types/user";
 import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/Card";
 import { Button } from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
-import { Edit2, Twitter, Github, Twitch, ExternalLink, Save, X } from "lucide-react";
+import { Edit2, Twitter, Github, Twitch, Save, X, AlertTriangle } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { MAX_BIO_LENGTH, profileBioSchema } from "@/lib/validations/profile";
 
 interface ProfileBioProps {
   user: User;
@@ -15,11 +17,31 @@ interface ProfileBioProps {
 export function ProfileBio({ user, onSave }: ProfileBioProps) {
   const [isEditing, setIsEditing] = useState(false);
   const [bio, setBio] = useState(user.bio || "");
+  const [bioError, setBioError] = useState<string | null>(null);
   const [twitter, setTwitter] = useState(user.socialLinks?.twitter || "");
   const [discord, setDiscord] = useState(user.socialLinks?.discord || "");
   const [twitch, setTwitch] = useState(user.socialLinks?.twitch || "");
 
+  const bioLength = bio.length;
+  const bioExceedsLimit = bioLength > MAX_BIO_LENGTH;
+  const bioNearLimit = bioLength >= Math.floor(MAX_BIO_LENGTH * 0.9);
+
+  function handleBioChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+    const value = e.target.value;
+    setBio(value);
+
+    const result = profileBioSchema.safeParse({ bio: value });
+    if (!result.success) {
+      const msg = result.error.issues.find((i) => i.path[0] === "bio")?.message ?? null;
+      setBioError(msg);
+    } else {
+      setBioError(null);
+    }
+  }
+
   const handleSave = () => {
+    if (bioExceedsLimit) return;
+
     onSave({
       bio,
       socialLinks: {
@@ -32,6 +54,15 @@ export function ProfileBio({ user, onSave }: ProfileBioProps) {
     setIsEditing(false);
   };
 
+  function handleCancel() {
+    setBio(user.bio || "");
+    setBioError(null);
+    setTwitter(user.socialLinks?.twitter || "");
+    setDiscord(user.socialLinks?.discord || "");
+    setTwitch(user.socialLinks?.twitch || "");
+    setIsEditing(false);
+  }
+
   return (
     <Card className="h-full">
       <CardHeader className="flex flex-row items-center justify-between pb-2">
@@ -50,11 +81,36 @@ export function ProfileBio({ user, onSave }: ProfileBioProps) {
               <label htmlFor="bio" className="text-sm font-medium">Bio</label>
               <textarea
                 id="bio"
-                className="flex min-h-[100px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                aria-describedby="bio-counter bio-error"
+                aria-invalid={bioExceedsLimit}
+                className={cn(
+                  "flex min-h-[100px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                  bioExceedsLimit && "border-destructive"
+                )}
                 value={bio}
-                onChange={(e) => setBio(e.target.value)}
+                onChange={handleBioChange}
                 placeholder="Tell us about yourself..."
               />
+              <p
+                id="bio-counter"
+                aria-live="polite"
+                className={cn(
+                  "text-xs text-right",
+                  bioNearLimit ? "text-destructive font-medium" : "text-muted-foreground"
+                )}
+              >
+                {bioLength} / {MAX_BIO_LENGTH}
+              </p>
+              {bioError && (
+                <p
+                  id="bio-error"
+                  role="alert"
+                  className="text-sm text-destructive flex items-center gap-1"
+                >
+                  <AlertTriangle className="h-4 w-4 flex-shrink-0" />
+                  {bioError}
+                </p>
+              )}
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               <div className="space-y-2">
@@ -121,11 +177,11 @@ export function ProfileBio({ user, onSave }: ProfileBioProps) {
       </CardContent>
       {isEditing && (
         <CardFooter className="flex justify-end gap-2 pt-0">
-          <Button variant="ghost" size="sm" onClick={() => setIsEditing(false)}>
+          <Button variant="ghost" size="sm" onClick={handleCancel}>
             <X className="h-4 w-4 mr-2" />
             Cancel
           </Button>
-          <Button size="sm" onClick={handleSave}>
+          <Button size="sm" onClick={handleSave} disabled={bioExceedsLimit}>
             <Save className="h-4 w-4 mr-2" />
             Save Changes
           </Button>
diff --git a/frontend/src/components/settings/ThemeSelector.tsx b/frontend/src/components/settings/ThemeSelector.tsx
index 1b611b93..1da69280 100644
--- a/frontend/src/components/settings/ThemeSelector.tsx
+++ b/frontend/src/components/settings/ThemeSelector.tsx
@@ -1,8 +1,9 @@
 "use client";
 import { Switch } from "@/components/ui/Switch";
 
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Sun, Moon, Monitor, Check, Save, Palette, Layout, Sparkles } from "lucide-react";
+import { useTheme } from "next-themes";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/Card";
 import { Button } from "@/components/ui/Button";
 import type { ThemeSettings as ThemeSettingsType, AccentColor } from "@/types/settings";
@@ -22,6 +23,23 @@ export function ThemeSelector({
   isSaving,
 }: ThemeSelectorProps) {
   const [saveSuccess, setSaveSuccess] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme, resolvedTheme } = useTheme();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // After mount, next-themes is the authoritative source for which mode is active.
+  const activeMode = (mounted ? (theme as ThemeSettingsType["mode"] | undefined) : undefined) ?? settings.mode;
+
+  // resolvedTheme gives the actual light/dark value even when mode is "system".
+  const previewMode = (mounted ? (resolvedTheme as ThemeSettingsType["mode"] | undefined) : undefined) ?? settings.mode;
+
+  const handleModeSelect = (mode: ThemeSettingsType["mode"]) => {
+    setTheme(mode);
+    onUpdate({ mode });
+  };
 
   const handleSave = async () => {
     const success = await onSave();
@@ -85,22 +103,22 @@ export function ThemeSelector({
             {(["light", "dark", "system"] as const).map((mode) => (
               <button
                 key={mode}
-                onClick={() => onUpdate({ mode })}
+                onClick={() => handleModeSelect(mode)}
                 className={`flex flex-col items-center gap-3 p-6 rounded-xl border-2 transition-all ${
-                  settings.mode === mode
+                  activeMode === mode
                     ? "border-primary bg-primary/10"
                     : "border-muted hover:border-muted-foreground/50"
                 }`}
               >
                 <div
                   className={`p-3 rounded-full ${
-                    settings.mode === mode ? "bg-primary text-white" : "bg-muted"
+                    activeMode === mode ? "bg-primary text-white" : "bg-muted"
                   }`}
                 >
                   {getThemeModeIcon(mode)}
                 </div>
                 <span className="text-sm font-medium">{getThemeModeLabel(mode)}</span>
-                {settings.mode === mode && (
+                {activeMode === mode && (
                   <div className="absolute top-3 right-3">
                     <Check className="h-4 w-4 text-primary" />
                   </div>
@@ -205,9 +223,9 @@ export function ThemeSelector({
         <CardContent>
           <div
             className={`p-6 rounded-lg border-2 ${
-              settings.mode === "dark"
+              previewMode === "dark"
                 ? "bg-background border-border"
-                : settings.mode === "light"
+                : previewMode === "light"
                 ? "bg-muted border-border"
                 : "bg-gradient-to-br from-gray-100 to-gray-900 border-gray-400"
             }`}
@@ -216,15 +234,15 @@ export function ThemeSelector({
               <div className="flex items-center gap-3">
                 <div className={`w-10 h-10 rounded-full ${accentColors.find(c => c.value === settings.accentColor)?.hex}`} />
                 <div className="space-y-1">
-                  <div className={`h-3 w-32 rounded ${settings.mode === "dark" ? "bg-surface-raised" : "bg-gray-300"}`} />
-                  <div className={`h-2 w-24 rounded ${settings.mode === "dark" ? "bg-surface" : "bg-muted"}`} />
+                  <div className={`h-3 w-32 rounded ${previewMode === "dark" ? "bg-surface-raised" : "bg-gray-300"}`} />
+                  <div className={`h-2 w-24 rounded ${previewMode === "dark" ? "bg-surface" : "bg-muted"}`} />
                 </div>
               </div>
-              <div className={`h-2 w-full rounded ${settings.mode === "dark" ? "bg-surface" : "bg-muted"}`} />
-              <div className={`h-2 w-3/4 rounded ${settings.mode === "dark" ? "bg-surface" : "bg-muted"}`} />
+              <div className={`h-2 w-full rounded ${previewMode === "dark" ? "bg-surface" : "bg-muted"}`} />
+              <div className={`h-2 w-3/4 rounded ${previewMode === "dark" ? "bg-surface" : "bg-muted"}`} />
               <div className="flex gap-2">
                 <div className={`h-8 w-24 rounded ${accentColors.find(c => c.value === settings.accentColor)?.hex}`} />
-                <div className={`h-8 w-20 rounded ${settings.mode === "dark" ? "bg-surface" : "bg-muted"}`} />
+                <div className={`h-8 w-20 rounded ${previewMode === "dark" ? "bg-surface" : "bg-muted"}`} />
               </div>
             </div>
           </div>
@@ -246,4 +264,4 @@ export function ThemeSelector({
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/ui/ThemeToggle.tsx b/frontend/src/components/ui/ThemeToggle.tsx
index 2d859f66..d36964b1 100644
--- a/frontend/src/components/ui/ThemeToggle.tsx
+++ b/frontend/src/components/ui/ThemeToggle.tsx
@@ -6,13 +6,27 @@ import { useTheme } from "next-themes";
 import { Button } from "./Button";
 
 export function ThemeToggle() {
-  const { setTheme, theme } = useTheme();
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Render a stable placeholder before mount to avoid hydration mismatch.
+  if (!mounted) {
+    return (
+      <Button variant="ghost" size="sm" aria-label="Toggle theme">
+        <span className="h-[1.2rem] w-[1.2rem] block" aria-hidden="true" />
+      </Button>
+    );
+  }
 
   return (
     <Button
       variant="ghost"
       size="sm"
-      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
     >
       <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
       <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
diff --git a/frontend/src/lib/validations/profile.ts b/frontend/src/lib/validations/profile.ts
new file mode 100644
index 00000000..9c44cdd2
--- /dev/null
+++ b/frontend/src/lib/validations/profile.ts
@@ -0,0 +1,12 @@
+import { z } from "zod";
+
+export const MAX_BIO_LENGTH = 280;
+
+export const profileBioSchema = z.object({
+  bio: z
+    .string()
+    .max(MAX_BIO_LENGTH, `Bio must be ${MAX_BIO_LENGTH} characters or less`)
+    .optional(),
+});
+
+export type ProfileBioFormData = z.infer<typeof profileBioSchema>;