diff --git a/components/SearchAndLayout.tsx b/components/SearchAndLayout.tsx
index 183d07f..9cfd5e4 100644
--- a/components/SearchAndLayout.tsx
+++ b/components/SearchAndLayout.tsx
@@ -1,4 +1,5 @@
 import { ChangeEvent } from "react";
+import Cookies from "js-cookie";
 
 interface SearchAndLayoutProps {
     search: string;
@@ -11,8 +12,9 @@ const SearchAndLayout = ({
     search,
     setSearch,
     itemPerPage,
-    setItemPerPage
-}: SearchAndLayoutProps) => (
+    setItemPerPage,
+}: SearchAndLayoutProps) => {
+   return (
     <div className="flex gap-2 items-center pt-4">
         <input
             type="text"
@@ -34,5 +36,6 @@ const SearchAndLayout = ({
         </select>
     </div>
 );
+};
 
 export default SearchAndLayout;
\ No newline at end of file
diff --git a/hooks/useSites.ts b/hooks/useSites.ts
index e724cf8..d17c58a 100644
--- a/hooks/useSites.ts
+++ b/hooks/useSites.ts
@@ -3,9 +3,12 @@ import axios from "axios";
 import Cookies from "js-cookie";
 
 const useSites = () => {
+    const savedLayout = Cookies.get('sites-itemPerPage');
+    const defaultLayout = savedLayout ? Number(savedLayout) : 5;
+    
     const [sites, setSites] = useState([]);
     const [currentPage, setCurrentPage] = useState(1);
-    const [itemPerPage, setItemPerPage] = useState(5);
+    const [itemPerPage, setItemPerPage] = useState(defaultLayout);
     const [total, setTotal] = useState(0);
     const [search, setSearch] = useState("");
 
@@ -22,10 +25,6 @@ const useSites = () => {
         loadSites();
     }, [loadSites]);
 
-    useEffect(() => {
-        const savedItemPerPage = Cookies.get('sites-itemPerPage');
-        if (savedItemPerPage) setItemPerPage(Number(savedItemPerPage));
-    }, []);
 
     useEffect(() => {
         Cookies.set('sites-itemPerPage', itemPerPage.toString());