diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index 3eb3acad..2e8965db 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -83,7 +83,7 @@ export default function ComposeEmail({
   onSend,
   onCancel
 }: ComposeEmailProps) {
-  const [sending, setSending] = useState(false);
+  const [isSending, setIsSending] = useState(false);
   const editorRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const composeBodyRef = useRef<HTMLDivElement>(null);
@@ -307,7 +307,7 @@ export default function ComposeEmail({
         <div className="flex gap-2">
           <Button
             variant="outline"
-            onClick={handleFileSelection}
+            onClick={() => fileInputRef.current?.click()}
             className="flex items-center gap-1 bg-white"
           >
             <Paperclip className="h-4 w-4" />
@@ -322,26 +322,21 @@ export default function ComposeEmail({
           />
         </div>
         <Button
-          onClick={async () => {
-            setSending(true);
-            try {
-              await handleSend();
-              onCancel();
-            } catch (error) {
-              console.error('Error sending email:', error);
-            } finally {
-              setSending(false);
-            }
-          }}
-          disabled={sending || !composeTo.trim()}
+          onClick={handleSend}
+          disabled={isSending || !composeTo.trim()}
           className="flex items-center gap-2"
         >
-          {sending ? (
-            <Loader2 className="h-4 w-4 animate-spin" />
+          {isSending ? (
+            <>
+              <Loader2 className="h-4 w-4 mr-1 animate-spin" />
+              Sending...
+            </>
           ) : (
-            <SendHorizontal className="h-4 w-4" />
+            <>
+              <SendHorizontal className="h-4 w-4 mr-1" />
+              Send
+            </>
           )}
-          Send
         </Button>
       </CardFooter>
     </Card>