diff --git a/apps/web/pages/documents.tsx b/apps/web/pages/documents.tsx
index b2bd7570c..ff84788fe 100644
--- a/apps/web/pages/documents.tsx
+++ b/apps/web/pages/documents.tsx
@@ -19,6 +19,7 @@ import { DocumentStatus } from "@prisma/client";
 import { Tooltip as ReactTooltip } from "react-tooltip";
 import { Button, IconButton, SelectBox } from "@documenso/ui";
 import { NextPageContext } from "next";
+import { getDocuments } from "@documenso/lib/api";
 
 const DocumentsPage: NextPageWithLayout = (props: any) => {
   const router = useRouter();
@@ -48,15 +49,10 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
     createdFilter[0]
   );
 
-  const getDocuments = async () => {
+  const loadDocuments = async () => {
     if (!documents.length) setLoading(true);
-    // todo encapsulate
-    fetch("/api/documents", {
-      headers: {
-        "Content-Type": "application/json",
-      },
-    }).then((res) => {
-      res.json().then((j) => {
+    getDocuments().then((res: any) => {
+      res.json().then((j: any) => {
         setDocuments(j);
         setLoading(false);
       });
@@ -64,7 +60,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
   };
 
   useEffect(() => {
-    getDocuments().finally(() => {
+    loadDocuments().finally(() => {
       setSelectedStatusFilter(
         statusFilters.filter(
           (status) => status.value === props.filter.toUpperCase()
@@ -368,7 +364,7 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
                                       setDocuments(documentsWithoutIndex);
                                     })
                                     .then(() => {
-                                      getDocuments();
+                                      loadDocuments();
                                     });
                                 }
                               }}
diff --git a/packages/lib/api/getDocuments.ts b/packages/lib/api/getDocuments.ts
new file mode 100644
index 000000000..467aeb1da
--- /dev/null
+++ b/packages/lib/api/getDocuments.ts
@@ -0,0 +1,7 @@
+export const getDocuments = (): any => {
+  return fetch("/api/documents", {
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+};
diff --git a/packages/lib/api/index.ts b/packages/lib/api/index.ts
index ed713c963..834992b27 100644
--- a/packages/lib/api/index.ts
+++ b/packages/lib/api/index.ts
@@ -3,3 +3,4 @@ export { deleteField } from "./deleteField";
 export { signDocument } from "./signDocument";
 export { getUser } from "./getUser";
 export { signup } from "./signup";
+export { getDocuments } from "./getDocuments";