diff --git a/frontend/appflowy_flutter/lib/workspace/application/settings/appearance/desktop_appearance.dart b/frontend/appflowy_flutter/lib/workspace/application/settings/appearance/desktop_appearance.dart
index f49f855957..6996432fc7 100644
--- a/frontend/appflowy_flutter/lib/workspace/application/settings/appearance/desktop_appearance.dart
+++ b/frontend/appflowy_flutter/lib/workspace/application/settings/appearance/desktop_appearance.dart
@@ -51,6 +51,7 @@ class DesktopAppearance extends BaseAppearance {
 
     // Due to Desktop version has multiple themes, it relies on the current theme to build the ThemeData
     return ThemeData(
+      useMaterial3: false,
       brightness: brightness,
       dialogBackgroundColor: theme.surface,
       textTheme: getTextTheme(
diff --git a/frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart b/frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart
index 62da7e0507..bfb93a81e4 100644
--- a/frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart
+++ b/frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart
@@ -84,6 +84,7 @@ class MobileAppearance extends BaseAppearance {
 
     return ThemeData(
       // color
+      useMaterial3: false,
       primaryColor: colorTheme.primary, //primary 100
       primaryColorLight: const Color(0xFF57B5F8), //primary 80
       dividerColor: colorTheme.outline, //caption