diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 2ffa285..656bb8f 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -909,7 +909,6 @@ 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
@@ -923,156 +922,155 @@ export default function MailPage() {
         </div>
 
         {/* Compose button */}
-          <div className="p-2 border-b border-gray-100">
+        <div className="p-2 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-1.5 text-sm"
-              onClick={() => {
-                console.log('Compose button clicked');
-                setShowCompose(true);
-                // Reset form fields
-                setComposeTo('');
-                setComposeCc('');
-                setComposeBcc('');
-                setComposeSubject('');
-                setComposeBody('');
-                setShowCc(false);
-                setShowBcc(false);
-              }}
-            >
-              <div className="flex items-center gap-2">
-                <PlusIcon className="h-3.5 w-3.5" />
-                <span>Compose</span>
+            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={() => {
+              setShowCompose(true);
+              setComposeTo('');
+              setComposeCc('');
+              setComposeBcc('');
+              setComposeSubject('');
+              setComposeBody('');
+              setShowCc(false);
+              setShowBcc(false);
+            }}
+          >
+            <div className="flex items-center gap-2">
+              <PlusIcon className="h-3.5 w-3.5" />
+              <span>Compose</span>
             </div>
           </Button>
         </div>
 
-          {/* Accounts Section */}
-          <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={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
-            >
-              <span>Accounts</span>
-              {accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
-            </Button>
-            
-            {accountsDropdownOpen && (
-              <div className="space-y-1 pl-2">
-                {accounts.map(account => (
-                    <Button
-                    key={account.id}
-                      variant="ghost"
-                    className="w-full justify-start px-2 py-1.5 text-sm"
-                      onClick={() => setSelectedAccount(account)}
-                    >
-                    <div className="flex items-center gap-2 w-full">
-                          <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
-                          <span className="font-medium">{account.name}</span>
-                      {account.id !== 0 && (
-                        <span className="text-xs text-gray-500 truncate">{account.email}</span>
+        {/* Accounts Section */}
+        <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={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
+          >
+            <span>Accounts</span>
+            {accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+          </Button>
+          
+          {accountsDropdownOpen && (
+            <div className="space-y-1 pl-2">
+              {accounts.map(account => (
+                <Button
+                  key={account.id}
+                  variant="ghost"
+                  className="w-full justify-start px-2 py-1.5 text-sm"
+                  onClick={() => setSelectedAccount(account)}
+                >
+                  <div className="flex items-center gap-2 w-full">
+                    <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
+                    <span className="font-medium">{account.name}</span>
+                    {account.id !== 0 && (
+                      <span className="text-xs text-gray-500 truncate">{account.email}</span>
                     )}
                   </div>
                 </Button>
-                ))}
-              </div>
-            )}
-          </div>
+              ))}
+            </div>
+          )}
+        </div>
 
-          {/* Navigation */}
-          <nav className="flex-1 overflow-y-auto p-3">
-            <ul className="space-y-1">
-              {/* Standard folders */}
-                <li>
-                  <Button 
-                    variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
-                  className="w-full justify-start"
-                    onClick={() => {setCurrentView('inbox'); setSelectedEmail(null);}}
-                  >
-                    <Inbox className="h-4 w-4 mr-2" />
-                  <span>Inbox</span>
-                  {emails.filter(e => !e.read && e.category === 'inbox').length > 0 && (
-                    <span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
-                      {emails.filter(e => !e.read && e.category === 'inbox').length}
-                    </span>
-                  )}
-                  </Button>
-                </li>
-                <li>
-                  <Button 
-                    variant={currentView === 'starred' ? 'secondary' : 'ghost'}
-                  className="w-full justify-start"
-                    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"
-                    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"
-                    onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
-                  >
-                    <Trash className="h-4 w-4 mr-2" />
-                  <span>Trash</span>
-                  </Button>
-                </li>
+        {/* Navigation */}
+        <nav className="flex-1 overflow-y-auto p-3">
+          <ul className="space-y-1">
+            {/* Standard folders */}
+            <li>
+              <Button 
+                variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
+                className="w-full justify-start"
+                onClick={() => {setCurrentView('inbox'); setSelectedEmail(null);}}
+              >
+                <Inbox className="h-4 w-4 mr-2" />
+                <span>Inbox</span>
+                {emails.filter(e => !e.read && e.category === 'inbox').length > 0 && (
+                  <span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
+                    {emails.filter(e => !e.read && e.category === 'inbox').length}
+                  </span>
+                )}
+              </Button>
+            </li>
+            <li>
+              <Button 
+                variant={currentView === 'starred' ? 'secondary' : 'ghost'}
+                className="w-full justify-start"
+                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"
+                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"
+                onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
+              >
+                <Trash className="h-4 w-4 mr-2" />
+                <span>Trash</span>
+              </Button>
+            </li>
 
-              {/* Account-specific folders */}
-              {selectedAccount && selectedAccount.id !== 0 && (
-                <>
+            {/* Account-specific folders */}
+            {selectedAccount && selectedAccount.id !== 0 && folders.length > 0 && (
+              <>
                 <li className="mt-4">
                   <Button 
                     variant="ghost"
-                      className="w-full justify-between"
-                      onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
+                    className="w-full justify-between"
+                    onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
                   >
                     <div className="flex items-center">
                       <Folder className="h-4 w-4 mr-2" />
-                        <span>Folders</span>
+                      <span>Folders</span>
                     </div>
-                      {foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+                    {foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
                   </Button>
+                </li>
+                {foldersDropdownOpen && folders.map((folder, index) => (
+                  <li key={index}>
+                    <Button
+                      variant={currentView === folder ? 'secondary' : 'ghost'}
+                      className="w-full justify-start pl-8"
+                      onClick={() => {setCurrentView(folder); setSelectedEmail(null);}}
+                    >
+                      <span>{folder}</span>
+                    </Button>
                   </li>
-                  {foldersDropdownOpen && folders.map((folder, index) => (
-                    <li key={index}>
-                          <Button
-                        variant={currentView === folder ? 'secondary' : 'ghost'}
-                        className="w-full justify-start pl-8"
-                        onClick={() => {setCurrentView(folder); setSelectedEmail(null);}}
-                      >
-                        <span>{folder}</span>
-                          </Button>
-                        </li>
-                      ))}
-                </>
-                  )}
-              </ul>
-            </nav>
+                ))}
+              </>
+            )}
+          </ul>
+        </nav>
       </div>
 
-        {/* Main content area */}
+      {/* Main content */}
       <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}
+              {filteredEmails.length > 0 && (
+                <input
+                  type="checkbox"
+                  checked={selectedEmails.length === filteredEmails.length}
+                  onChange={toggleSelectAll}
+                  className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
                 />
               )}
               <h2 className="text-lg font-semibold text-gray-800 capitalize">
@@ -1080,81 +1078,57 @@ export default function MailPage() {
               </h2>
             </div>
             <div className="text-sm text-gray-500">
-                {emails.length} emails
+              {filteredEmails.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>
-                            </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>
+          <div className="divide-y divide-gray-200">
+            {filteredEmails.map((email) => (
+              <div
+                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>
-                    </li>
-                  ))}
-                </ul>
-              )}
+                    </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>
+                </div>
+              </div>
+            ))}
+          </div>
         </div>
 
         {/* Email preview panel */}
@@ -1263,180 +1237,5 @@ export default function MailPage() {
         </div>
       </div>
     </div>
-
-      {/* Compose Email Modal - Updated Design */}
-      {showCompose && (
-        <div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
-          <div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
-            {/* Modal Header */}
-            <div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
-              <h3 className="text-lg font-semibold text-gray-900">New Message</h3>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="hover:bg-gray-100 rounded-full"
-                onClick={() => {
-                  setShowCompose(false);
-                  setComposeTo('');
-                  setComposeCc('');
-                  setComposeBcc('');
-                  setComposeSubject('');
-                  setComposeBody('');
-                  setShowCc(false);
-                  setShowBcc(false);
-                }}
-              >
-                <X className="h-5 w-5 text-gray-500" />
-              </Button>
-            </div>
-
-            {/* Modal Body - Make it scrollable */}
-            <div className="flex-1 overflow-y-auto">
-              <div className="p-6 space-y-4">
-                {/* To Field */}
-                <div>
-                  <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 text-gray-900"
-                  />
-                </div>
-
-                {/* CC/BCC Toggle Buttons */}
-                <div className="flex items-center gap-4">
-                  <button
-                    type="button"
-                    className="text-blue-600 hover:text-blue-700 text-sm font-medium"
-                    onClick={() => setShowCc(!showCc)}
-                  >
-                    {showCc ? 'Hide Cc' : 'Add Cc'}
-                  </button>
-                  <button
-                    type="button"
-                    className="text-blue-600 hover:text-blue-700 text-sm font-medium"
-                    onClick={() => setShowBcc(!showBcc)}
-                  >
-                    {showBcc ? 'Hide Bcc' : 'Add Bcc'}
-                  </button>
-                </div>
-
-                {/* CC Field */}
-                {showCc && (
-                  <div>
-                    <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 text-gray-900"
-                    />
-                  </div>
-                )}
-
-                {/* BCC Field */}
-                {showBcc && (
-                  <div>
-                    <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 text-gray-900"
-                    />
-                  </div>
-                )}
-
-                {/* Subject Field */}
-                <div>
-                  <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 text-gray-900"
-                  />
-                </div>
-
-                {/* Message Body */}
-                <div>
-                  <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 text-gray-900 resize-none"
-                  />
-                </div>
-              </div>
-            </div>
-
-            {/* 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">
-                {/* 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 
-                  variant="ghost"
-                  className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
-                  onClick={() => setShowCompose(false)}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  className="bg-blue-600 text-white hover:bg-blue-700"
-                  onClick={handleSend}
-                >
-                  Send
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Delete Confirmation Dialog */}
-      <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This action cannot be undone. This will permanently delete the selected {deleteType}.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDeleteConfirm}>Delete</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
   );
 }
\ No newline at end of file