diff --git a/src/components/EnergyConsumptionChart/index.tsx b/src/components/EnergyConsumptionChart/index.tsx
index b99fad70df5..a14ba629fa6 100644
--- a/src/components/EnergyConsumptionChart/index.tsx
+++ b/src/components/EnergyConsumptionChart/index.tsx
@@ -12,19 +12,16 @@ import ChartDataLabels from "chartjs-plugin-datalabels"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { Bar } from "react-chartjs-2"
-import {
-  Box,
-  Center,
-  Text,
-  useBreakpointValue,
-  useColorModeValue,
-} from "@chakra-ui/react"
+import { useBreakpointValue } from "@chakra-ui/react"
 
 import type { Lang } from "@/lib/types"
 
+import { Center } from "@/components/ui/flex"
+
 import { wrapLabel } from "@/lib/utils/charts"
 import { isLangRightToLeft } from "@/lib/utils/translations"
 
+import useColorModeValue from "@/hooks/useColorModeValue"
 import { useIsClient } from "@/hooks/useIsClient"
 
 // ChartDataLabels required to display y-labels on top of bars
@@ -237,26 +234,19 @@ const EnergyConsumptionChart = () => {
   } satisfies ChartData
 
   return (
-    <Box my={16}>
-      <Center w="full" mb={{ base: 4, md: 6 }}>
-        <Box
-          position="relative"
-          maxW="500px"
-          m="auto"
-          w="80vw"
-          h={{ base: "300px", md: "400px" }}
-          mb={{ base: 4, md: 0 }}
-        >
+    <div className="my-16">
+      <Center className="mb-4 w-full md:mb-6">
+        <div className="relative m-auto mb-4 h-[300px] w-[80vw] max-w-[500px] md:mb-0 md:h-[400px]">
           {isClient && (
             <Bar options={chartOptions} data={chartData} updateMode="none" />
           )}
-        </Box>
+        </div>
       </Center>
 
-      <Text fontWeight="semibold" textAlign="center">
+      <p className="text-center font-semibold">
         {t("page-what-is-ethereum-energy-consumption-chart-legend")}
-      </Text>
-    </Box>
+      </p>
+    </div>
   )
 }