diff --git a/frontend/app_flowy/lib/plugins/board/application/card/card_bloc.dart b/frontend/app_flowy/lib/plugins/board/application/card/card_bloc.dart
index fe66825cef..ab6aeacfcc 100644
--- a/frontend/app_flowy/lib/plugins/board/application/card/card_bloc.dart
+++ b/frontend/app_flowy/lib/plugins/board/application/card/card_bloc.dart
@@ -23,7 +23,6 @@ class BoardCardBloc extends Bloc<BoardCardEvent, BoardCardState> {
   })  : _rowService = RowFFIService(
           gridId: gridId,
           blockId: dataController.rowPB.blockId,
-          rowId: dataController.rowPB.id,
         ),
         _dataController = dataController,
         super(BoardCardState.initial(
@@ -34,9 +33,6 @@ class BoardCardBloc extends Bloc<BoardCardEvent, BoardCardState> {
           initial: (_InitialRow value) async {
             await _startListening();
           },
-          createRow: (_CreateRow value) {
-            _rowService.createRow();
-          },
           didReceiveCells: (_DidReceiveCells value) async {
             final cells = value.gridCellMap.values
                 .map((e) => GridCellEquatable(e.field))
@@ -61,7 +57,6 @@ class BoardCardBloc extends Bloc<BoardCardEvent, BoardCardState> {
   RowInfo rowInfo() {
     return RowInfo(
       gridId: _rowService.gridId,
-      blockId: _rowService.blockId,
       fields: UnmodifiableListView(
         state.cells.map((cell) => cell._field).toList(),
       ),
@@ -83,7 +78,6 @@ class BoardCardBloc extends Bloc<BoardCardEvent, BoardCardState> {
 @freezed
 class BoardCardEvent with _$BoardCardEvent {
   const factory BoardCardEvent.initial() = _InitialRow;
-  const factory BoardCardEvent.createRow() = _CreateRow;
   const factory BoardCardEvent.didReceiveCells(
       GridCellMap gridCellMap, RowsChangedReason reason) = _DidReceiveCells;
 }
diff --git a/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart b/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart
index 1fb31abcc7..e7202e0a6d 100644
--- a/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart
+++ b/frontend/app_flowy/lib/plugins/board/presentation/board_page.dart
@@ -1,11 +1,20 @@
 // ignore_for_file: unused_field
 
+import 'dart:collection';
+
 import 'package:app_flowy/plugins/board/application/card/card_data_controller.dart';
+import 'package:app_flowy/plugins/grid/application/row/row_cache.dart';
+import 'package:app_flowy/plugins/grid/application/field/field_cache.dart';
+import 'package:app_flowy/plugins/grid/application/row/row_data_controller.dart';
+import 'package:app_flowy/plugins/grid/presentation/widgets/cell/cell_builder.dart';
+import 'package:app_flowy/plugins/grid/presentation/widgets/row/row_detail.dart';
 import 'package:appflowy_board/appflowy_board.dart';
 import 'package:flowy_infra_ui/widget/error_page.dart';
 import 'package:flowy_sdk/protobuf/flowy-folder/view.pb.dart';
+import 'package:flowy_sdk/protobuf/flowy-grid/block_entities.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import '../../grid/application/row/row_cache.dart';
 import '../application/board_bloc.dart';
 import 'card/card.dart';
 import 'card/card_cell_builder.dart';
@@ -123,9 +132,36 @@ class BoardContent extends StatelessWidget {
         onEditEditing: (rowId) {
           context.read<BoardBloc>().add(BoardEvent.endEditRow(rowId));
         },
+        openCard: (context) => _openCard(
+          gridId,
+          fieldCache,
+          rowPB,
+          rowCache,
+          context,
+        ),
       ),
     );
   }
+
+  void _openCard(String gridId, GridFieldCache fieldCache, RowPB rowPB,
+      GridRowCache rowCache, BuildContext context) {
+    final rowInfo = RowInfo(
+      gridId: gridId,
+      fields: UnmodifiableListView(fieldCache.fields),
+      rowPB: rowPB,
+    );
+
+    final dataController = GridRowDataController(
+      rowInfo: rowInfo,
+      fieldCache: fieldCache,
+      rowCache: rowCache,
+    );
+
+    RowDetailPage(
+      cellBuilder: GridCellBuilder(delegate: dataController),
+      dataController: dataController,
+    ).show(context);
+  }
 }
 
 extension HexColor on Color {
diff --git a/frontend/app_flowy/lib/plugins/board/presentation/card/card.dart b/frontend/app_flowy/lib/plugins/board/presentation/card/card.dart
index 48c3f6e5d9..20640f5601 100644
--- a/frontend/app_flowy/lib/plugins/board/presentation/card/card.dart
+++ b/frontend/app_flowy/lib/plugins/board/presentation/card/card.dart
@@ -18,6 +18,7 @@ class BoardCard extends StatefulWidget {
   final CardDataController dataController;
   final BoardCellBuilder cellBuilder;
   final OnEndEditing onEditEditing;
+  final void Function(BuildContext) openCard;
 
   const BoardCard({
     required this.gridId,
@@ -25,6 +26,7 @@ class BoardCard extends StatefulWidget {
     required this.dataController,
     required this.cellBuilder,
     required this.onEditEditing,
+    required this.openCard,
     Key? key,
   }) : super(key: key);
 
@@ -54,6 +56,9 @@ class _BoardCardState extends State<BoardCard> {
             accessoryBuilder: (context) {
               return [const _CardMoreOption()];
             },
+            onTap: (context) {
+              widget.openCard(context);
+            },
             child: Column(
               children: _makeCells(context, state.gridCellMap),
             ),
diff --git a/frontend/app_flowy/lib/plugins/board/presentation/card/card_container.dart b/frontend/app_flowy/lib/plugins/board/presentation/card/card_container.dart
index ce8df101a5..abca27e5c5 100644
--- a/frontend/app_flowy/lib/plugins/board/presentation/card/card_container.dart
+++ b/frontend/app_flowy/lib/plugins/board/presentation/card/card_container.dart
@@ -7,8 +7,10 @@ import 'package:styled_widget/styled_widget.dart';
 class BoardCardContainer extends StatelessWidget {
   final Widget child;
   final CardAccessoryBuilder? accessoryBuilder;
+  final void Function(BuildContext) onTap;
   const BoardCardContainer({
     required this.child,
+    required this.onTap,
     this.accessoryBuilder,
     Key? key,
   }) : super(key: key);
@@ -30,11 +32,14 @@ class BoardCardContainer extends StatelessWidget {
             }
           }
 
-          return Padding(
-            padding: const EdgeInsets.all(8),
-            child: ConstrainedBox(
-              constraints: const BoxConstraints(minHeight: 30),
-              child: container,
+          return GestureDetector(
+            onTap: () => onTap(context),
+            child: Padding(
+              padding: const EdgeInsets.all(8),
+              child: ConstrainedBox(
+                constraints: const BoxConstraints(minHeight: 30),
+                child: container,
+              ),
             ),
           );
         },
diff --git a/frontend/app_flowy/lib/plugins/grid/application/row/row_action_sheet_bloc.dart b/frontend/app_flowy/lib/plugins/grid/application/row/row_action_sheet_bloc.dart
index e586f65bd4..fa81e6cb23 100644
--- a/frontend/app_flowy/lib/plugins/grid/application/row/row_action_sheet_bloc.dart
+++ b/frontend/app_flowy/lib/plugins/grid/application/row/row_action_sheet_bloc.dart
@@ -17,19 +17,19 @@ class RowActionSheetBloc
   RowActionSheetBloc({required RowInfo rowInfo})
       : _rowService = RowFFIService(
           gridId: rowInfo.gridId,
-          blockId: rowInfo.blockId,
-          rowId: rowInfo.rowPB.id,
+          blockId: rowInfo.rowPB.blockId,
         ),
         super(RowActionSheetState.initial(rowInfo)) {
     on<RowActionSheetEvent>(
       (event, emit) async {
         await event.map(
           deleteRow: (_DeleteRow value) async {
-            final result = await _rowService.deleteRow();
+            final result = await _rowService.deleteRow(state.rowData.rowPB.id);
             logResult(result);
           },
           duplicateRow: (_DuplicateRow value) async {
-            final result = await _rowService.duplicateRow();
+            final result =
+                await _rowService.duplicateRow(state.rowData.rowPB.id);
             logResult(result);
           },
         );
diff --git a/frontend/app_flowy/lib/plugins/grid/application/row/row_bloc.dart b/frontend/app_flowy/lib/plugins/grid/application/row/row_bloc.dart
index 6716967e5e..bea25d8008 100644
--- a/frontend/app_flowy/lib/plugins/grid/application/row/row_bloc.dart
+++ b/frontend/app_flowy/lib/plugins/grid/application/row/row_bloc.dart
@@ -20,8 +20,7 @@ class RowBloc extends Bloc<RowEvent, RowState> {
     required GridRowDataController dataController,
   })  : _rowService = RowFFIService(
           gridId: rowInfo.gridId,
-          blockId: rowInfo.blockId,
-          rowId: rowInfo.rowPB.id,
+          blockId: rowInfo.rowPB.blockId,
         ),
         _dataController = dataController,
         super(RowState.initial(rowInfo, dataController.loadData())) {
@@ -32,7 +31,7 @@ class RowBloc extends Bloc<RowEvent, RowState> {
             await _startListening();
           },
           createRow: (_CreateRow value) {
-            _rowService.createRow();
+            _rowService.createRow(rowInfo.rowPB.id);
           },
           didReceiveCells: (_DidReceiveCells value) async {
             final cells = value.gridCellMap.values
diff --git a/frontend/app_flowy/lib/plugins/grid/application/row/row_cache.dart b/frontend/app_flowy/lib/plugins/grid/application/row/row_cache.dart
index 74e11e409e..68c8b6f519 100644
--- a/frontend/app_flowy/lib/plugins/grid/application/row/row_cache.dart
+++ b/frontend/app_flowy/lib/plugins/grid/application/row/row_cache.dart
@@ -255,7 +255,6 @@ class GridRowCache {
   RowInfo buildGridRow(RowPB rowPB) {
     return RowInfo(
       gridId: gridId,
-      blockId: block.id,
       fields: _fieldNotifier.fields,
       rowPB: rowPB,
     );
@@ -283,7 +282,6 @@ class _RowChangesetNotifier extends ChangeNotifier {
 class RowInfo with _$RowInfo {
   const factory RowInfo({
     required String gridId,
-    required String blockId,
     required UnmodifiableListView<FieldPB> fields,
     required RowPB rowPB,
   }) = _RowInfo;
diff --git a/frontend/app_flowy/lib/plugins/grid/application/row/row_service.dart b/frontend/app_flowy/lib/plugins/grid/application/row/row_service.dart
index e610734064..52af18b296 100644
--- a/frontend/app_flowy/lib/plugins/grid/application/row/row_service.dart
+++ b/frontend/app_flowy/lib/plugins/grid/application/row/row_service.dart
@@ -9,12 +9,13 @@ import 'package:flowy_sdk/protobuf/flowy-grid/setting_entities.pb.dart';
 class RowFFIService {
   final String gridId;
   final String blockId;
-  final String rowId;
 
-  RowFFIService(
-      {required this.gridId, required this.blockId, required this.rowId});
+  RowFFIService({
+    required this.gridId,
+    required this.blockId,
+  });
 
-  Future<Either<RowPB, FlowyError>> createRow() {
+  Future<Either<RowPB, FlowyError>> createRow(String rowId) {
     final payload = CreateTableRowPayloadPB.create()
       ..gridId = gridId
       ..startRowId = rowId;
@@ -43,7 +44,7 @@ class RowFFIService {
     return GridEventMoveRow(payload).send();
   }
 
-  Future<Either<OptionalRowPB, FlowyError>> getRow() {
+  Future<Either<OptionalRowPB, FlowyError>> getRow(String rowId) {
     final payload = RowIdPB.create()
       ..gridId = gridId
       ..blockId = blockId
@@ -52,7 +53,7 @@ class RowFFIService {
     return GridEventGetRow(payload).send();
   }
 
-  Future<Either<Unit, FlowyError>> deleteRow() {
+  Future<Either<Unit, FlowyError>> deleteRow(String rowId) {
     final payload = RowIdPB.create()
       ..gridId = gridId
       ..blockId = blockId
@@ -61,7 +62,7 @@ class RowFFIService {
     return GridEventDeleteRow(payload).send();
   }
 
-  Future<Either<Unit, FlowyError>> duplicateRow() {
+  Future<Either<Unit, FlowyError>> duplicateRow(String rowId) {
     final payload = RowIdPB.create()
       ..gridId = gridId
       ..blockId = blockId
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/grid_page.dart b/frontend/app_flowy/lib/plugins/grid/presentation/grid_page.dart
index fe9b245567..2c6c1e2180 100755
--- a/frontend/app_flowy/lib/plugins/grid/presentation/grid_page.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/grid_page.dart
@@ -239,8 +239,10 @@ class _GridRowsState extends State<_GridRows> {
     RowInfo rowInfo,
     Animation<double> animation,
   ) {
-    final rowCache =
-        context.read<GridBloc>().getRowCache(rowInfo.blockId, rowInfo.rowPB.id);
+    final rowCache = context.read<GridBloc>().getRowCache(
+          rowInfo.rowPB.blockId,
+          rowInfo.rowPB.id,
+        );
 
     /// Return placeholder widget if the rowCache is null.
     if (rowCache == null) return const SizedBox();