diff --git a/frontend/app/backups/page.tsx b/frontend/app/backups/page.tsx
index bbae654..7014464 100644
--- a/frontend/app/backups/page.tsx
+++ b/frontend/app/backups/page.tsx
@@ -1,6 +1,8 @@
 'use client';
 
-import { useCallback } from 'react';
+import { createPublicClient, http } from 'viem';
+import { sepolia } from 'viem/chains';
+import { useCallback, useEffect } from 'react';
 import Image from 'next/image';
 import { Button } from '@nextui-org/button';
 import { Link } from '@nextui-org/link';
@@ -14,13 +16,87 @@ import {
 } from '@nextui-org/table';
 import { Tooltip } from '@nextui-org/tooltip';
 
+// TODO dele mocked data
 import { columns, users } from './data';
 
 import deleteIcon from '@/images/delete.svg';
 import editIcon from '@/images/edit.svg';
 import ghostIcon from '@/images/ghost.svg';
+import useSmartAccountClient from '@/hooks/useSmartAccountClient';
+// import { getBackups } from '@/services/getBackups';
+// import { wingmanModuleAddress, publicClient } from '@/services/consts';
+// import abi from '@/services/module.abi.json';
+
+const publicClient = createPublicClient({
+  transport: http('https://rpc.ankr.com/eth_sepolia'),
+  chain: sepolia,
+});
+
+const moduleAddress = '0xbDa1dE70eAE1A18BbfdCaE95B42b5Ff6d3352492';
+const ownerAddress = '0xED9586AD3a6A512ce5c2d0C6a5bf8972c00137e2';
+
+const getBackupsAbi = [
+  {
+    type: 'function',
+    name: 'getBackups',
+    inputs: [
+      {
+        name: 'owner',
+        type: 'address',
+        internalType: 'address',
+      },
+    ],
+    outputs: [
+      {
+        name: '',
+        type: 'string[]',
+        internalType: 'string[]',
+      },
+    ],
+  },
+];
+
+async function getBackups() {
+  try {
+    const backups = await publicClient.readContract({
+      address: moduleAddress,
+      abi: getBackupsAbi,
+      functionName: 'getBackups',
+      args: [ownerAddress],
+    });
+
+    console.log('Backups:', backups);
+
+    return backups;
+  } catch (error) {
+    console.error('Error fetching backups:', error);
+    throw error;
+  }
+}
+
+// getBackups()
+//   .then((backups) => {
+//     console.log('Backups:', backups);
+//   })
+//   .catch((error) => {
+//     console.error('Error:', error);
+//   });
 
 export default function BackUpsPage() {
+  const { isModuleSupported, isWingmanDeployed, smartAccountClient } =
+    useSmartAccountClient();
+  // const { address } = useUniversalAccountInfo();
+
+  useEffect(() => {
+    getBackups()
+      .then((backups) => {
+        console.log('Backups:', backups);
+      })
+      .catch((error) => {
+        console.error('Error:', error);
+      });
+  }, []);
+
   const renderCell = useCallback((user: any, columnKey: any) => {
     const cellValue = user[columnKey];
 
@@ -81,12 +157,11 @@ export default function BackUpsPage() {
       <div className="flex justify-between pb-8">
         <h1 className=" content-center text-lg font-semibold">Your Backups</h1>
         <Button
+          as={Link}
           className="font-semibold"
           color="primary"
+          href={'/create'}
           size="lg"
-          as={Link}
-          // TODO add link to add page
-          href={'/'}
         >
           Create Backup
         </Button>
diff --git a/frontend/app/docs/layout.tsx b/frontend/app/docs/layout.tsx
new file mode 100644
index 0000000..eaf63f3
--- /dev/null
+++ b/frontend/app/docs/layout.tsx
@@ -0,0 +1,13 @@
+export default function DocsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
+      <div className="inline-block max-w-lg text-center justify-center">
+        {children}
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/app/docs/page.tsx b/frontend/app/docs/page.tsx
new file mode 100644
index 0000000..78903b1
--- /dev/null
+++ b/frontend/app/docs/page.tsx
@@ -0,0 +1,7 @@
+export default function DocsPage() {
+  return (
+    <div>
+      <h1 className="">Docs</h1>
+    </div>
+  );
+}
diff --git a/frontend/services/getBackups.js b/frontend/services/getBackups.js
new file mode 100644
index 0000000..70980d2
--- /dev/null
+++ b/frontend/services/getBackups.js
@@ -0,0 +1,22 @@
+'use client';
+
+import abi from './module.abi.json';
+import { wingmanModuleAddress, publicClient } from './consts';
+
+export async function getBackups(ownerAddress) {
+  try {
+    const backups = await publicClient.readContract({
+      address: wingmanModuleAddress,
+      abi,
+      functionName: 'getBackups',
+      args: [ownerAddress],
+    });
+
+    console.log('Backups:', backups);
+
+    return backups;
+  } catch (error) {
+    console.error('Error fetching backups:', error);
+    throw error;
+  }
+}
diff --git a/frontend/services/module.abi.json b/frontend/services/module.abi.json
index 6f9844c..86058b3 100644
--- a/frontend/services/module.abi.json
+++ b/frontend/services/module.abi.json
@@ -18,5 +18,23 @@
     "outputs": [{"internalType": "bool", "name": "", "type": "bool"}],
     "stateMutability": "view",
     "type": "function"
+  },
+  {
+    "type": "function",
+    "name": "getBackups",
+    "inputs": [
+      {
+        "name": "owner",
+        "type": "address",
+        "internalType": "address"
+      }
+    ],
+    "outputs": [
+      {
+        "name": "",
+        "type": "string[]",
+        "internalType": "string[]"
+      }
+    ]
   }
 ]