diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index da6d397..8bb6bf1 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -431,10 +431,10 @@ export default function MailPage() {
   const [showBcc, setShowBcc] = useState(false);
   const [emails, setEmails] = useState<Email[]>([]);
   const [error, setError] = useState<string | null>(null);
-  const [composeSubject, setComposeSubject] = useState('');
   const [composeTo, setComposeTo] = useState('');
   const [composeCc, setComposeCc] = useState('');
   const [composeBcc, setComposeBcc] = useState('');
+  const [composeSubject, setComposeSubject] = useState('');
   const [composeBody, setComposeBody] = useState('');
   const [selectedEmail, setSelectedEmail] = useState<Email | null>(null);
   const [sidebarOpen, setSidebarOpen] = useState(true);
@@ -711,355 +711,368 @@ export default function MailPage() {
   }
 
   return (
-    <div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
-      {/* Sidebar */}
-      <div className={`${sidebarOpen ? 'w-72' : 'w-20'} bg-white/95 backdrop-blur-sm border-0 shadow-lg flex flex-col transition-all duration-300 ease-in-out
-                    ${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
-        {/* Courrier Title */}
-        <div className="p-3 border-b border-gray-100">
-          <div className="flex items-center gap-2">
-            <Mail className="h-6 w-6 text-gray-600" />
-            <span className="text-xl font-semibold text-gray-900">COURRIER</span>
-          </div>
-        </div>
-
-        {/* Compose button */}
-        <div className="p-3 border-b border-gray-100">
-          <Button 
-            className="w-full bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-2"
-            onClick={() => setComposeOpen(true)}
-          >
-            <div className="flex items-center">
-              <PlusIcon className="h-4 w-4" />
-              <span className="ml-2">Compose</span>
-            </div>
-          </Button>
-        </div>
-
-        {/* Accounts Section */}
-        <div className="flex flex-col min-h-0 flex-1">
+    <>
+      <div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
+        {/* Sidebar */}
+        <div className={`${sidebarOpen ? 'w-72' : 'w-20'} bg-white/95 backdrop-blur-sm border-0 shadow-lg flex flex-col transition-all duration-300 ease-in-out
+                      ${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
+          {/* Courrier Title */}
           <div className="p-3 border-b border-gray-100">
+            <div className="flex items-center gap-2">
+              <Mail className="h-6 w-6 text-gray-600" />
+              <span className="text-xl font-semibold text-gray-900">COURRIER</span>
+            </div>
+          </div>
+
+          {/* Compose button */}
+          <div className="p-2 border-b border-gray-100">
             <Button 
-              variant="ghost"
-              className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
-              onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
+              className="w-full bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-1.5 text-sm"
+              onClick={() => {
+                console.log('Compose button clicked');
+                setShowCompose(true);
+                // Reset form fields
+                setComposeTo('');
+                setComposeCc('');
+                setComposeBcc('');
+                setComposeSubject('');
+                setComposeBody('');
+                setShowCc(false);
+                setShowBcc(false);
+              }}
             >
-              <span>Accounts</span>
-              {foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+              <div className="flex items-center gap-2">
+                <PlusIcon className="h-3.5 w-3.5" />
+                <span>Compose</span>
+              </div>
             </Button>
-            
-            {foldersDropdownOpen && (
-              <div className="space-y-1 pl-2">
-                {accounts.map(account => (
-                  <div key={account.id} className="relative group">
-                    <Button
-                      variant="ghost"
-                      className="w-full justify-between px-2 py-1.5 text-sm group"
-                      onClick={() => setSelectedAccount(account)}
-                    >
-                      <div className="flex flex-col items-start">
-                        <div className="flex items-center gap-2">
-                          <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
-                          <span className="font-medium">{account.name}</span>
-                        </div>
-                        <span className="text-xs text-gray-500 ml-4">{account.email}</span>
-                      </div>
+          </div>
+
+          {/* Accounts Section */}
+          <div className="flex flex-col min-h-0 flex-1">
+            <div className="p-3 border-b border-gray-100">
+              <Button 
+                variant="ghost"
+                className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
+                onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
+              >
+                <span>Accounts</span>
+                {foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+              </Button>
+              
+              {foldersDropdownOpen && (
+                <div className="space-y-1 pl-2">
+                  {accounts.map(account => (
+                    <div key={account.id} className="relative group">
                       <Button
                         variant="ghost"
-                        size="icon"
-                        className="h-6 w-6 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          setShowAccountActions(account.id);
-                        }}
+                        className="w-full justify-between px-2 py-1.5 text-sm group"
+                        onClick={() => setSelectedAccount(account)}
                       >
-                        <MoreVertical className="h-4 w-4" />
-                      </Button>
-                    </Button>
-
-                    {/* Account Actions Dropdown */}
-                    {showAccountActions === account.id && (
-                      <div className="absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg py-1 z-10">
-                        <Button
-                          variant="ghost"
-                          className="w-full justify-start px-4 py-2 text-sm text-gray-600 hover:text-gray-900"
-                          onClick={() => handleAccountAction(account.id, 'edit')}
-                        >
-                          <Edit className="h-4 w-4 mr-2" />
-                          Edit account
-                        </Button>
-                        <Button
-                          variant="ghost"
-                          className="w-full justify-start px-4 py-2 text-sm text-red-600 hover:text-red-700"
-                          onClick={() => handleAccountAction(account.id, 'delete')}
-                        >
-                          <Trash2 className="h-4 w-4 mr-2" />
-                          Remove account
-                        </Button>
-                      </div>
-                    )}
-                  </div>
-                ))}
-
-                {/* Add Account Button */}
-                <Button
-                  variant="ghost"
-                  className="w-full justify-start px-2 py-1.5 text-sm text-blue-600 hover:text-blue-700 hover:bg-blue-50"
-                  onClick={() => {/* Handle add account */}}
-                >
-                  <Plus className="h-4 w-4 mr-2" />
-                  Add Account
-                </Button>
-              </div>
-            )}
-          </div>
-
-          {/* Navigation */}
-          <nav className="p-3">
-            <ul className="space-y-0.5 px-2">
-              <li>
-                <Button 
-                  variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
-                  className={`w-full justify-start py-2 ${currentView === 'inbox' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
-                  onClick={() => {setCurrentView('inbox'); setSelectedEmail(null);}}
-                >
-                  <Inbox className="h-4 w-4 mr-2" />
-                  <span>Inbox</span>
-                </Button>
-              </li>
-              <li>
-                <Button 
-                  variant={currentView === 'starred' ? 'secondary' : 'ghost'}
-                  className={`w-full justify-start py-2 ${currentView === 'starred' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
-                  onClick={() => {setCurrentView('starred'); setSelectedEmail(null);}}
-                >
-                  <Star className="h-4 w-4 mr-2" />
-                  <span>Starred</span>
-                </Button>
-              </li>
-              <li>
-                <Button 
-                  variant={currentView === 'sent' ? 'secondary' : 'ghost'}
-                  className={`w-full justify-start py-2 ${currentView === 'sent' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
-                  onClick={() => {setCurrentView('sent'); setSelectedEmail(null);}}
-                >
-                  <Send className="h-4 w-4 mr-2" />
-                  <span>Sent</span>
-                </Button>
-              </li>
-              <li>
-                <Button 
-                  variant={currentView === 'trash' ? 'secondary' : 'ghost'}
-                  className={`w-full justify-start py-2 ${currentView === 'trash' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
-                  onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
-                >
-                  <Trash className="h-4 w-4 mr-2" />
-                  <span>Trash</span>
-                </Button>
-              </li>
-            </ul>
-          </nav>
-        </div>
-      </div>
-
-      {/* Main content area */}
-      <div className="flex-1 flex overflow-hidden">
-        {/* Email list */}
-        <div className="w-[380px] bg-white/95 backdrop-blur-sm border-r border-gray-100 overflow-y-auto">
-          {/* Email list header */}
-          <div className="p-4 border-b border-gray-100 flex justify-between items-center">
-            <div className="flex items-center gap-4">
-              {emails.length > 0 && (
-                <Checkbox
-                  checked={selectedEmails.length === emails.length}
-                  onCheckedChange={toggleSelectAll}
-                />
-              )}
-              <h2 className="text-lg font-semibold text-gray-800 capitalize">
-                {currentView === 'starred' ? 'Starred' : currentView}
-              </h2>
-            </div>
-            <div className="text-sm text-gray-500">
-              {emails.length} emails
-            </div>
-          </div>
-
-          {/* Bulk Actions Bar */}
-          {showBulkActions && selectedEmails.length > 0 && (
-            <div className="p-2 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
-              <span className="text-sm text-gray-600">{selectedEmails.length} selected</span>
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="text-red-600 hover:text-red-700"
-                  onClick={handleBulkDelete}
-                >
-                  <Trash2 className="h-4 w-4 mr-2" />
-                  Delete
-                </Button>
-              </div>
-            </div>
-          )}
-
-          {/* Email List */}
-          {loading ? (
-            <div className="flex items-center justify-center h-64">
-              <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
-            </div>
-          ) : (
-            <ul className="divide-y divide-gray-100">
-              {emails.map((email) => (
-                <li
-                  key={email.id}
-                  className={`flex items-center p-4 hover:bg-gray-50 cursor-pointer ${
-                    selectedEmail?.id === email.id ? 'bg-blue-50' : ''
-                  } ${!email.read ? 'bg-blue-50/20' : ''}`}
-                  onClick={() => handleEmailSelect(email.id)}
-                >
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center space-x-3">
-                        <Checkbox
-                          checked={selectedEmails.includes(email.id.toString())}
-                          onClick={(e) => e.stopPropagation()}
-                          onCheckedChange={(checked) => {
-                            if (checked) {
-                              setSelectedEmails([...selectedEmails, email.id.toString()]);
-                            } else {
-                              setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString()));
-                            }
-                          }}
-                        />
-                        <div>
-                          <p className={`text-sm ${!email.read ? 'font-semibold' : ''}`}>
-                            {email.fromName || email.from}
-                          </p>
-                          <p className="text-sm text-gray-600 truncate">{email.subject}</p>
+                        <div className="flex flex-col items-start">
+                          <div className="flex items-center gap-2">
+                            <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
+                            <span className="font-medium">{account.name}</span>
+                          </div>
+                          <span className="text-xs text-gray-500 ml-4">{account.email}</span>
                         </div>
-                      </div>
-                      <div className="flex items-center space-x-2">
-                        <span className="text-xs text-gray-500">{formatDate(email.date)}</span>
                         <Button
                           variant="ghost"
-                          size="sm"
-                          className="text-gray-400 hover:text-yellow-400"
-                          onClick={(e) => toggleStarred(email.id, e)}
+                          size="icon"
+                          className="h-6 w-6 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setShowAccountActions(account.id);
+                          }}
                         >
-                          <Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
+                          <MoreVertical className="h-4 w-4" />
                         </Button>
-                      </div>
+                      </Button>
+
+                      {/* Account Actions Dropdown */}
+                      {showAccountActions === account.id && (
+                        <div className="absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg py-1 z-10">
+                          <Button
+                            variant="ghost"
+                            className="w-full justify-start px-4 py-2 text-sm text-gray-600 hover:text-gray-900"
+                            onClick={() => handleAccountAction(account.id, 'edit')}
+                          >
+                            <Edit className="h-4 w-4 mr-2" />
+                            Edit account
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            className="w-full justify-start px-4 py-2 text-sm text-red-600 hover:text-red-700"
+                            onClick={() => handleAccountAction(account.id, 'delete')}
+                          >
+                            <Trash2 className="h-4 w-4 mr-2" />
+                            Remove account
+                          </Button>
+                        </div>
+                      )}
                     </div>
-                  </div>
+                  ))}
+
+                  {/* Add Account Button */}
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start px-2 py-1.5 text-sm text-blue-600 hover:text-blue-700 hover:bg-blue-50"
+                    onClick={() => {/* Handle add account */}}
+                  >
+                    <Plus className="h-4 w-4 mr-2" />
+                    Add Account
+                  </Button>
+                </div>
+              )}
+            </div>
+
+            {/* Navigation */}
+            <nav className="p-3">
+              <ul className="space-y-0.5 px-2">
+                <li>
+                  <Button 
+                    variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
+                    className={`w-full justify-start py-2 ${currentView === 'inbox' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
+                    onClick={() => {setCurrentView('inbox'); setSelectedEmail(null);}}
+                  >
+                    <Inbox className="h-4 w-4 mr-2" />
+                    <span>Inbox</span>
+                  </Button>
                 </li>
-              ))}
-            </ul>
-          )}
+                <li>
+                  <Button 
+                    variant={currentView === 'starred' ? 'secondary' : 'ghost'}
+                    className={`w-full justify-start py-2 ${currentView === 'starred' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
+                    onClick={() => {setCurrentView('starred'); setSelectedEmail(null);}}
+                  >
+                    <Star className="h-4 w-4 mr-2" />
+                    <span>Starred</span>
+                  </Button>
+                </li>
+                <li>
+                  <Button 
+                    variant={currentView === 'sent' ? 'secondary' : 'ghost'}
+                    className={`w-full justify-start py-2 ${currentView === 'sent' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
+                    onClick={() => {setCurrentView('sent'); setSelectedEmail(null);}}
+                  >
+                    <Send className="h-4 w-4 mr-2" />
+                    <span>Sent</span>
+                  </Button>
+                </li>
+                <li>
+                  <Button 
+                    variant={currentView === 'trash' ? 'secondary' : 'ghost'}
+                    className={`w-full justify-start py-2 ${currentView === 'trash' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
+                    onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
+                  >
+                    <Trash className="h-4 w-4 mr-2" />
+                    <span>Trash</span>
+                  </Button>
+                </li>
+              </ul>
+            </nav>
+          </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>
+        {/* Main content area */}
+        <div className="flex-1 flex overflow-hidden">
+          {/* Email list */}
+          <div className="w-[380px] bg-white/95 backdrop-blur-sm border-r border-gray-100 overflow-y-auto">
+            {/* Email list header */}
+            <div className="p-4 border-b border-gray-100 flex justify-between items-center">
+              <div className="flex items-center gap-4">
+                {emails.length > 0 && (
+                  <Checkbox
+                    checked={selectedEmails.length === emails.length}
+                    onCheckedChange={toggleSelectAll}
+                  />
+                )}
+                <h2 className="text-lg font-semibold text-gray-800 capitalize">
+                  {currentView === 'starred' ? 'Starred' : currentView}
+                </h2>
+              </div>
+              <div className="text-sm text-gray-500">
+                {emails.length} emails
+              </div>
+            </div>
+
+            {/* Bulk Actions Bar */}
+            {showBulkActions && selectedEmails.length > 0 && (
+              <div className="p-2 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
+                <span className="text-sm text-gray-600">{selectedEmails.length} selected</span>
                 <div className="flex items-center gap-2">
                   <Button
                     variant="ghost"
-                    size="icon"
-                    className="text-gray-400 hover:text-gray-900"
-                    onClick={() => handleReply('reply')}
+                    size="sm"
+                    className="text-red-600 hover:text-red-700"
+                    onClick={handleBulkDelete}
                   >
-                    <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) => toggleStarred(selectedEmail.id, e)}
-                  >
-                    <Star className={`h-5 w-5 ${selectedEmail.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Delete
                   </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)}
-                </div>
+            {/* Email List */}
+            {loading ? (
+              <div className="flex items-center justify-center h-64">
+                <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
               </div>
-
-              <div className="prose max-w-none">
-                {(() => {
-                  try {
-                    const parsed = parseFullEmail(selectedEmail.body);
-                    return (
-                      <div>
-                        {/* Display HTML content if available, otherwise fallback to text */}
-                        <div dangerouslySetInnerHTML={{ 
-                          __html: parsed.html || parsed.text || decodeMimeContent(selectedEmail.body) 
-                        }} />
-                        
-                        {/* Display attachments if present */}
-                        {parsed.attachments && parsed.attachments.length > 0 && (
-                          <div className="mt-6 border-t border-gray-200 pt-6">
-                            <h3 className="text-sm font-semibold text-gray-900 mb-4">Attachments</h3>
-                            <div className="grid grid-cols-2 gap-4">
-                              {parsed.attachments.map((attachment, index) => (
-                                <div key={index} className="flex items-center space-x-2 p-2 border rounded">
-                                  <Paperclip className="h-4 w-4 text-gray-400" />
-                                  <span className="text-sm text-gray-600 truncate">
-                                    {attachment.filename}
-                                  </span>
-                                </div>
-                              ))}
-                            </div>
+            ) : (
+              <ul className="divide-y divide-gray-100">
+                {emails.map((email) => (
+                  <li
+                    key={email.id}
+                    className={`flex items-center p-4 hover:bg-gray-50 cursor-pointer ${
+                      selectedEmail?.id === email.id ? 'bg-blue-50' : ''
+                    } ${!email.read ? 'bg-blue-50/20' : ''}`}
+                    onClick={() => handleEmailSelect(email.id)}
+                  >
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-3">
+                          <Checkbox
+                            checked={selectedEmails.includes(email.id.toString())}
+                            onClick={(e) => e.stopPropagation()}
+                            onCheckedChange={(checked) => {
+                              if (checked) {
+                                setSelectedEmails([...selectedEmails, email.id.toString()]);
+                              } else {
+                                setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString()));
+                              }
+                            }}
+                          />
+                          <div>
+                            <p className={`text-sm ${!email.read ? 'font-semibold' : ''}`}>
+                              {email.fromName || email.from}
+                            </p>
+                            <p className="text-sm text-gray-600 truncate">{email.subject}</p>
                           </div>
-                        )}
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <span className="text-xs text-gray-500">{formatDate(email.date)}</span>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="text-gray-400 hover:text-yellow-400"
+                            onClick={(e) => toggleStarred(email.id, e)}
+                          >
+                            <Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
+                          </Button>
+                        </div>
                       </div>
-                    );
-                  } catch (e) {
-                    console.error('Error parsing email:', e);
-                    return selectedEmail.body;
-                  }
-                })()}
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </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) => toggleStarred(selectedEmail.id, e)}
+                    >
+                      <Star className={`h-5 w-5 ${selectedEmail.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
+                    </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)}
+                  </div>
+                </div>
+
+                <div className="prose max-w-none">
+                  {(() => {
+                    try {
+                      const parsed = parseFullEmail(selectedEmail.body);
+                      return (
+                        <div>
+                          {/* Display HTML content if available, otherwise fallback to text */}
+                          <div dangerouslySetInnerHTML={{ 
+                            __html: parsed.html || parsed.text || decodeMimeContent(selectedEmail.body) 
+                          }} />
+                          
+                          {/* Display attachments if present */}
+                          {parsed.attachments && parsed.attachments.length > 0 && (
+                            <div className="mt-6 border-t border-gray-200 pt-6">
+                              <h3 className="text-sm font-semibold text-gray-900 mb-4">Attachments</h3>
+                              <div className="grid grid-cols-2 gap-4">
+                                {parsed.attachments.map((attachment, index) => (
+                                  <div key={index} className="flex items-center space-x-2 p-2 border rounded">
+                                    <Paperclip className="h-4 w-4 text-gray-400" />
+                                    <span className="text-sm text-gray-600 truncate">
+                                      {attachment.filename}
+                                    </span>
+                                  </div>
+                                ))}
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      );
+                    } catch (e) {
+                      console.error('Error parsing email:', e);
+                      return selectedEmail.body;
+                    }
+                  })()}
+                </div>
               </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 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>
 
@@ -1068,16 +1081,13 @@ export default function MailPage() {
         <div className="fixed inset-0 bg-black/50 z-50">
           <div className="absolute inset-4 sm:inset-6 md:inset-8 bg-white rounded-lg shadow-xl flex flex-col">
             <div className="flex items-center justify-between p-4 border-b border-gray-200">
-              <h3 className="text-lg font-semibold text-gray-900">
-                {composeSubject.startsWith('Re:') ? 'Reply' : 
-                 composeSubject.startsWith('Fwd:') ? 'Forward' : 
-                 'New Message'}
-              </h3>
+              <h3 className="text-lg font-semibold text-gray-900">New Message</h3>
               <Button
                 variant="ghost"
                 size="icon"
                 onClick={() => {
                   setShowCompose(false);
+                  // Clear form data
                   setComposeTo('');
                   setComposeCc('');
                   setComposeBcc('');
@@ -1176,7 +1186,10 @@ export default function MailPage() {
                 </Button>
               </div>
               <div className="flex items-center gap-2">
-                <Button variant="outline" onClick={() => setShowCompose(false)}>
+                <Button 
+                  variant="outline" 
+                  onClick={() => setShowCompose(false)}
+                >
                   Cancel
                 </Button>
                 <Button
@@ -1231,6 +1244,6 @@ export default function MailPage() {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
-    </div>
+    </>
   );
 }
\ No newline at end of file