diff --git a/src/components/layout/sidebar-system.tsx b/src/components/layout/sidebar-system.tsx
index 28d5e9c..a677480 100644
--- a/src/components/layout/sidebar-system.tsx
+++ b/src/components/layout/sidebar-system.tsx
@@ -10,32 +10,47 @@ import {
     DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import {BookOpen, Box, ChevronDown, Compass, Home, LayoutGrid, Monitor, Moon, Plus, Sun, Users} from 'lucide-react';
+import {
+    BookOpen,
+    Box,
+    ChevronDown,
+    Compass,
+    Home,
+    LayoutGrid,
+    Monitor,
+    Moon,
+    Plus,
+    Sliders,
+    Sun,
+    Users
+} from 'lucide-react';
 import {useNavigate} from 'react-router-dom';
 import {Avatar, AvatarFallback, AvatarImage} from '@/components/ui/avatar';
+import {useState} from 'react';
+import {ThemeSwitcher} from '@/components/room/ThemeSwitcher';
 
 const btnClass = 'flex w-full h-9 justify-start items-center rounded-md font-medium hover:bg-muted cursor-pointer bg-transparent border-0 text-left text-sm';
 
-export function SidebarSystem({collapsed}: {collapsed: boolean}) {
+export function SidebarSystem({collapsed}: { collapsed: boolean }) {
     const {theme, setTheme} = useTheme();
     const navigate = useNavigate();
     const workspaceCtx = tryUseWorkspace();
     const workspaces = workspaceCtx?.workspaces;
     const currentWorkspace = workspaceCtx?.currentWorkspace;
+    const [themeSheetOpen, setThemeSheetOpen] = useState(false);
 
     return (
         <div className="w-full">
-            {/* Workspace switcher — only shown when inside WorkspaceProvider */}
             {workspaceCtx && (
-            <DropdownMenu>
-                <DropdownMenuTrigger
-                    render={
-                        <button
-                            type="button"
-                            className={cn(btnClass, collapsed ? 'justify-center px-0' : 'px-2')}
-                        />
-                    }
-                >
+                <DropdownMenu>
+                    <DropdownMenuTrigger
+                        render={
+                            <button
+                                type="button"
+                                className={cn(btnClass, collapsed ? 'justify-center px-0' : 'px-2')}
+                            />
+                        }
+                    >
                     <span className={cn('flex h-6 items-center shrink-0', collapsed ? 'w-6 justify-center' : 'w-6')}>
                         {currentWorkspace ? (
                             <Avatar className="h-4 w-4">
@@ -48,70 +63,74 @@ export function SidebarSystem({collapsed}: {collapsed: boolean}) {
                             <LayoutGrid className="h-4 w-4"/>
                         )}
                     </span>
-                    {!collapsed && (
-                        <span className="flex-1 truncate text-sm leading-none">
+                        {!collapsed && (
+                            <span className="flex-1 truncate text-sm leading-none">
                             {currentWorkspace?.name || 'Workspaces'}
                         </span>
-                    )}
-                    {!collapsed && <ChevronDown className="h-3 w-3 ml-auto shrink-0"/>}
-                </DropdownMenuTrigger>
-                <DropdownMenuContent side="right" align="start" className="w-56">
-                    <DropdownMenuGroup>
-                        <DropdownMenuLabel>Workspaces</DropdownMenuLabel>
-                        {workspaces?.workspaces.map((ws) => (
-                            <DropdownMenuItem
-                                key={ws.id}
-                                onClick={() => navigate(`/w/${ws.slug}`)}
-                                className="gap-2"
-                            >
-                                <Avatar className="h-5 w-5">
-                                    <AvatarImage src={ws.avatar_url || ''}/>
-                                    <AvatarFallback className="text-[9px]">
-                                        {ws.name.charAt(0).toUpperCase()}
-                                    </AvatarFallback>
-                                </Avatar>
-                                <span className="flex-1 truncate">{ws.name}</span>
-                                <span className="text-xs text-muted-foreground">@{ws.slug}</span>
+                        )}
+                        {!collapsed && <ChevronDown className="h-3 w-3 ml-auto shrink-0"/>}
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent side="right" align="start" className="w-56">
+                        <DropdownMenuGroup>
+                            <DropdownMenuLabel>Workspaces</DropdownMenuLabel>
+                            {workspaces?.workspaces.map((ws) => (
+                                <DropdownMenuItem
+                                    key={ws.id}
+                                    onClick={() => navigate(`/w/${ws.slug}`)}
+                                    className="gap-2"
+                                >
+                                    <Avatar className="h-5 w-5">
+                                        <AvatarImage src={ws.avatar_url || ''}/>
+                                        <AvatarFallback className="text-[9px]">
+                                            {ws.name.charAt(0).toUpperCase()}
+                                        </AvatarFallback>
+                                    </Avatar>
+                                    <span className="flex-1 truncate">{ws.name}</span>
+                                    <span className="text-xs text-muted-foreground">@{ws.slug}</span>
+                                </DropdownMenuItem>
+                            ))}
+                            <DropdownMenuSeparator/>
+                            <DropdownMenuItem onClick={() => navigate('/w/me')} className="gap-2">
+                                <Users className="h-4 w-4"/>
+                                <span>All Workspaces</span>
                             </DropdownMenuItem>
-                        ))}
-                        <DropdownMenuSeparator/>
-                        <DropdownMenuItem onClick={() => navigate('/w/me')} className="gap-2">
-                            <Users className="h-4 w-4"/>
-                            <span>All Workspaces</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => navigate('/init/workspace')} className="gap-2">
-                            <Plus className="h-4 w-4"/>
-                            <span>Create Workspace</span>
-                        </DropdownMenuItem>
-                    </DropdownMenuGroup>
-                </DropdownMenuContent>
-            </DropdownMenu>
+                            <DropdownMenuItem onClick={() => navigate('/init/workspace')} className="gap-2">
+                                <Plus className="h-4 w-4"/>
+                                <span>Create Workspace</span>
+                            </DropdownMenuItem>
+                        </DropdownMenuGroup>
+                    </DropdownMenuContent>
+                </DropdownMenu>
             )}
 
-            <button type="button" className={cn(btnClass, collapsed ? 'justify-center px-0' : 'px-2')} onClick={() => navigate('/')}>
-                <span className={cn('flex h-6 items-center shrink-0', collapsed ? 'w-6 justify-center' : 'w-6')}>
+            <button type="button" className={cn(btnClass, collapsed ? 'justify-center px-0' : 'px-2')}
+                    onClick={() => navigate('/')}>
+                <span className={cn('flex h-6 w-6 items-center justify-center shrink-0')}>
                     <Home className="h-4 w-4"/>
                 </span>
                 {!collapsed && <span className="text-sm leading-none">Home</span>}
             </button>
 
-            <button type="button" className={cn(btnClass, collapsed ? 'justify-center px-0' : 'px-2')} onClick={() => navigate('/explore')}>
-                <span className={cn('flex h-6 items-center shrink-0', collapsed ? 'w-6 justify-center' : 'w-6')}>
-                    <Compass className="h-4 w-4" />
+            <button type="button" className={cn(btnClass, collapsed ? 'justify-center px-0' : 'px-2')}
+                    onClick={() => navigate('/explore')}>
+                <span className={cn('flex h-6 w-6 items-center justify-center shrink-0')}>
+                    <Compass className="h-4 w-4"/>
                 </span>
                 {!collapsed && <span className="text-sm leading-none">Explore</span>}
             </button>
 
-            <button type="button" className={cn(btnClass, collapsed ? 'justify-center px-0' : 'px-2')} onClick={() => navigate('/market')}>
-                <span className={cn('flex h-6 items-center shrink-0', collapsed ? 'w-6 justify-center' : 'w-6')}>
-                    <Box className="h-4 w-4" />
+            <button type="button" className={cn(btnClass, collapsed ? 'justify-center px-0' : 'px-2')}
+                    onClick={() => navigate('/market')}>
+                <span className={cn('flex h-6 w-6 items-center justify-center shrink-0')}>
+                    <Box className="h-4 w-4"/>
                 </span>
                 {!collapsed && <span className="text-sm leading-none">Marketplace</span>}
             </button>
 
-            <button type="button" className={cn(btnClass, collapsed ? 'justify-center px-0' : 'px-2')} onClick={() => window.open('/docs', '_blank')}>
-                <span className={cn('flex h-6 items-center shrink-0', collapsed ? 'w-6 justify-center' : 'w-6')}>
-                    <BookOpen className="h-4 w-4" />
+            <button type="button" className={cn(btnClass, collapsed ? 'justify-center px-0' : 'px-2')}
+                    onClick={() => window.open('/docs', '_blank')}>
+                <span className={cn('flex h-6 w-6 items-center justify-center shrink-0')}>
+                    <BookOpen className="h-4 w-4"/>
                 </span>
                 {!collapsed && <span className="text-sm leading-none">Docs</span>}
             </button>
@@ -125,13 +144,13 @@ export function SidebarSystem({collapsed}: {collapsed: boolean}) {
                         />
                     }
                 >
-                    <span className={cn('flex h-6 items-center shrink-0', collapsed ? 'w-6 justify-center' : 'w-6')}>
+                    <span className={cn('flex h-6 w-6 items-center justify-center shrink-0')}>
                         {theme === 'dark' ? (
-                            <Moon className="h-4 w-4" />
+                            <Moon className="h-4 w-4"/>
                         ) : theme === 'light' ? (
-                            <Sun className="h-4 w-4" />
+                            <Sun className="h-4 w-4"/>
                         ) : (
-                            <Monitor className="h-4 w-4" />
+                            <Monitor className="h-4 w-4"/>
                         )}
                     </span>
                     {!collapsed && <span className="text-sm leading-none">Theme</span>}
@@ -139,36 +158,34 @@ export function SidebarSystem({collapsed}: {collapsed: boolean}) {
                 <DropdownMenuContent side="right" align="start">
                     {!collapsed && (
                         <DropdownMenuGroup>
-                            <DropdownMenuLabel>Theme Settings</DropdownMenuLabel>
+                            <DropdownMenuLabel>Theme</DropdownMenuLabel>
+                            <DropdownMenuItem onClick={() => setThemeSheetOpen(true)}>
+                                <Sliders className="mr-2 h-4 w-4"/>
+                                <span>Design System</span>
+                            </DropdownMenuItem>
+                            <DropdownMenuSeparator/>
                             <DropdownMenuItem onClick={() => setTheme('light')}>
-                                <Sun className="mr-2 h-4 w-4" />
+                                <Sun className="mr-2 h-4 w-4"/>
                                 <span>Light</span>
                             </DropdownMenuItem>
                             <DropdownMenuItem onClick={() => setTheme('dark')}>
-                                <Moon className="mr-2 h-4 w-4" />
+                                <Moon className="mr-2 h-4 w-4"/>
                                 <span>Dark</span>
                             </DropdownMenuItem>
                             <DropdownMenuItem onClick={() => setTheme('system')}>
-                                <Monitor className="mr-2 h-4 w-4" />
+                                <Monitor className="mr-2 h-4 w-4"/>
                                 <span>System</span>
                             </DropdownMenuItem>
                         </DropdownMenuGroup>
                     )}
                     {collapsed && (
-                        <>
-                            <DropdownMenuItem onClick={() => setTheme('light')}>
-                                <Sun className="mr-2 h-4 w-4" />
-                            </DropdownMenuItem>
-                            <DropdownMenuItem onClick={() => setTheme('dark')}>
-                                <Moon className="mr-2 h-4 w-4" />
-                            </DropdownMenuItem>
-                            <DropdownMenuItem onClick={() => setTheme('system')}>
-                                <Monitor className="mr-2 h-4 w-4" />
-                            </DropdownMenuItem>
-                        </>
+                        <DropdownMenuItem onClick={() => setThemeSheetOpen(true)}>
+                            <Sliders className="mr-2 h-4 w-4"/>
+                        </DropdownMenuItem>
                     )}
                 </DropdownMenuContent>
             </DropdownMenu>
+            <ThemeSwitcher open={themeSheetOpen} onOpenChange={setThemeSheetOpen}/>
         </div>
     );
-}
+}
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index 7a482cb..b098bdc 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -6,6 +6,20 @@ import {UserProvider} from '@/contexts';
 import {ThemeProvider} from '@/contexts/theme-context';
 import './index.css';
 import App from './App.tsx';
+import {applyPaletteToDOM, loadActivePresetId} from '@/components/room/design-system';
+
+// Restore custom palette on page load (before first render)
+const activePreset = loadActivePresetId();
+if (activePreset === 'custom') {
+    const customPalette = localStorage.getItem('theme-custom-palette');
+    if (customPalette) {
+        try {
+            applyPaletteToDOM(JSON.parse(customPalette));
+        } catch {
+            // ignore malformed stored palette
+        }
+    }
+}
 
 const queryClient = new QueryClient();