diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index b010f02..225c2dc 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,9 +1,15 @@
-import React from "react";
+import { useState, ChangeEvent } from "react";
 import Logo from "../../assets/icons/logo.svg";
 import Button from "../shared/Button";
 import { lowerMenuItems } from "../../utils/data";
 
 const Header = () => {
+  const [searchValue, setSearchValue] = useState<string>("");
+
+  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(e.target.value);
+  };
+
   return (
     <div className="relative my-2 items-center justify-center flex">
       <div className="container px-8 flex justify-between">
@@ -28,7 +34,7 @@ const Header = () => {
               </a>
             </li>
             <li>
-              <SearchInput />
+              <SearchInput onChange={handleSearchChange} value={searchValue} />
             </li>
           </ul>
           <ul className="flex gap-4 items-center">
@@ -49,7 +55,13 @@ const Header = () => {
 
 export default Header;
 
-const SearchInput = ({ value, onChange }) => {
+const SearchInput = ({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+}) => {
   return (
     <div className="flex items-center border border-[#5A2C82] overflow-hidden">
       <input
diff --git a/src/components/Hero/Hero.tsx b/src/components/Hero/Hero.tsx
new file mode 100644
index 0000000..8b4c68a
--- /dev/null
+++ b/src/components/Hero/Hero.tsx
@@ -0,0 +1,11 @@
+
+
+const Hero = () => {
+  return (
+    <div>
+      Hero
+    </div>
+  )
+}
+
+export default Hero
diff --git a/src/components/Hero/index.ts b/src/components/Hero/index.ts
new file mode 100644
index 0000000..ef594a6
--- /dev/null
+++ b/src/components/Hero/index.ts
@@ -0,0 +1,3 @@
+import Hero from "./Hero";
+
+export { Hero };
diff --git a/src/components/shared/Button.tsx b/src/components/shared/Button.tsx
index 685d305..54de6f9 100644
--- a/src/components/shared/Button.tsx
+++ b/src/components/shared/Button.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 
 type ButtonProps = {
   className?: string;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 6a28b56..160387a 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Header, TopHeader } from '../components/Header'
 
 const HomePage = () => {
diff --git a/src/router/Router.tsx b/src/router/Router.tsx
index cc485c2..e05442a 100644
--- a/src/router/Router.tsx
+++ b/src/router/Router.tsx
@@ -5,7 +5,7 @@ import { HomePage } from "../pages";
 const Routers = () => {
   return (
     <Routes>
-      <Route exact path={RouteHandler.homepage} element={<HomePage />} />
+      <Route path={RouteHandler.homepage} element={<HomePage />} />
     </Routes>
   );
 };