diff --git a/components/email/ComposeEmail.tsx b/components/email/ComposeEmail.tsx
index 1c77745c..242ef1ca 100644
--- a/components/email/ComposeEmail.tsx
+++ b/components/email/ComposeEmail.tsx
@@ -360,192 +360,174 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
   }, []);
   
   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 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">
-            {type === 'reply' ? 'Reply' : type === 'forward' ? 'Forward' : type === 'reply-all' ? 'Reply All' : 'New Message'}
-          </h3>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="hover:bg-gray-100 rounded-full"
-            onClick={onClose}
-          >
-            <X className="h-5 w-5 text-gray-500" />
+    <div className="w-full h-full flex flex-col overflow-hidden">
+      <div className="border-b py-2 px-4">
+        <div className="flex justify-between items-center">
+          <h2 className="text-lg font-semibold">
+            {type === 'new' ? 'New Message' : 
+              type === 'reply' ? 'Reply' : 
+              type === 'reply-all' ? 'Reply All' : 
+              'Forward'}
+          </h2>
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <X className="h-4 w-4" />
           </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={to}
-                onChange={(e) => setTo(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={cc}
-                  onChange={(e) => setCc(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={bcc}
-                  onChange={(e) => setBcc(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={subject}
-                onChange={(e) => setSubject(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 overflow-hidden">
-              <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
-              <div className="flex-1 border border-gray-300 rounded-md overflow-hidden">
-                <RichEmailEditor
-                  initialContent={emailContent}
-                  onChange={setEmailContent}
-                  minHeight="200px"
-                  maxHeight="none"
-                  preserveFormatting={true}
-                />
-              </div>
-            </div>
-            
-            {/* Attachments */}
-            {attachments.length > 0 && (
-              <div className="border rounded-md p-3 mt-4">
-                <h3 className="text-sm font-medium mb-2 text-gray-700">Attachments</h3>
-                <div className="space-y-2">
-                  {attachments.map((file, index) => (
-                    <div key={index} className="flex items-center justify-between text-sm border rounded p-2">
-                      <span className="truncate max-w-[200px] text-gray-800">{file.name}</span>
-                      <Button 
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => handleAttachmentRemove(index)}
-                        className="h-6 w-6 p-0 text-gray-500 hover:text-gray-700"
-                      >
-                        <X className="h-4 w-4" />
-                      </Button>
-                    </div>
-                  ))}
-                </div>
-              </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={(e) => {
-                if (e.target.files && e.target.files.length > 0) {
-                  handleAttachmentAdd(e.target.files);
-                }
-              }}
+      </div>
+      
+      <div className="p-0 flex-1 flex flex-col overflow-hidden">
+        {/* Email header fields */}
+        <div className="p-3 border-b space-y-2">
+          <div className="flex items-center">
+            <span className="w-16 text-sm font-medium">To:</span>
+            <Input 
+              value={to} 
+              onChange={(e) => setTo(e.target.value)} 
+              className="flex-1 border-0 shadow-none h-8 focus-visible:ring-0"
+              placeholder="recipient@example.com"
             />
-            <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>
-            {sending && <span className="text-xs text-gray-500 ml-2">Preparing attachment...</span>}
           </div>
-          <div className="flex items-center gap-3">
-            <Button 
-              variant="ghost"
-              className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
-              onClick={onClose}
-              disabled={sending}
+          
+          {showCc && (
+            <div className="flex items-center">
+              <span className="w-16 text-sm font-medium">Cc:</span>
+              <Input 
+                value={cc} 
+                onChange={(e) => setCc(e.target.value)} 
+                className="flex-1 border-0 shadow-none h-8 focus-visible:ring-0"
+                placeholder="cc@example.com"
+              />
+            </div>
+          )}
+          
+          {showBcc && (
+            <div className="flex items-center">
+              <span className="w-16 text-sm font-medium">Bcc:</span>
+              <Input 
+                value={bcc} 
+                onChange={(e) => setBcc(e.target.value)} 
+                className="flex-1 border-0 shadow-none h-8 focus-visible:ring-0"
+                placeholder="bcc@example.com"
+              />
+            </div>
+          )}
+          
+          {/* CC/BCC controls */}
+          <div className="flex items-center text-xs">
+            <button 
+              className="text-primary hover:underline mr-3 flex items-center"
+              onClick={() => setShowCc(!showCc)}
             >
-              Cancel
-            </Button>
-            <Button
-              className="bg-blue-600 text-white hover:bg-blue-700"
-              onClick={handleSend}
-              disabled={sending}
-            >
-              {sending ? (
+              {showCc ? (
                 <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  Sending...
+                  <ChevronUp className="h-3 w-3 mr-0.5" />
+                  Hide Cc
                 </>
               ) : (
                 <>
-                  <SendHorizontal className="mr-2 h-4 w-4" />
-                  Send
+                  <ChevronDown className="h-3 w-3 mr-0.5" />
+                  Show Cc
                 </>
               )}
-            </Button>
+            </button>
+            
+            <button 
+              className="text-primary hover:underline flex items-center"
+              onClick={() => setShowBcc(!showBcc)}
+            >
+              {showBcc ? (
+                <>
+                  <ChevronUp className="h-3 w-3 mr-0.5" />
+                  Hide Bcc
+                </>
+              ) : (
+                <>
+                  <ChevronDown className="h-3 w-3 mr-0.5" />
+                  Show Bcc
+                </>
+              )}
+            </button>
+          </div>
+          
+          <div className="flex items-center">
+            <span className="w-16 text-sm font-medium">Subject:</span>
+            <Input 
+              value={subject} 
+              onChange={(e) => setSubject(e.target.value)} 
+              className="flex-1 border-0 shadow-none h-8 focus-visible:ring-0"
+              placeholder="Subject"
+            />
           </div>
         </div>
+        
+        {/* Email body editor */}
+        <div 
+          ref={editorRef}
+          className="flex-1 overflow-auto p-4 focus:outline-none email-content"
+          contentEditable={true}
+          onInput={handleEditorInput}
+          dangerouslySetInnerHTML={{ __html: body }}
+          style={{ minHeight: '200px' }}
+        />
+        
+        {/* Attachments list */}
+        {attachments.length > 0 && (
+          <div className="border-t p-2">
+            <div className="text-sm font-medium mb-1">Attachments:</div>
+            <div className="flex flex-wrap gap-2">
+              {attachments.map((attachment, index) => (
+                <div key={index} className="flex items-center gap-1 text-sm bg-muted px-2 py-1 rounded">
+                  <Paperclip className="h-3 w-3" />
+                  <span>{attachment.name}</span>
+                  <button 
+                    onClick={() => removeAttachment(index)}
+                    className="ml-1 text-muted-foreground hover:text-destructive"
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+      
+      <div className="border-t p-3 flex justify-between">
+        <div>
+          <input
+            type="file"
+            ref={attachmentInputRef}
+            className="hidden"
+            onChange={handleFileSelection}
+            multiple
+          />
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleAttachmentClick}
+          >
+            <Paperclip className="h-4 w-4 mr-1" />
+            Attach
+          </Button>
+        </div>
+        
+        <Button 
+          size="sm" 
+          onClick={handleSend}
+          disabled={sending}
+        >
+          {sending ? (
+            <>
+              <Loader2 className="h-4 w-4 mr-1 animate-spin" />
+              Sending...
+            </>
+          ) : (
+            <>
+              <SendHorizontal className="h-4 w-4 mr-1" />
+              Send
+            </>
+          )}
+        </Button>
       </div>
     </div>
   );