diff --git a/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart.dart b/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart.dart
index ca148319..c605e011 100644
--- a/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart.dart
+++ b/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart.dart
@@ -1,10 +1,86 @@
 import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+import 'package:syncrow_web/utils/style.dart';
 
 class EnergyConsumptionByPhasesChart extends StatelessWidget {
   const EnergyConsumptionByPhasesChart({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return const Placeholder();
+    return Container(
+      padding: const EdgeInsetsDirectional.all(20),
+      decoration: secondarySection,
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        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)),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildPhaseCell(
+    BuildContext context,
+    (String title, double colorOpacity) phase,
+  ) {
+    final (title, colorOpacity) = phase;
+
+    return Expanded(
+      child: FittedBox(
+        fit: BoxFit.scaleDown,
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.center,
+          spacing: 4,
+          children: [
+            CircleAvatar(
+              backgroundColor: ColorsManager.vividBlue.withValues(
+                alpha: colorOpacity,
+              ),
+              radius: 4,
+            ),
+            Text(
+              'Phase $title',
+              style: context.textTheme.labelSmall?.copyWith(
+                fontSize: 8,
+                fontWeight: FontWeight.w400,
+                color: ColorsManager.lightGreyColor,
+              ),
+            ),
+            const SizedBox(width: 4),
+          ],
+        ),
+      ),
+    );
   }
 }
diff --git a/lib/utils/style.dart b/lib/utils/style.dart
index b5ea59ee..905bb7a8 100644
--- a/lib/utils/style.dart
+++ b/lib/utils/style.dart
@@ -2,8 +2,7 @@ import 'package:flutter/material.dart';
 
 import 'color_manager.dart';
 
-InputDecoration? textBoxDecoration(
-        {bool suffixIcon = false, double radios = 8}) =>
+InputDecoration? textBoxDecoration({bool suffixIcon = false, double radios = 8}) =>
     InputDecoration(
       focusColor: ColorsManager.grayColor,
       suffixIcon: suffixIcon ? const Icon(Icons.search) : null,
@@ -68,10 +67,24 @@ BoxDecoration subSectionContainerDecoration = BoxDecoration(
   ],
 );
 
+final secondarySection = BoxDecoration(
+  boxShadow: [
+    BoxShadow(
+      color: Colors.black.withOpacity(0.1),
+      spreadRadius: 1,
+      blurRadius: 7,
+      offset: const Offset(0, 10),
+    ),
+  ],
+  color: ColorsManager.circleRolesBackground,
+  borderRadius: const BorderRadius.all(
+    Radius.circular(15),
+  ),
+);
+
 InputDecoration inputTextFormDeco({hintText}) => InputDecoration(
       hintText: hintText,
       border: const OutlineInputBorder(
-  
         borderSide: BorderSide(
           width: 1,
           color: ColorsManager.textGray, // Border color for unfocused state