diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index a2eb300d..9ba66c25 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -83,26 +83,39 @@ export default function ComposeEmail({
   
   useEffect(() => {
     if (composeBodyRef.current && !isInitialized) {
-      // Initialize the content structure with both new reply area and original content in a single contentEditable div
-      const content = replyTo || forwardFrom ? `
-        <div class="compose-area" contenteditable="true">${initialBody || ''}</div>
-        <div class="quoted-content" contenteditable="false">
-          ${forwardFrom ? `
-            ---------- Forwarded message ---------<br/>
-            From: ${forwardFrom.from}<br/>
-            Date: ${new Date(forwardFrom.date).toLocaleString()}<br/>
-            Subject: ${forwardFrom.subject}<br/>
-            To: ${forwardFrom.to}<br/>
-            ${forwardFrom.cc ? `Cc: ${forwardFrom.cc}<br/>` : ''}
-            <br/>
-          ` : `
-            On ${new Date(replyTo?.date || '').toLocaleString()}, ${replyTo?.from} wrote:<br/>
-          `}
-          <blockquote style="margin: 0 0 0 0.8ex; border-left: 1px solid rgb(204,204,204); padding-left: 1ex;">
-            ${composeBody}
-          </blockquote>
-        </div>
-      ` : `<div class="compose-area" contenteditable="true">${initialBody || ''}</div>`;
+      let content = '';
+      
+      if (replyTo || forwardFrom) {
+        // Get the original email content
+        const originalContent = replyTo?.body || forwardFrom?.body || '';
+        
+        // Create the reply/forward structure
+        content = `
+          <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;">
+            ${forwardFrom ? `
+              <div style="margin-bottom: 10px;">
+                ---------- Forwarded message ---------<br/>
+                From: ${forwardFrom.from}<br/>
+                Date: ${new Date(forwardFrom.date).toLocaleString()}<br/>
+                Subject: ${forwardFrom.subject}<br/>
+                To: ${forwardFrom.to}<br/>
+                ${forwardFrom.cc ? `Cc: ${forwardFrom.cc}<br/>` : ''}
+              </div>
+            ` : `
+              <div style="margin-bottom: 10px;">
+                On ${new Date(replyTo?.date || '').toLocaleString()}, ${replyTo?.from} wrote:
+              </div>
+            `}
+            <blockquote style="margin: 0; padding-left: 1em; border-left: 2px solid #e5e7eb;">
+              ${originalContent}
+            </blockquote>
+          </div>
+        `;
+      } else {
+        // For new messages
+        content = `<div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 4px;"></div>`;
+      }
 
       composeBodyRef.current.innerHTML = content;
       setIsInitialized(true);
@@ -119,7 +132,7 @@ export default function ComposeEmail({
         (composeArea as HTMLElement).focus();
       }
     }
-  }, [composeBody, replyTo, forwardFrom, isInitialized, initialBody]);
+  }, [composeBody, replyTo, forwardFrom, isInitialized]);
 
   // Modified input handler to work with the single contentEditable area
   const handleInput = (e: React.FormEvent<HTMLDivElement>) => {