diff --git a/dashboard/src/graphql/queries/index.ts b/dashboard/src/graphql/queries/index.ts
index 001be18..d22dcca 100644
--- a/dashboard/src/graphql/queries/index.ts
+++ b/dashboard/src/graphql/queries/index.ts
@@ -103,8 +103,8 @@ export const EmailVerificationQuery = `
 `;
 
 export const WebhooksDataQuery = `
-  query getWebhooksData {
-    _webhooks{
+  query getWebhooksData($params: PaginatedInput!) {
+    _webhooks(params: $params){
       webhooks{
         id
         event_name
diff --git a/dashboard/src/pages/Webhooks.tsx b/dashboard/src/pages/Webhooks.tsx
index ee3b760..eaaffa2 100644
--- a/dashboard/src/pages/Webhooks.tsx
+++ b/dashboard/src/pages/Webhooks.tsx
@@ -77,7 +77,16 @@ const Webhooks = () => {
 	};
 	const fetchWebookData = async () => {
 		setLoading(true);
-		const res = await client.query(WebhooksDataQuery).toPromise();
+		const res = await client
+			.query(WebhooksDataQuery, {
+				params: {
+					pagination: {
+						limit: paginationProps.limit,
+						page: paginationProps.page,
+					},
+				},
+			})
+			.toPromise();
 		if (res.data?._webhooks) {
 			const { pagination, webhooks } = res.data?._webhooks;
 			const maxPages = getMaxPages(pagination);
@@ -97,12 +106,15 @@ const Webhooks = () => {
 		}
 		setLoading(false);
 	};
-	useEffect(() => {
-		fetchWebookData();
-	}, []);
 	const paginationHandler = (value: Record<string, number>) => {
 		setPaginationProps({ ...paginationProps, ...value });
 	};
+	useEffect(() => {
+		fetchWebookData();
+	}, []);
+	React.useEffect(() => {
+		fetchWebookData();
+	}, [paginationProps.page, paginationProps.limit]);
 	console.log('webhookData ==>> ', webhookData);
 	return (
 		<Box m="5" py="5" px="10" bg="white" rounded="md">