diff --git a/src/components/quantity-lessons-card/QuantityLessonsChart.tsx b/src/components/quantity-lessons-card/QuantityLessonChart/QuantityLessonsChart.constants.ts
similarity index 53%
rename from src/components/quantity-lessons-card/QuantityLessonsChart.tsx
rename to src/components/quantity-lessons-card/QuantityLessonChart/QuantityLessonsChart.constants.ts
index 2995d2d2d7..2b3a1f20ce 100644
--- a/src/components/quantity-lessons-card/QuantityLessonsChart.tsx
+++ b/src/components/quantity-lessons-card/QuantityLessonChart/QuantityLessonsChart.constants.ts
@@ -1,21 +1,6 @@
-import React, { useMemo } from 'react'
-import { Bar } from 'react-chartjs-2'
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-} from 'chart.js'
-import { Box } from '@mui/material'
-import useBreakpoints from '~/hooks/use-breakpoints'
 import palette from '~/styles/app-theme/app.pallete'
 
-ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
-
-const data = {
+export const data = {
   labels: [
     'JAN',
     'FEB',
@@ -42,7 +27,7 @@ const data = {
   ]
 }
 
-const options = {
+export const options = {
   responsive: true,
   maintainAspectRatio: false,
   plugins: {
@@ -75,22 +60,3 @@ const options = {
     }
   }
 }
-
-const QuantityLessonsChart = () => {
-  const { isMobile } = useBreakpoints()
-
-  const dataResponsive = useMemo(() => {
-    const obj = data
-    obj.datasets[0].barThickness = isMobile ? 20 : 28
-
-    return obj
-  }, [isMobile])
-
-  return (
-    <Box height={'181px'} key={+isMobile}>
-      <Bar data={dataResponsive} options={options} />
-    </Box>
-  )
-}
-
-export default QuantityLessonsChart
diff --git a/src/components/quantity-lessons-card/QuantityLessonChart/QuantityLessonsChart.tsx b/src/components/quantity-lessons-card/QuantityLessonChart/QuantityLessonsChart.tsx
new file mode 100644
index 0000000000..3fc05a84ed
--- /dev/null
+++ b/src/components/quantity-lessons-card/QuantityLessonChart/QuantityLessonsChart.tsx
@@ -0,0 +1,35 @@
+import React, { useMemo } from 'react'
+import { Bar } from 'react-chartjs-2'
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+} from 'chart.js'
+import { Box } from '@mui/material'
+import useBreakpoints from '~/hooks/use-breakpoints'
+import { data, options } from './QuantityLessonsChart.constants'
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
+
+const QuantityLessonsChart = () => {
+  const { isMobile } = useBreakpoints()
+
+  const dataResponsive = useMemo(() => {
+    const obj = data
+    obj.datasets[0].barThickness = isMobile ? 20 : 28
+
+    return obj
+  }, [isMobile])
+
+  return (
+    <Box height='181px' key={+isMobile}>
+      <Bar data={dataResponsive} options={options} />
+    </Box>
+  )
+}
+
+export default QuantityLessonsChart
diff --git a/src/components/quantity-lessons-card/QuantityLessonsCard.tsx b/src/components/quantity-lessons-card/QuantityLessonsCard.tsx
index 3aa93fb37d..20a96b74c7 100644
--- a/src/components/quantity-lessons-card/QuantityLessonsCard.tsx
+++ b/src/components/quantity-lessons-card/QuantityLessonsCard.tsx
@@ -2,7 +2,7 @@ import { Box, Button, MenuItem, Select, Typography } from '@mui/material'
 import { styles } from './QuantityLessonsCard.styles'
 import SchoolIcon from '@mui/icons-material/School'
 import EventIcon from '@mui/icons-material/Event'
-import QuantityLessonsChart from './QuantityLessonsChart'
+import QuantityLessonsChart from './QuantityLessonChart/QuantityLessonsChart'
 import { useTranslation } from 'react-i18next'
 import { categories, subjects, years } from './QuantityLessons.constants'