diff --git a/src/ui.js b/src/ui.js
index 22b07d7..984aa60 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -479,18 +479,35 @@ export async function toggleHermesModal() {
 	}
 }
 
-// Function to open Hermes modal
+// Function to open Hermes modal - Mobile-first design
 export async function openHermesModal() {
-	// Create modal using dialog element like TTS modal
 	const modal = document.createElement("dialog");
 	modal.id = "hermes-modal";
-	modal.style.position = "fixed";
-	modal.style.zIndex = "2000";
-
-	if (USE_CUSTOM_STYLING) {
-		modal.style.cssText += `
-      width: 95vw;
-      max-height: 95vh;
+	
+	// Mobile-first: full screen on mobile, centered on desktop
+	const isMobile = window.innerWidth <= 768;
+	
+	if (isMobile) {
+		modal.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      border: none;
+      border-radius: 0;
+      background: white;
+      margin: 0;
+      padding: 0;
+      z-index: 2000;
+      overflow: hidden;
+    `;
+	} else {
+		modal.style.cssText = `
+      position: fixed;
+      width: 90vw;
+      max-width: 800px;
+      height: 90vh;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
@@ -499,19 +516,9 @@ export async function openHermesModal() {
       box-shadow: 0 20px 40px rgba(0,0,0,0.3);
       background: white;
       margin: 0;
+      padding: 0;
+      z-index: 2000;
       overflow: hidden;
-      box-sizing: border-box;
-    `;
-	} else {
-		modal.style.cssText += `
-      width: 95vw;
-      max-height: 95vh;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      margin: 0;
-      overflow: hidden;
-      box-sizing: border-box;
     `;
 	}