diff --git a/src/hooks/use-page-searchquery.ts b/src/hooks/use-page-searchquery.ts
index f18095b..03ea8f8 100644
--- a/src/hooks/use-page-searchquery.ts
+++ b/src/hooks/use-page-searchquery.ts
@@ -11,7 +11,7 @@ import { ValidRoutes } from "@/lib/tanstack/router/router-types";
   */
 export function usePageSearchQuery(path: ValidRoutes) {
   // @ts-expect-error : search parm below wwill exist when the compnent is usesd
-  const { sq } = useSearch({ from:`${path}/` });
+  const { sq, page } = useSearch({ from:`${path}/` });
   const navigate = useNavigate({ from:path });
   const [_, startTransition] = useTransition();
 
@@ -22,12 +22,23 @@ export function usePageSearchQuery(path: ValidRoutes) {
       startTransition(() => {
         navigate({
           search: {
+            page,
             sq: debouncedValue,
           },
         });
       });
 
     }
-  }, [debouncedValue, navigate, sq]);
-  return { debouncedValue, isDebouncing, keyword, setKeyword };
+  }, [debouncedValue, navigate, sq,page]);
+  function updatePage(page: number) {
+    startTransition(() => {
+      navigate({
+        search: {
+          page,
+          sq: debouncedValue,
+        },
+      });
+    })
+  }
+  return { debouncedValue, isDebouncing, keyword, setKeyword,page, updatePage };
 }
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 570abea..b53f579 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -13,6 +13,7 @@ import { Viewer } from "@/lib/tanstack/query/use-viewer";
 
 const searchparams = z.object({
   sq: z.string().optional(),
+  page: z.number().optional(),
   globalPage: z.number().optional(),
   globalSearch: z.string().optional(),
 });
diff --git a/src/scripts/scafold-pages/base-templates.ts b/src/scripts/scafold-pages/base-templates.ts
index 6d8da85..16d8c8c 100644
--- a/src/scripts/scafold-pages/base-templates.ts
+++ b/src/scripts/scafold-pages/base-templates.ts
@@ -10,6 +10,7 @@ import { z } from "zod";
 import { ${capitalpagename}Page } from "@/routes/${path}/-components/${capitalpagename}Page";
 
 const searchparams = z.object({
+  page: z.number().optional(),
   sq: z.string().optional(),
 });
 
@@ -80,6 +81,8 @@ import { ItemNotFound } from "@/components/wrappers/ItemNotFound";
 import { ErrorWrapper } from "@/components/wrappers/ErrorWrapper";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
+import ResponsivePagination from "react-responsive-pagination";
+import { usePageSearchQuery } from "@/hooks/use-page-searchquery";
 import { Update${capitalpagename}form } from "@/routes/${path}/-components/form/update";
 import { ${pagename}ListQueryOptions } from "@/routes/${path}/-query-options/${pagename}-query-option";
 
@@ -88,7 +91,8 @@ interface ${capitalpagename}ListProps {
 }
 
 export function ${capitalpagename}List({ keyword = "" }: ${capitalpagename}ListProps) {
-  const query = useSuspenseQuery(${pagename}ListQueryOptions({ keyword }));
+  const { page,updatePage } = usePageSearchQuery("/${path}");
+  const query = useSuspenseQuery(${pagename}ListQueryOptions({ keyword,page }));
   const data = query.data;
   const error = query.error;
 
@@ -129,6 +133,15 @@ export function ${capitalpagename}List({ keyword = "" }: ${capitalpagename}ListP
           );
         })}
       </ul>
+            <div className="flex w-full items-center justify-center">
+        <ResponsivePagination
+          current={page ?? 1}
+          total={data.totalPages}
+          onPageChange={(e) => {
+            updatePage(e);
+          }}
+        />
+      </div>
     </div>
   );
 }
diff --git a/src/scripts/scafold-pages/query-options-tempaltes.ts b/src/scripts/scafold-pages/query-options-tempaltes.ts
index f6d199f..99f480c 100644
--- a/src/scripts/scafold-pages/query-options-tempaltes.ts
+++ b/src/scripts/scafold-pages/query-options-tempaltes.ts
@@ -10,16 +10,25 @@ import { queryOptions } from "@tanstack/react-query";
 
 interface ${pagename}QueryOptionPropss {
   keyword: string;
+    page?: number;
 }
-export function ${pagename}ListQueryOptions({ keyword }: ${pagename}QueryOptionPropss) {
+export function ${pagename}ListQueryOptions({ keyword, page=1 }: ${pagename}QueryOptionPropss) {
   return queryOptions({
     queryKey: ["${pagename}_list", keyword],
     queryFn: () => {
       return new Promise<{
+          page: number;
+          perPage: number;
+          totaleItems: number;
+          totalPages: number;
         items: Array<Record<string, any> & { id: string }>;
       }>((res) => {
         setTimeout(() => {
           res({
+            page,
+            perPage: 10,
+            totaleItems: 30,
+            totalPages: 3,
             items: [{ id: "id_1" }, { id: "id_2" }, { id: "id_3" }],
           });
         }, 1000);