diff --git a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
index f3f6b96c..1275c1a1 100644
--- a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
+++ b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
@@ -24,6 +24,8 @@
       dark:border-white/10
     "
   >
+    <BaseDarkHighlight />
+
     <router-link
       to="/admin/dashboard"
       class="
@@ -72,7 +74,7 @@
         v-if="hasCreateAbilities"
         class="relative hidden float-left m-0 md:block"
       >
-        <BaseDropdown width-class="w-48">
+        <BaseDropdown width-class="w-48" >
           <template #activator>
             <div
               class="
@@ -86,19 +88,21 @@
                 bg-white
                 rounded
                 md:h-9 md:w-9
+                dark:bg-gray-700 dark:border-gray-500 dark:border
               "
             >
-              <BaseIcon name="PlusIcon" class="w-5 h-5 text-gray-600" />
+              <BaseIcon name="PlusIcon" class="w-5 h-5 text-gray-600 dark:text-white" />
             </div>
           </template>
 
           <router-link to="/admin/invoices/create">
             <BaseDropdownItem
               v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
+              v-slot="slotProps"
             >
               <BaseIcon
                 name="DocumentTextIcon"
-                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+                :class="slotProps.class"
                 aria-hidden="true"
               />
               {{ $t('invoices.new_invoice') }}
@@ -107,10 +111,11 @@
           <router-link to="/admin/estimates/create">
             <BaseDropdownItem
               v-if="userStore.hasAbilities(abilities.CREATE_ESTIMATE)"
+              v-slot="slotProps"
             >
               <BaseIcon
                 name="DocumentIcon"
-                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+                :class="slotProps.class"
                 aria-hidden="true"
               />
               {{ $t('estimates.new_estimate') }}
@@ -120,10 +125,11 @@
           <router-link to="/admin/customers/create">
             <BaseDropdownItem
               v-if="userStore.hasAbilities(abilities.CREATE_CUSTOMER)"
+              v-slot="slotProps"
             >
               <BaseIcon
                 name="UserIcon"
-                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+                :class="slotProps.class"
                 aria-hidden="true"
               />
               {{ $t('customers.new_customer') }}
@@ -156,20 +162,20 @@
           </template>
 
           <router-link to="/admin/settings/account-settings">
-            <BaseDropdownItem>
+            <BaseDropdownItem v-slot="slotProps">
               <BaseIcon
                 name="CogIcon"
-                class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+                :class="slotProps.class"
                 aria-hidden="true"
               />
               {{ $t('navigation.settings') }}
             </BaseDropdownItem>
           </router-link>
 
-          <BaseDropdownItem @click="logout">
+          <BaseDropdownItem v-slot="slotProps" @click="logout">
             <BaseIcon
               name="LogoutIcon"
-              class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+              :class="slotProps.class"
               aria-hidden="true"
             />
             {{ $t('navigation.logout') }}
diff --git a/resources/scripts/components/GlobalSearchBar.vue b/resources/scripts/components/GlobalSearchBar.vue
index b7d4f8c0..41c07f21 100644
--- a/resources/scripts/components/GlobalSearchBar.vue
+++ b/resources/scripts/components/GlobalSearchBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="searchBar" class="hidden rounded md:block relative">
+  <div ref="searchBar" class="hidden rounded md:block relative dark:text-white">
     <div>
       <BaseInput
         v-model="name"
@@ -41,6 +41,11 @@
           w-[300px]
           h-[200px]
           right-0
+          dark:border-white/10
+          dark:text-white
+          dark:bg-gray-800/[.95]
+          dark:shadow-glass
+          dark:backdrop-blur-xl
         "
       >
         <div
@@ -68,7 +73,7 @@
             <div
               v-for="(customer, index) in usersStore.customerList"
               :key="index"
-              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md"
+              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md dark:hover:bg-gray-700/40"
             >
               <router-link
                 :to="{ path: `/admin/customers/${customer.id}/view` }"
@@ -87,6 +92,7 @@
                     bg-gray-200
                     rounded-full
                     text-primary-500
+                    dark:bg-gray-600
                   "
                 >
                   {{ initGenerator(customer.name) }}
@@ -116,7 +122,7 @@
             <div
               v-for="(user, index) in usersStore.userList"
               :key="index"
-              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md"
+              class="p-2 hover:bg-gray-100 cursor-pointer rounded-md dark:hover:bg-gray-700/40"
             >
               <router-link
                 :to="{ path: `/admin/users/${user.id}/edit` }"