diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx
index 32727d21..50c4fcbe 100644
--- a/app/courrier/page.tsx
+++ b/app/courrier/page.tsx
@@ -1089,18 +1089,11 @@ export default function CourrierPage() {
               </div>
             </div>
             
-            {/* Panel 3: Email Detail or Compose - Always visible */}
+            {/* Panel 3: Email Detail - Always visible */}
             <div className="flex-1 flex flex-col overflow-hidden">
               {/* Content for Panel 3 based on state but always visible */}
               <div className="flex-1 overflow-hidden bg-white">
-                {showComposeModal ? (
-                  <ComposeEmail 
-                    type={composeType}
-                    initialEmail={composeType !== 'new' ? selectedEmail : undefined}
-                    onSend={handleSendEmail}
-                    onClose={() => setShowComposeModal(false)}
-                  />
-                ) : selectedEmail ? (
+                {selectedEmail ? (
                   <EmailDetailView 
                     email={selectedEmail} 
                     onBack={() => {
@@ -1148,6 +1141,18 @@ export default function CourrierPage() {
         onLogin={handleGoToLogin}
         onClose={() => setShowLoginNeeded(false)}
       />
+
+      {/* Compose Email Dialog */}
+      <Dialog open={showComposeModal} onOpenChange={(open) => !open && setShowComposeModal(false)}>
+        <DialogContent className="sm:max-w-[800px] p-0 h-[80vh]">
+          <ComposeEmail 
+            type={composeType}
+            initialEmail={composeType !== 'new' ? selectedEmail : undefined}
+            onSend={handleSendEmail}
+            onClose={() => setShowComposeModal(false)}
+          />
+        </DialogContent>
+      </Dialog>
     </>
   );
 } 
\ No newline at end of file