diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 7c95146..6148c87 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -1051,8 +1051,13 @@ export default function MailPage() {
       {showCompose && (
         <div className="fixed inset-0 bg-black/50 z-50">
           <div className="absolute inset-4 sm:inset-6 md:inset-8 bg-white rounded-lg shadow-xl flex flex-col">
+            {/* Modal Header */}
             <div className="flex items-center justify-between p-4 border-b">
-              <h2 className="text-lg font-semibold">New Message</h2>
+              <h2 className="text-lg font-semibold">
+                {composeSubject.startsWith('Re:') ? 'Reply' : 
+                 composeSubject.startsWith('Fwd:') ? 'Forward' : 
+                 'New Message'}
+              </h2>
               <Button 
                 variant="ghost" 
                 size="icon" 
@@ -1069,74 +1074,114 @@ export default function MailPage() {
                 <X className="h-4 w-4" />
               </Button>
             </div>
-            
-            <div className="p-4 flex-1 overflow-auto space-y-4">
-              <div>
-                <Label htmlFor="to">To</Label>
-                <Input
-                  id="to"
-                  value={composeTo}
-                  onChange={(e) => setComposeTo(e.target.value)}
-                  placeholder="recipient@example.com"
-                />
-              </div>
-              
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setShowCc(!showCc)}
-                  className="text-gray-500"
-                >
-                  {showCc ? 'Hide' : 'Show'} CC/BCC
-                </Button>
-              </div>
-              
-              {showCc && (
-                <>
-                  <div>
-                    <Label htmlFor="cc">CC</Label>
-                    <Input
-                      id="cc"
-                      value={composeCc}
-                      onChange={(e) => setComposeCc(e.target.value)}
-                      placeholder="cc@example.com"
-                    />
+
+            {/* Modal Body */}
+            <div className="p-4 flex-1 overflow-y-auto">
+              <div className="space-y-4">
+                {/* Recipients */}
+                <div>
+                  <Label htmlFor="to">To</Label>
+                  <Input
+                    id="to"
+                    type="email"
+                    value={composeTo}
+                    onChange={(e) => setComposeTo(e.target.value)}
+                    placeholder="recipient@example.com"
+                  />
+                </div>
+
+                {/* CC/BCC Controls */}
+                <div className="flex items-center gap-2">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setShowCc(!showCc)}
+                    className="text-gray-500"
+                  >
+                    {showCc ? 'Hide' : 'Show'} CC/BCC
+                  </Button>
+                </div>
+
+                {showCc && (
+                  <>
+                    <div>
+                      <Label htmlFor="cc">CC</Label>
+                      <Input
+                        id="cc"
+                        type="email"
+                        value={composeCc}
+                        onChange={(e) => setComposeCc(e.target.value)}
+                        placeholder="cc@example.com"
+                      />
+                    </div>
+                    <div>
+                      <Label htmlFor="bcc">BCC</Label>
+                      <Input
+                        id="bcc"
+                        type="email"
+                        value={composeBcc}
+                        onChange={(e) => setComposeBcc(e.target.value)}
+                        placeholder="bcc@example.com"
+                      />
+                    </div>
+                  </>
+                )}
+
+                {/* Subject */}
+                <div>
+                  <Label htmlFor="subject">Subject</Label>
+                  <Input
+                    id="subject"
+                    value={composeSubject}
+                    onChange={(e) => setComposeSubject(e.target.value)}
+                    placeholder="Email subject"
+                  />
+                </div>
+
+                {/* Message Body */}
+                <div>
+                  <Label htmlFor="body">Message</Label>
+                  <Textarea
+                    id="body"
+                    value={composeBody}
+                    onChange={(e) => setComposeBody(e.target.value)}
+                    className="min-h-[300px] font-mono"
+                    placeholder="Write your message here..."
+                  />
+                </div>
+
+                {/* Attachments */}
+                <div>
+                  <Label>Attachments</Label>
+                  <div className="mt-2 flex items-center gap-2">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      className="flex items-center gap-2"
+                      onClick={() => {
+                        const input = document.createElement('input');
+                        input.type = 'file';
+                        input.multiple = true;
+                        input.click();
+                        input.onchange = (e) => {
+                          const files = (e.target as HTMLInputElement).files;
+                          if (files) {
+                            // Handle file attachments
+                            console.log('Files selected:', files);
+                          }
+                        };
+                      }}
+                    >
+                      <Paperclip className="h-4 w-4" />
+                      Attach Files
+                    </Button>
                   </div>
-                  <div>
-                    <Label htmlFor="bcc">BCC</Label>
-                    <Input
-                      id="bcc"
-                      value={composeBcc}
-                      onChange={(e) => setComposeBcc(e.target.value)}
-                      placeholder="bcc@example.com"
-                    />
-                  </div>
-                </>
-              )}
-              
-              <div>
-                <Label htmlFor="subject">Subject</Label>
-                <Input
-                  id="subject"
-                  value={composeSubject}
-                  onChange={(e) => setComposeSubject(e.target.value)}
-                  placeholder="Email subject"
-                />
-              </div>
-              
-              <div className="flex-1">
-                <Label htmlFor="body">Message</Label>
-                <Textarea
-                  id="body"
-                  value={composeBody}
-                  onChange={(e) => setComposeBody(e.target.value)}
-                  className="min-h-[200px]"
-                  placeholder="Write your message here..."
-                />
+                </div>
               </div>
             </div>
-            
+
+            {/* Modal Footer */}
             <div className="p-4 border-t flex justify-end gap-2">
               <Button 
                 variant="outline" 
@@ -1152,7 +1197,44 @@ export default function MailPage() {
               >
                 Cancel
               </Button>
-              <Button>Send</Button>
+              <Button
+                onClick={async () => {
+                  try {
+                    // Send email
+                    const response = await fetch('/api/mail/send', {
+                      method: 'POST',
+                      headers: {
+                        'Content-Type': 'application/json',
+                      },
+                      body: JSON.stringify({
+                        to: composeTo,
+                        cc: composeCc,
+                        bcc: composeBcc,
+                        subject: composeSubject,
+                        body: composeBody,
+                      }),
+                    });
+
+                    if (!response.ok) {
+                      throw new Error('Failed to send email');
+                    }
+
+                    // Clear form and close modal
+                    setShowCompose(false);
+                    setComposeTo('');
+                    setComposeSubject('');
+                    setComposeBody('');
+                    setShowCc(false);
+                    setComposeCc('');
+                    setComposeBcc('');
+                  } catch (error) {
+                    console.error('Error sending email:', error);
+                    // Show error message to user
+                  }
+                }}
+              >
+                Send
+              </Button>
             </div>
           </div>
         </div>