diff --git a/ui/src/pages/AccountSettingsPage.tsx b/ui/src/pages/AccountSettingsPage.tsx
new file mode 100644
index 0000000..e217a4a
--- /dev/null
+++ b/ui/src/pages/AccountSettingsPage.tsx
@@ -0,0 +1,27 @@
+import { useNavigate } from 'react-router';
+import { ArrowLeft } from 'lucide-react';
+import { Button } from '@cameleer/design-system';
+import { ProfileSection } from '../components/account/ProfileSection';
+import { PasswordChangeSection } from '../components/account/PasswordChangeSection';
+import { MfaSection } from '../components/account/MfaSection';
+import { PasskeyNudgeBanner, PasskeySection } from '../components/account/PasskeySection';
+
+export function AccountSettingsPage() {
+  const navigate = useNavigate();
+
+  return (
+    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+        <Button variant="ghost" onClick={() => navigate(-1)} style={{ padding: '4px 8px' }}>
+          <ArrowLeft size={16} />
+        </Button>
+        <h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600 }}>Account Settings</h1>
+      </div>
+      <ProfileSection />
+      <PasswordChangeSection />
+      <MfaSection />
+      <PasskeyNudgeBanner />
+      <PasskeySection />
+    </div>
+  );
+}