diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx
index c0efc0be..5f25efce 100644
--- a/app/courrier/page.tsx
+++ b/app/courrier/page.tsx
@@ -1671,6 +1671,8 @@ export default function CourrierPage() {
         attachments={attachments}
         setAttachments={setAttachments}
         handleSend={handleSend}
+        replyTo={selectedEmail || undefined}
+        forwardFrom={selectedEmail || undefined}
         onSend={(email) => {
           // Handle the sent email
           console.log('Email sent:', email);
diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index 28d74f50..cd019c19 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -41,8 +41,8 @@ interface ComposeEmailProps {
   initialBody?: string;
   initialCc?: string;
   initialBcc?: string;
-  replyTo?: Email;
-  forwardFrom?: Email;
+  replyTo?: Email | null;
+  forwardFrom?: Email | null;
 }
 
 export default function ComposeEmail({
@@ -83,13 +83,14 @@ export default function ComposeEmail({
   useEffect(() => {
     if (composeBodyRef.current) {
       // Initialize the content structure
-      const originalContent = originalEmail?.content || '';
-      composeBodyRef.current.innerHTML = `
+      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;">
-          ${originalContent}
+          ${composeBody}
         </div>
-      `;
+      ` : composeBody;
+
+      composeBodyRef.current.innerHTML = originalContent;
       
       // Place cursor at the beginning of new reply area
       const newReplyArea = composeBodyRef.current.querySelector('#new-reply-area');
@@ -102,8 +103,8 @@ export default function ComposeEmail({
         sel?.addRange(range);
       }
     }
-  }, [originalEmail]);  // Run when originalEmail changes
-  
+  }, [composeBody, replyTo, forwardFrom]);
+
   // Modified input handler to prevent nested structures
   const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
     if (!composeBodyRef.current) return;
@@ -188,23 +189,13 @@ export default function ComposeEmail({
         {/* Modal Header */}
         <div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
           <h3 className="text-lg font-semibold text-gray-900">
-            {composeSubject.startsWith('Re:') ? 'Reply' : 
-             composeSubject.startsWith('Fwd:') ? 'Forward' : 'New Message'}
+            {replyTo ? 'Reply' : forwardFrom ? 'Forward' : 'New Message'}
           </h3>
           <Button
             variant="ghost"
             size="icon"
             className="hover:bg-gray-100 rounded-full"
-            onClick={() => {
-              setShowCompose(false);
-              setComposeTo('');
-              setComposeCc('');
-              setComposeBcc('');
-              setComposeSubject('');
-              setComposeBody('');
-              setShowCc(false);
-              setShowBcc(false);
-            }}
+            onClick={onCancel}
           >
             <X className="h-5 w-5 text-gray-500" />
           </Button>
@@ -284,16 +275,16 @@ export default function ComposeEmail({
             </div>
 
             {/* Original Email Content Preview */}
-            {originalEmail && (
+            {(replyTo || forwardFrom) && (
               <div className="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">
-                    {originalEmail.type === 'forward' ? 'Forwarded Message' : 'Original Message'}
+                    {forwardFrom ? 'Forwarded Message' : 'Original Message'}
                   </h4>
                 </div>
                 <div 
                   className="prose max-w-none text-sm text-gray-600"
-                  dangerouslySetInnerHTML={{ __html: originalEmail.content }}
+                  dangerouslySetInnerHTML={{ __html: composeBody }}
                 />
               </div>
             )}
@@ -346,7 +337,7 @@ export default function ComposeEmail({
             <Button 
               variant="ghost"
               className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
-              onClick={() => setShowCompose(false)}
+              onClick={onCancel}
             >
               Cancel
             </Button>