diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index 7eae1be5..840281d6 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -82,59 +82,42 @@ export default function ComposeEmail({
   
   useEffect(() => {
     if (composeBodyRef.current) {
-      // Initialize the content structure
-      const originalContent = replyTo || forwardFrom ? `
-        <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;">
+      // Initialize the content structure with both new reply area and original content in a single contentEditable div
+      const content = replyTo || forwardFrom ? `
+        <br/>
+        <br/>
+        ${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}
-        </div>
-      ` : composeBody;
+        </blockquote>
+      ` : '';
 
-      composeBodyRef.current.innerHTML = originalContent;
+      composeBodyRef.current.innerHTML = content;
       
-      // Place cursor at the beginning of new reply area
-      const newReplyArea = composeBodyRef.current.querySelector('#new-reply-area');
-      if (newReplyArea) {
-        const range = document.createRange();
-        const sel = window.getSelection();
-        range.setStart(newReplyArea, 0);
-        range.collapse(true);
-        sel?.removeAllRanges();
-        sel?.addRange(range);
-      }
+      // Place cursor at the beginning
+      const range = document.createRange();
+      const sel = window.getSelection();
+      range.setStart(composeBodyRef.current, 0);
+      range.collapse(true);
+      sel?.removeAllRanges();
+      sel?.addRange(range);
     }
   }, [composeBody, replyTo, forwardFrom]);
 
-  // Modified input handler to prevent nested structures
+  // Modified input handler to work with the single contentEditable area
   const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
     if (!composeBodyRef.current) return;
-
-    // Get the new reply content
-    const newReplyArea = composeBodyRef.current.querySelector('#new-reply-area');
-    const originalEmailArea = composeBodyRef.current.querySelector('#original-email');
-    
-    if (!newReplyArea || !originalEmailArea) return;
-
-    const newReplyContent = newReplyArea.innerHTML;
-    const originalContent = originalEmailArea.innerHTML;
-
-    // Update local state
-    setComposeBody(newReplyContent);
-
-    // Combine both contents while maintaining formatting
-    const formattedContent = `
-      <div id="new-reply-area" dir="ltr" style="margin-bottom: 20px; min-height: 40px;">
-        ${newReplyContent}
-      </div>
-      <div id="original-email" dir="ltr" style="border-top: 1px solid #e0e0e0; padding-top: 10px; color: #555;">
-        ${originalContent}
-      </div>
-    `;
-
-    // Update the compose form
-    if (onBodyChange) {
-      onBodyChange(formattedContent);
-    }
+    setComposeBody(composeBodyRef.current.innerHTML);
   };
 
   const handleFileAttachment = async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -274,22 +257,7 @@ export default function ComposeEmail({
               />
             </div>
 
-            {/* Original Email Content Preview - Move it above the message body */}
-            {(replyTo || forwardFrom) && (
-              <div className="flex-none border rounded-md p-4 bg-gray-50">
-                <div className="flex items-center justify-between mb-2">
-                  <h4 className="text-sm font-medium text-gray-700">
-                    {forwardFrom ? 'Forwarded Message' : 'Original Message'}
-                  </h4>
-                </div>
-                <div 
-                  className="prose max-w-none text-sm text-gray-600"
-                  dangerouslySetInnerHTML={{ __html: composeBody }}
-                />
-              </div>
-            )}
-
-            {/* Message Body */}
+            {/* Message Body - Single contentEditable area */}
             <div className="flex-1 min-h-[200px] flex flex-col">
               <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
               <div