diff --git a/src/App.js b/src/App.js
index 8cf0cc3..323fdef 100644
--- a/src/App.js
+++ b/src/App.js
@@ -19,6 +19,7 @@ const appRouter = createBrowserRouter(
       <Route index element={<HomePage />} />
       <Route path=":type" element={<HomePage />} />
       <Route path=":type/:id" element={<PetDetailsPage />} />
+      <Route path="search" element={<SearchPage />} />
     </Route>
   )
 );
diff --git a/src/pages/search/index.js b/src/pages/search/index.js
index 8585009..b6e604d 100644
--- a/src/pages/search/index.js
+++ b/src/pages/search/index.js
@@ -1,20 +1,20 @@
-import React, { useState, useEffect } from 'react';
-import Hero from '../../components/hero';
-import { getPets } from '../../api/petfinder';
-import Pet from '../../components/pet';
+import React, { useState, useEffect } from "react";
+import Hero from "../../components/hero";
+import { getPets } from "../../api/petfinder";
+import Pet from "../../components/pet";
+import { useSearchParams } from "react-router-dom";
 // Import useSearchParams
 
 const SearchPage = () => {
-
   // Get searchParams object from useSearchParams
-
-  const petNameToFind = 'REPLACE ME';  // Get query parameter using searchParams object
+  const [searchParams] = useSearchParams();
+  const petNameToFind = searchParams.get("name"); // Get query parameter using searchParams object
 
   const [pets, setPets] = useState([]);
 
   useEffect(() => {
     async function getPetsData() {
-      const petsData = await getPets('', petNameToFind);
+      const petsData = await getPets("", petNameToFind);
 
       setPets(petsData);
     }