Changes

src/App.tsx

@@ -3,8 +3,36 @@ import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Index from "./pages/Index";
+
-import NotFound from "./pages/NotFound";
+// Layouts
+import PublicLayout from "@/components/layouts/PublicLayout";
+import AuthenticatedLayout from "@/components/layouts/AuthenticatedLayout";
+
+// Public pages
+import Index from "@/pages/Index";
+import LoginPage from "@/pages/auth/LoginPage";
+import RegisterPage from "@/pages/auth/RegisterPage";
+import VerifyEmailPage from "@/pages/auth/VerifyEmailPage";
+import ForgotPasswordPage from "@/pages/auth/ForgotPasswordPage";
+import ResetPasswordPage from "@/pages/auth/ResetPasswordPage";
+import InviteAcceptPage from "@/pages/auth/InviteAcceptPage";
+import OIDCConsentPage from "@/pages/auth/OIDCConsentPage";
+import OIDCErrorPage from "@/pages/auth/OIDCErrorPage";
+
+// User pages
+import ProfilePage from "@/pages/user/ProfilePage";
+import SecurityPage from "@/pages/user/SecurityPage";
+import LinkedAccountsPage from "@/pages/user/LinkedAccountsPage";
+import ActivityPage from "@/pages/user/ActivityPage";
+
+// Organization pages
+import OrgOverviewPage from "@/pages/org/OrgOverviewPage";
+import MembersPage from "@/pages/org/MembersPage";
+import PoliciesPage from "@/pages/org/PoliciesPage";
+import OrgAuditPage from "@/pages/org/OrgAuditPage";
+import OIDCClientsPage from "@/pages/org/OIDCClientsPage";
+
+import NotFound from "@/pages/NotFound";
 
 const queryClient = new QueryClient();
 
