diff --git a/frontend/css/style.css b/frontend/css/style.css
index 38eec33..ec111f2 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -1,11 +1,57 @@
-/* Modern, clean, and accessible UI styles for Chatterbox TTS */
+/* CSS Custom Properties - Color Palette */
+:root {
+    /* Primary Colors */
+    --primary-blue: #163b65;
+    --primary-blue-dark: #357ab8;
+    --primary-blue-darker: #205081;
+    
+    /* Background Colors */
+    --bg-body: #f7f9fa;
+    --bg-white: #fff;
+    --bg-light: #f3f5f7;
+    --bg-lighter: #f9fafb;
+    --bg-blue-light: #f3f7fa;
+    --bg-blue-lighter: #eaf1fa;
+    --bg-gray-light: #f7f7f7;
+    
+    /* Text Colors */
+    --text-primary: #222;
+    --text-secondary: #2b2b2b;
+    --text-tertiary: #333;
+    --text-white: #fff;
+    --text-blue: #153f6f;
+    --text-blue-dark: #357ab8;
+    --text-blue-darker: #205081;
+    
+    /* Border Colors */
+    --border-light: #1b0404;
+    --border-medium: #cfd8dc;
+    --border-blue: #b5c6df;
+    --border-gray: #e3e3e3;
+    
+    /* Status Colors */
+    --error-bg: #e74c3c;
+    --error-bg-dark: #c0392b;
+    --warning-bg: #f9e79f;
+    --warning-text: #b7950b;
+    --warning-border: #f7ca18;
+    
+    /* Header/Footer */
+    --header-bg: #222e3a;
+    
+    /* Shadows */
+    --shadow-light: rgba(44,62,80,0.04);
+    --shadow-medium: rgba(44,62,80,0.06);
+    --shadow-strong: rgba(44,62,80,0.07);
+}
+
 body {
     font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
     line-height: 1.7;
     margin: 0;
     padding: 0;
-    background-color: #f7f9fa;
-    color: #222;
+    background-color: var(--bg-body);
+    color: var(--text-primary);
 }
 
 .container {
@@ -15,11 +61,11 @@ body {
 }
 
 header {
-    background: #222e3a;
-    color: #fff;
+    background: var(--header-bg);
+    color: var(--text-white);
     padding: 1.5rem 0 1rem 0;
     text-align: center;
-    border-bottom: 3px solid #4a90e2;
+    border-bottom: 3px solid var(--primary-blue);
 }
 
 h1 {
@@ -49,7 +95,6 @@ main {
     padding: 0;
 }
 
-
 #results-display.panel {
     flex: 1 1 100%;
     min-width: 0;
@@ -60,7 +105,7 @@ main {
 #dialog-items-table {
     width: 100%;
     border-collapse: collapse;
-    background: #fff;
+    background: var(--bg-white);
     border-radius: 8px;
     overflow: hidden;
     font-size: 1rem;
@@ -70,23 +115,22 @@ main {
 
 #dialog-items-table th, #dialog-items-table td {
     padding: 7px 10px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--border-light);
     text-align: left;
     vertical-align: middle;
-    font-weight: 400;
+    font-weight: 300;
     font-size: 0.97rem;
-    color: #2b2b2b;
+    color: var(--text-secondary);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
-
 /* Widen the Text/Duration column */
 #dialog-items-table th:nth-child(3), #dialog-items-table td:nth-child(3) {
-    min-width: 240px;
-    width: 40%;
-    font-weight: 400;
+    min-width: 320px;
+    width: 50%;
+    font-weight: 300;
     font-size: 1rem;
 }
 
@@ -108,7 +152,6 @@ main {
     padding-right: 0;
 }
 
-
 #dialog-items-table th:first-child, #dialog-items-table td.type-icon-cell {
     width: 44px;
     min-width: 36px;
@@ -131,14 +174,16 @@ main {
 }
 
 #dialog-items-table th {
-    background: #f3f7fa;
-    color: #4a90e2;
+    background: var(--bg-light);
+    color: var(--primary-blue);
     font-weight: 600;
     font-size: 1.05rem;
 }
+
 #dialog-items-table tr:last-child td {
     border-bottom: none;
 }
+
 #dialog-items-table td.actions {
     text-align: center;
     min-width: 110px;
@@ -149,23 +194,26 @@ main {
 details#generation-log-details {
     margin-bottom: 0;
     border-radius: 4px;
-    background: #f3f5f7;
-    box-shadow: 0 1px 3px rgba(44,62,80,0.04);
+    background: var(--bg-light);
+    box-shadow: 0 1px 3px var(--shadow-light);
     padding: 0 0 0 0;
     transition: box-shadow 0.15s;
 }
+
 details#generation-log-details[open] {
-    box-shadow: 0 2px 8px rgba(44,62,80,0.07);
-    background: #f9fafb;
+    box-shadow: 0 2px 8px var(--shadow-strong);
+    background: var(--bg-lighter);
 }
+
 details#generation-log-details summary {
     font-size: 1rem;
-    color: #357ab8;
+    color: var(--text-blue);
     padding: 10px 0 6px 0;
     outline: none;
 }
