diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/change_cover_popover.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/change_cover_popover.dart
index 98049365f6..947a8de00e 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/change_cover_popover.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/change_cover_popover.dart
@@ -499,27 +499,25 @@ class _CoverColorPickerState extends State<CoverColorPicker> {
       child: Padding(
         padding: const EdgeInsets.only(right: 10.0),
         child: SizedBox.square(
-          dimension: 25,
+          dimension: isChecked ? 24 : 25,
           child: Container(
             decoration: BoxDecoration(
-              color: isChecked
-                  ? Colors.transparent
-                  : Color(int.tryParse(option.colorHex) ?? 0xFFFFFFFF),
+              color: option.colorHex.toColor(),
               border: isChecked
                   ? Border.all(
-                      color: Color(int.tryParse(option.colorHex) ?? 0xFFFFFF),
+                      color: const Color(0xFFFFFFFF),
+                      width: 2.0,
                     )
                   : null,
               shape: BoxShape.circle,
             ),
             child: isChecked
                 ? SizedBox.square(
-                    dimension: 25,
+                    dimension: 24,
                     child: Container(
                       margin: const EdgeInsets.all(4),
                       decoration: BoxDecoration(
-                        color:
-                            Color(int.tryParse(option.colorHex) ?? 0xFFFFFFFF),
+                        color: option.colorHex.toColor(),
                         shape: BoxShape.circle,
                       ),
                     ),