diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx
index 86a24475..92492288 100644
--- a/app/courrier/page.tsx
+++ b/app/courrier/page.tsx
@@ -1179,9 +1179,25 @@ export default function CourrierPage() {
     
     // Create a clean structure with clear separation
     const formattedContent = `
-      <div id="new-reply-area" dir="ltr" style="margin-bottom: 20px; min-height: 40px;"></div>
-      <div id="original-email" dir="ltr" style="border-top: 1px solid #e0e0e0; padding-top: 10px; color: #555;">
-        ${originalContent}
+      <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 4px; margin-bottom: 20px;"></div>
+      <div class="quoted-content" contenteditable="false" style="color: #6b7280; font-size: 0.875rem;">
+        ${type === 'forward' ? `
+          <div style="margin-bottom: 10px;">
+            ---------- Forwarded message ---------<br/>
+            From: ${selectedEmail.from}<br/>
+            Date: ${new Date(selectedEmail.date).toLocaleString()}<br/>
+            Subject: ${selectedEmail.subject}<br/>
+            To: ${selectedEmail.to}<br/>
+            ${selectedEmail.cc ? `Cc: ${selectedEmail.cc}<br/>` : ''}
+          </div>
+        ` : `
+          <div style="margin-bottom: 10px;">
+            On ${new Date(selectedEmail.date).toLocaleString()}, ${selectedEmail.from} wrote:
+          </div>
+        `}
+        <blockquote style="margin: 0; padding-left: 1em; border-left: 2px solid #e5e7eb;">
+          ${originalContent}
+        </blockquote>
       </div>
     `;