diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index 02c457eb..f20f17b8 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -214,12 +214,13 @@ export default function ComposeEmail({
             {/* Message Body */}
             <div className="flex-1">
               <Label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</Label>
-              <Textarea
-                id="message"
-                value={composeBody}
-                onChange={(e) => setComposeBody(e.target.value)}
-                placeholder="Write your message..."
-                className="w-full h-full mt-1 bg-white border-gray-300 text-gray-900 resize-none"
+              <div
+                ref={composeBodyRef}
+                contentEditable
+                onInput={handleInput}
+                className="w-full h-full mt-1 bg-white border border-gray-300 rounded-md p-2 text-gray-900 overflow-y-auto prose max-w-none"
+                style={{ minHeight: '200px' }}
+                dangerouslySetInnerHTML={{ __html: composeBody }}
               />
             </div>
           </div>