diff --git a/uncloseai.js b/uncloseai.js
index 9e32e87..131919a 100644
--- a/uncloseai.js
+++ b/uncloseai.js
@@ -967,7 +967,7 @@ let hermesModalOpen = false;
 
 // Function to toggle Hermes modal
 function toggleHermesModal() {
-  const existingModal = document.getElementById('hermes-modal-backdrop');
+  const existingModal = document.getElementById('hermes-modal');
   if (existingModal) {
     document.body.removeChild(existingModal);
     hermesModalOpen = false;
@@ -979,49 +979,41 @@ function toggleHermesModal() {
 
 // Function to open Hermes modal
 function openHermesModal() {
-  // Create modal backdrop
-  const modalBackdrop = document.createElement('div');
-  modalBackdrop.id = 'hermes-modal-backdrop';
-  modalBackdrop.style.cssText = `
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 2000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  `;
-  
-  // Create modal container
-  const modal = document.createElement('div');
+  // Create modal using dialog element like TTS modal
+  const modal = document.createElement('dialog');
   modal.id = 'hermes-modal';
+  modal.open = true;
+  modal.style.zIndex = '2000';
+  modal.style.position = 'fixed';
   if (USE_CUSTOM_STYLING) {
-    modal.style.cssText = `
-      background: white;
-      border-radius: 16px;
+    modal.style.cssText += `
       width: 90%;
       max-width: 800px;
       height: 80%;
       max-height: 600px;
-      display: flex;
-      flex-direction: column;
+      border: none;
+      border-radius: 16px;
       box-shadow: 0 20px 40px rgba(0,0,0,0.3);
-      overflow: hidden;
+      background: white;
     `;
   } else {
-    modal.style.cssText = `
+    modal.style.cssText += `
       width: 90%;
       max-width: 800px;
       height: 80%;
       max-height: 600px;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
     `;
   }
+
+  const article = document.createElement('article');
+  article.style.cssText = `
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+  `;
+  modal.appendChild(article);
   
   // Create modal header
   const header = document.createElement('div');
@@ -1087,7 +1079,7 @@ function openHermesModal() {
     `;
   }
   closeButton.onclick = () => {
-    document.body.removeChild(modalBackdrop);
+    document.body.removeChild(modal);
     hermesModalOpen = false;
   };
   
@@ -1096,14 +1088,18 @@ function openHermesModal() {
   
   // Create controls section
   const controls = document.createElement('div');
-  controls.style.cssText = `
-    padding: 16px 20px;
-    border-bottom: 1px solid #e0e0e0;
-    display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
-    align-items: center;
-  `;
+  if (USE_CUSTOM_STYLING) {
+    controls.style.cssText = `
+      padding: 16px 20px;
+      border-bottom: 1px solid #e0e0e0;
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+      align-items: center;
+    `;
+  } else {
+    controls.className = 'uncloseai-controls';
+  }
   
   // Add model selection dropdown
   const modelLabel = document.createElement('label');
@@ -1159,25 +1155,35 @@ function openHermesModal() {
   
   // Add action buttons
   const actionButtons = document.createElement('div');
-  actionButtons.style.cssText = `
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-  `;
+  if (USE_CUSTOM_STYLING) {
+    actionButtons.style.cssText = `
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    `;
+  } else {
+    actionButtons.className = 'uncloseai-button-group';
+  }
   
   const readPageBtn = document.createElement('button');
   readPageBtn.textContent = '📖 Read Page';
-  readPageBtn.style.cssText = 'padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px; background: white; cursor: pointer;';
+  if (USE_CUSTOM_STYLING) {
+    readPageBtn.style.cssText = 'padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px; background: white; cursor: pointer;';
+  }
   readPageBtn.onclick = readPageWithHermes;
   
   const ttsBtn = document.createElement('button');
   ttsBtn.textContent = '🔊 TTS';
-  ttsBtn.style.cssText = 'padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px; background: white; cursor: pointer;';
+  if (USE_CUSTOM_STYLING) {
+    ttsBtn.style.cssText = 'padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px; background: white; cursor: pointer;';
+  }
   ttsBtn.onclick = openTTSModal;
   
   const refreshBtn = document.createElement('button');
   refreshBtn.textContent = '🔄 Refresh';
-  refreshBtn.style.cssText = 'padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px; background: white; cursor: pointer;';
+  if (USE_CUSTOM_STYLING) {
+    refreshBtn.style.cssText = 'padding: 6px 12px; border: 1px solid #ccc; border-radius: 4px; background: white; cursor: pointer;';
+  }
   refreshBtn.onclick = async () => {
     // Clear cache and refresh models
     localStorage.removeItem('modelRegistryCache');
@@ -1410,21 +1416,12 @@ function openHermesModal() {
   inputArea.appendChild(sendButton);
   
   // Assemble modal
-  modal.appendChild(header);
-  modal.appendChild(controls);
-  modal.appendChild(chatArea);
-  modal.appendChild(inputArea);
-  modalBackdrop.appendChild(modal);
+  article.appendChild(header);
+  article.appendChild(controls);
+  article.appendChild(chatArea);
+  article.appendChild(inputArea);
   
-  // Close on backdrop click
-  modalBackdrop.onclick = (e) => {
-    if (e.target === modalBackdrop) {
-      document.body.removeChild(modalBackdrop);
-      hermesModalOpen = false;
-    }
-  };
-  
-  document.body.appendChild(modalBackdrop);
+  document.body.appendChild(modal);
   messageInput.focus();
 }