diff --git a/nuxt4-app/app/components/app/AppSidebar.vue b/nuxt4-app/app/components/app/AppSidebar.vue
index abba823..0dbcfd5 100644
--- a/nuxt4-app/app/components/app/AppSidebar.vue
+++ b/nuxt4-app/app/components/app/AppSidebar.vue
@@ -8,6 +8,9 @@
     :min-size="20"
     :max-size="38"
     :toggle="{ color: 'neutral', variant: 'ghost', class: 'rounded-full hover:bg-[var(--brand-primary)]/10 text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)]' }"
+    :ui="{
+      wrapper: 'bg-[var(--brand-surface)] border-r border-[var(--brand-border)]'
+    }"
   >
     <template #header="{ collapsed: isCollapsed }">
       <div class="flex items-center gap-2">
@@ -30,12 +33,12 @@
         variant="outline"
         block
         :square="isCollapsed"
-        class="mb-4"
+        class="mb-4 border-[var(--brand-border)] bg-[var(--brand-bg)]/50 hover:bg-[var(--brand-primary)]/10 hover:border-[var(--brand-primary)]/30 text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)]"
       >
         <template v-if="!isCollapsed" #trailing>
           <div class="flex items-center gap-0.5 ms-auto text-[var(--brand-text-muted)]">
-            <UKbd value="⌘" variant="subtle" />
-            <UKbd value="K" variant="subtle" />
+            <UKbd value="⌘" variant="subtle" class="bg-[var(--brand-surface)] border-[var(--brand-border)] text-[var(--brand-text-muted)]" />
+            <UKbd value="K" variant="subtle" class="bg-[var(--brand-surface)] border-[var(--brand-border)] text-[var(--brand-text-muted)]" />
           </div>
         </template>
       </UButton>
@@ -45,6 +48,13 @@
         :items="navigationPrimary"
         orientation="vertical"
         class="gap-1"
+        :ui="{
+          item: {
+            base: 'text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)] hover:bg-[var(--brand-primary)]/10',
+            active: 'bg-[var(--brand-primary)]/15 text-[var(--brand-primary)] border-l-2 border-[var(--brand-primary)] font-medium',
+            inactive: 'border-l-2 border-transparent'
+          }
+        }"
       />
 
     </template>