diff --git a/frontend/app_flowy/assets/translations/en.json b/frontend/app_flowy/assets/translations/en.json
index 5c66f4c0a3..0b461e321c 100644
--- a/frontend/app_flowy/assets/translations/en.json
+++ b/frontend/app_flowy/assets/translations/en.json
@@ -90,7 +90,7 @@
     "inlineCode": "Inline Code",
     "quote": "Quote Block"
   },
-  "tooltip":{
+  "tooltip": {
     "lightMode": "Switch to Light mode",
     "darkMode": "Switch to Dark mode"
   },
@@ -127,5 +127,16 @@
       "instruction3": "Navigate to the following link in your web browser, and enter the above code:",
       "instruction4": "Press the button below when you've completed signup:"
     }
+  },
+  "settings": {
+    "title": "Settings",
+    "menu": {
+      "appearance": "Appearance",
+      "language": "Language"
+    },
+    "appearance": {
+      "lightLabel": "Light Mode",
+      "darkLabel": "Dark Mode"
+    }
   }
 }
\ No newline at end of file
diff --git a/frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart b/frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart
index ef00dfd46d..486825bc9e 100644
--- a/frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart
@@ -2,6 +2,8 @@ import 'package:app_flowy/workspace/presentation/settings/widgets/settings_appea
 import 'package:app_flowy/workspace/presentation/settings/widgets/settings_language_view.dart';
 import 'package:app_flowy/workspace/presentation/settings/widgets/settings_menu.dart';
 import 'package:flutter/material.dart';
+import 'package:app_flowy/generated/locale_keys.g.dart';
+import 'package:easy_localization/easy_localization.dart';
 
 class SettingsDialog extends StatefulWidget {
   const SettingsDialog({Key? key}) : super(key: key);
@@ -24,9 +26,9 @@ class _SettingsDialogState extends State<SettingsDialog> {
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(10),
       ),
-      title: const Text(
-        'Settings',
-        style: TextStyle(
+      title: Text(
+        LocaleKeys.settings_title.tr(),
+        style: const TextStyle(
           fontWeight: FontWeight.bold,
         ),
       ),
diff --git a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
index 139451fe47..fcc5847d43 100644
--- a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
@@ -2,6 +2,8 @@ import 'package:app_flowy/workspace/presentation/theme/theme_model.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:app_flowy/generated/locale_keys.g.dart';
+import 'package:easy_localization/easy_localization.dart';
 
 class SettingsAppearanceView extends StatelessWidget {
   const SettingsAppearanceView({Key? key}) : super(key: key);
@@ -19,9 +21,9 @@ class SettingsAppearanceView extends StatelessWidget {
           ),
           Row(
             children: [
-              const Text(
-                'Light Mode',
-                style: TextStyle(
+              Text(
+                LocaleKeys.settings_appearance_lightLabel.tr(),
+                style: const TextStyle(
                   fontSize: 14,
                   fontWeight: FontWeight.w500,
                 ),
@@ -32,9 +34,9 @@ class SettingsAppearanceView extends StatelessWidget {
                   context.read<ThemeModel>().swapTheme();
                 },
               ),
-              const Text(
-                'Dark Mode',
-                style: TextStyle(
+              Text(
+                LocaleKeys.settings_appearance_darkLabel.tr(),
+                style: const TextStyle(
                   fontSize: 14,
                   fontWeight: FontWeight.w500,
                 ),
diff --git a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_menu.dart b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_menu.dart
index 22b049a4f5..3d616cb86e 100644
--- a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_menu.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_menu.dart
@@ -1,5 +1,7 @@
 import 'package:app_flowy/workspace/presentation/settings/widgets/settings_menu_element.dart';
 import 'package:flutter/material.dart';
+import 'package:app_flowy/generated/locale_keys.g.dart';
+import 'package:easy_localization/easy_localization.dart';
 
 class SettingsMenu extends StatelessWidget {
   const SettingsMenu({
@@ -18,7 +20,7 @@ class SettingsMenu extends StatelessWidget {
         SettingsMenuElement(
           index: 0,
           currentIndex: currentIndex,
-          label: 'Appearance',
+          label: LocaleKeys.settings_menu_appearance.tr(),
           icon: Icons.brightness_4,
           changeSelectedIndex: changeSelectedIndex,
         ),
@@ -28,7 +30,7 @@ class SettingsMenu extends StatelessWidget {
         SettingsMenuElement(
           index: 1,
           currentIndex: currentIndex,
-          label: 'Language',
+          label: LocaleKeys.settings_menu_language.tr(),
           icon: Icons.translate,
           changeSelectedIndex: changeSelectedIndex,
         ),