diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index 9fa26389..92847375 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -95,14 +95,13 @@ export default function ComposeEmail({
             return;
           }
 
-          // Create initial content immediately
-          const initialContent = `
-            <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; color: #000000;">
+          // Set initial loading state
+          composeBodyRef.current.innerHTML = `
+            <div class="compose-area" contenteditable="true">
               <br/>
-              <div id="reply-placeholder">Loading original message...</div>
+              <div class="text-gray-500">Loading original message...</div>
             </div>
           `;
-          composeBodyRef.current.innerHTML = initialContent;
 
           // Parse the original email using the API
           const response = await fetch('/api/parse-email', {
@@ -118,6 +117,8 @@ export default function ComposeEmail({
             throw new Error(data.error || 'Failed to parse email');
           }
 
+          const emailContent = data.html || data.text || '';
+          
           // Format the reply/forward content
           const quotedContent = forwardFrom ? `
             <div style="border-top: 1px solid #e5e7eb; padding-top: 20px; margin-top: 20px; color: #6b7280; font-size: 0.875rem;">
@@ -127,35 +128,41 @@ export default function ComposeEmail({
               Subject: ${emailToProcess.subject}<br/>
               To: ${emailToProcess.to}<br/>
               ${emailToProcess.cc ? `Cc: ${emailToProcess.cc}<br/>` : ''}
-              <br/>
-              ${data.html || data.text || 'No content available'}
+            </div>
+            <div style="margin-top: 10px; color: #374151;">
+              ${emailContent}
             </div>
           ` : `
             <div style="border-top: 1px solid #e5e7eb; padding-top: 20px; margin-top: 20px; color: #6b7280; font-size: 0.875rem;">
               On ${new Date(emailToProcess.date).toLocaleString()}, ${emailToProcess.from} wrote:
             </div>
-            <blockquote style="margin: 0; padding-left: 1em; border-left: 2px solid #e5e7eb; color: #6b7280;">
-              ${data.html || data.text || 'No content available'}
+            <blockquote style="margin: 10px 0 0 10px; padding-left: 1em; border-left: 2px solid #e5e7eb; color: #374151;">
+              ${emailContent}
             </blockquote>
           `;
 
-          // Set the content in the compose area
+          // Set the content in the compose area with proper structure
+          const formattedContent = `
+            <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px;">
+              <div style="min-height: 20px;"><br/></div>
+              ${quotedContent}
+            </div>
+          `;
+
           if (composeBodyRef.current) {
-            const formattedContent = `
-              <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; color: #000000;">
-                <br/>
-                ${quotedContent}
-              </div>
-            `;
             composeBodyRef.current.innerHTML = formattedContent;
 
-            // Place cursor at the beginning
+            // Place cursor at the beginning before the quoted content
             const selection = window.getSelection();
             const range = document.createRange();
-            range.setStart(composeBodyRef.current.firstChild || composeBodyRef.current, 0);
-            range.collapse(true);
-            selection?.removeAllRanges();
-            selection?.addRange(range);
+            const firstDiv = composeBodyRef.current.querySelector('div[style*="min-height: 20px;"]');
+            if (firstDiv) {
+              range.setStart(firstDiv, 0);
+              range.collapse(true);
+              selection?.removeAllRanges();
+              selection?.addRange(range);
+              (firstDiv as HTMLElement).focus();
+            }
 
             // Update compose state
             setComposeBody(formattedContent);
@@ -165,7 +172,7 @@ export default function ComposeEmail({
           console.error('Error initializing compose content:', error);
           if (composeBodyRef.current) {
             const errorContent = `
-              <div class="compose-area" contenteditable="true" style="min-height: 100px; padding: 10px; color: #000000;">
+              <div class="compose-area" contenteditable="true">
                 <br/>
                 <div style="color: #ef4444;">Error loading original message.</div>
               </div>
@@ -184,10 +191,7 @@ export default function ComposeEmail({
   const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
     if (!composeBodyRef.current) return;
     
-    const composeArea = composeBodyRef.current.querySelector('.compose-area');
-    if (!composeArea) return;
-    
-    const content = composeArea.innerHTML;
+    const content = composeBodyRef.current.innerHTML;
     if (!content.trim()) {
       setLocalContent('');
       setComposeBody('');