diff --git a/wasm-build/demo.html b/wasm-build/demo.html
index fd28e4f..9686f69 100644
--- a/wasm-build/demo.html
+++ b/wasm-build/demo.html
@@ -12,9 +12,6 @@
             padding: 20px;
             background-color: #f5f5f5;
         }
-        .header { text-align: center; margin-bottom: 20px; }
-        .header h1 { color: #333; margin: 0 0 10px 0; }
-        .header p { color: #666; margin: 0; }
         .container { display: flex; gap: 20px; margin-bottom: 20px; }
         .canvas-container {
             flex: 1; background: white; border-radius: 8px; padding: 20px;
@@ -25,53 +22,46 @@
             margin: 0 auto; cursor: crosshair; touch-action: none;
             width: 100%; height: auto; aspect-ratio: 4 / 3;
         }
-        .controls {
+        .output-container {
             width: 280px; background: white; border-radius: 8px; padding: 20px;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            display: flex; flex-direction: column;
+        }
+        .output-container h2 { margin-top: 0; color: #333; font-size: 18px; }
+        #output-text {
+            flex: 1; width: 100%; min-height: 100px; padding: 10px;
+            border: 1px solid #ddd; border-radius: 4px; font-size: 16px; resize: none;
+        }
+        .controls {
+            display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
+            background: white; border-radius: 8px; padding: 15px 20px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
-        .control-group { margin-bottom: 15px; }
+        .control-group { margin-bottom: 0; }
         .control-group label {
             display: block; margin-bottom: 5px; font-weight: bold; color: #333;
         }
-        .control-group select, .control-group input {
-            width: 100%; padding: 8px; border: 1px solid #ddd;
-            border-radius: 4px; font-size: 14px;
+        .control-group select {
+            padding: 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;
         }
         .control-group button {
-            width: 100%; padding: 10px; background-color: #4CAF50; color: white;
+            padding: 8px 16px; background-color: #4CAF50; color: white;
             border: none; border-radius: 4px; cursor: pointer; font-size: 14px;
         }
         .control-group button:hover { background-color: #45a049; }
         .control-group button:disabled { background-color: #ccc; cursor: not-allowed; }
         .toggle-group {
-            display: flex; align-items: center; gap: 8px; margin-bottom: 15px;
-        }
-        .toggle-group label { margin: 0; cursor: pointer; font-weight: normal; }
-        .toggle-group input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
-        .output-container {
-            background: white; border-radius: 8px; padding: 20px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px;
-        }
-        .output-container h2 { margin-top: 0; color: #333; }
-        #output-text {
-            width: 100%; height: 100px; padding: 10px; border: 1px solid #ddd;
-            border-radius: 4px; font-size: 16px; resize: vertical;
-        }
-        .status {
-            background: white; border-radius: 8px; padding: 15px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px;
-        }
-        .status.success { border-left: 4px solid #4CAF50; }
-        .status.error { border-left: 4px solid #f44336; }
-        .status.loading { border-left: 4px solid #ff9800; }
-        .status-text { color: #333; margin: 0; }
-        .instructions {
-            background: #e3f2fd; border-radius: 8px; padding: 15px;
-            border-left: 4px solid #2196F3; margin-bottom: 20px;
+            display: flex; align-items: center; gap: 6px; margin-bottom: 0;
         }
-        .instructions h3 { margin-top: 0; color: #1976D2; }
-        .instructions p { color: #333; margin: 5px 0; }
+        .toggle-group label { margin: 0; cursor: pointer; font-weight: normal; color: #333; }
+        .toggle-group input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
+        .speed-group { min-width: 200px; }
+        .speed-group input[type="range"] { width: 100%; cursor: pointer; }
         .canvas-stats { text-align: center; margin-top: 10px; font-size: 12px; color: #666; }
+        @media (max-width: 850px) {
+            .container { flex-direction: column; }
+            .output-container { width: 100%; }
+        }
     </style>
 </head>
 <body>
@@ -83,35 +73,35 @@
             </div>
         </div>
 
-        <div class="controls">
-            <div class="control-group">
-                <label for="alphabet-select">Alphabet:</label>
-                <select id="alphabet-select" disabled></select>
-            </div>
-            <div class="control-group">
-                <label for="speed-slider">Speed: <span id="speed-value">100</span>%</label>
-                <input type="range" id="speed-slider" min="20" max="400" value="100" disabled>
-            </div>
-            <div class="toggle-group">
-                <input type="checkbox" id="autospeed-toggle" disabled>
-                <label for="autospeed-toggle">Auto speed (adjusts to your input)</label>
-            </div>
-            <div class="toggle-group">
-                <input type="checkbox" id="learning-toggle" disabled>
-                <label for="learning-toggle">Learning (adapt language model)</label>
-            </div>
-            <div class="control-group">
-                <button id="reset-btn" disabled>Clear Text</button>
-            </div>
-            <div class="control-group">
-                <button id="full-reset-btn" disabled>Full Reset</button>
-            </div>
+        <div class="output-container">
+            <h2>Output</h2>
+            <textarea id="output-text" readonly placeholder="Text appears here..."></textarea>
         </div>
     </div>
 
-    <div class="output-container">
-        <h2>Output Text</h2>
-        <textarea id="output-text" readonly placeholder="Your text will appear here as you type..."></textarea>
+    <div class="controls">
+        <div class="control-group">
+            <label for="alphabet-select">Alphabet</label>
+            <select id="alphabet-select" disabled></select>
+        </div>
+        <div class="control-group speed-group">
+            <label for="speed-slider">Speed: <span id="speed-value">100</span>%</label>
+            <input type="range" id="speed-slider" min="20" max="400" value="100" disabled>
+        </div>
+        <div class="toggle-group">
+            <input type="checkbox" id="autospeed-toggle" disabled>
+            <label for="autospeed-toggle">Auto speed</label>
+        </div>
+        <div class="toggle-group">
+            <input type="checkbox" id="learning-toggle" disabled>
+            <label for="learning-toggle">Learning</label>
+        </div>
+        <div class="control-group">
+            <button id="reset-btn" disabled>Clear Text</button>
+        </div>
+        <div class="control-group">
+            <button id="full-reset-btn" disabled>Full Reset</button>
+        </div>
     </div>
 
     <script src="dasher-wasm-wrapper.js"></script>