diff --git a/.github/workflows/gh-pages.yaml b/.github/workflows/gh-pages.yaml
index b38fbb6e86..4a1ae926d5 100644
--- a/.github/workflows/gh-pages.yaml
+++ b/.github/workflows/gh-pages.yaml
@@ -57,7 +57,7 @@ jobs:
           flutter clean
           flutter pub get
           flutter pub run build_runner build --delete-conflicting-outputs
-          flutter pub get
+          flutter pub get # In flutter 3.22, flutter gen-l10n is not working properly, so we need to run flutter pub get again
           flutter build web --release --verbose --source-maps --base-href="/${GITHUB_REPOSITORY##*/}/$FOLDER/"
           echo "$TWAKE_PREVIEW_CONFIG" | yq '.issue_id = strenv(FOLDER)' > ./build/web/config.json
 
diff --git a/.github/workflows/tests.yaml b/.github/workflows/tests.yaml
index a6d82f2e22..208c1a5eb3 100644
--- a/.github/workflows/tests.yaml
+++ b/.github/workflows/tests.yaml
@@ -57,7 +57,7 @@ jobs:
       - name: Run widget test
         run: |
           flutter pub get && flutter pub run build_runner build --delete-conflicting-outputs
-          flutter pub get
+          flutter pub get # In flutter 3.22, flutter gen-l10n is not working properly, so we need to run flutter pub get again
           flutter test
 
   # integration_test:
diff --git a/devtools_options.yaml b/devtools_options.yaml
deleted file mode 100644
index 7e7e7f67de..0000000000
--- a/devtools_options.yaml
+++ /dev/null
@@ -1 +0,0 @@
-extensions:
diff --git a/docs/adr/0023-upgrade-flutter-3.22.md b/docs/adr/0023-upgrade-flutter-3.22.md
index 62d2e2683e..04fab93dc6 100644
--- a/docs/adr/0023-upgrade-flutter-3.22.md
+++ b/docs/adr/0023-upgrade-flutter-3.22.md
@@ -1,4 +1,4 @@
-# 21. Listen to presence status
+# 23. Upgrade flutter 3.22
 
 Date: 2024-05-24
 
@@ -12,7 +12,7 @@ We need to upgrade the flutter to have up-to-date performance and features
 
 ## Decision
 
