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/page.tsx b/gui/app/(dashboard)/database/page.tsx
deleted file mode 100644
index d0048320c1..0000000000
--- a/gui/app/(dashboard)/database/page.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-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>
-  );
-}
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..919a1ad5cb 100644
--- a/gui/app/(dashboard)/tables/page.tsx
+++ b/gui/app/(dashboard)/tables/page.tsx
@@ -55,22 +55,19 @@ const invoices = [
   }
 ];
 
-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>