diff --git a/lib/common_ui/resources/my_colors.dart b/lib/common_ui/resources/my_colors.dart
index 087ce37..05aae8d 100644
--- a/lib/common_ui/resources/my_colors.dart
+++ b/lib/common_ui/resources/my_colors.dart
@@ -9,4 +9,5 @@ class MyColors {
   static const Color black = Colors.black;
   static const Color transparent = Colors.transparent;
   static const Color backgroundColor = Color(0xFF160C30);
+  static const Color battleLeagueBackgroundColor = Color(0XFF390C82);
 }
diff --git a/lib/common_ui/theme/my_theme.dart b/lib/common_ui/theme/my_theme.dart
index 7ee5201..7b1a386 100644
--- a/lib/common_ui/theme/my_theme.dart
+++ b/lib/common_ui/theme/my_theme.dart
@@ -6,6 +6,7 @@ enum ColorsName {
   primaryColor,
   noColor,
   backgroundColor,
+  battleLeagueBackgroundColor,
 }
 
 class MyTheme {
@@ -21,12 +22,14 @@ class MyTheme {
     ColorsName.primaryColor: MyColors.white,
     ColorsName.noColor: MyColors.transparent,
     ColorsName.backgroundColor: MyColors.backgroundColor,
+    ColorsName.battleLeagueBackgroundColor: MyColors.battleLeagueBackgroundColor,
   };
 
   static Map<ColorsName, Color> get darkColors => {
     ColorsName.primaryColor: MyColors.white,
     ColorsName.noColor: MyColors.transparent,
     ColorsName.backgroundColor: MyColors.backgroundColor,
+    ColorsName.battleLeagueBackgroundColor: MyColors.battleLeagueBackgroundColor,
   };
 }
 
@@ -37,4 +40,5 @@ extension ThemeExtension on BuildContext {
   Color get primaryColor => customColors[ColorsName.primaryColor]!;
   Color get noColor => customColors[ColorsName.noColor]!;
   Color get backgroundColor => customColors[ColorsName.backgroundColor]!;
+  Color get battleLeagueBackgroundColor => customColors[ColorsName.battleLeagueBackgroundColor]!;
 }
diff --git a/lib/features/battle_league/presentation/ui/battle_league_page.dart b/lib/features/battle_league/presentation/ui/battle_league_page.dart
index 9d9954f..5d12617 100644
--- a/lib/features/battle_league/presentation/ui/battle_league_page.dart
+++ b/lib/features/battle_league/presentation/ui/battle_league_page.dart
@@ -18,7 +18,7 @@ class BattleLeaguePage extends GetView<BattleLeagueController> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      backgroundColor: const Color(0XFF390C82),
+      backgroundColor: context.battleLeagueBackgroundColor,
       appBar: MyAppBar(
         type: AppBarType.battleLeague,
         backgroundColor: context.noColor,
@@ -30,44 +30,56 @@ class BattleLeaguePage extends GetView<BattleLeagueController> {
         child: Column(
           children: [
             MySpaces.s30.gapHeight,
-            Padding(
-              padding: const EdgeInsets.symmetric(horizontal: MySpaces.s30),
-              child: BattleLeagueTabBar(
-                controller: controller.tabController,
-                tabs: [
-                  context.translate.time_ranking,
-                  context.translate.regional_ranking,
-                ],
-              ),
-            ),
+            _tabBars(context),
             MySpaces.s12.gapHeight,
-            Expanded(
-              child: TabBarView(
-                controller: controller.tabController,
-                children: const [
-                  Padding(
-                    padding: EdgeInsets.symmetric(horizontal: MySpaces.s30),
-                    child: TimeRanking(),
-                  ),
-                  Padding(
-                    padding: EdgeInsets.symmetric(horizontal: MySpaces.s30),
-                    child: RegionalRanking(),
-                  ),
-                ],
-              ),
-            ),
+            _tabViews(),
             56.0.gapHeight,
-            Padding(
-              padding: const EdgeInsets.symmetric(horizontal: MySpaces.s30),
-              child: BattleLeagueStartButton(
-                title: context.translate.play_now,
-                onTap: () {},
-              ),
-            ),
+            _startButton(context),
             MySpaces.s16.gapHeight,
           ],
         ),
       ),
     );
   }
+
+  Padding _tabBars(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: MySpaces.s30),
+      child: BattleLeagueTabBar(
+        controller: controller.tabController,
+        tabs: [
+          context.translate.time_ranking,
+          context.translate.regional_ranking,
+        ],
+      ),
+    );
+  }
+
+  Expanded _tabViews() {
+    return Expanded(
+      child: TabBarView(
+        controller: controller.tabController,
+        children: const [
+          Padding(
+            padding: EdgeInsets.symmetric(horizontal: MySpaces.s30),
+            child: TimeRanking(),
+          ),
+          Padding(
+            padding: EdgeInsets.symmetric(horizontal: MySpaces.s30),
+            child: RegionalRanking(),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Padding _startButton(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: MySpaces.s30),
+      child: BattleLeagueStartButton(
+        title: context.translate.play_now,
+        onTap: () {},
+      ),
+    );
+  }
 }