diff --git a/components/email/ComposeEmail.tsx b/components/email/ComposeEmail.tsx
index 5af7cc38..9764feb8 100644
--- a/components/email/ComposeEmail.tsx
+++ b/components/email/ComposeEmail.tsx
@@ -359,132 +359,118 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
   }, []);
   
   return (
-    <div className="fixed inset-0 bg-gray-900/80 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" />
-          </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 className="flex flex-col h-full">
+      <ComposeEmailHeader 
+        type={type}
+        onClose={onClose}
+      />
+      <div className="flex-1 overflow-y-auto p-4">
+        <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>
 
         {/* Modal Footer */}