diff --git a/resources/views/livewire/project/database/configuration.blade.php b/resources/views/livewire/project/database/configuration.blade.php
index dd3e05349..c95fe9880 100644
--- a/resources/views/livewire/project/database/configuration.blade.php
+++ b/resources/views/livewire/project/database/configuration.blade.php
@@ -4,45 +4,45 @@
     <livewire:project.database.heading :database="$database" />
     <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6 sm:flex-row flex-col gap-8">
         <div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll">
-            <a :class="activeTab === 'general' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'"
                 @click.prevent="activeTab = 'general';
                 window.location.hash = 'general'"
                 href="#">General</a>
-            <a :class="activeTab === 'environment-variables' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'environment-variables' && 'menu-item-active'"
                 @click.prevent="activeTab = 'environment-variables'; window.location.hash = 'environment-variables'"
                 href="#">Environment
                 Variables</a>
-            <a :class="activeTab === 'servers' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'servers' && 'menu-item-active'"
                 @click.prevent="activeTab = 'servers';
                 window.location.hash = 'servers'"
                 href="#">Servers
             </a>
-            <a :class="activeTab === 'storages' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'storages' && 'menu-item-active'"
                 @click.prevent="activeTab = 'storages';
                 window.location.hash = 'storages'"
                 href="#">Storages
             </a>
-            <a :class="activeTab === 'import' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'import' && 'menu-item-active'"
                 @click.prevent="activeTab = 'import';
             window.location.hash = 'import'" href="#">Import
                 Backup
             </a>
-            <a :class="activeTab === 'webhooks' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'webhooks' && 'menu-item-active'"
                 @click.prevent="activeTab = 'webhooks'; window.location.hash = 'webhooks'" href="#">Webhooks
             </a>
-            <a :class="activeTab === 'resource-limits' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'resource-limits' && 'menu-item-active'"
                 @click.prevent="activeTab = 'resource-limits';
                 window.location.hash = 'resource-limits'"
                 href="#">Resource Limits
             </a>
-            <a :class="activeTab === 'resource-operations' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'resource-operations' && 'menu-item-active'"
                 @click.prevent="activeTab = 'resource-operations'; window.location.hash = 'resource-operations'"
                 href="#">Resource Operations
             </a>
-            <a :class="activeTab === 'tags' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'tags' && 'menu-item-active'"
                 @click.prevent="activeTab = 'tags'; window.location.hash = 'tags'" href="#">Tags
             </a>
-            <a :class="activeTab === 'danger' && 'dark:text-white'"
+            <a class="menu-item" :class="activeTab === 'danger' && 'menu-item-active'"
                 @click.prevent="activeTab = 'danger';
                 window.location.hash = 'danger'"
                 href="#">Danger Zone
diff --git a/resources/views/livewire/project/service/index.blade.php b/resources/views/livewire/project/service/index.blade.php
index 098a751bb..43a6225ba 100644
--- a/resources/views/livewire/project/service/index.blade.php
+++ b/resources/views/livewire/project/service/index.blade.php
@@ -2,25 +2,25 @@
     <livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" />
     <div class="flex h-full pt-6 sm:flex-row flex-col gap-8">
         <div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll">
-            <a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
+            <a class="{{ request()->routeIs('project.service.configuration') ? 'menu-item-active' : '' }}"
                 href="{{ route('project.service.configuration', [...$parameters, 'stack_service_uuid' => null]) }}">
                 <button><- Back</button>
             </a>
-            <a :class="activeTab === 'general' && 'dark:text-white'"
+            <a :class="activeTab === 'general' && 'menu-item-active'"
                 @click.prevent="activeTab = 'general'; window.location.hash = 'general'; if(window.location.search) window.location.search = ''"
                 href="#">General</a>
-            <a :class="activeTab === 'storages' && 'dark:text-white'"
+            <a :class="activeTab === 'storages' && 'menu-item-active'"
                 @click.prevent="activeTab = 'storages'; window.location.hash = 'storages'; if(window.location.search) window.location.search = ''"
                 href="#">Storages
             </a>
-            <a :class="activeTab === 'scheduled-tasks' && 'dark:text-white'"
+            <a :class="activeTab === 'scheduled-tasks' && 'menu-item-active'"
                 @click.prevent="activeTab = 'scheduled-tasks'; window.location.hash = 'scheduled-tasks'"
                 href="#">Scheduled Tasks
             </a>
             @if (str($serviceDatabase?->databaseType())->contains('mysql') ||
                     str($serviceDatabase?->databaseType())->contains('postgres') ||
                     str($serviceDatabase?->databaseType())->contains('mariadb'))
-                <a :class="activeTab === 'backups' && 'dark:text-white'"
+                <a :class="activeTab === 'backups' && 'menu-item-active'"
                     @click.prevent="activeTab = 'backups'; window.location.hash = 'backups'" href="#">Backups</a>
             @endif
         </div>