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 0527532bb6..611f612a69 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
@@ -7,31 +7,51 @@ import { GridAddRow } from '../GridTableRows/GridAddRow';
 import { GridTableRows } from '../GridTableRows/GridTableRows';
 import { GridTitle } from '../GridTitle/GridTitle';
 import { GridToolbar } from '../GridToolbar/GridToolbar';
+import { EditRow } from '$app/components/_shared/EditRow/EditRow';
+import { useState } from 'react';
+import { RowInfo } from '$app/stores/effects/database/row/row_cache';
 
 export const Grid = ({ viewId }: { viewId: string }) => {
   const { controller, rows, groups } = useDatabase(viewId, ViewLayoutTypePB.Grid);
+  const [showGridRow, setShowGridRow] = useState(false);
+  const [boardRowInfo, setBoardRowInfo] = useState<RowInfo>();
+
+  const onOpenRow = (rowInfo: RowInfo) => {
+    setBoardRowInfo(rowInfo);
+    setShowGridRow(true);
+  };
 
   return (
     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 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 onOpenRow={onOpenRow} 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 allRows={rows} viewId={viewId} controller={controller} />
-          </table>
-
-          <GridAddRow />
-        </div>
-
-        <GridTableCount />
-      </div>
+        {showGridRow && boardRowInfo && (
+          <EditRow
+            onClose={() => setShowGridRow(false)}
+            viewId={viewId}
+            controller={controller}
+            rowInfo={boardRowInfo}
+          ></EditRow>
+        )}
+      </>
     )
   );
 };
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
index efb1a32174..e5e6fe029a 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableCell.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableCell.tsx
@@ -7,13 +7,15 @@ export const GridTableCell = ({
   cellIdentifier,
   cellCache,
   fieldController,
+  onClick,
 }: {
   cellIdentifier: CellIdentifier;
   cellCache: CellCache;
   fieldController: FieldController;
+  onClick: () => void;
 }) => {
   return (
-    <div className='w-full rounded-lg border border-transparent group-active:bg-main-accent'>
+    <div onClick={() => onClick()} className='w-full rounded-lg border border-transparent group-active:bg-main-accent'>
       <BoardCell cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController} />
     </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
index 84caa10955..5e39f44716 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableRow.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridTableRow.tsx
@@ -7,10 +7,12 @@ export const GridTableRow = ({
   viewId,
   controller,
   row,
+  onOpenRow,
 }: {
   viewId: string;
   controller: DatabaseController;
   row: RowInfo;
+  onOpenRow: (rowId: RowInfo) => void;
 }) => {
   const { cells } = useRow(viewId, controller, row);
 
@@ -21,6 +23,7 @@ export const GridTableRow = ({
         return (
           <td className='m-0 border border-l-0 border-shade-6 p-0 ' key={cellIndex}>
             <GridTableCell
+              onClick={() => onOpenRow(row)}
               key={cellIndex}
               cellIdentifier={cell.cellIdentifier}
               cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
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 d6f85eebe1..829698b6f1 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
@@ -5,15 +5,17 @@ export const GridTableRows = ({
   viewId,
   controller,
   allRows,
+  onOpenRow,
 }: {
   viewId: string;
   controller: DatabaseController;
   allRows: readonly RowInfo[];
+  onOpenRow: (rowId: RowInfo) => void;
 }) => {
   return (
     <tbody>
       {allRows.map((row, i) => {
-        return <GridTableRow row={row} key={i} viewId={viewId} controller={controller} />;
+        return <GridTableRow onOpenRow={onOpenRow} row={row} key={i} viewId={viewId} controller={controller} />;
       })}
     </tbody>
   );