diff --git a/apps/frontend/.gitignore b/apps/frontend/.gitignore
index 4d05d2a63..9a56212f8 100644
--- a/apps/frontend/.gitignore
+++ b/apps/frontend/.gitignore
@@ -10,4 +10,5 @@ node_modules
 .output
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
-/dist
\ No newline at end of file
+/dist
+$houdini
diff --git a/apps/frontend/.graphqlrc.yaml b/apps/frontend/.graphqlrc.yaml
new file mode 100644
index 000000000..3e18a301a
--- /dev/null
+++ b/apps/frontend/.graphqlrc.yaml
@@ -0,0 +1,9 @@
+projects:
+  default:
+    schema:
+      - ./schema.graphql
+      - ./$houdini/graphql/schema.graphql
+    documents:
+      - "**/*.gql"
+      - "**/*.svelte"
+      - ./$houdini/graphql/documents.gql
diff --git a/apps/frontend/houdini.config.js b/apps/frontend/houdini.config.js
new file mode 100644
index 000000000..3dd03e9db
--- /dev/null
+++ b/apps/frontend/houdini.config.js
@@ -0,0 +1,13 @@
+/// <references types="houdini-svelte">
+
+/** @type {import('houdini').ConfigFile} */
+const config = {
+  watchSchema: {
+    url: "http://localhost:4000/graphql",
+  },
+  plugins: {
+    "houdini-svelte": {},
+  },
+}
+
+export default config
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 25e1f1e21..a1003e63f 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -48,7 +48,9 @@
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
     "vite": "^5.0.3",
