diff --git a/gui/app/(dashboard)/database/[dabataseId]/page.tsx b/gui/app/(dashboard)/database/[dabataseId]/page.tsx
new file mode 100644
index 0000000000..7a72089640
--- /dev/null
+++ b/gui/app/(dashboard)/database/[dabataseId]/page.tsx
@@ -0,0 +1,3 @@
+export default async function DatabasePage() {
+  return <div>DatabasePage id</div>;
+}
diff --git a/gui/app/(dashboard)/database/[dabataseId]/table/[tableId]/page.tsx b/gui/app/(dashboard)/database/[dabataseId]/table/[tableId]/page.tsx
new file mode 100644
index 0000000000..ffa195a421
--- /dev/null
+++ b/gui/app/(dashboard)/database/[dabataseId]/table/[tableId]/page.tsx
@@ -0,0 +1,3 @@
+export default async function DatabasePage() {
+  return <div>table id</div>;
+}
diff --git a/gui/app/(dashboard)/database/[dabataseId]/table/page.tsx b/gui/app/(dashboard)/database/[dabataseId]/table/page.tsx
new file mode 100644
index 0000000000..1572b0df51
--- /dev/null
+++ b/gui/app/(dashboard)/database/[dabataseId]/table/page.tsx
@@ -0,0 +1,3 @@
+export default async function TablePage() {
+  return <div>table</div>;
+}
diff --git a/gui/app/(dashboard)/database/context-menu.tsx b/gui/app/(dashboard)/database/context-menu.tsx
deleted file mode 100644
index 95c5b40c02..0000000000
--- a/gui/app/(dashboard)/database/context-menu.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client';
-
-import {
-  ContextMenuContent,
-  ContextMenuItem
-} from '@/components/ui/context-menu';
-import { useSeDialogState } from '@/lib/hooks';
-import { TableCreatingDialog } from './table-creating-dialog';
-import AddIcon from '/public/add.svg';
-
-export function InfinityContextMenuContent({
-  databaseName
-}: {
-  databaseName: string;
-}) {
-  const { showDialog, visible, hideDialog, switchVisible } = useSeDialogState();
-  return (
-    <>
-      <ContextMenuContent>
-        <ContextMenuItem>
-          <div className="flex justify-between w-full" onClick={showDialog}>
-            Add <AddIcon className="w-5 h-5"></AddIcon>
-          </div>
-        </ContextMenuItem>
-      </ContextMenuContent>
-      <TableCreatingDialog
-        visible={visible}
-        hideDialog={hideDialog}
-        switchVisible={switchVisible}
-      ></TableCreatingDialog>
-    </>
-  );
-}
diff --git a/gui/app/(dashboard)/database/layout.tsx b/gui/app/(dashboard)/database/layout.tsx
new file mode 100644
index 0000000000..f382f067cd
--- /dev/null
+++ b/gui/app/(dashboard)/database/layout.tsx
@@ -0,0 +1,87 @@
+import SideMenu, { MenuItem } from '@/components/ui/side-menu';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/table';
+import { listDatabase, listTable } from '../actions';
+import { InfinityContextMenuContent } from '../tables/context-menu';
+
+async function InfinityTable() {
+  const tables = await listTable('default_db');
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="text-center">Name</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {tables.tables.map((table: string) => (
+          <TableRow key={table}>
+            <TableCell className="font-medium">{table}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
+export default async function DatabaseLayout({
+  searchParams,
+  children
+}: {
+  searchParams: { q: string; offset: string };
+  children: React.ReactNode;
+}) {
+  const search = searchParams?.q ?? '';
+  const offset = searchParams?.offset ?? 0;
+
+  const items: MenuItem[] = [
+    {
+      key: 'sub1',
+      label: 'Navigation',
+      children: [
+        {
+          key: 'g1',
+          label: 'Item 1'
+        },
+        {
+          key: 'g2',
+          label: 'Item 2'
+        }
+      ]
+    }
+  ];
+
+  const ret = await listDatabase();
+  if (ret.databases.length > 1) {
+    const latestDatabase = ret.databases.at(-1);
+    const tables = await listTable(latestDatabase);
+    console.log('🚀 ~ ret:', tables);
+    items.push({
+      key: latestDatabase,
+      label: latestDatabase,
+      children: tables.tables
+    });
+  }
+
+  return (
+    <div className="flex divide-x ">
+      <section className="w-40">
+        <SideMenu
+          items={items}
+          contextMenuContent={(key: string) => (
+            <InfinityContextMenuContent
+              databaseName={key}
+            ></InfinityContextMenuContent>
+          )}
+        ></SideMenu>
+      </section>
+      <section className="flex-1 text-center">{children}</section>
+    </div>
+  );
+}
diff --git a/gui/app/(dashboard)/database/page.tsx b/gui/app/(dashboard)/database/page.tsx
index d0048320c1..3f9e71d12e 100644
--- a/gui/app/(dashboard)/database/page.tsx
+++ b/gui/app/(dashboard)/database/page.tsx
@@ -1,135 +1,3 @@
-import SideMenu, { MenuItem } from '@/components/ui/side-menu';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow
-} from '@/components/ui/table';
-import { listDatabase, listTable } from '../actions';
-import { InfinityContextMenuContent } from './context-menu';
-
-const invoices = [
-  {
-    invoice: 'INV001',
-    paymentStatus: 'Paid',
-    totalAmount: '$250.00',
-    paymentMethod: 'Credit Card'
-  },
-  {
-    invoice: 'INV002',
-    paymentStatus: 'Pending',
-    totalAmount: '$150.00',
-    paymentMethod: 'PayPal'
-  },
-  {
-    invoice: 'INV003',
-    paymentStatus: 'Unpaid',
-    totalAmount: '$350.00',
-    paymentMethod: 'Bank Transfer'
-  },
-  {
-    invoice: 'INV004',
-    paymentStatus: 'Paid',
-    totalAmount: '$450.00',
-    paymentMethod: 'Credit Card'
-  },
-  {
-    invoice: 'INV005',
-    paymentStatus: 'Paid',
-    totalAmount: '$550.00',
-    paymentMethod: 'PayPal'
-  },
-  {
-    invoice: 'INV006',
-    paymentStatus: 'Pending',
-    totalAmount: '$200.00',
-    paymentMethod: 'Bank Transfer'
-  },
-  {
-    invoice: 'INV007',
-    paymentStatus: 'Unpaid',
-    totalAmount: '$300.00',
-    paymentMethod: 'Credit Card'
-  }
-];
-
-function InfinityTable() {
-  return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead className="w-[100px]">Name</TableHead>
-          <TableHead>Type</TableHead>
-          <TableHead>Default</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {invoices.map((invoice) => (
-          <TableRow key={invoice.invoice}>
-            <TableCell className="font-medium">{invoice.invoice}</TableCell>
-            <TableCell>{invoice.paymentStatus}</TableCell>
-            <TableCell>{invoice.paymentMethod}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  );
-}
-
-export default async function DatabasePage({
-  searchParams
-}: {
-  searchParams: { q: string; offset: string };
-}) {
-  const search = searchParams.q ?? '';
-  const offset = searchParams.offset ?? 0;
-
-  const items: MenuItem[] = [
-    {
-      key: 'sub1',
-      label: 'Navigation',
-      children: [
-        {
-          key: 'g1',
-          label: 'Item 1'
-        },
-        {
-          key: 'g2',
-          label: 'Item 2'
-        }
-      ]
-    }
-  ];
-
-  const ret = await listDatabase();
-  if (ret.databases.length > 1) {
-    const latestDatabase = ret.databases.at(-1);
-    const tables = await listTable(latestDatabase);
-    console.log('🚀 ~ ret:', tables);
-    items.push({
-      key: latestDatabase,
-      label: latestDatabase,
-      children: tables.tables
-    });
-  }
-
-  return (
-    <div className="flex divide-x ">
-      <section className="w-40">
-        <SideMenu
-          items={items}
-          contextMenuContent={(key: string) => (
-            <InfinityContextMenuContent
-              databaseName={key}
-            ></InfinityContextMenuContent>
-          )}
-        ></SideMenu>
-      </section>
-      <section className="flex-1 text-center">
-        <InfinityTable></InfinityTable>
-      </section>
-    </div>
-  );
+export default async function DatabasePage() {
+  return <div>DatabasePage</div>;
 }
diff --git a/gui/app/(dashboard)/database/table-creating-dialog.tsx b/gui/app/(dashboard)/database/table-creating-dialog.tsx
deleted file mode 100644
index f99be95179..0000000000
--- a/gui/app/(dashboard)/database/table-creating-dialog.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client';
-
-import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger
-} from '@/components/ui/dialog';
-import { IDialogProps } from '@/lib/interfaces';
-import React from 'react';
-import { TableCreatingForm } from './table-creating-form';
-
-export function TableCreatingDialog({
-  children,
-  visible,
-  switchVisible,
-  hideDialog
-}: React.PropsWithChildren<IDialogProps<any>>) {
-  return (
-    <Dialog open={visible} onOpenChange={switchVisible}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
-        <DialogHeader>
-          <DialogTitle>Create Table</DialogTitle>
-        </DialogHeader>
-        <div className="grid gap-4 py-4">
-          <TableCreatingForm hide={hideDialog}></TableCreatingForm>
-        </div>
-        <DialogFooter>
-          <Button type="submit" form="database-creating">
-            Save
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/gui/app/(dashboard)/database/table-creating-form.tsx b/gui/app/(dashboard)/database/table-creating-form.tsx
deleted file mode 100644
index d66302bfb8..0000000000
--- a/gui/app/(dashboard)/database/table-creating-form.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-'use client';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useRouter } from 'next/navigation';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-import { toast } from '@/components/hooks/use-toast';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@/components/ui/select';
-import { CreateOption } from '@/lib/constant/common';
-import { createDatabase } from '../actions';
-
-export const FormSchema = z.object({
-  name: z
-    .string({
-      required_error: 'Please input name'
-    })
-    .trim(),
-  fields: z.array(),
-  create_option: z.nativeEnum(CreateOption)
-});
-
-interface IProps {
-  hide(): void;
-}
-
-export function TableCreatingForm({ hide }: IProps) {
-  const router = useRouter();
-  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: zodResolver(FormSchema),
-    defaultValues: {
-      create_option: CreateOption.Error
-    }
-  });
-
-  async function onSubmit(data: z.infer<typeof FormSchema>) {
-    const ret = await createDatabase(data);
-    console.log('🚀 ~ onSubmit ~ ret:', ret);
-    if (ret.error_code === 0) {
-      router.refresh();
-      hide();
-      toast({
-        title: 'Create Success',
-        description: ''
-      });
-    }
-  }
-
-  return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className="w-2/3 space-y-6"
-        id="database-creating"
-      >
-        <FormField
-          control={form.control}
-          name="database_name"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Name</FormLabel>
-              <FormControl>
-                <Input placeholder="name" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="create_option"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Create option</FormLabel>
-              <Select onValueChange={field.onChange} defaultValue={field.value}>
-                <FormControl>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select a verified email to display" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  <SelectItem value="error">error</SelectItem>
-                  <SelectItem value="ignore_if_exists">
-                    ignore_if_exists
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      </form>
-    </Form>
-  );
-}
diff --git a/gui/app/(dashboard)/page.tsx b/gui/app/(dashboard)/page.tsx
index 05c93eddc3..bed4ec14de 100644
--- a/gui/app/(dashboard)/page.tsx
+++ b/gui/app/(dashboard)/page.tsx
@@ -31,7 +31,7 @@ export default async function ProductsPage({
   };
 
   return (
-    <div>
+    <div className="flex flex-col space-y-4">
       <Card>
         <CardHeader>
           <CardTitle>Briefs</CardTitle>
diff --git a/gui/app/(dashboard)/tables/page.tsx b/gui/app/(dashboard)/tables/page.tsx
index d0048320c1..374113d54d 100644
--- a/gui/app/(dashboard)/tables/page.tsx
+++ b/gui/app/(dashboard)/tables/page.tsx
@@ -10,67 +10,19 @@ import {
 import { listDatabase, listTable } from '../actions';
 import { InfinityContextMenuContent } from './context-menu';
 
-const invoices = [
-  {
-    invoice: 'INV001',
-    paymentStatus: 'Paid',
-    totalAmount: '$250.00',
-    paymentMethod: 'Credit Card'
-  },
-  {
-    invoice: 'INV002',
-    paymentStatus: 'Pending',
-    totalAmount: '$150.00',
-    paymentMethod: 'PayPal'
-  },
-  {
-    invoice: 'INV003',
-    paymentStatus: 'Unpaid',
-    totalAmount: '$350.00',
-    paymentMethod: 'Bank Transfer'
-  },
-  {
-    invoice: 'INV004',
-    paymentStatus: 'Paid',
-    totalAmount: '$450.00',
-    paymentMethod: 'Credit Card'
-  },
-  {
-    invoice: 'INV005',
-    paymentStatus: 'Paid',
-    totalAmount: '$550.00',
-    paymentMethod: 'PayPal'
-  },
-  {
-    invoice: 'INV006',
-    paymentStatus: 'Pending',
-    totalAmount: '$200.00',
-    paymentMethod: 'Bank Transfer'
-  },
-  {
-    invoice: 'INV007',
-    paymentStatus: 'Unpaid',
-    totalAmount: '$300.00',
-    paymentMethod: 'Credit Card'
-  }
-];
-
-function InfinityTable() {
+async function InfinityTable() {
+  const tables = await listTable('default_db');
   return (
     <Table>
       <TableHeader>
         <TableRow>
-          <TableHead className="w-[100px]">Name</TableHead>
-          <TableHead>Type</TableHead>
-          <TableHead>Default</TableHead>
+          <TableHead className="text-center">Name</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
-        {invoices.map((invoice) => (
-          <TableRow key={invoice.invoice}>
-            <TableCell className="font-medium">{invoice.invoice}</TableCell>
-            <TableCell>{invoice.paymentStatus}</TableCell>
-            <TableCell>{invoice.paymentMethod}</TableCell>
+        {tables.tables.map((table: string) => (
+          <TableRow key={table}>
+            <TableCell className="font-medium">{table}</TableCell>
           </TableRow>
         ))}
       </TableBody>
diff --git a/gui/lib/request.ts b/gui/lib/request.ts
index fe2ca7d95b..351a06eafc 100644
--- a/gui/lib/request.ts
+++ b/gui/lib/request.ts
@@ -1,4 +1,4 @@
-const baseUrl = 'http://127.0.0.1:23820/';
+const baseUrl = 'http://127.0.0.1:3000/';
 
 export const request = async (
   url: string,