diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_configuration.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_configuration.dart
index d5e44301ad..20049236ef 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_configuration.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_configuration.dart
@@ -700,7 +700,14 @@ TableBlockComponentBuilder _buildTableBlockComponentBuilder(
   BlockComponentConfiguration configuration,
 ) {
   return TableBlockComponentBuilder(
-    menuBuilder: (node, editorState, position, dir, onBuild, onClose) =>
+    menuBuilder: (
+      node,
+      editorState,
+      position,
+      dir,
+      onBuild,
+      onClose,
+    ) =>
         TableMenu(
       node: node,
       editorState: editorState,
@@ -727,7 +734,14 @@ TableCellBlockComponentBuilder _buildTableCellBlockComponentBuilder(
       }
       return buildEditorCustomizedColor(context, node, colorString);
     },
-    menuBuilder: (node, editorState, position, dir, onBuild, onClose) =>
+    menuBuilder: (
+      node,
+      editorState,
+      position,
+      dir,
+      onBuild,
+      onClose,
+    ) =>
         TableMenu(
       node: node,
       editorState: editorState,
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
index 9d1119ecf1..7d9d2eb790 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
@@ -154,7 +154,10 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage>
     ]);
 
     indentableBlockTypes.add(ToggleListBlockKeys.type);
-    convertibleBlockTypes.add(ToggleListBlockKeys.type);
+    convertibleBlockTypes.addAll([
+      ToggleListBlockKeys.type,
+      CalloutBlockKeys.type,
+    ]);
 
     effectiveScrollController = widget.scrollController ?? ScrollController();
     // disable the color parse in the HTML decoder.
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart
index c81c2f3be6..1d9f70254f 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart
@@ -210,6 +210,9 @@ class _CalloutBlockComponentWidgetState
             key: ValueKey(widget.node.id + emoji.emoji),
             enable: editorState.editable,
             title: '',
+            margin: UniversalPlatform.isMobile
+                ? const EdgeInsets.symmetric(vertical: 2.0, horizontal: 10.0)
+                : EdgeInsets.zero,
             emoji: emoji,
             emojiSize: emojiSize,
             showBorder: false,