diff --git a/app/assets/css/global.css b/app/assets/css/global.css
index 7b483d9..85ceb38 100644
--- a/app/assets/css/global.css
+++ b/app/assets/css/global.css
@@ -10,16 +10,23 @@
 }
 
 .light {
-    --ui-bg: var(--color-neutral-100);
-    --ui-primary: var(--color-neutral-100);
+    --ui-bg: var(--color-stone-100);
+    --ui-primary: var(--color-stone-100);
+    --sidebar-bg:  oklch(85%  0.001 106.424);
 }
 
 .dark {
   /*--ui-bg: var(--ui-color-neutral-950);*/
   --ui-bg: oklch(16.7% 0.004 49.25);
     --ui-primary: var(--color-neutral-900);
+    --sidebar-bg: oklch(18.7% 0.004 49.25);
+}
 
-
+.sidebar-light {
+    --ui-bg: var(--color-stone-300);
+}
+.sidebar-dark {
+    background-color: var(--color-stone-800);
 }
 
 .dark-widget-bg {
diff --git a/app/layouts/dashboard.vue b/app/layouts/dashboard.vue
index 4eaaeba..76e0a45 100644
--- a/app/layouts/dashboard.vue
+++ b/app/layouts/dashboard.vue
@@ -53,7 +53,7 @@ onMounted(() => {
 </script>
 <template>
   <UDashboardGroup>
-    <DashboardSidebar collapsible resizable :items="nav"/>
+    <DashboardSidebar class="bg-(--sidebar-bg)" collapsible :resizable="undefined" :items="nav"/>
     
     <UDashboardSidebarCollapse />