diff --git a/lib/features/dashboard/view/dashboard_view.dart b/lib/features/dashboard/view/dashboard_view.dart
index ee8c150..99a50d7 100644
--- a/lib/features/dashboard/view/dashboard_view.dart
+++ b/lib/features/dashboard/view/dashboard_view.dart
@@ -15,36 +15,38 @@ class DashboardView extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Column(
-      mainAxisAlignment: MainAxisAlignment.start,
-      crossAxisAlignment: CrossAxisAlignment.stretch,
-      children: [
-        const TitleMedium(
-          text: StringsManager.dashboard,
-          style: TextStyle(
-            fontSize: 32,
-            fontWeight: FontWeight.bold,
+    return SingleChildScrollView(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          const TitleMedium(
+            text: StringsManager.dashboard,
+            style: TextStyle(
+              fontSize: 32,
+              fontWeight: FontWeight.bold,
+            ),
           ),
-        ),
-        const LiveMonitorTab(),
-        const Gap(10),
-        const EnergyUsage(),
-        Container(
-          padding: const EdgeInsets.only(top: 20),
-          constraints: const BoxConstraints(
-            minHeight: 220,
-            maxHeight: 240,
+          const LiveMonitorTab(),
+          const Gap(10),
+          const EnergyUsage(),
+          Container(
+            padding: const EdgeInsets.only(top: 20),
+            constraints: const BoxConstraints(
+              minHeight: 220,
+              maxHeight: 240,
+            ),
+            child: const Column(
+              mainAxisAlignment: MainAxisAlignment.start,
+              children: [
+                Consumption(),
+                Gap(20),
+                CarbonEmission(),
+              ],
+            ),
           ),
-          child: const Column(
-            mainAxisAlignment: MainAxisAlignment.start,
-            children: [
-              Consumption(),
-              Gap(20),
-              CarbonEmission(),
-            ],
-          ),
-        ),
-      ],
+        ],
+      ),
     );
   }
 }
diff --git a/lib/features/dashboard/view/widgets/energy_usage.dart b/lib/features/dashboard/view/widgets/energy_usage.dart
index 1781f0b..79f44e5 100644
--- a/lib/features/dashboard/view/widgets/energy_usage.dart
+++ b/lib/features/dashboard/view/widgets/energy_usage.dart
@@ -1,6 +1,8 @@
+import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
 import 'package:syncrow_app/features/dashboard/view/widgets/energy_usage_header.dart';
-import 'package:syncrow_app/generated/assets.dart';
+import 'package:syncrow_app/features/shared_widgets/text_widgets/body_small.dart';
+import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
 
 class EnergyUsage extends StatelessWidget {
   const EnergyUsage({
@@ -9,26 +11,168 @@ class EnergyUsage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Expanded(
-      child: DecoratedBox(
-        decoration: BoxDecoration(
-          color: Colors.white,
-          borderRadius: BorderRadius.circular(15),
-        ),
-        child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.start,
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              const EnergyUsageHeader(),
-              Expanded(
-                child: Image.asset(Assets.imagesTestDash),
-              )
-            ],
-          ),
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(15),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const EnergyUsageHeader(),
+            ConstrainedBox(
+              constraints: const BoxConstraints(
+                maxHeight: 150,
+                minHeight: 150,
+              ),
+              child: LineChart(
+                LineChartData(
+                  gridData: FlGridData(
+                    show: true,
+                    drawHorizontalLine: true,
+                    horizontalInterval: 2,
+                    drawVerticalLine: false,
+                    getDrawingHorizontalLine: (value) {
+                      return FlLine(
+                        color: Colors.grey.withOpacity(.5),
+                        strokeWidth: 1,
+                      );
+                    },
+                  ),
+                  titlesData: FlTitlesData(
+                    show: true,
+                    rightTitles: AxisTitles(
+                      sideTitles: SideTitles(
+                        showTitles: true,
+                        interval: 1,
+                        getTitlesWidget: leftTitleWidgets,
+                        reservedSize: 25,
+                      ),
+                    ),
+                    topTitles: const AxisTitles(
+                      sideTitles: SideTitles(showTitles: false),
+                    ),
+                    bottomTitles: AxisTitles(
+                      sideTitles: SideTitles(
+                        showTitles: true,
+                        reservedSize: 30,
+                        interval: 12,
+                        getTitlesWidget: (value, meta) {
+                          switch (value.toInt()) {
+                            case 0:
+                              return SideTitleWidget(
+                                axisSide: meta.axisSide,
+                                child: BodySmall(text: '1'),
+                              );
+
+                            case 11:
+                              return SideTitleWidget(
+                                axisSide: meta.axisSide,
+                                child: BodySmall(text: '28'),
+                              );
+                            default:
+                              return Container();
+                          }
+                        },
+                      ),
+                    ),
+                    leftTitles: const AxisTitles(
+                      sideTitles: SideTitles(showTitles: false),
+                    ),
+                  ),
+                  minX: 0,
+                  maxX: 11,
+                  minY: 0,
+                  maxY: 6,
+                  lineBarsData: [
+                    LineChartBarData(
+                      spots: const [
+                        FlSpot(0, 3),
+                        FlSpot(2.6, 2),
+                        FlSpot(4.9, 5),
+                        FlSpot(6.8, 3.1),
+                        FlSpot(8, 4),
+                        FlSpot(9.5, 3),
+                        FlSpot(11, 4),
+                      ],
+                      isCurved: true,
+                      gradient: LinearGradient(
+                        colors: [
+                          ColorsManager.primaryColor,
+                          ColorsManager.primaryColor.withOpacity(0.3),
+                        ],
+                      ),
+                      barWidth: 5,
+                      isStrokeCapRound: true,
+                      dotData: const FlDotData(
+                        show: false,
+                      ),
+                      belowBarData: BarAreaData(
+                        show: true,
+                        gradient: LinearGradient(
+                          colors: [
+                            ColorsManager.primaryColor.withOpacity(0.5),
+                            ColorsManager.primaryColor.withOpacity(0.1),
+                          ],
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            )
+          ],
         ),
       ),
     );
   }
+
+  Widget leftTitleWidgets(double value, TitleMeta meta) {
+    String text;
+    switch (value.toInt()) {
+      case 1:
+        text = '1K';
+        break;
+      case 3:
+        text = '3k';
+        break;
+      case 5:
+        text = '5k';
+        break;
+      default:
+        return Container();
+    }
+
+    return Center(child: BodySmall(text: text));
+  }
+
+  Widget bottomTitleWidgets(double value, TitleMeta meta) {
+    // const style = TextStyle(
+    //   fontWeight: FontWeight.bold,
+    //   fontSize: 16,
+    // );
+    // Widget text;
+    // switch (value.toInt()) {
+    //   case 2:
+    //     text = const Text('MAR', style: style);
+    //     break;
+    //   case 5:
+    //     text = const Text('JUN', style: style);
+    //     break;
+    //   case 8:
+    //     text = const Text('SEP', style: style);
+    //     break;
+    //   default:
+    //     text = const Text('', style: style);
+    //     break;
+    // }
+
+    return SideTitleWidget(
+      axisSide: meta.axisSide,
+      child: BodySmall(text: 'Feb'),
+    );
+  }
 }
diff --git a/pubspec.yaml b/pubspec.yaml
index 123e500..a730530 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -20,6 +20,7 @@ dependencies:
   gap: ^3.0.1
   flutter_svg: ^2.0.9
   sleek_circular_slider: ^2.0.1
+
   fl_chart: ^0.66.2
 
   # Utility Packages