diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 8bb6bf1..81d302c 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -1076,18 +1076,20 @@ export default function MailPage() {
         </div>
       </div>
 
-      {/* Compose Email Modal */}
+      {/* Compose Email Modal - Updated Design */}
       {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">
-            <div className="flex items-center justify-between p-4 border-b border-gray-200">
+        <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-3xl bg-white rounded-xl shadow-xl flex flex-col mx-4 overflow-hidden">
+            {/* Modal Header */}
+            <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100 bg-white">
               <h3 className="text-lg font-semibold text-gray-900">New Message</h3>
               <Button
                 variant="ghost"
                 size="icon"
+                className="hover:bg-gray-100 rounded-full"
                 onClick={() => {
                   setShowCompose(false);
-                  // Clear form data
+                  // Clear form
                   setComposeTo('');
                   setComposeCc('');
                   setComposeBcc('');
@@ -1097,105 +1099,122 @@ export default function MailPage() {
                   setShowBcc(false);
                 }}
               >
-                <X className="h-5 w-5" />
+                <X className="h-5 w-5 text-gray-500" />
               </Button>
             </div>
-            
-            <div className="flex-1 p-4 overflow-y-auto">
-              <div className="space-y-4">
-                <div>
-                  <Label htmlFor="to">To</Label>
+
+            {/* Modal Body */}
+            <div className="flex-1 p-6 overflow-y-auto bg-white/95">
+              <div className="space-y-5">
+                {/* To Field */}
+                <div className="space-y-2">
+                  <Label htmlFor="to" className="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 border-gray-200 focus:border-blue-500 focus:ring-blue-500 rounded-md"
                   />
                 </div>
-                
-                <div className="flex items-center gap-2">
+
+                {/* CC/BCC Toggle Buttons */}
+                <div className="flex items-center gap-3">
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="text-gray-500"
+                    className="text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-full px-3 py-1 text-sm"
                     onClick={() => setShowCc(!showCc)}
                   >
-                    {showCc ? 'Hide Cc' : 'Show Cc'}
+                    {showCc ? 'Hide Cc' : 'Add Cc'}
                   </Button>
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="text-gray-500"
+                    className="text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-full px-3 py-1 text-sm"
                     onClick={() => setShowBcc(!showBcc)}
                   >
-                    {showBcc ? 'Hide Bcc' : 'Show Bcc'}
+                    {showBcc ? 'Hide Bcc' : 'Add Bcc'}
                   </Button>
                 </div>
 
+                {/* CC Field */}
                 {showCc && (
-                  <div>
-                    <Label htmlFor="cc">Cc</Label>
+                  <div className="space-y-2">
+                    <Label htmlFor="cc" className="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 border-gray-200 focus:border-blue-500 focus:ring-blue-500 rounded-md"
                     />
                   </div>
                 )}
 
+                {/* BCC Field */}
                 {showBcc && (
-                  <div>
-                    <Label htmlFor="bcc">Bcc</Label>
+                  <div className="space-y-2">
+                    <Label htmlFor="bcc" className="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 border-gray-200 focus:border-blue-500 focus:ring-blue-500 rounded-md"
                     />
                   </div>
                 )}
 
-                <div>
-                  <Label htmlFor="subject">Subject</Label>
+                {/* Subject Field */}
+                <div className="space-y-2">
+                  <Label htmlFor="subject" className="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 border-gray-200 focus:border-blue-500 focus:ring-blue-500 rounded-md"
                   />
                 </div>
 
-                <div>
-                  <Label htmlFor="message">Message</Label>
+                {/* Message Body */}
+                <div className="space-y-2">
+                  <Label htmlFor="message" className="text-sm font-medium text-gray-700">Message</Label>
                   <Textarea
                     id="message"
                     value={composeBody}
                     onChange={(e) => setComposeBody(e.target.value)}
                     placeholder="Write your message..."
-                    className="min-h-[200px]"
+                    className="min-h-[300px] w-full border-gray-200 focus:border-blue-500 focus:ring-blue-500 rounded-md resize-none"
                   />
                 </div>
               </div>
             </div>
 
-            <div className="flex items-center justify-between p-4 border-t border-gray-200">
-              <div className="flex items-center gap-2">
-                <Button variant="outline" size="icon">
-                  <Paperclip className="h-4 w-4" />
-                </Button>
-              </div>
+            {/* Modal Footer */}
+            <div className="flex items-center justify-between px-6 py-4 border-t border-gray-100 bg-gray-50">
               <div className="flex items-center gap-2">
                 <Button 
                   variant="outline" 
+                  size="icon"
+                  className="rounded-full hover:bg-gray-100 border-gray-200"
+                >
+                  <Paperclip className="h-4 w-4 text-gray-600" />
+                </Button>
+              </div>
+              <div className="flex items-center gap-3">
+                <Button 
+                  variant="ghost"
+                  className="text-gray-600 hover:text-gray-700 hover:bg-gray-100 px-4"
                   onClick={() => setShowCompose(false)}
                 >
                   Cancel
                 </Button>
                 <Button
+                  className="bg-blue-600 text-white hover:bg-blue-700 px-4"
                   onClick={async () => {
                     try {
-                      // Implement your send email logic here
                       await fetch('/api/mail/send', {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },