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 4322623d00..4f5d013b13 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
@@ -14,6 +14,7 @@ export const useDatabase = (viewId: string, type?: ViewLayoutTypePB) => {
   const [controller, setController] = useState<DatabaseController>();
   const [rows, setRows] = useState<readonly RowInfo[]>([]);
   const [groups, setGroups] = useState<readonly DatabaseGroupController[]>([]);
+  const [groupByFieldId, setGroupByFieldId] = useState('');
 
   useEffect(() => {
     if (!viewId.length) return;
@@ -54,13 +55,12 @@ export const useDatabase = (viewId: string, type?: ViewLayoutTypePB) => {
         onFieldsChanged: (fieldInfos) => {
           void loadFields(fieldInfos);
         },
-        onGroupByField: (g) => {
-          console.log('on group by field: ', g);
-        },
       });
       await controller.open();
 
       if (type === ViewLayoutTypePB.Board) {
+        const fieldId = await controller.getGroupByFieldId();
+        setGroupByFieldId(fieldId.unwrap());
         setGroups(controller.groups.value);
       }
     })();
@@ -97,5 +97,5 @@ export const useDatabase = (viewId: string, type?: ViewLayoutTypePB) => {
     }
   };
 
-  return { loadFields, controller, rows, groups, onNewRowClick, onDragEnd };
+  return { loadFields, controller, rows, groups, groupByFieldId, onNewRowClick, onDragEnd };
 };
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 d7fcdd9968..7df79ede9a 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx
@@ -10,7 +10,10 @@ import { RowInfo } from '$app/stores/effects/database/row/row_cache';
 import { EditRow } from '$app/components/_shared/EditRow/EditRow';
 
 export const Board = ({ viewId }: { viewId: string }) => {
-  const { controller, rows, groups, onNewRowClick, onDragEnd } = useDatabase(viewId, ViewLayoutTypePB.Board);
+  const { controller, rows, groups, groupByFieldId, onNewRowClick, onDragEnd } = useDatabase(
+    viewId,
+    ViewLayoutTypePB.Board
+  );
   const [showBoardRow, setShowBoardRow] = useState(false);
   const [boardRowInfo, setBoardRowInfo] = useState<RowInfo>();
 
@@ -45,6 +48,7 @@ export const Board = ({ viewId }: { viewId: string }) => {
                   controller={controller}
                   group={group}
                   allRows={rows}
+                  groupByFieldId={groupByFieldId}
                   onNewRowClick={() => onNewRowClick(index)}
                   onOpenRow={onOpenRow}
                 />
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 0a3b20e597..1c94ed454a 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardBlock.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardBlock.tsx
@@ -10,6 +10,7 @@ export const BoardBlock = ({
   viewId,
   controller,
   allRows,
+  groupByFieldId,
   onNewRowClick,
   onOpenRow,
   group,
@@ -17,6 +18,7 @@ export const BoardBlock = ({
   viewId: string;
   controller: DatabaseController;
   allRows: readonly RowInfo[];
+  groupByFieldId: string;
   onNewRowClick: () => void;
   onOpenRow: (rowId: RowInfo) => void;
   group: DatabaseGroupController;
@@ -53,6 +55,7 @@ export const BoardBlock = ({
                   index={index}
                   key={row.row.id}
                   rowInfo={row}
+                  groupByFieldId={groupByFieldId}
                   onOpenRow={onOpenRow}
                 ></BoardCard>
               ) : (
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCard.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCard.tsx
index b9b22c8263..ff95b87541 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCard.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCard.tsx
@@ -10,12 +10,14 @@ export const BoardCard = ({
   viewId,
   controller,
   rowInfo,
+  groupByFieldId,
   onOpenRow,
 }: {
   index: number;
   viewId: string;
   controller: DatabaseController;
   rowInfo: RowInfo;
+  groupByFieldId: string;
   onOpenRow: (rowId: RowInfo) => void;
 }) => {
   const { cells } = useRow(viewId, controller, rowInfo);
@@ -34,14 +36,16 @@ export const BoardCard = ({
             <Details2Svg></Details2Svg>
           </button>
           <div className={'flex flex-col gap-3'}>
-            {cells.map((cell, cellIndex) => (
-              <BoardCell
-                key={cellIndex}
-                cellIdentifier={cell.cellIdentifier}
-                cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
-                fieldController={controller.fieldController}
-              ></BoardCell>
-            ))}
+            {cells
+              .filter((cell) => cell.fieldId !== groupByFieldId)
+              .map((cell, cellIndex) => (
+                <BoardCell
+                  key={cellIndex}
+                  cellIdentifier={cell.cellIdentifier}
+                  cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
+                  fieldController={controller.fieldController}
+                ></BoardCell>
+              ))}
           </div>
         </div>
       )}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_bd_svc.ts b/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_bd_svc.ts
index cfa9196aa3..238de00e8a 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_bd_svc.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_bd_svc.ts
@@ -1,6 +1,7 @@
 import {
   DatabaseEventCreateRow,
   DatabaseEventGetDatabase,
+  DatabaseEventGetDatabaseSetting,
   DatabaseEventGetFields,
   DatabaseEventGetGroup,
   DatabaseEventGetGroups,
@@ -118,4 +119,9 @@ export class DatabaseBackendService {
     const payload = DatabaseViewIdPB.fromObject({ value: this.viewId });
     return DatabaseEventGetGroups(payload);
   };
+
+  getSettings = () => {
+    const payload = DatabaseViewIdPB.fromObject({ value: this.viewId });
+    return DatabaseEventGetDatabaseSetting(payload);
+  };
 }
diff --git a/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_controller.ts b/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_controller.ts
index 41b61fc8e9..1f72104b42 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_controller.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/stores/effects/database/database_controller.ts
@@ -1,9 +1,9 @@
 import { DatabaseBackendService } from './database_bd_svc';
 import { FieldController, FieldInfo } from './field/field_controller';
 import { DatabaseViewCache } from './view/database_view_cache';
-import { DatabasePB, GroupPB } from '@/services/backend';
+import { DatabasePB, FlowyError, GroupPB } from '@/services/backend';
 import { RowChangedReason, RowInfo } from './row/row_cache';
-import { Err } from 'ts-results';
+import { Err, Ok } from 'ts-results';
 import { DatabaseGroupController } from './group/group_controller';
 import { BehaviorSubject } from 'rxjs';
 import { DatabaseGroupObserver } from './group/group_observer';
@@ -71,6 +71,20 @@ export class DatabaseController {
     }
   };
 
+  getGroupByFieldId = async () => {
+    const settingsResult = await this.backendService.getSettings();
+    if (settingsResult.ok) {
+      const settings = settingsResult.val;
+      const groupConfig = settings.group_configurations.items;
+      if (groupConfig.length === 0) {
+        return Err(new FlowyError({ msg: 'this database has no groups' }));
+      }
+      return Ok(settings.group_configurations.items[0].field_id);
+    } else {
+      return Err(settingsResult.val);
+    }
+  };
+
   createRow = () => {
     return this.backendService.createRow();
   };