diff --git a/app/components/dashboard/settings/nav_header.vue b/app/components/dashboard/settings/nav_header.vue
new file mode 100644
index 0000000..563df9e
--- /dev/null
+++ b/app/components/dashboard/settings/nav_header.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+  const items = [
+      {
+
+      }
+  ]
+</script>
+
+<template>
+  <
+</template>
diff --git a/app/layouts/dash_settings.vue b/app/layouts/dash_settings.vue
new file mode 100644
index 0000000..07f81fd
--- /dev/null
+++ b/app/layouts/dash_settings.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const nav : NavigationMenuItem[][] = [[
+  {
+    label: 'Home',
+    icon: 'i-lucide-house',
+    to: "/dashboard"
+  },
+  {
+    label: 'Notifications',
+    icon: 'solar:chat-round-unread-outline',
+    badge: '4',
+    to: "/events"
+  }, {
+  label: 'Settings',
+  icon: 'i-lucide-settings',
+  //to: '/settings',
+  children: [
+    {
+    label: "General",
+    icon: "solar:settings-minimalistic-broken",
+    to: "/settings",
+    },
+    {
+    label: "Profile",
+    icon: "solar:user-broken",
+    to: "/settings/profile"
+    },
+    {
+    label: "Theme",
+    icon: "solar:pallete-2-broken",
+    to: "/settings/theme"
+    },
+  ],
+  }]
+];
+
+const route = useRoute();
+const title = ref("...");
+
+watch(route, (newVal, oldVal) => {
+  title.value = (newVal.meta.title as string) || "Settings";
+}, {immediate: true});
+//const title = pageMeta.title || "Settings"
+
+onMounted(() => {
+ui_color_cookie();
+})
+
+</script>
+<template>
+  <UDashboardGroup>
+    <DashboardSidebar class="bg-(--sidebar-bg)" collapsible :resizable="undefined" :items="nav"/>
+
+    <UDashboardSidebarCollapse />
+
+    <UContainer class="max-w-full overflow-auto">
+      <DashboardHeader :title="title"/>
+      <UNavigationMenu :items="nav[0][2].children" />
+      <!-- in my case I want the button to be the same everywhere.
+      if you wanna customize it per page, place it per page inside UContainer -->
+      <!--<UDashboardSidebarToggle variant="subtle" class="absolute z-20 top-3 left-2.5"/>-->
+      <slot />
+    </UContainer>
+  </UDashboardGroup>
+</template>>
\ No newline at end of file
diff --git a/app/pages/settings/index.vue b/app/pages/settings/index.vue
index 7444b09..365490b 100644
--- a/app/pages/settings/index.vue
+++ b/app/pages/settings/index.vue
@@ -1,30 +1,11 @@
  <script setup lang="ts">
   definePageMeta({
-    layout: "dashboard"
+    layout: "dash-settings",
+    title: "Settings"
   })
-  const settings_submenu = ref([
-    {
-      label: "Profile",
-      icon: "i-lucide-user-round",
-      to: "/settings/profile"
-    },
-    {
-      label: "Security",
-      icon: "i-lucide-lock",
-      to: "/settings/security"
-    },
-    {
-      label: "Aspect",
-      icon: "i-lucide-palette",
-      to: "/settings/ui"
-    }
-  ])
 </script>
 
 <template>
-  <DashboardHeader title="Settings" />
-  
-  <UNavigationMenu :items="settings_submenu" />
 
 
 </template>
diff --git a/app/pages/settings/profile.vue b/app/pages/settings/profile.vue
index a1696df..f95592f 100644
--- a/app/pages/settings/profile.vue
+++ b/app/pages/settings/profile.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 definePageMeta({
-  layout: "dashboard"
+  layout: "dash-settings"
 })
 </script>
 
 <template>
-    <DashboardHeader title="Profile" />
 </template>
 
 <style scoped>
diff --git a/app/pages/settings/security.vue b/app/pages/settings/security.vue
index 2ca98a0..17b84f5 100644
--- a/app/pages/settings/security.vue
+++ b/app/pages/settings/security.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 definePageMeta({
-  layout: "dashboard"
+  layout: "dash-settings"
 })
 </script>
 
 <template>
-  <DashboardHeader title="Security" />
+
   
 </template>
 
diff --git a/app/pages/settings/theme.vue b/app/pages/settings/theme.vue
index 12b9144..a81b0af 100644
--- a/app/pages/settings/theme.vue
+++ b/app/pages/settings/theme.vue
@@ -2,7 +2,8 @@
 import type {CookieRef} from "#app";
 
 definePageMeta({
-    layout: "dashboard"
+  layout: "dash-settings",
+  title: "Customization"
 })
 
 const colors_list = ref(["Cyan","Red","Green","Blue","Purple"])
@@ -26,7 +27,6 @@ watch(color, (newVal, oldVal) => {
 </script>
 
 <template>
-    <DashboardHeader title="Customization" />
 
     <UContainer class="mt-4 max-w-full justify-center">
         <UFormField