diff --git a/lib/features/devices/view/widgets/power_clamp/power_clamp_card.dart b/lib/features/devices/view/widgets/power_clamp/power_clamp_card.dart
new file mode 100644
index 0000000..90e8cb0
--- /dev/null
+++ b/lib/features/devices/view/widgets/power_clamp/power_clamp_card.dart
@@ -0,0 +1,234 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_app/features/devices/model/power_clamp_model.dart';
+import 'package:syncrow_app/features/devices/view/widgets/power_clamp/power_info_card.dart';
+import 'package:syncrow_app/features/shared_widgets/default_container.dart';
+import 'package:syncrow_app/features/shared_widgets/text_widgets/body_large.dart';
+import 'package:syncrow_app/features/shared_widgets/text_widgets/body_medium.dart';
+import 'package:syncrow_app/features/shared_widgets/text_widgets/body_small.dart';
+import 'package:syncrow_app/generated/assets.dart';
+import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
+
+import 'power_chart.dart';
+
+class PowerClampCard extends StatelessWidget {
+  final bool? isGeneral;
+  final String? title;
+  final String? totalCurrent;
+  final String? totalActiveGeneral;
+  final String? totalCurrentGeneral;
+  final String? totalFrequencyGeneral;
+  final String? totalVoltage;
+  final String? totalActive;
+  final String? totalFrequency;
+  final String? totalFactor;
+  final Widget? dateSwitcher;
+  final String? formattedDate;
+  final Function()? selectDateEvent;
+  final List<EnergyData>? chartData;
+  final BuildContext? context;
+
+  const PowerClampCard({
+    Key? key,
+    this.isGeneral,
+    this.title,
+    this.totalCurrent,
+    this.totalActiveGeneral,
+    this.totalCurrentGeneral,
+    this.totalFrequencyGeneral,
+    this.totalVoltage,
+    this.totalActive,
+    this.totalFrequency,
+    this.totalFactor,
+    this.dateSwitcher,
+    this.formattedDate,
+    this.selectDateEvent,
+    this.chartData,
+    this.context,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return DefaultContainer(
+      child: Padding(
+        padding:
+            const EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 10),
+        child: Column(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              const Text('Energy usage'),
+              Row(
+                crossAxisAlignment: CrossAxisAlignment.end,
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  BodyLarge(
+                    text: title!,
+                    fontSize: 20,
+                    fontWeight: FontWeight.w700,
+                  ),
+                  Row(
+                    children: [
+                      BodyLarge(
+                        text: totalVoltage!,
+                        fontSize: 20,
+                        fontWeight: FontWeight.w700,
+                      ),
+                      const BodySmall(text: 'kWh')
+                    ],
+                  ),
+                ],
+              ),
+              const SizedBox(
+                height: 20,
+              ),
+              isGeneral == true
+                  ? Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        PowerClampInfoCard(
+                          iconPath: Assets.powerActiveIcon,
+                          title: 'Active',
+                          value: '$totalActiveGeneral',
+                          unit: ' w',
+                        ),
+                        PowerClampInfoCard(
+                          iconPath: Assets.voltMeterIcon,
+                          title: 'Current',
+                          value: '$totalCurrentGeneral',
+                          unit: ' A',
+                        ),
+                        PowerClampInfoCard(
+                          iconPath: Assets.frequencyIcon,
+                          title: 'Frequency',
+                          value: '$totalFrequencyGeneral',
+                          unit: ' Hz',
+                        ),
+                      ],
+                    )
+                  : Column(
+                      children: [
+                        Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: [
+                            PowerClampInfoCard(
+                              iconPath: Assets.voltageIcon,
+                              title: 'Voltage',
+                              value: totalVoltage!,
+                              unit: ' V',
+                            ),
+                            PowerClampInfoCard(
+                              iconPath: Assets.voltMeterIcon,
+                              title: 'Current',
+                              value: '$totalCurrent',
+                              unit: ' A',
+                            ),
+                          ],
+                        ),
+                        Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: [
+                            PowerClampInfoCard(
+                              iconPath: Assets.powerActiveIcon,
+                              title: 'Active Power',
+                              value: '$totalActive',
+                              unit: ' w',
+                            ),
+                            PowerClampInfoCard(
+                              iconPath: Assets.speedoMeter,
+                              title: 'Power Factor',
+                              value: '$totalFactor',
+                              unit: '',
+                            ),
+                          ],
+                        )
+                      ],
+                    ),
+              const SizedBox(
+                height: 10,
+              ),
+              const Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      BodyMedium(
+                        text: 'Total consumption',
+                        fontSize: 12,
+                        fontWeight: FontWeight.w700,
+                      ),
+                      Text(
+                        '10/08/2024',
+                        style:
+                            TextStyle(fontSize: 8, fontWeight: FontWeight.w400),
+                      ),
+                    ],
+                  ),
+                  Row(
+                    children: [
+                      BodyMedium(
+                          text: '1000.00 ',
+                          fontSize: 12,
+                          fontWeight: FontWeight.w700),
+                      BodyMedium(
+                          text: 'kWh',
+                          fontSize: 8,
+                          fontWeight: FontWeight.w700),
+                    ],
+                  ),
+                ],
+              ),
+              SizedBox(
+                height: 290,
+                child: EnergyConsumptionPage(
+                  chartData: chartData!.isNotEmpty
+                      ? chartData!
+                      : [
+                          EnergyData('12:00 AM', 4.0),
+                          EnergyData('01:00 AM', 3.5),
+                          EnergyData('02:00 AM', 3.8),
+                          EnergyData('03:00 AM', 3.2),
+                          EnergyData('04:00 AM', 4.0),
+                          EnergyData('05:00 AM', 3.4),
+                          EnergyData('06:00 AM', 3.2),
+                          EnergyData('07:00 AM', 3.5),
+                          EnergyData('08:00 AM', 3.8),
+                          EnergyData('09:00 AM', 3.6),
+                          EnergyData('10:00 AM', 3.9),
+                          EnergyData('11:00 AM', 4.0),
+                        ],
+                  totalConsumption:
+                      chartData!.fold(0, (sum, data) => sum + data.consumption),
+                  date: '10/08/2024',
+                ),
+              ),
+              const SizedBox(
+                height: 5,
+              ),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  DefaultContainer(
+                      padding: EdgeInsets.all(0),
+                      color: ColorsManager.grayBox,
+                      child: SizedBox(
+                        child: dateSwitcher,
+                      )),
+                  InkWell(
+                    onTap: selectDateEvent,
+                    child: DefaultContainer(
+                        color: ColorsManager.grayBox,
+                        child: SizedBox(
+                          child: Padding(
+                            padding: const EdgeInsets.all(5),
+                            child: Text(formattedDate!),
+                          ),
+                        )),
+                  ),
+                ],
+              )
+            ]),
+      ),
+    );
+  }
+}
diff --git a/lib/features/devices/view/widgets/power_clamp/power_clamp_page.dart b/lib/features/devices/view/widgets/power_clamp/power_clamp_page.dart
index 95ff80f..4b30614 100644
--- a/lib/features/devices/view/widgets/power_clamp/power_clamp_page.dart
+++ b/lib/features/devices/view/widgets/power_clamp/power_clamp_page.dart
@@ -114,7 +114,6 @@ class _PowerClampPageState extends State<PowerClampPage> {
               model = state.powerClampModel;
             } else if (state is EnergyDataState) {
               chartData = state.energyData;
-              print(chartData);
             }
             return state is PowerClampLoadingState
                 ? const Center(
@@ -171,8 +170,7 @@ class _PowerClampPageState extends State<PowerClampPage> {
                                 dateSwitcher: _blocProvider.dateSwitcher(),
                                 formattedDate: _blocProvider.formattedDate,
                                 selectDateEvent: () {
-                                  _blocProvider
-                                      .add(SelectDateEvent(context: context));
+                                  _blocProvider.add(SelectDateEvent(context: context));
                                 },
                                 totalFactor: model
                                         .status.phaseA.dataPoints.isNotEmpty
@@ -300,7 +298,7 @@ class _PowerClampPageState extends State<PowerClampPage> {
     );
   }
 
-  DefaultContainer powerClampCard(
+  DefaultContainer powerClampCard( 
       {bool? isGeneral,
       String? title,
       String? totalCurrent,