diff --git a/static/app.js b/static/app.js
index d517fcc..ec432e0 100644
--- a/static/app.js
+++ b/static/app.js
@@ -38,26 +38,26 @@ let currentMode = 'image';
 
 // ── Mode Switching ──────────────────────────────
 
-document.querySelectorAll('.mode-tab').forEach(tab => {
-  tab.addEventListener('click', () => {
-    document.querySelectorAll('.mode-tab').forEach(t => t.classList.remove('active'));
-    tab.classList.add('active');
-    currentMode = tab.dataset.mode;
+const modeImage = $('modeImage');
+const modePattern = $('modePattern');
 
-    if (currentMode === 'pattern') {
-      imageControls.style.display = 'none';
-      patternControls.style.display = 'flex';
-      generateBtn.style.display = 'none';
-      randomBtn.style.display = '';
-    } else {
-      imageControls.style.display = 'flex';
-      patternControls.style.display = 'none';
-      generateBtn.style.display = '';
-      generateBtn.disabled = !currentFile;
-      randomBtn.style.display = 'none';
-    }
-  });
-});
+function switchMode(mode) {
+  currentMode = mode;
+  modeImage.classList.toggle('active', mode === 'image');
+  modePattern.classList.toggle('active', mode === 'pattern');
+
+  imageControls.style.display = mode === 'image' ? 'flex' : 'none';
+  patternControls.style.display = mode === 'pattern' ? 'flex' : 'none';
+  generateBtn.style.display = mode === 'image' ? '' : 'none';
+  randomBtn.style.display = mode === 'pattern' ? '' : 'none';
+
+  if (mode === 'image') {
+    generateBtn.disabled = !currentFile;
+  }
+}
+
+modeImage.addEventListener('click', () => switchMode('image'));
+modePattern.addEventListener('click', () => switchMode('pattern'));
 
 // ── File Handling ──────────────────────────────
 
diff --git a/static/style.css b/static/style.css
index cc7c06c..9222bc3 100644
--- a/static/style.css
+++ b/static/style.css
@@ -38,11 +38,11 @@ header {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 6px 12px;
+  padding: 8px 12px;
   background: var(--surface);
   border-bottom: 1px solid var(--border);
   overflow-x: auto;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
 }
 
 /* ── Mode Tabs ─────────────────────────────── */
@@ -68,6 +68,10 @@ header {
   transition: all 0.2s;
   white-space: nowrap;
   letter-spacing: 0.3px;
+  user-select: none;
+  -webkit-user-select: none;
+  position: relative;
+  z-index: 1;
 }
 
 .mode-tab:hover {
diff --git a/templates/index.html b/templates/index.html
index 0c294bb..20593ed 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -17,9 +17,9 @@
 <!-- Controls Bar -->
 <div class="controls">
   <!-- Mode tabs -->
-  <div class="mode-tabs">
-    <button class="mode-tab active" data-mode="image">&#x1F5BC; Image</button>
-    <button class="mode-tab" data-mode="pattern">&#x2728; Patterns</button>
+  <div class="mode-tabs" id="modeTabs">
+    <button type="button" class="mode-tab active" data-mode="image" id="modeImage">&#x1F5BC; Image</button>
+    <button type="button" class="mode-tab" data-mode="pattern" id="modePattern">&#x2728; Patterns</button>
   </div>
 
   <!-- Image mode controls -->