diff --git a/whisperlivekit/web/live_transcription.css b/whisperlivekit/web/live_transcription.css
index a97a70c..9b2b520 100644
--- a/whisperlivekit/web/live_transcription.css
+++ b/whisperlivekit/web/live_transcription.css
@@ -198,6 +198,13 @@ body {
   align-items: center;
   gap: 15px;
   position: relative;
+  flex-wrap: wrap;
+}
+
+.buttons-container {
+  display: flex;
+  align-items: center;
+  gap: 15px;
 }
 
 .settings {
@@ -241,7 +248,6 @@ body {
   
   .settings {
     display: none;
-    top: 100%;
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: 18px;
@@ -253,6 +259,21 @@ body {
   }
 }
 
+@media (max-width: 600px) {
+  .settings-container {
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+  
+  .buttons-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+  }
+}
+
 .field {
   display: flex;
   flex-direction: column;
@@ -517,6 +538,10 @@ label {
     gap: 10px;
   }
   
+  .buttons-container {
+    gap: 10px;
+  }
+  
   .settings {
     justify-content: center;
     gap: 8px;
diff --git a/whisperlivekit/web/live_transcription.html b/whisperlivekit/web/live_transcription.html
index ed7ecb8..4ad2dcf 100644
--- a/whisperlivekit/web/live_transcription.html
+++ b/whisperlivekit/web/live_transcription.html
@@ -11,21 +11,23 @@
 <body>
     <div class="header-container">
         <div class="settings-container">
-            <button id="recordButton">
-                <div class="shape-container">
-                    <div class="shape"></div>
-                </div>
-                <div class="recording-info">
-                    <div class="wave-container">
-                        <canvas id="waveCanvas"></canvas>
+            <div class="buttons-container">
+                <button id="recordButton">
+                    <div class="shape-container">
+                        <div class="shape"></div>
                     </div>
-                    <div class="timer">00:00</div>
-                </div>
-            </button>
+                    <div class="recording-info">
+                        <div class="wave-container">
+                            <canvas id="waveCanvas"></canvas>
+                        </div>
+                        <div class="timer">00:00</div>
+                    </div>
+                </button>
 
-            <button id="settingsToggle" class="settings-toggle" title="Show/hide settings">
-                <img src="web/src/settings.svg" alt="Settings" />
-            </button>
+                <button id="settingsToggle" class="settings-toggle" title="Show/hide settings">
+                    <img src="web/src/settings.svg" alt="Settings" />
+                </button>
+            </div>
 
             <div class="settings">
                 <div class="field">
@@ -74,4 +76,4 @@
     <script src="live_transcription.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/whisperlivekit/web/live_transcription.js b/whisperlivekit/web/live_transcription.js
index 6d8bf89..c399295 100644
--- a/whisperlivekit/web/live_transcription.js
+++ b/whisperlivekit/web/live_transcription.js
@@ -175,10 +175,17 @@ function fmt1(x) {
   return Number.isFinite(n) ? n.toFixed(1) : x;
 }
 
-// Default WebSocket URL computation
-const host = window.location.hostname || "localhost";
-const port = window.location.port;
-const protocol = window.location.protocol === "https:" ? "wss" : "ws";
+let host, port, protocol;
+
+if (isExtension) {
+    host = "localhost";
+    port = 8000;
+    protocol = "ws";
+} else {
+    host = window.location.hostname || "localhost";
+    port = window.location.port || 8000;
+    protocol = window.location.protocol === "https:" ? "wss" : "ws";
+}
 const defaultWebSocketUrl = `${protocol}://${host}${port ? ":" + port : ""}/asr`;
 
 // Populate default caption and input
