diff --git a/resources/js/Components/DropdownLink.vue b/resources/js/Components/DropdownLink.vue
index e5ab50b..fee0aad 100644
--- a/resources/js/Components/DropdownLink.vue
+++ b/resources/js/Components/DropdownLink.vue
@@ -12,7 +12,7 @@ defineProps({
 <template>
     <Link
         :href="href"
-        class="block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:bg-gray-100 focus:outline-none"
+        class="block w-full px-4 py-2 text-start text-sm leading-5 text-slate-700 dark:text-slate-300 transition duration-150 ease-in-out hover:bg-slate-100 dark:hover:bg-slate-800 focus:bg-slate-100 dark:focus:bg-slate-800 focus:outline-none"
     >
         <slot />
     </Link>
diff --git a/resources/js/Components/NavLink.vue b/resources/js/Components/NavLink.vue
index e669803..817ac51 100644
--- a/resources/js/Components/NavLink.vue
+++ b/resources/js/Components/NavLink.vue
@@ -14,8 +14,8 @@ const props = defineProps({
 
 const classes = computed(() =>
     props.active
-        ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
-        : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out',
+        ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-500 dark:border-indigo-400 text-sm font-bold leading-5 text-slate-900 dark:text-slate-100 focus:outline-none transition duration-150 ease-in-out'
+        : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-bold leading-5 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-700 focus:outline-none transition duration-150 ease-in-out',
 );
 </script>
 
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index b839bc4..8aca9b9 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -14,9 +14,9 @@ const showingNavigationDropdown = ref(false);
 <template>
     <EnvironmentBanner />
     <div>
-        <div class="min-h-screen bg-gray-100">
+        <div class="min-h-screen bg-slate-50 dark:bg-slate-950 transition-colors duration-300">
             <nav
-                class="border-b border-gray-100 bg-white"
+                class="border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/80 backdrop-blur-md sticky top-0 z-50"
             >
                 <!-- Primary Navigation Menu -->
                 <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
@@ -26,7 +26,7 @@ const showingNavigationDropdown = ref(false);
                             <div class="flex shrink-0 items-center">
                                 <Link :href="route('dashboard')">
                                     <ApplicationLogo
-                                        class="block h-9 w-auto fill-current text-gray-800"
+                                        class="block h-9 w-auto fill-indigo-600 dark:fill-indigo-400"
                                     />
                                 </Link>
                             </div>
@@ -52,7 +52,7 @@ const showingNavigationDropdown = ref(false);
                                         <span class="inline-flex rounded-md">
                                             <button
                                                 type="button"
-                                                class="inline-flex items-center rounded-md border border-transparent bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-500 transition duration-150 ease-in-out hover:text-gray-700 focus:outline-none"
+                                                class="inline-flex items-center rounded-xl border border-transparent bg-slate-50 dark:bg-slate-800 px-4 py-2 text-sm font-bold leading-4 text-slate-700 dark:text-slate-200 transition duration-150 ease-in-out hover:text-indigo-600 dark:hover:text-indigo-400 focus:outline-none"
                                             >
                                                 {{ $page.props.auth.user.name }}
 
@@ -183,7 +183,7 @@ const showingNavigationDropdown = ref(false);
 
             <!-- Page Heading -->
             <header
-                class="bg-white shadow"
+                class="bg-white dark:bg-slate-900 shadow-sm border-b border-slate-100 dark:border-slate-800"
                 v-if="$slots.header"
             >
                 <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 88e384f..2f6047e 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -38,7 +38,7 @@ const getStatusColor = (status) => {
                 <span v-if="user.role === 'super_admin'" class="bg-gradient-to-r from-red-600 to-orange-500 text-white px-3 py-1 rounded-full text-[10px] font-black tracking-widest uppercase shadow-sm">
                     GOD MODE
                 </span>
-                <span v-else-if="user.tenant" class="bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-400 border border-indigo-200 dark:border-indigo-800 px-3 py-1 rounded-full text-[10px] font-black tracking-widest uppercase">
+                <span v-else-if="user.tenant" class="bg-indigo-600 text-white dark:bg-indigo-500/20 dark:text-indigo-300 px-3 py-1 rounded-full text-[10px] font-black tracking-widest uppercase border border-indigo-700 dark:border-indigo-400/30">
                     Structure : {{ user.tenant.name }}
                 </span>
             </div>