diff --git a/frontend/src/components/Navigation/Navbar/Navbar.tsx b/frontend/src/components/Navigation/Navbar/Navbar.tsx
index 9ad5689b1..8a709dcbb 100644
--- a/frontend/src/components/Navigation/Navbar/Navbar.tsx
+++ b/frontend/src/components/Navigation/Navbar/Navbar.tsx
@@ -29,7 +29,7 @@ export function Navbar() {
 
       {/* Search Bar */}
       <div className="mx-auto flex max-w-md flex-1 justify-center px-4">
-        <div className="bg-muted/50 flex w-full items-center rounded-md pr-2">
+        <div className="dark:bg-muted/50 flex w-full items-center gap-1 rounded-md bg-neutral-100 px-1 py-1">
           {/* Query Image */}
           {queryImage && (
             <div className="relative mr-2 ml-2">
@@ -53,13 +53,14 @@ export function Navbar() {
           <Input
             type="search"
             placeholder="Add to your search"
-            className="flex-1 border-0 bg-transparent focus:ring-0"
+            className="mr-2 flex-1 border-0 bg-neutral-200"
           />
 
           {/* FaceSearch Dialog */}
+
           <FaceSearchDialog />
 
-          <button className="text-muted-foreground mx-1 hover:text-white">
+          <button className="text-muted-foreground hover:bg-accent dark:hover:bg-accent/50 hover:text-foreground mx-1 rounded-sm p-2">
             <Search className="h-4 w-4" />
           </button>
         </div>