diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/Grid/Grid.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/Grid/Grid.tsx
index e8d2216b32..0527532bb6 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/Grid/Grid.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/Grid/Grid.tsx
@@ -1,3 +1,6 @@
+import { ViewLayoutTypePB } from '@/services/backend';
+
+import { useDatabase } from '../../_shared/database-hooks/useDatabase';
 import { GridTableCount } from '../GridTableCount/GridTableCount';
 import { GridTableHeader } from '../GridTableHeader/GridTableHeader';
 import { GridAddRow } from '../GridTableRows/GridAddRow';
@@ -6,24 +9,29 @@ import { GridTitle } from '../GridTitle/GridTitle';
 import { GridToolbar } from '../GridToolbar/GridToolbar';
 
 export const Grid = ({ viewId }: { viewId: string }) => {
+  const { controller, rows, groups } = useDatabase(viewId, ViewLayoutTypePB.Grid);
+
   return (
-    <div className='mx-auto mt-8 flex flex-col gap-8 px-8'>
-      <div className='flex w-full  items-center justify-between'>
-        <GridTitle />
-        <GridToolbar />
+    controller &&
+    groups && (
+      <div className='mx-auto mt-8 flex flex-col gap-8 px-8'>
+        <div className='flex w-full  items-center justify-between'>
+          <GridTitle />
+          <GridToolbar />
+        </div>
+
+        {/* table component view with text area for td */}
+        <div className='flex flex-col gap-4'>
+          <table className='w-full table-fixed text-sm'>
+            <GridTableHeader />
+            <GridTableRows allRows={rows} viewId={viewId} controller={controller} />
+          </table>
+
+          <GridAddRow />
+        </div>
+
+        <GridTableCount />
       </div>
-
-      {/* table component view with text area for td */}
-      <div className='flex flex-col gap-4'>
-        <table className='w-full table-fixed text-sm'>
-          <GridTableHeader />
-          <GridTableRows />
-        </table>
-
-        <GridAddRow />
-      </div>
-
-      <GridTableCount />
-    </div>
+    )
   );
 };
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeader.hooks.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeader.hooks.tsx
index d05ddaf5f3..a2db70852d 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeader.hooks.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeader.hooks.tsx
@@ -5,7 +5,7 @@ import { useAppDispatch, useAppSelector } from '../../../stores/store';
 
 export const useGridTableHeaderHooks = function () {
   const dispatch = useAppDispatch();
-  const grid = useAppSelector((state) => state.grid);
+  const database = useAppSelector((state) => state.database);
 
   const onAddField = () => {
     dispatch(
@@ -21,7 +21,13 @@ export const useGridTableHeaderHooks = function () {
   };
 
   return {
-    fields: grid.fields,
+    fields: Object.values(database.fields).map((field) => {
+      return {
+        fieldId: field.fieldId,
+        name: field.title,
+        fieldType: field.fieldType,
+      };
+    }),
     onAddField,
   };
 };
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeader.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeader.tsx
index 27c0b72a96..66e3791731 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeader.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeader.tsx
@@ -27,6 +27,7 @@ export const GridTableHeader = () => {
                     {field.fieldType === FieldType.SingleSelect && <SingleSelectTypeSvg></SingleSelectTypeSvg>}
                     {field.fieldType === FieldType.MultiSelect && <MultiSelectTypeSvg></MultiSelectTypeSvg>}
                     {field.fieldType === FieldType.Checklist && <ChecklistTypeSvg></ChecklistTypeSvg>}
+                    {field.fieldType === FieldType.Checkbox && <ChecklistTypeSvg></ChecklistTypeSvg>}
                     {field.fieldType === FieldType.URL && <UrlTypeSvg></UrlTypeSvg>}
                   </i>
                   <span>{field.name}</span>
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridAddRow.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridAddRow.hooks.ts
index 685e36bee9..517e2964a2 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridAddRow.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridAddRow.hooks.ts
@@ -1,11 +1,7 @@
-import { gridActions } from '../../../stores/reducers/grid/slice';
-import { useAppDispatch } from '../../../stores/store';
-
 export const useGridAddRow = () => {
-  const dispatch = useAppDispatch();
-
   function addRow() {
-    dispatch(gridActions.addRow());
+    // create a new row
+    console.log('create a new row');
   }
 
   return {
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableCell.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableCell.tsx
new file mode 100644
index 0000000000..3319349d7f
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableCell.tsx
@@ -0,0 +1,25 @@
+import { CellIdentifier } from '@/appflowy_app/stores/effects/database/cell/cell_bd_svc';
+import { CellCache } from '@/appflowy_app/stores/effects/database/cell/cell_cache';
+import { FieldController } from '@/appflowy_app/stores/effects/database/field/field_controller';
+import { BoardCell } from '../../board/BoardCell';
+import { useCell } from '../../_shared/database-hooks/useCell';
+
+export const GridTableCell = ({
+  cellIdentifier,
+  cellCache,
+  fieldController,
+}: {
+  cellIdentifier: CellIdentifier;
+  cellCache: CellCache;
+  fieldController: FieldController;
+}) => {
+  const { data } = useCell(cellIdentifier, cellCache, fieldController);
+
+  console.log({ data });
+
+  return (
+    <div className='min-h-[32px] w-full rounded-lg border border-transparent p-2 focus:border-main-accent'>
+      <BoardCell cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController} />
+    </div>
+  );
+};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableItem.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableItem.hooks.ts
deleted file mode 100644
index e36cd3f952..0000000000
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableItem.hooks.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useState } from 'react';
-import { gridActions } from '../../../stores/reducers/grid/slice';
-import { useAppDispatch, useAppSelector } from '../../../stores/store';
-
-export const useGridTableItemHooks = (
-  rowItem: { value: string | number; fieldId: string; cellId: string },
-  rowId: string
-) => {
-  const dispatch = useAppDispatch();
-  const [value, setValue] = useState(rowItem.value);
-
-  function onValueChange(event: React.ChangeEvent<HTMLInputElement>) {
-    setValue(event.target.value);
-  }
-
-  function onValueBlur() {
-    dispatch(gridActions.updateRowValue({ rowId: rowId, cellId: rowItem.cellId, value }));
-  }
-
-  const grid = useAppSelector((state) => state.grid);
-
-  return {
-    rows: grid.rows,
-    onValueChange,
-    value,
-    onValueBlur,
-  };
-};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableItem.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableItem.tsx
deleted file mode 100644
index 99c3fe7856..0000000000
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableItem.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useGridTableItemHooks } from './GridTableItem.hooks';
-
-export const GridTableItem = ({
-  rowItem,
-  rowId,
-}: {
-  rowItem: {
-    fieldId: string;
-    value: string | number;
-    cellId: string;
-  };
-  rowId: string;
-}) => {
-  const { value, onValueChange, onValueBlur } = useGridTableItemHooks(rowItem, rowId);
-  return (
-    <div>
-      <input
-        className='h-full w-full rounded-lg border border-transparent p-2 focus:border-main-accent'
-        type='text'
-        value={value}
-        onChange={onValueChange}
-        onBlur={onValueBlur}
-      />
-    </div>
-  );
-};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableRow.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableRow.tsx
new file mode 100644
index 0000000000..b46c236ddb
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableRow.tsx
@@ -0,0 +1,33 @@
+import { DatabaseController } from '@/appflowy_app/stores/effects/database/database_controller';
+import { RowInfo } from '@/appflowy_app/stores/effects/database/row/row_cache';
+import { useRow } from '../../_shared/database-hooks/useRow';
+import { GridTableCell } from './GridTableCell';
+
+export const GridTableRow = ({
+  viewId,
+  controller,
+  row,
+}: {
+  viewId: string;
+  controller: DatabaseController;
+  row: RowInfo;
+}) => {
+  const { cells } = useRow(viewId, controller, row);
+
+  return (
+    <tr>
+      {cells.map((cell, cellIndex) => {
+        return (
+          <td className='m-0 border border-l-0 border-shade-6 p-0 '>
+            <GridTableCell
+              key={cellIndex}
+              cellIdentifier={cell.cellIdentifier}
+              cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
+              fieldController={controller.fieldController}
+            />
+          </td>
+        );
+      })}
+    </tr>
+  );
+};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableRows.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableRows.hooks.ts
deleted file mode 100644
index b534c5a4d3..0000000000
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableRows.hooks.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useAppSelector } from '../../../stores/store';
-
-export const useGridTableRowsHooks = () => {
-  const grid = useAppSelector((state) => state.grid);
-
-  return {
-    rows: grid.rows,
-  };
-};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableRows.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableRows.tsx
index 361a77063e..d6f85eebe1 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableRows.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableRows.tsx
@@ -1,24 +1,19 @@
-import { GridTableItem } from './GridTableItem';
-import { useGridTableRowsHooks } from './GridTableRows.hooks';
-
-export const GridTableRows = () => {
-  const { rows } = useGridTableRowsHooks();
+import { DatabaseController } from '@/appflowy_app/stores/effects/database/database_controller';
+import { RowInfo } from '@/appflowy_app/stores/effects/database/row/row_cache';
+import { GridTableRow } from './GridTableRow';
+export const GridTableRows = ({
+  viewId,
+  controller,
+  allRows,
+}: {
+  viewId: string;
+  controller: DatabaseController;
+  allRows: readonly RowInfo[];
+}) => {
   return (
     <tbody>
-      {rows.map((row, i) => {
-        return (
-          <tr key={row.rowId}>
-            {row.values.map((value) => {
-              return (
-                <td key={value.fieldId} className='m-0 border border-l-0 border-shade-6 p-0'>
-                  <GridTableItem rowItem={value} rowId={row.rowId} />
-                </td>
-              );
-            })}
-
-            <td className='m-0 border border-r-0 border-shade-6 p-0'></td>
-          </tr>
-        );
+      {allRows.map((row, i) => {
+        return <GridTableRow row={row} key={i} viewId={viewId} controller={controller} />;
       })}
     </tbody>
   );