diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index 96e2930d..0c8c8f81 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -53,10 +53,16 @@ export default function ComposeEmail({
 
   const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
     if (composeBodyRef.current) {
-      setComposeBody(composeBodyRef.current.innerHTML);
+      setComposeBody(composeBodyRef.current.textContent || '');
     }
   };
 
+  useEffect(() => {
+    if (composeBodyRef.current) {
+      composeBodyRef.current.textContent = composeBody;
+    }
+  }, [composeBody]);
+
   const handleFileAttachment = async (e: React.ChangeEvent<HTMLInputElement>) => {
     if (!e.target.files) return;
     
@@ -206,21 +212,20 @@ export default function ComposeEmail({
 
             {/* Message Body */}
             <div className="flex-1 min-h-[200px] overflow-auto">
+              <Label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</Label>
               <div
                 ref={composeBodyRef}
                 contentEditable
-                className="prose max-w-none min-h-[200px] p-4 border border-gray-300 rounded-lg bg-white"
+                id="message"
+                className="w-full mt-1 min-h-[200px] p-4 border border-gray-300 rounded-md bg-white text-gray-900"
                 style={{
-                  color: '#000000',
                   cursor: 'text',
                   whiteSpace: 'pre-wrap',
                   wordBreak: 'break-word',
                   fontFamily: 'inherit',
                   fontSize: 'inherit',
-                  lineHeight: 'inherit',
-                  textAlign: 'left'
+                  lineHeight: 'inherit'
                 }}
-                dangerouslySetInnerHTML={{ __html: composeBody }}
                 onInput={handleInput}
               />
             </div>