diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx
index b7d0a76c..98ca72bf 100644
--- a/app/courrier/page.tsx
+++ b/app/courrier/page.tsx
@@ -1519,90 +1519,92 @@ export default function CourrierPage() {
   return (
     <>
       {/* Main layout */}
-      <div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
-        {/* Sidebar */}
-        <div className={`${sidebarOpen ? 'w-60' : 'w-16'} bg-white/95 backdrop-blur-sm border-r border-gray-100 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 and refresh button */}
-          <div className="p-2 border-b border-gray-100 flex items-center gap-2">
-            <Button 
-              className="flex-1 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="container mx-auto px-4 py-6 h-[calc(100vh-3rem)]">
+        <div className="flex h-full bg-gray-50 text-gray-900 overflow-hidden">
+          {/* Sidebar */}
+          <div className={`${sidebarOpen ? 'w-60' : 'w-16'} bg-white/95 backdrop-blur-sm border-r border-gray-100 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">
-                <PlusIcon className="h-3.5 w-3.5" />
-                <span>Compose</span>
+                <Mail className="h-6 w-6 text-gray-600" />
+                <span className="text-xl font-semibold text-gray-900">COURRIER</span>
               </div>
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={() => handleMailboxChange('INBOX')}
-              className="text-gray-600 hover:text-gray-900 hover:bg-gray-100"
-            >
-              <RefreshCw className="h-4 w-4" />
-            </Button>
-          </div>
+            </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 => (
-                  <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>
+            {/* Compose button and refresh button */}
+            <div className="p-2 border-b border-gray-100 flex items-center gap-2">
+              <Button 
+                className="flex-1 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>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => handleMailboxChange('INBOX')}
+                className="text-gray-600 hover:text-gray-900 hover:bg-gray-100"
+              >
+                <RefreshCw className="h-4 w-4" />
+              </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 => (
+                    <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>
-                        <span className="text-xs text-gray-500 ml-4">{account.email}</span>
-                      </div>
-                    </Button>
-                  </div>
-                ))}
-              </div>
-            )}
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {/* Navigation */}
+            {renderSidebarNav()}
           </div>
 
-          {/* Navigation */}
-          {renderSidebarNav()}
-        </div>
-
-        {/* Main content area */}
-        <div className="flex-1 flex overflow-hidden">
-          {/* Email list panel */}
-          {renderEmailListWrapper()}
+          {/* Main content area */}
+          <div className="flex-1 flex overflow-hidden">
+            {/* Email list panel */}
+            {renderEmailListWrapper()}
+          </div>
         </div>
       </div>