diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx
index 36152f31..75beecb4 100644
--- a/app/courrier/page.tsx
+++ b/app/courrier/page.tsx
@@ -1021,33 +1021,7 @@ export default function CourrierPage() {
 
             {/* Scrollable content area */}
             <ScrollArea className="flex-1 p-6">
-              <div className="flex items-center gap-4 mb-6">
-                <Avatar className="h-10 w-10">
-                  <AvatarFallback>
-                    {selectedEmail.fromName?.charAt(0) || selectedEmail.from.charAt(0)}
-                  </AvatarFallback>
-                </Avatar>
-                <div className="flex-1">
-                  <p className="font-medium text-gray-900">
-                    {selectedEmail.fromName} <span className="text-gray-500">&lt;{selectedEmail.from}&gt;</span>
-                  </p>
-                  <p className="text-sm text-gray-500">
-                    to {selectedEmail.to}
-                  </p>
-                  {selectedEmail.cc && (
-                    <p className="text-sm text-gray-500">
-                      cc {selectedEmail.cc}
-                    </p>
-                  )}
-                </div>
-                <div className="text-sm text-gray-500 whitespace-nowrap">
-                  {formatDate(new Date(selectedEmail.date))}
-                </div>
-              </div>
-
-              <div className="prose max-w-none">
-                {renderEmailContent(selectedEmail)}
-              </div>
+              {renderEmailPreview(selectedEmail)}
             </ScrollArea>
           </>
         ) : (
@@ -1392,11 +1366,51 @@ export default function CourrierPage() {
   const renderEmailPreview = (email: Email) => {
     if (!email) return null;
     return (
-      <div className="p-4">
-        <h2 className="text-lg font-semibold mb-2">{email.subject}</h2>
-        <div className="text-sm text-gray-600">
+      <div className="flex-1 flex flex-col">
+        {/* Email header section */}
+        <div className="flex items-center gap-4 mb-6">
+          <Avatar className="h-10 w-10">
+            <AvatarFallback>
+              {email.fromName?.charAt(0) || email.from.charAt(0)}
+            </AvatarFallback>
+          </Avatar>
+          <div className="flex-1">
+            <p className="font-medium text-gray-900">
+              {email.fromName || email.from} <span className="text-gray-500">&lt;{email.from}&gt;</span>
+            </p>
+            <p className="text-sm text-gray-500">
+              to {email.to}
+            </p>
+            {email.cc && (
+              <p className="text-sm text-gray-500">
+                cc {email.cc}
+              </p>
+            )}
+          </div>
+          <div className="text-sm text-gray-500 whitespace-nowrap">
+            {formatDate(new Date(email.date))}
+          </div>
+        </div>
+
+        {/* Email content section */}
+        <div className="prose max-w-none">
           {renderEmailContent(email)}
         </div>
+
+        {/* Attachments section */}
+        {email.attachments && email.attachments.length > 0 && (
+          <div className="mt-6 border-t border-gray-200 pt-6">
+            <h3 className="text-sm font-medium text-gray-900 mb-2">Attachments</h3>
+            <div className="space-y-2">
+              {email.attachments.map((attachment, index) => (
+                <div key={index} className="flex items-center gap-2 p-2 bg-gray-50 rounded">
+                  <Paperclip className="h-4 w-4 text-gray-400" />
+                  <span className="text-sm text-gray-600">{attachment.name}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
       </div>
     );
   };