diff --git a/frontend/app_flowy/lib/plugins/document/editor_styles.dart b/frontend/app_flowy/lib/plugins/document/editor_styles.dart
index 9ff3aca30d..1e3422aaf1 100644
--- a/frontend/app_flowy/lib/plugins/document/editor_styles.dart
+++ b/frontend/app_flowy/lib/plugins/document/editor_styles.dart
@@ -4,8 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
 EditorStyle customEditorTheme(BuildContext context) {
-  final documentStyle =
-      context.watch<DocumentAppearanceCubit>().documentAppearance;
+  final documentStyle = context.watch<DocumentAppearanceCubit>().state;
   var editorStyle = Theme.of(context).brightness == Brightness.dark
       ? EditorStyle.dark
       : EditorStyle.light;
@@ -29,8 +28,7 @@ EditorStyle customEditorTheme(BuildContext context) {
 }
 
 Iterable<ThemeExtension<dynamic>> customPluginTheme(BuildContext context) {
-  final documentStyle =
-      context.watch<DocumentAppearanceCubit>().documentAppearance;
+  final documentStyle = context.watch<DocumentAppearanceCubit>().state;
   final baseFontSize = documentStyle.fontSize;
   const basePadding = 12.0;
   var headingPluginStyle = Theme.of(context).brightness == Brightness.dark
diff --git a/frontend/app_flowy/lib/plugins/document/presentation/more/cubit/document_appearance_cubit.dart b/frontend/app_flowy/lib/plugins/document/presentation/more/cubit/document_appearance_cubit.dart
index 61d50673f1..fcab0eacd0 100644
--- a/frontend/app_flowy/lib/plugins/document/presentation/more/cubit/document_appearance_cubit.dart
+++ b/frontend/app_flowy/lib/plugins/document/presentation/more/cubit/document_appearance_cubit.dart
@@ -22,19 +22,19 @@ class DocumentAppearance {
 class DocumentAppearanceCubit extends Cubit<DocumentAppearance> {
   DocumentAppearanceCubit() : super(const DocumentAppearance(fontSize: 14.0));
 
-  late DocumentAppearance documentAppearance;
-
   void fetch() async {
     final prefs = await SharedPreferences.getInstance();
     final fontSize = prefs.getDouble(_kDocumentAppearenceFontSize) ?? 14.0;
-    documentAppearance = DocumentAppearance(fontSize: fontSize);
-    emit(documentAppearance);
+    emit(state.copyWith(
+      fontSize: fontSize,
+    ));
   }
 
-  void sync(DocumentAppearance documentAppearance) async {
+  void syncFontSize(double fontSize) async {
     final prefs = await SharedPreferences.getInstance();
-    prefs.setDouble(_kDocumentAppearenceFontSize, documentAppearance.fontSize);
-    this.documentAppearance = documentAppearance;
-    emit(documentAppearance);
+    prefs.setDouble(_kDocumentAppearenceFontSize, fontSize);
+    emit(state.copyWith(
+      fontSize: fontSize,
+    ));
   }
 }
diff --git a/frontend/app_flowy/lib/plugins/document/presentation/more/font_size_switcher.dart b/frontend/app_flowy/lib/plugins/document/presentation/more/font_size_switcher.dart
index b07dcfe5ed..7e716a87a8 100644
--- a/frontend/app_flowy/lib/plugins/document/presentation/more/font_size_switcher.dart
+++ b/frontend/app_flowy/lib/plugins/document/presentation/more/font_size_switcher.dart
@@ -2,7 +2,7 @@ import 'package:app_flowy/plugins/document/presentation/more/cubit/document_appe
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
-import 'package:provider/provider.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:tuple/tuple.dart';
 import 'package:easy_localization/easy_localization.dart';
 
@@ -16,74 +16,54 @@ class FontSizeSwitcher extends StatefulWidget {
 }
 
 class _FontSizeSwitcherState extends State<FontSizeSwitcher> {
-  final List<bool> _selectedFontSizes = [false, true, false];
-  final List<Tuple2<String, double>> _fontSizes = [
-    Tuple2(LocaleKeys.moreAction_small.tr(), 12.0),
-    Tuple2(LocaleKeys.moreAction_medium.tr(), 14.0),
-    Tuple2(LocaleKeys.moreAction_large.tr(), 18.0),
+  final List<Tuple3<String, double, bool>> _fontSizes = [
+    Tuple3(LocaleKeys.moreAction_small.tr(), 12.0, false),
+    Tuple3(LocaleKeys.moreAction_medium.tr(), 14.0, true),
+    Tuple3(LocaleKeys.moreAction_large.tr(), 18.0, false),
   ];
 
-  @override
-  void initState() {
-    super.initState();
-
-    final fontSize =
-        context.read<DocumentAppearanceCubit>().documentAppearance.fontSize;
-    final index = _fontSizes.indexWhere((element) => element.item2 == fontSize);
-    _updateSelectedFontSize(index);
-  }
-
   @override
   Widget build(BuildContext context) {
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        FlowyText.semibold(
-          LocaleKeys.moreAction_fontSize.tr(),
-          fontSize: 12,
-        ),
-        const SizedBox(
-          height: 5,
-        ),
-        ToggleButtons(
-          isSelected: _selectedFontSizes,
-          onPressed: (int index) {
-            _updateSelectedFontSize(index);
-            _sync(index);
-          },
-          borderRadius: const BorderRadius.all(Radius.circular(5)),
-          selectedBorderColor: Theme.of(context).colorScheme.primaryContainer,
-          selectedColor: Theme.of(context).colorScheme.onSurface,
-          fillColor: Theme.of(context).colorScheme.primaryContainer,
-          color: Theme.of(context).hintColor,
-          constraints: const BoxConstraints(
-            minHeight: 40.0,
-            minWidth: 80.0,
+    return BlocBuilder<DocumentAppearanceCubit, DocumentAppearance>(
+        builder: (context, state) {
+      return Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          FlowyText.semibold(
+            LocaleKeys.moreAction_fontSize.tr(),
+            fontSize: 12,
           ),
-          children: _fontSizes
-              .map((e) => Text(
-                    e.item1,
-                    style: TextStyle(fontSize: e.item2),
-                  ))
-              .toList(),
-        ),
-      ],
-    );
-  }
-
-  void _updateSelectedFontSize(int index) {
-    setState(() {
-      for (int i = 0; i < _selectedFontSizes.length; i++) {
-        _selectedFontSizes[i] = i == index;
-      }
+          const SizedBox(
+            height: 5,
+          ),
+          ToggleButtons(
+            isSelected:
+                _fontSizes.map((e) => e.item2 == state.fontSize).toList(),
+            onPressed: (int index) {
+              _updateSelectedFontSize(_fontSizes[index].item2);
+            },
+            borderRadius: const BorderRadius.all(Radius.circular(5)),
+            selectedBorderColor: Theme.of(context).colorScheme.primaryContainer,
+            selectedColor: Theme.of(context).colorScheme.onSurface,
+            fillColor: Theme.of(context).colorScheme.primaryContainer,
+            color: Theme.of(context).hintColor,
+            constraints: const BoxConstraints(
+              minHeight: 40.0,
+              minWidth: 80.0,
+            ),
+            children: _fontSizes
+                .map((e) => Text(
+                      e.item1,
+                      style: TextStyle(fontSize: e.item2),
+                    ))
+                .toList(),
+          ),
+        ],
+      );
     });
   }
 
-  void _sync(int index) {
-    if (index < 0 || index >= _fontSizes.length) return;
-    final fontSize = _fontSizes[index].item2;
-    final cubit = context.read<DocumentAppearanceCubit>();
-    final documentAppearance = cubit.documentAppearance;
-    cubit.sync(documentAppearance.copyWith(fontSize: fontSize));
+  void _updateSelectedFontSize(double fontSize) {
+    context.read<DocumentAppearanceCubit>().syncFontSize(fontSize);
   }
 }