diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index 3d6ab488..b588fb80 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -315,7 +315,14 @@ export default function ComposeEmail({
                 contentEditable="true"
                 onInput={handleInput}
                 className="flex-1 w-full bg-white border border-gray-300 rounded-md p-4 text-gray-900 overflow-y-auto focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                style={{ direction: 'ltr' }}
+                style={{ 
+                  direction: 'ltr',
+                  maxHeight: 'calc(100vh - 400px)',
+                  minHeight: '200px',
+                  overflowY: 'auto',
+                  scrollbarWidth: 'thin',
+                  scrollbarColor: '#cbd5e0 #f3f4f6'
+                }}
                 dir="ltr"
                 spellCheck="true"
                 role="textbox"
@@ -328,11 +335,15 @@ export default function ComposeEmail({
                     min-height: 100px;
                     margin-bottom: 20px;
                     outline: none;
+                    overflow-y: auto;
+                    max-height: 300px;
                   }
                   .quoted-content {
                     color: #666;
                     user-select: text;
                     -webkit-user-select: text;
+                    overflow-y: auto;
+                    max-height: 300px;
                   }
                   .quoted-content blockquote {
                     margin: 0.8ex;
@@ -345,6 +356,21 @@ export default function ComposeEmail({
                   [contenteditable="true"]:focus {
                     outline: none;
                   }
+                  /* Custom scrollbar styles */
+                  ::-webkit-scrollbar {
+                    width: 8px;
+                  }
+                  ::-webkit-scrollbar-track {
+                    background: #f3f4f6;
+                    border-radius: 4px;
+                  }
+                  ::-webkit-scrollbar-thumb {
+                    background: #cbd5e0;
+                    border-radius: 4px;
+                  }
+                  ::-webkit-scrollbar-thumb:hover {
+                    background: #a0aec0;
+                  }
                 `}</style>
               </div>
             </div>