diff --git a/src/ncounter/About.svelte b/src/ncounter/About.svelte
index 66705b0..6cc539b 100644
--- a/src/ncounter/About.svelte
+++ b/src/ncounter/About.svelte
@@ -70,7 +70,14 @@ const dispatch = createEventDispatcher();
     border: 2px solid transparent;
 }
 
-.repo > a:hover, .repo > a:focus {
+@media (hover){
+    .repo > a:hover {
+        box-shadow: none;
+        border-color: var(--highlight-color);    
+    }
+}
+
+.repo > a:focus {
     box-shadow: none;
     border-color: var(--highlight-color);
 }
diff --git a/src/ncounter/App.svelte b/src/ncounter/App.svelte
index 02128c7..985b8b6 100644
--- a/src/ncounter/App.svelte
+++ b/src/ncounter/App.svelte
@@ -107,7 +107,13 @@ function add(){
         color: var(--text-inverse);
     }
 
-    .tool-bar > button:focus, .tool-bar > button:hover {
+    @media(hover){
+        .tool-bar > button:hover {
+            border: 2px solid var(--highlight-color);
+        }
+    }
+
+    .tool-bar > button:focus {
         border: 2px solid var(--highlight-color);
     }
 
diff --git a/src/ncounter/site.css b/src/ncounter/site.css
index 688aa01..b73fd29 100644
--- a/src/ncounter/site.css
+++ b/src/ncounter/site.css
@@ -69,7 +69,13 @@ button {
     font-family: inherit;
 }
 
-button:focus, button:hover {
+@media(hover){
+    button:hover {
+        border: 2px solid var(--buton-color);
+    }
+}
+
+button:focus {
     border: 2px solid var(--button-color);
 }
 
@@ -137,7 +143,14 @@ button:focus, button:hover {
     width: 100%;
 }
 
-.dialog-content button:focus, .dialog-content button:hover {
+@media(hover){
+    .dialog-content button:hover{
+        border: 0;
+        outline: 2px solid var(--button-color);
+    }
+}
+
+.dialog-content button:focus {
     border: 0;
     outline: 2px solid var(--button-color);
 }