diff --git a/lib/pages/analytics/modules/air_quality/views/air_quality_view.dart b/lib/pages/analytics/modules/air_quality/views/air_quality_view.dart
index 38f62cd7..be3b9b04 100644
--- a/lib/pages/analytics/modules/air_quality/views/air_quality_view.dart
+++ b/lib/pages/analytics/modules/air_quality/views/air_quality_view.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/air_quality_end_side_widget.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart_box.dart';
 
 class AirQualityView extends StatelessWidget {
   const AirQualityView({super.key});
@@ -22,7 +23,7 @@ class AirQualityView extends StatelessWidget {
                   height: height * 1.2,
                   child: const AirQualityEndSideWidget(),
                 ),
-                SizedBox(height: height * 0.5, child: const Placeholder()),
+                SizedBox(height: height * 0.5, child: const RangeOfAqiChartBox()),
                 SizedBox(height: height * 0.5, child: const Placeholder()),
               ],
             ),
@@ -44,7 +45,7 @@ class AirQualityView extends StatelessWidget {
                         child: Column(
                           spacing: 20,
                           children: [
-                            Expanded(child: Placeholder()),
+                            Expanded(child: RangeOfAqiChartBox()),
                             Expanded(child: Placeholder()),
                           ],
                         ),
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
new file mode 100644
index 00000000..6e8974f7
--- /dev/null
+++ b/lib/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart.dart
@@ -0,0 +1,105 @@
+import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/helpers/energy_management_charts_helper.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class RangeOfAqiChart extends StatelessWidget {
+  final List<double> minValues;
+  final List<double> avgValues;
+  final List<double> maxValues;
+
+  const RangeOfAqiChart({
+    super.key,
+    required this.minValues,
+    required this.avgValues,
+    required this.maxValues,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        // Fixed gradient background
+        Positioned.fill(
+          child: Container(
+            decoration: const BoxDecoration(
+              gradient: LinearGradient(
+                begin: Alignment.bottomCenter,
+                end: Alignment.topCenter,
+                colors: [
+                  Color(0xFF0CEC16),
+                  Color(0xFFFAC96C),
+                  Color(0xFFEC7400),
+                  Color(0xFFD40000),
+                  Color(0xFFD40094),
+                  Color(0xFFBA01FD),
+                ],
+              ),
+            ),
+          ),
+        ),
+        LineChart(
+          LineChartData(
+            minY: 0,
+            maxY: 320,
+            gridData: EnergyManagementChartsHelper.gridData(),
+            titlesData: EnergyManagementChartsHelper.titlesData(context),
+            borderData: FlBorderData(show: false),
+            lineBarsData: [
+              // Max line (top, purple)
+              LineChartBarData(
+                spots: List.generate(
+                  maxValues.length,
+                  (i) => FlSpot(i.toDouble(), maxValues[i]),
+                ),
+                isCurved: true,
+                color: const Color(0xFF962DFF),
+                barWidth: 3,
+                isStrokeCapRound: true,
+                dotData: _buildDotData(const Color(0xFF5F00BD)),
+                belowBarData: BarAreaData(show: false),
+              ),
+              // Avg line (middle, white)
+              LineChartBarData(
+                spots: List.generate(
+                  avgValues.length,
+                  (i) => FlSpot(i.toDouble(), avgValues[i]),
+                ),
+                isCurved: true,
+                color: Colors.white,
+                barWidth: 3,
+                dotData: const FlDotData(show: false),
+                belowBarData: BarAreaData(show: false),
+              ),
+              // Min line (bottom, blue)
+              LineChartBarData(
+                spots: List.generate(
+                  minValues.length,
+                  (i) => FlSpot(i.toDouble(), minValues[i]),
+                ),
+                isCurved: true,
+                color: const Color(0xFF93AAFD),
+                barWidth: 3,
+                isStrokeCapRound: true,
+                dotData: _buildDotData(const Color(0xFF023DFE)),
+                belowBarData: BarAreaData(show: false),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+
+  FlDotData _buildDotData(Color color) {
+    return FlDotData(
+      show: true,
+      getDotPainter: (spot, percent, bar, index) => FlDotCirclePainter(
+        radius: 2,
+        color: ColorsManager.whiteColors,
+        strokeWidth: 2,
+        strokeColor: color,
+      ),
+    );
+  }
+}
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
new file mode 100644
index 00000000..a8b173d7
--- /dev/null
+++ b/lib/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart_box.dart
@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/modules/air_quality/widgets/range_of_aqi_chart.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/chart_title.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class RangeOfAqiChartBox extends StatelessWidget {
+  const RangeOfAqiChartBox({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsetsDirectional.all(20),
+      decoration: secondarySection,
+      child: const Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        spacing: 20,
+        children: [
+          ChartTitle(title: Text('Range of AQI')),
+          Expanded(
+            child: RangeOfAqiChart(
+              avgValues: [
+                120,
+                60,
+                110,
+                100,
+                90,
+                70,
+                80,
+                90,
+                100,
+                110,
+                120,
+                150,
+                160
+              ],
+              minValues: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130],
+              maxValues: [
+                130,
+                140,
+                150,
+                160,
+                170,
+                180,
+                190,
+                200,
+                210,
+                220,
+                230,
+                240,
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}