diff --git a/client/src/Teacher/TeacherDashboard.tsx b/client/src/Teacher/TeacherDashboard.tsx
index 448cb8f7..aa99ec64 100644
--- a/client/src/Teacher/TeacherDashboard.tsx
+++ b/client/src/Teacher/TeacherDashboard.tsx
@@ -9,7 +9,7 @@ import Typography from '@mui/material/Typography';
 import { styled } from '@mui/system';
 import { useNavigate, useParams } from 'react-router-dom';
 // eslint-disable-next-line
-import { Grid } from '@mui/material';
+import { CircularProgress, Grid } from '@mui/material';
 import axios from 'axios';
 import { useData } from '../util/api';
 import { useAppSelector } from '../util/redux/hooks';
@@ -83,7 +83,10 @@ function StudentConcernsCard(props: any) {
 
 function SplitGrid() {
   const self = useAppSelector(selectUser);
+
+  const [loading, setLoading] = useState(true);
   const [studentData, setStudentData] = useState<any[]>([]);
+  const [levels, setLevels] = useState<any>([]);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -92,6 +95,18 @@ function SplitGrid() {
       );
 
       setStudentData(data);
+
+      const l: { [key: number]: number } = {};
+      data.forEach((student: any) => {
+        if (student.lessonNumber in l) {
+          l[student.lessonNumber] += 1;
+        } else {
+          l[student.lessonNumber] = 1;
+        }
+      });
+      setLevels(l);
+
+      setLoading(false);
     };
     fetchData();
   }, [self.email]);
@@ -103,6 +118,21 @@ function SplitGrid() {
     (student: any) => student.attendanceFlag,
   );
 
+  if (loading) {
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+        }}
+      >
+        <CircularProgress />
+      </Box>
+    );
+  }
+
   return (
     <Box>
       <PageHeader />
@@ -142,7 +172,7 @@ function SplitGrid() {
 
             <Box display="flex" flexDirection="row" width="100%">
               <Box width="50%" paddingRight={2}>
-                <LessonLevels />
+                <LessonLevels levels={levels} />
                 <Box marginTop={2}>
                   <StudentConcernsCard
                     students={academicFlags}
diff --git a/client/src/components/LessonLevels.tsx b/client/src/components/LessonLevels.tsx
index 431e8e69..3766b19e 100644
--- a/client/src/components/LessonLevels.tsx
+++ b/client/src/components/LessonLevels.tsx
@@ -25,35 +25,23 @@ Chart.register(
   Tooltip,
 );
 
-function LessonLevels() {
-  const self = useAppSelector(selectUser);
-  const tempId = useData(`user/email/${self.email}`);
-  const id = tempId?.data ?? null;
-
-  const [labels, setLabels] = useState<number[]>([]);
-  const [data, setData] = useState<number[]>([]);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      const res = await axios.get(
-        `http://localhost:4000/api/teacher/lesson-levels/${id}`,
-      );
-
-      let max = 0;
-      Object.keys(res.data).forEach((level: string) => {
-        if (Number(level) > max) {
-          max = Number(level);
-        }
-      });
+interface ILessonLevelsProps {
+  levels: {
+    [key: number]: number;
+  };
+}
 
-      const l = Array.from(Array(max + 1).keys());
-      setLabels(l);
-      const d = l.map((level) => Number(res.data[level] ?? 0));
-      setData(d);
-    };
+function LessonLevels({ levels }: ILessonLevelsProps) {
+  let max = 0;
+  Object.keys(levels).forEach((level: string) => {
+    if (Number(level) > max) {
+      max = Number(level);
+    }
+  });
 
-    fetchData();
-  }, [id]);
+  const labels = Array.from(Array(max + 1).keys());
+  const data = labels.map((level) => Number(levels[level] ?? 0));
+  console.log(levels);
 
   return (
     <Card sx={{ width: '100%', height: '400px' }}>