diff --git a/app/soapbox/components/sidebar-navigation-link.tsx b/app/soapbox/components/sidebar-navigation-link.tsx
index 9a20ca482..5c9100f85 100644
--- a/app/soapbox/components/sidebar-navigation-link.tsx
+++ b/app/soapbox/components/sidebar-navigation-link.tsx
@@ -37,16 +37,17 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
       ref={ref}
       onClick={handleClick}
       className={classNames({
-        'flex items-center px-4 py-3.5 text-base font-semibold space-x-4 rounded-full group text-gray-600 hover:text-primary-600 dark:text-gray-500 dark:hover:text-gray-100 hover:bg-primary-100 dark:hover:bg-primary-700': true,
-        'dark:text-gray-100 text-primary-600': isActive,
+        'flex items-center px-4 py-3.5 text-base font-semibold space-x-4 rounded-full group text-gray-600 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100 hover:bg-primary-200 dark:hover:bg-primary-900': true,
+        'dark:text-gray-100 text-gray-900': isActive,
       })}
     >
       <span className='relative'>
         <Icon
           src={icon}
           count={count}
-          className={classNames('h-5 w-5 group-hover:text-primary-500', {
-            'text-primary-500': isActive,
+          className={classNames('h-5 w-5', {
+            'text-gray-600 dark:text-gray-500 group-hover:text-primary-500 dark:group-hover:text-primary-400': !isActive,
+            'text-primary-500 dark:text-primary-400': isActive,
           })}
         />
       </span>