diff --git a/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart_box.dart b/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart_box.dart
index 31ddb765..a52b43a0 100644
--- a/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart_box.dart
+++ b/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart_box.dart
@@ -39,34 +39,7 @@ class _EnergyConsumptionByPhasesChartBoxState
             mainAxisSize: MainAxisSize.min,
             spacing: 20,
             children: [
-              Row(
-                crossAxisAlignment: CrossAxisAlignment.center,
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Expanded(
-                    flex: 4,
-                    child: FittedBox(
-                      fit: BoxFit.scaleDown,
-                      child: ChartTitle(
-                        title: Text(
-                          'Energy Consumption by Phases',
-                          style: context.textTheme.titleLarge?.copyWith(
-                            fontSize: 14,
-                            fontWeight: FontWeight.w400,
-                            color: ColorsManager.textPrimaryColor,
-                          ),
-                        ),
-                      ),
-                    ),
-                  ),
-                  const Spacer(),
-                  ...<(String title, double opacity)>[
-                    ('A', 0.8),
-                    ('B', 0.4),
-                    ('C', 0.15),
-                  ].map((phase) => _buildPhaseCell(context, phase)),
-                ],
-              ),
+              const EnergyConsumptionByPhasesTitle(),
               Expanded(
                 child: EnergyConsumptionByPhasesChart(
                   energyData: state.chartData,
@@ -78,6 +51,42 @@ class _EnergyConsumptionByPhasesChartBoxState
       },
     );
   }
+}
+
+class EnergyConsumptionByPhasesTitle extends StatelessWidget {
+  const EnergyConsumptionByPhasesTitle({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.center,
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        Expanded(
+          flex: 4,
+          child: FittedBox(
+            fit: BoxFit.scaleDown,
+            child: ChartTitle(
+              title: Text(
+                'Energy Consumption by Phases',
+                style: context.textTheme.titleLarge?.copyWith(
+                  fontSize: 14,
+                  fontWeight: FontWeight.w400,
+                  color: ColorsManager.textPrimaryColor,
+                ),
+              ),
+            ),
+          ),
+        ),
+        const Spacer(),
+        ...<(String title, double opacity)>[
+          ('A', 0.8),
+          ('B', 0.4),
+          ('C', 0.15),
+        ].map((phase) => _buildPhaseCell(context, phase)),
+      ],
+    );
+  }
 
   Widget _buildPhaseCell(
     BuildContext context,