diff --git a/lazy-timer-fe/src/components/Charts/Pie.jsx b/lazy-timer-fe/src/components/Charts/Pie.jsx
new file mode 100644
index 0000000..a6d9483
--- /dev/null
+++ b/lazy-timer-fe/src/components/Charts/Pie.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, AccumulationLegend, PieSeries, AccumulationDataLabel, Inject, AccumulationTooltip } from '@syncfusion/ej2-react-charts';
+
+import { useStateContext } from '../../contexts/ContextProvider';
+
+const Doughnut = ({ id, data, legendVisiblity, height }) => {
+  const { currentMode } = useStateContext();
+
+  return (
+    <AccumulationChartComponent
+      id={id}
+      legendSettings={{ visible: legendVisiblity, background: 'white' }}
+      height={height}
+      background={currentMode === 'Dark' ? '#33373E' : '#fff'}
+      tooltip={{ enable: true }}
+    >
+      <Inject services={[AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip]} />
+      <AccumulationSeriesCollectionDirective>
+        <AccumulationSeriesDirective
+          name="Sale"
+          dataSource={data}
+          xName="x"
+          yName="y"
+          innerRadius="40%"
+          startAngle={0}
+          endAngle={360}
+          radius="70%"
+          explode
+          explodeOffset="10%"
+          explodeIndex={2}
+          dataLabel={{
+            visible: true,
+            name: 'text',
+            position: 'Inside',
+            font: {
+              fontWeight: '600',
+              color: '#fff',
+            },
+          }}
+        />
+      </AccumulationSeriesCollectionDirective>
+    </AccumulationChartComponent>
+  );
+};
+
+export default Doughnut;