diff --git a/src/popup.css b/src/popup.css
index 8b7cb695..85bdd954 100644
--- a/src/popup.css
+++ b/src/popup.css
@@ -822,3 +822,24 @@ body::-webkit-scrollbar-thumb {
   cursor: wait;
   pointer-events: none;
 }
+
+.border-danger {
+  border-color: #ef4444 !important;
+}
+
+.shake {
+  animation: shake 0.4s ease;
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  75% {
+    transform: translateX(5px);
+  }
+}
diff --git a/src/popup.ts b/src/popup.ts
index b38eda20..f40b5caf 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -536,11 +536,9 @@ document.addEventListener("DOMContentLoaded", async () => {
 
   function shakeElement(el: HTMLElement | null) {
     if (!el) return;
-    el.style.borderColor = "#EF4444";
-    el.style.animation = "shake 0.4s ease";
+    el.classList.add("shake", "border-danger");
     setTimeout(() => {
-      el.style.borderColor = "";
-      el.style.animation = "";
+      el.classList.remove("shake", "border-danger");
     }, 400);
   }
 });