diff --git a/apps/console/src/pages/organizations/risks/tabs/RiskControlsTab.tsx b/apps/console/src/pages/organizations/risks/tabs/RiskControlsTab.tsx
index c43e19033..cba0d8410 100644
--- a/apps/console/src/pages/organizations/risks/tabs/RiskControlsTab.tsx
+++ b/apps/console/src/pages/organizations/risks/tabs/RiskControlsTab.tsx
@@ -14,9 +14,11 @@
 
 import { useTranslate } from "@probo/i18n";
 import { Badge, Tbody, Td, Th, Thead, Tr } from "@probo/ui";
-import { graphql, useRefetchableFragment } from "react-relay";
+import type { ComponentProps } from "react";
+import { graphql, usePaginationFragment } from "react-relay";
 import { useOutletContext } from "react-router";
 
+import type { RiskControlsTabControlsQuery } from "#/__generated__/core/RiskControlsTabControlsQuery.graphql";
 import type { RiskControlsTabFragment$key } from "#/__generated__/core/RiskControlsTabFragment.graphql";
 import { SortableTable, SortableTh } from "#/components/SortableTable";
 import { useOrganizationId } from "#/hooks/useOrganizationId";
@@ -60,13 +62,20 @@ export default function RiskControlsTab() {
     risk: RiskControlsTabFragment$key & { id: string };
   }>();
   const { __ } = useTranslate();
-  // eslint-disable-next-line relay/generated-typescript-types
-  const [data, refetch] = useRefetchableFragment(controlsFragment, risk);
-  const controls = data.controls.edges.map(edge => edge.node);
+  const pagination = usePaginationFragment<
+    RiskControlsTabControlsQuery,
+    RiskControlsTabFragment$key
+  >(controlsFragment, risk);
+  const controls = pagination.data.controls.edges.map(edge => edge.node);
   const organizationId = useOrganizationId();
 
   return (
-    <SortableTable refetch={refetch}>
+    <SortableTable
+      {...pagination}
+      refetch={
+        pagination.refetch as ComponentProps<typeof SortableTable>["refetch"]
+      }
+    >
       <Thead>
         <Tr>
           <SortableTh field="SECTION_TITLE">{__("Reference")}</SortableTh>