diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 830c70d..23a4097 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -41,22 +41,31 @@ interface Email {
   category: string;
 }
 
-// Update MIME decoding function for better formatting
+// Improve MIME decoding function
 const decodeMimeContent = (content: string) => {
   try {
-    // Remove MIME headers and metadata
-    const contentWithoutHeaders = content.replace(/^.*?Content-Type:.*?\n\n/s, '')
-      .replace(/---InfomaniakPhpMail.*?Content-Transfer-Encoding:.*?\n/g, '')
-      .replace(/=C2=A0/g, ' ') // Replace non-breaking spaces
-      .replace(/=\n/g, '') // Remove soft line breaks
-      .replace(/=([0-9A-F]{2})/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)))
-      .replace(/\[IMG:.*?\]/g, '') // Remove image placeholders
-      .replace(/\[LINK:\s*(.*?)\s*\]/g, '$1') // Clean up links
-      .replace(/\*([^*]+)\*/g, '$1') // Remove asterisks
-      .replace(/\s+/g, ' ') // Normalize whitespace
-      .trim();
+    // Extract the actual content after headers
+    const contentMatch = content.match(/charset="utf-8"\s*([\s\S]*?)(?=\s*(?:\[LINK:|$))/);
+    if (!contentMatch) return content;
     
-    return contentWithoutHeaders;
+    let cleanContent = contentMatch[1]
+      // Remove MIME headers and metadata
+      .replace(/^.*?Content-Type:.*?\n\n/s, '')
+      .replace(/---InfomaniakPhpMail.*?Content-Transfer-Encoding:.*?\n/g, '')
+      // Clean up special characters
+      .replace(/=C2=A0/g, ' ')
+      .replace(/=\n/g, '')
+      .replace(/=([0-9A-F]{2})/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)))
+      // Remove formatting markers
+      .replace(/\[IMG:.*?\]/g, '')
+      .replace(/\*([^*]+)\*/g, '$1')
+      // Clean up links
+      .replace(/\[ LINK: (.*?) \]/g, '$1')
+      // Normalize whitespace
+      .replace(/\s+/g, ' ')
+      .trim();
+
+    return cleanContent;
   } catch (error) {
     console.error('Error decoding MIME content:', error);
     return content;
@@ -309,11 +318,11 @@ export default function MailPage() {
       {/* 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`}>
-        {/* Mail Title */}
+        {/* Courrier Title */}
         <div className="p-3 border-b border-gray-100">
           <div className="flex items-center gap-2">
-            <Mail className="h-5 w-5 text-gray-600" />
-            <span className="font-semibold text-gray-900">Mail</span>
+            <Mail className="h-6 w-6 text-gray-600" />
+            <span className="text-xl font-semibold text-gray-900">COURRIER</span>
           </div>
         </div>
 
@@ -330,180 +339,188 @@ export default function MailPage() {
           </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">
-              {/* All Accounts Option */}
-              <Button
-                variant="ghost"
-                className="w-full justify-start px-2 py-1.5 text-sm"
-                onClick={() => setSelectedAccount(0)}
-              >
-                <div className="flex items-center gap-2 w-full">
-                  <div className="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
-                  <span className="font-medium">All</span>
-                </div>
-              </Button>
+        {/* Accounts Section with Scrollable Content */}
+        <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={() => 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">
+                {/* All Accounts Option */}
+                <Button
+                  variant="ghost"
+                  className="w-full justify-start px-2 py-1.5 text-sm"
+                  onClick={() => setSelectedAccount(0)}
+                >
+                  <div className="flex items-center gap-2 w-full">
+                    <div className="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
+                    <span className="font-medium">All</span>
+                  </div>
+                </Button>
 
-              {/* Mail Accounts List */}
-              {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.id)}
-                  >
-                    <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>
+                {/* Mail Accounts List */}
+                {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.id)}
                     >
-                      <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
-                        className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                        onClick={() => {
-                          const newName = prompt('Enter new account name:', account.name);
-                          if (newName) handleEditAccount(account.id, newName);
-                          setShowAccountActions(null);
-                        }}
-                      >
-                        <Edit className="h-4 w-4 inline-block mr-2" />
-                        Modify Account
-                      </button>
-                      <button
-                        className="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
-                        onClick={() => {
-                          setDeleteType('account');
-                          setItemToDelete(account.id);
-                          setShowDeleteConfirm(true);
-                          setShowAccountActions(null);
-                        }}
-                      >
-                        <Trash2 className="h-4 w-4 inline-block 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={handleAddAccount}
-              >
-                <Plus className="h-4 w-4 mr-2" />
-                Add Account
-              </Button>
-            </div>
-          )}
-        </div>
-
-        {/* Navigation */}
-        <nav className="flex-1 overflow-y-auto py-2">
-          <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" />
-                {sidebarOpen && <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" />
-                {sidebarOpen && <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" />
-                {sidebarOpen && <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" />
-                {sidebarOpen && <span>Trash</span>}
-              </Button>
-            </li>
-
-            {/* Folders Section */}
-            <li className="mt-4">
-              <Button 
-                variant="ghost"
-                className="w-full justify-between py-2 text-gray-600 hover:text-gray-900"
-                onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
-              >
-                <div className="flex items-center">
-                  <Folder className="h-4 w-4 mr-2" />
-                  {sidebarOpen && <span>Folders</span>}
-                </div>
-                {sidebarOpen && (foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />)}
-              </Button>
-
-              {/* Folders Dropdown */}
-              {foldersDropdownOpen && sidebarOpen && (
-                <ul className="mt-1 space-y-1">
-                  {folders.map(folder => (
-                    <li key={folder.id}>
+                      <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>
                       <Button
                         variant="ghost"
-                        className="w-full justify-start py-1.5 pl-8 text-sm text-gray-600 hover:text-gray-900"
-                        onClick={() => {
-                          setCurrentView(folder.name.toLowerCase());
-                          setSelectedEmail(null);
+                        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);
                         }}
                       >
-                        {folder.name}
+                        <MoreVertical className="h-4 w-4" />
                       </Button>
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </li>
-          </ul>
-        </nav>
+                    </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
+                          className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                          onClick={() => {
+                            const newName = prompt('Enter new account name:', account.name);
+                            if (newName) handleEditAccount(account.id, newName);
+                            setShowAccountActions(null);
+                          }}
+                        >
+                          <Edit className="h-4 w-4 inline-block mr-2" />
+                          Modify Account
+                        </button>
+                        <button
+                          className="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
+                          onClick={() => {
+                            setDeleteType('account');
+                            setItemToDelete(account.id);
+                            setShowDeleteConfirm(true);
+                            setShowAccountActions(null);
+                          }}
+                        >
+                          <Trash2 className="h-4 w-4 inline-block 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={handleAddAccount}
+                >
+                  <Plus className="h-4 w-4 mr-2" />
+                  Add Account
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {/* Scrollable Navigation */}
+          <div className="overflow-y-auto flex-1">
+            <nav className="p-3">
+              {/* Navigation items */}
+              <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" />
+                    {sidebarOpen && <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" />
+                    {sidebarOpen && <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" />
+                    {sidebarOpen && <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" />
+                    {sidebarOpen && <span>Trash</span>}
+                  </Button>
+                </li>
+
+                {/* Folders Section */}
+                <li className="mt-4">
+                  <Button 
+                    variant="ghost"
+                    className="w-full justify-between py-2 text-gray-600 hover:text-gray-900"
+                    onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
+                  >
+                    <div className="flex items-center">
+                      <Folder className="h-4 w-4 mr-2" />
+                      {sidebarOpen && <span>Folders</span>}
+                    </div>
+                    {sidebarOpen && (foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />)}
+                  </Button>
+
+                  {/* Folders Dropdown */}
+                  {foldersDropdownOpen && sidebarOpen && (
+                    <ul className="mt-1 space-y-1">
+                      {folders.map(folder => (
+                        <li key={folder.id}>
+                          <Button
+                            variant="ghost"
+                            className="w-full justify-start py-1.5 pl-8 text-sm text-gray-600 hover:text-gray-900"
+                            onClick={() => {
+                              setCurrentView(folder.name.toLowerCase());
+                              setSelectedEmail(null);
+                            }}
+                          >
+                            {folder.name}
+                          </Button>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
       </div>
 
       {/* Main content */}