diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx
index 81da9dd5..933ed776 100644
--- a/app/courrier/page.tsx
+++ b/app/courrier/page.tsx
@@ -110,40 +110,72 @@ function splitEmailHeadersAndBody(emailBody: string): { headers: string; body: s
   };
 }
 
-async function renderEmailContent(email: Email) {
-  try {
-    if (!email.body) return null;
+function EmailContent({ email }: { email: Email }) {
+  const [content, setContent] = useState<React.ReactNode>(null);
+  const [error, setError] = useState<string | null>(null);
 
-    // Ensure the email content is properly formatted
-    const formattedEmail = email.body.trim();
-    if (!formattedEmail) return null;
+  useEffect(() => {
+    let mounted = true;
 
-    const parsedEmail = await decodeEmail(formattedEmail);
-    
-    if (parsedEmail.html) {
-      return (
-        <div 
-          className="email-content prose prose-sm max-w-none dark:prose-invert"
-          dangerouslySetInnerHTML={{ __html: parsedEmail.html }}
-        />
-      );
-    } else if (parsedEmail.text) {
-      return (
-        <div className="email-content whitespace-pre-wrap">
-          {parsedEmail.text}
-        </div>
-      );
+    async function loadContent() {
+      try {
+        if (!email.body) {
+          if (mounted) setContent(null);
+          return;
+        }
+
+        const formattedEmail = email.body.trim();
+        if (!formattedEmail) {
+          if (mounted) setContent(null);
+          return;
+        }
+
+        const parsedEmail = await decodeEmail(formattedEmail);
+        
+        if (mounted) {
+          if (parsedEmail.html) {
+            setContent(
+              <div 
+                className="email-content prose prose-sm max-w-none dark:prose-invert"
+                dangerouslySetInnerHTML={{ __html: parsedEmail.html }}
+              />
+            );
+          } else if (parsedEmail.text) {
+            setContent(
+              <div className="email-content whitespace-pre-wrap">
+                {parsedEmail.text}
+              </div>
+            );
+          } else {
+            setContent(null);
+          }
+          setError(null);
+        }
+      } catch (err) {
+        console.error('Error rendering email content:', err);
+        if (mounted) {
+          setError('Error rendering email content. Please try again.');
+          setContent(null);
+        }
+      }
     }
-    
-    return null;
-  } catch (error) {
-    console.error('Error rendering email content:', error);
-    return (
-      <div className="text-red-500">
-        Error rendering email content. Please try again.
-      </div>
-    );
+
+    loadContent();
+
+    return () => {
+      mounted = false;
+    };
+  }, [email.body]);
+
+  if (error) {
+    return <div className="text-red-500">{error}</div>;
   }
+
+  return content;
+}
+
+function renderEmailContent(email: Email) {
+  return <EmailContent email={email} />;
 }
 
 function renderAttachments(attachments: MailParserAttachment[]) {