diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 27ba576..7c796c8 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -670,7 +670,7 @@ export default function MailPage() {
       {composeOpen && (
         <div className="fixed inset-0 bg-black/25 backdrop-blur-sm flex items-center justify-center p-4 z-50">
           <Card className="w-full max-w-2xl bg-white max-h-[90vh] flex flex-col">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3 border-b">
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 border-b">
               <CardTitle className="text-xl">New Message</CardTitle>
               <Button 
                 variant="ghost"
@@ -681,11 +681,11 @@ export default function MailPage() {
                 <X className="h-4 w-4" />
               </Button>
             </CardHeader>
-            <CardContent className="space-y-4 overflow-y-auto flex-1">
-              <div className="space-y-4 border-b border-gray-100 pb-4">
+            <CardContent className="space-y-3 overflow-y-auto flex-1 pt-2">
+              <div className="space-y-2 border-b border-gray-100 pb-3">
                 <div>
-                  <Label className="text-sm text-gray-700">From</Label>
-                  <select className="w-full mt-1 bg-white border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                  <Label className="text-sm text-gray-700 mb-0.5">From</Label>
+                  <select className="w-full bg-white border border-gray-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                     {accounts.map(account => (
                       <option key={account.id} value={account.id}>
                         {account.name} ({account.email})
@@ -694,14 +694,14 @@ export default function MailPage() {
                   </select>
                 </div>
                 <div>
-                  <div className="flex items-center justify-between">
+                  <div className="flex items-center justify-between mb-0.5">
                     <Label className="text-sm text-gray-700">To</Label>
                     <div className="flex items-center gap-2">
                       {!showCc && (
                         <Button
                           variant="ghost"
                           size="sm"
-                          className="text-xs text-gray-500 hover:text-gray-700"
+                          className="h-6 text-xs text-gray-500 hover:text-gray-700"
                           onClick={() => setShowCc(true)}
                         >
                           Add Cc
@@ -711,7 +711,7 @@ export default function MailPage() {
                         <Button
                           variant="ghost"
                           size="sm"
-                          className="text-xs text-gray-500 hover:text-gray-700"
+                          className="h-6 text-xs text-gray-500 hover:text-gray-700"
                           onClick={() => setShowBcc(true)}
                         >
                           Add Bcc
@@ -722,17 +722,17 @@ export default function MailPage() {
                   <Input 
                     type="email" 
                     placeholder="email@example.com" 
-                    className="mt-1 bg-white border-gray-200"
+                    className="bg-white border-gray-200 py-1.5"
                   />
                 </div>
                 {showCc && (
                   <div>
-                    <div className="flex items-center justify-between">
+                    <div className="flex items-center justify-between mb-0.5">
                       <Label className="text-sm text-gray-700">Cc</Label>
                       <Button
                         variant="ghost"
                         size="sm"
-                        className="text-xs text-gray-500 hover:text-gray-700"
+                        className="h-6 text-xs text-gray-500 hover:text-gray-700"
                         onClick={() => setShowCc(false)}
                       >
                         Remove
@@ -741,18 +741,18 @@ export default function MailPage() {
                     <Input 
                       type="email" 
                       placeholder="cc@example.com" 
-                      className="mt-1 bg-white border-gray-200"
+                      className="bg-white border-gray-200 py-1.5"
                     />
                   </div>
                 )}
                 {showBcc && (
                   <div>
-                    <div className="flex items-center justify-between">
+                    <div className="flex items-center justify-between mb-0.5">
                       <Label className="text-sm text-gray-700">Bcc</Label>
                       <Button
                         variant="ghost"
                         size="sm"
-                        className="text-xs text-gray-500 hover:text-gray-700"
+                        className="h-6 text-xs text-gray-500 hover:text-gray-700"
                         onClick={() => setShowBcc(false)}
                       >
                         Remove
@@ -761,30 +761,30 @@ export default function MailPage() {
                     <Input 
                       type="email" 
                       placeholder="bcc@example.com" 
-                      className="mt-1 bg-white border-gray-200"
+                      className="bg-white border-gray-200 py-1.5"
                     />
                   </div>
                 )}
                 <div>
-                  <Label className="text-sm text-gray-700">Subject</Label>
+                  <Label className="text-sm text-gray-700 mb-0.5">Subject</Label>
                   <Input 
                     type="text" 
                     placeholder="Subject" 
-                    className="mt-1 bg-white border-gray-200"
+                    className="bg-white border-gray-200 py-1.5"
                   />
                 </div>
               </div>
 
-              <div>
-                <Label className="text-sm text-gray-700">Message</Label>
+              <div className="flex-1">
+                <Label className="text-sm text-gray-700 mb-0.5">Message</Label>
                 <Textarea 
-                  className="mt-1 h-48 bg-white border-gray-200 resize-none"
+                  className="mt-0.5 h-[calc(100%-1.5rem)] min-h-[200px] bg-white border-gray-200 resize-none"
                   placeholder="Write your message here..."
                 />
               </div>
 
               {/* File Attachment Section */}
-              <div className="border-t border-gray-100 pt-4">
+              <div className="border-t border-gray-100 pt-3">
                 <div className="flex items-center gap-4">
                   <Button
                     variant="ghost"
@@ -809,7 +809,7 @@ export default function MailPage() {
                 />
               </div>
 
-              <div className="flex justify-end gap-3 pt-4 border-t border-gray-100">
+              <div className="flex justify-end gap-3 pt-3 border-t border-gray-100">
                 <Button 
                   variant="ghost"
                   className="border border-gray-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700"