diff --git a/package-lock.json b/package-lock.json
index 8e1793d..c77ce25 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,10 +26,8 @@
       "devDependencies": {
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "babel-preset-react-app": "^10.0.1",
-
-        "tailwindcss": "^3.4.13",
-        "html5-qrcode": "^2.3.8"
-
+        "html5-qrcode": "^2.3.8",
+        "tailwindcss": "^3.4.13"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -3068,6 +3066,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+      "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+      "peer": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@fortawesome/free-solid-svg-icons": {
       "version": "6.6.0",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
@@ -4479,6 +4489,95 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
+      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "peer": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "peer": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "peer": true
+    },
+    "node_modules/@testing-library/dom/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "peer": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -15858,7 +15957,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
       "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
-      "license": "MIT",
       "peerDependencies": {
         "react": "*"
       }
@@ -18044,6 +18142,19 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -19215,4 +19326,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 7419c17..13f9273 100644
--- a/package.json
+++ b/package.json
@@ -45,9 +45,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "babel-preset-react-app": "^10.0.1",
-
     "html5-qrcode": "^2.3.8",
     "tailwindcss": "^3.4.13"
-
   }
-}
\ No newline at end of file
+}
diff --git a/src/Pages/Home.js b/src/Pages/Home.js
index fd9eeae..5007afa 100644
--- a/src/Pages/Home.js
+++ b/src/Pages/Home.js
@@ -5,7 +5,7 @@ import { getAuth, onAuthStateChanged } from "firebase/auth";
 import Footer from '../components/Footer';
 import Search from '../components/Search';
 
