diff --git a/static/css/edit.css b/static/css/edit.css
index 6e49aaa..9ae33eb 100644
--- a/static/css/edit.css
+++ b/static/css/edit.css
@@ -2,6 +2,7 @@
     height: 500px !important;
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
     font-size: 13px;
+    border: none;
 }
 
 .CodeMirror-gutters {
@@ -17,13 +18,61 @@
     border-left: 1px solid #fff;
 }
 
+#haproxy_config {
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+    font-size: 13px;
+    line-height: 1.5;
+    padding: 12px;
+    border: none;
+    width: 100%;
+    overflow: hidden;
+    resize: none;
+    background: #1e1e1e;
+    color: #e8e8e8;
+}
+
 #edit_form button {
     white-space: nowrap;
 }
 
+/* Alert styling */
+.alert {
+    border-radius: 6px;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+.alert-success {
+    background-color: #d4edda;
+    border-color: #c3e6cb;
+    color: #155724;
+}
+
+.alert-danger {
+    background-color: #f8d7da;
+    border-color: #f5c6cb;
+    color: #721c24;
+}
+
+.alert-warning {
+    background-color: #fff3cd;
+    border-color: #ffeaa7;
+    color: #856404;
+}
+
+.alert-info {
+    background-color: #d1ecf1;
+    border-color: #bee5eb;
+    color: #0c5460;
+}
+
 @media (max-width: 768px) {
     .CodeMirror {
         height: 300px !important;
         font-size: 12px;
     }
+    
+    #haproxy_config {
+        font-size: 12px;
+        min-height: 300px;
+    }
 }
\ No newline at end of file
diff --git a/templates/edit.html b/templates/edit.html
index 4fe1a13..7c12de7 100644
--- a/templates/edit.html
+++ b/templates/edit.html
@@ -21,7 +21,7 @@
 
 <!-- Alert Section -->
 {% if check_output %}
-<div class="alert alert-{{ check_level|default('info') }} alert-dismissible fade show" role="alert">
+<div class="alert alert-{{ check_level|default('info') }} alert-dismissible fade show mb-3" role="alert">
     <div class="d-flex align-items-start">
         <div>
             <i class="bi bi-{% if check_level == 'success' %}check-circle-fill{% elif check_level == 'danger' %}exclamation-circle-fill{% elif check_level == 'warning' %}exclamation-triangle-fill{% else %}info-circle-fill{% endif %} me-2" style="font-size: 1.2rem;"></i>
@@ -33,7 +33,7 @@
                 {% elif check_level == 'warning' %}⚠ Warning
                 {% else %}ℹ Info{% endif %}
             </strong>
-            <div class="mt-2 small" style="font-family: monospace; background-color: rgba(0,0,0,0.1); padding: 8px; border-radius: 4px; max-height: 200px; overflow-y: auto;">
+            <div class="mt-2 small" style="font-family: monospace; background-color: rgba(0,0,0,0.15); padding: 10px; border-radius: 4px; max-height: 250px; overflow-y: auto; line-height: 1.4;">
                 {{ check_output|replace('\n', '<br>') }}
             </div>
         </div>
@@ -45,21 +45,22 @@
 <!-- Editor Section -->
 <div class="card shadow-sm">
     <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
-        <h5 class="mb-0"><i class="bi bi-pencil-square me-2"></i>HAProxy Configuration Editor</h5>
+        <div>
+            <h5 class="mb-0"><i class="bi bi-pencil-square me-2"></i>HAProxy Configuration Editor</h5>
+        </div>
         <small class="text-white-50">Real-time editor with syntax highlighting</small>
     </div>
     
     <div class="card-body" style="padding: 0;">
         <form method="post" id="edit_form">
             <!-- Editor Container -->
-            <div style="border: 1px solid #dee2e6; border-radius: 0 0 4px 4px; overflow: hidden;">
+            <div style="border-bottom: 1px solid #dee2e6;">
                 <textarea id="haproxy_editor" name="haproxy_config" style="display: none;">{{ config_content }}</textarea>
                 <!-- Fallback textarea (hidden by default) -->
-                <textarea id="haproxy_config" name="haproxy_config" style="display: none; width: 100%; border: none; font-family: monospace; font-size: 13px; resize: none; padding: 12px; min-height: 500px;">{{ config_content }}</textarea>
+                <textarea id="haproxy_config" name="haproxy_config" style="display: none; width: 100%; border: none; font-family: monospace; font-size: 13px; resize: none; padding: 12px; min-height: 500px; background: #1e1e1e; color: #e8e8e8;"></textarea>
             </div>
             
-            <!-- Toolbar -->
-            <div class="p-3 border-top bg-light d-flex justify-content-between align-items-center flex-wrap gap-2">
+            <div class="p-3 bg-dark d-flex justify-content-between align-items-center flex-wrap gap-2" style="border-top: 1px solid #444;">
                 <div class="d-flex gap-2">
                     <button type="submit" class="btn btn-success btn-sm" name="action" value="check">
                         <i class="bi bi-check-circle me-1"></i>Validate Configuration
@@ -71,7 +72,7 @@
                         <i class="bi bi-arrow-left me-1"></i>Cancel
                     </a>
                 </div>
-                <small class="text-muted">
+                <small class="text-muted" style="color: #aaa !important;">
                     <i class="bi bi-info-circle me-1"></i>
                     <span id="line_col">Line 1, Col 1</span> | 
                     <span id="char_count">0</span> characters
@@ -81,6 +82,7 @@
     </div>
 </div>
 
+
 <!-- CodeMirror JS -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/nginx/nginx.min.js"></script>