diff --git a/web/src/features/mailbox/components/mail-list.tsx b/web/src/features/mailbox/components/mail-list.tsx
index a0eebb9..b313a5f 100644
--- a/web/src/features/mailbox/components/mail-list.tsx
+++ b/web/src/features/mailbox/components/mail-list.tsx
@@ -69,6 +69,7 @@ export function MailList({
     }
 
     return (
+
         <div className="grid grid-cols-1 gap-1.5 p-1 sm:p-2">
             {items.map((item) => {
                 const isUnread = item.labels && item.labels.length > 0
diff --git a/web/src/features/mailbox/components/mail.tsx b/web/src/features/mailbox/components/mail.tsx
index 3d996d9..bbe9c96 100644
--- a/web/src/features/mailbox/components/mail.tsx
+++ b/web/src/features/mailbox/components/mail.tsx
@@ -539,27 +539,29 @@ export function Mail({
                             </div>
                             <Separator />
                             <div className="mt-2">
-                                <MailList
-                                    isLoading={isMessagesLoading}
-                                    items={(envelopes?.items ?? []).sort((a, b) => {
-                                        const dateA = a.internal_date;
-                                        const dateB = b.internal_date;
+                                <ScrollArea className='h-[40rem] w-full pr-4 -mr-4 py-1'>
+                                    <MailList
+                                        isLoading={isMessagesLoading}
+                                        items={(envelopes?.items ?? []).sort((a, b) => {
+                                            const dateA = a.internal_date;
+                                            const dateB = b.internal_date;
 
-                                        if (dateA === undefined && dateB === undefined) return 0;
-                                        if (dateA === undefined) return -1;
-                                        if (dateB === undefined) return 1;
-                                        return dateB - dateA;
-                                    })}
-                                    setOpen={setOpen}
-                                    setDeleteIds={setDeleteIds}
-                                    currentEnvelope={selectedEvelope}
-                                    setSelectedIds={setSelectedIds}
-                                    selectedIds={selectedIds}
-                                    onEnvelopeChanged={(envelope) => {
-                                        setOpen('display');
-                                        setSelectedEvelope(envelope);
-                                    }}
-                                />
+                                            if (dateA === undefined && dateB === undefined) return 0;
+                                            if (dateA === undefined) return -1;
+                                            if (dateB === undefined) return 1;
+                                            return dateB - dateA;
+                                        })}
+                                        setOpen={setOpen}
+                                        setDeleteIds={setDeleteIds}
+                                        currentEnvelope={selectedEvelope}
+                                        setSelectedIds={setSelectedIds}
+                                        selectedIds={selectedIds}
+                                        onEnvelopeChanged={(envelope) => {
+                                            setOpen('display');
+                                            setSelectedEvelope(envelope);
+                                        }}
+                                    />
+                                </ScrollArea>
                                 {selectedMailbox && <div className="flex justify-center mt-4">
                                     <EnvelopeListPagination
                                         totalItems={envelopes?.total_items ?? 0}