diff --git a/src/components/profile-hover-card.tsx b/src/components/profile-hover-card.tsx
index db555e226..1cb97263f 100644
--- a/src/components/profile-hover-card.tsx
+++ b/src/components/profile-hover-card.tsx
@@ -107,7 +107,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
       onMouseEnter={handleMouseEnter(dispatch)}
       onMouseLeave={handleMouseLeave(dispatch)}
     >
-      <Card variant='rounded' className='relative isolate overflow-hidden'>
+      <Card variant='rounded' className='relative isolate overflow-hidden black:rounded-xl black:border black:border-gray-800'>
         <CardBody>
           <Stack space={2}>
             <UserPanel
diff --git a/src/components/sidebar-navigation-link.tsx b/src/components/sidebar-navigation-link.tsx
index 1602a3042..7f3b0306f 100644
--- a/src/components/sidebar-navigation-link.tsx
+++ b/src/components/sidebar-navigation-link.tsx
@@ -41,15 +41,15 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
       ref={ref}
       onClick={handleClick}
       className={clsx({
-        'flex items-center py-2 text-sm font-semibold space-x-4 rtl:space-x-reverse': true,
+        'flex items-center py-2 text-sm font-semibold space-x-4 rtl:space-x-reverse transition-colors duration-200': true,
         'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200': !isActive,
         'text-gray-900 dark:text-white': isActive,
       })}
     >
       <span
         className={clsx({
-          'relative rounded-lg inline-flex p-2.5': true,
-          'bg-primary-50 dark:bg-slate-700': !isActive,
+          'relative rounded-lg inline-flex p-2.5 transition-colors duration-200': true,
+          'bg-primary-50 dark:bg-slate-700 black:bg-gray-900': !isActive,
           'bg-primary-600': isActive,
         })}
       >
diff --git a/src/features/chats/components/chat-list.tsx b/src/features/chats/components/chat-list.tsx
index f896f027b..ce70fc7a7 100644
--- a/src/features/chats/components/chat-list.tsx
+++ b/src/features/chats/components/chat-list.tsx
@@ -75,13 +75,13 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false })
         <div
           className={clsx('pointer-events-none absolute inset-x-0 top-0 flex justify-center rounded-t-lg bg-gradient-to-b from-white to-transparent pb-12 pt-8 transition-opacity duration-500 dark:from-gray-900', {
             'opacity-0': isNearTop,
-            'opacity-100': !isNearTop,
+            'opacity-100 black:opacity-50': !isNearTop,
           })}
         />
         <div
           className={clsx('pointer-events-none absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-white to-transparent pb-8 pt-12 transition-opacity duration-500 dark:from-gray-900', {
             'opacity-0': isNearBottom,
-            'opacity-100': !isNearBottom,
+            'opacity-100 black:opacity-50': !isNearBottom,
           })}
         />
       </>