diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index f515192..730de5a 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -451,6 +451,7 @@ export default function MailPage() {
   const [itemToDelete, setItemToDelete] = useState<number | null>(null);
   const [showCc, setShowCc] = useState(false);
   const [contentLoading, setContentLoading] = useState(false);
+  const [attachments, setAttachments] = useState<File[]>([]);
 
   // Move getSelectedEmail inside the component
   const getSelectedEmail = () => {
@@ -692,6 +693,12 @@ export default function MailPage() {
     }
   };
 
+  const handleFileAttachment = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      setAttachments(Array.from(e.target.files));
+    }
+  };
+
   if (error) {
     return (
       <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
@@ -1107,13 +1114,13 @@ export default function MailPage() {
               <div className="p-6 space-y-4">
                 {/* To Field */}
                 <div>
-                  <Label htmlFor="to" className="text-sm font-medium text-gray-700">To</Label>
+                  <Label htmlFor="to" className="block 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 mt-1 bg-white border-gray-300"
+                    className="w-full mt-1 bg-white border-gray-300 text-gray-900"
                   />
                 </div>
 
@@ -1138,13 +1145,13 @@ export default function MailPage() {
                 {/* CC Field */}
                 {showCc && (
                   <div>
-                    <Label htmlFor="cc" className="text-sm font-medium text-gray-700">Cc</Label>
+                    <Label htmlFor="cc" className="block 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 mt-1 bg-white border-gray-300"
+                      className="w-full mt-1 bg-white border-gray-300 text-gray-900"
                     />
                   </div>
                 )}
@@ -1152,38 +1159,38 @@ export default function MailPage() {
                 {/* BCC Field */}
                 {showBcc && (
                   <div>
-                    <Label htmlFor="bcc" className="text-sm font-medium text-gray-700">Bcc</Label>
+                    <Label htmlFor="bcc" className="block 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 mt-1 bg-white border-gray-300"
+                      className="w-full mt-1 bg-white border-gray-300 text-gray-900"
                     />
                   </div>
                 )}
 
                 {/* Subject Field */}
                 <div>
-                  <Label htmlFor="subject" className="text-sm font-medium text-gray-700">Subject</Label>
+                  <Label htmlFor="subject" className="block 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 mt-1 bg-white border-gray-300"
+                    className="w-full mt-1 bg-white border-gray-300 text-gray-900"
                   />
                 </div>
 
                 {/* Message Body */}
                 <div>
-                  <Label htmlFor="message" className="text-sm font-medium text-gray-700">Message</Label>
+                  <Label htmlFor="message" className="block 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="w-full mt-1 min-h-[200px] bg-white border-gray-300 resize-none"
+                    className="w-full mt-1 min-h-[200px] bg-white border-gray-300 text-gray-900 resize-none"
                   />
                 </div>
               </div>
@@ -1192,13 +1199,27 @@ export default function MailPage() {
             {/* Modal Footer - Fixed at bottom */}
             <div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
               <div className="flex items-center gap-2">
-                <Button 
-                  variant="outline" 
-                  size="icon"
-                  className="rounded-full hover:bg-gray-100 border-gray-300"
-                >
-                  <Paperclip className="h-4 w-4 text-gray-600" />
-                </Button>
+                {/* File Input for Attachments */}
+                <input
+                  type="file"
+                  id="file-attachment"
+                  className="hidden"
+                  multiple
+                  onChange={handleFileAttachment}
+                />
+                <label htmlFor="file-attachment">
+                  <Button 
+                    variant="outline" 
+                    size="icon"
+                    className="rounded-full bg-white hover:bg-gray-100 border-gray-300"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      document.getElementById('file-attachment')?.click();
+                    }}
+                  >
+                    <Paperclip className="h-4 w-4 text-gray-600" />
+                  </Button>
+                </label>
               </div>
               <div className="flex items-center gap-3">
                 <Button