diff --git a/src/components/atoms/Input/Input.tsx b/src/components/atoms/Input/Input.tsx
index 92268a21..5bf68cfe 100644
--- a/src/components/atoms/Input/Input.tsx
+++ b/src/components/atoms/Input/Input.tsx
@@ -11,6 +11,8 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   clearable?: boolean
   error?: boolean
   changeValue?: (value: string) => void
+  onIconClick?: () => void
+  iconAriaLabel?: string
 }
 
 export function Input({
@@ -20,6 +22,8 @@ export function Input({
   className,
   error,
   changeValue,
+  onIconClick,
+  iconAriaLabel,
   ...props
 }: InputProps) {
   const [showPassword, setShowPassword] = useState(false)
@@ -47,10 +51,20 @@ export function Input({
   }
 
   return (
-    <label className="label-md">
-      {label}
+    <div className="flex flex-col">
+      <label className="label-md">{label}</label>
       <div className="relative mt-2">
-        {icon && (
+        {icon && onIconClick && (
+          <button
+            onClick={onIconClick}
+            className="flex items-center justify-center rounded-sm transition-all duration-300 ease-out button-transparent h-[32px] w-[32px] absolute top-[8px] left-[8px]"
+            aria-label={iconAriaLabel}
+          >
+            {icon}
+          </button>
+        )}
+
+        {icon && !onIconClick && (
           <span className="absolute top-0 left-[16px] h-full flex items-center">
             {icon}
           </span>
@@ -87,6 +101,6 @@ export function Input({
           </button>
         )}
       </div>
-    </label>
+    </div>
   )
 }
diff --git a/src/components/molecules/NavbarSearch/NavbarSearch.tsx b/src/components/molecules/NavbarSearch/NavbarSearch.tsx
index 9ee6dcbb..ba30aab0 100644
--- a/src/components/molecules/NavbarSearch/NavbarSearch.tsx
+++ b/src/components/molecules/NavbarSearch/NavbarSearch.tsx
@@ -11,8 +11,7 @@ export const NavbarSearch = () => {
 
   const [search, setSearch] = useState(searchParams.get("query") || "")
 
-  const submitHandler = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
+  const handleSearch = () => {
     if (search) {
       redirect(`/categories?query=${search}`)
     } else {
@@ -20,13 +19,21 @@ export const NavbarSearch = () => {
     }
   }
 
+  const submitHandler = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    handleSearch()
+  }
+
   return (
     <form className="flex items-center" method="POST" onSubmit={submitHandler}>
       <Input
         icon={<SearchIcon />}
+        onIconClick={handleSearch}
+        iconAriaLabel="Search"
         placeholder="Search product"
         value={search}
         changeValue={setSearch}
+        type="search"
       />
       <input type="submit" className="hidden" />
     </form>