diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 2aef73c..27ba576 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -669,8 +669,8 @@ export default function MailPage() {
       {/* Compose email modal */}
       {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">
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
+          <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">
               <CardTitle className="text-xl">New Message</CardTitle>
               <Button 
                 variant="ghost"
@@ -681,7 +681,7 @@ export default function MailPage() {
                 <X className="h-4 w-4" />
               </Button>
             </CardHeader>
-            <CardContent className="space-y-4">
+            <CardContent className="space-y-4 overflow-y-auto flex-1">
               <div className="space-y-4 border-b border-gray-100 pb-4">
                 <div>
                   <Label className="text-sm text-gray-700">From</Label>
@@ -787,9 +787,9 @@ export default function MailPage() {
               <div className="border-t border-gray-100 pt-4">
                 <div className="flex items-center gap-4">
                   <Button
-                    variant="outline"
+                    variant="ghost"
                     size="sm"
-                    className="text-gray-600 border-gray-200 hover:text-gray-900 hover:bg-gray-50"
+                    className="border border-gray-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700"
                     onClick={() => document.getElementById('file-upload')?.click()}
                   >
                     <Paperclip className="h-4 w-4 mr-2" />
@@ -811,8 +811,8 @@ export default function MailPage() {
 
               <div className="flex justify-end gap-3 pt-4 border-t border-gray-100">
                 <Button 
-                  variant="outline"
-                  className="text-gray-700 border-gray-200 hover:bg-gray-50 hover:text-gray-900"
+                  variant="ghost"
+                  className="border border-gray-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700"
                   onClick={() => setComposeOpen(false)}
                 >
                   Cancel