diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 413ab1dde..279f35cba 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -10,7 +10,8 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test": "vitest",
     "lint": "prettier --check . && eslint .",
-    "format": "prettier --write ."
+    "format": "prettier --write .",
+    "clean": "bunx rimraf node_modules"
   },
   "devDependencies": {
     "@fontsource/fira-mono": "^5.1.0",
diff --git a/apps/frontend/src/lib/components/blocks/aggregate/aggregate.svelte b/apps/frontend/src/lib/components/blocks/aggregate/aggregate.svelte
index d4d78ec88..75f24897f 100644
--- a/apps/frontend/src/lib/components/blocks/aggregate/aggregate.svelte
+++ b/apps/frontend/src/lib/components/blocks/aggregate/aggregate.svelte
@@ -8,6 +8,7 @@
   import * as Tooltip from "$lib/components/ui/tooltip"
   import type { TableDo } from "@undb/table"
   import { getDataService, getIsLocal } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
 
   export let tableId: string | undefined
   export let table: TableDo | undefined
@@ -22,6 +23,7 @@
   $: isValid = isValidWidget(widget) && !!tableId
 
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const getAggregate = createQuery({
     queryKey: ["aggregate", widget.id],
@@ -41,7 +43,7 @@
           ignoreView,
         })
       }
