diff --git a/web/src/components/GroupPanelItem.tsx b/web/src/components/GroupPanelItem.tsx
index a07e64a2..1e23b515 100644
--- a/web/src/components/GroupPanelItem.tsx
+++ b/web/src/components/GroupPanelItem.tsx
@@ -18,9 +18,9 @@ export const GroupPanelItem: React.FC<{
     <Link className="block" to={to}>
       <div
         className={clsx(
-          'w-full hover:bg-white hover:bg-opacity-20 cursor-pointer text-gray-900 dark:text-white rounded px-1 h-8 flex items-center text-base group',
+          'w-full hover:bg-black hover:bg-opacity-20 dark:hover:bg-white dark:hover:bg-opacity-20 cursor-pointer text-gray-900 dark:text-white rounded px-1 h-8 flex items-center text-base group',
           {
-            'bg-white bg-opacity-20': isActive,
+            'bg-black bg-opacity-20 dark:bg-white dark:bg-opacity-20': isActive,
           }
         )}
       >
diff --git a/web/src/routes/Main/Content/SidebarItem.tsx b/web/src/routes/Main/Content/SidebarItem.tsx
index c760ad12..ee62bd9e 100644
--- a/web/src/routes/Main/Content/SidebarItem.tsx
+++ b/web/src/routes/Main/Content/SidebarItem.tsx
@@ -21,9 +21,9 @@ export const SidebarItem: React.FC<SidebarItemProps> = React.memo((props) => {
     <Link to={to}>
       <div
         className={clsx(
-          'w-full hover:bg-white hover:bg-opacity-20 cursor-pointer text-gray-700 dark:text-white rounded px-2 h-11 flex items-center text-base group mb-0.5',
+          'w-full hover:bg-black hover:bg-opacity-20 dark:hover:bg-white dark:hover:bg-opacity-20 cursor-pointer text-gray-700 dark:text-white rounded px-2 h-11 flex items-center text-base group mb-0.5',
           {
-            'bg-white bg-opacity-20': isActive,
+            'bg-black bg-opacity-20 dark:bg-white dark:bg-opacity-20': isActive,
           }
         )}
       >