diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useCell.ts b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useCell.ts
index d211a8b326..6db19ecbbd 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useCell.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useCell.ts
@@ -22,7 +22,7 @@ export const useCell = (cellIdentifier: CellIdentifier, cellCache: CellCache, fi
 
     return () => {
       // dispose is causing an error
-      // void cellController.dispose();
+      void cellController.dispose();
     };
   }, []);
 
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useDatabase.ts b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useDatabase.ts
index 4d4d89c9c5..66e62977b7 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useDatabase.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useDatabase.ts
@@ -20,7 +20,7 @@ export const useDatabase = (viewId: string, type?: ViewLayoutTypePB) => {
     setController(c);
 
     // dispose is causing an error
-    // return () => void c.dispose();
+    return () => void c.dispose();
   }, [viewId]);
 
   const loadFields = async (fieldInfos: readonly FieldInfo[]) => {
@@ -49,11 +49,15 @@ export const useDatabase = (viewId: string, type?: ViewLayoutTypePB) => {
     void (async () => {
       controller.subscribe({
         onRowsChanged: (rowInfos) => {
+          console.log('rows changed: ', rowInfos);
           setRows(rowInfos);
         },
         onFieldsChanged: (fieldInfos) => {
           void loadFields(fieldInfos);
         },
+        onGroupByField: (g) => {
+          console.log('on group by field: ', g);
+        },
       });
       await controller.open();
 
@@ -63,5 +67,20 @@ export const useDatabase = (viewId: string, type?: ViewLayoutTypePB) => {
     })();
   }, [controller]);
 
-  return { loadFields, controller, rows, groups };
+  const onNewRowClick = async (index: number) => {
+    if (!groups) return;
+    if (!controller?.groups) return;
+    const group = groups[index];
+    await group.createRow();
+
+    const newGroups = controller.groups.value;
+
+    newGroups.forEach((g) => {
+      console.log(g.name, g.rows);
+    });
+
+    setGroups([...controller.groups.value]);
+  };
+
+  return { loadFields, controller, rows, groups, onNewRowClick };
 };
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx
index 569e65b551..7847169ba5 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx
@@ -7,7 +7,7 @@ import { ViewLayoutTypePB } from '@/services/backend';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 
 export const Board = ({ viewId }: { viewId: string }) => {
-  const { controller, rows, groups } = useDatabase(viewId, ViewLayoutTypePB.Board);
+  const { controller, rows, groups, onNewRowClick } = useDatabase(viewId, ViewLayoutTypePB.Board);
 
   return (
     <>
@@ -39,6 +39,7 @@ export const Board = ({ viewId }: { viewId: string }) => {
                         rows={group.rows}
                         title={group.name}
                         allRows={rows}
+                        onNewRowClick={() => onNewRowClick(index)}
                       />
                     </div>
                   )}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardBlock.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardBlock.tsx
index 6f23efa8c1..c1a23be4c3 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardBlock.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardBlock.tsx
@@ -12,12 +12,14 @@ export const BoardBlock = ({
   title,
   rows,
   allRows,
+  onNewRowClick,
 }: {
   viewId: string;
   controller: DatabaseController;
   title: string;
   rows: RowPB[];
   allRows: readonly RowInfo[];
+  onNewRowClick: () => void;
 }) => {
   return (
     <div className={'flex h-full w-[250px] flex-col rounded-lg bg-surface-1'}>
@@ -39,7 +41,7 @@ export const BoardBlock = ({
         {rows.map((row_pb, index) => {
           const row = allRows.find((r) => r.row.id === row_pb.id);
           return row ? (
-            <Draggable draggableId={row_pb.id} index={index}>
+            <Draggable draggableId={row_pb.id} index={index} key={index}>
               {(provided, snapshot) => (
                 <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                   <BoardCard viewId={viewId} controller={controller} key={index} rowInfo={row}></BoardCard>
@@ -52,7 +54,10 @@ export const BoardBlock = ({
         })}
       </div>
       <div className={'p-2'}>
-        <button className={'flex w-full items-center gap-2 rounded-lg px-2 py-2 hover:bg-surface-2'}>
+        <button
+          onClick={onNewRowClick}
+          className={'flex w-full items-center gap-2 rounded-lg px-2 py-2 hover:bg-surface-2'}
+        >
           <span className={'h-5 w-5'}>
             <AddSvg></AddSvg>
           </span>