diff --git a/apps/mail/app/(routes)/settings/connections/page.tsx b/apps/mail/app/(routes)/settings/connections/page.tsx
index 70c81b8ec0..312d3a6885 100644
--- a/apps/mail/app/(routes)/settings/connections/page.tsx
+++ b/apps/mail/app/(routes)/settings/connections/page.tsx
@@ -140,7 +140,7 @@ export default function ConnectionsPage() {
                           {t('pages.settings.connections.disconnectDescription')}
                         </DialogDescription>
                       </DialogHeader>
-                      <div className="flex justify-end gap-4">
+                      <div className="flex justify-end gap-4 mt-4">
                         <DialogClose asChild>
                           <Button variant="outline">
                             {t('pages.settings.connections.cancel')}
diff --git a/apps/mail/components/mail/mail-list.tsx b/apps/mail/components/mail/mail-list.tsx
index beed3e335a..7dbf07e96f 100644
--- a/apps/mail/components/mail/mail-list.tsx
+++ b/apps/mail/components/mail/mail-list.tsx
@@ -352,7 +352,7 @@ const Thread = memo(
               'hover:bg-offsetLight hover:bg-primary/5 group relative flex cursor-pointer flex-col items-start overflow-clip rounded-lg border border-transparent px-4 py-3 text-left text-sm transition-all hover:opacity-100',
 
               (isMailSelected || isMailBulkSelected || isKeyboardFocused) &&
-                'border-border bg-primary/5 opacity-100',
+              'border-border bg-primary/5 opacity-100',
               isKeyboardFocused && 'ring-primary/50 ring-2',
             )}
           >
@@ -447,6 +447,26 @@ const Thread = memo(
 
     if (demo) return demoContent;
 
+
+
+    const addThreadToBulkSelection = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      const threadId = latestMessage?.threadId ?? message.id;
+      setMail((prev: Config) => ({
+        ...prev,
+        bulkSelected: [...prev.bulkSelected, threadId],
+      }));
+    }
+
+    const removeThreadFromBulkSelection = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      const threadId = latestMessage?.threadId ?? message.id;
+      setMail((prev: Config) => ({
+        ...prev,
+        bulkSelected: prev.bulkSelected.filter((id: string) => id !== threadId),
+      }));
+    }
+
     const content =
       latestMessage && getThreadData ? (
         <div className="select-none py-1" onClick={onClick ? onClick(latestMessage) : undefined}>
@@ -458,7 +478,7 @@ const Thread = memo(
             className={cn(
               'hover:bg-offsetLight hover:bg-primary/5 group relative mx-[8px] flex cursor-pointer flex-col items-start rounded-[10px] border-transparent py-3 text-left text-sm transition-all hover:opacity-100',
               (isMailSelected || isMailBulkSelected || isKeyboardFocused) &&
-                'border-border bg-primary/5 opacity-100',
+              'border-border bg-primary/5 opacity-100',
               isKeyboardFocused && 'ring-primary/50',
               'relative',
             )}
@@ -536,55 +556,34 @@ const Thread = memo(
             <div className="flex w-full items-center justify-between gap-4 px-4">
               <div>
                 <Avatar className="h-8 w-8 rounded-full border dark:border-none">
-                  <div
+                  {isMailBulkSelected ? (<div
                     className={cn(
                       'flex h-full w-full items-center justify-center rounded-full bg-blue-500 p-2 dark:bg-blue-500',
-                      {
-                        hidden: !isMailBulkSelected,
-                      },
                     )}
-                    onClick={(e: React.MouseEvent) => {
-                      e.stopPropagation();
-                      const threadId = latestMessage.threadId ?? message.id;
-                      setMail((prev: Config) => ({
-                        ...prev,
-                        bulkSelected: prev.bulkSelected.filter((id: string) => id !== threadId),
-                      }));
-                    }}
+                    onClick={removeThreadFromBulkSelection}
                   >
                     <Check className="h-4 w-4 text-white" />
-                  </div>
-                  {isGroupThread ? (
-                    <div
-                      className="flex h-full w-full items-center justify-center rounded-full bg-[#FFFFFF] p-2 dark:bg-[#373737]"
-                      onClick={(e: React.MouseEvent) => {
-                        e.stopPropagation();
-                        const threadId = latestMessage.threadId ?? message.id;
-                        setMail((prev: Config) => ({
-                          ...prev,
-                          bulkSelected: [...prev.bulkSelected, threadId],
-                        }));
-                      }}
-                    >
-                      <GroupPeople className="h-4 w-4" />
-                    </div>
-                  ) : (
+                  </div>) : (
                     <>
-                      <AvatarImage
-                        onClick={(e: React.MouseEvent) => {
-                          e.stopPropagation();
-                          const threadId = latestMessage.threadId ?? message.id;
-                          setMail((prev: Config) => ({
-                            ...prev,
-                            bulkSelected: [...prev.bulkSelected, threadId],
-                          }));
-                        }}
-                        className="rounded-full bg-[#FFFFFF] dark:bg-[#373737]"
-                        src={getEmailLogo(latestMessage.sender.email)}
-                      />
-                      <AvatarFallback className="rounded-full bg-[#FFFFFF] font-bold text-[#9F9F9F] dark:bg-[#373737]">
-                        {cleanName[0]?.toUpperCase()}
-                      </AvatarFallback>
+                      {isGroupThread ? (
+                        <div
+                          className="flex h-full w-full items-center justify-center rounded-full bg-[#FFFFFF] p-2 dark:bg-[#373737]"
+                          onClick={addThreadToBulkSelection}
+                        >
+                          <GroupPeople className="h-4 w-4" />
+                        </div>
+                      ) : (
+                        <>
+                          <AvatarImage
+                            onClick={addThreadToBulkSelection}
+                            className="rounded-full bg-[#FFFFFF] dark:bg-[#373737]"
+                            src={getEmailLogo(latestMessage.sender.email)}
+                          />
+                          <AvatarFallback onClick={addThreadToBulkSelection} className="rounded-full bg-[#FFFFFF] font-bold text-[#9F9F9F] dark:bg-[#373737]">
+                            {cleanName[0]?.toUpperCase()}
+                          </AvatarFallback>
+                        </>
+                      )}
                     </>
                   )}
                 </Avatar>