diff --git a/application/frontend/src/pages/Search/components/SearchBar.scss b/application/frontend/src/pages/Search/components/SearchBar.scss
index 2ac3fb2a..5c71a549 100644
--- a/application/frontend/src/pages/Search/components/SearchBar.scss
+++ b/application/frontend/src/pages/Search/components/SearchBar.scss
@@ -24,30 +24,37 @@
     height: 1rem;
     width: 1rem;
     pointer-events: none;
-    z-index: 1; 
+    z-index: 1;
   }
 
   input {
     padding: 0.5rem 1rem 0.5rem 2.5rem;
     width: 16rem;
-    background-color: rgba(var(--card-rgb), 0.5);
-    backdrop-filter: blur(4px);
-    border: 1px solid rgba(var(--border-rgb), 0.5);
-    border-radius: var(--radius);
+
+    background-color: rgba(var(--card-rgb), 0.5); /* tiny bump */
+    border: 1px solid rgba(102, 157, 246, 0.267); /* slightly brighter sky blue */
+
+    border-radius: 9999px;
     color: var(--foreground);
-    transition: all 0.2s ease;
-    .navbar__mobile-menu &,
-    .mobile-search-container & {
-      width: 100%;
-    }
 
-    &:focus {
-      outline: none;
-      border-color: transparent;
-      box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6;
-    }
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 1px 4px rgba(0, 0, 0, 0.25);
+
+    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  input:hover {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-color: rgba(96, 165, 250, 0.4);
   }
 
+  input:focus {
+    outline: none;
+    background-color: rgba(255, 255, 255, 0.08);
+
+    border-color: rgba(96, 165, 250, 0.6);
+
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 2px 6px rgba(0, 0, 0, 0.3);
+  }
   .search-error {
     margin-top: 0.25rem;
     font-size: 0.75rem;