-    "vitest": "^1.2.0"
+    "vitest": "^1.2.0",
+    "houdini": "^1.2.47",
+    "houdini-svelte": "^1.2.47"
   },
   "type": "module",
   "dependencies": {
diff --git a/apps/frontend/schema.graphql b/apps/frontend/schema.graphql
new file mode 100644
index 000000000..80199df82
--- /dev/null
+++ b/apps/frontend/schema.graphql
@@ -0,0 +1,10 @@
+type Query {
+  table(id: ID!): Table
+  tables: [Table]
+}
+
+type Table {
+  id: ID!
+  name: String!
+  recordsCount: Int!
+}
diff --git a/apps/frontend/src/client.ts b/apps/frontend/src/client.ts
new file mode 100644
index 000000000..ae10ebf05
--- /dev/null
+++ b/apps/frontend/src/client.ts
@@ -0,0 +1,15 @@
+import { HoudiniClient } from "$houdini"
+
+export default new HoudiniClient({
+  url: "http://localhost:4000/graphql",
+
+  // uncomment this to configure the network call (for things like authentication)
+  // for more information, please visit here: https://www.houdinigraphql.com/guides/authentication
+  // fetchParams({ session }) {
+  //     return {
+  //         headers: {
+  //             Authentication: `Bearer ${session.token}`,
+  //         }
+  //     }
+  // }
+})
diff --git a/apps/frontend/src/lib/components/blocks/table-header/table-header.svelte b/apps/frontend/src/lib/components/blocks/table-header/table-header.svelte
index a6812543f..52b70878e 100644
--- a/apps/frontend/src/lib/components/blocks/table-header/table-header.svelte
+++ b/apps/frontend/src/lib/components/blocks/table-header/table-header.svelte
@@ -10,7 +10,7 @@
   import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js"
   import * as Sheet from "$lib/components/ui/sheet/index.js"
   import { Button } from "$lib/components/ui/button/index.js"
-  import { DatabaseIcon, HomeIcon, Package2 } from "lucide-svelte"
+  import { DatabaseIcon, Package2 } from "lucide-svelte"
   import CreateTableButton from "../create-table/create-table-button.svelte"
   import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js"
   import { getTable } from "$lib/store/table.store"
diff --git a/apps/frontend/src/routes/(authed)/+layout.gql b/apps/frontend/src/routes/(authed)/+layout.gql
new file mode 100644
index 000000000..0a4cac3c1
--- /dev/null
+++ b/apps/frontend/src/routes/(authed)/+layout.gql
@@ -0,0 +1,7 @@
+query Tables {
+  tables {
+    id
+    name
+    recordsCount
+  }
+}
diff --git a/apps/frontend/src/routes/(authed)/+layout.ts b/apps/frontend/src/routes/(authed)/+layout.ts
index 54fafd0c0..675556c09 100644
--- a/apps/frontend/src/routes/(authed)/+layout.ts
+++ b/apps/frontend/src/routes/(authed)/+layout.ts
@@ -1,3 +1,4 @@
+import { TablesStore } from "$houdini"
 import { trpc } from "$lib/trpc/client"
 import { createTableCommand } from "@undb/commands"
 import { createSchemaDTO } from "@undb/table"
@@ -12,6 +13,8 @@ export const load: LayoutLoad = async (event) => {
   const tables = await trpc.table.list.query()
   event.depends("undb:tables")
 
+  const s = await new TablesStore().fetch({ event })
+
   const createTableForm = await superValidate(
     zod(
       // @ts-ignore
@@ -25,6 +28,7 @@ export const load: LayoutLoad = async (event) => {
 
   return {
     tables,
+    s,
     createTableForm,
   }
 }
diff --git a/apps/frontend/svelte.config.js b/apps/frontend/svelte.config.js
index 9dfd6019d..b4ae95626 100644
--- a/apps/frontend/svelte.config.js
+++ b/apps/frontend/svelte.config.js
@@ -1,17 +1,21 @@
-import adapter from '@sveltejs/adapter-static';
-
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import adapter from "@sveltejs/adapter-static"
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	preprocess: [vitePreprocess({})],
+  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
 
-	kit: {
-		adapter: adapter({
-			pages: 'dist',
-			fallback: 'index.html'
-		})
-	}
-};
+  kit: {
+    adapter: adapter({
+      pages: "dist",
+      fallback: "index.html",
+    }),
+    alias: {
+      $houdini: "./$houdini",
+    },
+  },
+}
 
-export default config;
+export default config
diff --git a/apps/frontend/tsconfig.json b/apps/frontend/tsconfig.json
index 0ab70c748..df2d6ba36 100644
--- a/apps/frontend/tsconfig.json
+++ b/apps/frontend/tsconfig.json
@@ -1,15 +1,16 @@
 {
-	"extends": "./.svelte-kit/tsconfig.json",
-	"compilerOptions": {
-		"allowImportingTsExtensions": true,
-		"resolveJsonModule": true,
-		"skipLibCheck": true,
-		"sourceMap": false,
-		"strict": true,
-		"noFallthroughCasesInSwitch": true,
-		"noEmit": true,
-		"moduleResolution": "bundler",
-		"experimentalDecorators": true,
-		"emitDecoratorMetadata": true
-	}
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": false,
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noEmit": true,
+    "moduleResolution": "bundler",
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "rootDirs": [".", "./.svelte-kit/types", "./$houdini/types", "./$houdini"]
+  }
 }
diff --git a/apps/frontend/vite.config.ts b/apps/frontend/vite.config.ts
index a9c08a82e..2b338b97c 100644
--- a/apps/frontend/vite.config.ts
+++ b/apps/frontend/vite.config.ts
@@ -1,9 +1,11 @@
 import { sveltekit } from "@sveltejs/kit/vite"
+import houdini from "houdini/vite"
 import { visualizer } from "rollup-plugin-visualizer"
 import { defineConfig } from "vitest/config"
 
 export default defineConfig({
   plugins: [
+    houdini(),
     sveltekit(),
     visualizer({
       emitFile: true,
diff --git a/bun.lockb b/bun.lockb
index c6c5b37c7..1fcbf7cbb 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/packages/graphql/package.json b/packages/graphql/package.json
index 53a9ae7b6..1b7eeb789 100644
--- a/packages/graphql/package.json
+++ b/packages/graphql/package.json
@@ -4,13 +4,17 @@
   "types": "src/index.d.ts",
   "type": "module",
   "devDependencies": {
-    "@undb/di": "workspace:*",
-    "@undb/cqrs": "workspace:*",
-    "@undb/queries": "workspace:*",
     "@types/bun": "latest"
   },
   "peerDependencies": {
+    "@undb/di": "workspace:*",
+    "@undb/cqrs": "workspace:*",
+    "@undb/queries": "workspace:*",
     "@elysiajs/graphql-yoga": "^1.0.3",
     "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "graphql": "^16.8.1",
+    "graphql-yoga": "^5.3.1"
   }
 }
diff --git a/packages/graphql/src/index.ts b/packages/graphql/src/index.ts
index f290e26b0..9b6b2dda4 100644
--- a/packages/graphql/src/index.ts
+++ b/packages/graphql/src/index.ts
@@ -2,7 +2,6 @@ import { yoga } from "@elysiajs/graphql-yoga"
 import { QueryBus } from "@undb/cqrs"
 import { container, inject, singleton } from "@undb/di"
 import { GetTableQuery, GetTablesQuery } from "@undb/queries"
-import { createSchema } from "graphql-yoga"
 
 @singleton()
 export class Graphql {
@@ -11,8 +10,8 @@ export class Graphql {
     public readonly queryBus: QueryBus,
   ) {}
 
-  createSchema() {
-    return createSchema({
+  public get yoga() {
+    return yoga({
       typeDefs: `
       type Table {
         id: ID!
@@ -37,17 +36,11 @@ export class Graphql {
           },
         },
         Table: {
-          recordsCount: () => 100,
+          recordsCount: (table) => 100,
         },
       },
     })
   }
-
-  public get yoga() {
-    return yoga({
-      schema: this.createSchema(),
-    })
-  }
 }
 
 export const graphql = () => container.resolve(Graphql)