diff --git a/components/email/ComposeEmail.tsx b/components/email/ComposeEmail.tsx
index 5c5e26d6..12fe3657 100644
--- a/components/email/ComposeEmail.tsx
+++ b/components/email/ComposeEmail.tsx
@@ -195,53 +195,53 @@ export default function ComposeEmail(props: ComposeEmailProps) {
   };
   
   return (
-    <div className="flex flex-col h-full max-h-[80vh]">
+    <div className="flex flex-col h-full max-h-[80vh] bg-white border rounded-md shadow-md">
       {/* Header */}
-      <div className="flex items-center justify-between p-4 border-b">
-        <h2 className="text-lg font-medium">{getComposeTitle()}</h2>
+      <div className="flex items-center justify-between p-4 border-b bg-gray-50">
+        <h2 className="text-lg font-medium text-gray-800">{getComposeTitle()}</h2>
         <Button variant="ghost" size="icon" onClick={onClose}>
           <X className="h-5 w-5" />
         </Button>
       </div>
       
       {/* Email Form */}
-      <div className="flex-1 overflow-y-auto">
+      <div className="flex-1 overflow-y-auto bg-white">
         <div className="p-4 space-y-4">
           {/* Recipients */}
           <div className="border-b pb-2">
             <div className="flex items-center mb-2">
-              <span className="w-16 text-gray-500">To:</span>
+              <span className="w-16 text-gray-700 font-medium">To:</span>
               <Input 
                 type="text"
                 value={to}
                 onChange={(e) => setTo(e.target.value)}
                 placeholder="recipient@example.com"
-                className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0"
+                className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0 bg-white text-gray-800"
               />
             </div>
             
             {showCc && (
               <div className="flex items-center mb-2">
-                <span className="w-16 text-gray-500">Cc:</span>
+                <span className="w-16 text-gray-700 font-medium">Cc:</span>
                 <Input 
                   type="text"
                   value={cc}
                   onChange={(e) => setCc(e.target.value)}
                   placeholder="cc@example.com"
-                  className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0"
+                  className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0 bg-white text-gray-800"
                 />
               </div>
             )}
             
             {showBcc && (
               <div className="flex items-center mb-2">
-                <span className="w-16 text-gray-500">Bcc:</span>
+                <span className="w-16 text-gray-700 font-medium">Bcc:</span>
                 <Input 
                   type="text"
                   value={bcc}
                   onChange={(e) => setBcc(e.target.value)}
                   placeholder="bcc@example.com"
-                  className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0"
+                  className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0 bg-white text-gray-800"
                 />
               </div>
             )}
@@ -250,7 +250,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
             <div className="flex gap-3 ml-16 mb-1">
               {!showCc && (
                 <button 
-                  className="text-blue-600 text-sm"
+                  className="text-blue-600 text-sm hover:underline"
                   onClick={() => setShowCc(true)}
                 >
                   Add Cc
@@ -259,7 +259,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
               
               {!showBcc && (
                 <button 
-                  className="text-blue-600 text-sm"
+                  className="text-blue-600 text-sm hover:underline"
                   onClick={() => setShowBcc(true)}
                 >
                   Add Bcc
@@ -271,13 +271,13 @@ export default function ComposeEmail(props: ComposeEmailProps) {
           {/* Subject */}
           <div className="border-b pb-2">
             <div className="flex items-center">
-              <span className="w-16 text-gray-500">Subject:</span>
+              <span className="w-16 text-gray-700 font-medium">Subject:</span>
               <Input 
                 type="text"
                 value={subject}
                 onChange={(e) => setSubject(e.target.value)}
                 placeholder="Subject"
-                className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0"
+                className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0 bg-white text-gray-800"
               />
             </div>
           </div>
@@ -285,7 +285,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
           {/* Message Body */}
           <div 
             ref={editorRef}
-            className="min-h-[300px] outline-none p-2"
+            className="min-h-[300px] outline-none p-2 border rounded-md bg-white text-gray-800"
             contentEditable={true}
             dangerouslySetInnerHTML={{ __html: emailContent }}
             onInput={(e) => setEmailContent(e.currentTarget.innerHTML)}
@@ -293,10 +293,11 @@ export default function ComposeEmail(props: ComposeEmailProps) {
           
           {/* Attachments */}
           {attachments.length > 0 && (
-            <div className="p-2 border rounded-md">
+            <div className="p-2 border rounded-md bg-gray-50">
+              <div className="text-sm font-medium mb-1 text-gray-700">Attachments:</div>
               {attachments.map((file, index) => (
                 <div key={index} className="flex items-center justify-between text-sm py-1">
-                  <span className="truncate mr-2">{file.name}</span>
+                  <span className="truncate mr-2 text-gray-800">{file.name}</span>
                   <Button 
                     variant="ghost"
                     size="sm"
@@ -313,7 +314,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
       </div>
       
       {/* Footer */}
-      <div className="border-t p-3 flex items-center justify-between">
+      <div className="border-t p-3 flex items-center justify-between bg-gray-50">
         <div className="flex items-center gap-2">
           {/* File Input for Attachments */}
           <input
@@ -327,13 +328,14 @@ export default function ComposeEmail(props: ComposeEmailProps) {
               }
             }}
           />
-          <label htmlFor="file-attachment">
+          <label htmlFor="file-attachment" className="flex items-center cursor-pointer">
             <Button 
-              variant="ghost" 
-              size="icon"
-              className="h-8 w-8"
+              variant="outline" 
+              size="sm"
+              className="flex items-center gap-1"
             >
               <Paperclip className="h-4 w-4" />
+              <span>Attach</span>
             </Button>
           </label>
         </div>
@@ -342,6 +344,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
           <Button 
             variant="outline"
             onClick={onClose}
+            className="border-gray-300 text-gray-700"
           >
             Cancel
           </Button>
@@ -350,14 +353,19 @@ export default function ComposeEmail(props: ComposeEmailProps) {
             variant="default"
             onClick={handleSend}
             disabled={sending}
-            className="bg-blue-600 hover:bg-blue-700"
+            className="bg-blue-600 hover:bg-blue-700 text-white"
           >
             {sending ? (
               <>
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                 Sending
               </>
-            ) : 'Send'}
+            ) : (
+              <>
+                <SendHorizontal className="h-4 w-4" />
+                Send
+              </>
+            )}
           </Button>
         </div>
       </div>
@@ -372,6 +380,8 @@ export default function ComposeEmail(props: ComposeEmailProps) {
           font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
           font-size: 14px;
           line-height: 1.5;
+          color: #333;
+          background-color: #fff;
         }
         
         [contenteditable]:focus {