diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/board/EditBoardRow/EditBoardCell.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/board/EditBoardRow/EditBoardCell.tsx
new file mode 100644
index 0000000000..be125fcea9
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/board/EditBoardRow/EditBoardCell.tsx
@@ -0,0 +1,54 @@
+import { CellIdentifier } from '$app/stores/effects/database/cell/cell_bd_svc';
+import { useCell } from '$app/components/_shared/database-hooks/useCell';
+import { CellCache } from '$app/stores/effects/database/cell/cell_cache';
+import { FieldController } from '$app/stores/effects/database/field/field_controller';
+import { FieldType, SelectOptionCellDataPB } from '@/services/backend';
+import { TextTypeSvg } from '$app/components/_shared/svg/TextTypeSvg';
+import { NumberTypeSvg } from '$app/components/_shared/svg/NumberTypeSvg';
+import { DateTypeSvg } from '$app/components/_shared/svg/DateTypeSvg';
+import { SingleSelectTypeSvg } from '$app/components/_shared/svg/SingleSelectTypeSvg';
+import { MultiSelectTypeSvg } from '$app/components/_shared/svg/MultiSelectTypeSvg';
+import { ChecklistTypeSvg } from '$app/components/_shared/svg/ChecklistTypeSvg';
+import { UrlTypeSvg } from '$app/components/_shared/svg/UrlTypeSvg';
+import { useAppSelector } from '$app/stores/store';
+
+export const EditBoardCell = ({
+  cellIdentifier,
+  cellCache,
+  fieldController,
+}: {
+  cellIdentifier: CellIdentifier;
+  cellCache: CellCache;
+  fieldController: FieldController;
+}) => {
+  const { data } = useCell(cellIdentifier, cellCache, fieldController);
+  const databaseStore = useAppSelector((state) => state.database);
+  return (
+    <div className={'flex w-full items-center'}>
+      <div className={'flex w-[180px] cursor-pointer items-center gap-2 rounded-lg px-4 py-2 hover:bg-shade-6'}>
+        <div className={'h-5 w-5 flex-shrink-0'}>
+          {cellIdentifier.fieldType === FieldType.RichText && <TextTypeSvg></TextTypeSvg>}
+          {cellIdentifier.fieldType === FieldType.Number && <NumberTypeSvg></NumberTypeSvg>}
+          {cellIdentifier.fieldType === FieldType.DateTime && <DateTypeSvg></DateTypeSvg>}
+          {cellIdentifier.fieldType === FieldType.SingleSelect && <SingleSelectTypeSvg></SingleSelectTypeSvg>}
+          {cellIdentifier.fieldType === FieldType.MultiSelect && <MultiSelectTypeSvg></MultiSelectTypeSvg>}
+          {cellIdentifier.fieldType === FieldType.Checklist && <ChecklistTypeSvg></ChecklistTypeSvg>}
+          {cellIdentifier.fieldType === FieldType.URL && <UrlTypeSvg></UrlTypeSvg>}
+        </div>
+        <span className={'overflow-hidden text-ellipsis whitespace-nowrap'}>
+          {databaseStore.fields[cellIdentifier.fieldId].title}
+        </span>
+      </div>
+      <div className={'flex-1'}>
+        {(cellIdentifier.fieldType === FieldType.SingleSelect || cellIdentifier.fieldType === FieldType.MultiSelect) && (
+          <div>
+            {(data as SelectOptionCellDataPB | undefined)?.select_options?.map((option, index) => (
+              <div key={index}>{option?.name || ''}</div>
+            )) || ''}
+          </div>
+        )}
+        {<div>{data as string}</div>}
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/board/EditBoardRow/EditBoardRow.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/board/EditBoardRow/EditBoardRow.tsx
new file mode 100644
index 0000000000..e6d63cf6dd
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/board/EditBoardRow/EditBoardRow.tsx
@@ -0,0 +1,41 @@
+import { CloseSvg } from '$app/components/_shared/svg/CloseSvg';
+import { useRow } from '$app/components/_shared/database-hooks/useRow';
+import { DatabaseController } from '$app/stores/effects/database/database_controller';
+import { RowInfo } from '$app/stores/effects/database/row/row_cache';
+import { EditBoardCell } from '$app/components/board/EditBoardRow/EditBoardCell';
+
+export const EditBoardRow = ({
+  onClose,
+  viewId,
+  controller,
+  rowInfo,
+}: {
+  onClose: () => void;
+  viewId: string;
+  controller: DatabaseController;
+  rowInfo: RowInfo;
+}) => {
+  const { cells } = useRow(viewId, controller, rowInfo);
+
+  return (
+    <div className={'fixed inset-0 z-20 flex items-center justify-center bg-black/30 backdrop-blur-sm'}>
+      <div className={'relative flex min-w-[70%] flex-col gap-8 rounded-xl bg-white p-8'}>
+        <div onClick={() => onClose()} className={'absolute top-4 right-4'}>
+          <button className={'block h-8 w-8 rounded-lg text-shade-2 hover:bg-main-secondary'}>
+            <CloseSvg></CloseSvg>
+          </button>
+        </div>
+        <div className={'flex flex-col gap-4'}>
+          {cells.map((cell, cellIndex) => (
+            <EditBoardCell
+              key={cellIndex}
+              cellIdentifier={cell.cellIdentifier}
+              cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
+              fieldController={controller.fieldController}
+            ></EditBoardCell>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};