diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/table/table_menu.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/table/table_menu.dart
index 5aa42f9bcc0c..40f43e4eba50 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/table/table_menu.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/table/table_menu.dart
@@ -12,6 +12,7 @@ const tableActions = <TableOptionAction>[
   TableOptionAction.delete,
   TableOptionAction.duplicate,
   TableOptionAction.clear,
+  TableOptionAction.bgColor,
 ];
 
 class TableMenu extends StatelessWidget {
@@ -34,13 +35,25 @@ class TableMenu extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final actions = tableActions.map((action) {
+      switch (action) {
+        case TableOptionAction.bgColor:
+          return TableColorOptionAction(
+            node: node,
+            editorState: editorState,
+            position: position,
+            dir: dir,
+          );
+        default:
+          return TableOptionActionWrapper(action);
+      }
+    }).toList();
+
     return PopoverActionList<PopoverAction>(
       direction: dir == TableDirection.col
           ? PopoverDirection.bottomWithCenterAligned
           : PopoverDirection.rightWithTopAligned,
-      actions: tableActions
-          .map((action) => TableOptionActionWrapper(action))
-          .toList(),
+      actions: actions,
       onPopupBuilder: onBuild,
       onClosed: onClose,
       onSelected: (action, controller) {
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/table/table_option_action.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/table/table_option_action.dart
index 3cd420881987..3b2f3820fc51 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/table/table_option_action.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/table/table_option_action.dart
@@ -1,21 +1,16 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/extensions/flowy_tint_extension.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_popover/appflowy_popover.dart';
+import 'package:collection/collection.dart';
+import 'package:flowy_infra/theme_extension.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flowy_infra_ui/style_widget/extension.dart';
 import 'package:flutter/material.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
 
-class TableOptionActionWrapper extends ActionCell {
-  TableOptionActionWrapper(this.inner);
-
-  final TableOptionAction inner;
-
-  @override
-  Widget? leftIcon(Color iconColor) => inner.icon(iconColor);
-
-  @override
-  String get name => inner.description;
-}
-
 enum TableOptionAction {
   addAfter,
   addBefore,
@@ -39,7 +34,10 @@ enum TableOptionAction {
       case TableOptionAction.clear:
         return Icon(Icons.clear, color: color, size: 16.0);
       case TableOptionAction.bgColor:
-        return FlowySvg(const FlowySvgData('editor/color'), color: color);
+        return const FlowySvg(
+          FlowySvgs.color_format_m,
+          size: Size.square(12),
+        ).padding(all: 2.0);
     }
   }
 
@@ -60,3 +58,97 @@ enum TableOptionAction {
     }
   }
 }
+
+class TableOptionActionWrapper extends ActionCell {
+  TableOptionActionWrapper(this.inner);
+
+  final TableOptionAction inner;
+
+  @override
+  Widget? leftIcon(Color iconColor) => inner.icon(iconColor);
+
+  @override
+  String get name => inner.description;
+}
+
+class TableColorOptionAction extends PopoverActionCell {
+  TableColorOptionAction({
+    required this.node,
+    required this.editorState,
+    required this.position,
+    required this.dir,
+  });
+
+  final Node node;
+  final EditorState editorState;
+  final int position;
+  final TableDirection dir;
+
+  @override
+  Widget? leftIcon(Color iconColor) =>
+      TableOptionAction.bgColor.icon(iconColor);
+
+  @override
+  String get name => TableOptionAction.bgColor.description;
+
+  @override
+  Widget Function(
+    BuildContext context,
+    PopoverController parentController,
+    PopoverController controller,
+  ) get builder => (context, parentController, controller) {
+        int row = 0, col = position;
+        if (dir == TableDirection.row) {
+          col = 0;
+          row = position;
+        }
+
+        final cell = node.children.firstWhereOrNull(
+          (n) =>
+              n.attributes[TableBlockKeys.colPosition] == col &&
+              n.attributes[TableBlockKeys.rowPosition] == row,
+        );
+        final bgColor =
+            cell?.attributes[TableBlockKeys.backgroundColor] as String?;
+        final selectedColor = bgColor?.toColor();
+        // get default background color from themeExtension
+        final defaultColor = AFThemeExtension.of(context).calloutBGColor;
+        final colors = [
+          // reset to default background color
+          FlowyColorOption(
+            color: defaultColor,
+            name: LocaleKeys.document_plugins_optionAction_defaultColor.tr(),
+          ),
+          ...FlowyTint.values.map(
+            (e) => FlowyColorOption(
+              color: e.color(context),
+              name: e.tintName(AppFlowyEditorLocalizations.current),
+            ),
+          ),
+        ];
+
+        return FlowyColorPicker(
+          colors: colors,
+          selected: selectedColor,
+          border: Border.all(
+            color: Theme.of(context).colorScheme.onBackground,
+            width: 1,
+          ),
+          onTap: (color, index) async {
+            final transaction = editorState.transaction;
+            final backgroundColor = color.toHex();
+            TableActions.setBgColor(
+              node,
+              position,
+              transaction,
+              backgroundColor,
+              dir,
+            );
+            await editorState.apply(transaction);
+
+            controller.close();
+            parentController.close();
+          },
+        );
+      };
+}