diff --git a/lazy-timer-fe/src/components/Charts/LineChart.jsx b/lazy-timer-fe/src/components/Charts/LineChart.jsx
new file mode 100644
index 0000000..8909279
--- /dev/null
+++ b/lazy-timer-fe/src/components/Charts/LineChart.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, DateTime, Legend, Tooltip } from '@syncfusion/ej2-react-charts';
+
+import { lineCustomSeries, LinePrimaryXAxis, LinePrimaryYAxis } from '../../data/dummy';
+import { useStateContext } from '../../contexts/ContextProvider';
+
+const LineChart = () => {
+  const { currentMode } = useStateContext();
+
+  return (
+    <ChartComponent
+      id="line-chart"
+      height="420px"
+      primaryXAxis={LinePrimaryXAxis}
+      primaryYAxis={LinePrimaryYAxis}
+      chartArea={{ border: { width: 0 } }}
+      tooltip={{ enable: true }}
+      background={currentMode === 'Dark' ? '#33373E' : '#fff'}
+      legendSettings={{ background: 'white' }}
+    >
+      <Inject services={[LineSeries, DateTime, Legend, Tooltip]} />
+      <SeriesCollectionDirective>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        {lineCustomSeries.map((item, index) => <SeriesDirective key={index} {...item} />)}
+      </SeriesCollectionDirective>
+    </ChartComponent>
+  );
+};
+
+export default LineChart;