diff --git a/popup/popup.css b/popup/popup.css
index e99980e..a492ffc 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -1148,24 +1148,25 @@ body.dark .header-logo {
 }
 
 .exception-remove {
-  background: var(--danger);
-  color: white;
+  background: none;
   border: none;
-  padding: 6px 12px;
-  border-radius: 6px;
+  padding: 4px;
   cursor: pointer;
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
   flex-shrink: 0;
-  transition: all 0.2s;
+  transition: color 0.2s;
   display: flex;
   align-items: center;
-  gap: 4px;
+  justify-content: center;
+  color: #9ca3af;
+  opacity: 0;
+}
+
+.exception-item:hover .exception-remove {
+  opacity: 1;
 }
 
 .exception-remove:hover {
-  background: #dc2626;
+  color: var(--danger);
 }
 
 .exception-remove i {
diff --git a/src/popup/PopupController.ts b/src/popup/PopupController.ts
index 602a037..ac2c9ab 100644
--- a/src/popup/PopupController.ts
+++ b/src/popup/PopupController.ts
@@ -978,9 +978,8 @@ export class PopupController {
     container.innerHTML = this.exceptionsList.map(domain =>
       `<div class="exception-item">
         <span class="exception-domain">${DOMUtils.escapeHtml(domain)}</span>
-        <button class="exception-remove" data-domain="${DOMUtils.escapeHtml(domain)}">
+        <button type="button" class="exception-remove" data-domain="${DOMUtils.escapeHtml(domain)}" title="${DOMUtils.escapeHtml(chrome.i18n.getMessage('remove') || 'Remove')}" aria-label="${DOMUtils.escapeHtml(chrome.i18n.getMessage('remove') || 'Remove')}">
           <i class="fa-solid fa-trash"></i>
-          ${chrome.i18n.getMessage('remove') || 'Remove'}
         </button>
       </div>`
     ).join('');