diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 28fa8c0..e6ae50a 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -448,7 +448,7 @@ export default function MailPage() {
       console.log('Processed email data:', emailData); // Debug processed data
       
       // Ensure all dates are Date objects
-      const processedEmails = emailData.map(email => ({
+      const processedEmails = emailData.map((email: Email) => ({
         ...email,
         date: email.date ? new Date(email.date) : new Date(),
         read: email.read || false,
@@ -629,6 +629,35 @@ export default function MailPage() {
     }
   };
 
+  // Handle reply
+  const handleReply = async (type: 'reply' | 'replyAll' | 'forward') => {
+    const selectedEmailData = getSelectedEmail();
+    if (!selectedEmailData) return;
+
+    setComposeOpen(true);
+    const subject = `${type === 'forward' ? 'Fwd: ' : 'Re: '}${selectedEmailData.subject}`;
+    let to = '';
+    let content = '';
+
+    switch (type) {
+      case 'reply':
+        to = selectedEmailData.from;
+        content = `\n\nOn ${new Date(selectedEmailData.date).toLocaleString()}, ${selectedEmailData.fromName} wrote:\n> ${selectedEmailData.body.split('\n').join('\n> ')}`;
+        break;
+      case 'replyAll':
+        to = selectedEmailData.from; // You would also need to add CC recipients here
+        content = `\n\nOn ${new Date(selectedEmailData.date).toLocaleString()}, ${selectedEmailData.fromName} wrote:\n> ${selectedEmailData.body.split('\n').join('\n> ')}`;
+        break;
+      case 'forward':
+        content = `\n\n---------- Forwarded message ----------\nFrom: ${selectedEmailData.fromName} <${selectedEmailData.from}>\nDate: ${new Date(selectedEmailData.date).toLocaleString()}\nSubject: ${selectedEmailData.subject}\n\n${selectedEmailData.body}`;
+        break;
+    }
+
+    setComposeSubject(subject);
+    setComposeRecipient(to);
+    setComposeContent(content);
+  };
+
   if (loading) {
     return (
       <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
@@ -996,6 +1025,98 @@ export default function MailPage() {
             </div>
           </div>
         </div>
+
+        {/* Email preview panel */}
+        <div className="flex-1 bg-white/95 backdrop-blur-sm overflow-y-auto">
+          {selectedEmail ? (
+            <div className="p-6">
+              <div className="flex items-center justify-between mb-6">
+                <h2 className="text-xl font-semibold text-gray-900">{selectedEmail.subject}</h2>
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="text-gray-400 hover:text-gray-900"
+                    onClick={() => handleReply('reply')}
+                  >
+                    <Reply className="h-5 w-5" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="text-gray-400 hover:text-gray-900"
+                    onClick={() => handleReply('replyAll')}
+                  >
+                    <ReplyAll className="h-5 w-5" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="text-gray-400 hover:text-gray-900"
+                    onClick={() => handleReply('forward')}
+                  >
+                    <Forward className="h-5 w-5" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="text-gray-400 hover:text-gray-900"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      toggleStarred(selectedEmail.id, e);
+                    }}
+                  >
+                    {selectedEmail.starred ? (
+                      <Star className="h-5 w-5 text-yellow-400" />
+                    ) : (
+                      <Star className="h-5 w-5" />
+                    )}
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="text-gray-400 hover:text-gray-900"
+                    onClick={() => {
+                      setDeleteType('email');
+                      setItemToDelete(parseInt(selectedEmail.id));
+                      setShowDeleteConfirm(true);
+                    }}
+                  >
+                    <Trash2 className="h-5 w-5" />
+                  </Button>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-4 mb-6">
+                <Avatar className="h-10 w-10">
+                  <AvatarFallback>
+                    {selectedEmail.fromName?.charAt(0) || selectedEmail.from.charAt(0)}
+                  </AvatarFallback>
+                </Avatar>
+                <div>
+                  <p className="font-medium text-gray-900">
+                    {selectedEmail.fromName || selectedEmail.from}
+                  </p>
+                  <p className="text-sm text-gray-500">
+                    to {selectedEmail.to}
+                  </p>
+                </div>
+                <div className="ml-auto text-sm text-gray-500">
+                  {formatDate(selectedEmail.date.toISOString())}
+                </div>
+              </div>
+
+              <div className="prose max-w-none">
+                {selectedEmail.body}
+              </div>
+            </div>
+          ) : (
+            <div className="flex flex-col items-center justify-center h-full">
+              <Mail className="h-12 w-12 text-gray-400 mb-4" />
+              <p className="text-gray-500">Select an email to view its contents</p>
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );