diff --git a/apps/mail/components/mail/mail.tsx b/apps/mail/components/mail/mail.tsx
index b113958bbc..d1d83f0db4 100644
--- a/apps/mail/components/mail/mail.tsx
+++ b/apps/mail/components/mail/mail.tsx
@@ -503,13 +503,13 @@ export const Categories = () => {
       id: 'Important',
       name: t('common.mailCategories.important'),
       searchValue: 'is:important',
-      icon: <Lightning className={cn('fill-white dark:fill-white')} />,
+      icon: <Lightning className={cn('fill-current')} />,
     },
     {
       id: 'All Mail',
       name: 'All Mail',
       searchValue: 'is:inbox',
-      icon: <Mail className={cn('fill-white dark:fill-white')} />,
+      icon: <Mail className={cn('fill-current')} />,
       colors:
         'border-0 bg-[#006FFE] text-white dark:bg-[#006FFE] dark:text-white dark:hover:bg-[#006FFE]/90',
     },
@@ -517,25 +517,25 @@ export const Categories = () => {
       id: 'Personal',
       name: t('common.mailCategories.personal'),
       searchValue: 'is:personal',
-      icon: <User className={cn('fill-white dark:fill-white')} />,
+      icon: <User className={cn('fill-current')} />,
     },
     {
       id: 'Updates',
       name: t('common.mailCategories.updates'),
       searchValue: 'is:updates',
-      icon: <Bell className={cn('fill-white dark:fill-white')} />,
+      icon: <Bell className={cn('fill-current')} />,
     },
     {
       id: 'Promotions',
       name: 'Promotions',
       searchValue: 'is:promotions',
-      icon: <Tag className={cn('fill-white dark:fill-white')} />,
+      icon: <Tag className={cn('fill-current')} />,
     },
     {
       id: 'Unread',
       name: 'Unread',
       searchValue: 'is:unread',
-      icon: <ScanEye className={cn('h-4 w-4 fill-white dark:fill-white')} />,
+      icon: <ScanEye className={cn('h-4 w-4 fill-current')} />,
     },
   ];
 };
@@ -603,7 +603,7 @@ function CategorySelect({ isMultiSelectMode }: { isMultiSelectMode: boolean }) {
               'flex h-8 items-center justify-center gap-1 overflow-hidden rounded-md border transition-all duration-300 ease-out dark:border-none',
               isSelected
                 ? cn('flex-1 border-none px-3 text-white', bgColor)
-                : 'w-8 bg-white hover:bg-gray-100 dark:bg-[#313131] dark:hover:bg-[#313131]/80',
+                : 'w-8 bg-white text-black hover:bg-gray-100 dark:bg-[#313131] dark:text-white dark:hover:bg-[#313131]/80',
             )}
             tabIndex={isOverlay ? -1 : undefined}
           >