diff --git a/src/frontend/src/pages/Profile.tsx b/src/frontend/src/pages/Profile.tsx
index 0c662f5..ca1380f 100644
--- a/src/frontend/src/pages/Profile.tsx
+++ b/src/frontend/src/pages/Profile.tsx
@@ -84,7 +84,7 @@ export default function ProfilePage() {
       </div>
 
       <div className="flex flex-row w-full">
-        <Menu className='me-2 min-w-fit w-fit' model={Object.entries(tabs).map(([k, { ...data }]) => ({ ...data, command: () => setActiveTab(k as TTabId), className: activeTab == k ? 'bg-zinc-700' : undefined }))} />
+        <Menu className='me-2 min-w-fit w-fit' model={Object.entries(tabs).map(([k, { ...data }]) => ({ ...data, command: () => setActiveTab(k as TTabId), className: activeTab == k ? 'bg-zinc-300 dark:bg-zinc-700' : undefined }))} />
         <Card title={tabs[activeTab].label} pt={{ root: { className: 'w-full' } }}>
           {activeTab == 'details' && <div>
             <table>
diff --git a/src/frontend/src/utils/ui/customDesign/menu.ts b/src/frontend/src/utils/ui/customDesign/menu.ts
index 1d68cd1..3e5ded9 100644
--- a/src/frontend/src/utils/ui/customDesign/menu.ts
+++ b/src/frontend/src/utils/ui/customDesign/menu.ts
@@ -20,7 +20,7 @@ export const menu = {
     className: classNames('text-gray-700 dark:text-white/80 py-3 px-5 select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative'),
   },
   menuitem: {
-    className: classNames('hover:bg-zinc-600'),
+    className: classNames('hover:bg-zinc-200 dark:hover:bg-zinc-600'),
   },
   icon: 'text-gray-600 dark:text-white/70 mr-2',
   submenuheader: {