diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index 82cd88be..c2735976 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -203,10 +203,10 @@ export default function ComposeEmail({
               <div
                 ref={composeBodyRef}
                 contentEditable
-                className="prose max-w-none min-h-[200px] p-4 focus:outline-none border rounded-md bg-white"
+                className="prose max-w-none min-h-[200px] p-4 focus:outline-none border rounded-md bg-white text-gray-900"
                 suppressContentEditableWarning
                 onInput={(e: React.FormEvent<HTMLDivElement>) => {
-                  const content = (e.target as HTMLDivElement).innerText;
+                  const content = (e.target as HTMLDivElement).innerHTML;
                   setComposeBody(content);
                 }}
                 onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
@@ -215,11 +215,21 @@ export default function ComposeEmail({
                     document.execCommand('insertLineBreak');
                   }
                 }}
+                onFocus={() => {
+                  const current = composeBodyRef.current;
+                  if (current && !current.innerHTML) {
+                    current.innerHTML = '';
+                  }
+                }}
                 style={{ 
                   outline: 'none',
                   cursor: 'text',
                   whiteSpace: 'pre-wrap',
-                  wordBreak: 'break-word'
+                  wordBreak: 'break-word',
+                  minHeight: '200px',
+                  padding: '1rem',
+                  border: '1px solid #e5e7eb',
+                  borderRadius: '0.375rem'
                 }}
               />
             </div>