-      const dataService = await getDataService(isLocal)
+      const dataService = await getDataService(isLocal, isPlayground)
       return dataService.records.getAggregates({
         tableId: tableId!,
         viewId,
diff --git a/apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records.svelte b/apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records.svelte
index 84f610aac..cf38522f9 100644
--- a/apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records.svelte
+++ b/apps/frontend/src/lib/components/blocks/bulk-update-records/bulk-update-records.svelte
@@ -21,13 +21,16 @@
   import * as Form from "$lib/components/ui/form"
   import * as Alert from "$lib/components/ui/alert/index.js"
   import { PencilIcon } from "lucide-svelte"
-  import type { IBulkUpdateRecordsCommandOutput } from "@undb/commands"
+  import type { IBulkUpdateRecordsCommand, IBulkUpdateRecordsCommandOutput } from "@undb/commands"
   import * as AlertDialog from "$lib/components/ui/alert-dialog"
   import FiltersEditor from "../filters-editor/filters-editor.svelte"
   import { writable, type Writable } from "svelte/store"
   import autoAnimate from "@formkit/auto-animate"
   import type { Readable } from "svelte/store"
   import { LL } from "@undb/i18n/client"
+  import { getDataService, getIsLocal } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+
 
   const table = getTable()
   export let viewId: Readable<string | undefined>
@@ -41,13 +44,19 @@
   export let filter: IViewFilterGroup | undefined = undefined
   export let onSuccess: (data: IBulkUpdateRecordsCommandOutput) => void = () => {}
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   let selectedFieldIds: string[] = []
   $: selectedFields = selectedFieldIds.map((id) => $table.schema.getFieldById(new FieldIdVo(id)).unwrap())
 
   const client = useQueryClient()
 
   const updateRecordMutation = createMutation({
-    mutationFn: trpc.record.bulkUpdate.mutate,
+    mutationFn: async (command: IBulkUpdateRecordsCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecords(command)
+    },
     onSuccess: async (data) => {
       if (!data.modifiedCount) {
         toast.warning($LL.table.record.bulkUpdate.noRecordsUpdated())
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-date-remove-button.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-date-remove-button.svelte
index 8d00b569f..c78830001 100644
--- a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-date-remove-button.svelte
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-date-remove-button.svelte
@@ -4,11 +4,13 @@
   import { type RecordDO, CalendarView, DateFieldValue, FieldIdVo } from "@undb/table"
   import { getRecordsStore } from "$lib/store/records.store"
   import { getTable } from "$lib/store/table.store"
-  import { trpc } from "$lib/trpc/client"
   import { createMutation } from "@tanstack/svelte-query"
   import { useQueryClient } from "@tanstack/svelte-query"
   import { cn } from "$lib/utils"
   import { calendarStore } from "$lib/store/calendar.store"
+  import { getDataService, getIsLocal } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let view: CalendarView
 
@@ -19,8 +21,14 @@
 
   let field = fieldId ? $t.schema.getFieldById(new FieldIdVo(fieldId)).into(undefined) : undefined
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const updateRecord = createMutation({
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
   })
 
   const client = useQueryClient()
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-day-timeline.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-day-timeline.svelte
index b14bd90ee..2ac271aa1 100644
--- a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-day-timeline.svelte
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-day-timeline.svelte
@@ -30,6 +30,8 @@
   import { tick } from "svelte"
   import { hasPermission } from "$lib/store/space-member.store"
   import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let viewId: Readable<string | undefined>
   export let view: CalendarView
@@ -105,6 +107,7 @@
   const q = queryParam("q")
 
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const getRecords = createQuery(
     derived([t, viewId, q, date], ([$table, $viewId, $q, $date]) => {
@@ -113,7 +116,7 @@
         queryKey: ["records", $table?.id.value, $viewId, $q, $date.toISOString()],
         enabled: view?.type === "calendar" && !disableRecordQuery,
         queryFn: async () => {
-          const dataService = await getDataService(isLocal)
+          const dataService = await getDataService(isLocal, isPlayground)
           const value = format($date, "yyyy-MM-dd")
           if (shareId) {
             return trpc.shareData.records.query({
@@ -255,7 +258,10 @@
   let overMinutes: number | undefined = undefined
 
   const updateRecord = createMutation({
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
   })
 
   const client = useQueryClient()
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-date.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-date.svelte
index 2c86691e3..9fa8a3c49 100644
--- a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-date.svelte
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-date.svelte
@@ -17,6 +17,9 @@
   import { CREATE_RECORD_MODAL, openModal } from "$lib/store/modal.store"
   import { defaultRecordValues } from "$lib/store/records.store"
   import { type Readable } from "svelte/store"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let field: DateField | DateRangeField
   export let date: Date
@@ -33,6 +36,9 @@
   const isSelected = calendarStore.isSelected
   const getIsSameMonth = calendarStore.getIsSameMonth
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   $: color = $viewId ? $table.views.getViewById($viewId)?.color.into(undefined) : undefined
 
   $: day = getDate(date)
@@ -84,7 +90,10 @@
   }
 
   const updateRecord = createMutation({
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
   })
 
   const client = useQueryClient()
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-records.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-records.svelte
index e48b02aa5..ffdc89e82 100644
--- a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-records.svelte
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month-records.svelte
@@ -21,6 +21,7 @@
   import { type MaybeConditionGroup, type IViewFilterOptionSchema } from "@undb/table"
   import { LL } from "@undb/i18n/client"
   import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
 
   export let viewId: Readable<string | undefined>
   export let view: CalendarView
@@ -31,6 +32,7 @@
 
   const t = getTable()
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   let defaultField = $t.schema.getDefaultDisplayField().into(undefined)
 
@@ -100,7 +102,7 @@
         return {
           queryKey: ["records", $table?.id.value, $viewId, $scope, dateString, $search],
           queryFn: async ({ pageParam = 1 }) => {
-            const dataService = await getDataService(isLocal)
+            const dataService = await getDataService(isLocal, isPlayground)
             if (shareId) {
               return trpc.shareData.records.query({
                 shareId,
diff --git a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month.svelte b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month.svelte
index d8e17d12f..f02d2b0f1 100644
--- a/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month.svelte
+++ b/apps/frontend/src/lib/components/blocks/calendar-view/calendar-view-month.svelte
@@ -13,6 +13,7 @@
   import CalendarViewMonthRecords from "./calendar-view-month-records.svelte"
   import CalendarViewMonthDate from "./calendar-view-month-date.svelte"
   import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
 
   export let viewId: Readable<string | undefined>
   export let view: CalendarView
@@ -28,6 +29,7 @@
   const t = getTable()
   const q = queryParam("q")
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const getRecords = createQuery(
     derived([t, viewId, q, startTimestamp, endTimestamp], ([$table, $viewId, $q, $startTimestamp, $endTimestamp]) => {
@@ -43,7 +45,7 @@
         ],
         enabled: view?.type === "calendar" && !!$startTimestamp && !!$endTimestamp && !disableRecordQuery,
         queryFn: async () => {
-          const dataService = await getDataService(isLocal)
+          const dataService = await getDataService(isLocal, isPlayground)
           if (shareId) {
             return trpc.shareData.records.query({
               shareId,
diff --git a/apps/frontend/src/lib/components/blocks/create-base/create-base.svelte b/apps/frontend/src/lib/components/blocks/create-base/create-base.svelte
index 24589d3a1..924d9afdc 100644
--- a/apps/frontend/src/lib/components/blocks/create-base/create-base.svelte
+++ b/apps/frontend/src/lib/components/blocks/create-base/create-base.svelte
@@ -1,26 +1,37 @@
 <script lang="ts">
   import * as Form from "$lib/components/ui/form"
-  import { trpc } from "$lib/trpc/client.js"
   import { createMutation } from "@tanstack/svelte-query"
   import { superForm, defaults } from "sveltekit-superforms"
-  import { createBaseCommand } from "@undb/commands"
+  import { createBaseCommand, type ICreateBaseCommand } from "@undb/commands"
   import { zodClient } from "sveltekit-superforms/adapters"
   import { Input } from "$lib/components/ui/input"
   import { toast } from "svelte-sonner"
   import { CREATE_BASE_MODAL, closeModal } from "$lib/store/modal.store"
   import { goto, invalidateAll } from "$app/navigation"
   import { LoaderCircleIcon } from "lucide-svelte"
-  import { tick } from "svelte"
   import { getNextName } from "@undb/utils"
   import { LL } from "@undb/i18n/client"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const mutation = createMutation({
-    mutationFn: trpc.base.create.mutate,
+    mutationFn: async (command: ICreateBaseCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.base.createBase(command)
+    },
     async onSuccess(data) {
       form.reset()
-      await goto(`/bases/${data}`)
-      await invalidateAll()
+      if (isPlayground) {
+        await goto(`/playground/bases/${data}`)
+      } else {
+        await goto(`/bases/${data}`)
+        await invalidateAll()
+      }
       closeModal(CREATE_BASE_MODAL)
+      toast.success($LL.base.created())
     },
     onError(error) {
       toast.error(error.message)
@@ -67,11 +78,11 @@
         {...attrs}
         disabled={$mutation.isPending}
         bind:value={$formData.name}
-        placeholder="{$LL.base.displayName()}"
+        placeholder={$LL.base.displayName()}
       />
     </Form.Control>
     <Form.FieldErrors />
-</Form.Field>
+  </Form.Field>
 
   <div class="flex items-center justify-end gap-2">
     <Form.FormButton type="button" variant="secondary" on:click={() => closeModal(CREATE_BASE_MODAL)}>
diff --git a/apps/frontend/src/lib/components/blocks/create-field/create-field.svelte b/apps/frontend/src/lib/components/blocks/create-field/create-field.svelte
index a07b8f541..2f77d843d 100644
--- a/apps/frontend/src/lib/components/blocks/create-field/create-field.svelte
+++ b/apps/frontend/src/lib/components/blocks/create-field/create-field.svelte
@@ -15,6 +15,9 @@
   import FieldTypePicker from "../field-picker/field-type-picker.svelte"
   import { LL } from "@undb/i18n/client"
   import { BetweenVerticalStartIcon, LoaderCircleIcon } from "lucide-svelte"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type ICreateFieldCommand } from "@undb/commands"
 
   const table = getTable()
 
@@ -22,11 +25,17 @@
 
   let name = ""
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const client = useQueryClient()
   const createFieldMutation = createMutation(
     derived([table], ([$table]) => ({
       mutationKey: ["table", $table.id.value, "createField"],
-      mutationFn: trpc.table.field.create.mutate,
+      mutationFn: async (command: ICreateFieldCommand) => {
+        const dataService = await getDataService(isLocal, isPlayground)
+        return dataService.table.field.createField(command)
+      },
       async onSuccess() {
         toast.success($LL.table.field.created())
         reset()
diff --git a/apps/frontend/src/lib/components/blocks/create-record/create-record.svelte b/apps/frontend/src/lib/components/blocks/create-record/create-record.svelte
index f0caa37ab..a5d9ca633 100644
--- a/apps/frontend/src/lib/components/blocks/create-record/create-record.svelte
+++ b/apps/frontend/src/lib/components/blocks/create-record/create-record.svelte
@@ -14,10 +14,12 @@
   import { defaultRecordValues, getRecordsStore } from "$lib/store/records.store"
   import { useMediaQuery } from "$lib/store/media-query.store"
   import IdControl from "../field-control/id-control.svelte"
-  import type { ICreateRecordCommandOutput } from "@undb/commands"
+  import type { ICreateRecordCommand, ICreateRecordCommandOutput } from "@undb/commands"
   import { onMount } from "svelte"
   import { LL } from "@undb/i18n/client"
-  import { getIsLocal } from "$lib/store/data-service.store"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+    import { getIsPlayground } from "$lib/store/playground.svelte"
+
 
   // beforeNavigate(({ cancel }) => {
   //   if ($tainted) {
@@ -42,10 +44,14 @@
 
   const mediaQuery = useMediaQuery("(max-width: 768px)")
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const createRecordMutation = createMutation(
     derived([table], ([$table]) => ({
-      mutationFn: trpc.record.create.mutate,
+      mutationFn: async (command: ICreateRecordCommand) => {
+        const dataService = await getDataService(isLocal, isPlayground)
+        return dataService.records.createRecord(command)
+      },
       mutationKey: [$table.id.value, "createRecord"],
       onSuccess: (data: ICreateRecordCommandOutput) => {
         client.invalidateQueries({
@@ -53,7 +59,7 @@
         })
         toast.success($LL.table.record.createdRecord())
         onSuccess?.(data)
-        recordsStore?.invalidateRecord(isLocal, $table, data)
+        recordsStore?.invalidateRecord(isLocal, isPlayground, $table, data)
       },
       onError: (error: Error) => {
         toast.error(error.message)
diff --git a/apps/frontend/src/lib/components/blocks/dashboard/dashboard-widget.svelte b/apps/frontend/src/lib/components/blocks/dashboard/dashboard-widget.svelte
index ac3e26e9c..ca9718433 100644
--- a/apps/frontend/src/lib/components/blocks/dashboard/dashboard-widget.svelte
+++ b/apps/frontend/src/lib/components/blocks/dashboard/dashboard-widget.svelte
@@ -7,6 +7,7 @@
   import { getIsLocal } from "$lib/store/data-service.store"
   import { getDataService } from "$lib/store/data-service.store"
   import { createQuery } from "@tanstack/svelte-query"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
 
   export let tableId: string | undefined
   export let shareId: string | undefined = undefined
@@ -16,6 +17,7 @@
   export let resizePointerDown: ((e: Event) => void) | undefined = undefined
 
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const shareStore = new GetDashboardWidgetShareTableStore()
 
@@ -27,7 +29,7 @@
 
   const getTable = createQuery({
     queryFn: async () => {
-      const dataService = await getDataService(isLocal)
+      const dataService = await getDataService(isLocal, isPlayground)
       return dataService.table.getTable({ tableId: tableId! })
     },
     queryKey: ["dashboard-widget-table", tableId],
diff --git a/apps/frontend/src/lib/components/blocks/dashboard/dashboard.svelte b/apps/frontend/src/lib/components/blocks/dashboard/dashboard.svelte
new file mode 100644
index 000000000..2c7d80e32
--- /dev/null
+++ b/apps/frontend/src/lib/components/blocks/dashboard/dashboard.svelte
@@ -0,0 +1,229 @@
+<script lang="ts">
+  import DashboardWidgets from "$lib/components/blocks/dashboard/dashboard-widgets.svelte"
+  import AddDashboardWidgetButton from "$lib/components/blocks/widget/add-dashboard-widget-button.svelte"
+  import { getDashboard } from "$lib/store/dashboard.store"
+  import { derived } from "svelte/store"
+  import { GaugeIcon, EllipsisIcon, PencilIcon } from "lucide-svelte"
+  import * as DropdownMenu from "$lib/components/ui/dropdown-menu"
+  import { TrashIcon } from "lucide-svelte"
+  import * as AlertDialog from "$lib/components/ui/alert-dialog"
+  import Button from "$lib/components/ui/button/button.svelte"
+  import { trpc } from "$lib/trpc/client"
+  import { createMutation } from "@tanstack/svelte-query"
+  import { goto, invalidate, invalidateAll } from "$app/navigation"
+  import * as Dialog from "$lib/components/ui/dialog"
+  import * as Form from "$lib/components/ui/form"
+  import { Input } from "$lib/components/ui/input"
+  import { CopyIcon } from "lucide-svelte"
+  import { zodClient } from "sveltekit-superforms/adapters"
+  import { defaults, superForm } from "sveltekit-superforms"
+  import { updateDashboardDTO } from "@undb/dashboard"
+  import { Textarea } from "$lib/components/ui/textarea"
+  import { Loader2Icon } from "lucide-svelte"
+  import { toast } from "svelte-sonner"
+  import ShareButton from "$lib/components/blocks/share/share-button.svelte"
+  import { LL } from "@undb/i18n/client"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+
+  const dashboard = getDashboard()
+
+  const isPlayground = getIsPlayground()
+
+  const widgets = derived(dashboard, ($dashboard) => $dashboard?.widgets)
+
+  let deleteDialogOpen = false
+
+  const deleteDashboardMutation = createMutation({
+    mutationFn: trpc.dashboard.delete.mutate,
+    mutationKey: ["dashboard", "delete", $dashboard.id.value],
+    onSuccess: async () => {
+      await invalidateAll()
+      goto("/")
+    },
+    onError: (error) => {
+      toast.error(error.message)
+    },
+  })
+
+  const deleteDashboard = () => {
+    $deleteDashboardMutation.mutate({ id: $dashboard.id.value })
+  }
+
+  let updateDialogOpen = false
+
+  const updateDashboardForm = superForm(
+    defaults(
+      {
+        name: $dashboard.name.value,
+        description: $dashboard.description,
+      },
+      zodClient(updateDashboardDTO),
+    ),
+    {
+      validators: zodClient(updateDashboardDTO),
+      SPA: true,
+      dataType: "json",
+      onSubmit: (data) => {
+        validateForm({ update: true })
+      },
+      onUpdate: (data) => {
+        if (!data.form.valid) {
+          console.log(data.form.errors)
+          return
+        }
+
+        $updateDashboardMutation.mutate({
+          dashboardId: $dashboard.id.value,
+          name: data.form.data.name,
+          description: data.form.data.description,
+        })
+      },
+    },
+  )
+
+  const { form: formData, enhance, validateForm } = updateDashboardForm
+
+  const updateDashboardMutation = createMutation({
+    mutationFn: trpc.dashboard.update.mutate,
+    mutationKey: ["dashboard", "update", $dashboard.id.value],
+  })
+
+  let duplicateDialogOpen = false
+
+  const duplicateDashboardMutation = createMutation({
+    mutationFn: trpc.dashboard.duplicate.mutate,
+    mutationKey: ["dashboard", "duplicate", $dashboard.id.value],
+    onSuccess: async (data) => {
+      await invalidateAll()
+      await goto(`/dashboards/${data}`)
+    },
+  })
+
+  const duplicateDashboard = () => {
+    $duplicateDashboardMutation.mutate({ id: $dashboard.id.value })
+  }
+</script>
+
+<div class="flex h-full flex-col">
+  <header class="flex items-center justify-between border-b px-4 py-2">
+    <h1 class="flex items-center text-sm font-medium text-gray-700">
+      <GaugeIcon class="mr-2 size-4" />
+      {$dashboard.name.value}
+
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <EllipsisIcon class="text-muted-foreground ml-4 size-4" />
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content>
+          <DropdownMenu.Group>
+            <DropdownMenu.Item class="text-xs" on:click={() => (updateDialogOpen = true)}>
+              <PencilIcon class="mr-2 size-3" />
+              {$LL.dashboard.updateName()}
+            </DropdownMenu.Item>
+            <DropdownMenu.Item class="text-xs" on:click={() => (duplicateDialogOpen = true)}>
+              <CopyIcon class="mr-2 size-3" />
+              {$LL.dashboard.duplicateDashboard()}
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              class="text-destructive text-xs hover:!bg-red-100 hover:!text-red-500"
+              on:click={() => (deleteDialogOpen = true)}
+            >
+              <TrashIcon class="mr-2 size-3" />
+              {$LL.dashboard.deleteDashboard()}
+            </DropdownMenu.Item>
+          </DropdownMenu.Group>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </h1>
+    <div class="flex items-center gap-2">
+      {#if !isPlayground}
+        <ShareButton
+          type="dashboard"
+          id={$dashboard.id.value}
+          onSuccess={async () => {
+            await invalidate(`undb:dashboard:${$dashboard.id.value}`)
+          }}
+        />
+      {/if}
+
+      <AddDashboardWidgetButton variant="outline" size="sm" />
+    </div>
+  </header>
+  {#if $widgets?.value.length}
+    <main class="px-4 py-4">
+      <DashboardWidgets />
+    </main>
+  {:else}
+    <div class="flex flex-1 items-center justify-center">
+      <AddDashboardWidgetButton />
+    </div>
+  {/if}
+</div>
+
+<AlertDialog.Root bind:open={deleteDialogOpen}>
+  <AlertDialog.Content>
+    <AlertDialog.Header>
+      <AlertDialog.Title>{$LL.dashboard.confirmDeleteDashboard()}</AlertDialog.Title>
+      <AlertDialog.Description>
+        {$LL.dashboard.confirmDeleteDashboardDescription()}
+      </AlertDialog.Description>
+    </AlertDialog.Header>
+    <AlertDialog.Footer>
+      <AlertDialog.Cancel>{$LL.common.cancel()}</AlertDialog.Cancel>
+      <AlertDialog.Action asChild>
+        <Button variant="destructive" on:click={deleteDashboard}>
+          {#if $deleteDashboardMutation.isPending}
+            <Loader2Icon class="mr-2 size-4" />
+          {/if}
+          {$LL.common.delete()}
+        </Button>
+      </AlertDialog.Action>
+    </AlertDialog.Footer>
+  </AlertDialog.Content>
+</AlertDialog.Root>
+
+<AlertDialog.Root bind:open={duplicateDialogOpen}>
+  <AlertDialog.Content>
+    <AlertDialog.Header>
+      <AlertDialog.Title>{$LL.dashboard.duplicateDashboardConfirm()}</AlertDialog.Title>
+    </AlertDialog.Header>
+    <AlertDialog.Footer>
+      <AlertDialog.Cancel>{$LL.common.cancel()}</AlertDialog.Cancel>
+      <AlertDialog.Action asChild let:builder>
+        <Button on:click={duplicateDashboard} builders={[builder]}>
+          {$LL.common.duplicate()}
+        </Button>
+      </AlertDialog.Action>
+    </AlertDialog.Footer>
+  </AlertDialog.Content>
+</AlertDialog.Root>
+
+<Dialog.Root bind:open={updateDialogOpen}>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>{$LL.dashboard.updateDashboard()}</Dialog.Title>
+    </Dialog.Header>
+
+    <form method="POST" use:enhance>
+      <Form.Field form={updateDashboardForm} name="name">
+        <Form.Control let:attrs>
+          <Form.Label>{$LL.common.name()}</Form.Label>
+          <Input {...attrs} bind:value={$formData.name} />
+        </Form.Control>
+        <Form.Description />
+        <Form.FieldErrors />
+      </Form.Field>
+
+      <Form.Field form={updateDashboardForm} name="description">
+        <Form.Control let:attrs>
+          <Form.Label>{$LL.common.description()}</Form.Label>
+          <Textarea {...attrs} bind:value={$formData.description} />
+        </Form.Control>
+        <Form.Description />
+        <Form.FieldErrors />
+      </Form.Field>
+
+      <Form.Button>{$LL.common.update()}</Form.Button>
+    </form>
+  </Dialog.Content>
+</Dialog.Root>
diff --git a/apps/frontend/src/lib/components/blocks/field-control/button-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/button-control.svelte
index 4b96ec8c0..308893d56 100644
--- a/apps/frontend/src/lib/components/blocks/field-control/button-control.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-control/button-control.svelte
@@ -9,6 +9,8 @@
   import { gridViewStore } from "../grid-view/grid-view.store"
   import { getRecordsStore } from "$lib/store/records.store"
   import { getIsLocal } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let tableId: string
   export let field: ButtonField
@@ -21,13 +23,18 @@
   const recordsStore = getRecordsStore()
 
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
 
   const updateCell = createMutation({
     mutationKey: ["record", tableId, field.id.value, recordId],
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
     async onSuccess(data, variables, context) {
       gridViewStore.exitEditing()
-      await recordsStore?.invalidateRecord(isLocal, $table, recordId)
+      await recordsStore?.invalidateRecord(isLocal, isPlayground, $table, recordId)
       await client.invalidateQueries({ queryKey: [recordId, "get"] })
     },
     onError(error: Error) {
diff --git a/apps/frontend/src/lib/components/blocks/field-options/create-reference-field-optioin.svelte b/apps/frontend/src/lib/components/blocks/field-options/create-reference-field-optioin.svelte
index 5d3120304..4823d5205 100644
--- a/apps/frontend/src/lib/components/blocks/field-options/create-reference-field-optioin.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-options/create-reference-field-optioin.svelte
@@ -16,10 +16,12 @@
   import { Separator } from "$lib/components/ui/separator"
   import FiltersEditor from "../filters-editor/filters-editor.svelte"
   import { writable } from "svelte/store"
-  import { GetForeignTableQueryStore } from "$houdini"
   import autoAnimate from "@formkit/auto-animate"
   import { isEqual } from "radash"
   import { LL } from "@undb/i18n/client"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { createQuery } from "@tanstack/svelte-query"
 
   export let disabled = false
 
@@ -32,14 +34,25 @@
     condition: undefined,
   }
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   let allowCondition: boolean = !!option.condition
-  const getForeignTableStore = new GetForeignTableQueryStore()
+
+  const getForeignTable = createQuery({
+    queryFn: async () => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.table.getTable({ tableId: option.foreignTableId! })
+    },
+    queryKey: ["getForeignTable", option.foreignTableId],
+    enabled: !!option.foreignTableId,
+  })
 
   $: if (allowCondition && option.foreignTableId) {
-    getForeignTableStore.fetch({ variables: { tableId: option.foreignTableId } })
+    $getForeignTable.refetch()
   }
 
-  $: ft = $getForeignTableStore.data?.table
+  $: ft = $getForeignTable.data
 
   // @ts-ignore
   $: foreignTable = ft ? new TableFactory().fromJSON(ft) : undefined
diff --git a/apps/frontend/src/lib/components/blocks/field-options/foreign-table.gql b/apps/frontend/src/lib/components/blocks/field-options/foreign-table.gql
deleted file mode 100644
index 8059dae56..000000000
--- a/apps/frontend/src/lib/components/blocks/field-options/foreign-table.gql
+++ /dev/null
@@ -1,21 +0,0 @@
-query GetForeignTableQuery($tableId: ID!) {
-  table(id: $tableId) {
-    id
-    name
-    schema {
-      id
-      name
-      type
-      defaultValue
-      display
-      constraint
-      option
-      metadata
-    }
-    views {
-      id
-      name
-      type
-    }
-  }
-}
diff --git a/apps/frontend/src/lib/components/blocks/field-options/rollup-field-option.svelte b/apps/frontend/src/lib/components/blocks/field-options/rollup-field-option.svelte
index e3023397e..e48bfcdc1 100644
--- a/apps/frontend/src/lib/components/blocks/field-options/rollup-field-option.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-options/rollup-field-option.svelte
@@ -9,12 +9,17 @@
     type IRollupFieldOption,
   } from "@undb/table"
   import FieldPicker from "../field-picker/field-picker.svelte"
-  import { GetForeignTableQueryStore } from "$houdini"
   import { writable } from "svelte/store"
   import RollupFnPicker from "../rollup/rollup-fn-picker.svelte"
   import Label from "$lib/components/ui/label/label.svelte"
   import autoAnimate from "@formkit/auto-animate"
   import { LL } from "@undb/i18n/client"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { createQuery } from "@tanstack/svelte-query"
+
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   export let disabled: boolean = false
 
@@ -29,11 +34,18 @@
   ) as ReferenceField | undefined
   $: foreignTableId = field?.foreignTableId
 
-  const store = new GetForeignTableQueryStore()
+  const getForeignTable = createQuery({
+    queryFn: async () => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.table.getTable({ tableId: foreignTableId! })
+    },
+    queryKey: ["getForeignTable", foreignTableId],
+    enabled: !!foreignTableId,
+  })
 
-  $: if (foreignTableId) store.fetch({ variables: { tableId: foreignTableId } })
+  $: if (foreignTableId) $getForeignTable.refetch()
 
-  $: foreignTable = $store.data?.table
+  $: foreignTable = $getForeignTable.data
   const foreignTableDo = writable<TableDo>()
   $: if (foreignTable) foreignTableDo.set(new TableFactory().fromJSON(foreignTable))
   $: schema = foreignTable?.schema
diff --git a/apps/frontend/src/lib/components/blocks/field-options/update-reference-field-optioin.svelte b/apps/frontend/src/lib/components/blocks/field-options/update-reference-field-optioin.svelte
index ae7a52a6c..cca7356b0 100644
--- a/apps/frontend/src/lib/components/blocks/field-options/update-reference-field-optioin.svelte
+++ b/apps/frontend/src/lib/components/blocks/field-options/update-reference-field-optioin.svelte
@@ -17,11 +17,13 @@
   import { Separator } from "$lib/components/ui/separator"
   import FiltersEditor from "../filters-editor/filters-editor.svelte"
   import { writable } from "svelte/store"
-  import { GetForeignTableQueryStore } from "$houdini"
   import autoAnimate from "@formkit/auto-animate"
   import { onMount } from "svelte"
   import { isEqual } from "radash"
   import { LL } from "@undb/i18n/client"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { createQuery } from "@tanstack/svelte-query"
 
   export let constraint: IReferenceFieldConstraint | undefined = {
     required: false,
@@ -34,13 +36,22 @@
   export let disabled: boolean = false
 
   let allowCondition: boolean = !!option.condition
-  const getForeignTableStore = new GetForeignTableQueryStore()
 
-  $: if (allowCondition && option.foreignTableId) {
-    getForeignTableStore.fetch({ variables: { tableId: option.foreignTableId } })
-  }
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
+  const getForeignTable = createQuery({
+    queryFn: async () => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.table.getTable({ tableId: option.foreignTableId! })
+    },
+    queryKey: ["getForeignTable", option.foreignTableId],
+    enabled: !!option.foreignTableId,
+  })
+
+  $: if (option.foreignTableId) $getForeignTable.refetch()
 
-  $: ft = $getForeignTableStore.data?.table
+  $: ft = $getForeignTable.data
 
   // @ts-ignore
   $: foreignTable = ft ? new TableFactory().fromJSON(ft) : undefined
diff --git a/apps/frontend/src/lib/components/blocks/field/field-menu.svelte b/apps/frontend/src/lib/components/blocks/field/field-menu.svelte
index 07bcd70fb..a97c90009 100644
--- a/apps/frontend/src/lib/components/blocks/field/field-menu.svelte
+++ b/apps/frontend/src/lib/components/blocks/field/field-menu.svelte
@@ -1,11 +1,5 @@
 <script lang="ts">
-  import {
-    FieldIdVo,
-    getIsFieldCanBeRollup,
-    type Field,
-    type IReferenceFieldOption,
-    type ReferenceField,
-  } from "@undb/table"
+  import { FieldIdVo, getIsFieldCanBeRollup, type Field, type ReferenceField } from "@undb/table"
   import { Button } from "$lib/components/ui/button"
   import FieldIcon from "$lib/components/blocks/field-icon/field-icon.svelte"
   import { PencilIcon, TrashIcon } from "lucide-svelte"
@@ -13,35 +7,47 @@
   import UpdateField from "../update-field/update-field.svelte"
   import { cn } from "$lib/utils"
   import * as AlertDialog from "$lib/components/ui/alert-dialog"
-  import { createMutation, useQueryClient } from "@tanstack/svelte-query"
-  import { trpc } from "$lib/trpc/client"
+  import { createMutation, createQuery, useQueryClient } from "@tanstack/svelte-query"
   import { getTable } from "$lib/store/table.store"
   import { toast } from "svelte-sonner"
   import { invalidate } from "$app/navigation"
   import Label from "$lib/components/ui/label/label.svelte"
   import Checkbox from "$lib/components/ui/checkbox/checkbox.svelte"
-  import { GetForeignTableStore, GetRollupForeignTablesStore } from "$houdini"
+  import { GetRollupForeignTablesStore } from "$houdini"
   import * as Alert from "$lib/components/ui/alert"
   import { preferences } from "$lib/store/persisted.store"
   import { hasPermission } from "$lib/store/space-member.store"
   import { LL } from "@undb/i18n/client"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IDeleteFieldCommand, type IDuplicateFieldCommand } from "@undb/commands"
 
   export let field: Field
   const table = getTable()
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   export let update = false
   export let open = false
 
   const client = useQueryClient()
 
-  const foreignTableStore = new GetForeignTableStore()
+  const getForeignTable = createQuery({
+    queryFn: async () => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.table.getTable({ tableId: (field as ReferenceField).foreignTableId })
+    },
+    queryKey: ["getForeignTable", $table.baseId],
+    enabled: field.type === "reference",
+  })
 
   let deleteAlertOpen = false
-  $: deleteAlertOpen &&
-    field.type === "reference" &&
-    foreignTableStore.fetch({ variables: { tableId: field.foreignTableId } })
+  $: deleteAlertOpen && field.type === "reference" && $getForeignTable.refetch()
 
-  $: symmetricField = $foreignTableStore.data?.table?.schema.find(
+  $: foreignTable = $getForeignTable.data
+
+  $: symmetricField = foreignTable?.schema?.find(
     (f) => f.type === "reference" && f.id === (field as ReferenceField).symmetricFieldId,
   )
 
@@ -54,7 +60,10 @@
     })
 
   const deleteField = createMutation({
-    mutationFn: trpc.table.field.delete.mutate,
+    mutationFn: async (command: IDeleteFieldCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.table.field.deleteField(command)
+    },
     async onSuccess() {
       toast.success($LL.table.field.deleted())
       await invalidate(`undb:table:${$table.id.value}`)
@@ -68,7 +77,10 @@
   })
 
   const duplicateField = createMutation({
-    mutationFn: trpc.table.field.duplicate.mutate,
+    mutationFn: async (command: IDuplicateFieldCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.table.field.duplicateField(command)
+    },
     async onSuccess() {
       toast.success("Duplicate field success")
       await invalidate(`undb:table:${$table.id.value}`)
@@ -229,7 +241,7 @@
                 {/if}
                 {#if symmetricField}
                   {@const foreignRollupFields =
-                    $foreignTableStore.data?.table?.schema.filter(
+                    foreignTable?.schema.filter(
                       (f) => f.type === "rollup" && f.option?.referenceFieldId === symmetricField.id,
                     ) ?? []}
                   <Alert.Root class="border-yellow-500 bg-yellow-50">
@@ -253,7 +265,7 @@
 
                       of
                       <span class="font-bold">
-                        {$foreignTableStore.data?.table?.name}
+                        {foreignTable?.name}
                       </span>
                       will also be deleted.
                     </Alert.Description>
diff --git a/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view.svelte b/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view.svelte
index fe1440da4..a1d8675a5 100644
--- a/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/gallery-view/gallery-view.svelte
@@ -14,6 +14,7 @@
   import GalleryViewLoading from "./gallery-view-loading.svelte"
   import GalleryViewOptionButton from "./gallery-option-button.svelte"
   import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
 
   const table = getTable()
   export let viewId: Readable<string | undefined>
@@ -31,6 +32,7 @@
   const currentPage = writable(1)
   const q = queryParam("q")
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const getRecords = async () => {
     if (shareId) {
@@ -42,7 +44,7 @@
         pagination: { limit: $perPage, page: $currentPage },
       })
     }
-    const dataService = await getDataService(isLocal)
+    const dataService = await getDataService(isLocal, isPlayground)
     return dataService.records.getRecords({
       tableId: $table?.id.value,
       viewId: $viewId,
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/attachment-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/attachment-cell.svelte
index c3ee476d8..0c15a15f6 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/attachment-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/attachment-cell.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { isImage, type AttachmentField, type IAttachmentFieldValue, type IPresign } from "@undb/table"
-  import { trpc } from "$lib/trpc/client"
   import { createMutation } from "@tanstack/svelte-query"
   import { toast } from "svelte-sonner"
   import Label from "$lib/components/ui/label/label.svelte"
@@ -10,6 +9,9 @@
   import * as Dialog from "$lib/components/ui/dialog"
   import * as AlertDialog from "$lib/components/ui/alert-dialog"
   import { AspectRatio } from "$lib/components/ui/aspect-ratio"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let tableId: string
   export let value: IAttachmentFieldValue | undefined = undefined
@@ -21,9 +23,15 @@
   $: max = field.max
   $: disabled = value?.length ?? 0 >= max
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const updateCell = createMutation({
     mutationKey: ["record", tableId, field.id.value, recordId],
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
     onError(error: Error) {
       toast.error(error.message)
     },
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/button-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/button-cell.svelte
index 4ad21175d..1ed77677c 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/button-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/button-cell.svelte
@@ -13,6 +13,7 @@
   import FieldControl from "../../field-control/field-control.svelte"
   import { LL } from "@undb/i18n/client"
   import { getIsLocal } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
 
   export let tableId: string
   export let field: ButtonField
@@ -24,13 +25,14 @@
   const recordsStore = getRecordsStore()
 
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const trigger = createMutation({
     mutationKey: ["record", tableId, field.id.value, recordId, "trigger"],
     mutationFn: trpc.record.trigger.mutate,
     async onSuccess(data, variables, context) {
       gridViewStore.exitEditing()
-      await recordsStore?.invalidateRecord(isLocal, $table, recordId)
+      await recordsStore?.invalidateRecord(isLocal, isPlayground, $table, recordId)
     },
     onError(error: Error) {
       toast.error(error.message)
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/checkbox-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/checkbox-cell.svelte
index 4e91b921b..bac7b976a 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/checkbox-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/checkbox-cell.svelte
@@ -5,6 +5,9 @@
   import { createMutation } from "@tanstack/svelte-query"
   import type { CheckboxField } from "@undb/table"
   import { toast } from "svelte-sonner"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let tableId: string
   export let field: CheckboxField
@@ -13,9 +16,15 @@
   export let readonly = false
   export let onValueChange: (value: boolean) => void
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const updateCell = createMutation({
     mutationKey: ["record", tableId, field.id.value, recordId],
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
     onError(error: Error) {
       toast.error(error.message)
     },
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/currency-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/currency-cell.svelte
index c0a710c13..9e89d128b 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/currency-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/currency-cell.svelte
@@ -6,6 +6,9 @@
   import { toast } from "svelte-sonner"
   import { debounce, isNumber } from "radash"
   import { gridViewStore } from "../grid-view.store"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let tableId: string
   export let field: CurrencyField
@@ -14,9 +17,15 @@
   export let recordId: string
   export let onValueChange: (value: number) => void
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const updateCell = createMutation({
     mutationKey: ["record", tableId, field.id.value, recordId],
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
     onSuccess(data, variables, context) {
       el?.blur()
       gridViewStore.exitEditing()
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-cell.svelte
index 3327fc489..3741e847a 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-cell.svelte
@@ -10,6 +10,9 @@
   import { Button } from "$lib/components/ui/button"
   import TimePicker from "$lib/components/blocks/date/time-picker.svelte"
   import { LL } from "@undb/i18n/client"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let tableId: string
   export let field: DateField
@@ -39,9 +42,15 @@
     open = false
   }
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const updateCell = createMutation({
     mutationKey: ["record", tableId, field.id.value, recordId],
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
     onSuccess(data, variables, context) {
       open = false
     },
@@ -81,7 +90,7 @@
               value = undefined
             }
             onValueChange(value)
-            if (!shouldConfirm) {
+            if (!shouldConfirm && value) {
               save(value)
             }
           }}
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-range-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-range-cell.svelte
index 0627bc832..e4bc133de 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-range-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-range-cell.svelte
@@ -11,6 +11,9 @@
   import Button from "$lib/components/ui/button/button.svelte"
   import TimePicker from "$lib/components/blocks/date/time-picker.svelte"
   import { LL } from "@undb/i18n/client"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   type Value = [string | Date | null | undefined, string | Date | null | undefined] | undefined
 
@@ -51,9 +54,15 @@
     open = true
   }
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const updateCell = createMutation({
     mutationKey: ["record", tableId, field.id.value, recordId],
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
     onSuccess(data, variables, context) {
       open = false
     },
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/duration-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/duration-cell.svelte
index b7e8b1640..358ec2b5b 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/duration-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/duration-cell.svelte
@@ -7,6 +7,9 @@
   import { debounce, isNumber } from "radash"
   import { gridViewStore } from "../grid-view.store"
   import DurationInput from "$lib/components/blocks/duration/duration-input.svelte"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let tableId: string
   export let field: DurationField
@@ -15,9 +18,15 @@
   export let recordId: string
   export let onValueChange: (value: number) => void
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const updateCell = createMutation({
     mutationKey: ["record", tableId, field.id.value, recordId],
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
     onSuccess(data, variables, context) {
       gridViewStore.exitEditing()
     },
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/email-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/email-cell.svelte
index 244eb9deb..baaecee73 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/email-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/email-cell.svelte
@@ -5,6 +5,9 @@
   import type { EmailField } from "@undb/table"
   import { toast } from "svelte-sonner"
   import { gridViewStore } from "../grid-view.store"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let tableId: string
   export let field: EmailField
@@ -13,9 +16,15 @@
   export let isEditing: boolean
   export let onValueChange: (value: string) => void
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const updateCell = createMutation({
     mutationKey: ["record", tableId, field.id.value, recordId],
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
     onSuccess(data, variables, context) {
       el?.blur()
       gridViewStore.exitEditing()
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/json-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/json-cell.svelte
index 3313c7af6..4345fbbcd 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/json-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/json-cell.svelte
@@ -8,6 +8,9 @@
   import { createMutation } from "@tanstack/svelte-query"
   import { toast } from "svelte-sonner"
   import ScrollArea from "$lib/components/ui/scroll-area/scroll-area.svelte"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let tableId: string
   export let value: JsonValue | undefined = undefined
@@ -16,9 +19,15 @@
   export let recordId: string
   export let onValueChange: (value: JsonValue | undefined) => void
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const updateCell = createMutation({
     mutationKey: ["record", tableId, field.id.value, recordId],
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
     onError(error: Error) {
       toast.error(error.message)
     },
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/long-text-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/long-text-cell.svelte
index 24d2372e9..8f7a112a9 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/long-text-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/long-text-cell.svelte
@@ -8,6 +8,9 @@
   import { Maximize2Icon } from "lucide-svelte"
   import * as Dialog from "$lib/components/ui/dialog"
   import Tiptap from "$lib/components/tiptap/tiptap.svelte"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let tableId: string
   export let field: LongTextField
@@ -18,9 +21,15 @@
   export let readonly: boolean
   export let onValueChange: (value: string) => void
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const updateCell = createMutation({
     mutationKey: ["record", tableId, field.id.value, recordId],
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
     onSuccess(data, variables, context) {
       el?.blur()
       open = false
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/number-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/number-cell.svelte
index f4a54cb41..0b6842d48 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/number-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/number-cell.svelte
@@ -6,6 +6,9 @@
   import { toast } from "svelte-sonner"
   import { debounce, isNumber } from "radash"
   import { gridViewStore } from "../grid-view.store"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let tableId: string
   export let field: NumberField
@@ -14,9 +17,15 @@
   export let recordId: string
   export let onValueChange: (value: number) => void
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const updateCell = createMutation({
     mutationKey: ["record", tableId, field.id.value, recordId],
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
     onSuccess(data, variables, context) {
       el?.blur()
       gridViewStore.exitEditing()
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/percentage-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/percentage-cell.svelte
index 1b191ef69..fed591c2b 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/percentage-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/percentage-cell.svelte
@@ -8,6 +8,9 @@
   import { gridViewStore } from "../grid-view.store"
   import { Slider } from "$lib/components/ui/slider"
   import * as Tooltip from "$lib/components/ui/tooltip"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let tableId: string
   export let field: NumberField
@@ -16,9 +19,15 @@
   export let recordId: string
   export let onValueChange: (value: number) => void
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const updateCell = createMutation({
     mutationKey: ["record", tableId, field.id.value, recordId],
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
     onSuccess(data, variables, context) {
       el?.blur()
       gridViewStore.exitEditing()
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/rating-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/rating-cell.svelte
index ab242532f..6483ad88c 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/rating-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/rating-cell.svelte
@@ -5,6 +5,9 @@
   import { createMutation } from "@tanstack/svelte-query"
   import type { RatingField } from "@undb/table"
   import { toast } from "svelte-sonner"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let tableId: string
   export let recordId: string
@@ -13,6 +16,9 @@
   export let readonly = false
   export let onValueChange: (value: number) => void
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   $: max = field.max
 
   let overIndex: number | undefined = undefined
@@ -29,7 +35,10 @@
 
   const updateCell = createMutation({
     mutationKey: ["record", tableId, field.id.value, recordId],
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
     onError(error: Error) {
       toast.error(error.message)
     },
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/reference-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/reference-cell.svelte
index 18b915469..acecb0bde 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/reference-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/reference-cell.svelte
@@ -8,6 +8,7 @@
   import { cn } from "$lib/utils"
   import { LL } from "@undb/i18n/client"
   import { getIsLocal } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
 
   const table = getTable()
 
@@ -24,7 +25,7 @@
   export let r: Writable<string | null>
 
   const isLocal = getIsLocal()
-
+  const isPlayground = getIsPlayground()
   $: selected = writable<string[]>(value)
 
   let hasValue = Array.isArray(value) && value.length > 0
@@ -40,7 +41,7 @@
 
   function onSuccess(id?: string) {
     if (id) {
-      recordStore?.invalidateRecord(isLocal, $table, id, $viewId)
+      recordStore?.invalidateRecord(isLocal, isPlayground, $table, id, $viewId)
     }
   }
 </script>
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/select-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/select-cell.svelte
index 46e602ed4..c1f5ccd83 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/select-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/select-cell.svelte
@@ -10,6 +10,10 @@
   import OptionsPicker from "../../option/options-picker.svelte"
   import type { IOptionId } from "@undb/table/src/modules/schema/fields/option/option-id.vo"
   import OptionPicker from "../../option/option-picker.svelte"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
+
 
   export let tableId: string
   export let field: SelectField
@@ -20,6 +24,9 @@
   export let onValueChange: (id: IOptionId | IOptionId[] | null) => void
   export let readonly: boolean = false
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   $: selected = Array.isArray(value)
     ? value.map((v) => field.options.find((o) => o.id === v)).filter((v) => !!v)
     : field.options.find((option) => option.id === value)
@@ -31,7 +38,10 @@
 
   const updateCell = createMutation({
     mutationKey: ["record", tableId, field.id.value, recordId],
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
     onError(error: Error) {
       toast.error(error.message)
     },
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/string-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/string-cell.svelte
index cb0b8f0b6..7313503a3 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/string-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/string-cell.svelte
@@ -5,6 +5,9 @@
   import type { StringField } from "@undb/table"
   import { toast } from "svelte-sonner"
   import { gridViewStore } from "../grid-view.store"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let tableId: string
   export let field: StringField
@@ -14,9 +17,15 @@
   export let readonly: boolean
   export let onValueChange: (value: string) => void
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const updateCell = createMutation({
     mutationKey: ["record", tableId, field.id.value, recordId],
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
     onSuccess(data, variables, context) {
       el?.blur()
       gridViewStore.exitEditing()
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/url-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/url-cell.svelte
index d9d96a442..6e82e556d 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/url-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/url-cell.svelte
@@ -5,6 +5,9 @@
   import type { EmailField } from "@undb/table"
   import { toast } from "svelte-sonner"
   import { gridViewStore } from "../grid-view.store"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let tableId: string
   export let field: EmailField
@@ -13,9 +16,15 @@
   export let isEditing: boolean
   export let onValueChange: (value: string) => void
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const updateCell = createMutation({
     mutationKey: ["record", tableId, field.id.value, recordId],
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
     onSuccess(data, variables, context) {
       el?.blur()
       gridViewStore.exitEditing()
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/user-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/user-cell.svelte
index 08192aa52..c0000713f 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/user-cell.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/user-cell.svelte
@@ -11,7 +11,9 @@
   import UserMacro from "../../user/user-macro.svelte"
   import { getRecordsStore } from "$lib/store/records.store"
   import { getTable } from "$lib/store/table.store"
-  import { getIsLocal } from "$lib/store/data-service.store"
+  import { getDataService, getIsLocal } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let tableId: string
   export let field: UserField
@@ -32,14 +34,18 @@
   const store = getRecordsStore()
 
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const updateCell = createMutation({
     mutationKey: ["record", tableId, field.id.value, recordId],
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
     async onSuccess(data, variables) {
       const value = variables.values[field.id.value]
       if (isUserFieldMacro(value)) {
-        await store?.invalidateRecord(isLocal, $table, recordId)
+        await store?.invalidateRecord(isLocal, isPlayground, $table, recordId)
       }
     },
     onError(error: Error) {
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/grid-view.svelte b/apps/frontend/src/lib/components/blocks/grid-view/grid-view.svelte
index 2f923b27b..383e7230b 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/grid-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/grid-view.svelte
@@ -10,6 +10,7 @@
   import { preferences } from "$lib/store/persisted.store"
   import { aggregatesStore } from "$lib/store/aggregates.store"
   import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
 
   export let readonly = false
 
@@ -22,6 +23,7 @@
   export let filter: IViewFilterGroup | undefined = undefined
 
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const perPage = derived(preferences, ($preferences) => $preferences.gridViewPerPage ?? 50)
   const currentPage = queryParam("page", ssp.number())
@@ -33,7 +35,7 @@
         queryKey: ["records", $table?.id.value, $viewId, $q, $currentPage, $perPage],
         enabled: view?.type === "grid",
         queryFn: async () => {
-          const dataService = await getDataService(isLocal)
+          const dataService = await getDataService(isLocal,isPlayground)
 
           return dataService.records.getRecords({
             tableId: $table?.id.value,
@@ -69,7 +71,7 @@
       return {
         queryKey: ["aggregates", $table?.id.value, $viewId],
         queryFn: async () => {
-      const dataService = await getDataService(isLocal)
+      const dataService = await getDataService(isLocal, isPlayground)
 
           return dataService.records.getAggregates({ tableId: $table.id.value, viewId: $viewId })},
         enabled: !!$table,
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/selected-records-button.svelte b/apps/frontend/src/lib/components/blocks/grid-view/selected-records-button.svelte
index ded37d5f3..d3ff68966 100644
--- a/apps/frontend/src/lib/components/blocks/grid-view/selected-records-button.svelte
+++ b/apps/frontend/src/lib/components/blocks/grid-view/selected-records-button.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import Button from "$lib/components/ui/button/button.svelte"
   import { getTable } from "$lib/store/table.store"
-  import { trpc } from "$lib/trpc/client"
   import { createMutation, useQueryClient } from "@tanstack/svelte-query"
   import { toast } from "svelte-sonner"
   import * as AlertDialog from "$lib/components/ui/alert-dialog"
@@ -14,6 +13,12 @@
   import { r } from "$lib/store/records.store"
   import type { Readable } from "svelte/store"
   import { LL } from "@undb/i18n/client"
+  import { type IBulkDeleteRecordsCommand, type IBulkDuplicateRecordsCommand } from "@undb/commands"
+  import { getDataService, getIsLocal } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const table = getTable()
 
@@ -28,7 +33,10 @@
 
   const client = useQueryClient()
   const deleteRecordsMutation = createMutation({
-    mutationFn: trpc.record.bulkDelete.mutate,
+    mutationFn: async (command: IBulkDeleteRecordsCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.deleteRecords(command)
+    },
     onSuccess(data, variables, context) {
       client.invalidateQueries({
         queryKey: ["records", $table.id.value],
@@ -52,7 +60,10 @@
   }
 
   const duplicateRecordsMutation = createMutation({
-    mutationFn: trpc.record.bulkDuplicate.mutate,
+    mutationFn: async (command: IBulkDuplicateRecordsCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.duplicateRecords(command)
+    },
     async onSuccess(data, variables, context) {
       await client.invalidateQueries({
         queryKey: ["records", $table.id.value],
@@ -147,7 +158,7 @@
                 <AlertDialog.Header>
                   <AlertDialog.Title>{$LL.table.record.confirmDeleteRecords({ n: ids.length })}</AlertDialog.Title>
                   <AlertDialog.Description>
-                    {$LL.table.record.confirmDeleteRecordsDescription()}
+                    {$LL.table.record.confirmDeleteRecordsDescription({ table: $table.name.value })}
                   </AlertDialog.Description>
                 </AlertDialog.Header>
                 <AlertDialog.Footer>
diff --git a/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-lane.svelte b/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-lane.svelte
index a6966e98f..dcef83897 100644
--- a/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-lane.svelte
+++ b/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-lane.svelte
@@ -46,6 +46,9 @@
   import { queryParam } from "sveltekit-search-params"
   import { LL } from "@undb/i18n/client"
   import { getDataService, getIsLocal } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
+  import { type IUpdateFieldCommand } from "@undb/commands"
 
   const table = getTable()
   const recordsStore = getRecordsStore()
@@ -69,6 +72,7 @@
   $: isLaneCollapsed = $viewId ? ($getIsLaneCollapsed($viewId, option?.id ?? "") ?? false) : false
 
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const query = createInfiniteQuery(
     derived([table, viewId, q], ([$table, $viewId, $q]) => {
@@ -76,7 +80,7 @@
       return {
         queryKey: ["records", $table.id.value, $viewId, fieldId, option?.id, $q],
         queryFn: async ({ pageParam = 1 }) => {
-          const dataService = await getDataService(isLocal)
+          const dataService = await getDataService(isLocal, isPlayground)
           if (shareId) {
             return trpc.shareData.records.getRecords({
               shareId,
@@ -130,14 +134,20 @@
   const spec = Some(new SelectEqual(option?.id ?? null, new FieldIdVo(fieldId)))
 
   const updateRecord = createMutation({
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
     onError: (error, variables, context) => {
       toast.error(error.message)
     },
   })
 
   const updateFieldMutation = createMutation({
-    mutationFn: trpc.table.field.update.mutate,
+    mutationFn: async (command: IUpdateFieldCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.table.field.updateField(command)
+    },
     onSuccess: async (data, variables, context) => {
       toast.success("Option updated")
       updateOptionDialogOpen = false
diff --git a/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-view.svelte b/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-view.svelte
index 67bb96275..7e374c453 100644
--- a/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/kanban-view/select-kanban-view.svelte
@@ -14,7 +14,6 @@
   import SelectKanbanLane from "./select-kanban-lane.svelte"
   import { arrayMoveImmutable } from "array-move"
   import { isNumber } from "radash"
-  import { trpc } from "$lib/trpc/client"
   import { createMutation } from "@tanstack/svelte-query"
   import { toast } from "svelte-sonner"
   import { PlusIcon } from "lucide-svelte"
@@ -24,6 +23,9 @@
   import { invalidate } from "$app/navigation"
   import type { Writable } from "svelte/store"
   import { LL } from "@undb/i18n/client"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateFieldCommand } from "@undb/commands"
 
   const table = getTable()
 
@@ -40,8 +42,14 @@
   let lanesContainer: HTMLElement
   $: options = field.options ?? []
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const updateFieldMudation = createMutation({
-    mutationFn: trpc.table.field.update.mutate,
+    mutationFn: async (command: IUpdateFieldCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.table.field.updateField(command)
+    },
     mutationKey: ["table", $table.id.value, "field", fieldId, "update"],
     async onSuccess(data) {
       await invalidate(`undb:table:${$table.id.value}`)
diff --git a/apps/frontend/src/lib/components/blocks/list-view/list-view.svelte b/apps/frontend/src/lib/components/blocks/list-view/list-view.svelte
index 225a61cc0..100d037d4 100644
--- a/apps/frontend/src/lib/components/blocks/list-view/list-view.svelte
+++ b/apps/frontend/src/lib/components/blocks/list-view/list-view.svelte
@@ -12,6 +12,7 @@
   import ListViewLoading from "./list-view-loading.svelte"
   import ListViewList from "./list-view-list.svelte"
   import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
 
   const table = getTable()
   export let viewId: Readable<string | undefined>
@@ -25,6 +26,7 @@
   const currentPage = writable(1)
   const q = queryParam("q")
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const getRecords = async () => {
     if (shareId) {
@@ -36,7 +38,7 @@
         pagination: { limit: $perPage, page: $currentPage },
       })
     }
-    const dataService = await getDataService(isLocal)
+    const dataService = await getDataService(isLocal, isPlayground)
     return dataService.records.getRecords({
       tableId: $table?.id.value,
       viewId: $viewId,
diff --git a/apps/frontend/src/lib/components/blocks/member/member-menu.svelte b/apps/frontend/src/lib/components/blocks/member/member-menu.svelte
index a5a13c012..b9a69afde 100644
--- a/apps/frontend/src/lib/components/blocks/member/member-menu.svelte
+++ b/apps/frontend/src/lib/components/blocks/member/member-menu.svelte
@@ -60,6 +60,10 @@
         <KeyIcon class="mr-2 h-4 w-4" />
         {$LL.account.apiToken()}
       </DropdownMenu.Item>
+      <DropdownMenu.Item href="/playground">
+        <img src={GithubLogo} alt="undb" class="mr-2 h-4 w-4" />
+        Playground
+      </DropdownMenu.Item>
       <DropdownMenu.Item href="https://undb.io/templates" target="_blank" rel="noopener noreferrer">
         <img src={Logo} alt="undb" class="mr-2 h-4 w-4" />
         {$LL.account.undbTemplates()}
diff --git a/apps/frontend/src/lib/components/blocks/playground/playground.svelte b/apps/frontend/src/lib/components/blocks/playground/playground.svelte
new file mode 100644
index 000000000..c4a04f9a1
--- /dev/null
+++ b/apps/frontend/src/lib/components/blocks/playground/playground.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button"
+  import { CREATE_BASE_MODAL, IMPORT_TEMPLATE_MODAL, toggleModal } from "$lib/store/modal.store"
+  import { CirclePlusIcon, PackageIcon } from "lucide-svelte"
+  import { LL } from "@undb/i18n/client"
+</script>
+
+<main class="flex h-screen w-screen items-center justify-center">
+  <div class="flex flex-col space-y-2">
+    <Button class="w-48" on:click={() => toggleModal(CREATE_BASE_MODAL)} {...$$restProps}>
+      <CirclePlusIcon class="mr-2 size-4" />
+      {$LL.base.createBase()}
+    </Button>
+    <Button class="w-48" on:click={() => toggleModal(IMPORT_TEMPLATE_MODAL)} {...$$restProps}>
+      <PackageIcon class="mr-2 size-4" />
+      {$LL.base.importFromTemplate()}
+    </Button>
+  </div>
+</main>
+
+{#await import("$lib/components/blocks/create-base/create-base-dialog.svelte") then { default: CreateBaseDialog }}
+  <CreateBaseDialog baseNames={[]} />
+{/await}
+
+{#await import("$lib/components/blocks/template/template-list-sheet.svelte") then { default: TemplateListSheet }}
+  <TemplateListSheet />
+{/await}
diff --git a/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte b/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
index 761e2b937..169c615fc 100644
--- a/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
+++ b/apps/frontend/src/lib/components/blocks/record-detail/record-detail.svelte
@@ -18,7 +18,9 @@
   import { getRecordsStore } from "$lib/store/records.store"
   import { type Writable, type Readable } from "svelte/store"
   import { LL } from "@undb/i18n/client"
-  import { getIsLocal } from "$lib/store/data-service.store"
+  import { getDataService, getIsLocal } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   const recordsStore = getRecordsStore()
 
@@ -28,6 +30,8 @@
   export let viewId: Readable<string | undefined>
 
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   beforeNavigate(({ cancel }) => {
     if (mutableFieldTainted) {
       if (!confirm("Are you sure you want to leave this page? You have unsaved changes that will be lost.")) {
@@ -48,14 +52,17 @@
   const client = useQueryClient()
 
   const updateRecordMutation = createMutation({
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
     mutationKey: ["updateRecord"],
     onSuccess: async () => {
       toast.success("Record updated")
       onSuccess()
       await client.invalidateQueries({ queryKey: [record.id.value, "get"] })
       reset({})
-      await recordsStore?.invalidateRecord(isLocal, $table, record.id.value)
+      await recordsStore?.invalidateRecord(isLocal, isPlayground, $table, record.id.value)
     },
     onError: (error) => {
       toast.error(error.message)
diff --git a/apps/frontend/src/lib/components/blocks/record-detail/table-record-detail-sheet.svelte b/apps/frontend/src/lib/components/blocks/record-detail/table-record-detail-sheet.svelte
index d8595897a..ac629f828 100644
--- a/apps/frontend/src/lib/components/blocks/record-detail/table-record-detail-sheet.svelte
+++ b/apps/frontend/src/lib/components/blocks/record-detail/table-record-detail-sheet.svelte
@@ -9,11 +9,13 @@
   import type { Readable } from "svelte/store"
   import { trpc } from "$lib/trpc/client"
   import { getDataService, getIsLocal } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
 
   export let readonly = false
   export let viewId: Readable<string | undefined>
 
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const table = getTable()
 
@@ -21,7 +23,7 @@
     derived([table, r, preferences], ([$table, $recordId, $preferences]) => ({
       queryKey: [$recordId, "get", $preferences.showHiddenFields],
       queryFn: async () => {
-        const dataService = await getDataService(isLocal)
+        const dataService = await getDataService(isLocal, isPlayground)
         return dataService.records.getRecordById({
           tableId: $table?.id.value,
           id: $recordId!,
diff --git a/apps/frontend/src/lib/components/blocks/reference/foreign-record-detail-button.svelte b/apps/frontend/src/lib/components/blocks/reference/foreign-record-detail-button.svelte
index b43640e10..13fa2dfd2 100644
--- a/apps/frontend/src/lib/components/blocks/reference/foreign-record-detail-button.svelte
+++ b/apps/frontend/src/lib/components/blocks/reference/foreign-record-detail-button.svelte
@@ -14,6 +14,7 @@
   import { createQuery, useQueryClient } from "@tanstack/svelte-query"
   import { getDataService } from "$lib/store/data-service.store"
   import { getIsLocal } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
 
   export let foreignTable: Readable<TableDo>
   export let r: Writable<string | null>
@@ -28,12 +29,13 @@
   let disabled = false
 
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   const record = createQuery(
     derived([foreignTable, recordId, preferences, open], ([$table, $recordId, $preferences, $open]) => ({
       queryKey: [$recordId, "get", $preferences.showHiddenFields, $open],
       queryFn: async () => {
-        const dataService = await getDataService(isLocal)
+        const dataService = await getDataService(isLocal, isPlayground)
         return dataService.records.getRecordById({
           tableId: $table?.id.value,
           id: $recordId!,
diff --git a/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker-dropdown.svelte b/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker-dropdown.svelte
index 927f8b842..a6bd5bfe8 100644
--- a/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker-dropdown.svelte
+++ b/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker-dropdown.svelte
@@ -9,6 +9,7 @@
   import { LL } from "@undb/i18n/client"
   import { createQuery } from "@tanstack/svelte-query"
   import { getDataService, getIsLocal } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
 
   export let isSelected = false
 
@@ -27,10 +28,12 @@
   let open = false
 
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const getForeignTable = createQuery({
     queryKey: ["foreignTable", foreignTableId, open],
     queryFn: async () => {
-      const dataService = await getDataService(isLocal)
+      const dataService = await getDataService(isLocal, isPlayground)
       return dataService.table.getTable({ tableId: foreignTableId })
     },
   })
diff --git a/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker.svelte b/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker.svelte
index 20f7db29c..024ca6088 100644
--- a/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker.svelte
+++ b/apps/frontend/src/lib/components/blocks/reference/foreign-records-picker.svelte
@@ -19,6 +19,8 @@
   import Checkbox from "$lib/components/ui/checkbox/checkbox.svelte"
   import ForeignRecordDetailButton from "./foreign-record-detail-button.svelte"
   import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateRecordCommand } from "@undb/commands"
 
   export let foreignTable: Readable<TableDo>
   export let isSelected = false
@@ -33,6 +35,7 @@
   export let onSuccess: (id?: string) => void
 
   const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   let linkAfterCreate = true
 
@@ -51,7 +54,7 @@
         queryKey: ["records", $table.id.value, $q, $currentPage, $selected?.length],
         enabled: !!$table,
         queryFn: async () => {
-          const dataService = await getDataService(isLocal)
+          const dataService = await getDataService(isLocal, isPlayground)
           return dataService.records.getRecords({
             tableId: $table.id.value,
             q: $q || undefined,
@@ -97,7 +100,10 @@
   const client = useQueryClient()
   const updateCell = createMutation({
     mutationKey: ["record", tableId, field.id.value, recordId],
-    mutationFn: trpc.record.update.mutate,
+    mutationFn: async (command: IUpdateRecordCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.records.updateRecord(command)
+    },
     async onSuccess(data, variables, context) {
       await client.invalidateQueries({ queryKey: ["records", field.foreignTableId] })
       onSuccess?.(recordId)
diff --git a/apps/frontend/src/lib/components/blocks/reference/foreign-table-picker.svelte b/apps/frontend/src/lib/components/blocks/reference/foreign-table-picker.svelte
index 8f01fa7f9..bb3affe52 100644
--- a/apps/frontend/src/lib/components/blocks/reference/foreign-table-picker.svelte
+++ b/apps/frontend/src/lib/components/blocks/reference/foreign-table-picker.svelte
@@ -7,33 +7,47 @@
   import { Button } from "$lib/components/ui/button/index.js"
   import { cn } from "$lib/utils.js"
   import { getTable } from "$lib/store/table.store"
-  import { GetForeignTablesStore, GetForeignTableStore } from "$houdini"
-  import { group } from "radash"
-  import { DatabaseIcon, ChevronRightIcon, ExternalLinkIcon } from "lucide-svelte"
+  import { DatabaseIcon, ExternalLinkIcon } from "lucide-svelte"
   import { LL } from "@undb/i18n/client"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { createQuery } from "@tanstack/svelte-query"
 
   const table = getTable()
 
-  const getForeignTablesStore = new GetForeignTablesStore()
-  const getForeignTableStore = new GetForeignTableStore()
-
-  $: open && getForeignTablesStore.fetch()
-  $: foreignTables = $getForeignTablesStore.data?.tables.filter((t) => !!t) ?? []
-  $: groupTables = group(foreignTables, (t) => t.base?.id)
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
 
   let open = false
   export let value: string | undefined = undefined
   export let disabled: boolean = false
 
-  $: foreignBase = $getForeignTableStore.data?.table?.base
+  const getForeignTable = createQuery({
+    queryFn: async () => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.table.getTable({ tableId: value! })
+    },
+    queryKey: ["getForeignTable", value],
+    enabled: !!value,
+  })
+
+  const getForeignTables = createQuery({
+    queryFn: async () => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.table.getTables({})
+    },
+    queryKey: ["getForeignTables", $table.baseId],
+  })
+
+  $: open && $getForeignTables.refetch()
+  $: foreignTables = $getForeignTables.data?.filter((t) => !!t) ?? []
+
+  $: foreignTable = $getForeignTable.data
 
-  $: selectedValue =
-    foreignTables.filter((f) => !!f).find((f) => f.id === value)?.name ?? $getForeignTableStore.data?.table?.name ?? ""
+  $: selectedValue = foreignTables.filter((f) => !!f).find((f) => f.id === value)?.name ?? foreignTable?.name ?? ""
   let fetched = false
   $: if (value && !selectedValue && !fetched) {
-    getForeignTableStore.fetch({ variables: { tableId: value } }).then(() => {
-      fetched = true
-    })
+    $getForeignTable.refetch()
   }
 
   // We want to refocus the trigger button when the user selects
@@ -61,10 +75,6 @@
       >
         {#if selectedValue}
           <span class="inline-flex items-center gap-1 truncate text-xs text-gray-700">
-            {#if foreignBase}
-              {foreignBase.name}
-              <ChevronRightIcon class="size-3 shrink-0 opacity-50" />
-            {/if}
             {selectedValue}
           </span>
         {:else}
@@ -88,38 +98,33 @@
     >
       <Command.Input placeholder={$LL.table.common.search()} class="h-9" />
       <Command.Empty>{$LL.table.common.noTablesFound()}</Command.Empty>
-      {#each Object.entries(groupTables) as [baseId, tables]}
-        {#if tables?.length}
-          {@const baseName = tables[0].base.name}
-          <Command.Group heading={baseName}>
-            {#each tables as t}
-              {#if t}
-                <Command.Item
-                  value={t.id}
-                  onSelect={(currentValue) => {
-                    value = currentValue
-                    closeAndFocusTrigger(ids.trigger)
-                  }}
-                  class="gap-2"
+      {#if foreignTables?.length}
+        {#each foreignTables as t}
+          {#if t}
+            <Command.Item
+              value={t.id}
+              onSelect={(currentValue) => {
+                value = currentValue
+                closeAndFocusTrigger(ids.trigger)
+              }}
+              class="gap-2"
+            >
+              <Check class={cn("h-4 w-4", value !== t.id && "text-transparent")} />
+              <span class="inline-flex items-center gap-2 truncate text-xs text-gray-700">
+                <DatabaseIcon class="h-4 w-4" />
+                {t.name}
+              </span>
+              {#if t.id === $table?.id.value}
+                <span
+                  class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10"
                 >
-                  <Check class={cn("h-4 w-4", value !== t.id && "text-transparent")} />
-                  <span class="inline-flex items-center gap-2 truncate text-xs text-gray-700">
-                    <DatabaseIcon class="h-4 w-4" />
-                    {t.name}
-                  </span>
-                  {#if t.id === $table?.id.value}
-                    <span
-                      class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10"
-                    >
-                      Current
-                    </span>
-                  {/if}
-                </Command.Item>
+                  Current
+                </span>
               {/if}
-            {/each}
-          </Command.Group>
-        {/if}
-      {/each}
+            </Command.Item>
+          {/if}
+        {/each}
+      {/if}
     </Command.Root>
   </Popover.Content>
 </Popover.Root>
diff --git a/apps/frontend/src/lib/components/blocks/reference/foreign-table.gql b/apps/frontend/src/lib/components/blocks/reference/foreign-table.gql
deleted file mode 100644
index 7983411ea..000000000
--- a/apps/frontend/src/lib/components/blocks/reference/foreign-table.gql
+++ /dev/null
@@ -1,33 +0,0 @@
-query GetForeignTable($tableId: ID!) {
-  table(id: $tableId) {
-    id
-    name
-
-    base {
-      id
-      name
-    }
-
-    schema {
-      id
-      name
-      type
-      defaultValue
-      display
-      constraint
-      option
-      metadata
-    }
-
-    views {
-      id
-      name
-      type
-      filter
-      color
-      sort
-      aggregate
-      fields
-    }
-  }
-}
diff --git a/apps/frontend/src/lib/components/blocks/reference/foreign-tables.gql b/apps/frontend/src/lib/components/blocks/reference/foreign-tables.gql
deleted file mode 100644
index 04ebee8d1..000000000
--- a/apps/frontend/src/lib/components/blocks/reference/foreign-tables.gql
+++ /dev/null
@@ -1,16 +0,0 @@
-query GetForeignTables($baseId: ID) {
-  tables(baseId: $baseId) {
-    id
-    name
-    schema {
-      id
-      name
-      type
-    }
-
-    base {
-      id
-      name
-    }
-  }
-}
diff --git a/apps/frontend/src/lib/components/blocks/table-tools/table-tools.svelte b/apps/frontend/src/lib/components/blocks/table-tools/table-tools.svelte
index 60419b5e8..933a17c0b 100644
--- a/apps/frontend/src/lib/components/blocks/table-tools/table-tools.svelte
+++ b/apps/frontend/src/lib/components/blocks/table-tools/table-tools.svelte
@@ -9,10 +9,13 @@
   import BulkUpdateRecordsButton from "../bulk-update-records/bulk-update-records-button.svelte"
   import ViewWidgetButton from "../view-widget/view-widget-button.svelte"
   import type { Readable, Writable } from "svelte/store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
 
   export let readonly = false
   export let r: Writable<string | null>
   export let viewId: Readable<string | undefined>
+
+  const isPlayground = getIsPlayground()
 </script>
 
 <div class="flex items-center justify-between gap-2 border-b px-4 py-2">
@@ -30,7 +33,9 @@
   <div class="flex items-center gap-2">
     {#if !readonly}
       <BulkUpdateRecordsButton {r} {viewId} />
-      <ShareViewButton />
+      {#if !isPlayground}
+        <ShareViewButton />
+      {/if}
     {/if}
     <RecordsSearch />
     <ViewWidgetButton {readonly} />
diff --git a/apps/frontend/src/lib/components/blocks/template/template-card.svelte b/apps/frontend/src/lib/components/blocks/template/template-card.svelte
index e36611879..6e1c91aa9 100644
--- a/apps/frontend/src/lib/components/blocks/template/template-card.svelte
+++ b/apps/frontend/src/lib/components/blocks/template/template-card.svelte
@@ -14,19 +14,34 @@
   import { Checkbox } from "$lib/components/ui/checkbox/index.js"
   import Label from "$lib/components/ui/label/label.svelte"
   import { LL } from "@undb/i18n/client"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type ICreateFromTemplateCommand } from "@undb/commands"
 
-  let includeData = false
 
   export let template: ITemplateDTO
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
+  let includeData = !!isPlayground
+
   const createFromTemplate = createMutation({
-    mutationFn: trpc.template.createFromTemplate.mutate,
+    mutationFn: async (command: ICreateFromTemplateCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.template.createFromTemplate(command)
+    },
     async onSuccess(data, variables, context) {
-      toast.success("Base created successfully")
+      toast.success($LL.base.created())
       closeModal(IMPORT_TEMPLATE_MODAL)
       await invalidateAll()
+
       if (data.baseIds.length > 0) {
-        goto(`/bases/${data.baseIds[0]}`)
+        if (isPlayground) {
+          await goto(`/playground/bases/${data.baseIds[0]}`)
+        } else {
+          await goto(`/bases/${data.baseIds[0]}`)
+        }
       }
     },
     onError(error) {
diff --git a/apps/frontend/src/lib/components/blocks/template/template-preview.svelte b/apps/frontend/src/lib/components/blocks/template/template-preview.svelte
index 8277a3e66..7416a3349 100644
--- a/apps/frontend/src/lib/components/blocks/template/template-preview.svelte
+++ b/apps/frontend/src/lib/components/blocks/template/template-preview.svelte
@@ -19,6 +19,7 @@
   import { templateStore } from "$lib/store/template.store.svelte"
   import { setDashboard } from "$lib/store/dashboard.store"
   import DashboardWidgets from "$lib/components/blocks/dashboard/dashboard-widgets.svelte"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
 
   export let template: ITemplateDTO
 
@@ -42,12 +43,14 @@
 
   let r = writable<string | null>(null)
 
+  const isPlayground = getIsPlayground()
+
   const record = createQuery(
     derived([currentTable, r, preferences], ([$table, $recordId, $preferences]) => ({
       queryKey: [$recordId, "get", $preferences.showHiddenFields],
       enabled: !!$table && !!$recordId,
       queryFn: async () => {
-        const dataService = getDataService(true)
+        const dataService = getDataService(true, isPlayground)
         return dataService.records.getRecordById({
           tableId: $table?.id.value,
           id: $recordId!,
@@ -85,7 +88,7 @@
       return
     }
 
-    dataService = getDataService(true)
+    dataService = getDataService(true, isPlayground)
     await dataService.template.save(t, true)
     templateStore.saveTemplate(template.id, t)
     saved = true
diff --git a/apps/frontend/src/lib/components/blocks/update-field/update-field.svelte b/apps/frontend/src/lib/components/blocks/update-field/update-field.svelte
index 8547cffa9..dbbfd546a 100644
--- a/apps/frontend/src/lib/components/blocks/update-field/update-field.svelte
+++ b/apps/frontend/src/lib/components/blocks/update-field/update-field.svelte
@@ -28,6 +28,9 @@
   import { LoaderCircleIcon, PencilIcon } from "lucide-svelte"
   import { LL } from "@undb/i18n/client"
   import { getIsFieldCanCastTo } from "@undb/table"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type IUpdateFieldCommand } from "@undb/commands"
 
   const table = getTable()
 
@@ -40,11 +43,17 @@
 
   $: isTypeChanged = type !== updatedType
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const client = useQueryClient()
   const updateFieldMutation = createMutation(
     derived([table], ([$table]) => ({
       mutationKey: ["table", $table.id.value, "updateField"],
-      mutationFn: trpc.table.field.update.mutate,
+      mutationFn: async (command: IUpdateFieldCommand) => {
+        const dataService = await getDataService(isLocal, isPlayground)
+        return dataService.table.field.updateField(command)
+      },
       async onSuccess() {
         onSuccess()
         toast.success($LL.table.field.updated())
@@ -59,7 +68,6 @@
   )
 
   function getDefaultValue(field: Field): IUpdateFieldDTO {
-    console.log(field.constraint)
     return {
       id: field.id.value,
       type: field.type,
diff --git a/apps/frontend/src/lib/components/blocks/view-color-editor/view-color-editor.svelte b/apps/frontend/src/lib/components/blocks/view-color-editor/view-color-editor.svelte
index 04ee8722b..7215b8358 100644
--- a/apps/frontend/src/lib/components/blocks/view-color-editor/view-color-editor.svelte
+++ b/apps/frontend/src/lib/components/blocks/view-color-editor/view-color-editor.svelte
@@ -20,10 +20,16 @@
   import { hasPermission } from "$lib/store/space-member.store"
   import type { Readable } from "svelte/store"
   import { LL } from "@undb/i18n/client"
+  import type { ISetViewColorCommand } from "@undb/commands"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
 
   export let readonly = false
   export let viewId: Readable<string | undefined>
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const table = getTable()
   $: color = $table.views.getViewById($viewId).color.into(undefined)
   $: count = color?.count ?? 0
@@ -37,7 +43,10 @@
 
   const mutation = createMutation({
     mutationKey: ["table", $table.id.value, "setColor"],
-    mutationFn: trpc.table.view.setColor.mutate,
+    mutationFn: async (command: ISetViewColorCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.table.view.setColor(command)
+    },
     onSuccess: async () => {
       await invalidate(`undb:table:${$table.id.value}`)
       open = false
diff --git a/apps/frontend/src/lib/components/blocks/view-fields/view-fields.svelte b/apps/frontend/src/lib/components/blocks/view-fields/view-fields.svelte
index 1fb0b6d96..24e915227 100644
--- a/apps/frontend/src/lib/components/blocks/view-fields/view-fields.svelte
+++ b/apps/frontend/src/lib/components/blocks/view-fields/view-fields.svelte
@@ -20,6 +20,9 @@
   import CreateFieldButton from "../create-field/create-field-button.svelte"
   import { LL } from "@undb/i18n/client"
   import { EyeIcon, EyeOffIcon } from "lucide-svelte"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import { type ISetViewFieldsCommand } from "@undb/commands"
 
   export let readonly = false
   export let viewId: Readable<string | undefined>
@@ -42,9 +45,15 @@
     return field && field.name.value.toLowerCase().includes($q.toLowerCase())
   })
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const client = useQueryClient()
   const setViewFieldsMutation = createMutation({
-    mutationFn: trpc.table.view.setFields.mutate,
+    mutationFn: async (command: ISetViewFieldsCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.table.view.setFields(command)
+    },
     mutationKey: ["table", $table.id.value, "setFields"],
     async onSuccess(data, variables, context) {
       await invalidate(`undb:table:${$table.id.value}`)
diff --git a/apps/frontend/src/lib/components/blocks/view-filter-editor/view-filter-editor.svelte b/apps/frontend/src/lib/components/blocks/view-filter-editor/view-filter-editor.svelte
index 0b921a545..4958af0b2 100644
--- a/apps/frontend/src/lib/components/blocks/view-filter-editor/view-filter-editor.svelte
+++ b/apps/frontend/src/lib/components/blocks/view-filter-editor/view-filter-editor.svelte
@@ -4,7 +4,6 @@
   import { FilterIcon, FilterXIcon } from "lucide-svelte"
   import FiltersEditor from "../filters-editor/filters-editor.svelte"
   import { getTable } from "$lib/store/table.store"
-  import { trpc } from "$lib/trpc/client"
   import { LoaderCircleIcon } from "lucide-svelte"
   import { createMutation, useQueryClient } from "@tanstack/svelte-query"
   import { invalidate } from "$app/navigation"
@@ -20,6 +19,9 @@
   import { hasPermission } from "$lib/store/space-member.store"
   import type { Readable } from "svelte/store"
   import { LL } from "@undb/i18n/client"
+  import { getDataService, getIsLocal } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import type { ISetViewFilterCommand } from "@undb/commands"
 
   export let readonly = false
   export let viewId: Readable<string | undefined>
@@ -39,9 +41,15 @@
 
   const client = useQueryClient()
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   const mutation = createMutation({
     mutationKey: ["table", $table.id.value, "setFilters"],
-    mutationFn: trpc.table.view.setFilter.mutate,
+    mutationFn: async (command: ISetViewFilterCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.table.view.setFilter(command)
+    },
     onSuccess: async () => {
       await invalidate(`undb:table:${$table.id.value}`)
       await client.invalidateQueries({ queryKey: ["records", $table.id.value] })
diff --git a/apps/frontend/src/lib/components/blocks/view-sort/view-sort.svelte b/apps/frontend/src/lib/components/blocks/view-sort/view-sort.svelte
index 44852cfab..fc991f2e9 100644
--- a/apps/frontend/src/lib/components/blocks/view-sort/view-sort.svelte
+++ b/apps/frontend/src/lib/components/blocks/view-sort/view-sort.svelte
@@ -28,6 +28,9 @@
   import { hasPermission } from "$lib/store/space-member.store"
   import { LL } from "@undb/i18n/client"
   import SortPicker from "./sort-picker.svelte"
+  import { getIsLocal, getDataService } from "$lib/store/data-service.store"
+  import { getIsPlayground } from "$lib/store/playground.svelte"
+  import type { ISetViewSortCommand } from "@undb/commands"
 
   export let readonly = false
   export let viewId: Readable<string | undefined>
@@ -51,6 +54,9 @@
 
   let open = false
 
+  const isLocal = getIsLocal()
+  const isPlayground = getIsPlayground()
+
   function addSort() {
     if (disabled) {
       return
@@ -61,7 +67,10 @@
   const client = useQueryClient()
   const setViewSortMutation = createMutation({
     mutationKey: ["table", $table.id.value, "setSort"],
-    mutationFn: trpc.table.view.setSort.mutate,
+    mutationFn: async (command: ISetViewSortCommand) => {
+      const dataService = await getDataService(isLocal, isPlayground)
+      return dataService.table.view.setSort(command)
+    },
     async onSettled() {
       await invalidate(`undb:table:${$table.id.value}`)
       await client.invalidateQueries({ queryKey: ["records", $table.id.value] })
diff --git a/apps/frontend/src/lib/registry.svelte.ts b/apps/frontend/src/lib/registry.svelte.ts
index 5e3c4e8f5..02d29020e 100644
--- a/apps/frontend/src/lib/registry.svelte.ts
+++ b/apps/frontend/src/lib/registry.svelte.ts
@@ -1,20 +1,65 @@
-import { CreateFromTemplateCommandHandler, DeleteBaseCommandHandler } from "@undb/command-handlers"
+import { ISpaceMemberService, SPACE_MEMBER_SERVICE } from "@undb/authz"
+import {
+  BulkDeleteRecordsCommandHandler,
+  BulkDuplicateRecordsCommandHandler,
+  BulkUpdateRecordsCommandHandler,
+  CreateBaseCommandHandler,
+  CreateFromTemplateCommandHandler,
+  CreateRecordCommandHandler,
+  CreateTableFieldCommandHandler,
+  DeleteBaseCommandHandler,
+  DeleteTableFieldCommandHandler,
+  DuplicateTableFieldCommandHandler,
+  SetViewColorCommandHandler,
+  SetViewFieldsCommandHandler,
+  SetViewFilterCommandHandler,
+  SetViewSortCommandHandler,
+  UpdateRecordCommandHandler,
+  UpdateTableFieldCommandHandler,
+} from "@undb/command-handlers"
+import { CONTEXT_TOKEN, IContext } from "@undb/context"
 import { CommandBus, QueryBus } from "@undb/cqrs"
 import { registerDataService, registerQueryBuilder } from "@undb/data-service"
 import { container } from "@undb/di"
 import {
   GetAggregatesQueryHandler,
+  GetBaseQueryHandler,
+  GetDashboardByIdQueryHandler,
+  GetDashboardsQueryHandler,
   GetRecordByIdQueryHandler,
   GetRecordsQueryHandler,
   GetTableQueryHandler,
+  GetTablesQueryHandler,
 } from "@undb/query-handlers"
 
-const commandHandlers = [CreateFromTemplateCommandHandler, DeleteBaseCommandHandler]
+const commandHandlers = [
+  BulkDuplicateRecordsCommandHandler,
+  BulkDeleteRecordsCommandHandler,
+  BulkUpdateRecordsCommandHandler,
+  CreateFromTemplateCommandHandler,
+  CreateRecordCommandHandler,
+  DeleteBaseCommandHandler,
+  CreateBaseCommandHandler,
+  UpdateRecordCommandHandler,
+  SetViewFilterCommandHandler,
+  SetViewColorCommandHandler,
+  SetViewFieldsCommandHandler,
+  SetViewSortCommandHandler,
+  DeleteTableFieldCommandHandler,
+  CreateTableFieldCommandHandler,
+  UpdateTableFieldCommandHandler,
+  DuplicateTableFieldCommandHandler,
+]
+
 const queryHandlers = [
+  GetTablesQueryHandler,
   GetRecordsQueryHandler,
   GetRecordByIdQueryHandler,
   GetTableQueryHandler,
   GetAggregatesQueryHandler,
+  GetBaseQueryHandler,
+  GetDashboardsQueryHandler,
+  GetDashboardByIdQueryHandler,
 ]
 
 class Registry {
@@ -38,6 +83,11 @@ class Registry {
       const queryBus = container.resolve(QueryBus)
       queryBus.register(queryHandlers)
 
+      // TODO: move to other place
+      const context = container.resolve<IContext>(CONTEXT_TOKEN)
+      const spaceMemberService = container.resolve<ISpaceMemberService>(SPACE_MEMBER_SERVICE)
+      await spaceMemberService.createMember(context.mustGetCurrentUserId(), context.mustGetCurrentSpaceId(), "admin")
+
       this.#registered = true
     }
   }
diff --git a/apps/frontend/src/lib/store/data-service.store.ts b/apps/frontend/src/lib/store/data-service.store.ts
index e724cb316..7d23388dd 100644
--- a/apps/frontend/src/lib/store/data-service.store.ts
+++ b/apps/frontend/src/lib/store/data-service.store.ts
@@ -12,7 +12,7 @@ export function getIsLocal() {
   return getContext<boolean>(IS_LOCAL) ?? false
 }
 
-export async function getDataService(isLocal: boolean) {
+export async function getDataService(isLocal: boolean, isPlayground: boolean) {
   await registry.register(isLocal)
-  return getDataServiceImpl(isLocal)
+  return getDataServiceImpl(isLocal, isPlayground)
 }
diff --git a/apps/frontend/src/lib/store/playground.svelte.ts b/apps/frontend/src/lib/store/playground.svelte.ts
new file mode 100644
index 000000000..7bad04ec6
--- /dev/null
+++ b/apps/frontend/src/lib/store/playground.svelte.ts
@@ -0,0 +1,11 @@
+import { getContext, setContext } from "svelte"
+
+const IS_PLAYGROUND = "IS_PLAYGROUND"
+
+export function setIsPlayground(isPlayground: boolean) {
+  setContext(IS_PLAYGROUND, isPlayground)
+}
+
+export function getIsPlayground() {
+  return getContext<boolean>(IS_PLAYGROUND) ?? false
+}
diff --git a/apps/frontend/src/lib/store/records.store.ts b/apps/frontend/src/lib/store/records.store.ts
index 7937fc1af..e4023483c 100644
--- a/apps/frontend/src/lib/store/records.store.ts
+++ b/apps/frontend/src/lib/store/records.store.ts
@@ -9,9 +9,9 @@ import {
   type IRecordValues,
   type Records,
 } from "@undb/table"
-import { getContext, setContext } from "svelte"
-import { derived, writable } from "svelte/store"
-import { queryParam, ssp } from "sveltekit-search-params"
+import { getContext,setContext } from "svelte"
+import { derived,writable } from "svelte/store"
+import { queryParam,ssp } from "sveltekit-search-params"
 
 type RecordStore = {
   lastUpdatedAt: number
@@ -113,8 +113,8 @@ export const createRecordsStore = () => {
   const hasRecord = derived(store, ($store) => !!$store.records.size)
   const count = derived(store, ($store) => $store.ids.length)
 
-  const invalidateRecord = async (isLocal: boolean, table: TableDo, recordId: string, viewId?: string) => {
-    const dataService = await getDataService(isLocal)
+  const invalidateRecord = async (isLocal: boolean, isPlayground: boolean, table: TableDo, recordId: string, viewId?: string) => {
+    const dataService = await getDataService(isLocal, isPlayground)
     const view = viewId ? table.views.getViewById(viewId) : undefined
     const result = await dataService.records.getRecordById({
       tableId: table.id.value,
diff --git a/apps/frontend/src/lib/store/space-member.store.ts b/apps/frontend/src/lib/store/space-member.store.ts
index 435f93822..d6bb1dea4 100644
--- a/apps/frontend/src/lib/store/space-member.store.ts
+++ b/apps/frontend/src/lib/store/space-member.store.ts
@@ -1,8 +1,11 @@
 import { getHasPermission, type ISpaceAction, type ISpaceMemberRole } from "@undb/authz"
 import { derived, writable } from "svelte/store"
+import { getIsPlayground } from "./playground.svelte"
 
 export const role = writable<ISpaceMemberRole | null>(null)
 
 export const hasPermission = derived(role, ($role) => (action: ISpaceAction) => {
+  const isPlayground = getIsPlayground()
+  if (isPlayground) return true
   return !!$role && getHasPermission({ role: $role, action })
 })
diff --git a/apps/frontend/src/lib/trpc/client.ts b/apps/frontend/src/lib/trpc/client.ts
index 27ec7d005..2001dbc6a 100644
--- a/apps/frontend/src/lib/trpc/client.ts
+++ b/apps/frontend/src/lib/trpc/client.ts
@@ -1,6 +1,4 @@
 import { createTRPCProxyClient, httpLink } from "@trpc/client"
-import { TRPC_CLIENT } from "@undb/data-service"
-import { container } from "@undb/di"
 import type { AppRouter } from "@undb/trpc"
 
 export const trpc = createTRPCProxyClient<AppRouter>({
@@ -10,5 +8,3 @@ export const trpc = createTRPCProxyClient<AppRouter>({
     }),
   ],
 })
-
-container.register(TRPC_CLIENT, { useValue: trpc })
diff --git a/apps/frontend/src/routes/(authed)/(space)/+layout.svelte b/apps/frontend/src/routes/(authed)/(space)/+layout.svelte
index 639fe1c04..5a796b4ee 100644
--- a/apps/frontend/src/routes/(authed)/(space)/+layout.svelte
+++ b/apps/frontend/src/routes/(authed)/(space)/+layout.svelte
@@ -7,8 +7,6 @@
   import { goto } from "$app/navigation"
   import { page } from "$app/stores"
   import { shortcut, type ShortcutEventDetail } from "@svelte-put/shortcut"
-  import { ScrollArea } from "$lib/components/ui/scroll-area/index.js"
-  import { CREATE_TABLE_MODAL, toggleModal } from "$lib/store/modal.store"
   import Command from "$lib/components/blocks/command/command.svelte"
   import { role } from "$lib/store/space-member.store"
   import { baseId, bases as basesStore } from "$lib/store/base.store"
@@ -138,7 +136,7 @@
 {/await}
 
 {#await import("$lib/components/blocks/dashboard/create-dashboard-dialog.svelte") then { default: CreateDashboardDialog }}
-  <CreateDashboardDialog />
+  <CreateDashboardDialog dashboardNames={[]} />
 {/await}
 
 <Command tables={$tables} />
diff --git a/apps/frontend/src/routes/(authed)/(space)/dashboards/[dashboardId]/+page.svelte b/apps/frontend/src/routes/(authed)/(space)/dashboards/[dashboardId]/+page.svelte
index 2994d883f..a1dd4c900 100644
--- a/apps/frontend/src/routes/(authed)/(space)/dashboards/[dashboardId]/+page.svelte
+++ b/apps/frontend/src/routes/(authed)/(space)/dashboards/[dashboardId]/+page.svelte
@@ -1,224 +1,5 @@
 <script lang="ts">
-  import DashboardWidgets from "$lib/components/blocks/dashboard/dashboard-widgets.svelte"
-  import AddDashboardWidgetButton from "$lib/components/blocks/widget/add-dashboard-widget-button.svelte"
-  import { getDashboard } from "$lib/store/dashboard.store"
-  import { derived } from "svelte/store"
-  import { GaugeIcon, EllipsisIcon, PencilIcon } from "lucide-svelte"
-  import * as DropdownMenu from "$lib/components/ui/dropdown-menu"
-  import { TrashIcon } from "lucide-svelte"
-  import * as AlertDialog from "$lib/components/ui/alert-dialog"
-  import Button from "$lib/components/ui/button/button.svelte"
-  import { trpc } from "$lib/trpc/client"
-  import { createMutation } from "@tanstack/svelte-query"
-  import { goto, invalidate, invalidateAll } from "$app/navigation"
-  import * as Dialog from "$lib/components/ui/dialog"
-  import * as Form from "$lib/components/ui/form"
-  import { Input } from "$lib/components/ui/input"
-  import { CopyIcon } from "lucide-svelte"
-  import { zodClient } from "sveltekit-superforms/adapters"
-  import { defaults, superForm } from "sveltekit-superforms"
-  import { updateDashboardDTO } from "@undb/dashboard"
-  import { Textarea } from "$lib/components/ui/textarea"
-  import { Loader2Icon } from "lucide-svelte"
-  import { toast } from "svelte-sonner"
-  import ShareButton from "$lib/components/blocks/share/share-button.svelte"
-  import { LL } from "@undb/i18n/client"
-
-  const dashboard = getDashboard()
-
-  const widgets = derived(dashboard, ($dashboard) => $dashboard?.widgets)
-
-  let deleteDialogOpen = false
-
-  const deleteDashboardMutation = createMutation({
-    mutationFn: trpc.dashboard.delete.mutate,
-    mutationKey: ["dashboard", "delete", $dashboard.id.value],
-    onSuccess: async () => {
-      await invalidateAll()
-      goto("/")
-    },
-    onError: (error) => {
-      toast.error(error.message)
-    },
-  })
-
-  const deleteDashboard = () => {
-    $deleteDashboardMutation.mutate({ id: $dashboard.id.value })
-  }
-
-  let updateDialogOpen = false
-
-  const updateDashboardForm = superForm(
-    defaults(
-      {
-        name: $dashboard.name.value,
-        description: $dashboard.description,
-      },
-      zodClient(updateDashboardDTO),
-    ),
-    {
-      validators: zodClient(updateDashboardDTO),
-      SPA: true,
-      dataType: "json",
-      onSubmit: (data) => {
-        validateForm({ update: true })
-      },
-      onUpdate: (data) => {
-        if (!data.form.valid) {
-          console.log(data.form.errors)
-          return
-        }
-
-        $updateDashboardMutation.mutate({
-          dashboardId: $dashboard.id.value,
-          name: data.form.data.name,
-          description: data.form.data.description,
-        })
-      },
-    },
-  )
-
-  const { form: formData, enhance, validateForm } = updateDashboardForm
-
-  const updateDashboardMutation = createMutation({
-    mutationFn: trpc.dashboard.update.mutate,
-    mutationKey: ["dashboard", "update", $dashboard.id.value],
-  })
-
-  let duplicateDialogOpen = false
-
-  const duplicateDashboardMutation = createMutation({
-    mutationFn: trpc.dashboard.duplicate.mutate,
-    mutationKey: ["dashboard", "duplicate", $dashboard.id.value],
-    onSuccess: async (data) => {
-      await invalidateAll()
-      await goto(`/dashboards/${data}`)
-    },
-  })
-
-  const duplicateDashboard = () => {
-    $duplicateDashboardMutation.mutate({ id: $dashboard.id.value })
-  }
+  import Dashboard from "$lib/components/blocks/dashboard/dashboard.svelte"
 </script>
 
-<div class="flex h-full flex-col">
-  <header class="flex items-center justify-between border-b px-4 py-2">
-    <h1 class="flex items-center text-sm font-medium text-gray-700">
-      <GaugeIcon class="mr-2 size-4" />
-      {$dashboard.name.value}
-
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger>
-            <EllipsisIcon class="text-muted-foreground ml-4 size-4" />
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content>
-            <DropdownMenu.Group>
-              <DropdownMenu.Item class="text-xs" on:click={() => (updateDialogOpen = true)}>
-                <PencilIcon class="mr-2 size-3" />
-                {$LL.dashboard.updateName()}
-              </DropdownMenu.Item>
-              <DropdownMenu.Item class="text-xs" on:click={() => (duplicateDialogOpen = true)}>
-                <CopyIcon class="mr-2 size-3" />
-                {$LL.dashboard.duplicateDashboard()}
-              </DropdownMenu.Item>
-              <DropdownMenu.Item
-                class="text-destructive text-xs hover:!bg-red-100 hover:!text-red-500"
-                on:click={() => (deleteDialogOpen = true)}
-              >
-                <TrashIcon class="mr-2 size-3" />
-                {$LL.dashboard.deleteDashboard()}
-              </DropdownMenu.Item>
-            </DropdownMenu.Group>
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-    </h1>
-    <div class="flex items-center gap-2">
-      <ShareButton
-        type="dashboard"
-        id={$dashboard.id.value}
-        onSuccess={async () => {
-          await invalidate(`undb:dashboard:${$dashboard.id.value}`)
-        }}
-      />
-
-      <AddDashboardWidgetButton variant="outline" size="sm" />
-    </div>
-  </header>
-  {#if $widgets?.value.length}
-    <main class="px-4 py-4">
-      <DashboardWidgets />
-    </main>
-  {:else}
-    <div class="flex flex-1 items-center justify-center">
-      <AddDashboardWidgetButton />
-    </div>
-  {/if}
-</div>
-
-<AlertDialog.Root bind:open={deleteDialogOpen}>
-  <AlertDialog.Content>
-    <AlertDialog.Header>
-      <AlertDialog.Title>{$LL.dashboard.confirmDeleteDashboard()}</AlertDialog.Title>
-      <AlertDialog.Description>
-        {$LL.dashboard.confirmDeleteDashboardDescription()}
-      </AlertDialog.Description>
-    </AlertDialog.Header>
-    <AlertDialog.Footer>
-      <AlertDialog.Cancel>{$LL.common.cancel()}</AlertDialog.Cancel>
-      <AlertDialog.Action asChild>
-        <Button variant="destructive" on:click={deleteDashboard}>
-          {#if $deleteDashboardMutation.isPending}
-            <Loader2Icon class="mr-2 size-4" />
-          {/if}
-          {$LL.common.delete()}
-        </Button>
-      </AlertDialog.Action>
-    </AlertDialog.Footer>
-  </AlertDialog.Content>
-</AlertDialog.Root>
-
-<AlertDialog.Root bind:open={duplicateDialogOpen}>
-  <AlertDialog.Content>
-    <AlertDialog.Header>
-      <AlertDialog.Title>{$LL.dashboard.duplicateDashboardConfirm()}</AlertDialog.Title>
-    </AlertDialog.Header>
-    <AlertDialog.Footer>
-      <AlertDialog.Cancel>{$LL.common.cancel()}</AlertDialog.Cancel>
-      <AlertDialog.Action asChild let:builder>
-        <Button on:click={duplicateDashboard} builders={[builder]}>
-          {$LL.common.duplicate()}
-        </Button>
-      </AlertDialog.Action>
-    </AlertDialog.Footer>
-  </AlertDialog.Content>
-</AlertDialog.Root>
-
-<Dialog.Root bind:open={updateDialogOpen}>
-  <Dialog.Content>
-    <Dialog.Header>
-      <Dialog.Title>{$LL.dashboard.updateDashboard()}</Dialog.Title>
-    </Dialog.Header>
-
-    <form method="POST" use:enhance>
-      <Form.Field form={updateDashboardForm} name="name">
-        <Form.Control let:attrs>
-          <Form.Label>{$LL.common.name()}</Form.Label>
-          <Input {...attrs} bind:value={$formData.name} />
-        </Form.Control>
-        <Form.Description />
-        <Form.FieldErrors />
-      </Form.Field>
-
-      <Form.Field form={updateDashboardForm} name="description">
-        <Form.Control let:attrs>
-          <Form.Label>{$LL.common.description()}</Form.Label>
-          <Textarea {...attrs} bind:value={$formData.description} />
-        </Form.Control>
-        <Form.Description />
-        <Form.FieldErrors />
-      </Form.Field>
-
-      <Form.Button>{$LL.common.update()}</Form.Button>
-    </form>
-  </Dialog.Content>
-</Dialog.Root>
+<Dashboard />
diff --git a/apps/frontend/src/routes/+layout.ts b/apps/frontend/src/routes/+layout.ts
index 5409197eb..fd16c7695 100644
--- a/apps/frontend/src/routes/+layout.ts
+++ b/apps/frontend/src/routes/+layout.ts
@@ -1,4 +1,10 @@
 import "reflect-metadata"
 
+import { trpc } from "$lib/trpc/client"
+import { TRPC_CLIENT } from "@undb/data-service"
+import { container } from "@undb/di"
+
+container.register(TRPC_CLIENT, { useValue: trpc })
+
 export const ssr = false
 export const prerender = true
diff --git a/apps/frontend/src/routes/playground/+layout.svelte b/apps/frontend/src/routes/playground/+layout.svelte
new file mode 100644
index 000000000..6ab851c60
--- /dev/null
+++ b/apps/frontend/src/routes/playground/+layout.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { setIsLocal } from "$lib/store/data-service.store"
+  import { setIsPlayground } from "$lib/store/playground.svelte"
+
+  setIsLocal(true)
+  setIsPlayground(true)
+</script>
+
+<slot />
diff --git a/apps/frontend/src/routes/playground/+layout.ts b/apps/frontend/src/routes/playground/+layout.ts
new file mode 100644
index 000000000..2554216be
--- /dev/null
+++ b/apps/frontend/src/routes/playground/+layout.ts
@@ -0,0 +1 @@
+export const prerender = "auto"
diff --git a/apps/frontend/src/routes/playground/+page.svelte b/apps/frontend/src/routes/playground/+page.svelte
new file mode 100644
index 000000000..b277836c0
--- /dev/null
+++ b/apps/frontend/src/routes/playground/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+  import Playground from "$lib/components/blocks/playground/playground.svelte"
+</script>
+
+<Playground />
diff --git a/apps/frontend/src/routes/playground/bases/[baseId]/+layout.svelte b/apps/frontend/src/routes/playground/bases/[baseId]/+layout.svelte
new file mode 100644
index 000000000..40af3de82
--- /dev/null
+++ b/apps/frontend/src/routes/playground/bases/[baseId]/+layout.svelte
@@ -0,0 +1,204 @@
+<script lang="ts">
+  import { onMount } from "svelte"
+  import * as Resizable from "$lib/components/ui/resizable"
+  import type { PageData } from "./$types"
+  import { goto } from "$app/navigation"
+  import { type PaneAPI } from "paneforge"
+  import { cn } from "$lib/utils"
+  import * as Collapsible from "$lib/components/ui/collapsible"
+  import {
+    ChevronRightIcon,
+    CopyPlusIcon,
+    DatabaseIcon,
+    EllipsisIcon,
+    GaugeIcon,
+    PencilIcon,
+    ViewIcon,
+  } from "lucide-svelte"
+  import { page } from "$app/stores"
+  import CreateViewButton from "$lib/components/blocks/view/create-view-button.svelte"
+  import { LL } from "@undb/i18n/client"
+  import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js"
+  import { DELETE_VIEW, DUPLICATE_VIEW, SET_DEFAULT_VIEW, toggleModal, UPDATE_VIEW } from "$lib/store/modal.store"
+
+  export let data: PageData
+
+  $: base = data.base
+  $: tables = data.tables
+  $: dashboards = data.dashboards
+
+  $: paramBaseId = $page.params.baseId
+  $: dashboardId = $page.params.dashboardId
+  $: tableId = $page.params.tableId
+  $: viewId = $page.params.viewId
+
+  let panelLeft: PaneAPI
+
+  onMount(() => {
+    if (tables.length) {
+      goto(`/playground/bases/${base.id}/t/${tables[0].id}`, { replaceState: true })
+      open[tables[0].id] = true
+    }
+  })
+
+  const SIZE = 20
+  const RIGHT_SIZE = 100 - SIZE
+
+  let open = {} as Record<string, boolean>
+</script>
+
+<main class="flex">
+  <Resizable.PaneGroup direction="horizontal">
+    <Resizable.Pane
+      bind:pane={panelLeft}
+      collapsible
+      class="bg-muted/40 hidden border-r md:block"
+      defaultSize={SIZE}
+      minSize={15}
+      maxSize={30}
+    >
+      <nav class="flex h-full flex-col">
+        <Collapsible.Root open={true}>
+          <Collapsible.Content class="space-y-1 pt-1">
+            {#each dashboards as dashboard}
+              {@const active = false}
+              <div
+                class={cn(
+                  "group flex h-8 cursor-pointer items-center justify-between gap-1 truncate rounded-md pl-8 pr-2 transition-all",
+                  active ? "bg-gray-800/90" : "hover:bg-gray-100",
+                )}
+              >
+                <a
+                  href={`/playground/bases/${base.id}/d/${dashboard.id}`}
+                  class={cn(
+                    "flex h-full flex-1 items-center overflow-hidden text-sm font-normal text-gray-600",
+                    active && "text-background font-medium",
+                  )}
+                >
+                  <GaugeIcon class="mr-2 h-4 w-4" />
+                  {dashboard.name}
+                </a>
+              </div>
+            {/each}
+            {#each tables as table}
+              {@const active = false}
+              <Collapsible.Root bind:open={open[table.id]}>
+                <div
+                  class={cn(
+                    "group flex h-8 cursor-pointer items-center justify-between gap-1 truncate rounded-md pl-8 pr-2 transition-all",
+                    active && !viewId ? "bg-gray-800/90" : "hover:bg-gray-100",
+                  )}
+                >
+                  <a
+                    href={`/playground/bases/${base.id}/t/${table.id}`}
+                    title={table.name}
+                    class={cn(
+                      "flex h-full flex-1 items-center overflow-hidden text-sm font-normal text-gray-600",
+                      active && !viewId && "text-background font-medium",
+                    )}
+                  >
+                    <DatabaseIcon class="mr-2 h-4 w-4" />
+                    <span class="truncate">
+                      {table.name}
+                    </span>
+                  </a>
+                  <div class="flex items-center gap-2 opacity-0 transition-all group-hover:opacity-100">
+                    <Collapsible.Trigger
+                      on:click={(e) => {
+                        e.preventDefault()
+                        e.stopPropagation()
+                        open[table.id] = !open[table.id]
+                      }}
+                      class={cn(
+                        "flex h-5 w-5 items-center justify-center rounded-md hover:bg-gray-200",
+                        active && !viewId && "hover:bg-primary",
+                      )}
+                    >
+                      <ChevronRightIcon
+                        class={cn(
+                          "text-muted-foreground h-4 w-4 transition-all",
+                          open[table.id] && "rotate-90",
+                          active && "text-background",
+                        )}
+                      />
+                    </Collapsible.Trigger>
+                  </div>
+                </div>
+                <Collapsible.Content>
+                  <CreateViewButton
+                    tableId={table.id}
+                    viewNames={table.views.map((v) => v.name)}
+                    variant="link"
+                    class="mt-0 h-8 p-0 pl-14 text-xs"
+                  >
+                    <span class="text-xs font-normal">+ {$LL.table.view.create()}</span>
+                  </CreateViewButton>
+
+                  {#each table.views.filter((view) => !view.isDefault) as view}
+                    {@const active = view.id === viewId}
+                    <div
+                      class={cn(
+                        "group flex h-8 items-center justify-between gap-1 rounded-sm pl-14 pr-2 transition-all",
+                        active ? "bg-gray-800/90" : "hover:bg-gray-100",
+                      )}
+                    >
+                      <a
+                        class={cn(
+                          "flex h-full flex-1 items-center text-xs font-normal",
+                          active && "text-background font-medium",
+                        )}
+                        href={`/playground/bases/${base.id}/t/${table.id}/${view.id}`}
+                      >
+                        <ViewIcon type={view.type} class="mr-2 h-4 w-4" />
+                        {view.name}
+                      </a>
+
+                      <div>
+                        {#if active}
+                          <DropdownMenu.Root>
+                            <DropdownMenu.Trigger
+                              class="flex items-center justify-center opacity-0 transition-all group-hover:opacity-100"
+                            >
+                              <EllipsisIcon class="text-muted-foreground h-4 w-4" />
+                            </DropdownMenu.Trigger>
+                            <DropdownMenu.Content>
+                              <DropdownMenu.Item class="text-xs" on:click={() => toggleModal(UPDATE_VIEW)}>
+                                <PencilIcon class="mr-2 h-3 w-3" />
+                                {$LL.table.view.updateName()}
+                              </DropdownMenu.Item>
+                              <DropdownMenu.Item class="text-xs" on:click={() => toggleModal(DUPLICATE_VIEW)}>
+                                <CopyPlusIcon class="mr-2 h-3 w-3" />
+                                {$LL.table.view.duplicateView()}
+                              </DropdownMenu.Item>
+                              {#if !view.isDefault}
+                                <DropdownMenu.Item class="text-xs" on:click={() => toggleModal(SET_DEFAULT_VIEW)}>
+                                  <PencilIcon class="mr-2 h-3 w-3" />
+                                  {$LL.table.view.setAsDefaultView()}
+                                </DropdownMenu.Item>
+                                <DropdownMenu.Item
+                                  class="text-xs text-red-500 hover:!bg-red-200 hover:!text-red-500"
+                                  on:click={() => toggleModal(DELETE_VIEW)}
+                                >
+                                  <CopyPlusIcon class="mr-2 h-3 w-3" />
+                                  {$LL.table.view.deleteView()}
+                                </DropdownMenu.Item>
+                              {/if}
+                            </DropdownMenu.Content>
+                          </DropdownMenu.Root>
+                        {/if}
+                      </div>
+                    </div>
+                  {/each}
+                </Collapsible.Content>
+              </Collapsible.Root>
+            {/each}
+          </Collapsible.Content>
+        </Collapsible.Root>
+      </nav>
+    </Resizable.Pane>
+    <Resizable.Handle />
+    <Resizable.Pane class="grid h-screen flex-1" defaultSize={RIGHT_SIZE}>
+      <slot />
+    </Resizable.Pane>
+  </Resizable.PaneGroup>
+</main>
diff --git a/apps/frontend/src/routes/playground/bases/[baseId]/+layout.ts b/apps/frontend/src/routes/playground/bases/[baseId]/+layout.ts
new file mode 100644
index 000000000..790ede38a
--- /dev/null
+++ b/apps/frontend/src/routes/playground/bases/[baseId]/+layout.ts
@@ -0,0 +1,28 @@
+import { getDataService } from "$lib/store/data-service.store"
+import { redirect } from "@sveltejs/kit"
+import { tryit } from "radash"
+import { LayoutLoad } from "./$types"
+
+export const load: LayoutLoad = async (event) => {
+  const baseId = event.params.baseId
+
+  const dataService = await getDataService(true, true)
+
+  const getBase = tryit(dataService.base.getBase)
+  const [err, base] = await getBase({ baseId })
+
+  if (!base || err) {
+    throw redirect(302, "/playground")
+  }
+
+  const [tables, dashboards] = await Promise.all([
+    dataService.table.getTables({ baseId }),
+    dataService.dashboard.getDashboards({ baseId }),
+  ])
+
+  return {
+    base,
+    tables,
+    dashboards,
+  }
+}
diff --git a/apps/frontend/src/routes/playground/bases/[baseId]/+page.svelte b/apps/frontend/src/routes/playground/bases/[baseId]/+page.svelte
new file mode 100644
index 000000000..4fa864ce7
--- /dev/null
+++ b/apps/frontend/src/routes/playground/bases/[baseId]/+page.svelte
@@ -0,0 +1 @@
+<slot />
diff --git a/apps/frontend/src/routes/playground/bases/[baseId]/d/[dashboardId]/+layout.svelte b/apps/frontend/src/routes/playground/bases/[baseId]/d/[dashboardId]/+layout.svelte
new file mode 100644
index 000000000..98ff2bc6d
--- /dev/null
+++ b/apps/frontend/src/routes/playground/bases/[baseId]/d/[dashboardId]/+layout.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { LayoutData } from "./$types"
+  import { DashboardFactory } from "@undb/dashboard"
+  import { setDashboard } from "$lib/store/dashboard.store"
+  import { writable } from "svelte/store"
+
+  export let data: LayoutData
+
+  $: dashboard = data.dashboard
+
+  $: if (dashboard) {
+    const dashboardDo = DashboardFactory.fromJSON(dashboard)
+    setDashboard(writable(dashboardDo))
+  }
+</script>
+
+<slot></slot>
\ No newline at end of file
diff --git a/apps/frontend/src/routes/playground/bases/[baseId]/d/[dashboardId]/+layout.ts b/apps/frontend/src/routes/playground/bases/[baseId]/d/[dashboardId]/+layout.ts
new file mode 100644
index 000000000..e86033638
--- /dev/null
+++ b/apps/frontend/src/routes/playground/bases/[baseId]/d/[dashboardId]/+layout.ts
@@ -0,0 +1,24 @@
+import { getDataService } from "$lib/store/data-service.store"
+import { redirect } from "@sveltejs/kit"
+import { tryit } from "radash"
+import { LayoutLoad } from "./$types"
+
+export const prerender = false
+
+export const load: LayoutLoad = async ({ params }) => {
+  const { dashboardId } = params
+
+  const dataService = await getDataService(true, true)
+  const getDashboardById = tryit(dataService.dashboard.getDashboardById)
+  const [err, dashboard ] = await getDashboardById({
+    id: dashboardId,
+  })
+
+	if (err || !dashboard) {
+		throw redirect(302, "/playground")
+	}
+
+  return {
+    dashboard,
+  }
+}
diff --git a/apps/frontend/src/routes/playground/bases/[baseId]/d/[dashboardId]/+page.svelte b/apps/frontend/src/routes/playground/bases/[baseId]/d/[dashboardId]/+page.svelte
new file mode 100644
index 000000000..a1dd4c900
--- /dev/null
+++ b/apps/frontend/src/routes/playground/bases/[baseId]/d/[dashboardId]/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+  import Dashboard from "$lib/components/blocks/dashboard/dashboard.svelte"
+</script>
+
+<Dashboard />
diff --git a/apps/frontend/src/routes/playground/bases/[baseId]/t/[tableId]/[[viewId]]/+layout.svelte b/apps/frontend/src/routes/playground/bases/[baseId]/t/[tableId]/[[viewId]]/+layout.svelte
new file mode 100644
index 000000000..4fa864ce7
--- /dev/null
+++ b/apps/frontend/src/routes/playground/bases/[baseId]/t/[tableId]/[[viewId]]/+layout.svelte
@@ -0,0 +1 @@
+<slot />
diff --git a/apps/frontend/src/routes/playground/bases/[baseId]/t/[tableId]/[[viewId]]/+layout.ts b/apps/frontend/src/routes/playground/bases/[baseId]/t/[tableId]/[[viewId]]/+layout.ts
new file mode 100644
index 000000000..914c31236
--- /dev/null
+++ b/apps/frontend/src/routes/playground/bases/[baseId]/t/[tableId]/[[viewId]]/+layout.ts
@@ -0,0 +1,23 @@
+import { getDataService } from "$lib/store/data-service.store"
+import { redirect } from "@sveltejs/kit"
+import { tryit } from "radash"
+import { LayoutLoad } from "./$types"
+
+export const load: LayoutLoad = async (event) => {
+  const tableId = event.params.tableId
+
+  event.depends(`undb:table:${tableId}`)
+
+  const dataService = await getDataService(true, true)
+
+  const getTable = tryit(dataService.table.getTable)
+  const [err, table] = await getTable({ tableId })
+
+  if (err || !table) {
+    throw redirect(302, `/playground`)
+  }
+
+  return {
+    table,
+  }
+}
diff --git a/apps/frontend/src/routes/playground/bases/[baseId]/t/[tableId]/[[viewId]]/+page.svelte b/apps/frontend/src/routes/playground/bases/[baseId]/t/[tableId]/[[viewId]]/+page.svelte
new file mode 100644
index 000000000..199bf5fb4
--- /dev/null
+++ b/apps/frontend/src/routes/playground/bases/[baseId]/t/[tableId]/[[viewId]]/+page.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { TableFactory, TableDo } from "@undb/table"
+  import type { PageData } from "./$types"
+  import { setTable } from "$lib/store/table.store"
+  import { writable, derived, type Writable } from "svelte/store"
+  import { r } from "$lib/store/records.store"
+  import View from "$lib/components/blocks/view/view.svelte"
+  import { page } from "$app/stores"
+
+  export let data: PageData
+
+  $: table = data.table
+  $: tableDo = table ? new TableFactory().fromJSON(table) : undefined
+  let tableStore: Writable<TableDo | null> = writable(null)
+  $: if (tableDo) {
+    tableStore.set(tableDo)
+    setTable(tableStore as Writable<TableDo>)
+  }
+
+  const viewId = derived(
+    [page, tableStore],
+    ([$page, $table]) => $page.params.viewId ?? $table?.views.getDefaultView().id.value,
+  )
+</script>
+
+<main class="h-screen w-full">
+  <View {viewId} {r} shareId={undefined} readonly={false} />
+</main>
diff --git a/bun.lockb b/bun.lockb
index 33251d5bf..81acb23ee 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 6b00631c7..952814173 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,10 @@
     "migrate:db": "drizzle-kit push --config drizzle.config.ts",
     "move-assets": "bun run ./scripts/move-assets.ts",
     "migrate:deploy": "bun run ./scripts/migrate.ts",
-    "prepare": "husky || echo 1"
+    "prepare": "husky || echo 1",
+    "clean:root": "bunx rimraf node_modules",
+    "clean:turbo": "turbo clean",
+    "clean": "run-p clean:*"
   },
   "devDependencies": {
     "drizzle-kit": "^0.28.1",
diff --git a/packages/command-handlers/src/handlers/create-base.command-handler.ts b/packages/command-handlers/src/handlers/create-base.command-handler.ts
index 1ac63e96a..32f55b4f5 100644
--- a/packages/command-handlers/src/handlers/create-base.command-handler.ts
+++ b/packages/command-handlers/src/handlers/create-base.command-handler.ts
@@ -7,7 +7,7 @@ import {
   WithBaseSpaceId,
   type IBaseRepository,
 } from "@undb/base"
-import { CreateBaseCommand } from "@undb/commands"
+import { CreateBaseCommand, type ICreateBaseCommandOutput } from "@undb/commands"
 import { injectContext, type IContext } from "@undb/context"
 import { commandHandler } from "@undb/cqrs"
 import { singleton } from "@undb/di"
@@ -16,7 +16,7 @@ import { createLogger } from "@undb/logger"
 
 @commandHandler(CreateBaseCommand)
 @singleton()
-export class CreateBaseCommandHandler implements ICommandHandler<CreateBaseCommand, any> {
+export class CreateBaseCommandHandler implements ICommandHandler<CreateBaseCommand, ICreateBaseCommandOutput> {
   private readonly logger = createLogger(CreateBaseCommandHandler.name)
 
   constructor(
@@ -26,7 +26,7 @@ export class CreateBaseCommandHandler implements ICommandHandler<CreateBaseComma
     private readonly context: IContext,
   ) {}
 
-  async execute(command: CreateBaseCommand): Promise<any> {
+  async execute(command: CreateBaseCommand): Promise<ICreateBaseCommandOutput> {
     this.logger.debug(command)
 
     const spaceId = this.context.mustGetCurrentSpaceId()
@@ -35,6 +35,7 @@ export class CreateBaseCommandHandler implements ICommandHandler<CreateBaseComma
 
     applyRules(new BaseNameShouldBeUnique(!!exists))
 
+    command.spaceId = spaceId
     const base = BaseFactory.create(command)
 
     await this.repository.insert(base)
diff --git a/packages/command-handlers/src/index.ts b/packages/command-handlers/src/index.ts
index 98df82121..b32a68971 100644
--- a/packages/command-handlers/src/index.ts
+++ b/packages/command-handlers/src/index.ts
@@ -1,4 +1,18 @@
 export * from "./registry"
 
+export * from "./handlers/bulk-delete-records.command-handler"
+export * from "./handlers/bulk-duplicate-records.command-handler"
+export * from "./handlers/bulk-update-records.command-handler"
+export * from "./handlers/create-base.command-handler"
 export * from "./handlers/create-from-template.command-handler"
+export * from "./handlers/create-record.command-handler"
+export * from "./handlers/create-table-field.command-handler"
 export * from "./handlers/delete-base.command-handler"
+export * from "./handlers/delete-table-field.command-handler"
+export * from "./handlers/duplicate-table-field.command-handler"
+export * from "./handlers/set-view-color.command-handler"
+export * from "./handlers/set-view-fields.command-handler"
+export * from "./handlers/set-view-filter.command-handler"
+export * from "./handlers/set-view-sort.command-handler"
+export * from "./handlers/update-record.command-handler"
+export * from "./handlers/update-table-field.command-handler"
diff --git a/packages/commands/src/create-base.command.ts b/packages/commands/src/create-base.command.ts
index 5dc77541c..7b7c187f1 100644
--- a/packages/commands/src/create-base.command.ts
+++ b/packages/commands/src/create-base.command.ts
@@ -1,5 +1,5 @@
-import { createBaseDTO } from "@undb/base"
-import { Command, type CommandProps } from "@undb/domain"
+import { baseIdSchema,createBaseDTO } from "@undb/base"
+import { Command,type CommandProps } from "@undb/domain"
 import { z } from "@undb/zod"
 import { createTableCommand } from "./create-table.command"
 
@@ -15,9 +15,12 @@ export const createBaseCommand = createBaseDTO
 
 export type ICreateBaseCommand = z.infer<typeof createBaseCommand>
 
+export const createBaseCommandOutput = baseIdSchema
+export type ICreateBaseCommandOutput = z.infer<typeof createBaseCommandOutput>
+
 export class CreateBaseCommand extends Command implements ICreateBaseCommand {
   public readonly name: string
-  public readonly spaceId: string
+  public spaceId: string
 
   constructor(props: CommandProps<ICreateBaseCommand>) {
     super(props)
diff --git a/packages/dashboard/src/dashboard.factory.ts b/packages/dashboard/src/dashboard.factory.ts
index 8ac912108..295bf3f6a 100644
--- a/packages/dashboard/src/dashboard.factory.ts
+++ b/packages/dashboard/src/dashboard.factory.ts
@@ -34,7 +34,6 @@ export class DashboardFactory {
   }
 
   static create(input: ICreateDashboardDTO): Dashboard {
-    console.log(input)
     const dashboard = this.new(
       new WithDashboardId(DashboardId.fromOrCreate(input.id)),
       WithDashboardName.fromString(input.name),
diff --git a/packages/dashboard/src/value-objects/dashboard-layout.vo.ts b/packages/dashboard/src/value-objects/dashboard-layout.vo.ts
index 0f725224c..f98b9d8ca 100644
--- a/packages/dashboard/src/value-objects/dashboard-layout.vo.ts
+++ b/packages/dashboard/src/value-objects/dashboard-layout.vo.ts
@@ -117,9 +117,7 @@ export class DashboardLayouts extends ValueObject<IDashboardLayouts> {
         position = { x: 0, y: 0 }
       } else {
         const prev = items.slice(0, i)
-        console.log({ newItem }, prev)
         const foundPosition = gridHelp.findSpace(newItem, prev, COLS)
-        console.log({ foundPosition })
         position = {
           x: foundPosition.x,
           y: foundPosition.y,
diff --git a/packages/data-service/src/data-service.impl.ts b/packages/data-service/src/data-service.impl.ts
index 21278b425..df916dfb0 100644
--- a/packages/data-service/src/data-service.impl.ts
+++ b/packages/data-service/src/data-service.impl.ts
@@ -1,50 +1,109 @@
 import {
+  BulkDeleteRecordsCommand,
+  BulkDuplicateRecordsCommand,
+  BulkUpdateRecordsCommand,
+  CreateBaseCommand,
   CreateFromTemplateCommand,
+  CreateRecordCommand,
+  CreateTableFieldCommand,
   DeleteBaseCommand,
+  DeleteTableFieldCommand,
+  DuplicateTableFieldCommand,
+  SetViewColorCommand,
+  SetViewFieldsCommand,
+  SetViewFilterCommand,
+  SetViewSortCommand,
+  UpdateRecordCommand,
+  UpdateTableFieldCommand,
+  type IBulkDeleteRecordsCommand,
+  type IBulkDuplicateRecordsCommand,
+  type IBulkUpdateRecordsCommand,
+  type IBulkUpdateRecordsCommandOutput,
+  type ICreateBaseCommand,
+  type ICreateBaseCommandOutput,
+  type ICreateFieldCommand,
   type ICreateFromTemplateCommand,
+  type ICreateFromTemplateCommandOutput,
+  type ICreateRecordCommand,
+  type ICreateRecordCommandOutput,
   type IDeleteBaseCommand,
+  type IDeleteFieldCommand,
+  type IDuplicateFieldCommand,
+  type ISetViewColorCommand,
+  type ISetViewFieldsCommand,
+  type ISetViewFilterCommand,
+  type ISetViewSortCommand,
+  type IUpdateFieldCommand,
+  type IUpdateRecordCommand,
 } from "@undb/commands"
 import { CommandBus, QueryBus } from "@undb/cqrs"
 import { container, inject, injectable } from "@undb/di"
 import type { ICommandBus, IQueryBus } from "@undb/domain"
 import {
   GetAggregatesQuery,
+  GetBaseQuery,
+  GetDashboardByIdQuery,
+  GetDashboardsQuery,
   GetRecordByIdQuery,
   GetRecordsQuery,
   GetTableQuery,
+  GetTablesQuery,
   type IGetAggregatesOutput,
   type IGetAggregatesQuery,
+  type IGetBaseOutput,
+  type IGetBaseQuery,
+  type IGetDashboardByIdOutput,
+  type IGetDashboardByIdQuery,
+  type IGetDashboardsOutput,
+  type IGetDashboardsQuery,
   type IGetRecordByIdOutput,
   type IGetRecordByIdQuery,
   type IGetRecordsOutput,
   type IGetRecordsQuery,
   type IGetTableOutput,
   type IGetTableQuery,
+  type IGetTablesOutput,
+  type IGetTablesQuery,
 } from "@undb/queries"
 import type { ITemplateService, TemplateDTO } from "@undb/template"
 import { TemplateService as TemplateServiceImpl } from "@undb/template"
-import { injectIsLocal, injectTrpcClient, IS_LOCAL, type TrpcProxyClient } from "./data-service.provider"
+import {
+  injectIsLocal,
+  injectIsPlayground,
+  injectTrpcClient,
+  IS_LOCAL,
+  IS_PLAYGROUND,
+  type TrpcProxyClient,
+} from "./data-service.provider"
 
 @injectable()
 class TemplateService {
   constructor(
     @injectIsLocal()
     private readonly isLocal: boolean,
+    @injectIsPlayground()
+    private readonly isPlayground: boolean,
     @inject(CommandBus)
     private readonly commandBus: ICommandBus,
     @inject(TemplateServiceImpl)
     private readonly templateService: ITemplateService,
+    @injectTrpcClient()
+    private readonly trpc: TrpcProxyClient,
   ) {}
 
-  async save(template: TemplateDTO, includeData: boolean = false): Promise<void> {
+  save = async (template: TemplateDTO, includeData: boolean = false): Promise<void> => {
     if (!this.isLocal) {
       throw new Error("Template service save is only supported in local mode")
     }
     await this.templateService.save(template, includeData)
   }
 
-  async createBaseFromTemplate(command: ICreateFromTemplateCommand): Promise<void> {
-    await this.commandBus.execute(new CreateFromTemplateCommand(command))
+  createFromTemplate = async (command: ICreateFromTemplateCommand): Promise<ICreateFromTemplateCommandOutput> => {
+    if (this.isLocal && this.isPlayground) {
+      return this.commandBus.execute(new CreateFromTemplateCommand(command))
+    }
+
+    return this.trpc.template.createFromTemplate.mutate(command)
   }
 }
 
@@ -55,11 +114,27 @@ class BaseService {
     private readonly trpc: TrpcProxyClient,
     @injectIsLocal()
     private readonly isLocal: boolean,
+    @inject(QueryBus)
+    private readonly queryBus: IQueryBus,
     @inject(CommandBus)
     private readonly commandBus: ICommandBus,
   ) {}
 
-  async deleteBase(command: IDeleteBaseCommand): Promise<void> {
+  getBase = async (query: IGetBaseQuery): Promise<IGetBaseOutput> => {
+    if (this.isLocal) {
+      return await this.queryBus.execute(new GetBaseQuery(query))
+    }
+    return (await this.trpc.base.get.query(query)) as IGetBaseOutput
+  }
+
+  createBase = async (command: ICreateBaseCommand): Promise<ICreateBaseCommandOutput> => {
+    if (this.isLocal) {
+      return this.commandBus.execute(new CreateBaseCommand(command))
+    }
+    return this.trpc.base.create.mutate(command)
+  }
+
+  deleteBase = async (command: IDeleteBaseCommand): Promise<void> => {
     if (this.isLocal) {
       return this.commandBus.execute(new DeleteBaseCommand(command))
     }
@@ -67,9 +142,93 @@ class BaseService {
   }
 }
 
+@injectable()
+class ViewService {
+  constructor(
+    @injectTrpcClient()
+    private readonly trpc: TrpcProxyClient,
+    @injectIsLocal()
+    private readonly isLocal: boolean,
+    @inject(CommandBus)
+    private readonly commandBus: ICommandBus,
+  ) {}
+
+  setFilter = async (command: ISetViewFilterCommand): Promise<void> => {
+    if (this.isLocal) {
+      return this.commandBus.execute(new SetViewFilterCommand(command))
+    }
+    await this.trpc.table.view.setFilter.mutate(command)
+  }
+
+  setColor = async (command: ISetViewColorCommand): Promise<void> => {
+    if (this.isLocal) {
+      return this.commandBus.execute(new SetViewColorCommand(command))
+    }
+    await this.trpc.table.view.setColor.mutate(command)
+  }
+
+  setSort = async (command: ISetViewSortCommand): Promise<void> => {
+    if (this.isLocal) {
+      return this.commandBus.execute(new SetViewSortCommand(command))
+    }
+    await this.trpc.table.view.setSort.mutate(command)
+  }
+
+  setFields = async (command: ISetViewFieldsCommand): Promise<void> => {
+    if (this.isLocal) {
+      return this.commandBus.execute(new SetViewFieldsCommand(command))
+    }
+    await this.trpc.table.view.setFields.mutate(command)
+  }
+}
+
+@injectable()
+class FieldService {
+  constructor(
+    @injectTrpcClient()
+    private readonly trpc: TrpcProxyClient,
+    @injectIsLocal()
+    private readonly isLocal: boolean,
+    @inject(CommandBus)
+    private readonly commandBus: ICommandBus,
+  ) {}
+
+  createField = async (command: ICreateFieldCommand): Promise<void> => {
+    if (this.isLocal) {
+      return this.commandBus.execute(new CreateTableFieldCommand(command))
+    }
+    await this.trpc.table.field.create.mutate(command)
+  }
+
+  updateField = async (command: IUpdateFieldCommand): Promise<void> => {
+    if (this.isLocal) {
+      return this.commandBus.execute(new UpdateTableFieldCommand(command))
+    }
+    await this.trpc.table.field.update.mutate(command)
+  }
+
+  duplicateField = async (command: IDuplicateFieldCommand): Promise<void> => {
+    if (this.isLocal) {
+      return this.commandBus.execute(new DuplicateTableFieldCommand(command))
+    }
+    await this.trpc.table.field.duplicate.mutate(command)
+  }
+
+  deleteField = async (command: IDeleteFieldCommand): Promise<void> => {
+    if (this.isLocal) {
+      return this.commandBus.execute(new DeleteTableFieldCommand(command))
+    }
+    await this.trpc.table.field.delete.mutate(command)
+  }
+}
+
 @injectable()
 class TableService {
   constructor(
+    @inject(ViewService)
+    public readonly view: ViewService,
+    @inject(FieldService)
+    public readonly field: FieldService,
     @injectTrpcClient()
     private readonly trpc: TrpcProxyClient,
     @injectIsLocal()
@@ -78,12 +237,45 @@ class TableService {
     private readonly queryBus: IQueryBus,
   ) {}
 
-  async getTable(query: IGetTableQuery): Promise<IGetTableOutput> {
+  getTable = async (query: IGetTableQuery): Promise<IGetTableOutput> => {
     if (this.isLocal) {
       return await this.queryBus.execute(new GetTableQuery(query))
     }
     return (await this.trpc.table.get.query(query)) as IGetTableOutput
   }
+
+  getTables = async (query: IGetTablesQuery): Promise<IGetTablesOutput> => {
+    if (this.isLocal) {
+      return await this.queryBus.execute(new GetTablesQuery(query))
+    }
+    return (await this.trpc.table.list.query(query)) as IGetTablesOutput
+  }
+}
+
+@injectable()
+class DashboardService {
+  constructor(
+    @injectTrpcClient()
+    private readonly trpc: TrpcProxyClient,
+    @injectIsLocal()
+    private readonly isLocal: boolean,
+    @inject(QueryBus)
+    private readonly queryBus: IQueryBus,
+  ) {}
+
+  getDashboardById = async (query: IGetDashboardByIdQuery): Promise<IGetDashboardByIdOutput> => {
+    if (this.isLocal) {
+      return await this.queryBus.execute(new GetDashboardByIdQuery(query))
+    }
+    return (await this.trpc.dashboard.get.query(query)) as IGetDashboardByIdOutput
+  }
+
+  getDashboards = async (query: IGetDashboardsQuery): Promise<IGetDashboardsOutput> => {
+    if (this.isLocal) {
+      return await this.queryBus.execute(new GetDashboardsQuery(query))
+    }
+    return (await this.trpc.dashboard.list.query(query)) as IGetDashboardsOutput
+  }
 }
 
 @injectable()
@@ -95,28 +287,65 @@ class RecordsService {
     private readonly isLocal: boolean,
     @inject(QueryBus)
     private readonly queryBus: IQueryBus,
+    @inject(CommandBus)
+    private readonly commandBus: ICommandBus,
   ) {}
 
-  async getRecords(query: IGetRecordsQuery): Promise<IGetRecordsOutput> {
+  getRecords = async (query: IGetRecordsQuery): Promise<IGetRecordsOutput> => {
     if (this.isLocal) {
       return await this.queryBus.execute(new GetRecordsQuery(query))
     }
     return (await this.trpc.record.list.query(query)) as IGetRecordsOutput
   }
 
-  async getRecordById(query: IGetRecordByIdQuery): Promise<IGetRecordByIdOutput> {
+  getRecordById = async (query: IGetRecordByIdQuery): Promise<IGetRecordByIdOutput> => {
     if (this.isLocal) {
       return await this.queryBus.execute(new GetRecordByIdQuery(query))
     }
     return (await this.trpc.record.get.query(query)) as IGetRecordByIdOutput
   }
 
-  async getAggregates(query: IGetAggregatesQuery): Promise<IGetAggregatesOutput> {
+  getAggregates = async (query: IGetAggregatesQuery): Promise<IGetAggregatesOutput> => {
     if (this.isLocal) {
       return await this.queryBus.execute(new GetAggregatesQuery(query))
     }
     return (await this.trpc.record.aggregate.query(query)) as IGetAggregatesOutput
   }
+
+  createRecord = async (command: ICreateRecordCommand): Promise<ICreateRecordCommandOutput> => {
+    if (this.isLocal) {
+      return this.commandBus.execute(new CreateRecordCommand(command))
+    }
+    return this.trpc.record.create.mutate(command)
+  }
+
+  updateRecord = async (command: IUpdateRecordCommand): Promise<void> => {
+    if (this.isLocal) {
+      return this.commandBus.execute(new UpdateRecordCommand(command))
+    }
+    await this.trpc.record.update.mutate(command)
+  }
+
+  duplicateRecords = async (command: IBulkDuplicateRecordsCommand): Promise<void> => {
+    if (this.isLocal) {
+      return this.commandBus.execute(new BulkDuplicateRecordsCommand(command))
+    }
+    await this.trpc.record.bulkDuplicate.mutate(command)
+  }
+
+  deleteRecords = async (command: IBulkDeleteRecordsCommand): Promise<void> => {
+    if (this.isLocal) {
+      return this.commandBus.execute(new BulkDeleteRecordsCommand(command))
+    }
+    await this.trpc.record.bulkDelete.mutate(command)
+  }
+
+  updateRecords = async (command: IBulkUpdateRecordsCommand): Promise<IBulkUpdateRecordsCommandOutput> => {
+    if (this.isLocal) {
+      return this.commandBus.execute(new BulkUpdateRecordsCommand(command))
+    }
+    return this.trpc.record.bulkUpdate.mutate(command)
+  }
 }
 
 @injectable()
@@ -130,10 +359,13 @@ export class DataService {
     public readonly base: BaseService,
     @inject(TableService)
     public readonly table: TableService,
+    @inject(DashboardService)
+    public readonly dashboard: DashboardService,
   ) {}
 }
 
-export const getDataService = (isLocal: boolean) => {
+export const getDataService = (isLocal: boolean, isPlayground: boolean) => {
   container.register(IS_LOCAL, { useValue: isLocal })
+  container.register(IS_PLAYGROUND, { useValue: isPlayground })
   return container.resolve<DataService>(DataService)
 }
diff --git a/packages/data-service/src/data-service.provider.ts b/packages/data-service/src/data-service.provider.ts
index d0758c73a..7f8f68f31 100644
--- a/packages/data-service/src/data-service.provider.ts
+++ b/packages/data-service/src/data-service.provider.ts
@@ -10,3 +10,7 @@ export const TRPC_CLIENT = Symbol.for("TRPC_CLIENT")
 export const injectTrpcClient = () => inject(TRPC_CLIENT)
 
 export type TrpcProxyClient = CreateTRPCProxyClient<AppRouter>
+
+export const IS_PLAYGROUND = Symbol.for("IS_PLAYGROUND")
+
+export const injectIsPlayground = () => inject(IS_PLAYGROUND)
diff --git a/packages/data-service/src/data-service.registery.ts b/packages/data-service/src/data-service.registery.ts
index 548bbd54e..7d57fedac 100644
--- a/packages/data-service/src/data-service.registery.ts
+++ b/packages/data-service/src/data-service.registery.ts
@@ -5,16 +5,24 @@ import {
   SPACE_MEMBER_SERVICE,
   SpaceMemberService,
 } from "@undb/authz"
-import { BASE_OUTBOX_SERVICE, BASE_REPOSITORY } from "@undb/base"
+import { BASE_OUTBOX_SERVICE,BASE_QUERY_REPOSITORY,BASE_REPOSITORY } from "@undb/base"
 import { CONTEXT_TOKEN } from "@undb/context"
-import { DASHBOARD_OUTBOX_SERVICE, DASHBOARD_REPOSITORY } from "@undb/dashboard"
+import {
+  DASHBOARD_OUTBOX_SERVICE,
+  DASHBOARD_QUERY_REPOSITORY,
+  DASHBOARD_QUERY_SERVICE,
+  DASHBOARD_REPOSITORY,
+  DashboardQueryService,
+} from "@undb/dashboard"
 import { container } from "@undb/di"
-import { MAIL_SERVICE, type IMailService, type ISendInput } from "@undb/mail"
+import { MAIL_SERVICE,type IMailService,type ISendInput } from "@undb/mail"
 import {
   BaseOutboxService,
+  BaseQueryRepository,
   BaseRepository,
   createSqljsQueryBuilder,
   DashboardOutboxService,
+  DashboardQueryRepository,
   DashboardRepository,
   InvitationQueryRepository,
   InvitationRepository,
@@ -31,7 +39,7 @@ import {
   TemplateQueryRepository,
   TX_CTX,
 } from "@undb/persistence/client"
-import { SPACE_QUERY_REPOSITORY, SPACE_REPOSITORY, SPACE_SERVICE, SpaceService } from "@undb/space"
+import { SPACE_QUERY_REPOSITORY,SPACE_REPOSITORY,SPACE_SERVICE,SpaceService } from "@undb/space"
 import {
   OBJECT_STORAGE,
   RECORD_OUTBOX_SERVICE,
@@ -49,7 +57,7 @@ import {
   type IPutObject,
 } from "@undb/table"
 import { TEMPLATE_QUERY_REPOSITORY } from "@undb/template"
-import { DataServiceContext, DataServicetTxContext } from "./data-service.context"
+import { DataServiceContext,DataServicetTxContext } from "./data-service.context"
 
 class MailService implements IMailService {
   async send(input: ISendInput): Promise<void> {}
@@ -100,4 +108,7 @@ export const registerDataService = () => {
   container.register(RECORD_QUERY_REPOSITORY, RecordQueryRepository)
   container.register(OBJECT_STORAGE, LocalObjectStorage)
   container.register(TABLE_QUERY_REPOSITORY, TableQueryRepository)
+  container.register(BASE_QUERY_REPOSITORY, BaseQueryRepository)
+  container.register(DASHBOARD_QUERY_SERVICE, DashboardQueryService)
+  container.register(DASHBOARD_QUERY_REPOSITORY, DashboardQueryRepository)
 }
diff --git a/packages/event-handlers/package.json b/packages/event-handlers/package.json
index 0864f8592..83e74ca0b 100644
--- a/packages/event-handlers/package.json
+++ b/packages/event-handlers/package.json
@@ -13,6 +13,7 @@
     "@undb/base": "workspace:*",
     "@undb/commands": "workspace:*",
     "@undb/context": "workspace:*",
+    "@undb/table": "workspace:*",
     "@undb/cqrs": "workspace:*",
     "@undb/dashboard": "workspace:*",
     "@undb/di": "workspace:*",
diff --git a/packages/event-handlers/src/handlers/dashboard-on-field-deleted.event-handler.ts b/packages/event-handlers/src/handlers/dashboard-on-field-deleted.event-handler.ts
index b9263a736..d0274a81d 100644
--- a/packages/event-handlers/src/handlers/dashboard-on-field-deleted.event-handler.ts
+++ b/packages/event-handlers/src/handlers/dashboard-on-field-deleted.event-handler.ts
@@ -3,7 +3,7 @@ import { DashboardTableIdSpecification, injectDashboardRepository, type IDashboa
 import { singleton } from "@undb/di"
 import type { IEventHandler } from "@undb/domain"
 import { createLogger } from "@undb/logger"
-import { FieldDeletedEvent } from "../../../table/src"
+import { FieldDeletedEvent } from "@undb/table"
 
 @eventHandler(FieldDeletedEvent)
 @singleton()
diff --git a/packages/i18n/src/i18n/en/index.ts b/packages/i18n/src/i18n/en/index.ts
index 497c6e09b..3fcc3a677 100644
--- a/packages/i18n/src/i18n/en/index.ts
+++ b/packages/i18n/src/i18n/en/index.ts
@@ -511,6 +511,7 @@ const webhook = {
   const base = {
     name: 'Base Name',
     createBase: 'Create New Base',
+    created: 'Base created successfully',
     importFromTemplate: 'Import From Template',
     displayName: 'Base Display Name',
     noBases: 'No Bases',
diff --git a/packages/i18n/src/i18n/es/index.ts b/packages/i18n/src/i18n/es/index.ts
index 1eef358d6..a59d17ccc 100644
--- a/packages/i18n/src/i18n/es/index.ts
+++ b/packages/i18n/src/i18n/es/index.ts
@@ -498,6 +498,7 @@ const dashboard = {
 const base = {
   name: 'Nombre de Base',
   noBases: 'No hay bases',
+  created: 'Base creada correctamente',
   displayName: 'Nombre de visualización de Base',
   importFromTemplate: 'Importar desde plantilla',
   createBase: 'Crear Base',
diff --git a/packages/i18n/src/i18n/i18n-types.ts b/packages/i18n/src/i18n/i18n-types.ts
index b394349ba..510b7f2cc 100644
--- a/packages/i18n/src/i18n/i18n-types.ts
+++ b/packages/i18n/src/i18n/i18n-types.ts
@@ -194,6 +194,10 @@ type RootTranslation = {
 		 * C​r​e​a​t​e​ ​N​e​w​ ​B​a​s​e
 		 */
 		createBase: string
+		/**
+		 * B​a​s​e​ ​c​r​e​a​t​e​d​ ​s​u​c​c​e​s​s​f​u​l​l​y
+		 */
+		created: string
 		/**
 		 * I​m​p​o​r​t​ ​F​r​o​m​ ​T​e​m​p​l​a​t​e
 		 */
@@ -2636,6 +2640,10 @@ export type TranslationFunctions = {
 		 * Create New Base
 		 */
 		createBase: () => LocalizedString
+		/**
+		 * Base created successfully
+		 */
+		created: () => LocalizedString
 		/**
 		 * Import From Template
 		 */
diff --git a/packages/i18n/src/i18n/ja/index.ts b/packages/i18n/src/i18n/ja/index.ts
index 8ead27b2e..e7b713ef6 100644
--- a/packages/i18n/src/i18n/ja/index.ts
+++ b/packages/i18n/src/i18n/ja/index.ts
@@ -501,6 +501,7 @@ const dashboard = {
 const base = {
   name: 'Base 名',
   noBases: 'Base がありません',
+  created: 'Base が作成されました',
   displayName: 'Base 表示名',
   importFromTemplate: 'テンプレートからインポート',
   createBase: 'Base を作成',
diff --git a/packages/i18n/src/i18n/ko/index.ts b/packages/i18n/src/i18n/ko/index.ts
index b58e2e77e..0dedad8f1 100644
--- a/packages/i18n/src/i18n/ko/index.ts
+++ b/packages/i18n/src/i18n/ko/index.ts
@@ -500,6 +500,7 @@ const dashboard = {
 const base = {
   name: 'Base 이름',
   noBases: 'Base가 없습니다',
+  created: 'Base가 생성되었습니다',
   displayName: 'Base 표시 이름',
   importFromTemplate: '템플릿에서 가져오기',
   createBase: 'Base 생성',
diff --git a/packages/i18n/src/i18n/pt/index.ts b/packages/i18n/src/i18n/pt/index.ts
index 49859b393..eaab2f731 100644
--- a/packages/i18n/src/i18n/pt/index.ts
+++ b/packages/i18n/src/i18n/pt/index.ts
@@ -509,6 +509,7 @@ const dashboard = {
 const base = {
   name: 'Nome da Base',
   createBase: 'Criar Nova Base',
+  created: 'Base criada com sucesso',
   importFromTemplate: 'Importar do Modelo',
   displayName: 'Nome de Exibição da Base',
   noBases: 'Nenhuma Base',
diff --git a/packages/i18n/src/i18n/zh/index.ts b/packages/i18n/src/i18n/zh/index.ts
index dc62ee329..3d60fda00 100644
--- a/packages/i18n/src/i18n/zh/index.ts
+++ b/packages/i18n/src/i18n/zh/index.ts
@@ -500,6 +500,7 @@ const dashboard = {
 const base = {
   name: 'Base 名称',
   noBases: '没有 Base',
+  created: 'Base 已创建',
   displayName: 'Base 显示名称',
   importFromTemplate: '从模板导入',
   createBase: '创建 Base',
diff --git a/packages/persistence/src/member/space-member.repository.ts b/packages/persistence/src/member/space-member.repository.ts
index bda68f743..db8e2e12b 100644
--- a/packages/persistence/src/member/space-member.repository.ts
+++ b/packages/persistence/src/member/space-member.repository.ts
@@ -71,6 +71,7 @@ export class SpaceMemberRepository implements ISpaceMemberRepository {
         space_id: json.spaceId,
         user_id: json.userId,
       })
+      .onConflict((c) => c.doNothing())
       .execute()
   }
 }
diff --git a/packages/queries/src/get-base.query.ts b/packages/queries/src/get-base.query.ts
index 547413509..8363557a1 100644
--- a/packages/queries/src/get-base.query.ts
+++ b/packages/queries/src/get-base.query.ts
@@ -1,4 +1,4 @@
-import { baseIdSchema } from "@undb/base"
+import { baseDTO, baseIdSchema } from "@undb/base"
 import { Query, type QueryProps } from "@undb/domain"
 import { z } from "@undb/zod"
 
@@ -8,6 +8,10 @@ export const getBaseQuery = z.object({
 
 export type IGetBaseQuery = z.infer<typeof getBaseQuery>
 
+export const getBaseQueryOutput = baseDTO
+
+export type IGetBaseOutput = z.infer<typeof getBaseQueryOutput>
+
 export class GetBaseQuery extends Query implements IGetBaseQuery {
   public readonly baseId: string
 
diff --git a/packages/queries/src/get-dashboard-by-id.query.ts b/packages/queries/src/get-dashboard-by-id.query.ts
index 1e08315bd..23c55c99f 100644
--- a/packages/queries/src/get-dashboard-by-id.query.ts
+++ b/packages/queries/src/get-dashboard-by-id.query.ts
@@ -1,4 +1,4 @@
-import { dashboardIdSchema } from "@undb/dashboard"
+import { dashboardDTO, dashboardIdSchema } from "@undb/dashboard"
 import { Query, type QueryProps } from "@undb/domain"
 import { z } from "@undb/zod"
 
@@ -8,6 +8,10 @@ export const getDashboardByIdQuery = z.object({
 
 export type IGetDashboardByIdQuery = z.infer<typeof getDashboardByIdQuery>
 
+export const getDashboardByIdOutput = dashboardDTO
+
+export type IGetDashboardByIdOutput = z.infer<typeof getDashboardByIdOutput>
+
 export class GetDashboardByIdQuery extends Query implements IGetDashboardByIdQuery {
   public readonly id: string
 
diff --git a/packages/queries/src/get-dashboards.query.ts b/packages/queries/src/get-dashboards.query.ts
index 7a75bd935..f9dcc494d 100644
--- a/packages/queries/src/get-dashboards.query.ts
+++ b/packages/queries/src/get-dashboards.query.ts
@@ -1,4 +1,5 @@
 import { baseIdSchema } from "@undb/base"
+import { dashboardDTO } from "@undb/dashboard"
 import { Query, type QueryProps } from "@undb/domain"
 import { z } from "@undb/zod"
 
@@ -8,6 +9,10 @@ export const getDashboardsQuery = z.object({
 
 export type IGetDashboardsQuery = z.infer<typeof getDashboardsQuery>
 
+export const getDashboardsQueryOutput = dashboardDTO.array()
+
+export type IGetDashboardsOutput = z.infer<typeof getDashboardsQueryOutput>
+
 export class GetDashboardsQuery extends Query implements IGetDashboardsQuery {
   public readonly baseId?: string
 
diff --git a/packages/queries/src/get-tables.query.ts b/packages/queries/src/get-tables.query.ts
index 93d949a4d..f22bb66a1 100644
--- a/packages/queries/src/get-tables.query.ts
+++ b/packages/queries/src/get-tables.query.ts
@@ -1,5 +1,6 @@
 import { baseIdSchema } from "@undb/base"
 import { Query, type QueryProps } from "@undb/domain"
+import { tableDTO } from "@undb/table"
 import { z } from "@undb/zod"
 
 export const getTablesQuery = z.object({
@@ -8,6 +9,9 @@ export const getTablesQuery = z.object({
 
 export type IGetTablesQuery = z.infer<typeof getTablesQuery>
 
+export const getTablesQueryOutput = z.array(tableDTO)
+export type IGetTablesOutput = z.infer<typeof getTablesQueryOutput>
+
 export class GetTablesQuery extends Query implements IGetTablesQuery {
   public readonly baseId?: string
 
diff --git a/packages/query-handlers/src/handlers/get-base.query-handler.ts b/packages/query-handlers/src/handlers/get-base.query-handler.ts
index 803ddf68d..d35a0ed71 100644
--- a/packages/query-handlers/src/handlers/get-base.query-handler.ts
+++ b/packages/query-handlers/src/handlers/get-base.query-handler.ts
@@ -1,19 +1,19 @@
-import { injectBaseQueryRepository, type IBaseDTO, type IBaseQueryRepository } from "@undb/base"
+import { injectBaseQueryRepository, type IBaseQueryRepository } from "@undb/base"
 import { queryHandler } from "@undb/cqrs"
 import { singleton } from "@undb/di"
 import type { IQueryHandler } from "@undb/domain"
-import { GetBaseQuery, type IGetBaseQuery } from "@undb/queries"
+import { GetBaseQuery, type IGetBaseOutput, type IGetBaseQuery } from "@undb/queries"
 
 @queryHandler(GetBaseQuery)
 @singleton()
-export class GetBaseQueryHandler implements IQueryHandler<any, IBaseDTO> {
+export class GetBaseQueryHandler implements IQueryHandler<IGetBaseQuery, IGetBaseOutput> {
   constructor(
     @injectBaseQueryRepository()
     private readonly repo: IBaseQueryRepository,
   ) {}
 
-  async execute(query: IGetBaseQuery): Promise<IBaseDTO> {
+  async execute(query: IGetBaseQuery): Promise<IGetBaseOutput> {
     const base = await this.repo.findOneById(query.baseId)
-    return base.unwrap()
+    return base.expect("base not found with id: " + query.baseId)
   }
 }
diff --git a/packages/query-handlers/src/handlers/get-dashboard-by-id.query-handler.ts b/packages/query-handlers/src/handlers/get-dashboard-by-id.query-handler.ts
index d23edf6ef..2780551e6 100644
--- a/packages/query-handlers/src/handlers/get-dashboard-by-id.query-handler.ts
+++ b/packages/query-handlers/src/handlers/get-dashboard-by-id.query-handler.ts
@@ -1,18 +1,18 @@
 import { queryHandler } from "@undb/cqrs"
-import { injectDashboardQueryService, type IDashboardDTO, type IDashboardQueryService } from "@undb/dashboard"
+import { injectDashboardQueryService, type IDashboardQueryService } from "@undb/dashboard"
 import { singleton } from "@undb/di"
 import type { IQueryHandler } from "@undb/domain"
-import { GetDashboardByIdQuery } from "@undb/queries"
+import { GetDashboardByIdQuery, type IGetDashboardByIdOutput } from "@undb/queries"
 
 @queryHandler(GetDashboardByIdQuery)
 @singleton()
-export class GetDashboardByIdQueryHandler implements IQueryHandler<GetDashboardByIdQuery, IDashboardDTO> {
+export class GetDashboardByIdQueryHandler implements IQueryHandler<GetDashboardByIdQuery, IGetDashboardByIdOutput> {
   constructor(
     @injectDashboardQueryService()
     private readonly svc: IDashboardQueryService,
   ) {}
 
-  async execute(query: GetDashboardByIdQuery): Promise<IDashboardDTO> {
+  async execute(query: GetDashboardByIdQuery): Promise<IGetDashboardByIdOutput> {
     return (await this.svc.getDashboardById(query.id)).expect("dashboard not found")
   }
 }
diff --git a/packages/query-handlers/src/handlers/get-dashboards.query-handler.ts b/packages/query-handlers/src/handlers/get-dashboards.query-handler.ts
index 74be2694a..6f5eb190f 100644
--- a/packages/query-handlers/src/handlers/get-dashboards.query-handler.ts
+++ b/packages/query-handlers/src/handlers/get-dashboards.query-handler.ts
@@ -1,18 +1,18 @@
 import { queryHandler } from "@undb/cqrs"
-import { injectDashboardQueryService, type IDashboardDTO, type IDashboardQueryService } from "@undb/dashboard"
+import { injectDashboardQueryService, type IDashboardQueryService } from "@undb/dashboard"
 import { singleton } from "@undb/di"
 import type { IQueryHandler } from "@undb/domain"
-import { GetDashboardsQuery } from "@undb/queries"
+import { GetDashboardsQuery, type IGetDashboardsOutput } from "@undb/queries"
 
 @queryHandler(GetDashboardsQuery)
 @singleton()
-export class GetDashboardsQueryHandler implements IQueryHandler<GetDashboardsQuery, IDashboardDTO[]> {
+export class GetDashboardsQueryHandler implements IQueryHandler<GetDashboardsQuery, IGetDashboardsOutput> {
   constructor(
     @injectDashboardQueryService()
     private readonly svc: IDashboardQueryService,
   ) {}
 
-  async execute(query: GetDashboardsQuery): Promise<IDashboardDTO[]> {
+  async execute(query: GetDashboardsQuery): Promise<IGetDashboardsOutput> {
     return this.svc.getDashboards(query.baseId)
   }
 }
diff --git a/packages/query-handlers/src/handlers/get-tables.query-handler.ts b/packages/query-handlers/src/handlers/get-tables.query-handler.ts
index c21d19f39..8a58de28e 100644
--- a/packages/query-handlers/src/handlers/get-tables.query-handler.ts
+++ b/packages/query-handlers/src/handlers/get-tables.query-handler.ts
@@ -1,18 +1,18 @@
 import { queryHandler } from "@undb/cqrs"
 import { singleton } from "@undb/di"
 import type { IQueryHandler } from "@undb/domain"
-import { GetTablesQuery } from "@undb/queries"
-import { injectTableQueryService, type ITableDTO, type ITableQueryService } from "@undb/table"
+import { GetTablesQuery, type IGetTablesOutput } from "@undb/queries"
+import { injectTableQueryService, type ITableQueryService } from "@undb/table"
 
 @queryHandler(GetTablesQuery)
 @singleton()
-export class GetTablesQueryHandler implements IQueryHandler<GetTablesQuery, ITableDTO[]> {
+export class GetTablesQueryHandler implements IQueryHandler<GetTablesQuery, IGetTablesOutput> {
   constructor(
     @injectTableQueryService()
     private readonly svc: ITableQueryService,
   ) {}
 
-  async execute(query: GetTablesQuery): Promise<ITableDTO[]> {
+  async execute(query: GetTablesQuery): Promise<IGetTablesOutput> {
     return this.svc.getTables(query.baseId)
   }
 }
diff --git a/packages/query-handlers/src/index.ts b/packages/query-handlers/src/index.ts
index 7bfc6adfa..63e203bf5 100644
--- a/packages/query-handlers/src/index.ts
+++ b/packages/query-handlers/src/index.ts
@@ -2,6 +2,10 @@ export * from "./handlers"
 export { registerQueries } from "./registry"
 
 export * from "./handlers/get-aggregates.query-handler"
+export * from "./handlers/get-base.query-handler"
+export * from "./handlers/get-dashboard-by-id.query-handler"
+export * from "./handlers/get-dashboards.query-handler"
 export * from "./handlers/get-record-by-id.query-handler"
 export * from "./handlers/get-records.query-handler"
 export * from "./handlers/get-table.query-handler"
+export * from "./handlers/get-tables.query-handler"
diff --git a/packages/trpc/src/router.ts b/packages/trpc/src/router.ts
index d1524e1fa..a925061e2 100644
--- a/packages/trpc/src/router.ts
+++ b/packages/trpc/src/router.ts
@@ -71,6 +71,7 @@ import {
   bulkduplicateRecordsCommand,
   createApiTokenCommand,
   createBaseCommand,
+  createBaseCommandOutput,
   createDashboardCommand,
   createFromShareCommand,
   createFromTemplateCommand,
@@ -145,7 +146,9 @@ import {
   CountRecordsQuery,
   GetAggregatesQuery,
   GetApiTokensQuery,
+  GetBaseQuery,
   GetDashboardByIdQuery,
+  GetDashboardsQuery,
   GetMemberSpacesQuery,
   GetPivotDataQuery,
   GetRecordByIdQuery,
@@ -163,7 +166,10 @@ import {
   countRecordsQuery,
   getAggregatesQuery,
   getApiTokensQuery,
+  getBaseQuery,
+  getBaseQueryOutput,
   getDashboardByIdQuery,
+  getDashboardsQuery,
   getMemberSpacesOutput,
   getMemberSpacesQuery,
   getPivotDataQuery,
@@ -174,6 +180,8 @@ import {
   getShareRecordByIdQuery,
   getShareRecordsQuery,
   getTableQuery,
+  getTablesQuery,
+  getTablesQueryOutput,
   getTemplateOutput,
   getTemplateQuery,
   getTemplatesQuery,
@@ -312,8 +320,8 @@ const fieldRouter = t.router({
 const tableRouter = t.router({
   list: privateProcedure
     .use(authz("table:list"))
-    .input(z.void())
-    .output(tableDTO.array())
+    .input(getTablesQuery)
+    .output(getTablesQueryOutput)
     .query(() => queryBus.execute(new GetTablesQuery({}))),
   get: privateProcedure
     .use(authz("table:read"))
@@ -426,9 +434,15 @@ const webhookRouter = t.router({
 })
 
 const baseRouter = t.router({
+  get: privateProcedure
+    .use(authz("base:read"))
+    .input(getBaseQuery)
+    .output(getBaseQueryOutput)
+    .query(({ input }) => queryBus.execute(new GetBaseQuery(input))),
   create: privateProcedure
     .use(authz("base:create"))
     .input(createBaseCommand.omit({ spaceId: true }))
+    .output(createBaseCommandOutput)
     .mutation(({ input }) => {
       const spaceId = getCurrentSpaceId()
       if (!spaceId) {
@@ -564,6 +578,10 @@ const dashboardRouter = t.router({
     .use(authz("dashboard:read"))
     .input(getDashboardByIdQuery)
     .query(({ input }) => queryBus.execute(new GetDashboardByIdQuery(input))),
+  list: privateProcedure
+    .use(authz("dashboard:list"))
+    .input(getDashboardsQuery)
+    .query(({ input }) => queryBus.execute(new GetDashboardsQuery(input))),
   update: privateProcedure
     .use(authz("dashboard:update"))
     .input(updateDashboardCommand)
diff --git a/turbo.json b/turbo.json
index 8121cb3ea..f93e61a94 100644
--- a/turbo.json
+++ b/turbo.json
@@ -19,6 +19,9 @@
     "lint": {
       "dependsOn": ["^lint"]
     },
+    "clean": {
+      "dependsOn": ["^clean"]
+    },
     "dev": {
       "cache": false,
       "inputs": ["$TURBO_DEFAULT$", ".env"],