@@ -15,8 +43,38 @@ const App = () => (
       <Sonner />
       <BrowserRouter>
         <Routes>
+          {/* Index redirect */}
           <Route path="/" element={<Index />} />
-          {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
+
+          {/* Public routes */}
+          <Route element={<PublicLayout />}>
+            <Route path="/login" element={<LoginPage />} />
+            <Route path="/register" element={<RegisterPage />} />
+            <Route path="/verify-email" element={<VerifyEmailPage />} />
+            <Route path="/forgot-password" element={<ForgotPasswordPage />} />
+            <Route path="/reset-password" element={<ResetPasswordPage />} />
+            <Route path="/invite" element={<InviteAcceptPage />} />
+            <Route path="/consent" element={<OIDCConsentPage />} />
+            <Route path="/error" element={<OIDCErrorPage />} />
+          </Route>
+
+          {/* Authenticated routes */}
+          <Route element={<AuthenticatedLayout />}>
+            {/* User routes */}
+            <Route path="/profile" element={<ProfilePage />} />
+            <Route path="/security" element={<SecurityPage />} />
+            <Route path="/linked-accounts" element={<LinkedAccountsPage />} />
+            <Route path="/activity" element={<ActivityPage />} />
+
+            {/* Organization routes */}
+            <Route path="/org" element={<OrgOverviewPage />} />
+            <Route path="/org/members" element={<MembersPage />} />
+            <Route path="/org/policies" element={<PoliciesPage />} />
+            <Route path="/org/audit" element={<OrgAuditPage />} />
+            <Route path="/org/clients" element={<OIDCClientsPage />} />
+          </Route>
+
+          {/* Catch-all */}
           <Route path="*" element={<NotFound />} />
         </Routes>
       </BrowserRouter>

src/components/layouts/AuthenticatedLayout.tsx

@@ -0,0 +1,20 @@
+import { Outlet } from "react-router-dom";
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { AppSidebar } from "@/components/navigation/AppSidebar";
+import { TopBar } from "@/components/navigation/TopBar";
+
+export default function AuthenticatedLayout() {
+  return (
+    <SidebarProvider>
+      <div className="min-h-screen flex w-full bg-background">
+        <AppSidebar />
+        <div className="flex-1 flex flex-col min-w-0">
+          <TopBar />
+          <main className="flex-1 overflow-auto">
+            <Outlet />
+          </main>
+        </div>
+      </div>
+    </SidebarProvider>
+  );
+}

src/components/layouts/PublicLayout.tsx

@@ -0,0 +1,39 @@
+import { Shield } from "lucide-react";
+import { Outlet, Link } from "react-router-dom";
+
+export default function PublicLayout() {
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      {/* Subtle gradient background */}
+      <div className="fixed inset-0 bg-gradient-to-br from-background via-background to-secondary/30 pointer-events-none" />
+      
+      {/* Header */}
+      <header className="relative z-10 w-full py-6 px-4">
+        <div className="max-w-md mx-auto">
+          <Link to="/" className="flex items-center gap-2 justify-center">
+            <div className="w-9 h-9 rounded-lg bg-primary flex items-center justify-center">
+              <Shield className="w-5 h-5 text-primary-foreground" />
+            </div>
+            <span className="text-xl font-semibold text-foreground tracking-tight">Authy2</span>
+          </Link>
+        </div>
+      </header>
+
+      {/* Main content */}
+      <main className="relative z-10 flex-1 flex items-center justify-center px-4 py-8">
+        <div className="w-full max-w-md animate-fade-in">
+          <Outlet />
+        </div>
+      </main>
+
+      {/* Footer */}
+      <footer className="relative z-10 py-6 px-4">
+        <div className="max-w-md mx-auto text-center">
+          <p className="text-sm text-muted-foreground">
+            © {new Date().getFullYear()} Authy2. Secure identity management.
+          </p>
+        </div>
+      </footer>
+    </div>
+  );
+}

src/components/navigation/AppSidebar.tsx

@@ -0,0 +1,176 @@
+import { useLocation } from "react-router-dom";
+import {
+  User,
+  Shield,
+  Link2,
+  Activity,
+  Building2,
+  Users,
+  Settings,
+  FileText,
+  Key,
+} from "lucide-react";
+import { NavLink } from "@/components/NavLink";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarHeader,
+  SidebarFooter,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+const userNavItems = [
+  { title: "Profile", url: "/profile", icon: User },
+  { title: "Security", url: "/security", icon: Shield },
+  { title: "Linked Accounts", url: "/linked-accounts", icon: Link2 },
+  { title: "Activity", url: "/activity", icon: Activity },
+];
+
+const orgNavItems = [
+  { title: "Overview", url: "/org", icon: Building2 },
+  { title: "Members", url: "/org/members", icon: Users },
+  { title: "Policies", url: "/org/policies", icon: Settings },
+  { title: "Audit Log", url: "/org/audit", icon: FileText },
+];
+
+const adminNavItems = [
+  { title: "OIDC Clients", url: "/org/clients", icon: Key },
+];
+
+export function AppSidebar() {
+  const { state } = useSidebar();
+  const collapsed = state === "collapsed";
+  const location = useLocation();
+
+  const isActive = (path: string) => location.pathname === path;
+  const isOrgActive = orgNavItems.some((item) => isActive(item.url)) || adminNavItems.some((item) => isActive(item.url));
+  const isUserActive = userNavItems.some((item) => isActive(item.url));
+
+  return (
+    <Sidebar
+      className={cn(
+        "border-r border-sidebar-border bg-sidebar transition-all duration-300",
+        collapsed ? "w-16" : "w-64"
+      )}
+      collapsible="icon"
+    >
+      {/* Logo */}
+      <SidebarHeader className="p-4 border-b border-sidebar-border">
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-lg bg-sidebar-primary flex items-center justify-center flex-shrink-0">
+            <Shield className="w-4 h-4 text-sidebar-primary-foreground" />
+          </div>
+          {!collapsed && (
+            <span className="text-lg font-semibold text-sidebar-foreground tracking-tight">
+              Authy2
+            </span>
+          )}
+        </div>
+      </SidebarHeader>
+
+      <SidebarContent className="py-4">
+        {/* User Section */}
+        <SidebarGroup>
+          <SidebarGroupLabel className="px-4 text-xs font-medium text-sidebar-muted uppercase tracking-wider">
+            {!collapsed && "Account"}
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {userNavItems.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <NavLink
+                      to={item.url}
+                      end
+                      className={cn(
+                        "flex items-center gap-3 px-4 py-2.5 text-sm text-sidebar-foreground rounded-lg mx-2 transition-colors",
+                        "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                      )}
+                      activeClassName="bg-sidebar-accent text-sidebar-primary font-medium"
+                    >
+                      <item.icon className="w-4 h-4 flex-shrink-0" />
+                      {!collapsed && <span>{item.title}</span>}
+                    </NavLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {/* Organization Section */}
+        <SidebarGroup className="mt-4">
+          <SidebarGroupLabel className="px-4 text-xs font-medium text-sidebar-muted uppercase tracking-wider">
+            {!collapsed && "Organization"}
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {orgNavItems.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <NavLink
+                      to={item.url}
+                      end
+                      className={cn(
+                        "flex items-center gap-3 px-4 py-2.5 text-sm text-sidebar-foreground rounded-lg mx-2 transition-colors",
+                        "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                      )}
+                      activeClassName="bg-sidebar-accent text-sidebar-primary font-medium"
+                    >
+                      <item.icon className="w-4 h-4 flex-shrink-0" />
+                      {!collapsed && <span>{item.title}</span>}
+                    </NavLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {/* Admin Section */}
+        <SidebarGroup className="mt-4">
+          <SidebarGroupLabel className="px-4 text-xs font-medium text-sidebar-muted uppercase tracking-wider">
+            {!collapsed && "Admin"}
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {adminNavItems.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <NavLink
+                      to={item.url}
+                      end
+                      className={cn(
+                        "flex items-center gap-3 px-4 py-2.5 text-sm text-sidebar-foreground rounded-lg mx-2 transition-colors",
+                        "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                      )}
+                      activeClassName="bg-sidebar-accent text-sidebar-primary font-medium"
+                    >
+                      <item.icon className="w-4 h-4 flex-shrink-0" />
+                      {!collapsed && <span>{item.title}</span>}
+                    </NavLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter className="p-4 border-t border-sidebar-border">
+        {!collapsed && (
+          <div className="text-xs text-sidebar-muted">
+            v1.0.0 • Self-hosted
+          </div>
+        )}
+      </SidebarFooter>
+    </Sidebar>
+  );
+}

src/components/navigation/TopBar.tsx

@@ -0,0 +1,127 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Menu, ChevronDown, LogOut, User, Shield, Building2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+// Mock user data - will be replaced with real auth context
+const mockUser = {
+  name: "John Doe",
+  email: "john@example.com",
+  avatar: null,
+  initials: "JD",
+};
+
+// Mock organization data
+const mockOrgs = [
+  { id: "1", name: "Acme Corp", role: "admin" },
+  { id: "2", name: "Beta Inc", role: "member" },
+];
+
+export function TopBar() {
+  const navigate = useNavigate();
+  const [currentOrg, setCurrentOrg] = useState(mockOrgs[0]);
+
+  const handleLogout = () => {
+    // Will be replaced with actual logout logic
+    navigate("/login");
+  };
+
+  return (
+    <header className="h-14 border-b border-border bg-card flex items-center justify-between px-4 flex-shrink-0">
+      {/* Left side - Sidebar toggle */}
+      <div className="flex items-center gap-3">
+        <SidebarTrigger className="text-muted-foreground hover:text-foreground">
+          <Menu className="w-5 h-5" />
+        </SidebarTrigger>
+      </div>
+
+      {/* Right side - Org selector + User menu */}
+      <div className="flex items-center gap-3">
+        {/* Organization Selector */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="flex items-center gap-2 h-9 px-3">
+              <div className="w-6 h-6 rounded bg-primary/10 flex items-center justify-center">
+                <Building2 className="w-3.5 h-3.5 text-primary" />
+              </div>
+              <span className="text-sm font-medium hidden sm:inline">{currentOrg.name}</span>
+              <ChevronDown className="w-4 h-4 text-muted-foreground" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuLabel className="text-xs text-muted-foreground uppercase tracking-wider">
+              Switch Organization
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {mockOrgs.map((org) => (
+              <DropdownMenuItem
+                key={org.id}
+                onClick={() => setCurrentOrg(org)}
+                className="flex items-center justify-between"
+              >
+                <div className="flex items-center gap-2">
+                  <Building2 className="w-4 h-4 text-muted-foreground" />
+                  <span>{org.name}</span>
+                </div>
+                {org.role === "admin" && (
+                  <span className="text-xs bg-accent/10 text-accent px-1.5 py-0.5 rounded">
+                    Admin
+                  </span>
+                )}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        {/* User Menu */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="flex items-center gap-2 h-9 px-2">
+              <Avatar className="w-7 h-7">
+                <AvatarImage src={mockUser.avatar || undefined} />
+                <AvatarFallback className="bg-primary text-primary-foreground text-xs">
+                  {mockUser.initials}
+                </AvatarFallback>
+              </Avatar>
+              <ChevronDown className="w-4 h-4 text-muted-foreground hidden sm:block" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuLabel>
+              <div className="flex flex-col">
+                <span className="font-medium">{mockUser.name}</span>
+                <span className="text-xs text-muted-foreground font-normal">
+                  {mockUser.email}
+                </span>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={() => navigate("/profile")}>
+              <User className="w-4 h-4 mr-2" />
+              Profile
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => navigate("/security")}>
+              <Shield className="w-4 h-4 mr-2" />
+              Security
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={handleLogout} className="text-destructive focus:text-destructive">
+              <LogOut className="w-4 h-4 mr-2" />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+}

src/index.css

@@ -2,95 +2,129 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
+/* Authy2 Design System - Enterprise Authentication Platform
-All colors MUST be HSL.
+   Colors are HSL for theming flexibility
 */
 
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
 @layer base {
   :root {
-    --background: 0 0% 100%;
+    /* Core palette - Deep slate with teal accent */
-    --foreground: 222.2 84% 4.9%;
+    --background: 210 20% 98%;
+    --foreground: 222 47% 11%;
 
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 222 47% 11%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --popover-foreground: 222 47% 11%;
 
-    --primary: 222.2 47.4% 11.2%;
+    /* Primary - Deep navy for trust */
+    --primary: 222 47% 20%;
     --primary-foreground: 210 40% 98%;
 
-    --secondary: 210 40% 96.1%;
+    /* Secondary - Soft slate */
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 215 20% 95%;
+    --secondary-foreground: 222 47% 20%;
 
-    --muted: 210 40% 96.1%;
+    /* Muted - Subtle backgrounds */
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 215 20% 96%;
+    --muted-foreground: 215 16% 47%;
 
-    --accent: 210 40% 96.1%;
+    /* Accent - Teal for actions and highlights */
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 173 58% 39%;
+    --accent-foreground: 0 0% 100%;
 
-    --destructive: 0 84.2% 60.2%;
+    /* Semantic colors */
-    --destructive-foreground: 210 40% 98%;
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 0% 100%;
 
-    --border: 214.3 31.8% 91.4%;
+    --success: 152 69% 31%;
-    --input: 214.3 31.8% 91.4%;
+    --success-foreground: 0 0% 100%;
-    --ring: 222.2 84% 4.9%;
+
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 100%;
+
+    --info: 199 89% 48%;
+    --info-foreground: 0 0% 100%;
+
+    /* UI elements */
+    --border: 214 32% 91%;
+    --input: 214 32% 91%;
+    --ring: 173 58% 39%;
 
     --radius: 0.5rem;
 
-    --sidebar-background: 0 0% 98%;
+    /* Sidebar - Darker for visual hierarchy */
+    --sidebar-background: 222 47% 11%;
+    --sidebar-foreground: 215 20% 85%;
+    --sidebar-primary: 173 58% 45%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 222 40% 18%;
+    --sidebar-accent-foreground: 210 40% 98%;
+    --sidebar-border: 222 40% 20%;
+    --sidebar-ring: 173 58% 45%;
+    --sidebar-muted: 215 16% 55%;
 
-    --sidebar-foreground: 240 5.3% 26.1%;
+    /* Custom gradients and effects */
-
+    --gradient-brand: linear-gradient(135deg, hsl(222 47% 20%), hsl(222 47% 11%));
-    --sidebar-primary: 240 5.9% 10%;
+    --gradient-accent: linear-gradient(135deg, hsl(173 58% 39%), hsl(173 58% 32%));
-
+    --gradient-subtle: linear-gradient(135deg, hsl(210 20% 98%), hsl(215 20% 96%));
-    --sidebar-primary-foreground: 0 0% 98%;
+    
-
+    --shadow-sm: 0 1px 2px 0 hsl(222 47% 11% / 0.05);
-    --sidebar-accent: 240 4.8% 95.9%;
+    --shadow-md: 0 4px 6px -1px hsl(222 47% 11% / 0.1), 0 2px 4px -2px hsl(222 47% 11% / 0.1);
-
+    --shadow-lg: 0 10px 15px -3px hsl(222 47% 11% / 0.1), 0 4px 6px -4px hsl(222 47% 11% / 0.1);
-    --sidebar-accent-foreground: 240 5.9% 10%;
+    --shadow-card: 0 1px 3px 0 hsl(222 47% 11% / 0.06), 0 1px 2px -1px hsl(222 47% 11% / 0.06);
-
-    --sidebar-border: 220 13% 91%;
-
-    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
+    --background: 222 47% 6%;
     --foreground: 210 40% 98%;
 
-    --card: 222.2 84% 4.9%;
+    --card: 222 47% 9%;
     --card-foreground: 210 40% 98%;
 
-    --popover: 222.2 84% 4.9%;
+    --popover: 222 47% 9%;
     --popover-foreground: 210 40% 98%;
 
-    --primary: 210 40% 98%;
+    --primary: 173 58% 45%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --primary-foreground: 222 47% 11%;
 
-    --secondary: 217.2 32.6% 17.5%;
+    --secondary: 222 40% 15%;
     --secondary-foreground: 210 40% 98%;
 
-    --muted: 217.2 32.6% 17.5%;
+    --muted: 222 40% 15%;
-    --muted-foreground: 215 20.2% 65.1%;
+    --muted-foreground: 215 20% 65%;
 
-    --accent: 217.2 32.6% 17.5%;
+    --accent: 173 58% 39%;
-    --accent-foreground: 210 40% 98%;
+    --accent-foreground: 0 0% 100%;
 
-    --destructive: 0 62.8% 30.6%;
+    --destructive: 0 62% 40%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive-foreground: 0 0% 100%;
 
-    --border: 217.2 32.6% 17.5%;
+    --success: 152 69% 36%;
-    --input: 217.2 32.6% 17.5%;
+    --success-foreground: 0 0% 100%;
-    --ring: 212.7 26.8% 83.9%;
+
-    --sidebar-background: 240 5.9% 10%;
+    --warning: 38 92% 55%;
-    --sidebar-foreground: 240 4.8% 95.9%;
+    --warning-foreground: 0 0% 100%;
-    --sidebar-primary: 224.3 76.3% 48%;
+
+    --info: 199 89% 53%;
+    --info-foreground: 0 0% 100%;
+
+    --border: 222 40% 18%;
+    --input: 222 40% 18%;
+    --ring: 173 58% 45%;
+
+    --sidebar-background: 222 47% 6%;
+    --sidebar-foreground: 215 20% 85%;
+    --sidebar-primary: 173 58% 45%;
     --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent: 222 40% 12%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 210 40% 98%;
-    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-border: 222 40% 15%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --sidebar-ring: 173 58% 45%;
+    --sidebar-muted: 215 16% 55%;
   }
 }
 
@@ -99,7 +133,102 @@ All colors MUST be HSL.
     @apply border-border;
   }
 
+  html {
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  }
+
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased;
+    font-feature-settings: "cv11", "ss01";
+  }
+
+  /* Smooth focus states */
+  :focus-visible {
+    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
+  }
+}
+
+@layer components {
+  /* Auth card for public pages */
+  .auth-card {
+    @apply bg-card rounded-xl p-8 shadow-card border border-border;
+  }
+
+  /* Section header styling */
+  .section-header {
+    @apply text-lg font-semibold text-foreground mb-1;
+  }
+
+  .section-description {
+    @apply text-sm text-muted-foreground;
+  }
+
+  /* Status badges */
+  .status-badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+  }
+
+  .status-badge-success {
+    @apply bg-success/10 text-success;
+  }
+
+  .status-badge-warning {
+    @apply bg-warning/10 text-warning;
+  }
+
+  .status-badge-error {
+    @apply bg-destructive/10 text-destructive;
+  }
+
+  .status-badge-info {
+    @apply bg-info/10 text-info;
+  }
+
+  /* Page layout helpers */
+  .page-container {
+    @apply p-6 lg:p-8 max-w-5xl;
+  }
+
+  .page-header {
+    @apply mb-8;
+  }
+
+  .page-title {
+    @apply text-2xl font-semibold text-foreground tracking-tight;
+  }
+
+  .page-description {
+    @apply text-muted-foreground mt-1;
+  }
+}
+
+@layer utilities {
+  /* Animation utilities */
+  .animate-fade-in {
+    animation: fadeIn 0.3s ease-out;
+  }
+
+  .animate-slide-in {
+    animation: slideIn 0.3s ease-out;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideIn {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 }

src/pages/Index.tsx

@@ -1,14 +1,15 @@
-// Update this page (the content is just a fallback if you fail to update the page)
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 
 const Index = () => {
-  return (
+  const navigate = useNavigate();
-    <div className="flex min-h-screen items-center justify-center bg-background">
+
-      <div className="text-center">
+  useEffect(() => {
-        <h1 className="mb-4 text-4xl font-bold">Welcome to Your Blank App</h1>
+    // Redirect to login for now - will be replaced with auth check
-        <p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
+    navigate("/login");
-      </div>
+  }, [navigate]);
-    </div>
+
-  );
+  return null;
 };
 
 export default Index;

src/pages/auth/ForgotPasswordPage.tsx

@@ -0,0 +1,94 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { Mail, ArrowLeft, ArrowRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      setIsSubmitted(true);
+    }, 1000);
+  };
+
+  if (isSubmitted) {
+    return (
+      <div className="auth-card text-center">
+        <div className="w-16 h-16 rounded-full bg-accent/10 flex items-center justify-center mx-auto mb-6">
+          <Mail className="w-8 h-8 text-accent" />
+        </div>
+
+        <h1 className="text-2xl font-semibold text-foreground tracking-tight">
+          Check your email
+        </h1>
+        <p className="text-muted-foreground mt-2 mb-6">
+          If an account exists for {email}, you'll receive a password reset link shortly.
+        </p>
+
+        <Link to="/login">
+          <Button variant="outline" className="w-full">
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            Back to sign in
+          </Button>
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="auth-card">
+      <div className="text-center mb-8">
+        <h1 className="text-2xl font-semibold text-foreground tracking-tight">
+          Forgot password?
+        </h1>
+        <p className="text-muted-foreground mt-2">
+          Enter your email and we'll send you a reset link
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <div className="relative">
+            <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              id="email"
+              type="email"
+              placeholder="you@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="pl-10"
+              required
+            />
+          </div>
+        </div>
+
+        <Button type="submit" className="w-full" disabled={isLoading}>
+          {isLoading ? (
+            "Sending..."
+          ) : (
+            <>
+              Send reset link
+              <ArrowRight className="w-4 h-4 ml-2" />
+            </>
+          )}
+        </Button>
+      </form>
+
+      <p className="text-center text-sm text-muted-foreground mt-6">
+        <Link to="/login" className="text-accent hover:underline font-medium inline-flex items-center">
+          <ArrowLeft className="w-4 h-4 mr-1" />
+          Back to sign in
+        </Link>
+      </p>
+    </div>
+  );
+}

src/pages/auth/InviteAcceptPage.tsx

@@ -0,0 +1,136 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { User, Lock, Upload, ArrowRight, Building2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
+export default function InviteAcceptPage() {
+  const navigate = useNavigate();
+  const [name, setName] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Mock invite data - will be fetched from URL token
+  const inviteData = {
+    email: "invited@example.com",
+    organization: "Acme Corp",
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      return;
+    }
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      navigate("/profile");
+    }, 1000);
+  };
+
+  return (
+    <div className="auth-card">
+      <div className="text-center mb-8">
+        <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mx-auto mb-4">
+          <Building2 className="w-6 h-6 text-primary" />
+        </div>
+        <h1 className="text-2xl font-semibold text-foreground tracking-tight">
+          You're invited!
+        </h1>
+        <p className="text-muted-foreground mt-2">
+          <span className="font-medium text-foreground">{inviteData.organization}</span> has
+          invited you to join their organization
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {/* Avatar upload */}
+        <div className="flex flex-col items-center mb-6">
+          <Avatar className="w-20 h-20 mb-3">
+            <AvatarFallback className="bg-primary text-primary-foreground text-xl">
+              {name ? name.split(" ").map(n => n[0]).join("").slice(0, 2).toUpperCase() : "?"}
+            </AvatarFallback>
+          </Avatar>
+          <Button type="button" variant="outline" size="sm">
+            <Upload className="w-4 h-4 mr-2" />
+            Upload photo
+          </Button>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            value={inviteData.email}
+            disabled
+            className="bg-muted"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="name">Full name</Label>
+          <div className="relative">
+            <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              id="name"
+              type="text"
+              placeholder="John Doe"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="pl-10"
+              required
+            />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="password">Password</Label>
+          <div className="relative">
+            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              id="password"
+              type="password"
+              placeholder="••••••••"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="pl-10"
+              required
+              minLength={8}
+            />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="confirmPassword">Confirm password</Label>
+          <div className="relative">
+            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              id="confirmPassword"
+              type="password"
+              placeholder="••••••••"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              className="pl-10"
+              required
+            />
+          </div>
+        </div>
+
+        <Button type="submit" className="w-full" disabled={isLoading}>
+          {isLoading ? (
+            "Joining..."
+          ) : (
+            <>
+              Join {inviteData.organization}
+              <ArrowRight className="w-4 h-4 ml-2" />
+            </>
+          )}
+        </Button>
+      </form>
+    </div>
+  );
+}

src/pages/auth/LoginPage.tsx

@@ -0,0 +1,151 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { Mail, Lock, ArrowRight, Fingerprint } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+
+export default function LoginPage() {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    // Mock login - will be replaced with actual auth
+    setTimeout(() => {
+      setIsLoading(false);
+      navigate("/profile");
+    }, 1000);
+  };
+
+  return (
+    <div className="auth-card">
+      <div className="text-center mb-8">
+        <h1 className="text-2xl font-semibold text-foreground tracking-tight">
+          Welcome back
+        </h1>
+        <p className="text-muted-foreground mt-2">
+          Sign in to your account to continue
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <div className="relative">
+            <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              id="email"
+              type="email"
+              placeholder="you@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="pl-10"
+              required
+            />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label htmlFor="password">Password</Label>
+            <Link
+              to="/forgot-password"
+              className="text-sm text-accent hover:underline"
+            >
+              Forgot password?
+            </Link>
+          </div>
+          <div className="relative">
+            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              id="password"
+              type="password"
+              placeholder="••••••••"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="pl-10"
+              required
+            />
+          </div>
+        </div>
+
+        <Button type="submit" className="w-full" disabled={isLoading}>
+          {isLoading ? (
+            "Signing in..."
+          ) : (
+            <>
+              Sign in
+              <ArrowRight className="w-4 h-4 ml-2" />
+            </>
+          )}
+        </Button>
+      </form>
+
+      <div className="relative my-6">
+        <Separator />
+        <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-xs text-muted-foreground">
+          or continue with
+        </span>
+      </div>
+
+      {/* Alternative login methods */}
+      <div className="space-y-3">
+        <Button variant="outline" className="w-full" type="button">
+          <Fingerprint className="w-4 h-4 mr-2" />
+          Sign in with Passkey
+        </Button>
+
+        <div className="grid grid-cols-3 gap-3">
+          <Button variant="outline" className="w-full" type="button">
+            <svg className="w-4 h-4" viewBox="0 0 24 24">
+              <path
+                fill="currentColor"
+                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+              />
+              <path
+                fill="currentColor"
+                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+              />
+              <path
+                fill="currentColor"
+                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+              />
+              <path
+                fill="currentColor"
+                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+              />
+            </svg>
+          </Button>
+          <Button variant="outline" className="w-full" type="button">
+            <svg className="w-4 h-4" viewBox="0 0 24 24">
+              <path
+                fill="currentColor"
+                d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z"
+              />
+            </svg>
+          </Button>
+          <Button variant="outline" className="w-full" type="button">
+            <svg className="w-4 h-4" viewBox="0 0 24 24">
+              <path
+                fill="currentColor"
+                d="M21.35 11.1h-9.17v2.73h6.51c-.33 3.81-3.5 5.44-6.5 5.44C8.36 19.27 5 16.25 5 12c0-4.1 3.2-7.27 7.2-7.27 3.09 0 4.9 1.97 4.9 1.97L19 4.72S16.56 2 12.1 2C6.42 2 2.03 6.8 2.03 12c0 5.05 4.13 10 10.22 10 5.35 0 9.25-3.67 9.25-9.09 0-1.15-.15-1.81-.15-1.81z"
+              />
+            </svg>
+          </Button>
+        </div>
+      </div>
+
+      <p className="text-center text-sm text-muted-foreground mt-6">
+        Don't have an account?{" "}
+        <Link to="/register" className="text-accent hover:underline font-medium">
+          Create one
+        </Link>
+      </p>
+    </div>
+  );
+}

src/pages/auth/OIDCConsentPage.tsx

@@ -0,0 +1,109 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { CheckCircle, XCircle, Shield, User, Mail, Building2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+
+export default function OIDCConsentPage() {
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Mock OIDC client data - will be fetched from auth flow
+  const clientData = {
+    name: "GitLab",
+    logo: null,
+    redirectUri: "https://gitlab.example.com/callback",
+    scopes: [
+      { id: "openid", name: "OpenID", description: "Verify your identity" },
+      { id: "profile", name: "Profile", description: "Access your name and profile picture" },
+      { id: "email", name: "Email", description: "Access your email address" },
+    ],
+  };
+
+  const handleAllow = () => {
+    setIsLoading(true);
+    // Mock consent - will redirect to client callback
+    setTimeout(() => {
+      setIsLoading(false);
+      // In real implementation: redirect to redirectUri with auth code
+    }, 500);
+  };
+
+  const handleDeny = () => {
+    navigate(-1);
+  };
+
+  return (
+    <div className="auth-card">
+      <div className="text-center mb-6">
+        <div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center mx-auto mb-4">
+          <Shield className="w-7 h-7 text-primary" />
+        </div>
+        <h1 className="text-xl font-semibold text-foreground tracking-tight">
+          Authorize {clientData.name}
+        </h1>
+        <p className="text-sm text-muted-foreground mt-2">
+          This application wants to access your account
+        </p>
+      </div>
+
+      <Card className="p-4 bg-secondary/30 border-0 mb-6">
+        <p className="text-sm text-foreground font-medium mb-3">
+          {clientData.name} is requesting access to:
+        </p>
+        <ul className="space-y-3">
+          {clientData.scopes.map((scope) => (
+            <li key={scope.id} className="flex items-start gap-3">
+              <div className="w-8 h-8 rounded-lg bg-card flex items-center justify-center flex-shrink-0">
+                {scope.id === "openid" && <Shield className="w-4 h-4 text-accent" />}
+                {scope.id === "profile" && <User className="w-4 h-4 text-accent" />}
+                {scope.id === "email" && <Mail className="w-4 h-4 text-accent" />}
+              </div>
+              <div>
+                <p className="text-sm font-medium text-foreground">{scope.name}</p>
+                <p className="text-xs text-muted-foreground">{scope.description}</p>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </Card>
+
+      <div className="flex items-center gap-2 text-xs text-muted-foreground mb-6">
+        <Building2 className="w-4 h-4" />
+        <span>
+          Redirecting to: <span className="font-mono text-foreground">{clientData.redirectUri}</span>
+        </span>
+      </div>
+
+      <Separator className="mb-6" />
+
+      <div className="flex gap-3">
+        <Button
+          variant="outline"
+          onClick={handleDeny}
+          className="flex-1"
+          disabled={isLoading}
+        >
+          <XCircle className="w-4 h-4 mr-2" />
+          Deny
+        </Button>
+        <Button
+          onClick={handleAllow}
+          className="flex-1"
+          disabled={isLoading}
+        >
+          <CheckCircle className="w-4 h-4 mr-2" />
+          {isLoading ? "Authorizing..." : "Allow"}
+        </Button>
+      </div>
+
+      <p className="text-center text-xs text-muted-foreground mt-4">
+        You can revoke this access anytime from your{" "}
+        <a href="/linked-accounts" className="text-accent hover:underline">
+          linked accounts
+        </a>
+      </p>
+    </div>
+  );
+}

src/pages/auth/OIDCErrorPage.tsx

@@ -0,0 +1,49 @@
+import { AlertTriangle, ArrowLeft, Home } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Link } from "react-router-dom";
+
+export default function OIDCErrorPage() {
+  // Mock error data - will be parsed from URL params
+  const errorData = {
+    error: "invalid_request",
+    description: "The request was missing a required parameter or was otherwise malformed.",
+    clientName: "Unknown Application",
+  };
+
+  return (
+    <div className="auth-card text-center">
+      <div className="w-16 h-16 rounded-full bg-destructive/10 flex items-center justify-center mx-auto mb-6">
+        <AlertTriangle className="w-8 h-8 text-destructive" />
+      </div>
+
+      <h1 className="text-2xl font-semibold text-foreground tracking-tight">
+        Authentication Error
+      </h1>
+      <p className="text-muted-foreground mt-2 mb-4">
+        There was a problem with the authentication request.
+      </p>
+
+      <div className="bg-destructive/5 border border-destructive/20 rounded-lg p-4 mb-6 text-left">
+        <p className="text-sm font-medium text-foreground mb-1">
+          Error: <code className="text-destructive">{errorData.error}</code>
+        </p>
+        <p className="text-sm text-muted-foreground">
+          {errorData.description}
+        </p>
+      </div>
+
+      <div className="space-y-3">
+        <Button variant="outline" className="w-full" onClick={() => window.history.back()}>
+          <ArrowLeft className="w-4 h-4 mr-2" />
+          Go back
+        </Button>
+        <Link to="/">
+          <Button variant="ghost" className="w-full">
+            <Home className="w-4 h-4 mr-2" />
+            Return to home
+          </Button>
+        </Link>
+      </div>
+    </div>
+  );
+}

src/pages/auth/RegisterPage.tsx

@@ -0,0 +1,140 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { Mail, Lock, User, ArrowRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export default function RegisterPage() {
+  const navigate = useNavigate();
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      return;
+    }
+    setIsLoading(true);
+    // Mock registration - will be replaced with actual auth
+    setTimeout(() => {
+      setIsLoading(false);
+      navigate("/verify-email");
+    }, 1000);
+  };
+
+  return (
+    <div className="auth-card">
+      <div className="text-center mb-8">
+        <h1 className="text-2xl font-semibold text-foreground tracking-tight">
+          Create your account
+        </h1>
+        <p className="text-muted-foreground mt-2">
+          Get started with Authy2 in seconds
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="name">Full name</Label>
+          <div className="relative">
+            <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              id="name"
+              type="text"
+              placeholder="John Doe"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="pl-10"
+              required
+            />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <div className="relative">
+            <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              id="email"
+              type="email"
+              placeholder="you@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="pl-10"
+              required
+            />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="password">Password</Label>
+          <div className="relative">
+            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              id="password"
+              type="password"
+              placeholder="••••••••"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="pl-10"
+              required
+              minLength={8}
+            />
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Must be at least 8 characters
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="confirmPassword">Confirm password</Label>
+          <div className="relative">
+            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              id="confirmPassword"
+              type="password"
+              placeholder="••••••••"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              className="pl-10"
+              required
+            />
+          </div>
+        </div>
+
+        <Button type="submit" className="w-full" disabled={isLoading}>
+          {isLoading ? (
+            "Creating account..."
+          ) : (
+            <>
+              Create account
+              <ArrowRight className="w-4 h-4 ml-2" />
+            </>
+          )}
+        </Button>
+      </form>
+
+      <p className="text-center text-sm text-muted-foreground mt-6">
+        Already have an account?{" "}
+        <Link to="/login" className="text-accent hover:underline font-medium">
+          Sign in
+        </Link>
+      </p>
+
+      <p className="text-center text-xs text-muted-foreground mt-4">
+        By creating an account, you agree to our{" "}
+        <Link to="/terms" className="underline">
+          Terms of Service
+        </Link>{" "}
+        and{" "}
+        <Link to="/privacy" className="underline">
+          Privacy Policy
+        </Link>
+      </p>
+    </div>
+  );
+}

src/pages/auth/ResetPasswordPage.tsx

@@ -0,0 +1,110 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Lock, ArrowRight, CheckCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export default function ResetPasswordPage() {
+  const navigate = useNavigate();
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      return;
+    }
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      setIsSuccess(true);
+    }, 1000);
+  };
+
+  if (isSuccess) {
+    return (
+      <div className="auth-card text-center">
+        <div className="w-16 h-16 rounded-full bg-success/10 flex items-center justify-center mx-auto mb-6">
+          <CheckCircle className="w-8 h-8 text-success" />
+        </div>
+
+        <h1 className="text-2xl font-semibold text-foreground tracking-tight">
+          Password reset successful
+        </h1>
+        <p className="text-muted-foreground mt-2 mb-6">
+          Your password has been updated. You can now sign in with your new password.
+        </p>
+
+        <Button onClick={() => navigate("/login")} className="w-full">
+          Sign in
+          <ArrowRight className="w-4 h-4 ml-2" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="auth-card">
+      <div className="text-center mb-8">
+        <h1 className="text-2xl font-semibold text-foreground tracking-tight">
+          Reset your password
+        </h1>
+        <p className="text-muted-foreground mt-2">
+          Enter a new password for your account
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="password">New password</Label>
+          <div className="relative">
+            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              id="password"
+              type="password"
+              placeholder="••••••••"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="pl-10"
+              required
+              minLength={8}
+            />
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Must be at least 8 characters
+          </p>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="confirmPassword">Confirm new password</Label>
+          <div className="relative">
+            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              id="confirmPassword"
+              type="password"
+              placeholder="••••••••"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              className="pl-10"
+              required
+            />
+          </div>
+        </div>
+
+        <Button type="submit" className="w-full" disabled={isLoading}>
+          {isLoading ? (
+            "Resetting..."
+          ) : (
+            <>
+              Reset password
+              <ArrowRight className="w-4 h-4 ml-2" />
+            </>
+          )}
+        </Button>
+      </form>
+    </div>
+  );
+}

src/pages/auth/VerifyEmailPage.tsx

@@ -0,0 +1,34 @@
+import { Mail, RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Link } from "react-router-dom";
+
+export default function VerifyEmailPage() {
+  return (
+    <div className="auth-card text-center">
+      <div className="w-16 h-16 rounded-full bg-accent/10 flex items-center justify-center mx-auto mb-6">
+        <Mail className="w-8 h-8 text-accent" />
+      </div>
+
+      <h1 className="text-2xl font-semibold text-foreground tracking-tight">
+        Check your email
+      </h1>
+      <p className="text-muted-foreground mt-2 mb-6">
+        We've sent a verification link to your email address. Click the link to verify your account.
+      </p>
+
+      <div className="space-y-3">
+        <Button variant="outline" className="w-full">
+          <RefreshCw className="w-4 h-4 mr-2" />
+          Resend verification email
+        </Button>
+      </div>
+
+      <p className="text-sm text-muted-foreground mt-6">
+        Wrong email?{" "}
+        <Link to="/register" className="text-accent hover:underline font-medium">
+          Go back
+        </Link>
+      </p>
+    </div>
+  );
+}

src/pages/org/MembersPage.tsx

@@ -0,0 +1,210 @@
+import { useState } from "react";
+import { Search, Plus, MoreHorizontal, Shield, User, Mail, Clock } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+const members = [
+  {
+    id: "1",
+    name: "John Doe",
+    email: "john@example.com",
+    role: "admin",
+    status: "active",
+    lastActive: "2 hours ago",
+    avatar: null,
+    initials: "JD",
+  },
+  {
+    id: "2",
+    name: "Jane Smith",
+    email: "jane@example.com",
+    role: "member",
+    status: "active",
+    lastActive: "5 minutes ago",
+    avatar: null,
+    initials: "JS",
+  },
+  {
+    id: "3",
+    name: "Bob Wilson",
+    email: "bob@example.com",
+    role: "member",
+    status: "disabled",
+    lastActive: "3 days ago",
+    avatar: null,
+    initials: "BW",
+  },
+];
+
+const pendingInvites = [
+  {
+    id: "1",
+    email: "alice@example.com",
+    role: "member",
+    sentAt: "2 days ago",
+    expiresAt: "5 days",
+  },
+  {
+    id: "2",
+    email: "charlie@example.com",
+    role: "admin",
+    sentAt: "1 hour ago",
+    expiresAt: "7 days",
+  },
+];
+
+export default function MembersPage() {
+  const [search, setSearch] = useState("");
+
+  return (
+    <div className="page-container">
+      <div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 className="page-title">Members</h1>
+          <p className="page-description">
+            Manage organization members and invitations
+          </p>
+        </div>
+        <Button>
+          <Plus className="w-4 h-4 mr-2" />
+          Invite member
+        </Button>
+      </div>
+
+      <Tabs defaultValue="members" className="w-full">
+        <TabsList className="mb-4">
+          <TabsTrigger value="members">
+            Members ({members.length})
+          </TabsTrigger>
+          <TabsTrigger value="invites">
+            Pending Invites ({pendingInvites.length})
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="members">
+          <div className="mb-4">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <Input
+                placeholder="Search members..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="pl-10 max-w-sm"
+              />
+            </div>
+          </div>
+
+          <Card>
+            <CardContent className="p-0">
+              <div className="divide-y">
+                {members.map((member) => (
+                  <div key={member.id} className="p-4 flex items-center gap-4">
+                    <Avatar className="w-10 h-10">
+                      <AvatarImage src={member.avatar || undefined} />
+                      <AvatarFallback className="bg-primary text-primary-foreground">
+                        {member.initials}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <p className="font-medium text-foreground truncate">
+                          {member.name}
+                        </p>
+                        {member.role === "admin" && (
+                          <Badge variant="secondary" className="text-xs">
+                            <Shield className="w-3 h-3 mr-1" />
+                            Admin
+                          </Badge>
+                        )}
+                        {member.status === "disabled" && (
+                          <Badge variant="destructive" className="text-xs">
+                            Disabled
+                          </Badge>
+                        )}
+                      </div>
+                      <p className="text-sm text-muted-foreground truncate">
+                        {member.email}
+                      </p>
+                    </div>
+                    <p className="text-sm text-muted-foreground hidden sm:block">
+                      Active {member.lastActive}
+                    </p>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                          <MoreHorizontal className="w-4 h-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem>
+                          <User className="w-4 h-4 mr-2" />
+                          View profile
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <Shield className="w-4 h-4 mr-2" />
+                          Change role
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem className="text-destructive">
+                          {member.status === "active" ? "Disable" : "Enable"} account
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="invites">
+          <Card>
+            <CardContent className="p-0">
+              <div className="divide-y">
+                {pendingInvites.map((invite) => (
+                  <div key={invite.id} className="p-4 flex items-center gap-4">
+                    <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center">
+                      <Mail className="w-4 h-4 text-muted-foreground" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <p className="font-medium text-foreground truncate">
+                        {invite.email}
+                      </p>
+                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                        <span>Invited as {invite.role}</span>
+                        <span>•</span>
+                        <span className="flex items-center gap-1">
+                          <Clock className="w-3 h-3" />
+                          Expires in {invite.expiresAt}
+                        </span>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <Button variant="outline" size="sm">
+                        Resend
+                      </Button>
+                      <Button variant="ghost" size="sm" className="text-destructive">
+                        Revoke
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

src/pages/org/OIDCClientsPage.tsx

@@ -0,0 +1,177 @@
+import { useState } from "react";
+import { Plus, Key, ExternalLink, MoreHorizontal, Copy, RefreshCw, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+
+const clients = [
+  {
+    id: "1",
+    name: "GitLab",
+    clientId: "gitlab_prod_xxxxxxxxxxxxx",
+    redirectUris: ["https://gitlab.example.com/callback"],
+    scopes: ["openid", "profile", "email"],
+    createdAt: "2024-01-10",
+    lastUsed: "2 hours ago",
+  },
+  {
+    id: "2",
+    name: "Grafana",
+    clientId: "grafana_prod_xxxxxxxxxxxxx",
+    redirectUris: ["https://grafana.example.com/login/generic_oauth"],
+    scopes: ["openid", "profile"],
+    createdAt: "2024-01-08",
+    lastUsed: "5 minutes ago",
+  },
+  {
+    id: "3",
+    name: "OAuth2 Proxy",
+    clientId: "oauth2proxy_xxxxxxxxxxxxx",
+    redirectUris: ["https://auth.example.com/oauth2/callback"],
+    scopes: ["openid", "profile", "email", "groups"],
+    createdAt: "2024-01-05",
+    lastUsed: "1 day ago",
+  },
+];
+
+export default function OIDCClientsPage() {
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
+
+  return (
+    <div className="page-container">
+      <div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 className="page-title">OIDC Clients</h1>
+          <p className="page-description">
+            Manage applications that authenticate via Authy2
+          </p>
+        </div>
+        <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
+          <DialogTrigger asChild>
+            <Button>
+              <Plus className="w-4 h-4 mr-2" />
+              Add client
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+              <DialogTitle>Create OIDC Client</DialogTitle>
+              <DialogDescription>
+                Register a new application to authenticate via Authy2
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-4 py-4">
+              <div className="space-y-2">
+                <Label htmlFor="clientName">Client name</Label>
+                <Input id="clientName" placeholder="My Application" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="redirectUris">Redirect URIs</Label>
+                <Textarea
+                  id="redirectUris"
+                  placeholder="https://myapp.example.com/callback"
+                  className="min-h-[80px]"
+                />
+                <p className="text-xs text-muted-foreground">
+                  One URI per line. These are the allowed callback URLs.
+                </p>
+              </div>
+              <div className="flex justify-end gap-2">
+                <Button variant="outline" onClick={() => setIsCreateOpen(false)}>
+                  Cancel
+                </Button>
+                <Button onClick={() => setIsCreateOpen(false)}>
+                  Create client
+                </Button>
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      <div className="space-y-4">
+        {clients.map((client) => (
+          <Card key={client.id}>
+            <CardContent className="p-5">
+              <div className="flex items-start justify-between">
+                <div className="flex items-start gap-4">
+                  <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
+                    <Key className="w-6 h-6 text-primary" />
+                  </div>
+                  <div>
+                    <h3 className="font-semibold text-foreground">{client.name}</h3>
+                    <div className="flex items-center gap-2 mt-1">
+                      <code className="text-xs bg-muted px-2 py-1 rounded font-mono">
+                        {client.clientId}
+                      </code>
+                      <Button variant="ghost" size="icon" className="w-6 h-6">
+                        <Copy className="w-3 h-3" />
+                      </Button>
+                    </div>
+                    <div className="flex flex-wrap gap-1 mt-3">
+                      {client.scopes.map((scope) => (
+                        <Badge key={scope} variant="secondary" className="text-xs">
+                          {scope}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon">
+                      <MoreHorizontal className="w-4 h-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem>
+                      <ExternalLink className="w-4 h-4 mr-2" />
+                      View details
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <RefreshCw className="w-4 h-4 mr-2" />
+                      Rotate secret
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem className="text-destructive">
+                      <Trash2 className="w-4 h-4 mr-2" />
+                      Delete client
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+              <div className="mt-4 pt-4 border-t flex items-center justify-between text-sm text-muted-foreground">
+                <div className="flex items-center gap-4">
+                  <span>Created {client.createdAt}</span>
+                  <span>•</span>
+                  <span>Last used {client.lastUsed}</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  {client.redirectUris.length} redirect URI{client.redirectUris.length > 1 ? "s" : ""}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

src/pages/org/OrgAuditPage.tsx

@@ -0,0 +1,177 @@
+import { useState } from "react";
+import { Search, Filter, Download, User, Settings, Key, UserPlus, AlertTriangle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+const auditEvents = [
+  {
+    id: "1",
+    type: "member_invited",
+    actor: "John Doe",
+    target: "alice@example.com",
+    timestamp: "2024-01-15T10:30:00Z",
+    details: "Invited as member",
+  },
+  {
+    id: "2",
+    type: "policy_changed",
+    actor: "John Doe",
+    target: "Password Policy",
+    timestamp: "2024-01-15T09:00:00Z",
+    details: "Minimum length changed from 8 to 12",
+  },
+  {
+    id: "3",
+    type: "member_disabled",
+    actor: "Jane Smith",
+    target: "bob@example.com",
+    timestamp: "2024-01-14T15:45:00Z",
+    details: "Account disabled",
+  },
+  {
+    id: "4",
+    type: "client_created",
+    actor: "John Doe",
+    target: "GitLab",
+    timestamp: "2024-01-14T12:00:00Z",
+    details: "OIDC client created",
+  },
+  {
+    id: "5",
+    type: "role_changed",
+    actor: "John Doe",
+    target: "jane@example.com",
+    timestamp: "2024-01-13T09:00:00Z",
+    details: "Role changed from member to admin",
+  },
+];
+
+const getEventIcon = (type: string) => {
+  switch (type) {
+    case "member_invited":
+    case "role_changed":
+      return <UserPlus className="w-4 h-4" />;
+    case "policy_changed":
+      return <Settings className="w-4 h-4" />;
+    case "member_disabled":
+      return <AlertTriangle className="w-4 h-4" />;
+    case "client_created":
+      return <Key className="w-4 h-4" />;
+    default:
+      return <User className="w-4 h-4" />;
+  }
+};
+
+const getEventTitle = (type: string) => {
+  switch (type) {
+    case "member_invited":
+      return "Member invited";
+    case "policy_changed":
+      return "Policy changed";
+    case "member_disabled":
+      return "Member disabled";
+    case "client_created":
+      return "OIDC client created";
+    case "role_changed":
+      return "Role changed";
+    default:
+      return "Event";
+  }
+};
+
+export default function OrgAuditPage() {
+  const [search, setSearch] = useState("");
+  const [typeFilter, setTypeFilter] = useState("all");
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+    }).format(date);
+  };
+
+  return (
+    <div className="page-container">
+      <div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 className="page-title">Audit Log</h1>
+          <p className="page-description">
+            View all administrative actions and changes
+          </p>
+        </div>
+        <Button variant="outline">
+          <Download className="w-4 h-4 mr-2" />
+          Export
+        </Button>
+      </div>
+
+      <div className="flex flex-col sm:flex-row gap-4 mb-4">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <Input
+            placeholder="Search events..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-10"
+          />
+        </div>
+        <Select value={typeFilter} onValueChange={setTypeFilter}>
+          <SelectTrigger className="w-[180px]">
+            <Filter className="w-4 h-4 mr-2" />
+            <SelectValue placeholder="Filter by type" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All events</SelectItem>
+            <SelectItem value="members">Member changes</SelectItem>
+            <SelectItem value="policies">Policy changes</SelectItem>
+            <SelectItem value="clients">OIDC clients</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <Card>
+        <CardContent className="p-0">
+          <div className="divide-y">
+            {auditEvents.map((event) => (
+              <div key={event.id} className="p-4 flex items-start gap-4">
+                <div
+                  className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
+                    event.type === "member_disabled"
+                      ? "bg-destructive/10 text-destructive"
+                      : "bg-accent/10 text-accent"
+                  }`}
+                >
+                  {getEventIcon(event.type)}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <p className="font-medium text-foreground">
+                      {getEventTitle(event.type)}
+                    </p>
+                    <Badge variant="secondary" className="text-xs">
+                      {event.target}
+                    </Badge>
+                  </div>
+                  <div className="mt-1 text-sm text-muted-foreground">
+                    <span>by {event.actor}</span>
+                    <span className="mx-2">•</span>
+                    <span>{event.details}</span>
+                  </div>
+                </div>
+                <p className="text-sm text-muted-foreground whitespace-nowrap">
+                  {formatDate(event.timestamp)}
+                </p>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/pages/org/OrgOverviewPage.tsx

@@ -0,0 +1,124 @@
+import { Building2, Users, Shield, Key, ArrowRight, TrendingUp } from "lucide-react";
+import { Link } from "react-router-dom";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+export default function OrgOverviewPage() {
+  // Mock organization data
+  const org = {
+    name: "Acme Corp",
+    createdAt: "January 2024",
+    stats: {
+      totalMembers: 24,
+      activeToday: 18,
+      pendingInvites: 3,
+      oidcClients: 5,
+    },
+  };
+
+  const quickLinks = [
+    {
+      title: "Members",
+      description: "Manage team members and roles",
+      icon: Users,
+      href: "/org/members",
+    },
+    {
+      title: "Policies",
+      description: "Configure security requirements",
+      icon: Shield,
+      href: "/org/policies",
+    },
+    {
+      title: "OIDC Clients",
+      description: "Manage connected applications",
+      icon: Key,
+      href: "/org/clients",
+    },
+  ];
+
+  return (
+    <div className="page-container">
+      <div className="page-header">
+        <div className="flex items-center gap-4">
+          <div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center">
+            <Building2 className="w-7 h-7 text-primary" />
+          </div>
+          <div>
+            <h1 className="page-title">{org.name}</h1>
+            <p className="page-description">Created {org.createdAt}</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="grid gap-4 grid-cols-2 lg:grid-cols-4 mb-8">
+        <Card>
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">Total Members</p>
+                <p className="text-2xl font-semibold">{org.stats.totalMembers}</p>
+              </div>
+              <Users className="w-8 h-8 text-muted-foreground/30" />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">Active Today</p>
+                <p className="text-2xl font-semibold">{org.stats.activeToday}</p>
+              </div>
+              <TrendingUp className="w-8 h-8 text-muted-foreground/30" />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">Pending Invites</p>
+                <p className="text-2xl font-semibold">{org.stats.pendingInvites}</p>
+              </div>
+              <Users className="w-8 h-8 text-muted-foreground/30" />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">OIDC Clients</p>
+                <p className="text-2xl font-semibold">{org.stats.oidcClients}</p>
+              </div>
+              <Key className="w-8 h-8 text-muted-foreground/30" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Quick Links */}
+      <h2 className="text-lg font-semibold mb-4">Quick Actions</h2>
+      <div className="grid gap-4 md:grid-cols-3">
+        {quickLinks.map((link) => (
+          <Link key={link.href} to={link.href}>
+            <Card className="h-full hover:border-accent/50 transition-colors cursor-pointer group">
+              <CardContent className="p-5">
+                <div className="flex items-start justify-between">
+                  <div className="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center mb-4">
+                    <link.icon className="w-5 h-5 text-accent" />
+                  </div>
+                  <ArrowRight className="w-4 h-4 text-muted-foreground group-hover:text-accent transition-colors" />
+                </div>
+                <h3 className="font-medium text-foreground">{link.title}</h3>
+                <p className="text-sm text-muted-foreground mt-1">{link.description}</p>
+              </CardContent>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

src/pages/org/PoliciesPage.tsx

@@ -0,0 +1,163 @@
+import { Shield, Lock, Fingerprint, Smartphone, UserPlus, AlertTriangle } from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Slider } from "@/components/ui/slider";
+import { Badge } from "@/components/ui/badge";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+
+export default function PoliciesPage() {
+  return (
+    <div className="page-container">
+      <div className="page-header">
+        <h1 className="page-title">Security Policies</h1>
+        <p className="page-description">
+          Configure security requirements for organization members
+        </p>
+      </div>
+
+      <div className="space-y-6">
+        {/* Registration Mode */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base flex items-center gap-2">
+              <UserPlus className="w-4 h-4" />
+              Registration Mode
+            </CardTitle>
+            <CardDescription>
+              Control how new members can join your organization
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Select defaultValue="invite">
+              <SelectTrigger className="w-full max-w-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="open">Open registration</SelectItem>
+                <SelectItem value="invite">Invite only</SelectItem>
+                <SelectItem value="closed">Closed</SelectItem>
+              </SelectContent>
+            </Select>
+            <p className="text-sm text-muted-foreground mt-2">
+              Invite only: Members can only join via admin invitation
+            </p>
+          </CardContent>
+        </Card>
+
+        {/* Password Policy */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base flex items-center gap-2">
+              <Lock className="w-4 h-4" />
+              Password Policy
+            </CardTitle>
+            <CardDescription>
+              Set minimum password requirements for all members
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <div className="space-y-4">
+              <Label>Minimum password length</Label>
+              <div className="flex items-center gap-4">
+                <Slider
+                  defaultValue={[12]}
+                  max={32}
+                  min={8}
+                  step={1}
+                  className="w-full max-w-xs"
+                />
+                <span className="text-sm font-medium w-16">12 chars</span>
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <div>
+                  <Label>Require uppercase letters</Label>
+                  <p className="text-sm text-muted-foreground">At least one A-Z</p>
+                </div>
+                <Switch defaultChecked />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div>
+                  <Label>Require numbers</Label>
+                  <p className="text-sm text-muted-foreground">At least one 0-9</p>
+                </div>
+                <Switch defaultChecked />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div>
+                  <Label>Require special characters</Label>
+                  <p className="text-sm text-muted-foreground">At least one !@#$%^&*</p>
+                </div>
+                <Switch />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* MFA Requirements */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base flex items-center gap-2">
+              <Smartphone className="w-4 h-4" />
+              Multi-Factor Authentication
+            </CardTitle>
+            <CardDescription>
+              Require additional authentication methods
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <Label className="flex items-center gap-2">
+                  Require TOTP
+                  <Badge variant="secondary" className="text-xs">Recommended</Badge>
+                </Label>
+                <p className="text-sm text-muted-foreground">
+                  All members must set up an authenticator app
+                </p>
+              </div>
+              <Switch defaultChecked />
+            </div>
+
+            <Alert className="border-warning/30 bg-warning/5">
+              <AlertTriangle className="w-4 h-4 text-warning" />
+              <AlertDescription className="text-sm">
+                Enabling this will require all existing members to set up TOTP on their next login.
+              </AlertDescription>
+            </Alert>
+          </CardContent>
+        </Card>
+
+        {/* Passkey Requirements */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base flex items-center gap-2">
+              <Fingerprint className="w-4 h-4" />
+              Passkeys (WebAuthn)
+            </CardTitle>
+            <CardDescription>
+              Require passwordless authentication capability
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center justify-between">
+              <div>
+                <Label>Require at least one passkey</Label>
+                <p className="text-sm text-muted-foreground">
+                  Members must register a passkey for backup authentication
+                </p>
+              </div>
+              <Switch />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

src/pages/user/ActivityPage.tsx

@@ -0,0 +1,182 @@
+import { useState } from "react";
+import { LogIn, LogOut, Key, Fingerprint, Smartphone, AlertTriangle, CheckCircle, MapPin } from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+const activityEvents = [
+  {
+    id: "1",
+    type: "login_success",
+    method: "password",
+    timestamp: "2024-01-15T10:30:00Z",
+    location: "San Francisco, CA",
+    device: "Chrome on macOS",
+    ip: "192.168.1.1",
+  },
+  {
+    id: "2",
+    type: "login_success",
+    method: "passkey",
+    timestamp: "2024-01-14T15:45:00Z",
+    location: "San Francisco, CA",
+    device: "Safari on iOS",
+    ip: "192.168.1.2",
+  },
+  {
+    id: "3",
+    type: "login_failed",
+    method: "password",
+    timestamp: "2024-01-14T12:00:00Z",
+    location: "Unknown",
+    device: "Firefox on Windows",
+    ip: "10.0.0.5",
+  },
+  {
+    id: "4",
+    type: "mfa_enabled",
+    method: "totp",
+    timestamp: "2024-01-13T09:00:00Z",
+    location: "San Francisco, CA",
+    device: "Chrome on macOS",
+    ip: "192.168.1.1",
+  },
+  {
+    id: "5",
+    type: "passkey_added",
+    method: "passkey",
+    timestamp: "2024-01-12T14:30:00Z",
+    location: "San Francisco, CA",
+    device: "Safari on macOS",
+    ip: "192.168.1.1",
+  },
+];
+
+const getEventIcon = (type: string, method: string) => {
+  switch (type) {
+    case "login_success":
+      return method === "passkey" ? (
+        <Fingerprint className="w-4 h-4" />
+      ) : (
+        <LogIn className="w-4 h-4" />
+      );
+    case "login_failed":
+      return <AlertTriangle className="w-4 h-4" />;
+    case "mfa_enabled":
+      return <Smartphone className="w-4 h-4" />;
+    case "passkey_added":
+      return <Fingerprint className="w-4 h-4" />;
+    case "logout":
+      return <LogOut className="w-4 h-4" />;
+    default:
+      return <Key className="w-4 h-4" />;
+  }
+};
+
+const getEventTitle = (type: string, method: string) => {
+  switch (type) {
+    case "login_success":
+      return `Signed in with ${method}`;
+    case "login_failed":
+      return "Failed login attempt";
+    case "mfa_enabled":
+      return "Two-factor authentication enabled";
+    case "passkey_added":
+      return "Passkey added";
+    case "logout":
+      return "Signed out";
+    default:
+      return "Security event";
+  }
+};
+
+const getEventStatus = (type: string) => {
+  if (type === "login_failed") {
+    return { variant: "destructive" as const, label: "Failed" };
+  }
+  return { variant: "default" as const, label: "Success" };
+};
+
+export default function ActivityPage() {
+  const [filter, setFilter] = useState("all");
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+    }).format(date);
+  };
+
+  return (
+    <div className="page-container">
+      <div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 className="page-title">Activity</h1>
+          <p className="page-description">
+            Your recent account activity and security events
+          </p>
+        </div>
+        <Select value={filter} onValueChange={setFilter}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Filter events" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All events</SelectItem>
+            <SelectItem value="logins">Logins only</SelectItem>
+            <SelectItem value="security">Security changes</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <Card>
+        <CardContent className="p-0">
+          <div className="divide-y">
+            {activityEvents.map((event) => {
+              const status = getEventStatus(event.type);
+              return (
+                <div key={event.id} className="p-4 flex items-start gap-4">
+                  <div
+                    className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
+                      event.type === "login_failed"
+                        ? "bg-destructive/10 text-destructive"
+                        : "bg-accent/10 text-accent"
+                    }`}
+                  >
+                    {getEventIcon(event.type, event.method)}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <p className="font-medium text-foreground">
+                        {getEventTitle(event.type, event.method)}
+                      </p>
+                      {event.type === "login_failed" && (
+                        <Badge variant="destructive" className="text-xs">
+                          Failed
+                        </Badge>
+                      )}
+                    </div>
+                    <div className="mt-1 text-sm text-muted-foreground space-y-0.5">
+                      <p>{event.device}</p>
+                      <div className="flex items-center gap-2">
+                        <MapPin className="w-3 h-3" />
+                        <span>{event.location}</span>
+                        <span className="text-muted-foreground/50">•</span>
+                        <span className="font-mono text-xs">{event.ip}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <p className="text-sm text-muted-foreground whitespace-nowrap">
+                    {formatDate(event.timestamp)}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/pages/user/LinkedAccountsPage.tsx

@@ -0,0 +1,121 @@
+import { Link2, Unlink, AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+
+const socialProviders = [
+  {
+    id: "google",
+    name: "Google",
+    icon: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24">
+        <path
+          fill="currentColor"
+          d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+        />
+        <path
+          fill="currentColor"
+          d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+        />
+        <path
+          fill="currentColor"
+          d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+        />
+        <path
+          fill="currentColor"
+          d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+        />
+      </svg>
+    ),
+    linked: true,
+    email: "john.doe@gmail.com",
+  },
+  {
+    id: "github",
+    name: "GitHub",
+    icon: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24">
+        <path
+          fill="currentColor"
+          d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0012 2z"
+        />
+      </svg>
+    ),
+    linked: true,
+    email: "johndoe",
+  },
+  {
+    id: "microsoft",
+    name: "Microsoft",
+    icon: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24">
+        <path fill="#f25022" d="M1 1h10v10H1z" />
+        <path fill="#00a4ef" d="M1 13h10v10H1z" />
+        <path fill="#7fba00" d="M13 1h10v10H13z" />
+        <path fill="#ffb900" d="M13 13h10v10H13z" />
+      </svg>
+    ),
+    linked: false,
+    email: null,
+  },
+];
+
+export default function LinkedAccountsPage() {
+  return (
+    <div className="page-container">
+      <div className="page-header">
+        <h1 className="page-title">Linked Accounts</h1>
+        <p className="page-description">
+          Connect external accounts for alternative login methods
+        </p>
+      </div>
+
+      <Alert className="mb-6">
+        <AlertCircle className="w-4 h-4" />
+        <AlertDescription>
+          Linked accounts can only be used to sign in to an existing Authy2 account.
+          They cannot be used to create new accounts.
+        </AlertDescription>
+      </Alert>
+
+      <div className="space-y-4">
+        {socialProviders.map((provider) => (
+          <Card key={provider.id}>
+            <CardContent className="p-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <div className="w-10 h-10 rounded-lg bg-secondary flex items-center justify-center">
+                    {provider.icon}
+                  </div>
+                  <div>
+                    <p className="font-medium text-foreground">{provider.name}</p>
+                    {provider.linked ? (
+                      <p className="text-sm text-muted-foreground">{provider.email}</p>
+                    ) : (
+                      <p className="text-sm text-muted-foreground">Not connected</p>
+                    )}
+                  </div>
+                </div>
+                {provider.linked ? (
+                  <div className="flex items-center gap-3">
+                    <Badge className="bg-success/10 text-success border-0">Connected</Badge>
+                    <Button variant="outline" size="sm">
+                      <Unlink className="w-4 h-4 mr-2" />
+                      Disconnect
+                    </Button>
+                  </div>
+                ) : (
+                  <Button size="sm">
+                    <Link2 className="w-4 h-4 mr-2" />
+                    Connect
+                  </Button>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

src/pages/user/ProfilePage.tsx

@@ -0,0 +1,150 @@
+import { useState } from "react";
+import { Mail, Building2, Upload, CheckCircle, AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+export default function ProfilePage() {
+  const [name, setName] = useState("John Doe");
+  const [isEditing, setIsEditing] = useState(false);
+
+  // Mock user data
+  const user = {
+    name: "John Doe",
+    email: "john@example.com",
+    emailVerified: true,
+    avatar: null,
+    initials: "JD",
+    organizations: [
+      { name: "Acme Corp", role: "Admin" },
+      { name: "Beta Inc", role: "Member" },
+    ],
+  };
+
+  const handleSave = () => {
+    setIsEditing(false);
+    // Save logic here
+  };
+
+  return (
+    <div className="page-container">
+      <div className="page-header">
+        <h1 className="page-title">Profile</h1>
+        <p className="page-description">
+          Manage your personal information and organization memberships
+        </p>
+      </div>
+
+      <div className="space-y-6">
+        {/* Profile Photo & Name */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Personal Information</CardTitle>
+            <CardDescription>Update your photo and personal details</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            {/* Avatar */}
+            <div className="flex items-center gap-6">
+              <Avatar className="w-20 h-20">
+                <AvatarImage src={user.avatar || undefined} />
+                <AvatarFallback className="bg-primary text-primary-foreground text-xl">
+                  {user.initials}
+                </AvatarFallback>
+              </Avatar>
+              <div>
+                <Button variant="outline" size="sm">
+                  <Upload className="w-4 h-4 mr-2" />
+                  Change photo
+                </Button>
+                <p className="text-xs text-muted-foreground mt-2">
+                  JPG, PNG or GIF. Max 2MB.
+                </p>
+              </div>
+            </div>
+
+            {/* Name */}
+            <div className="space-y-2">
+              <Label htmlFor="name">Full name</Label>
+              {isEditing ? (
+                <div className="flex gap-2">
+                  <Input
+                    id="name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                  />
+                  <Button onClick={handleSave}>Save</Button>
+                  <Button variant="outline" onClick={() => setIsEditing(false)}>
+                    Cancel
+                  </Button>
+                </div>
+              ) : (
+                <div className="flex items-center justify-between p-3 border rounded-lg bg-secondary/30">
+                  <span className="text-foreground">{user.name}</span>
+                  <Button variant="ghost" size="sm" onClick={() => setIsEditing(true)}>
+                    Edit
+                  </Button>
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Email */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Email Address</CardTitle>
+            <CardDescription>Your email is used for login and notifications</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center justify-between p-3 border rounded-lg bg-secondary/30">
+              <div className="flex items-center gap-3">
+                <Mail className="w-4 h-4 text-muted-foreground" />
+                <span className="text-foreground">{user.email}</span>
+                {user.emailVerified ? (
+                  <Badge variant="secondary" className="bg-success/10 text-success border-0">
+                    <CheckCircle className="w-3 h-3 mr-1" />
+                    Verified
+                  </Badge>
+                ) : (
+                  <Badge variant="secondary" className="bg-warning/10 text-warning border-0">
+                    <AlertCircle className="w-3 h-3 mr-1" />
+                    Unverified
+                  </Badge>
+                )}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Organizations */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Organizations</CardTitle>
+            <CardDescription>Organizations you're a member of</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              {user.organizations.map((org, index) => (
+                <div
+                  key={index}
+                  className="flex items-center justify-between p-3 border rounded-lg"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded bg-primary/10 flex items-center justify-center">
+                      <Building2 className="w-4 h-4 text-primary" />
+                    </div>
+                    <span className="text-foreground font-medium">{org.name}</span>
+                  </div>
+                  <Badge variant="secondary">{org.role}</Badge>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

src/pages/user/SecurityPage.tsx

@@ -0,0 +1,185 @@
+import { useState } from "react";
+import { Lock, Fingerprint, Smartphone, Shield, Plus, AlertTriangle, CheckCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Switch } from "@/components/ui/switch";
+
+export default function SecurityPage() {
+  const [showPasswordForm, setShowPasswordForm] = useState(false);
+
+  // Mock security data
+  const security = {
+    passwordLastChanged: "3 months ago",
+    totpEnabled: true,
+    passkeysCount: 2,
+    passkeys: [
+      { id: "1", name: "MacBook Pro Touch ID", lastUsed: "Today" },
+      { id: "2", name: "iPhone Face ID", lastUsed: "Yesterday" },
+    ],
+    policyRequirements: {
+      totpRequired: true,
+      passkeysRequired: false,
+      minPasswordLength: 12,
+    },
+  };
+
+  return (
+    <div className="page-container">
+      <div className="page-header">
+        <h1 className="page-title">Security</h1>
+        <p className="page-description">
+          Manage your authentication methods and security settings
+        </p>
+      </div>
+
+      <div className="space-y-6">
+        {/* Policy Status */}
+        <Card className="border-accent/30 bg-accent/5">
+          <CardContent className="p-4">
+            <div className="flex items-start gap-3">
+              <Shield className="w-5 h-5 text-accent mt-0.5" />
+              <div>
+                <p className="text-sm font-medium text-foreground">Organization Policy</p>
+                <p className="text-sm text-muted-foreground">
+                  Your organization requires TOTP to be enabled for all members.
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Password */}
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle className="text-base flex items-center gap-2">
+                  <Lock className="w-4 h-4" />
+                  Password
+                </CardTitle>
+                <CardDescription>Last changed {security.passwordLastChanged}</CardDescription>
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowPasswordForm(!showPasswordForm)}
+              >
+                Change password
+              </Button>
+            </div>
+          </CardHeader>
+          {showPasswordForm && (
+            <CardContent className="space-y-4 border-t pt-4">
+              <div className="space-y-2">
+                <Label htmlFor="currentPassword">Current password</Label>
+                <Input id="currentPassword" type="password" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="newPassword">New password</Label>
+                <Input id="newPassword" type="password" />
+                <p className="text-xs text-muted-foreground">
+                  Minimum {security.policyRequirements.minPasswordLength} characters required by organization
+                </p>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="confirmPassword">Confirm new password</Label>
+                <Input id="confirmPassword" type="password" />
+              </div>
+              <div className="flex gap-2">
+                <Button>Update password</Button>
+                <Button variant="outline" onClick={() => setShowPasswordForm(false)}>
+                  Cancel
+                </Button>
+              </div>
+            </CardContent>
+          )}
+        </Card>
+
+        {/* TOTP / Authenticator */}
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle className="text-base flex items-center gap-2">
+                  <Smartphone className="w-4 h-4" />
+                  Authenticator App (TOTP)
+                  {security.policyRequirements.totpRequired && (
+                    <Badge variant="secondary" className="ml-2 text-xs">Required</Badge>
+                  )}
+                </CardTitle>
+                <CardDescription>
+                  Use an authenticator app for two-factor authentication
+                </CardDescription>
+              </div>
+              {security.totpEnabled ? (
+                <Badge className="bg-success/10 text-success border-0">
+                  <CheckCircle className="w-3 h-3 mr-1" />
+                  Enabled
+                </Badge>
+              ) : (
+                <Button size="sm">Set up</Button>
+              )}
+            </div>
+          </CardHeader>
+          {security.totpEnabled && (
+            <CardContent className="border-t pt-4">
+              <Button variant="outline" size="sm">
+                Reconfigure
+              </Button>
+            </CardContent>
+          )}
+        </Card>
+
+        {/* Passkeys */}
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle className="text-base flex items-center gap-2">
+                  <Fingerprint className="w-4 h-4" />
+                  Passkeys
+                  {security.policyRequirements.passkeysRequired && (
+                    <Badge variant="secondary" className="ml-2 text-xs">Required</Badge>
+                  )}
+                </CardTitle>
+                <CardDescription>
+                  Use biometrics or security keys for passwordless login
+                </CardDescription>
+              </div>
+              <Button size="sm">
+                <Plus className="w-4 h-4 mr-2" />
+                Add passkey
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent className="border-t pt-4">
+            <div className="space-y-3">
+              {security.passkeys.map((passkey) => (
+                <div
+                  key={passkey.id}
+                  className="flex items-center justify-between p-3 border rounded-lg"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded bg-primary/10 flex items-center justify-center">
+                      <Fingerprint className="w-4 h-4 text-primary" />
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium text-foreground">{passkey.name}</p>
+                      <p className="text-xs text-muted-foreground">Last used: {passkey.lastUsed}</p>
+                    </div>
+                  </div>
+                  <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive">
+                    Remove
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

tailwind.config.ts

@@ -13,6 +13,9 @@ export default {
       },
     },
     extend: {
+      fontFamily: {
+        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
@@ -31,6 +34,18 @@ export default {
           DEFAULT: "hsl(var(--destructive))",
           foreground: "hsl(var(--destructive-foreground))",
         },
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          foreground: "hsl(var(--success-foreground))",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          foreground: "hsl(var(--warning-foreground))",
+        },
+        info: {
+          DEFAULT: "hsl(var(--info))",
+          foreground: "hsl(var(--info-foreground))",
+        },
         muted: {
           DEFAULT: "hsl(var(--muted))",
           foreground: "hsl(var(--muted-foreground))",
@@ -56,6 +71,7 @@ export default {
           "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
           border: "hsl(var(--sidebar-border))",
           ring: "hsl(var(--sidebar-ring))",
+          muted: "hsl(var(--sidebar-muted))",
         },
       },
       borderRadius: {
@@ -63,22 +79,20 @@ export default {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      boxShadow: {
+        'sm': 'var(--shadow-sm)',
+        'md': 'var(--shadow-md)',
+        'lg': 'var(--shadow-lg)',
+        'card': 'var(--shadow-card)',
+      },
       keyframes: {
         "accordion-down": {
-          from: {
+          from: { height: "0" },
-            height: "0",
+          to: { height: "var(--radix-accordion-content-height)" },
-          },
-          to: {
-            height: "var(--radix-accordion-content-height)",
-          },
         },
         "accordion-up": {
-          from: {
+          from: { height: "var(--radix-accordion-content-height)" },
-            height: "var(--radix-accordion-content-height)",
+          to: { height: "0" },
-          },
-          to: {
-            height: "0",
-          },
         },
       },
       animation: {