diff --git a/components/email/ComposeEmail.tsx b/components/email/ComposeEmail.tsx
index 74649f6d..6e727edb 100644
--- a/components/email/ComposeEmail.tsx
+++ b/components/email/ComposeEmail.tsx
@@ -6,8 +6,10 @@ import {
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
 import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
 import DOMPurify from 'isomorphic-dompurify';
+import { Label } from '@/components/ui/label';
 
 // Import ONLY from the centralized formatter
 import { 
@@ -186,12 +188,13 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
           setEmailContent(content);
         }
         
-        // Create a local variable to avoid type comparison issues
-        const isNewEmail = type === 'new';
-        
+        // For type safety
+        const isReplyType = (t: 'new' | 'reply' | 'reply-all' | 'forward'): t is 'reply' | 'reply-all' | 'forward' => 
+          t === 'reply' || t === 'reply-all' || t === 'forward';
+          
         // Focus editor after initializing content
         setTimeout(() => {
-          if (!isNewEmail && editorRef.current) {
+          if (isReplyType(type) && editorRef.current) {
             // For replies/forwards, focus contentEditable
             editorRef.current.focus();
             
@@ -555,83 +558,223 @@ function LegacyAdapter({
   replyTo,
   forwardFrom
 }: LegacyComposeEmailProps) {
-  // If not showing compose, return null
-  if (!showCompose) {
-    return null;
-  }
+  // Create a ref for the contentEditable div
+  const composeBodyRef = useRef<HTMLDivElement>(null);
   
-  // Determine email type
-  const determineType = (): 'new' | 'reply' | 'reply-all' | 'forward' => {
-    if (originalEmail) {
-      return originalEmail.type;
+  // Set the content of the contentEditable div on mount
+  useEffect(() => {
+    if (composeBodyRef.current && composeBody) {
+      composeBodyRef.current.innerHTML = composeBody;
     }
-    
-    if (composeSubject.startsWith('Re:')) {
-      return 'reply';
-    }
-    
-    if (composeSubject.startsWith('Fwd:')) {
-      return 'forward';
-    }
-    
-    return 'new';
+  }, [composeBody, showCompose]);
+  
+  // Handle clicking the content editable area
+  const handleComposeAreaClick = () => {
+    composeBodyRef.current?.focus();
   };
   
-  // Create email message object if needed for replies/forwards
-  const emailForCompose = (() => {
-    const type = determineType();
-    
-    // Only create an email object if we're replying or forwarding
-    if (type === 'new' || !composeBody) {
-      return null;
+  // Handle input events on the contentEditable div
+  const handleInput = () => {
+    if (composeBodyRef.current) {
+      setComposeBody(composeBodyRef.current.innerHTML);
     }
+  };
+  
+  // Handle file attachment
+  const handleFileAttachment = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files || e.target.files.length === 0) return;
     
-    return {
-      id: 'temp-id',
-      messageId: '',
+    // Here you would normally process the files and add them to attachments
+    console.log('Files selected:', e.target.files);
+    
+    // Just a placeholder - in a real implementation you'd convert files to the format needed
+    const newAttachments = Array.from(e.target.files).map(file => ({
+      name: file.name,
+      type: file.type,
+      size: file.size,
+      // In a real implementation you'd use FileReader to read the file content
+    }));
+    
+    // Add to existing attachments
+    setAttachments([...attachments, ...newAttachments]);
+  };
+  
+  // Handle send email action
+  const handleSendEmail = async () => {
+    // Call the provided onSend handler with the email data
+    await onSend({
+      to: composeTo,
+      cc: composeCc,
+      bcc: composeBcc,
       subject: composeSubject,
-      from: [{ name: '', address: '' }],
-      to: [{ name: '', address: '' }],
-      date: new Date(),
-      content: composeBody,
-      html: composeBody,
-      hasAttachments: false
-    };
-  })();
+      body: composeBody,
+      attachments
+    });
+  };
+  
+  if (!showCompose) return null;
   
   return (
     <div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
-      <div className="w-full max-w-2xl max-h-[90vh] bg-white rounded-xl shadow-xl overflow-auto mx-4">
-        <ComposeEmail
-          initialEmail={emailForCompose}
-          type={determineType()}
-          onClose={() => {
-            onCancel?.();
-            setShowCompose(false);
-          }}
-          onSend={async (emailData: {
-            to: string;
-            cc?: string;
-            bcc?: string;
-            subject: string;
-            body: string;
-            attachments?: Array<{
-              name: string;
-              content: string;
-              type: string;
-            }>;
-          }) => {
-            // Update legacy state before sending
-            setComposeTo(emailData.to);
-            if (emailData.cc) setComposeCc(emailData.cc);
-            if (emailData.bcc) setComposeBcc(emailData.bcc);
-            setComposeSubject(emailData.subject);
-            setComposeBody(emailData.body);
-            
-            // Call the legacy onSend function
-            await onSend(emailData);
-          }}
-        />
+      <div className="w-full max-w-2xl h-[90vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
+        {/* Modal Header */}
+        <div className="flex-none flex items-center justify-between px-6 py-3 border-b border-gray-200">
+          <h3 className="text-lg font-semibold text-gray-900">
+            {replyTo ? 'Reply' : forwardFrom ? 'Forward' : 'New Message'}
+          </h3>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="hover:bg-gray-100 rounded-full"
+            onClick={onCancel}
+          >
+            <X className="h-5 w-5 text-gray-500" />
+          </Button>
+        </div>
+
+        {/* Modal Body */}
+        <div className="flex-1 overflow-hidden">
+          <div className="h-full flex flex-col p-6 space-y-4 overflow-y-auto">
+            {/* To Field */}
+            <div className="flex-none">
+              <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
+              <Input
+                id="to"
+                value={composeTo}
+                onChange={(e) => setComposeTo(e.target.value)}
+                placeholder="recipient@example.com"
+                className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+              />
+            </div>
+
+            {/* CC/BCC Toggle Buttons */}
+            <div className="flex-none flex items-center gap-4">
+              <button
+                type="button"
+                className="text-blue-600 hover:text-blue-700 text-sm font-medium"
+                onClick={() => setShowCc(!showCc)}
+              >
+                {showCc ? 'Hide Cc' : 'Add Cc'}
+              </button>
+              <button
+                type="button"
+                className="text-blue-600 hover:text-blue-700 text-sm font-medium"
+                onClick={() => setShowBcc(!showBcc)}
+              >
+                {showBcc ? 'Hide Bcc' : 'Add Bcc'}
+              </button>
+            </div>
+
+            {/* CC Field */}
+            {showCc && (
+              <div className="flex-none">
+                <Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
+                <Input
+                  id="cc"
+                  value={composeCc}
+                  onChange={(e) => setComposeCc(e.target.value)}
+                  placeholder="cc@example.com"
+                  className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                />
+              </div>
+            )}
+
+            {/* BCC Field */}
+            {showBcc && (
+              <div className="flex-none">
+                <Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
+                <Input
+                  id="bcc"
+                  value={composeBcc}
+                  onChange={(e) => setComposeBcc(e.target.value)}
+                  placeholder="bcc@example.com"
+                  className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                />
+              </div>
+            )}
+
+            {/* Subject Field */}
+            <div className="flex-none">
+              <Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
+              <Input
+                id="subject"
+                value={composeSubject}
+                onChange={(e) => setComposeSubject(e.target.value)}
+                placeholder="Enter subject"
+                className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+              />
+            </div>
+
+            {/* Message Body */}
+            <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
+                ref={composeBodyRef}
+                contentEditable="true"
+                onInput={handleInput}
+                onClick={handleComposeAreaClick}
+                className="flex-1 w-full bg-white border border-gray-300 rounded-md p-4 text-black overflow-y-auto focus:outline-none focus:ring-1 focus:ring-blue-500"
+                style={{ 
+                  direction: 'ltr',
+                  maxHeight: 'calc(100vh - 400px)',
+                  minHeight: '200px',
+                  overflowY: 'auto',
+                  scrollbarWidth: 'thin',
+                  scrollbarColor: '#cbd5e0 #f3f4f6',
+                  cursor: 'text'
+                }}
+                dir="ltr"
+                spellCheck="true"
+                role="textbox"
+                aria-multiline="true"
+                tabIndex={0}
+                suppressContentEditableWarning={true}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Modal Footer */}
+        <div className="flex-none flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
+          <div className="flex items-center gap-2">
+            {/* File Input for Attachments */}
+            <input
+              type="file"
+              id="file-attachment"
+              className="hidden"
+              multiple
+              onChange={handleFileAttachment}
+            />
+            <label htmlFor="file-attachment">
+              <Button 
+                variant="outline" 
+                size="icon"
+                className="rounded-full bg-white hover:bg-gray-100 border-gray-300"
+                onClick={(e) => {
+                  e.preventDefault();
+                  document.getElementById('file-attachment')?.click();
+                }}
+              >
+                <Paperclip className="h-4 w-4 text-gray-600" />
+              </Button>
+            </label>
+          </div>
+          <div className="flex items-center gap-3">
+            <Button 
+              variant="ghost"
+              className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
+              onClick={onCancel}
+            >
+              Cancel
+            </Button>
+            <Button
+              className="bg-blue-600 text-white hover:bg-blue-700"
+              onClick={handleSendEmail}
+            >
+              Send
+            </Button>
+          </div>
+        </div>
       </div>
     </div>
   );