diff --git a/package.json b/package.json
index 3633807..de6e495 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@internxt/ui",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "description": "Library of Internxt components",
   "repository": {
     "type": "git",
diff --git a/src/components/mail/cheaps/MessageCheap.tsx b/src/components/mail/cheaps/MessageCheap.tsx
index 1488c56..50240f4 100644
--- a/src/components/mail/cheaps/MessageCheap.tsx
+++ b/src/components/mail/cheaps/MessageCheap.tsx
@@ -1,4 +1,5 @@
 import { Avatar } from '@/components/avatar';
+import { Checkbox } from '@/components/checkbox';
 
 export interface MessageCheapProps {
   email: {
@@ -15,18 +16,39 @@ export interface MessageCheapProps {
   active?: boolean;
   selected?: boolean;
   onClick: (id: string, isRead?: boolean) => void;
+  onSelect?: (id: string) => void;
 }
 
-const MessageCheap = ({ email, active, selected, onClick }: MessageCheapProps) => {
+const MessageCheap = ({ email, active, selected, onClick, onSelect }: MessageCheapProps) => {
   const isHighlighted = active || selected;
 
+  const handleSelect: React.MouseEventHandler = (e) => {
+    e.stopPropagation();
+    onSelect?.(email.id);
+  };
+
   return (
     <button
       onClick={() => onClick(email.id, email.read)}
-      className={`flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 ${isHighlighted ? 'bg-primary/10' : ''}`}
+      className={`group flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 ${isHighlighted ? 'bg-primary/10' : ''}`}
     >
       <div className="flex flex-row w-full gap-2">
-        <Avatar fullName={email.from.name} src={email.from.avatar} size={'xxs'} />
+        <div className="relative h-7 w-7 flex-shrink-0">
+          <div
+            className={`absolute inset-0 flex items-center justify-center transition-opacity ${
+              selected ? 'opacity-0' : 'opacity-100 group-hover:opacity-0'
+            }`}
+          >
+            <Avatar fullName={email.from.name} src={email.from.avatar} size={'xxs'} />
+          </div>
+          <div
+            className={`absolute z-30 inset-0 flex items-center justify-center transition-opacity ${
+              selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+            }`}
+          >
+            <Checkbox checked={selected} onClick={handleSelect} />
+          </div>
+        </div>
         <div className="flex flex-col w-full">
           <div className={`flex flex-row w-full justify-between ${isHighlighted ? 'text-primary' : ''}`}>
             <div className="flex flex-row gap-1 w-full max-w-[150px] items-center">
diff --git a/src/components/mail/tray/TrayList.tsx b/src/components/mail/tray/TrayList.tsx
index ff21b6c..0f06e97 100644
--- a/src/components/mail/tray/TrayList.tsx
+++ b/src/components/mail/tray/TrayList.tsx
@@ -22,6 +22,7 @@ export interface TrayListProps {
   hasMoreItems?: boolean;
   emptyState?: ReactNode;
   onMailSelected?: (id: string, isRead?: boolean) => void;
+  onMailChecked?: (id: string) => void;
   onLoadMore?: () => void;
 }
 
@@ -58,6 +59,7 @@ const TrayList = ({
   hasMoreItems = false,
   emptyState,
   onMailSelected = () => {},
+  onMailChecked,
   onLoadMore = () => {},
 }: TrayListProps) => {
   const loader = (
@@ -97,6 +99,7 @@ const TrayList = ({
                       active={activeEmail === email.id}
                       selected={checked || selectedEmails.includes(email.id)}
                       onClick={onMailSelected}
+                      onSelect={onMailChecked}
                     />
                   </div>
                 ))}
diff --git a/src/components/mail/tray/__test__/MessageCheap.test.tsx b/src/components/mail/tray/__test__/MessageCheap.test.tsx
index bae405e..eb9b24a 100644
--- a/src/components/mail/tray/__test__/MessageCheap.test.tsx
+++ b/src/components/mail/tray/__test__/MessageCheap.test.tsx
@@ -91,4 +91,25 @@ describe('MessageCheap', () => {
     const avatarContainer = screen.getByText('John Doe').closest('.flex.flex-row');
     expect(avatarContainer).toBeInTheDocument();
   });
+
+  it('should call onSelect with email id when checkbox is clicked', () => {
+    const mockOnSelect = vi.fn();
+    const { container } = render(<MessageCheap email={mockEmail} onClick={mockOnClick} onSelect={mockOnSelect} />);
+
+    const checkboxLabel = container.querySelector('label');
+    expect(checkboxLabel).toBeInTheDocument();
+    if (checkboxLabel) fireEvent.click(checkboxLabel);
+
+    expect(mockOnSelect).toHaveBeenCalledWith('1');
+  });
+
+  it('should not call onClick when checkbox is clicked', () => {
+    const mockOnSelect = vi.fn();
+    const { container } = render(<MessageCheap email={mockEmail} onClick={mockOnClick} onSelect={mockOnSelect} />);
+
+    const checkboxLabel = container.querySelector('label');
+    if (checkboxLabel) fireEvent.click(checkboxLabel);
+
+    expect(mockOnClick).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/components/mail/tray/__test__/__snapshots__/MessageCheap.test.tsx.snap b/src/components/mail/tray/__test__/__snapshots__/MessageCheap.test.tsx.snap
index 6e329bd..cc3b59c 100644
--- a/src/components/mail/tray/__test__/__snapshots__/MessageCheap.test.tsx.snap
+++ b/src/components/mail/tray/__test__/__snapshots__/MessageCheap.test.tsx.snap
@@ -6,17 +6,56 @@ exports[`MessageCheap > should match snapshot 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 "
+        class="group flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 "
       >
         <div
           class="flex flex-row w-full gap-2"
         >
-          <img
-            class=" shrink-0 select-none rounded-full object-cover"
-            draggable="false"
-            src="https://example.com/avatar.jpg"
-            style="width: 28px; height: 28px;"
-          />
+          <div
+            class="relative h-7 w-7 flex-shrink-0"
+          >
+            <div
+              class="absolute inset-0 flex items-center justify-center transition-opacity opacity-100 group-hover:opacity-0"
+            >
+              <img
+                class=" shrink-0 select-none rounded-full object-cover"
+                draggable="false"
+                src="https://example.com/avatar.jpg"
+                style="width: 28px; height: 28px;"
+              />
+            </div>
+            <div
+              class="absolute z-30 inset-0 flex items-center justify-center transition-opacity opacity-0 group-hover:opacity-100"
+            >
+              <label
+                class="relative h-5 w-5 rounded focus-within:outline-primary undefined"
+              >
+                <div
+                  class="relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white border-primary bg-primary"
+                >
+                  <svg
+                    class="absolute -inset-px"
+                    fill="none"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    width="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="m8.85955 15c.38202 0 .67978-.1461.88202-.4551l5.23593-8.00557c.1461-.22472.2079-.43259.2079-.62922 0-.52809-.3933-.91011-.9326-.91011-.3708 0-.6011.13483-.8258.48876l-4.59554 7.24724-2.33146-2.8933c-.20787-.24719-.43259-.35955-.74719-.35955-.54495 0-.9382.38764-.9382.91575 0 .2359.07303.4438.27528.6741l2.89887 3.5113c.24158.2865.51124.4157.87079.4157z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <input
+                  checked=""
+                  class="base-checkbox h-0 w-0 appearance-none opacity-0"
+                  readonly=""
+                  type="checkbox"
+                />
+              </label>
+            </div>
+          </div>
           <div
             class="flex flex-col w-full"
           >
@@ -60,17 +99,56 @@ exports[`MessageCheap > should match snapshot 1`] = `
   </body>,
   "container": <div>
     <button
-      class="flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 "
+      class="group flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 "
     >
       <div
         class="flex flex-row w-full gap-2"
       >
-        <img
-          class=" shrink-0 select-none rounded-full object-cover"
-          draggable="false"
-          src="https://example.com/avatar.jpg"
-          style="width: 28px; height: 28px;"
-        />
+        <div
+          class="relative h-7 w-7 flex-shrink-0"
+        >
+          <div
+            class="absolute inset-0 flex items-center justify-center transition-opacity opacity-100 group-hover:opacity-0"
+          >
+            <img
+              class=" shrink-0 select-none rounded-full object-cover"
+              draggable="false"
+              src="https://example.com/avatar.jpg"
+              style="width: 28px; height: 28px;"
+            />
+          </div>
+          <div
+            class="absolute z-30 inset-0 flex items-center justify-center transition-opacity opacity-0 group-hover:opacity-100"
+          >
+            <label
+              class="relative h-5 w-5 rounded focus-within:outline-primary undefined"
+            >
+              <div
+                class="relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white border-primary bg-primary"
+              >
+                <svg
+                  class="absolute -inset-px"
+                  fill="none"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  width="20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="m8.85955 15c.38202 0 .67978-.1461.88202-.4551l5.23593-8.00557c.1461-.22472.2079-.43259.2079-.62922 0-.52809-.3933-.91011-.9326-.91011-.3708 0-.6011.13483-.8258.48876l-4.59554 7.24724-2.33146-2.8933c-.20787-.24719-.43259-.35955-.74719-.35955-.54495 0-.9382.38764-.9382.91575 0 .2359.07303.4438.27528.6741l2.89887 3.5113c.24158.2865.51124.4157.87079.4157z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+              <input
+                checked=""
+                class="base-checkbox h-0 w-0 appearance-none opacity-0"
+                readonly=""
+                type="checkbox"
+              />
+            </label>
+          </div>
+        </div>
         <div
           class="flex flex-col w-full"
         >
diff --git a/src/components/mail/tray/__test__/__snapshots__/TrayList.test.tsx.snap b/src/components/mail/tray/__test__/__snapshots__/TrayList.test.tsx.snap
index 22eea35..e9bb95b 100644
--- a/src/components/mail/tray/__test__/__snapshots__/TrayList.test.tsx.snap
+++ b/src/components/mail/tray/__test__/__snapshots__/TrayList.test.tsx.snap
@@ -17,17 +17,41 @@ exports[`TrayList > should match snapshot 1`] = `
               class="flex items-center w-full flex-col"
             >
               <button
-                class="flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 "
+                class="group flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 "
               >
                 <div
                   class="flex flex-row w-full gap-2"
                 >
-                  <img
-                    class=" shrink-0 select-none rounded-full object-cover"
-                    draggable="false"
-                    src="https://example.com/avatar1.jpg"
-                    style="width: 28px; height: 28px;"
-                  />
+                  <div
+                    class="relative h-7 w-7 flex-shrink-0"
+                  >
+                    <div
+                      class="absolute inset-0 flex items-center justify-center transition-opacity opacity-100 group-hover:opacity-0"
+                    >
+                      <img
+                        class=" shrink-0 select-none rounded-full object-cover"
+                        draggable="false"
+                        src="https://example.com/avatar1.jpg"
+                        style="width: 28px; height: 28px;"
+                      />
+                    </div>
+                    <div
+                      class="absolute z-30 inset-0 flex items-center justify-center transition-opacity opacity-0 group-hover:opacity-100"
+                    >
+                      <label
+                        class="relative h-5 w-5 rounded focus-within:outline-primary undefined"
+                      >
+                        <div
+                          class="relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white border-gray-30 hover:border-gray-40"
+                        />
+                        <input
+                          class="base-checkbox h-0 w-0 appearance-none opacity-0"
+                          readonly=""
+                          type="checkbox"
+                        />
+                      </label>
+                    </div>
+                  </div>
                   <div
                     class="flex flex-col w-full"
                   >
@@ -72,17 +96,41 @@ exports[`TrayList > should match snapshot 1`] = `
               class="flex items-center w-full flex-col"
             >
               <button
-                class="flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 "
+                class="group flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 "
               >
                 <div
                   class="flex flex-row w-full gap-2"
                 >
-                  <img
-                    class=" shrink-0 select-none rounded-full object-cover"
-                    draggable="false"
-                    src="https://example.com/avatar2.jpg"
-                    style="width: 28px; height: 28px;"
-                  />
+                  <div
+                    class="relative h-7 w-7 flex-shrink-0"
+                  >
+                    <div
+                      class="absolute inset-0 flex items-center justify-center transition-opacity opacity-100 group-hover:opacity-0"
+                    >
+                      <img
+                        class=" shrink-0 select-none rounded-full object-cover"
+                        draggable="false"
+                        src="https://example.com/avatar2.jpg"
+                        style="width: 28px; height: 28px;"
+                      />
+                    </div>
+                    <div
+                      class="absolute z-30 inset-0 flex items-center justify-center transition-opacity opacity-0 group-hover:opacity-100"
+                    >
+                      <label
+                        class="relative h-5 w-5 rounded focus-within:outline-primary undefined"
+                      >
+                        <div
+                          class="relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white border-gray-30 hover:border-gray-40"
+                        />
+                        <input
+                          class="base-checkbox h-0 w-0 appearance-none opacity-0"
+                          readonly=""
+                          type="checkbox"
+                        />
+                      </label>
+                    </div>
+                  </div>
                   <div
                     class="flex flex-col w-full"
                   >
@@ -138,17 +186,41 @@ exports[`TrayList > should match snapshot 1`] = `
             class="flex items-center w-full flex-col"
           >
             <button
-              class="flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 "
+              class="group flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 "
             >
               <div
                 class="flex flex-row w-full gap-2"
               >
-                <img
-                  class=" shrink-0 select-none rounded-full object-cover"
-                  draggable="false"
-                  src="https://example.com/avatar1.jpg"
-                  style="width: 28px; height: 28px;"
-                />
+                <div
+                  class="relative h-7 w-7 flex-shrink-0"
+                >
+                  <div
+                    class="absolute inset-0 flex items-center justify-center transition-opacity opacity-100 group-hover:opacity-0"
+                  >
+                    <img
+                      class=" shrink-0 select-none rounded-full object-cover"
+                      draggable="false"
+                      src="https://example.com/avatar1.jpg"
+                      style="width: 28px; height: 28px;"
+                    />
+                  </div>
+                  <div
+                    class="absolute z-30 inset-0 flex items-center justify-center transition-opacity opacity-0 group-hover:opacity-100"
+                  >
+                    <label
+                      class="relative h-5 w-5 rounded focus-within:outline-primary undefined"
+                    >
+                      <div
+                        class="relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white border-gray-30 hover:border-gray-40"
+                      />
+                      <input
+                        class="base-checkbox h-0 w-0 appearance-none opacity-0"
+                        readonly=""
+                        type="checkbox"
+                      />
+                    </label>
+                  </div>
+                </div>
                 <div
                   class="flex flex-col w-full"
                 >
@@ -193,17 +265,41 @@ exports[`TrayList > should match snapshot 1`] = `
             class="flex items-center w-full flex-col"
           >
             <button
-              class="flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 "
+              class="group flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 "
             >
               <div
                 class="flex flex-row w-full gap-2"
               >
-                <img
-                  class=" shrink-0 select-none rounded-full object-cover"
-                  draggable="false"
-                  src="https://example.com/avatar2.jpg"
-                  style="width: 28px; height: 28px;"
-                />
+                <div
+                  class="relative h-7 w-7 flex-shrink-0"
+                >
+                  <div
+                    class="absolute inset-0 flex items-center justify-center transition-opacity opacity-100 group-hover:opacity-0"
+                  >
+                    <img
+                      class=" shrink-0 select-none rounded-full object-cover"
+                      draggable="false"
+                      src="https://example.com/avatar2.jpg"
+                      style="width: 28px; height: 28px;"
+                    />
+                  </div>
+                  <div
+                    class="absolute z-30 inset-0 flex items-center justify-center transition-opacity opacity-0 group-hover:opacity-100"
+                  >
+                    <label
+                      class="relative h-5 w-5 rounded focus-within:outline-primary undefined"
+                    >
+                      <div
+                        class="relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white border-gray-30 hover:border-gray-40"
+                      />
+                      <input
+                        class="base-checkbox h-0 w-0 appearance-none opacity-0"
+                        readonly=""
+                        type="checkbox"
+                      />
+                    </label>
+                  </div>
+                </div>
                 <div
                   class="flex flex-col w-full"
                 >
diff --git a/src/components/navigation/sidenav/__test__/__snapshots__/Sidenav.test.tsx.snap b/src/components/navigation/sidenav/__test__/__snapshots__/Sidenav.test.tsx.snap
index c135431..183ec5c 100644
--- a/src/components/navigation/sidenav/__test__/__snapshots__/Sidenav.test.tsx.snap
+++ b/src/components/navigation/sidenav/__test__/__snapshots__/Sidenav.test.tsx.snap
@@ -53,7 +53,7 @@ exports[`Sidenav Component > Notification > should match snapshot with notificat
             data-cy="inbox"
           >
             <div
-              class="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]"
+              class="flex flex-row px-2.5 py-2 w-full items-center justify-between h-9"
             >
               <div
                 class="flex flex-row gap-3 items-center text-gray-80"
@@ -70,7 +70,7 @@ exports[`Sidenav Component > Notification > should match snapshot with notificat
                 </p>
               </div>
               <div
-                class="flex rounded-full px-2 py-1 transition-all duration-300 bg-gray-10 text-gray-60 opacity-100 delay-0"
+                class="flex rounded-full px-2 py-1 bg-gray-10 text-gray-60 opacity-100 delay-0"
               >
                 <p
                   class="text-xs font-medium"
@@ -85,7 +85,7 @@ exports[`Sidenav Component > Notification > should match snapshot with notificat
             data-cy="sent"
           >
             <div
-              class="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]"
+              class="flex flex-row px-2.5 py-2 w-full items-center justify-between h-9"
             >
               <div
                 class="flex flex-row gap-3 items-center text-gray-80"
@@ -101,9 +101,6 @@ exports[`Sidenav Component > Notification > should match snapshot with notificat
                   Sent
                 </p>
               </div>
-              <div
-                class="flex rounded-full px-2 py-1 transition-all duration-300 bg-gray-10 text-gray-60 opacity-0 invisible delay-300"
-              />
             </div>
           </button>
           <button
@@ -111,7 +108,7 @@ exports[`Sidenav Component > Notification > should match snapshot with notificat
             data-cy="drafts"
           >
             <div
-              class="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]"
+              class="flex flex-row px-2.5 py-2 w-full items-center justify-between h-9"
             >
               <div
                 class="flex flex-row gap-3 items-center text-gray-80"
@@ -128,7 +125,7 @@ exports[`Sidenav Component > Notification > should match snapshot with notificat
                 </p>
               </div>
               <div
-                class="flex rounded-full px-2 py-1 transition-all duration-300 bg-gray-10 text-gray-60 opacity-100 delay-0"
+                class="flex rounded-full px-2 py-1 bg-gray-10 text-gray-60 opacity-100 delay-0"
               >
                 <p
                   class="text-xs font-medium"
@@ -143,7 +140,7 @@ exports[`Sidenav Component > Notification > should match snapshot with notificat
             data-cy="labels"
           >
             <div
-              class="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]"
+              class="flex flex-row px-2.5 py-2 w-full items-center justify-between h-9"
             >
               <div
                 class="flex flex-row gap-3 items-center text-gray-80"
@@ -159,9 +156,6 @@ exports[`Sidenav Component > Notification > should match snapshot with notificat
                   Labels
                 </p>
               </div>
-              <div
-                class="flex rounded-full px-2 py-1 transition-all duration-300 bg-gray-10 text-gray-60 opacity-0 invisible delay-300"
-              />
             </div>
           </button>
         </div>
@@ -263,7 +257,7 @@ exports[`Sidenav Component > should match snapshot 1`] = `
             data-cy="inbox"
           >
             <div
-              class="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]"
+              class="flex flex-row px-2.5 py-2 w-full items-center justify-between h-9"
             >
               <div
                 class="flex flex-row gap-3 items-center text-gray-80"
@@ -280,7 +274,7 @@ exports[`Sidenav Component > should match snapshot 1`] = `
                 </p>
               </div>
               <div
-                class="flex rounded-full px-2 py-1 transition-all duration-300 bg-gray-10 text-gray-60 opacity-100 delay-0"
+                class="flex rounded-full px-2 py-1 bg-gray-10 text-gray-60 opacity-100 delay-0"
               >
                 <p
                   class="text-xs font-medium"
@@ -295,7 +289,7 @@ exports[`Sidenav Component > should match snapshot 1`] = `
             data-cy="sent"
           >
             <div
-              class="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]"
+              class="flex flex-row px-2.5 py-2 w-full items-center justify-between h-9"
             >
               <div
                 class="flex flex-row gap-3 items-center text-gray-80"
@@ -311,9 +305,6 @@ exports[`Sidenav Component > should match snapshot 1`] = `
                   Sent
                 </p>
               </div>
-              <div
-                class="flex rounded-full px-2 py-1 transition-all duration-300 bg-gray-10 text-gray-60 opacity-0 invisible delay-300"
-              />
             </div>
           </button>
           <button
@@ -321,7 +312,7 @@ exports[`Sidenav Component > should match snapshot 1`] = `
             data-cy="drafts"
           >
             <div
-              class="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]"
+              class="flex flex-row px-2.5 py-2 w-full items-center justify-between h-9"
             >
               <div
                 class="flex flex-row gap-3 items-center text-gray-80"
@@ -338,7 +329,7 @@ exports[`Sidenav Component > should match snapshot 1`] = `
                 </p>
               </div>
               <div
-                class="flex rounded-full px-2 py-1 transition-all duration-300 bg-gray-10 text-gray-60 opacity-100 delay-0"
+                class="flex rounded-full px-2 py-1 bg-gray-10 text-gray-60 opacity-100 delay-0"
               >
                 <p
                   class="text-xs font-medium"
@@ -353,7 +344,7 @@ exports[`Sidenav Component > should match snapshot 1`] = `
             data-cy="labels"
           >
             <div
-              class="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]"
+              class="flex flex-row px-2.5 py-2 w-full items-center justify-between h-9"
             >
               <div
                 class="flex flex-row gap-3 items-center text-gray-80"
@@ -369,9 +360,6 @@ exports[`Sidenav Component > should match snapshot 1`] = `
                   Labels
                 </p>
               </div>
-              <div
-                class="flex rounded-full px-2 py-1 transition-all duration-300 bg-gray-10 text-gray-60 opacity-0 invisible delay-300"
-              />
             </div>
           </button>
         </div>
@@ -461,7 +449,7 @@ exports[`Sidenav Component > should match snapshot when collapsed 1`] = `
             title="Inbox"
           >
             <div
-              class="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]"
+              class="flex flex-row px-2.5 py-2 w-full items-center justify-between h-9"
             >
               <div
                 class="flex flex-row gap-3 items-center text-gray-80"
@@ -478,7 +466,7 @@ exports[`Sidenav Component > should match snapshot when collapsed 1`] = `
                 </p>
               </div>
               <div
-                class="flex rounded-full px-2 py-1 transition-all duration-300 bg-gray-10 text-gray-60 opacity-0 invisible delay-300"
+                class="flex rounded-full px-2 py-1 bg-gray-10 text-gray-60 opacity-0 invisible delay-300"
               >
                 <p
                   class="text-xs font-medium"
@@ -494,7 +482,7 @@ exports[`Sidenav Component > should match snapshot when collapsed 1`] = `
             title="Sent"
           >
             <div
-              class="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]"
+              class="flex flex-row px-2.5 py-2 w-full items-center justify-between h-9"
             >
               <div
                 class="flex flex-row gap-3 items-center text-gray-80"
@@ -510,9 +498,6 @@ exports[`Sidenav Component > should match snapshot when collapsed 1`] = `
                   Sent
                 </p>
               </div>
-              <div
-                class="flex rounded-full px-2 py-1 transition-all duration-300 bg-gray-10 text-gray-60 opacity-0 invisible delay-300"
-              />
             </div>
           </button>
           <button
@@ -521,7 +506,7 @@ exports[`Sidenav Component > should match snapshot when collapsed 1`] = `
             title="Drafts"
           >
             <div
-              class="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]"
+              class="flex flex-row px-2.5 py-2 w-full items-center justify-between h-9"
             >
               <div
                 class="flex flex-row gap-3 items-center text-gray-80"
@@ -538,7 +523,7 @@ exports[`Sidenav Component > should match snapshot when collapsed 1`] = `
                 </p>
               </div>
               <div
-                class="flex rounded-full px-2 py-1 transition-all duration-300 bg-gray-10 text-gray-60 opacity-0 invisible delay-300"
+                class="flex rounded-full px-2 py-1 bg-gray-10 text-gray-60 opacity-0 invisible delay-300"
               >
                 <p
                   class="text-xs font-medium"
@@ -554,7 +539,7 @@ exports[`Sidenav Component > should match snapshot when collapsed 1`] = `
             title="Labels"
           >
             <div
-              class="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]"
+              class="flex flex-row px-2.5 py-2 w-full items-center justify-between h-9"
             >
               <div
                 class="flex flex-row gap-3 items-center text-gray-80"
@@ -570,9 +555,6 @@ exports[`Sidenav Component > should match snapshot when collapsed 1`] = `
                   Labels
                 </p>
               </div>
-              <div
-                class="flex rounded-full px-2 py-1 transition-all duration-300 bg-gray-10 text-gray-60 opacity-0 invisible delay-300"
-              />
             </div>
           </button>
         </div>
@@ -641,7 +623,7 @@ exports[`Sidenav Component > should match snapshot with primary action 1`] = `
             data-cy="inbox"
           >
             <div
-              class="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]"
+              class="flex flex-row px-2.5 py-2 w-full items-center justify-between h-9"
             >
               <div
                 class="flex flex-row gap-3 items-center text-gray-80"
@@ -658,7 +640,7 @@ exports[`Sidenav Component > should match snapshot with primary action 1`] = `
                 </p>
               </div>
               <div
-                class="flex rounded-full px-2 py-1 transition-all duration-300 bg-gray-10 text-gray-60 opacity-100 delay-0"
+                class="flex rounded-full px-2 py-1 bg-gray-10 text-gray-60 opacity-100 delay-0"
               >
                 <p
                   class="text-xs font-medium"
@@ -673,7 +655,7 @@ exports[`Sidenav Component > should match snapshot with primary action 1`] = `
             data-cy="sent"
           >
             <div
-              class="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]"
+              class="flex flex-row px-2.5 py-2 w-full items-center justify-between h-9"
             >
               <div
                 class="flex flex-row gap-3 items-center text-gray-80"
@@ -689,9 +671,6 @@ exports[`Sidenav Component > should match snapshot with primary action 1`] = `
                   Sent
                 </p>
               </div>
-              <div
-                class="flex rounded-full px-2 py-1 transition-all duration-300 bg-gray-10 text-gray-60 opacity-0 invisible delay-300"
-              />
             </div>
           </button>
           <button
@@ -699,7 +678,7 @@ exports[`Sidenav Component > should match snapshot with primary action 1`] = `
             data-cy="drafts"
           >
             <div
-              class="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]"
+              class="flex flex-row px-2.5 py-2 w-full items-center justify-between h-9"
             >
               <div
                 class="flex flex-row gap-3 items-center text-gray-80"
@@ -716,7 +695,7 @@ exports[`Sidenav Component > should match snapshot with primary action 1`] = `
                 </p>
               </div>
               <div
-                class="flex rounded-full px-2 py-1 transition-all duration-300 bg-gray-10 text-gray-60 opacity-100 delay-0"
+                class="flex rounded-full px-2 py-1 bg-gray-10 text-gray-60 opacity-100 delay-0"
               >
                 <p
                   class="text-xs font-medium"
@@ -731,7 +710,7 @@ exports[`Sidenav Component > should match snapshot with primary action 1`] = `
             data-cy="labels"
           >
             <div
-              class="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]"
+              class="flex flex-row px-2.5 py-2 w-full items-center justify-between h-9"
             >
               <div
                 class="flex flex-row gap-3 items-center text-gray-80"
@@ -747,9 +726,6 @@ exports[`Sidenav Component > should match snapshot with primary action 1`] = `
                   Labels
                 </p>
               </div>
-              <div
-                class="flex rounded-full px-2 py-1 transition-all duration-300 bg-gray-10 text-gray-60 opacity-0 invisible delay-300"
-              />
             </div>
           </button>
         </div>
@@ -812,7 +788,7 @@ exports[`Sidenav Component > should match snapshot with storage 1`] = `
             data-cy="inbox"
           >
             <div
-              class="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]"
+              class="flex flex-row px-2.5 py-2 w-full items-center justify-between h-9"
             >
               <div
                 class="flex flex-row gap-3 items-center text-gray-80"
@@ -829,7 +805,7 @@ exports[`Sidenav Component > should match snapshot with storage 1`] = `
                 </p>
               </div>
               <div
-                class="flex rounded-full px-2 py-1 transition-all duration-300 bg-gray-10 text-gray-60 opacity-100 delay-0"
+                class="flex rounded-full px-2 py-1 bg-gray-10 text-gray-60 opacity-100 delay-0"
               >
                 <p
                   class="text-xs font-medium"
@@ -844,7 +820,7 @@ exports[`Sidenav Component > should match snapshot with storage 1`] = `
             data-cy="sent"
           >
             <div
-              class="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]"
+              class="flex flex-row px-2.5 py-2 w-full items-center justify-between h-9"
             >
               <div
                 class="flex flex-row gap-3 items-center text-gray-80"
@@ -860,9 +836,6 @@ exports[`Sidenav Component > should match snapshot with storage 1`] = `
                   Sent
                 </p>
               </div>
-              <div
-                class="flex rounded-full px-2 py-1 transition-all duration-300 bg-gray-10 text-gray-60 opacity-0 invisible delay-300"
-              />
             </div>
           </button>
           <button
@@ -870,7 +843,7 @@ exports[`Sidenav Component > should match snapshot with storage 1`] = `
             data-cy="drafts"
           >
             <div
-              class="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]"
+              class="flex flex-row px-2.5 py-2 w-full items-center justify-between h-9"
             >
               <div
                 class="flex flex-row gap-3 items-center text-gray-80"
@@ -887,7 +860,7 @@ exports[`Sidenav Component > should match snapshot with storage 1`] = `
                 </p>
               </div>
               <div
-                class="flex rounded-full px-2 py-1 transition-all duration-300 bg-gray-10 text-gray-60 opacity-100 delay-0"
+                class="flex rounded-full px-2 py-1 bg-gray-10 text-gray-60 opacity-100 delay-0"
               >
                 <p
                   class="text-xs font-medium"
@@ -902,7 +875,7 @@ exports[`Sidenav Component > should match snapshot with storage 1`] = `
             data-cy="labels"
           >
             <div
-              class="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]"
+              class="flex flex-row px-2.5 py-2 w-full items-center justify-between h-9"
             >
               <div
                 class="flex flex-row gap-3 items-center text-gray-80"
@@ -918,9 +891,6 @@ exports[`Sidenav Component > should match snapshot with storage 1`] = `
                   Labels
                 </p>
               </div>
-              <div
-                class="flex rounded-full px-2 py-1 transition-all duration-300 bg-gray-10 text-gray-60 opacity-0 invisible delay-300"
-              />
             </div>
           </button>
         </div>