diff --git a/lib/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart.dart b/lib/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart.dart
index b6284e91..4d60f33a 100644
--- a/lib/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart.dart
+++ b/lib/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart.dart
@@ -47,9 +47,10 @@ class RangeOfAqiChart extends StatelessWidget {
             gradient: LinearGradient(
               begin: Alignment.bottomCenter,
               end: Alignment.topCenter,
+              stops: [0.0, 0.2, 0.4, 0.6, 0.8, 1.0],
               colors: RangeOfAqiChartsHelper.gradientData.map((e) {
                 final (color, _) = e;
-                return color.withValues(alpha: 0.8);
+                return color.withValues(alpha: 0.6);
               }).toList(),
             ),
           ),
diff --git a/lib/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart_box.dart b/lib/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart_box.dart
index 86696392..07390480 100644
--- a/lib/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart_box.dart
+++ b/lib/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart_box.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/blocs/range_of_aqi/range_of_aqi_bloc.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/widgets/chart_informative_cell.dart';
 import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
 import 'package:syncrow_web/pages/analytics/widgets/analytics_error_widget.dart';
 import 'package:syncrow_web/utils/style.dart';
@@ -24,15 +25,11 @@ class RangeOfAqiChartBox extends StatelessWidget {
             children: [
               AnalyticsErrorWidget(state.errorMessage),
               const SizedBox(height: 10),
-              const ChartTitle(title: Text('Range of AQI')),
+              const RangeOfAqiChartTitle(),
               const SizedBox(height: 10),
               const Divider(),
               const SizedBox(height: 20),
-              Expanded(
-                child: RangeOfAqiChart(
-                  chartData: state.rangeOfAqi,
-                ),
-              ),
+              Expanded(child: RangeOfAqiChart(chartData: state.rangeOfAqi)),
             ],
           ),
         );
@@ -40,3 +37,39 @@ class RangeOfAqiChartBox extends StatelessWidget {
     );
   }
 }
+
+class RangeOfAqiChartTitle extends StatelessWidget {
+  const RangeOfAqiChartTitle({super.key});
+
+  static const List<(Color color, String title, bool hasBorder)> _colors = [
+    (Color(0xFF962DFF), 'Max', false),
+    (Color(0xFF93AAFD), 'Min', false),
+    (Colors.transparent, 'Avg', true),
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        const ChartTitle(title: Text('Range of AQI')),
+        const Spacer(),
+        ..._colors.map(
+          (e) {
+            final (color, title, hasBorder) = e;
+            return Padding(
+              padding: const EdgeInsetsDirectional.only(end: 16),
+              child: ChartInformativeCell(
+                title: Text(title),
+                color: color,
+                hasBorder: hasBorder,
+              ),
+            );
+          },
+        ),
+        const SizedBox(width: 34),
+        const Text('AQI'),
+      ],
+    );
+  }
+}
diff --git a/lib/pages/analytics/modules/analytics/widgets/chart_informative_cell.dart b/lib/pages/analytics/modules/analytics/widgets/chart_informative_cell.dart
new file mode 100644
index 00000000..05d2b2b5
--- /dev/null
+++ b/lib/pages/analytics/modules/analytics/widgets/chart_informative_cell.dart
@@ -0,0 +1,63 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class ChartInformativeCell extends StatelessWidget {
+  const ChartInformativeCell({
+    super.key,
+    required this.title,
+    required this.color,
+    this.hasBorder = false,
+  });
+
+  final Widget title;
+  final Color color;
+  final bool hasBorder;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: MediaQuery.sizeOf(context).height * 0.0365,
+      padding: const EdgeInsetsDirectional.symmetric(
+        vertical: 8,
+        horizontal: 12,
+      ),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadiusDirectional.circular(8),
+        border: Border.all(
+          color: ColorsManager.greyColor,
+          width: 1,
+        ),
+      ),
+      child: FittedBox(
+        fit: BoxFit.scaleDown,
+        alignment: Alignment.center,
+        child: Row(
+          spacing: 6,
+          children: [
+            Container(
+              height: 8,
+              width: 8,
+              decoration: BoxDecoration(
+                color: color,
+                border: Border.all(color: ColorsManager.grayBorder),
+                shape: BoxShape.circle,
+              ),
+            ),
+            // CircleAvatar(
+            //   radius: 4,
+            //   backgroundColor: color,
+            // ),
+            DefaultTextStyle(
+              style: const TextStyle(
+                color: ColorsManager.blackColor,
+                fontWeight: FontWeight.w400,
+                fontSize: 14,
+              ),
+              child: title,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_devices_list.dart b/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_devices_list.dart
index e6996f53..b7205424 100644
--- a/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_devices_list.dart
+++ b/lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_devices_list.dart
@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/analytics/models/analytics_device.dart';
 import 'package:syncrow_web/pages/analytics/models/device_energy_data_model.dart';
-import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/pages/analytics/modules/analytics/widgets/chart_informative_cell.dart';
 
 class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
   const EnergyConsumptionPerDeviceDevicesList({
@@ -42,42 +42,7 @@ class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
 
     return Tooltip(
       message: '${device.name}\n${device.productDevice?.uuid ?? ''}',
-      child: Container(
-        height: MediaQuery.sizeOf(context).height * 0.0365,
-        padding: const EdgeInsetsDirectional.symmetric(
-          vertical: 8,
-          horizontal: 12,
-        ),
-        decoration: BoxDecoration(
-          borderRadius: BorderRadiusDirectional.circular(8),
-          border: Border.all(
-            color: ColorsManager.greyColor,
-            width: 1,
-          ),
-        ),
-        child: FittedBox(
-          fit: BoxFit.scaleDown,
-          alignment: Alignment.center,
-          child: Row(
-            spacing: 6,
-            children: [
-              CircleAvatar(
-                radius: 4,
-                backgroundColor: deviceColor,
-              ),
-              Text(
-                device.name,
-                textAlign: TextAlign.center,
-                style: const TextStyle(
-                  color: ColorsManager.blackColor,
-                  fontWeight: FontWeight.w400,
-                  fontSize: 14,
-                ),
-              ),
-            ],
-          ),
-        ),
-      ),
+      child: ChartInformativeCell(title: Text(device.name), color: deviceColor),
     );
   }
 }