diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index ecd87c82..233d0289 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -62,13 +62,20 @@ export default function ComposeEmail({
   useEffect(() => {
     if (composeBodyRef.current) {
       const decodedContent = decodeComposeContent(composeBody);
-      composeBodyRef.current.innerHTML = `<br/><br/>${decodedContent}`;
+      composeBodyRef.current.innerHTML = `
+        <div style="min-height: 20px;"></div>
+        <div style="white-space: pre-wrap; word-wrap: break-word;">
+          ${decodedContent}
+        </div>
+      `;
       const range = document.createRange();
       const sel = window.getSelection();
-      range.setStart(composeBodyRef.current, 0);
-      range.collapse(true);
-      sel?.removeAllRanges();
-      sel?.addRange(range);
+      if (composeBodyRef.current.firstChild) {
+        range.setStart(composeBodyRef.current.firstChild, 0);
+        range.collapse(true);
+        sel?.removeAllRanges();
+        sel?.addRange(range);
+      }
     }
   }, [composeBody]);
 
@@ -259,8 +266,10 @@ export default function ComposeEmail({
                 className="w-full h-full mt-1 bg-white border border-gray-300 rounded-md p-2 text-gray-900 overflow-y-auto"
                 style={{ 
                   minHeight: '200px',
-                  writingMode: 'horizontal-tb',
-                  direction: 'ltr'
+                  whiteSpace: 'pre-wrap',
+                  wordWrap: 'break-word',
+                  overflowWrap: 'break-word',
+                  writingMode: 'horizontal-tb'
                 }}
               />
             </div>