diff --git a/src/components/Header.js b/src/components/Header.js
index b1bad5f..d228a88 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -12,6 +12,7 @@ import CustomSelect from "./Buttons/Language";
 const Header = ({ language, setLanguage, setInputSearch }) => {
   const { theme, changeTheme } = useContext(ThemeContext);
   const [input, setInput] = useState(""); // Mirrors inputSearch and setInputSearch
+  const searchInputRef = useRef(null); // Ref for auto-focus on input
 
   const debouncedInput = useDebouncedCallback(
     (value) => {
@@ -31,6 +32,10 @@ const Header = ({ language, setLanguage, setInputSearch }) => {
     setInputSearch(input);
   }, [input, setInputSearch]);
 
+  useEffect(() => {
+    searchInputRef.current?.focus(); // Auto-focus search input on page load
+  }, []);
+
   const [inputExpanded, setInputExpanded] = useState(false); // Control input expansion state
 
   const handleSearchClick = () => {
@@ -39,12 +44,12 @@ const Header = ({ language, setLanguage, setInputSearch }) => {
 
   return (
     <Navbar id="header">
-      <Container className=" flex lg:flex-row flex-col  justify-center items-center  w-full px-4">
-        <Navbar.Brand href="/" className="d-none d-sm-block ">
+      <Container className="flex lg:flex-row flex-col justify-center items-center w-full px-4">
+        <Navbar.Brand href="/" className="d-none d-sm-block">
           {theme.mode === "light" ? (
-            <img src={logo_white} alt="Logo" className="w-24 h-24"></img>
+            <img src={logo_white} alt="Logo" className="w-24 h-24" />
           ) : (
-            <img src={logo} alt="Logo" className="w-24 h-24"></img>
+            <img src={logo} alt="Logo" className="w-24 h-24" />
           )}
         </Navbar.Brand>
 
@@ -52,7 +57,7 @@ const Header = ({ language, setLanguage, setInputSearch }) => {
           <label
             className={`${
               theme.mode === "light" ? "bg-slate-200" : "bg-slate-500"
-            }  flex rounded-3xl p-2 h-11 w-full md:w-[40rem]`}
+            } flex rounded-3xl p-2 h-11 w-full md:w-[40rem]`}
           >
             <CustomSelect
               theme={theme} // Correctly pass theme directly
@@ -61,16 +66,18 @@ const Header = ({ language, setLanguage, setInputSearch }) => {
             />
             {/* Project Search Bar */}
             <input
+              ref={searchInputRef}
               type="text"
               className={`transition-all h-7 ml-2 border-solid border-l-2 border-l-violet-950 pl-2 duration-1000 ease-in-out focus:outline-none outline-none ${
                 inputExpanded
                   ? "w-1/2 pl-5 border-b-slate-300 border-b-2 border-solid"
                   : "w-1/2"
-              } bg-transparent  ${
+              } bg-transparent ${
                 theme.mode === "dark"
                   ? "opacity-100 text-slate-200"
                   : "opacity-70 text-slate-800"
               }`}
+              style={{ cursor: "pointer" }}
               placeholder="Search"
               autoComplete="off"
               onMouseEnter={handleSearchClick}