+
 details#generation-log-details summary:focus {
-    outline: 2px solid #4a90e2;
+    outline: 2px solid var(--primary-blue);
     border-radius: 3px;
 }
 
@@ -192,9 +240,9 @@ details#generation-log-details summary:focus {
 }
 
 .card {
-    background: #fff;
+    background: var(--bg-white);
     border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(44,62,80,0.07);
+    box-shadow: 0 2px 8px var(--shadow-medium);
     padding: 18px 20px;
     margin-bottom: 18px;
 }
@@ -214,19 +262,19 @@ h2 {
     font-size: 1.5rem;
     margin-top: 0;
     margin-bottom: 16px;
-    color: #4a90e2;
+    color: var(--primary-blue);
     letter-spacing: 0.5px;
 }
 
 h3 {
     font-size: 1.1rem;
     margin-bottom: 10px;
-    color: #333;
+    color: var(--text-tertiary);
 }
 
 .x-remove-btn {
-    background: #e74c3c;
-    color: #fff;
+    background: var(--error-bg);
+    color: var(--text-white);
     border: none;
     border-radius: 50%;
     width: 32px;
@@ -239,15 +287,16 @@ h3 {
     cursor: pointer;
     transition: background 0.15s;
     margin: 0 3px;
-    box-shadow: 0 1px 2px rgba(44,62,80,0.06);
+    box-shadow: 0 1px 2px var(--shadow-light);
     outline: none;
     padding: 0;
     vertical-align: middle;
 }
+
 .x-remove-btn:hover, .x-remove-btn:focus {
-    background: #c0392b;
-    color: #fff;
-    outline: 2px solid #e74c3c;
+    background: var(--error-bg-dark);
+    color: var(--text-white);
+    outline: 2px solid var(--error-bg);
 }
 
 .form-row {
@@ -263,9 +312,9 @@ label {
     margin-bottom: 0;
 }
 
-input[type='text'], input[type='file'] {
+input[type='text'], input[type='file'], textarea {
     padding: 8px 10px;
-    border: 1px solid #cfd8dc;
+    border: 1px solid var(--border-medium);
     border-radius: 4px;
     font-size: 1rem;
     width: 100%;
@@ -273,14 +322,21 @@ input[type='text'], input[type='file'] {
 }
 
 input[type='file'] {
-    background: #f7f7f7;
+    background: var(--bg-gray-light);
     font-size: 0.97rem;
 }
 
+.dialog-edit-textarea {
+    min-height: 60px;
+    resize: vertical;
+    font-family: inherit;
+    line-height: 1.4;
+}
+
 button {
     padding: 9px 18px;
-    background: #4a90e2;
-    color: #fff;
+    background: var(--primary-blue);
+    color: var(--text-white);
     border: none;
     border-radius: 5px;
     cursor: pointer;
@@ -291,9 +347,9 @@ button {
 }
 
 .generate-line-btn, .play-line-btn {
-    background: #f3f7fa;
-    color: #357ab8;
-    border: 1.5px solid #b5c6df;
+    background: var(--bg-blue-light);
+    color: var(--text-blue);
+    border: 1.5px solid var(--border-blue);
     border-radius: 50%;
     width: 32px;
     height: 32px;
@@ -303,26 +359,29 @@ button {
     justify-content: center;
     margin: 0 3px;
     padding: 0;
-    box-shadow: 0 1px 2px rgba(44,62,80,0.06);
+    box-shadow: 0 1px 2px var(--shadow-light);
     vertical-align: middle;
 }
+
 .generate-line-btn:disabled, .play-line-btn:disabled {
     opacity: 0.45;
     cursor: not-allowed;
 }
+
 .generate-line-btn.loading {
-    background: #f9e79f;
-    color: #b7950b;
-    border-color: #f7ca18;
+    background: var(--warning-bg);
+    color: var(--warning-text);
+    border-color: var(--warning-border);
 }
+
 .generate-line-btn:hover, .play-line-btn:hover {
-    background: #eaf1fa;
-    color: #205081;
-    border-color: #357ab8;
+    background: var(--bg-blue-lighter);
+    color: var(--text-blue-darker);
+    border-color: var(--text-blue);
 }
 
 button:hover, button:focus {
-    background: #357ab8;
+    background: var(--primary-blue-dark);
     outline: none;
 }
 
@@ -338,7 +397,7 @@ button:hover, button:focus {
 
 #speaker-list li {
     padding: 7px 0;
-    border-bottom: 1px solid #e3e3e3;
+    border-bottom: 1px solid var(--border-gray);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -349,7 +408,7 @@ button:hover, button:focus {
 }
 
 pre {
-    background: #f3f5f7;
+    background: var(--bg-light);
     padding: 12px;
     border-radius: 4px;
     font-size: 0.98rem;
@@ -367,8 +426,8 @@ audio {
 #zip-archive-link {
     display: inline-block;
     margin-right: 10px;
-    color: #fff;
-    background: #4a90e2;
+    color: var(--text-white);
+    background: var(--primary-blue);
     padding: 7px 16px;
     border-radius: 4px;
     text-decoration: none;
@@ -377,17 +436,17 @@ audio {
 }
 
 #zip-archive-link:hover, #zip-archive-link:focus {
-    background: #357ab8;
+    background: var(--primary-blue-dark);
 }
 
 footer {
     text-align: center;
     padding: 20px 0;
-    background: #222e3a;
-    color: #fff;
+    background: var(--header-bg);
+    color: var(--text-white);
     margin-top: 40px;
     font-size: 1rem;
-    border-top: 3px solid #4a90e2;
+    border-top: 3px solid var(--primary-blue);
 }
 
 @media (max-width: 900px) {
@@ -422,9 +481,9 @@ footer {
 }
 
 .move-up-btn, .move-down-btn {
-    background: #f3f7fa;
-    color: #357ab8;
-    border: 1.5px solid #b5c6df;
+    background: var(--bg-blue-light);
+    color: var(--text-blue);
+    border: 1.5px solid var(--border-blue);
     border-radius: 50%;
     width: 32px;
     height: 32px;
@@ -434,7 +493,7 @@ footer {
     justify-content: center;
     margin: 0 3px;
     padding: 0;
-    box-shadow: 0 1px 2px rgba(44,62,80,0.06);
+    box-shadow: 0 1px 2px var(--shadow-light);
     vertical-align: middle;
     cursor: pointer;
     transition: background 0.15s, color 0.15s, border-color 0.15s;
@@ -446,12 +505,12 @@ footer {
 }
 
 .move-up-btn:hover:not(:disabled), .move-down-btn:hover:not(:disabled) {
-    background: #eaf1fa;
-    color: #205081;
-    border-color: #357ab8;
+    background: var(--bg-blue-lighter);
+    color: var(--text-blue-darker);
+    border-color: var(--text-blue);
 }
 
 .move-up-btn:focus, .move-down-btn:focus {
-    outline: 2px solid #4a90e2;
+    outline: 2px solid var(--primary-blue);
     outline-offset: 2px;
 }
diff --git a/frontend/index.html b/frontend/index.html
index 02c0180..2549897 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -38,6 +38,7 @@
                 <div class="dialog-controls form-row">
                     <button id="add-speech-line-btn">Add Speech Line</button>
                     <button id="add-silence-line-btn">Add Silence Line</button>
+                    <button id="generate-dialog-btn">Generate Dialog</button>
                 </div>
                 <div class="dialog-controls form-row">
                     <label for="output-base-name">Output Base Name:</label>
@@ -48,7 +49,6 @@
                     <input type="file" id="load-script-input" accept=".jsonl" style="display: none;">
                     <button id="load-script-btn">Load Script</button>
                 </div>
-                <button id="generate-dialog-btn">Generate Dialog</button>
             </section>
         </div>
         <!-- Results below -->
diff --git a/frontend/js/app.js b/frontend/js/app.js
index bfd65d1..7a44719 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -201,13 +201,17 @@ async function initializeDialogEditor() {
             // Double-click to edit
             textTd.ondblclick = () => {
                 textTd.innerHTML = '';
-                const input = document.createElement('input');
-                input.className = 'dialog-edit-input';
+                let input;
                 if (item.type === 'speech') {
-                    input.type = 'text';
+                    // Use textarea for speech text to enable multi-line editing
+                    input = document.createElement('textarea');
+                    input.className = 'dialog-edit-textarea';
                     input.value = item.text;
-                    input.size = Math.max(16, item.text.length);
+                    input.rows = Math.max(2, Math.ceil(item.text.length / 50)); // Auto-size based on content
                 } else {
+                    // Use number input for duration
+                    input = document.createElement('input');
+                    input.className = 'dialog-edit-input';
                     input.type = 'number';
                     input.value = item.duration;
                     input.min = 0.1;
@@ -215,10 +219,14 @@ async function initializeDialogEditor() {
                 }
                 input.onblur = saveEdit;
                 input.onkeydown = (e) => {
-                    if (e.key === 'Enter') {
+                    if (e.key === 'Enter' && item.type === 'silence') {
+                        // Only auto-save on Enter for duration inputs
                         input.blur();
                     } else if (e.key === 'Escape') {
                         renderDialogItems();
+                    } else if (e.key === 'Enter' && e.ctrlKey && item.type === 'speech') {
+                        // Ctrl+Enter to save for speech text
+                        input.blur();
                     }
                 };
                 textTd.appendChild(input);
diff --git a/speaker_data/speakers.yaml b/speaker_data/speakers.yaml
index fd057f4..f92a7c0 100644
--- a/speaker_data/speakers.yaml
+++ b/speaker_data/speakers.yaml
@@ -13,3 +13,6 @@ fb84ce1c-f32d-4df9-9673-2c64e9603133:
 90fcd672-ba84-441a-ac6c-0449a59653bd:
   name: dummy_speaker
   sample_path: speaker_samples/90fcd672-ba84-441a-ac6c-0449a59653bd.wav
+a6387c23-4ca4-42b5-8aaf-5699dbabbdf0:
+  name: Mike
+  sample_path: speaker_samples/a6387c23-4ca4-42b5-8aaf-5699dbabbdf0.wav