-const Home = () => {
+const Home = ({setTotalMovies}) => {
   const firebase = useFirebase();
   const [allMovies, setAllMovies] = useState([]);
   const [posterPaths, setPosterPaths] = useState({});
@@ -54,6 +54,7 @@ const Home = () => {
       try {
         const movies = await firebase.fetchAllMovies();
         setAllMovies(movies);
+        setTotalMovies(movies);
         setFilteredMovies(movies); // Initialize with all movies
         // Fetch poster paths for all movies
         const paths = await Promise.all(movies.map(movie => firebase.fetchMoviePoster(movie.movieId)));
@@ -74,9 +75,9 @@ const Home = () => {
 
   return (
     <div className='dark:bg-slate-900'>
-      <div className='pt-[7vh] grid place-items-center'>
-        <Search movies={allMovies} />
-      </div>
+
+      {/* removed search box from home and added it to navbar */}
+      
 
       {/* Genre Filter Buttons */}
       <div className="flex justify-center my-5 ">
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 6126a07..c17ee06 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -5,8 +5,9 @@ import useThemeSwitcher from './useThemeSwitcher';
 import { getAuth, onAuthStateChanged, signOut } from 'firebase/auth';
 import {  FiMoon, FiSun } from 'react-icons/fi';
 import './Navbar.css';
+import Search from './Search';
 
-export default function Navbar() {
+export default function Navbar({totalMovies}) {
     const firebase = useFirebase();  
     const auth = getAuth(); 
     const detailsRef = useRef(null); 
@@ -83,7 +84,7 @@ export default function Navbar() {
             <nav className="nav">
                 <a href="/" className="logo">Ticketify</a>
 
-
+                <Search totalMovies={totalMovies} />
                 <ul className="nav-links ">
                     <li >
                       <NavLink
diff --git a/src/components/Search.css b/src/components/Search.css
index f6927c4..de399ed 100644
--- a/src/components/Search.css
+++ b/src/components/Search.css
@@ -1,15 +1,19 @@
 .search-wrapper{
     position: relative;
-    width: 70vw;
+    display: flex;
+    width: 35%;
 }
 
 .search-input{
     width: 100%;
-    display: flex;
-    background-color: #f6f6f6;
-    padding: 1rem 2rem;
-    font-size: 1.2rem;
-    box-shadow: 2px 2px 10px #dadada70;
+    padding-left: 12px;  
+    padding-right: 12px; 
+    padding-top: 8px;    
+    padding-bottom: 8px; 
+    border-radius: 9999px 0 0 9999px; 
+    border-width: 2px;  
+    border-color: #d1d5db;
+    border-style: solid; 
 }
 
 .search-input input{
@@ -32,6 +36,7 @@
     background-color: #f6f6f6;
     backdrop-filter: blur(10px);
     color: #727272;
+    border-radius: 1rem;
 }
 
 .search-suggestion .suggestion-item{
@@ -58,4 +63,14 @@
     color: #dadada;
     font-size: 1.5rem;
     font-weight: 600;
+}
+.search-btn{
+    padding-left: 16px;   
+    padding-right: 16px;  
+    padding-top: 8px;     
+    padding-bottom: 8px;  
+    border-radius: 0 9999px 9999px 0; 
+    background-color: transparent; 
+    border: 2px solid #d1d5db;
+    border-left: none;
 }
\ No newline at end of file
diff --git a/src/components/Search.js b/src/components/Search.js
index 4dd12d0..c028241 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -1,62 +1,76 @@
-import React, { useEffect, useState } from 'react';
-import './Search.css';
-import { useNavigate } from 'react-router-dom';
+import React, { useEffect, useState } from "react";
+import "./Search.css";
+import { useNavigate } from "react-router-dom";
+import { CiSearch } from "react-icons/ci";
 
-export default function Search({ movies}) {
-    const navigate = useNavigate();
-    const [searchVal, setSearchVal] = useState("");
-    const [filteredMovies, setFilteredMovies] = useState([]);
-    const [debouncedSearchVal, setDebouncedSearchVal] = useState(searchVal);
+export default function Search({ totalMovies }) {
+  const navigate = useNavigate();
+  const [searchVal, setSearchVal] = useState("");
+  const [filteredMovies, setFilteredMovies] = useState([]);
+  const [debouncedSearchVal, setDebouncedSearchVal] = useState(searchVal);
 
-    const handleSearchVal = (e) => {
-        setSearchVal(e.target.value);
-    };
+  const handleSearchVal = (e) => {
+    setSearchVal(e.target.value);
+  };
 
-    // Debouncing logic: Updates debouncedSearchVal after a delay
-    useEffect(() => {
-        const handler = setTimeout(() => {
-            setDebouncedSearchVal(searchVal);
-        }, 700); // Adjust the delay as needed (1000ms here)
+  // Debouncing logic: Updates debouncedSearchVal after a delay
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchVal(searchVal);
+    }, 700); // Adjust the delay as needed (1000ms here)
 
-        // Cleanup function to clear timeout if the component re-renders before the delay ends
-        return () => {
-            clearTimeout(handler);
-        };
-    }, [searchVal]);
+    // Cleanup function to clear timeout if the component re-renders before the delay ends
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [searchVal]);
 
-    useEffect(() => {
-        const filtered = movies.filter(movie =>
-            movie?.movieTitle?.toLowerCase().includes(debouncedSearchVal.toLowerCase())
-        );
-        setFilteredMovies(filtered);
-    }, [debouncedSearchVal, movies]);
+  useEffect(() => {
+    const filtered = totalMovies.filter((movie) =>
+      movie?.movieTitle
+        ?.toLowerCase()
+        .includes(debouncedSearchVal.toLowerCase())
+    );
+    setFilteredMovies(filtered);
+  }, [debouncedSearchVal, totalMovies]);
 
-    return (
-        <div className='search-wrapper'>
-            <div
-                className='search-input'
-            >
-                <input
-                    type="text"
-                    placeholder='Search here...'
-                    value={searchVal}
-                    onChange={handleSearchVal}
-                />
-            </div>
-            {
-                searchVal.trim() !== "" && (
-                    <div className='search-suggestion'>
-                        {filteredMovies.length ?
-                            (filteredMovies.map(movie => (
-                                <div key={movie.movieId} className='suggestion-item' onClick={() => navigate(`/MovieDetails/${movie.movieId}`)}>
-                                    <p className='title'>{movie.movieTitle}</p>
-                                </div>
-                            ))) :
-                            (<p className='no-search-suggestion'>No movies found matching your search.</p>)
-                        }
-                    </div>
-                )
-            }
+  return (
+    <div className="search-wrapper">
+      <div className="search-input">
+        <input
+          type="text"
+          placeholder="Search here..."
+          value={searchVal}
+          onChange={handleSearchVal}
+        />
+      </div>
+      <button className="search-btn">
+        <CiSearch />
+      </button>
+      {searchVal.trim() !== "" && (
+        <div className="search-suggestion">
+          {filteredMovies.length ? (
+            filteredMovies.map((movie) => (
+              <div
+                key={movie.movieId}
+                className="suggestion-item"
+                onClick={() => {
+                  navigate(`/MovieDetails/${movie.movieId}`);
+
+                  //setSearchVal to "" to avoid suggestions after clicking
+                  setSearchVal("");
+                }}
+              >
+                <p className="title">{movie.movieTitle}</p>
+              </div>
+            ))
+          ) : (
+            <p className="no-search-suggestion">
+              No movies found matching your search.
+            </p>
+          )}
         </div>
-    );
+      )}
+    </div>
+  );
 }
diff --git a/src/index.js b/src/index.js
index 8e3c54f..16a331d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter, Routes, Route, Navigate, useLocation } from "react-router-dom";
 import './index.css';
@@ -21,14 +21,16 @@ import Verify from './Pages/Verify';
 function App() {
   const location = useLocation();
   const hideNavbarRoutes = ['/BookTicket'];
+  //created a prop inside index.js to pass this to navbar
+  const [totalMovies,setTotalMovies] = useState([]);
 
   const shouldHideNavbar = hideNavbarRoutes.some(route => location.pathname.startsWith(route));
 
   return (
     <>
-      {!shouldHideNavbar && <Navbar />}
+      {!shouldHideNavbar && <Navbar totalMovies={totalMovies} />}
       <Routes>
-        <Route exact path="/" element={<Home />} />
+        <Route exact path="/" element={<Home setTotalMovies={setTotalMovies} />} />
         <Route exact path="/Home" element={<Home />} />
         <Route path="/MyTickets/:uid" element={<MyTickets />} />
         <Route path="/AboutUs" element={<AboutUs />} />