diff --git a/src/theme/DocSidebarItem/Category.tsx b/src/theme/DocSidebarItem/Category.tsx
index ef881bc5..a9e7c883 100644
--- a/src/theme/DocSidebarItem/Category.tsx
+++ b/src/theme/DocSidebarItem/Category.tsx
@@ -113,13 +113,11 @@ export default function DocSidebarItemCategory({
   return (
     <li>
       <Link
-        className={clsx(
-          "flex justify-between items-center py-2 px-4 hover:text-gray-900 hover:dark:text-brand-600",
-          {
-            "bg-brand-500 dark:bg-brand-800 text-gray-900  dark:text-brand-600":
-              isActive,
-          }
-        )}
+        className={clsx("flex justify-between items-center py-2 px-4", {
+          "bg-brand-500 dark:bg-brand-800 text-gray-900 hover:text-gray-900 dark:text-brand-600 dark:hover:text-brand-600":
+            isActive,
+          "hover:text-gray-900 hover:dark:text-brand-600": !isActive,
+        })}
         onClick={
           collapsible
             ? (e) => {
diff --git a/src/theme/DocSidebarItem/Link.tsx b/src/theme/DocSidebarItem/Link.tsx
index 81a2cd1a..9222b872 100644
--- a/src/theme/DocSidebarItem/Link.tsx
+++ b/src/theme/DocSidebarItem/Link.tsx
@@ -20,13 +20,11 @@ export default function DocSidebarItemLink({
   return (
     <li className={className} key={label}>
       <Link
-        className={clsx(
-          "flex py-2 px-4 hover:text-gray-900 hover:dark:text-brand-600",
-          {
-            "bg-brand-500 dark:bg-brand-800 text-gray-900 dark:text-brand-600":
-              isActive,
-          }
-        )}
+        className={clsx("flex py-2 px-4 ", {
+          "bg-brand-500 dark:bg-brand-800 text-gray-900 hover:text-gray-900 dark:text-brand-600 dark:hover:text-brand-600":
+            isActive,
+          "hover:text-gray-900 hover:dark:text-brand-600": !isActive,
+        })}
         autoAddBaseUrl={autoAddBaseUrl}
         aria-current={isActive ? "page" : undefined}
         to={href}