-- remove `background` and `onBackground` color, now use only `surface` and `onSurface`
+- Add `ignore_deprecated` and `TODO` for `background` and `onBackground` color, when `surface` and `background` merge to one, we will change
 - change name from `surfaceVariant` => `surfaceContainerHighest`, `MaterialStateProperty` => `WidgetStateProperty`, `MaterialState` => `WidgetState`, use `super.key` for shorter form (new lint rule)
 - Migration from `RawKeyEvent` to `KeyEvent`. [Read more](https://docs.flutter.dev/release/breaking-changes/key-event-migration#deprecated-apis-that-have-an-equivalent) (in conclusion, add ignore_deprecated, because that when i test it again, the up/down not work)
 - Upgrade flutter_local_notification from `requestPermission` => `requestNotificationsPermission` [Changelog](https://pub.dev/packages/flutter_local_notifications/changelog#16001), [Readmore](https://developer.android.com/develop/ui/views/notifications/notification-permission?hl=vi)
diff --git a/lib/config/themes.dart b/lib/config/themes.dart
index 29869f5c75..d474774b73 100644
--- a/lib/config/themes.dart
+++ b/lib/config/themes.dart
@@ -199,6 +199,16 @@ abstract class TwakeThemes {
           onSecondaryContainer: brightness == Brightness.light
               ? LinagoraSysColors.material().onSecondaryContainer
               : LinagoraSysColors.material().onSecondaryContainerDark,
+          // TODO: remove when the color scheme is updated
+          // ignore: deprecated_member_use
+          background: brightness == Brightness.light
+              ? LinagoraSysColors.material().background
+              : LinagoraSysColors.material().backgroundDark,
+          // TODO: remove when the color scheme is updated
+          // ignore: deprecated_member_use
+          onBackground: brightness == Brightness.light
+              ? LinagoraSysColors.material().onBackground
+              : LinagoraSysColors.material().onBackgroundDark,
           error: brightness == Brightness.light
               ? LinagoraSysColors.material().error
               : LinagoraSysColors.material().errorDark,
diff --git a/lib/pages/chat/chat_input_row.dart b/lib/pages/chat/chat_input_row.dart
index e6a3bf23d2..8f03eb7690 100644
--- a/lib/pages/chat/chat_input_row.dart
+++ b/lib/pages/chat/chat_input_row.dart
@@ -53,7 +53,7 @@ class ChatInputRow extends StatelessWidget {
                 Container(
                   height: ChatInputRowStyle.chatInputRowHeight,
                   alignment: Alignment.center,
-                  child: _ChatAccountPicker(controller),
+                  child: ChatAccountPicker(controller),
                 ),
               Expanded(
                 child:
@@ -206,10 +206,10 @@ class ActionSelectModeWidget extends StatelessWidget {
   }
 }
 
-class _ChatAccountPicker extends StatelessWidget {
+class ChatAccountPicker extends StatelessWidget {
   final ChatController controller;
 
-  const _ChatAccountPicker(this.controller);
+  const ChatAccountPicker(this.controller, {super.key});
 
   void _popupMenuButtonSelected(String mxid) {
     final client = controller.matrix!.currentBundle!
diff --git a/lib/pages/chat/chat_invitation_body.dart b/lib/pages/chat/chat_invitation_body.dart
index b147c08064..009a4fb67e 100644
--- a/lib/pages/chat/chat_invitation_body.dart
+++ b/lib/pages/chat/chat_invitation_body.dart
@@ -47,7 +47,9 @@ class ChatInvitationBody extends StatelessWidget with MessageContentMixin {
         child: Container(
           width: ChatInvitationBodyStyle.dialogWidth,
           decoration: BoxDecoration(
-            color: Theme.of(context).colorScheme.surface,
+            // TODO: change to colorSurface when its approved
+            // ignore: deprecated_member_use
+            color: Theme.of(context).colorScheme.background,
             borderRadius: BorderRadius.circular(
               ChatInvitationBodyStyle.dialogBorderRadius,
             ),
diff --git a/lib/pages/chat/chat_view_style.dart b/lib/pages/chat/chat_view_style.dart
index 6880e0fe43..cb06aa864d 100644
--- a/lib/pages/chat/chat_view_style.dart
+++ b/lib/pages/chat/chat_view_style.dart
@@ -38,7 +38,9 @@ class ChatViewStyle {
   }) =>
       active
           ? Theme.of(context).colorScheme.primary
-          : Theme.of(context).colorScheme.onSurface;
+          // TODO: change to colorSurface when its approved
+          // ignore: deprecated_member_use
+          : Theme.of(context).colorScheme.onBackground;
 
   static const paddingBottomContextMenu = 16.0;
 }
diff --git a/lib/pages/chat/events/cute_events.dart b/lib/pages/chat/events/cute_events.dart
index 7ef1a9bbf3..3a93f978db 100644
--- a/lib/pages/chat/events/cute_events.dart
+++ b/lib/pages/chat/events/cute_events.dart
@@ -141,8 +141,8 @@ class _CuteEventOverlayState extends State<CuteEventOverlay>
       animation: controller!,
       builder: (context, _) => LayoutBuilder(
         builder: (context, constraints) {
-          final width = constraints.maxWidth - _CuteOverlayContent.size;
-          final height = constraints.maxHeight + _CuteOverlayContent.size;
+          final width = constraints.maxWidth - CuteOverlayContent.size;
+          final height = constraints.maxHeight + CuteOverlayContent.size;
           return SizedBox(
             height: constraints.maxHeight,
             width: constraints.maxWidth,
@@ -157,8 +157,8 @@ class _CuteEventOverlayState extends State<CuteEventOverlay>
                               .25 *
                               position.height *
                               (controller?.value ?? 0)) -
-                          _CuteOverlayContent.size,
-                      child: _CuteOverlayContent(
+                          CuteOverlayContent.size,
+                      child: CuteOverlayContent(
                         emoji: widget.emoji,
                       ),
                     ),
@@ -178,11 +178,11 @@ class _CuteEventOverlayState extends State<CuteEventOverlay>
   }
 }
 
-class _CuteOverlayContent extends StatelessWidget {
+class CuteOverlayContent extends StatelessWidget {
   static const double size = 64.0;
   final String emoji;
 
-  const _CuteOverlayContent({required this.emoji});
+  const CuteOverlayContent({super.key, required this.emoji});
 
   @override
   Widget build(BuildContext context) {
diff --git a/lib/pages/chat/events/message/message_content_builder.dart b/lib/pages/chat/events/message/message_content_builder.dart
index 50f63a192f..aebab9e54e 100644
--- a/lib/pages/chat/events/message/message_content_builder.dart
+++ b/lib/pages/chat/events/message/message_content_builder.dart
@@ -31,7 +31,9 @@ class MessageContentBuilder extends StatelessWidget
 
   @override
   Widget build(BuildContext context) {
-    final textColor = Theme.of(context).colorScheme.onSurface;
+    // TODO: change to colorSurface when its approved
+    // ignore: deprecated_member_use
+    final textColor = Theme.of(context).colorScheme.onBackground;
     final displayEvent = event.getDisplayEvent(timeline);
     final noPadding = {
       MessageTypes.File,
diff --git a/lib/pages/chat/events/verification_request_content.dart b/lib/pages/chat/events/verification_request_content.dart
index b6ec3fd09b..bfaa4de3ad 100644
--- a/lib/pages/chat/events/verification_request_content.dart
+++ b/lib/pages/chat/events/verification_request_content.dart
@@ -39,7 +39,9 @@ class VerificationRequestContent extends StatelessWidget {
               color: Theme.of(context).dividerColor,
             ),
             borderRadius: BorderRadius.circular(AppConfig.borderRadius),
-            color: Theme.of(context).colorScheme.surface,
+            // TODO: change to colorSurface when its approved
+            // ignore: deprecated_member_use
+            color: Theme.of(context).colorScheme.background,
           ),
           child: Row(
             mainAxisSize: MainAxisSize.min,
diff --git a/lib/pages/chat/send_file_dialog/hover_actions_widget.dart b/lib/pages/chat/send_file_dialog/hover_actions_widget.dart
index 6855a9f619..385e04d279 100644
--- a/lib/pages/chat/send_file_dialog/hover_actions_widget.dart
+++ b/lib/pages/chat/send_file_dialog/hover_actions_widget.dart
@@ -20,7 +20,9 @@ class SendFileDialogActionsWidget extends StatelessWidget {
       child: Container(
         decoration: BoxDecoration(
           shape: BoxShape.circle,
-          color: Theme.of(context).colorScheme.surface,
+          // TODO: change to colorSurface when its approved
+          // ignore: deprecated_member_use
+          color: Theme.of(context).colorScheme.background,
         ),
         margin: SendFileDialogStyle.paddingRemoveButton,
         child: Row(
diff --git a/lib/pages/chat_details/chat_details_page_view/media/chat_details_media_style.dart b/lib/pages/chat_details/chat_details_page_view/media/chat_details_media_style.dart
index e53491ff67..2391737b90 100644
--- a/lib/pages/chat_details/chat_details_page_view/media/chat_details_media_style.dart
+++ b/lib/pages/chat_details/chat_details_page_view/media/chat_details_media_style.dart
@@ -20,7 +20,9 @@ class ChatDetailsMediaStyle {
 
   static Decoration durationBoxDecoration(BuildContext context) =>
       ShapeDecoration(
-        color: Theme.of(context).colorScheme.onSurface.withOpacity(0.5),
+        // TODO: change to colorSurface when its approved
+        // ignore: deprecated_member_use
+        color: Theme.of(context).colorScheme.onBackground.withOpacity(0.5),
         shape: const StadiumBorder(),
       );
 
diff --git a/lib/pages/chat_list/navi_rail_item.dart b/lib/pages/chat_list/navi_rail_item.dart
index 3bb1517005..b337ce8a11 100644
--- a/lib/pages/chat_list/navi_rail_item.dart
+++ b/lib/pages/chat_list/navi_rail_item.dart
@@ -51,7 +51,9 @@ class NaviRailItem extends StatelessWidget {
                 borderRadius: BorderRadius.circular(AppConfig.borderRadius),
                 color: isSelected
                     ? Theme.of(context).colorScheme.primaryContainer
-                    : Theme.of(context).colorScheme.surface,
+                    // TODO: change to colorSurface when its approved
+                    // ignore: deprecated_member_use
+                    : Theme.of(context).colorScheme.background,
                 child: Padding(
                   padding: const EdgeInsets.symmetric(
                     horizontal: 8.0,
diff --git a/lib/pages/chat_list/space_view.dart b/lib/pages/chat_list/space_view.dart
index 2c59edcde6..b06e93fe53 100644
--- a/lib/pages/chat_list/space_view.dart
+++ b/lib/pages/chat_list/space_view.dart
@@ -160,7 +160,9 @@ class _SpaceViewState extends State<SpaceView> {
             MatrixLocals(L10n.of(context)!),
           );
           return Material(
-            color: Theme.of(context).colorScheme.surface,
+            // TODO: change to colorSurface when its approved
+            // ignore: deprecated_member_use
+            color: Theme.of(context).colorScheme.background,
             child: ListTile(
               leading: Avatar(
                 mxContent: rootSpace.avatar,
diff --git a/lib/pages/contacts_tab/empty_contacts_body.dart b/lib/pages/contacts_tab/empty_contacts_body.dart
index 1a84b909b6..341d1233b0 100644
--- a/lib/pages/contacts_tab/empty_contacts_body.dart
+++ b/lib/pages/contacts_tab/empty_contacts_body.dart
@@ -24,7 +24,9 @@ class EmptyContactBody extends StatelessWidget {
           Text(
             L10n.of(context)!.soonThereHaveContacts,
             style: Theme.of(context).textTheme.titleLarge?.copyWith(
-                  color: Theme.of(context).colorScheme.onSurface,
+                  // TODO: change to colorSurface when its approved
+                  // ignore: deprecated_member_use
+                  color: Theme.of(context).colorScheme.onBackground,
                 ),
             textAlign: TextAlign.center,
           ),
diff --git a/lib/pages/new_group/widget/contacts_selection_list.dart b/lib/pages/new_group/widget/contacts_selection_list.dart
index 9447d35d21..b5fd9b48c0 100644
--- a/lib/pages/new_group/widget/contacts_selection_list.dart
+++ b/lib/pages/new_group/widget/contacts_selection_list.dart
@@ -17,7 +17,8 @@ import 'package:fluffychat/pages/new_private_chat/widget/no_contacts_found.dart'
 
 class ContactsSelectionList extends StatelessWidget {
   final SelectedContactsMapChangeNotifier selectedContactsMapNotifier;
-  final ValueNotifier<List<PresentationSearch>> presentationRecentContactNotifier;
+  final ValueNotifier<List<PresentationSearch>>
+      presentationRecentContactNotifier;
   final ValueNotifier<Either<Failure, Success>> presentationContactNotifier;
   final Function() onSelectedContact;
   final List<String> disabledContactIds;
@@ -32,7 +33,7 @@ class ContactsSelectionList extends StatelessWidget {
     required this.textEditingController,
     required this.presentationRecentContactNotifier,
   });
-  
+
   @override
   Widget build(BuildContext context) {
     return ValueListenableBuilder(
@@ -42,7 +43,8 @@ class ContactsSelectionList extends StatelessWidget {
 
         return state.fold(
           (failure) {
-            final recentContact = presentationRecentContactNotifier.value.isEmpty;
+            final recentContact =
+                presentationRecentContactNotifier.value.isEmpty;
             final textControllerIsEmpty = textEditingController.text.isEmpty;
             if (failure is GetPresentationContactsEmpty ||
                 failure is GetPresentationContactsFailure) {
@@ -51,7 +53,9 @@ class ContactsSelectionList extends StatelessWidget {
                   child: Padding(
                     padding: ContactsSelectionListStyle.notFoundPadding,
                     child: NoContactsFound(
-                      keyword: textControllerIsEmpty ? null : textEditingController.text,
+                      keyword: textControllerIsEmpty
+                          ? null
+                          : textEditingController.text,
                     ),
                   ),
                 );
@@ -103,7 +107,9 @@ class ContactsSelectionList extends StatelessWidget {
                     onSelectedContact: onSelectedContact,
                     highlightKeyword: textEditingController.text,
                     disabled: disabled,
-                    paddingTop: index == 0 ? ContactsSelectionListStyle.listPaddingTop : 0,
+                    paddingTop: index == 0
+                        ? ContactsSelectionListStyle.listPaddingTop
+                        : 0,
                   );
                 },
               );
diff --git a/lib/pages/settings_dashboard/settings/settings_view.dart b/lib/pages/settings_dashboard/settings/settings_view.dart
index 7d443e66a3..03ad9e90da 100644
--- a/lib/pages/settings_dashboard/settings/settings_view.dart
+++ b/lib/pages/settings_dashboard/settings/settings_view.dart
@@ -43,7 +43,9 @@ class SettingsView extends StatelessWidget {
       ),
       bottomNavigationBar: bottomNavigationBar,
       body: ListTileTheme(
-        iconColor: Theme.of(context).colorScheme.onSurface,
+        // TODO: change to colorSurface when its approved
+        // ignore: deprecated_member_use
+        iconColor: Theme.of(context).colorScheme.onBackground,
         child: ListView(
           key: const Key('SettingsListViewContent'),
           children: <Widget>[
diff --git a/lib/pages/settings_dashboard/settings_security/settings_security_view.dart b/lib/pages/settings_dashboard/settings_security/settings_security_view.dart
index 414714c092..dc435c600b 100644
--- a/lib/pages/settings_dashboard/settings_security/settings_security_view.dart
+++ b/lib/pages/settings_dashboard/settings_security/settings_security_view.dart
@@ -22,7 +22,9 @@ class SettingsSecurityView extends StatelessWidget {
         context: context,
       ),
       body: ListTileTheme(
-        iconColor: Theme.of(context).colorScheme.onSurface,
+        // TODO: remove when the color scheme is updated
+        // ignore: deprecated_member_use
+        iconColor: Theme.of(context).colorScheme.onBackground,
         child: MaxWidthBody(
           withScrolling: true,
           child: Column(
diff --git a/lib/pages/story/story_view.dart b/lib/pages/story/story_view.dart
index 3b928ca94d..131ff35faa 100644
--- a/lib/pages/story/story_view.dart
+++ b/lib/pages/story/story_view.dart
@@ -377,7 +377,9 @@ class StoryView extends StatelessWidget {
                                   onPressed: controller.replyAction,
                                   icon: const Icon(Icons.send_outlined),
                                 ),
-                          fillColor: Theme.of(context).colorScheme.surface,
+                          // TODO: change to colorSurface when its approved
+                          // ignore: deprecated_member_use
+                          fillColor: Theme.of(context).colorScheme.background,
                         ),
                       ),
                     ),
diff --git a/lib/utils/twake_snackbar.dart b/lib/utils/twake_snackbar.dart
index b3738ddbc1..69c8b449bb 100644
--- a/lib/utils/twake_snackbar.dart
+++ b/lib/utils/twake_snackbar.dart
@@ -38,7 +38,9 @@ class TwakeSnackBar {
         content: Text(
           message,
           style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                color: Theme.of(context).colorScheme.surface,
+                // TODO: change to colorSurface when its approved
+                // ignore: deprecated_member_use
+                color: Theme.of(context).colorScheme.background,
               ),
         ),
       ),
diff --git a/lib/widgets/app_bars/searchable_app_bar.dart b/lib/widgets/app_bars/searchable_app_bar.dart
index a3ed947c86..b136c8f379 100644
--- a/lib/widgets/app_bars/searchable_app_bar.dart
+++ b/lib/widgets/app_bars/searchable_app_bar.dart
@@ -195,7 +195,9 @@ class SearchableAppBar extends StatelessWidget {
         prefixIcon: !isFullScreen
             ? Icon(
                 Icons.search_outlined,
-                color: Theme.of(context).colorScheme.onSurface,
+                // TODO: change to colorSurface when its approved
+                // ignore: deprecated_member_use
+                color: Theme.of(context).colorScheme.onBackground,
               )
             : null,
         suffixIcon: const SizedBox.shrink(),
diff --git a/lib/widgets/file_widget/file_tile_widget_style.dart b/lib/widgets/file_widget/file_tile_widget_style.dart
index 9bf5c47b04..f6dd83c08f 100644
--- a/lib/widgets/file_widget/file_tile_widget_style.dart
+++ b/lib/widgets/file_widget/file_tile_widget_style.dart
@@ -26,7 +26,9 @@ class FileTileWidgetStyle {
 
   TextStyle highlightTextStyle(BuildContext context) {
     return TextStyle(
-      color: Theme.of(context).colorScheme.onSurface,
+      // TODO: change to colorSurface when its approved
+      // ignore: deprecated_member_use
+      color: Theme.of(context).colorScheme.onBackground,
       fontWeight: FontWeight.bold,
       backgroundColor: CssColor.fromCss('gold'),
     );
diff --git a/lib/widgets/layouts/login_scaffold.dart b/lib/widgets/layouts/login_scaffold.dart
index 77b4730933..601765240f 100644
--- a/lib/widgets/layouts/login_scaffold.dart
+++ b/lib/widgets/layouts/login_scaffold.dart
@@ -37,7 +37,9 @@ class LoginScaffold extends StatelessWidget {
     if (isMobileMode) return scaffold;
     return Container(
       decoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.onSurface,
+        // TODO: change to colorSurface when its approved
+        // ignore: deprecated_member_use
+        color: Theme.of(context).colorScheme.onBackground,
       ),
       child: Center(
         child: Padding(
diff --git a/lib/widgets/lock_screen.dart b/lib/widgets/lock_screen.dart
index 0a9904ab40..ff6f36faa7 100644
--- a/lib/widgets/lock_screen.dart
+++ b/lib/widgets/lock_screen.dart
@@ -41,7 +41,9 @@ class LockScreenState extends State<LockScreen> {
           ),
           body: Container(
             decoration: BoxDecoration(
-              color: Theme.of(context).colorScheme.surface,
+              // TODO: change to colorSurface when its approved
+              // ignore: deprecated_member_use
+              color: Theme.of(context).colorScheme.background,
               gradient: LinearGradient(
                 begin: Alignment.topRight,
                 end: Alignment.bottomLeft,
@@ -55,7 +57,9 @@ class LockScreenState extends State<LockScreen> {
                   Theme.of(context).secondaryHeaderColor.withAlpha(16),
                   Theme.of(context).primaryColor.withAlpha(16),
                   Theme.of(context).colorScheme.secondary.withAlpha(16),
-                  Theme.of(context).colorScheme.surface.withAlpha(16),
+                  // TODO: change to colorSurface when its approved
+                  // ignore: deprecated_member_use
+                  Theme.of(context).colorScheme.background.withAlpha(16),
                 ],
               ),
             ),
diff --git a/scripts/code_analyze.sh b/scripts/code_analyze.sh
index cde50d8697..22d7e8f595 100755
--- a/scripts/code_analyze.sh
+++ b/scripts/code_analyze.sh
@@ -1,5 +1,5 @@
 #!/bin/sh -ve
 flutter pub get && flutter pub run build_runner build --delete-conflicting-outputs
 dart format --set-exit-if-changed lib/ test/
-flutter pub get
+flutter pub get # In flutter 3.22, flutter gen-l10n is not working properly, so we need to run flutter pub get again
 flutter analyze