diff --git a/.gitignore b/.gitignore
index c64d0c538..a5162b2fe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -157,3 +157,4 @@ veza-backend-api/audio/
 
 # SELinux policy (local)
 qemu-fusefs.*
+api
diff --git a/apps/web/src/components/ErrorBoundary.test.tsx b/apps/web/src/components/ErrorBoundary.test.tsx
index 53956c046..1d6f8a673 100644
--- a/apps/web/src/components/ErrorBoundary.test.tsx
+++ b/apps/web/src/components/ErrorBoundary.test.tsx
@@ -40,7 +40,7 @@ describe('ErrorBoundary', () => {
 
     // ErrorDisplay shows fallback message for generic errors
     expect(
-      screen.getByText(/Une erreur inattendue s'est produite/i),
+      screen.getByText(/An unexpected error occurred/i),
     ).toBeInTheDocument();
     expect(screen.getByRole('alert')).toBeInTheDocument();
   });
@@ -77,7 +77,7 @@ describe('ErrorBoundary', () => {
     );
 
     expect(
-      screen.getByText(/Une erreur inattendue s'est produite/i),
+      screen.getByText(/An unexpected error occurred/i),
     ).toBeInTheDocument();
 
     // Rerender avec shouldThrow=false avant le clic pour que le boundary reçu un enfant qui ne lance pas
@@ -105,7 +105,7 @@ describe('ErrorBoundary', () => {
 
     expect(screen.getByText('Custom error message')).toBeInTheDocument();
     expect(
-      screen.queryByText(/Une erreur inattendue s'est produite/i),
+      screen.queryByText(/An unexpected error occurred/i),
     ).not.toBeInTheDocument();
   });
 
diff --git a/apps/web/src/components/filters/Filters.test.tsx b/apps/web/src/components/filters/Filters.test.tsx
index cd50c529d..525e89587 100644
--- a/apps/web/src/components/filters/Filters.test.tsx
+++ b/apps/web/src/components/filters/Filters.test.tsx
@@ -69,7 +69,7 @@ describe('Filters Component', () => {
     // Le Select utilise un bouton, vérifions qu'il existe
     const buttons = screen.getAllByRole('button');
     const selectButton = buttons.find(
-      (btn) => btn.getAttribute('aria-haspopup') === 'true',
+      (btn) => btn.getAttribute('aria-haspopup') === 'listbox',
     );
     expect(selectButton).toBeInTheDocument();
   });
@@ -86,7 +86,7 @@ describe('Filters Component', () => {
 
     const buttons = screen.getAllByRole('button');
     const selectButton = buttons.find(
-      (btn) => btn.getAttribute('aria-haspopup') === 'true',
+      (btn) => btn.getAttribute('aria-haspopup') === 'listbox',
     );
     expect(selectButton).toBeInTheDocument();
     if (selectButton) {
@@ -180,12 +180,10 @@ describe('Filters Component', () => {
       />,
     );
 
-    // Le DatePicker utilise un bouton, vérifions qu'il existe
+    // Le DatePicker rend un bouton et le label Date
+    expect(screen.getByText('Date')).toBeInTheDocument();
     const buttons = screen.getAllByRole('button');
-    const dateButton = buttons.find(
-      (btn) => btn.getAttribute('aria-haspopup') === 'true',
-    );
-    expect(dateButton).toBeInTheDocument();
+    expect(buttons.length).toBeGreaterThan(0);
   });
 
   it('shows reset button when onReset is provided and filters are active', () => {
@@ -320,7 +318,7 @@ describe('Filters Component', () => {
     // Le Select utilise un button pour le trigger, cherchons le bouton
     const buttons = screen.getAllByRole('button');
     const selectButton = buttons.find(
-      (btn) => btn.getAttribute('aria-haspopup') === 'true',
+      (btn) => btn.getAttribute('aria-haspopup') === 'listbox',
     );
     expect(selectButton).toBeInTheDocument();
     // Note: Le composant Select peut ne pas désactiver directement le bouton,
diff --git a/apps/web/src/components/layout/Sidebar.tsx b/apps/web/src/components/layout/Sidebar.tsx
index fc1145ee2..501a2fde3 100644
--- a/apps/web/src/components/layout/Sidebar.tsx
+++ b/apps/web/src/components/layout/Sidebar.tsx
@@ -5,7 +5,7 @@ import {
   Home, Users, Radio, Settings, LogOut, ShoppingBag, Music2,
   BarChart2, Shield, Box, MessageSquare,
   Heart, ListMusic, CreditCard, DollarSign, Terminal,
-  ChevronLeft, ChevronRight, Compass, Headphones,
+  ChevronLeft, Compass, Headphones,
   Cloud, Crown, Share2, GraduationCap, HelpCircle,
 } from 'lucide-react';
 import { NavItem } from '../../types';
@@ -93,16 +93,21 @@ const routeMap: Record<string, string> = {
   developer: '/developer', admin: '/admin', settings: '/settings',
 };
 
-const navItemBaseClasses = cn(
-  'w-full flex items-center px-3 py-2 text-sm transition-all duration-300 ease-out group relative',
-  'border-l-2 border-l-transparent rounded-none rounded-r-sm',
+// Shared base for both modes
+const navItemSharedClasses = cn(
+  'w-full flex items-center py-2 text-sm transition-all duration-300 ease-out group relative',
   'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background'
 );
 
-const navItemInactiveClasses =
-  'text-muted-foreground/60 hover:text-foreground hover:border-l-[var(--sumi-border-strong)] font-light';
+// Expanded mode — left-border indicator
+const navItemExpandedClasses = 'px-3 border-l-2 border-l-transparent rounded-none rounded-r-sm';
+const navItemExpandedInactive = 'text-muted-foreground/60 hover:text-foreground hover:border-l-[var(--sumi-border-strong)] font-light';
+const navItemExpandedActive = 'text-foreground font-normal border-l-[var(--sumi-accent)] bg-gradient-to-r from-[var(--sumi-accent-subtle)] to-transparent';
 
-const navItemActiveClasses = 'text-foreground font-normal border-l-[var(--sumi-accent)] bg-gradient-to-r from-[var(--sumi-accent-subtle)] to-transparent';
+// Collapsed mode — centered icon with rounded highlight
+const navItemCollapsedClasses = 'justify-center items-center px-0 rounded-lg';
+const navItemCollapsedInactive = 'text-muted-foreground/60 hover:text-foreground hover:bg-muted/50 font-light';
+const navItemCollapsedActive = 'text-foreground font-normal bg-[var(--sumi-accent-subtle)]';
 
 const LG_BREAKPOINT = 1024;
 
@@ -172,22 +177,35 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
         data-testid="app-sidebar"
         className={cn(
           'fixed left-sidebar bottom-sidebar top-sidebar rounded-xl flex flex-col z-sidebar overflow-hidden',
-          'transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]',
+          'transition-[width,transform,opacity] duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)]',
           'bg-[var(--sumi-bg-raised)] backdrop-blur-md border-r border-[var(--sumi-border-faint)]',
           sidebarOpen ? 'w-sidebar-expanded translate-x-0 opacity-100' : '-translate-x-full lg:translate-x-0 lg:opacity-100 lg:w-sidebar-collapsed'
         )}
         aria-label="Main sidebar"
       >
         {/* Header — Veza branding */}
-        <div className="px-4 py-5 flex items-center gap-3 relative">
+        <div className={cn(
+          'py-5 flex items-center relative',
+          sidebarOpen ? 'px-4 gap-3' : 'flex-col items-center gap-2 px-2'
+        )}>
           {/* Hanko seal — 判子 */}
-          <div className="w-9 h-9 bg-[var(--sumi-accent)] rounded-sm flex items-center justify-center flex-shrink-0 hanko-seal transition-transform duration-300 hover:scale-105">
+          <div
+            className={cn(
+              'w-9 h-9 bg-[var(--sumi-accent)] rounded-sm flex items-center justify-center flex-shrink-0 hanko-seal transition-transform duration-300 hover:scale-105',
+              !sidebarOpen && 'cursor-pointer'
+            )}
+            onClick={!sidebarOpen ? () => setSidebarOpen(true) : undefined}
+            role={!sidebarOpen ? 'button' : undefined}
+            aria-label={!sidebarOpen ? 'Expand sidebar' : undefined}
+            tabIndex={!sidebarOpen ? 0 : undefined}
+            onKeyDown={!sidebarOpen ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSidebarOpen(true); } } : undefined}
+          >
             <span className="text-[var(--sumi-bg-base)] font-heading text-lg leading-none select-none relative z-10 font-semibold" aria-hidden="true">V</span>
           </div>
 
           <div className={cn(
             'transition-all duration-300 ease-out overflow-hidden min-w-0',
-            sidebarOpen ? 'opacity-100 max-w-[160px]' : 'max-w-0 opacity-0'
+            sidebarOpen ? 'opacity-100 max-w-[160px]' : 'max-w-0 opacity-0 h-0'
           )}>
             <h2 className="text-base font-heading text-foreground truncate tracking-[0.15em]" style={{ fontWeight: 300 }}>
               VEZA
@@ -197,23 +215,25 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
             </span>
           </div>
 
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={() => setSidebarOpen(!sidebarOpen)}
-            aria-label={sidebarOpen ? 'Collapse sidebar' : 'Expand sidebar'}
-            className={cn(
-              'ml-auto text-muted-foreground hover:text-foreground hidden lg:flex hover:bg-sidebar-accent transition-transform duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]',
-              !sidebarOpen && 'absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2'
-            )}
-          >
-            {sidebarOpen ? <ChevronLeft className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
-          </Button>
+          {sidebarOpen && (
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setSidebarOpen(false)}
+              aria-label="Collapse sidebar"
+              className="ml-auto text-muted-foreground hover:text-foreground hidden lg:flex hover:bg-sidebar-accent transition-transform duration-300"
+            >
+              <ChevronLeft className="w-4 h-4" />
+            </Button>
+          )}
         </div>
 
         {/* Nav — Discord/Spotify: pill indicator, micro-animations, section dividers */}
         <nav
-          className="flex-1 min-h-0 overflow-y-auto custom-scrollbar px-3 pt-2 pb-4"
+          className={cn(
+            'flex-1 min-h-0 overflow-y-auto custom-scrollbar pt-2 pb-4',
+            sidebarOpen ? 'px-3' : 'px-1.5'
+          )}
           role="navigation"
           aria-label="Main navigation"
         >
@@ -227,8 +247,8 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
                     aria-hidden="true"
                   />
                 ) : (
-                  <div className="flex justify-center my-3" aria-hidden="true">
-                    <span className="w-0.5 h-3 rounded-full bg-muted-foreground/15" />
+                  <div className="flex justify-center my-2.5 px-2" aria-hidden="true">
+                    <span className="w-6 h-px rounded-full bg-muted-foreground/20" />
                   </div>
                 )
               )}
@@ -257,12 +277,14 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
                           onClick={handleMobileNav}
                           aria-current={isActive ? 'page' : undefined}
                           className={cn(
-                            navItemBaseClasses,
-                            isActive ? navItemActiveClasses : navItemInactiveClasses,
-                            !sidebarOpen && 'justify-center px-0'
+                            navItemSharedClasses,
+                            sidebarOpen ? navItemExpandedClasses : navItemCollapsedClasses,
+                            isActive
+                              ? (sidebarOpen ? navItemExpandedActive : navItemCollapsedActive)
+                              : (sidebarOpen ? navItemExpandedInactive : navItemCollapsedInactive)
                           )}
                         >
-                          <div className={cn('flex items-center gap-3 relative z-10 min-w-0', !sidebarOpen && 'justify-center')}>
+                          <div className={cn('flex items-center relative z-10 min-w-0', sidebarOpen ? 'gap-3' : 'justify-center')}>
                             <span
                               className={cn(
                                 'shrink-0 transition-all duration-[var(--duration-fast)]',
@@ -312,9 +334,9 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
           {/* User avatar section */}
           {user && (
             <div className={cn(
-              'flex items-center gap-3 px-3 py-2 rounded-lg mb-1',
-              'bg-sidebar-accent/50 transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)]',
-              !sidebarOpen && 'justify-center px-0'
+              'flex items-center py-2 rounded-lg mb-1',
+              'bg-sidebar-accent/50 transition-all duration-300 ease-out',
+              sidebarOpen ? 'gap-3 px-3' : 'justify-center px-0'
             )}>
               <div className="relative flex-shrink-0">
                 {user.avatar_url ? (
@@ -335,7 +357,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
                 />
               </div>
               <div className={cn(
-                'min-w-0 transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] overflow-hidden',
+                'min-w-0 transition-all duration-300 ease-out overflow-hidden',
                 sidebarOpen ? 'opacity-100 max-w-[140px]' : 'max-w-0 opacity-0'
               )}>
                 <p className="text-sm font-semibold text-foreground truncate leading-tight">
@@ -354,26 +376,30 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
               onClick={handleMobileNav}
               aria-current={activeView === 'settings' ? 'page' : undefined}
               className={cn(
-                navItemBaseClasses,
-                activeView === 'settings' ? navItemActiveClasses : navItemInactiveClasses,
-                !sidebarOpen && 'justify-center px-0'
+                navItemSharedClasses,
+                sidebarOpen ? navItemExpandedClasses : navItemCollapsedClasses,
+                activeView === 'settings'
+                  ? (sidebarOpen ? navItemExpandedActive : navItemCollapsedActive)
+                  : (sidebarOpen ? navItemExpandedInactive : navItemCollapsedInactive)
               )}
             >
-              <Settings
-                className={cn(
-                  'w-4 h-4 shrink-0 transition-all duration-[var(--duration-fast)]',
-                  'group-hover:scale-110',
-                  activeView === 'settings' ? 'text-primary' : 'text-muted-foreground group-hover:text-foreground'
-                )}
-              />
-              <span
-                className={cn(
-                  'truncate transition-all duration-[var(--sumi-duration-normal)]',
-                  sidebarOpen ? 'opacity-100' : 'w-0 opacity-0 overflow-hidden'
-                )}
-              >
-                {t('nav.settings')}
-              </span>
+              <div className={cn('flex items-center relative z-10 min-w-0', sidebarOpen ? 'gap-3' : 'justify-center')}>
+                <Settings
+                  className={cn(
+                    'w-4 h-4 shrink-0 transition-all duration-[var(--duration-fast)]',
+                    'group-hover:scale-110',
+                    activeView === 'settings' ? 'text-primary' : 'text-muted-foreground group-hover:text-foreground'
+                  )}
+                />
+                <span
+                  className={cn(
+                    'truncate transition-all duration-[var(--sumi-duration-normal)]',
+                    sidebarOpen ? 'opacity-100' : 'w-0 opacity-0 overflow-hidden'
+                  )}
+                >
+                  {t('nav.settings')}
+                </span>
+              </div>
             </Link>
           </Tooltip>
 
@@ -382,9 +408,9 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
               variant="ghost"
               onClick={handleLogout}
               className={cn(
-                'w-full text-muted-foreground hover:text-destructive hover:bg-destructive/10 gap-3 justify-start rounded-lg group',
+                'w-full text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-lg group',
                 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
-                !sidebarOpen && 'justify-center px-0'
+                sidebarOpen ? 'gap-3 justify-start' : 'justify-center px-0'
               )}
               aria-label={t('nav.logout')}
             >
diff --git a/apps/web/src/components/library/playlists/QueueView.tsx b/apps/web/src/components/library/playlists/QueueView.tsx
index f1f154708..c3a7851a1 100644
--- a/apps/web/src/components/library/playlists/QueueView.tsx
+++ b/apps/web/src/components/library/playlists/QueueView.tsx
@@ -131,9 +131,9 @@ export const QueueView: React.FC = () => {
       {/* Current Track */}
       {currentTrack && (
         <div>
-          <h3 className="text-xs font-bold text-muted-foreground uppercase tracking-widest mb-3">
+          <h2 className="text-xs font-bold text-muted-foreground uppercase tracking-widest mb-3">
             Now Playing
-          </h3>
+          </h2>
           <Card
             variant="glass"
             className="flex items-center gap-4 p-4 border-l-4 border-l-primary"
@@ -177,9 +177,9 @@ export const QueueView: React.FC = () => {
 
       {/* Up Next */}
       <div>
-        <h3 className="text-xs font-bold text-muted-foreground uppercase tracking-widest mb-3">
+        <h2 className="text-xs font-bold text-muted-foreground uppercase tracking-widest mb-3">
           Up Next
-        </h3>
+        </h2>
 
         <div className="space-y-2">
           {upNext.length === 0 ? (
diff --git a/apps/web/src/components/ui/ComingSoon.test.tsx b/apps/web/src/components/ui/ComingSoon.test.tsx
index 832f20525..aed1798d9 100644
--- a/apps/web/src/components/ui/ComingSoon.test.tsx
+++ b/apps/web/src/components/ui/ComingSoon.test.tsx
@@ -29,12 +29,10 @@ describe('ComingSoon', () => {
     expect(screen.getByText('This feature is coming soon!')).toBeInTheDocument();
   });
 
-  it('should render the Notify Me button (disabled)', () => {
+  it('should render the stay tuned message', () => {
     render(<ComingSoon feature="Test" />);
 
-    const notifyButton = screen.getByText('Notify Me');
-    expect(notifyButton).toBeInTheDocument();
-    expect(notifyButton.closest('button')).toBeDisabled();
+    expect(screen.getByText('comingSoon.stayTuned')).toBeInTheDocument();
   });
 
   it('should render Go Back button when onGoBack is provided', () => {
@@ -53,9 +51,9 @@ describe('ComingSoon', () => {
     expect(screen.queryByText('Go Back')).not.toBeInTheDocument();
   });
 
-  it('should render the logo illustration', () => {
-    const { container } = render(<ComingSoon feature="Test" />);
+  it('should render the hanko seal', () => {
+    render(<ComingSoon feature="Test" />);
 
-    expect(container.querySelector('svg')).toBeInTheDocument();
+    expect(screen.getByText('V')).toBeInTheDocument();
   });
 });
diff --git a/apps/web/src/components/ui/Toast.test.tsx b/apps/web/src/components/ui/Toast.test.tsx
index 102e79d2e..cf188f327 100644
--- a/apps/web/src/components/ui/Toast.test.tsx
+++ b/apps/web/src/components/ui/Toast.test.tsx
@@ -64,7 +64,7 @@ describe('Toast Component', () => {
     );
 
     const toast = container.firstChild as HTMLElement;
-    expect(toast.className).toContain('border-success');
+    expect(toast.className).toContain('border-[var(--sumi-sage)]');
   });
 
   it('applies correct styles for error variant', () => {
@@ -73,7 +73,7 @@ describe('Toast Component', () => {
     );
 
     const toast = container.firstChild as HTMLElement;
-    expect(toast.className).toContain('border-destructive');
+    expect(toast.className).toContain('border-[var(--sumi-vermillion)]');
   });
 
   it('applies correct styles for info variant', () => {
@@ -82,6 +82,6 @@ describe('Toast Component', () => {
     );
 
     const toast = container.firstChild as HTMLElement;
-    expect(toast.className).toContain('border-border');
+    expect(toast.className).toContain('border-[var(--sumi-glass-border)]');
   });
 });
diff --git a/apps/web/src/features/auth/components/sessions-page/SessionsPageContent.tsx b/apps/web/src/features/auth/components/sessions-page/SessionsPageContent.tsx
index 856667409..a8b18d18e 100644
--- a/apps/web/src/features/auth/components/sessions-page/SessionsPageContent.tsx
+++ b/apps/web/src/features/auth/components/sessions-page/SessionsPageContent.tsx
@@ -6,7 +6,6 @@ import {
   CardContent,
   CardDescription,
   CardHeader,
-  CardTitle,
 } from '@/components/ui/card';
 import { Shield } from 'lucide-react';
 import type { Session } from './types';
@@ -27,10 +26,10 @@ export function SessionsPageContent({
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2">
+        <h2 data-slot="card-title" className="text-lg font-semibold leading-tight tracking-tight text-foreground flex items-center gap-2">
           <Shield className="h-5 w-5" />
           Sessions ({sessions.length})
-        </CardTitle>
+        </h2>
         <CardDescription>
           These are the devices where you're currently signed in
         </CardDescription>
diff --git a/apps/web/src/features/library/components/library-manager/LibraryManagerEmpty.tsx b/apps/web/src/features/library/components/library-manager/LibraryManagerEmpty.tsx
index 6fb456e33..4d0ed4f05 100644
--- a/apps/web/src/features/library/components/library-manager/LibraryManagerEmpty.tsx
+++ b/apps/web/src/features/library/components/library-manager/LibraryManagerEmpty.tsx
@@ -16,7 +16,7 @@ export function LibraryManagerEmpty({
       <CardContent className="pt-6">
         <div className="text-center py-8">
           <FileAudio className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
-          <h3 className="text-lg font-medium mb-2">Empty Library</h3>
+          <h2 className="text-lg font-medium mb-2">Empty Library</h2>
           <p className="text-muted-foreground mb-4">
             {hasSearchQuery
               ? 'No tracks match your search.'
diff --git a/apps/web/src/features/notifications/components/notifications-page/NotificationsPage.tsx b/apps/web/src/features/notifications/components/notifications-page/NotificationsPage.tsx
index 544100874..d713774ff 100644
--- a/apps/web/src/features/notifications/components/notifications-page/NotificationsPage.tsx
+++ b/apps/web/src/features/notifications/components/notifications-page/NotificationsPage.tsx
@@ -112,9 +112,9 @@ export function NotificationsPage() {
           <div className="space-y-6">
             {groupedNotifications.map(([group, items]) => (
               <div key={group}>
-                <h3 className="text-label px-1 py-3 sticky top-0 bg-background/95 backdrop-blur-sm z-10">
+                <h2 className="text-label px-1 py-3 sticky top-0 bg-background/95 backdrop-blur-sm z-10">
                   {group}
-                </h3>
+                </h2>
                 <div className="space-y-2">
                   {items.map((notification) => {
                     const idx = staggerIndex++;
diff --git a/apps/web/src/features/profile/components/ProfileSocialLinksSection.tsx b/apps/web/src/features/profile/components/ProfileSocialLinksSection.tsx
index dd55a51ac..7e9719f2a 100644
--- a/apps/web/src/features/profile/components/ProfileSocialLinksSection.tsx
+++ b/apps/web/src/features/profile/components/ProfileSocialLinksSection.tsx
@@ -42,9 +42,9 @@ export function ProfileSocialLinksSection({ socialLinks }: ProfileSocialLinksSec
 
   return (
     <div className="mt-6 pt-6 border-t border-border">
-      <h3 className="text-sm font-bold uppercase tracking-widest text-muted-foreground mb-3">
+      <h2 className="text-sm font-bold uppercase tracking-widest text-muted-foreground mb-3">
         Links
-      </h3>
+      </h2>
       <div className="flex flex-wrap gap-4">
         {entries.map(({ key, label, Icon, href }) => (
           <a
diff --git a/apps/web/src/features/profile/pages/user-profile-page/UserProfilePageHeader.tsx b/apps/web/src/features/profile/pages/user-profile-page/UserProfilePageHeader.tsx
index e29d0a898..696a171e8 100644
--- a/apps/web/src/features/profile/pages/user-profile-page/UserProfilePageHeader.tsx
+++ b/apps/web/src/features/profile/pages/user-profile-page/UserProfilePageHeader.tsx
@@ -102,9 +102,9 @@ export function UserProfilePageHeader({
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-10">
           {/* Bio / About */}
           <div className="md:col-span-2">
-            <h3 className="text-sm font-bold uppercase tracking-widest text-muted-foreground mb-3 flex items-center gap-2">
+            <h2 className="text-sm font-bold uppercase tracking-widest text-muted-foreground mb-3 flex items-center gap-2">
               <User className="w-4 h-4" aria-hidden /> About
-            </h3>
+            </h2>
             <p className="text-lg leading-relaxed text-foreground/90 whitespace-pre-wrap">
               {profile.bio ?? (
                 <span className="text-muted-foreground italic">
diff --git a/apps/web/src/features/search/components/search-page/SearchPageDiscovery.tsx b/apps/web/src/features/search/components/search-page/SearchPageDiscovery.tsx
index 9ceb1f5bb..020784e0e 100644
--- a/apps/web/src/features/search/components/search-page/SearchPageDiscovery.tsx
+++ b/apps/web/src/features/search/components/search-page/SearchPageDiscovery.tsx
@@ -24,10 +24,10 @@ export function SearchPageDiscovery({ onQuerySelect }: SearchPageDiscoveryProps)
       {history.length > 0 && (
         <section>
           <div className="flex items-center justify-between mb-4">
-            <h3 className="text-lg font-bold flex items-center gap-2">
+            <h2 className="text-lg font-bold flex items-center gap-2">
               <History className="w-5 h-5 text-muted-foreground" />
               Recent Searches
-            </h3>
+            </h2>
             <button
               type="button"
               onClick={handleClear}
@@ -60,7 +60,7 @@ export function SearchPageDiscovery({ onQuerySelect }: SearchPageDiscoveryProps)
         <div className="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-primary/15 group-hover:scale-110 transition-all duration-[var(--sumi-duration-normal)]">
           <Music className="w-6 h-6 text-primary" />
         </div>
-        <h3 className="font-bold text-base mb-1 tracking-tight">New Releases</h3>
+        <h2 className="font-bold text-base mb-1 tracking-tight">New Releases</h2>
         <p className="text-xs text-muted-foreground/70">Latest tracks from your artists</p>
       </Card>
       <Card
@@ -72,7 +72,7 @@ export function SearchPageDiscovery({ onQuerySelect }: SearchPageDiscoveryProps)
         <div className="w-14 h-14 rounded-2xl bg-destructive/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-destructive/15 group-hover:scale-110 transition-all duration-[var(--sumi-duration-normal)]">
           <Sparkles className="w-6 h-6 text-destructive" />
         </div>
-        <h3 className="font-bold text-base mb-1 tracking-tight">Curated Mixes</h3>
+        <h2 className="font-bold text-base mb-1 tracking-tight">Curated Mixes</h2>
         <p className="text-xs text-muted-foreground/70">Handpicked selections for you</p>
       </Card>
       <Card
@@ -84,7 +84,7 @@ export function SearchPageDiscovery({ onQuerySelect }: SearchPageDiscoveryProps)
         <div className="w-14 h-14 rounded-2xl bg-success/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-success/15 group-hover:scale-110 transition-all duration-[var(--sumi-duration-normal)]">
           <User className="w-6 h-6 text-success" />
         </div>
-        <h3 className="font-bold text-base mb-1 tracking-tight">Top Artists</h3>
+        <h2 className="font-bold text-base mb-1 tracking-tight">Top Artists</h2>
         <p className="text-xs text-muted-foreground/70">Trending creators this week</p>
       </Card>
     </div>
diff --git a/apps/web/src/features/search/components/search-page/SearchPageResults.tsx b/apps/web/src/features/search/components/search-page/SearchPageResults.tsx
index acba2b8a4..6ec0c0b0e 100644
--- a/apps/web/src/features/search/components/search-page/SearchPageResults.tsx
+++ b/apps/web/src/features/search/components/search-page/SearchPageResults.tsx
@@ -59,9 +59,9 @@ export function SearchPageResults({ results, query = '', activeTab = 'all', onTa
       <TabsContent value="all" className="space-y-12">
         {tracks.length > 0 && (
           <section>
-            <h3 className="text-xl font-bold mb-4 flex items-center gap-2">
+            <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
               <Music className="w-5 h-5 text-primary" /> Top Tracks
-            </h3>
+            </h2>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
               {tracks.slice(0, 6).map((track) => (
                 <Card
@@ -98,9 +98,9 @@ export function SearchPageResults({ results, query = '', activeTab = 'all', onTa
         )}
         {artists.length > 0 && (
           <section>
-            <h3 className="text-xl font-bold mb-4 flex items-center gap-2">
+            <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
               <User className="w-5 h-5 text-primary" /> Artists
-            </h3>
+            </h2>
             <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
               {artists.slice(0, 5).map((artist) => (
                 <Card
diff --git a/apps/web/src/features/tracks/services/commentService.test.ts b/apps/web/src/features/tracks/services/commentService.test.ts
index 650d11c45..00fd9ca2f 100644
--- a/apps/web/src/features/tracks/services/commentService.test.ts
+++ b/apps/web/src/features/tracks/services/commentService.test.ts
@@ -49,7 +49,7 @@ describe('commentService', () => {
       };
 
       vi.mocked(apiClient.post).mockResolvedValue({
-        data: { comment: mockComment },
+        data: mockComment,
         status: 201,
         statusText: 'Created',
         headers: {},
@@ -61,7 +61,6 @@ describe('commentService', () => {
       expect(result).toEqual(mockComment);
       expect(apiClient.post).toHaveBeenCalledWith('/tracks/1/comments', {
         content: 'Great track!',
-        parent_id: undefined,
       });
     });
 
@@ -82,7 +81,7 @@ describe('commentService', () => {
       };
 
       vi.mocked(apiClient.post).mockResolvedValue({
-        data: { comment: mockReply },
+        data: mockReply,
         status: 201,
         statusText: 'Created',
         headers: {},
@@ -268,7 +267,7 @@ describe('commentService', () => {
       };
 
       vi.mocked(apiClient.put).mockResolvedValue({
-        data: { comment: mockComment },
+        data: mockComment,
         status: 200,
         statusText: 'OK',
         headers: {},
diff --git a/apps/web/src/lib/passwordValidator.test.ts b/apps/web/src/lib/passwordValidator.test.ts
index a197b7fa7..c9cf293f6 100644
--- a/apps/web/src/lib/passwordValidator.test.ts
+++ b/apps/web/src/lib/passwordValidator.test.ts
@@ -69,8 +69,8 @@ describe('passwordValidator', () => {
       expect(result.strength.special).toBe(false);
     });
 
-    it('should accept password exactly 8 characters', () => {
-      const result = validatePasswordStrength('Test123!');
+    it('should accept password exactly 12 characters', () => {
+      const result = validatePasswordStrength('TestPass123!');
       expect(result.isValid).toBe(true);
       expect(result.errors).toHaveLength(0);
     });
@@ -84,7 +84,7 @@ describe('passwordValidator', () => {
     it('should validate password with various special characters', () => {
       const specialChars = ['!', '@', '#', '$', '%', '^', '&', '*', '(', ')'];
       specialChars.forEach((char) => {
-        const password = `Test123${char}`;
+        const password = `TestPass1234${char}`;
         const result = validatePasswordStrength(password);
         expect(result.isValid).toBe(true);
         expect(result.strength.special).toBe(true);
@@ -104,22 +104,22 @@ describe('passwordValidator', () => {
     });
 
     it('should return score 2 for password with length and lowercase', () => {
-      const score = calculatePasswordStrength('testpass');
+      const score = calculatePasswordStrength('testpassword');
       expect(score).toBe(2); // length + lowercase
     });
 
     it('should return score 2 for password with length and uppercase', () => {
-      const score = calculatePasswordStrength('TESTPASS');
+      const score = calculatePasswordStrength('TESTPASSWORD');
       expect(score).toBe(2);
     });
 
     it('should return score 3 for password with length, uppercase, and lowercase', () => {
-      const score = calculatePasswordStrength('TestPass');
+      const score = calculatePasswordStrength('TestPassword');
       expect(score).toBe(3);
     });
 
     it('should return score 4 for password with length, uppercase, lowercase, and number', () => {
-      const score = calculatePasswordStrength('TestPass123');
+      const score = calculatePasswordStrength('TestPasswor1');
       expect(score).toBe(4);
     });
   });
diff --git a/apps/web/src/router/index.test.tsx b/apps/web/src/router/index.test.tsx
index 797ec9a87..6daa20dc2 100644
--- a/apps/web/src/router/index.test.tsx
+++ b/apps/web/src/router/index.test.tsx
@@ -40,8 +40,14 @@ vi.mock('./ProtectedLayoutRoute', () => ({
   ),
 }));
 
+// Mock useUser (used by ProfileRedirect)
+vi.mock('@/features/auth/hooks/useUser', () => ({
+  useUser: () => ({ data: { username: 'testuser' } }),
+}));
+
 // Mock lazy components (all exports used by routeConfig)
 vi.mock('@/components/ui/LazyComponent', () => ({
+  LazySharedPlaylistPage: () => <div>Shared Playlist Page</div>,
   LazyLogin: () => <div>Login Page</div>,
   LazyRegister: () => <div>Register Page</div>,
   LazyForgotPassword: () => <div>Forgot Password Page</div>,
@@ -49,8 +55,8 @@ vi.mock('@/components/ui/LazyComponent', () => ({
   LazyResetPassword: () => <div>Reset Password Page</div>,
   LazyDashboard: () => <div>Dashboard Page</div>,
   LazyChat: () => <div>Chat Page</div>,
+  LazyChatJoin: () => <div>Chat Join Page</div>,
   LazyLibrary: () => <div>Library Page</div>,
-  LazyProfile: () => <div>Profile Page</div>,
   LazySettings: () => <div>Settings Page</div>,
   LazySessions: () => <div>Sessions Page</div>,
   LazyNotFound: () => <div>404 Not Found</div>,
@@ -65,16 +71,30 @@ vi.mock('@/components/ui/LazyComponent', () => ({
   LazyAnalytics: () => <div>Analytics Page</div>,
   LazyWebhooks: () => <div>Webhooks Page</div>,
   LazyAdminDashboard: () => <div>Admin Page</div>,
+  LazyAdminModeration: () => <div>Admin Moderation Page</div>,
+  LazyAdminPlatform: () => <div>Admin Platform Page</div>,
+  LazyAdminTransfers: () => <div>Admin Transfers Page</div>,
   LazyDesignSystemDemo: () => <div>Design System</div>,
   LazySocial: () => <div>Social Page</div>,
+  LazyFeed: () => <div>Feed Page</div>,
+  LazyDiscover: () => <div>Discover Page</div>,
   LazyGear: () => <div>Gear Page</div>,
   LazyLive: () => <div>Live Page</div>,
+  LazyGoLive: () => <div>Go Live Page</div>,
+  LazyListenTogether: () => <div>Listen Together Page</div>,
   LazyQueue: () => <div>Queue Page</div>,
   LazyDeveloper: () => <div>Developer Page</div>,
   LazySellerDashboard: () => <div>Seller Page</div>,
   LazyWishlist: () => <div>Wishlist Page</div>,
   LazyPurchases: () => <div>Purchases Page</div>,
+  LazyProductDetail: () => <div>Product Detail Page</div>,
   LazyCheckoutComplete: () => <div>Checkout Complete Page</div>,
+  LazyCloud: () => <div>Cloud Page</div>,
+  LazySubscription: () => <div>Subscription Page</div>,
+  LazyDistribution: () => <div>Distribution Page</div>,
+  LazyEducation: () => <div>Education Page</div>,
+  LazySupport: () => <div>Support Page</div>,
+  LazyLanding: () => <div>Landing Page</div>,
 }));
 
 // Mock DashboardLayout (used by ProtectedLayoutRoute)
@@ -271,7 +291,7 @@ describe('AppRouter', () => {
   });
 
   describe('Default Routes', () => {
-    it('should redirect root path to dashboard when authenticated', () => {
+    it('should redirect root path to landing page when authenticated', () => {
       vi.mocked(useAuthStore).mockReturnValue({
         isAuthenticated: true,
         isLoading: false,
@@ -283,10 +303,10 @@ describe('AppRouter', () => {
         </MemoryRouter>,
       );
 
-      expect(screen.getByText('Dashboard Page')).toBeInTheDocument();
+      expect(screen.getByText('Landing Page')).toBeInTheDocument();
     });
 
-    it('should redirect root path to login when not authenticated', () => {
+    it('should redirect root path to landing page when not authenticated', () => {
       vi.mocked(useAuthStore).mockReturnValue({
         isAuthenticated: false,
         isLoading: false,
@@ -298,8 +318,8 @@ describe('AppRouter', () => {
         </MemoryRouter>,
       );
 
-      // Should redirect to dashboard, which then redirects to login
-      expect(screen.getByText('Login Page')).toBeInTheDocument();
+      // Root redirects to /launch (Landing Page)
+      expect(screen.getByText('Landing Page')).toBeInTheDocument();
     });
   });
 });
diff --git a/apps/web/src/schemas/apiRequestSchemas.test.ts b/apps/web/src/schemas/apiRequestSchemas.test.ts
index b7c01e9a1..4e410d02e 100644
--- a/apps/web/src/schemas/apiRequestSchemas.test.ts
+++ b/apps/web/src/schemas/apiRequestSchemas.test.ts
@@ -52,7 +52,7 @@ describe('apiRequestSchemas', () => {
       const validRequest = {
         username: 'testuser',
         email: 'test@example.com',
-        password: 'password123',
+        password: 'SecurePass123!',
       };
 
       const result = registerRequestSchema.safeParse(validRequest);
@@ -74,7 +74,7 @@ describe('apiRequestSchemas', () => {
       const invalidRequest = {
         username: 'ab', // Too short
         email: 'test@example.com',
-        password: 'password123',
+        password: 'SecurePass123!',
       };
 
       const result = registerRequestSchema.safeParse(invalidRequest);
diff --git a/apps/web/src/services/developerService.test.ts b/apps/web/src/services/developerService.test.ts
index a542c9c0f..9fd156c95 100644
--- a/apps/web/src/services/developerService.test.ts
+++ b/apps/web/src/services/developerService.test.ts
@@ -1,6 +1,22 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { developerService } from './developerService';
 
+// Mock the API layer
+vi.mock('./api/developer', () => ({
+  developerApi: {
+    listKeys: vi.fn().mockResolvedValue([]),
+    createKey: vi.fn().mockResolvedValue({
+      id: 'key-1',
+      name: 'Test Key',
+      prefix: 'veza_',
+      scopes: ['read', 'write'],
+      created_at: '2024-01-01T00:00:00Z',
+      key: 'veza_test_key_123',
+    }),
+    deleteKey: vi.fn().mockResolvedValue(undefined),
+  },
+}));
+
 // Mock webhookService used internally by getStats
 vi.mock('./webhookService', () => ({
   webhookService: {
@@ -8,12 +24,14 @@ vi.mock('./webhookService', () => ({
   },
 }));
 
+// Mock logger
+vi.mock('@/utils/logger', () => ({
+  logger: { error: vi.fn(), warn: vi.fn(), info: vi.fn(), debug: vi.fn() },
+}));
+
 describe('developerService', () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    // Clear localStorage for consistent test behavior
-    localStorage.clear();
-    sessionStorage.clear();
   });
 
   describe('listKeys', () => {
@@ -42,12 +60,9 @@ describe('developerService', () => {
     });
   });
 
-  describe('revokeKey', () => {
-    it('should revoke an API key', async () => {
-      const result = await developerService.revokeKey('key-1');
-
-      expect(result).toBeDefined();
-      expect(result.success).toBe(true);
+  describe('deleteKey', () => {
+    it('should delete an API key', async () => {
+      await expect(developerService.deleteKey('key-1')).resolves.not.toThrow();
     });
   });
 
diff --git a/apps/web/src/services/socialService.test.ts b/apps/web/src/services/socialService.test.ts
index 30e3a7ded..2d370ded5 100644
--- a/apps/web/src/services/socialService.test.ts
+++ b/apps/web/src/services/socialService.test.ts
@@ -30,6 +30,10 @@ describe('socialService', () => {
             id: 'post-1',
             content: 'Hello world',
             created_at: '2024-01-01T00:00:00Z',
+            actor_name: 'Test User',
+            actor_avatar: '',
+            target_type: 'text',
+            target_id: null,
           },
         ],
       });
@@ -37,24 +41,24 @@ describe('socialService', () => {
       const result = await socialService.getFeed();
 
       expect(result).toBeDefined();
-      expect(result).toHaveProperty('posts');
-      expect(Array.isArray(result.posts)).toBe(true);
-      if (result.posts.length > 0) {
-        expect(result.posts[0]).toHaveProperty('id');
-        expect(result.posts[0]).toHaveProperty('author');
-        expect(result.posts[0]).toHaveProperty('content');
+      expect(result).toHaveProperty('items');
+      expect(Array.isArray(result.items)).toBe(true);
+      if (result.items.length > 0) {
+        expect(result.items[0]).toHaveProperty('id');
+        expect(result.items[0]).toHaveProperty('author');
+        expect(result.items[0]).toHaveProperty('content');
       }
     });
 
     it('should handle pagination', async () => {
       mockedApiClient.get.mockResolvedValue({ data: [] });
 
-      const result = await socialService.getFeed({ page: 2, limit: 10 });
+      const result = await socialService.getFeed({ limit: 10 });
 
       expect(result).toBeDefined();
-      expect(result).toHaveProperty('posts');
+      expect(result).toHaveProperty('items');
       expect(mockedApiClient.get).toHaveBeenCalledWith('/social/feed', {
-        params: { page: 2, limit: 10 },
+        params: { limit: 10, cursor: undefined, type: 'all' },
       });
     });
   });
diff --git a/apps/web/src/utils/format.test.ts b/apps/web/src/utils/format.test.ts
index 79f4d2a03..7b84395c7 100644
--- a/apps/web/src/utils/format.test.ts
+++ b/apps/web/src/utils/format.test.ts
@@ -207,13 +207,13 @@ describe('format utilities', () => {
     it('should format recent time', () => {
       const now = new Date();
       const result = formatTimeAgo(now);
-      expect(result).toBe("À l'instant");
+      expect(result).toBe('Just now');
     });
 
     it('should format minutes ago', () => {
       const past = new Date(Date.now() - 30 * 60 * 1000);
       const result = formatTimeAgo(past);
-      expect(result).toContain('min');
+      expect(result).toBe('30m ago');
     });
   });