diff --git a/frontend/current_screen.png b/frontend/current_screen.png
index 7e13deab..3c745e6d 100644
Binary files a/frontend/current_screen.png and b/frontend/current_screen.png differ
diff --git a/frontend/src/design-system/tokens.css b/frontend/src/design-system/tokens.css
index 3759e150..39b0914f 100644
--- a/frontend/src/design-system/tokens.css
+++ b/frontend/src/design-system/tokens.css
@@ -68,8 +68,8 @@
   
   /* KBX v60 Shell Compact Dimensions */
   --ks-shell-header-height: 38px;      /* Global Header 38px */
-  --ks-shell-sidebar-width: 200px;     /* Side Nav Expanded 200px */
-  --ks-shell-sidebar-collapsed: 44px;  /* Side Nav Collapsed 44px */
+  --ks-shell-sidebar-width: 220px;     /* Side Nav Expanded 220px (§5) */
+  --ks-shell-sidebar-collapsed: 56px;  /* Side Nav Collapsed 56px (§5) */
   --ks-shell-tabs-height: 32px;        /* Workspace Tabs 32px */
   --ks-shell-pageheader-height: 36px;  /* Page Header 36px */
   --ks-shell-commandbar-height: 34px;  /* Command Bar 34px */
diff --git a/frontend/src/shared/shell/KsSidebar.vue b/frontend/src/shared/shell/KsSidebar.vue
index 990d771a..670179cb 100644
--- a/frontend/src/shared/shell/KsSidebar.vue
+++ b/frontend/src/shared/shell/KsSidebar.vue
@@ -214,9 +214,9 @@ const sidebarClass = computed(() => ({
 
 <style scoped>
 .ks-sidebar {
-  width: var(--ks-shell-sidebar-width, 200px);
-  background-color: var(--color-background-secondary);
-  border-right: 1px solid var(--color-border-primary);
+  width: var(--ks-shell-sidebar-width, 220px);
+  background-color: var(--ks-color-surface);
+  border-right: 1px solid var(--ks-color-border);
   display: flex;
   flex-direction: column;
   transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -226,7 +226,7 @@ const sidebarClass = computed(() => ({
 }
 
 .ks-sidebar--collapsed {
-  width: var(--ks-shell-sidebar-collapsed, 44px);
+  width: var(--ks-shell-sidebar-collapsed, 56px);
 }
 
 .ks-sidebar__header {