diff --git a/components/mail/mail-list.tsx b/components/mail/mail-list.tsx
index 84c11792..9c5e7598 100644
--- a/components/mail/mail-list.tsx
+++ b/components/mail/mail-list.tsx
@@ -2,10 +2,18 @@ import { Mail } from '@/hooks/use-mail';
 
 interface MailListProps {
   mails: Mail[];
-  onMailClick: (mail: Mail) => void;
+  onMailClick?: (mail: Mail) => void;
 }
 
-export const MailList = ({ mails, onMailClick }: MailListProps) => {
+export const MailList = ({ mails = [], onMailClick }: MailListProps) => {
+  if (!mails || mails.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <p className="text-gray-500">No emails found</p>
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col space-y-2">
       {mails.map((mail) => (
@@ -14,7 +22,7 @@ export const MailList = ({ mails, onMailClick }: MailListProps) => {
           className={`p-4 border rounded-lg cursor-pointer hover:bg-gray-50 ${
             !mail.read ? 'font-semibold' : ''
           }`}
-          onClick={() => onMailClick(mail)}
+          onClick={() => onMailClick?.(mail)}
         >
           <div className="flex justify-between items-start">
             <div className="flex-1">
diff --git a/hooks/use-mail.ts b/hooks/use-mail.ts
index c3412913..37f0c1ad 100644
--- a/hooks/use-mail.ts
+++ b/hooks/use-mail.ts
@@ -29,9 +29,10 @@ export const useMail = () => {
         throw new Error('Failed to fetch mails');
       }
       const data = await response.json();
-      setMails(data.emails);
+      setMails(data.emails || []);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to fetch mails');
+      setMails([]);
     } finally {
       setIsLoading(false);
     }