diff --git a/apps/mail/components/icons/icons.tsx b/apps/mail/components/icons/icons.tsx
index ac459a50d5..9774098ba0 100644
--- a/apps/mail/components/icons/icons.tsx
+++ b/apps/mail/components/icons/icons.tsx
@@ -1641,6 +1641,7 @@ export const Check = ({ className }: { className?: string }) => (
     <path
       id="Union"
       d="M6.40907 0.569119C6.58341 0.30762 6.93661 0.236654 7.19813 0.410916C7.45962 0.585241 7.53057 0.938456 7.35634 1.19998L3.56239 6.89138C3.46781 7.03326 3.31411 7.12556 3.14442 7.14236C2.97475 7.15915 2.806 7.09886 2.68544 6.9783L0.409072 4.70193C0.18694 4.47978 0.187156 4.11953 0.409072 3.89724C0.63133 3.67499 0.991493 3.675 1.21376 3.89724L2.99989 5.6824L6.40907 0.569119Z"
+      fill="currentColor"
     />
   </svg>
 );
diff --git a/apps/mail/components/mail/mail.tsx b/apps/mail/components/mail/mail.tsx
index 9c041a901a..6a434f64eb 100644
--- a/apps/mail/components/mail/mail.tsx
+++ b/apps/mail/components/mail/mail.tsx
@@ -486,9 +486,9 @@ export function MailLayout() {
                 )}
               >
                 <div className="flex w-full items-center justify-between gap-2">
-                  <div>
+                  <div className="flex items-center gap-2">
                     <SidebarToggle className="h-fit px-2" />
-                    <SelectAllCheckbox className="ml-2" />
+                    <SelectAllCheckbox />
                   </div>
 
                   <div className="flex items-center gap-2">
diff --git a/apps/mail/components/mail/select-all-checkbox.tsx b/apps/mail/components/mail/select-all-checkbox.tsx
index d347844fda..33990f9a62 100644
--- a/apps/mail/components/mail/select-all-checkbox.tsx
+++ b/apps/mail/components/mail/select-all-checkbox.tsx
@@ -1,12 +1,13 @@
-import { Checkbox } from '@/components/ui/checkbox';
-import { useMail } from '@/components/mail/use-mail';
-import { useThreads } from '@/hooks/use-threads';
+import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
 import { useSearchValue } from '@/hooks/use-search-value';
 import { trpcClient } from '@/providers/query-provider';
-import { cn } from '@/lib/utils';
+import { useMail } from '@/components/mail/use-mail';
+import { Checkbox } from '@/components/ui/checkbox';
+import { useThreads } from '@/hooks/use-threads';
 import { useParams } from 'react-router';
+import { Check } from '../icons/icons';
+import { cn } from '@/lib/utils';
 import { toast } from 'sonner';
-import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
 
 export default function SelectAllCheckbox({ className }: { className?: string }) {
   const [mail, setMail] = useMail();
@@ -97,12 +98,38 @@ export default function SelectAllCheckbox({ className }: { className?: string })
   }, [folder, query]);
 
   return (
-    <Checkbox
-      ref={checkboxRef}
-      disabled={isFetchingIds}
-      checked={isIndeterminate ? 'indeterminate' : isAllLoadedSelected}
-      onCheckedChange={handleToggle}
-      className={cn('h-4 w-4', className)}
-    />
+    <div className="flex items-center gap-2">
+      <Checkbox
+        ref={checkboxRef}
+        disabled={isFetchingIds}
+        checked={isIndeterminate ? 'indeterminate' : isAllLoadedSelected}
+        onCheckedChange={handleToggle}
+        className={cn('hidden', className)}
+        id="select-all"
+      />
+      <label
+        htmlFor="select-all"
+        className={cn(
+          'text-muted-foreground flex items-center gap-1 text-xs font-medium transition-colors',
+          isIndeterminate && 'text-primary',
+        )}
+      >
+        <span
+          className={cn(
+            'border-muted-foreground flex items-center justify-center rounded border p-0.5 transition-colors',
+            {
+              'border-primary bg-primary': isAllLoadedSelected,
+            },
+          )}
+        >
+          <Check
+            className={cn('text-muted-foreground/30 h-2 w-2 transition-colors', {
+              'text-black': isAllLoadedSelected,
+            })}
+          />
+        </span>
+        Select all
+      </label>
+    </div>
   );
-}
\ No newline at end of file
+}