diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/emoji_picker_button.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/emoji_picker_button.dart
index 2223caa074..e372d7a9e9 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/emoji_picker_button.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/emoji_picker_button.dart
@@ -21,6 +21,7 @@ class EmojiPickerButton extends StatelessWidget {
     this.showBorder = true,
     this.enable = true,
     this.margin,
+    this.buttonSize,
   });
 
   final String emoji;
@@ -35,53 +36,129 @@ class EmojiPickerButton extends StatelessWidget {
   final bool showBorder;
   final bool enable;
   final EdgeInsets? margin;
+  final Size? buttonSize;
 
   @override
   Widget build(BuildContext context) {
     if (UniversalPlatform.isDesktopOrWeb) {
-      return AppFlowyPopover(
-        controller: popoverController,
-        constraints: BoxConstraints.expand(
-          width: emojiPickerSize.width,
-          height: emojiPickerSize.height,
-        ),
+      return _DesktopEmojiPickerButton(
+        emoji: emoji,
+        onSubmitted: onSubmitted,
+        emojiPickerSize: emojiPickerSize,
+        emojiSize: emojiSize,
+        defaultIcon: defaultIcon,
         offset: offset,
-        margin: EdgeInsets.zero,
-        direction: direction ?? PopoverDirection.rightWithTopAligned,
-        popupBuilder: (_) => Container(
-          width: emojiPickerSize.width,
-          height: emojiPickerSize.height,
-          padding: const EdgeInsets.all(4.0),
-          child: EmojiSelectionMenu(
-            onSubmitted: (emoji) => onSubmitted(emoji, popoverController),
-            onExit: () {},
-          ),
-        ),
-        child: Container(
-          width: 30.0,
-          height: 30.0,
-          decoration: BoxDecoration(
-            borderRadius: BorderRadius.circular(8),
-            border: showBorder
-                ? Border.all(
-                    color: Theme.of(context).dividerColor,
-                  )
-                : null,
-          ),
-          child: FlowyButton(
-            margin: emoji.isEmpty && defaultIcon != null
-                ? EdgeInsets.zero
-                : const EdgeInsets.only(left: 2.0),
-            expandText: false,
-            text: emoji.isEmpty && defaultIcon != null
-                ? defaultIcon!
-                : FlowyText.emoji(emoji, fontSize: emojiSize),
-            onTap: enable ? popoverController.show : null,
-          ),
-        ),
+        direction: direction,
+        title: title,
+        showBorder: showBorder,
+        enable: enable,
+        buttonSize: buttonSize,
       );
     }
 
+    return _MobileEmojiPickerButton(
+      emoji: emoji,
+      onSubmitted: onSubmitted,
+      emojiSize: emojiSize,
+      enable: enable,
+      title: title,
+      margin: margin,
+    );
+  }
+}
+
+class _DesktopEmojiPickerButton extends StatelessWidget {
+  _DesktopEmojiPickerButton({
+    required this.emoji,
+    required this.onSubmitted,
+    this.emojiPickerSize = const Size(360, 380),
+    this.emojiSize = 18.0,
+    this.defaultIcon,
+    this.offset,
+    this.direction,
+    this.title,
+    this.showBorder = true,
+    this.enable = true,
+    this.buttonSize,
+  });
+
+  final String emoji;
+  final double emojiSize;
+  final Size emojiPickerSize;
+  final void Function(String emoji, PopoverController? controller) onSubmitted;
+  final PopoverController popoverController = PopoverController();
+  final Widget? defaultIcon;
+  final Offset? offset;
+  final PopoverDirection? direction;
+  final String? title;
+  final bool showBorder;
+  final bool enable;
+  final Size? buttonSize;
+  @override
+  Widget build(BuildContext context) {
+    return AppFlowyPopover(
+      controller: popoverController,
+      constraints: BoxConstraints.expand(
+        width: emojiPickerSize.width,
+        height: emojiPickerSize.height,
+      ),
+      offset: offset,
+      margin: EdgeInsets.zero,
+      direction: direction ?? PopoverDirection.rightWithTopAligned,
+      popupBuilder: (_) => Container(
+        width: emojiPickerSize.width,
+        height: emojiPickerSize.height,
+        padding: const EdgeInsets.all(4.0),
+        child: EmojiSelectionMenu(
+          onSubmitted: (emoji) => onSubmitted(emoji, popoverController),
+          onExit: () {},
+        ),
+      ),
+      child: Container(
+        width: buttonSize?.width ?? 30.0,
+        height: buttonSize?.height ?? 30.0,
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(8),
+          border: showBorder
+              ? Border.all(
+                  color: Theme.of(context).dividerColor,
+                )
+              : null,
+        ),
+        child: FlowyButton(
+          margin: emoji.isEmpty && defaultIcon != null
+              ? EdgeInsets.zero
+              : const EdgeInsets.only(left: 2.0),
+          expandText: false,
+          text: emoji.isEmpty && defaultIcon != null
+              ? defaultIcon!
+              : FlowyText.emoji(emoji, fontSize: emojiSize),
+          onTap: enable ? popoverController.show : null,
+        ),
+      ),
+    );
+  }
+}
+
+class _MobileEmojiPickerButton extends StatelessWidget {
+  const _MobileEmojiPickerButton({
+    required this.emoji,
+    required this.onSubmitted,
+    this.emojiSize = 18.0,
+    this.enable = true,
+    this.title,
+    this.margin,
+  });
+
+  final String emoji;
+  final double emojiSize;
+  final void Function(String emoji, PopoverController? controller) onSubmitted;
+  final String? title;
+  final bool enable;
+  final EdgeInsets? margin;
+
+  @override
+  Widget build(BuildContext context) {
     return FlowyButton(
       useIntrinsicWidth: true,
       margin:
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 66442b25cc..598d2d0d3a 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
@@ -173,6 +173,7 @@ class _CalloutBlockComponentWidgetState
     final textDirection = calculateTextDirection(
       layoutDirection: Directionality.maybeOf(context),
     );
+    final (emojiSize, emojiButtonSize) = calculateEmojiSize();
 
     Widget child = Container(
       decoration: BoxDecoration(
@@ -190,14 +191,14 @@ class _CalloutBlockComponentWidgetState
           if (UniversalPlatform.isDesktopOrWeb) const HSpace(4.0),
           // the emoji picker button for the note
           EmojiPickerButton(
-            key: ValueKey(
-              emoji.toString(),
-            ), // force to refresh the popover state
+            // force to refresh the popover state
+            key: ValueKey(widget.node.id + emoji),
             enable: editorState.editable,
             title: '',
             emoji: emoji,
-            emojiSize: 15.0,
+            emojiSize: emojiSize,
             showBorder: false,
+            buttonSize: emojiButtonSize,
             onSubmitted: (emoji, controller) {
               setEmoji(emoji);
               controller?.close();
@@ -277,4 +278,15 @@ class _CalloutBlockComponentWidgetState
       );
     await editorState.apply(transaction);
   }
+
+  (double, Size) calculateEmojiSize() {
+    const double defaultEmojiSize = 16.0;
+    const Size defaultEmojiButtonSize = Size(30.0, 30.0);
+    final double emojiSize =
+        editorState.editorStyle.textStyleConfiguration.text.fontSize ??
+            defaultEmojiSize;
+    final emojiButtonSize =
+        defaultEmojiButtonSize * emojiSize / defaultEmojiSize;
+    return (emojiSize, emojiButtonSize);
+  }
 }