diff --git a/src/pages/Dashboard/components/BarGraph/index.tsx b/src/pages/Dashboard/components/BarGraph/index.tsx
new file mode 100644
index 0000000..b92b8e7
--- /dev/null
+++ b/src/pages/Dashboard/components/BarGraph/index.tsx
@@ -0,0 +1,38 @@
+import { Center, HStack, Text, VStack } from '@chakra-ui/react';
+import { Chart as ChartJS, CategoryScale, LinearScale, BarElement } from 'chart.js';
+import { Bar, Doughnut } from 'react-chartjs-2';
+
+ChartJS.register(CategoryScale, LinearScale, BarElement);
+
+type Props = {
+  values: number[];
+  labels?: string[];
+};
+
+export const BarGraph: React.FC<Props> = ({ values, labels }) => {
+  return (
+    <VStack
+      justifyContent="center"
+      flex={2}
+      minH={300}
+      alignItems="center"
+      p="16px"
+      bg="#F2F4F7"
+      borderRadius="16px"
+      gap="0px"
+    >
+      <Bar
+        options={{ responsive: true }}
+        data={{
+          labels,
+          datasets: [
+            {
+              data: values,
+              backgroundColor: ['#C2E0FF', '#47A3FF', '#70B8FF', '#99CCFF', '#4B83D2'],
+            },
+          ],
+        }}
+      />
+    </VStack>
+  );
+};
diff --git a/src/pages/Dashboard/components/CardValue/index.tsx b/src/pages/Dashboard/components/CardValue/index.tsx
new file mode 100644
index 0000000..310f209
--- /dev/null
+++ b/src/pages/Dashboard/components/CardValue/index.tsx
@@ -0,0 +1,19 @@
+import { Text, VStack } from '@chakra-ui/react';
+
+type Props = {
+  value: number | string;
+  label: string;
+};
+
+export const CardValue: React.FC<Props> = ({ label, value }) => {
+  return (
+    <VStack flex={1} alignItems="center" p="16px" bg="#F2F4F7" borderRadius="16px" gap="0px">
+      <Text mb="4px" fontSize="40px" fontWeight={600}>
+        {value}
+      </Text>
+      <Text mt={0} textAlign="center" color="#111417" fontSize="14px">
+        {label}
+      </Text>
+    </VStack>
+  );
+};
diff --git a/src/pages/Dashboard/components/DoughnutGraph/index.tsx b/src/pages/Dashboard/components/DoughnutGraph/index.tsx
new file mode 100644
index 0000000..aa3c7cf
--- /dev/null
+++ b/src/pages/Dashboard/components/DoughnutGraph/index.tsx
@@ -0,0 +1,60 @@
+import { Center, Text, VStack } from '@chakra-ui/react';
+import { Chart as ChartJS, ChartData, ArcElement, Tooltip } from 'chart.js';
+import { Doughnut } from 'react-chartjs-2';
+
+ChartJS.register(ArcElement, Tooltip);
+
+type Props = {
+  title?: string;
+  subTitle?: string;
+  label?: string;
+  values: number[];
+  labels?: string[];
+};
+
+export const DoughnutGraph: React.FC<Props> = ({ values, label, subTitle, title, labels }) => {
+  const teachersThatCompletedTheSecondCoachSession: ChartData<'doughnut', number[], string> = {
+    labels,
+    datasets: [
+      {
+        data: values,
+        backgroundColor: ['#3373CC', '#66CCCC', '#297A7A', '#264673', '#D1F0F0', '#C2E0FF'],
+        borderWidth: 0,
+      },
+    ],
+  };
+
+  return (
+    <VStack flex={1} justifyContent="center" alignItems="stretch" p="16px" bg="#F2F4F7" borderRadius="16px">
+      <Center position="relative">
+        <Doughnut
+          data={teachersThatCompletedTheSecondCoachSession}
+          options={{ radius: 100, cutout: '80%' }}
+          height="200px"
+          width="200px"
+        />
+        {title && (
+          <VStack
+            top="35px"
+            position="absolute"
+            borderRadius="50%"
+            w="100%"
+            h="calc(100% - 80px)"
+            justifyContent="center"
+            gap={0}
+          >
+            <Text fontSize="42px" fontWeight={600} color="#111417">
+              {title}
+            </Text>
+            <Text fontSize={16} color="#576375">
+              {subTitle}
+            </Text>
+          </VStack>
+        )}
+      </Center>
+      <Text mt="16px" textAlign="center" color="#111417">
+        {label}
+      </Text>
+    </VStack>
+  );
+};
diff --git a/src/pages/Dashboard/components/SpeedometerGraph/index.tsx b/src/pages/Dashboard/components/SpeedometerGraph/index.tsx
new file mode 100644
index 0000000..d1be5b7
--- /dev/null
+++ b/src/pages/Dashboard/components/SpeedometerGraph/index.tsx
@@ -0,0 +1,55 @@
+import { Center, Text, VStack } from '@chakra-ui/react';
+import { ChartData } from 'chart.js';
+import { Doughnut } from 'react-chartjs-2';
+
+type Props = {
+  label: string;
+  value: number;
+  maxValue: number;
+};
+
+export const SpeedometerGraph: React.FC<Props> = ({ maxValue, value, label }) => {
+  const coachingSessionPerTeacher: ChartData<'doughnut', number[], string> = {
+    datasets: [
+      {
+        data: [4.3, 0.7],
+        backgroundColor: ['#3373CC', '#C7CBD1'],
+        borderWidth: 0,
+        circumference: 270,
+        rotation: 225,
+      },
+    ],
+  };
+
+  return (
+    <VStack flex={1} justifyContent="center" alignItems="stretch" p="16px" bg="#F2F4F7" borderRadius="16px">
+      <Center position="relative">
+        <Doughnut
+          data={coachingSessionPerTeacher}
+          options={{ radius: 100, cutout: '80%' }}
+          height="200px"
+          width="200px"
+        />
+        <VStack
+          top="55px"
+          position="absolute"
+          borderRadius="50%"
+          w="100%"
+          h="calc(100% - 90px)"
+          justifyContent="center"
+          gap={0}
+        >
+          <Text fontSize="42px" fontWeight={600} color="#111417">
+            {value}
+          </Text>
+          <Text fontSize={16} color="#576375">
+            Goal: {maxValue}
+          </Text>
+        </VStack>
+      </Center>
+      <Text mt="16px" textAlign="center" color="#111417">
+        {label}
+      </Text>
+    </VStack>
+  );
+};
diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
index 992335a..5f556bc 100644
--- a/src/pages/Dashboard/index.tsx
+++ b/src/pages/Dashboard/index.tsx
@@ -1,70 +1,41 @@
-import { Box, Button, Center, HStack, Text, VStack } from '@chakra-ui/react';
-import {
-  Chart as ChartJS,
-  ArcElement,
-  Tooltip,
-  Legend,
-  ChartData,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-} from 'chart.js';
+import { Button, Center, HStack, Text, VStack } from '@chakra-ui/react';
+import { Chart as ChartJS, ChartData, CategoryScale, LinearScale, BarElement } from 'chart.js';
 import { Bar, Doughnut } from 'react-chartjs-2';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DASHBOARD } from './mock';
+import { IDashboard, ITeachingPractices } from '@/types';
+import DashboardService from '@/services/dashboard';
+import Loader from '@/components/Base/Loader';
+import { CardValue } from './components/CardValue';
+import { SpeedometerGraph } from './components/SpeedometerGraph';
+import { DoughnutGraph } from './components/DoughnutGraph';
+import { BarGraph } from './components/BarGraph';
 
-ChartJS.register(ArcElement, Tooltip);
-
-ChartJS.register(CategoryScale, LinearScale, BarElement);
-
-export const coachingSessionPerTeacher: ChartData<'doughnut', number[], string> = {
-  datasets: [
-    {
-      data: [4.3, 0.7],
-      backgroundColor: ['#3373CC', '#C7CBD1'],
-      borderWidth: 0,
-      circumference: 270,
-      rotation: 225,
-    },
-  ],
-};
-export const teachersThatCompletedTheSecondCoachSession: ChartData<'doughnut', number[], string> = {
-  datasets: [
-    {
-      data: [48, 52],
-      backgroundColor: ['#3373CC', '#66CCCC'],
-      borderWidth: 0,
-      rotation: 180,
-    },
-  ],
-};
+const DashboardPage: React.FC = () => {
+  const [loading, setLoading] = useState(true);
+  const [dashboard, setDashboard] = useState<IDashboard>();
+  const [selected, setSelected] = useState<ITeachingPractices>();
 
-export const teachingPracticesCount: ChartData<'doughnut', number[], string> = {
-  labels: DASHBOARD.teachingPractices.map((item) => item.name),
-  datasets: [
-    {
-      data: DASHBOARD.teachingPractices.map((item) => item.data.teachers),
-      backgroundColor: ['#D1F0F0', '#C2E0FF', '#3373CC', '#264673', '#66CCCC', '#297A7A'],
-      borderWidth: 0,
-    },
-  ],
-};
+  useEffect(() => {
+    DashboardService.getData().then((data) => {
+      setDashboard(data);
+      setSelected(data.teachingPractices[0]);
+      setLoading(false);
+    });
+  }, []);
 
-const DashboardPage: React.FC = () => {
-  const [selected, setSelected] = useState(DASHBOARD.teachingPractices[0]);
+  useEffect(() => {
+    if (dashboard) {
+    }
+  }, [dashboard]);
 
-  const renderValue = (value: number, title: string) => (
-    <VStack flex={1} alignItems="center" p="16px" bg="#F2F4F7" borderRadius="16px" gap="0px">
-      <Text mb="4px" fontSize="40px" fontWeight={600}>
-        {value}
-      </Text>
-      <Text mt={0} textAlign="center" color="#111417" fontSize="14px">
-        {title}
-      </Text>
-    </VStack>
-  );
+  if (loading || !dashboard || !selected)
+    return (
+      <Center>
+        <Loader />
+      </Center>
+    );
 
   return (
     <VStack mx="auto" minH="100vh" maxW="1200px" position="relative" overflow="scroll" alignItems="flex-start" p="56px">
@@ -77,73 +48,28 @@ const DashboardPage: React.FC = () => {
             The numbers that represent coach engagement using the Coach platform in the selected period.
           </Text>
           <HStack gap="16px" alignItems="stretch">
-            {renderValue(DASHBOARD.engagement.teachersCoached, 'Teachers coached')}
-            {renderValue(DASHBOARD.engagement.activeCoaches, 'Active coaches')}
-            {renderValue(DASHBOARD.engagement.coachingSessions, 'Coaching sessions')}
+            <CardValue label={'Teachers coached'} value={dashboard.engagement.teachersCoached} />
+            <CardValue label={'Active coaches'} value={dashboard.engagement.activeCoaches} />
+            <CardValue label={'Coaching sessions'} value={dashboard.engagement.coachingSessions} />
           </HStack>
           <HStack gap="16px" alignItems="stretch">
-            <VStack flex={1} justifyContent="center" alignItems="stretch" p="16px" bg="#F2F4F7" borderRadius="16px">
-              <Center position="relative">
-                <Doughnut
-                  data={coachingSessionPerTeacher}
-                  options={{ radius: 100, cutout: '80%' }}
-                  height="200px"
-                  width="200px"
-                />
-                <VStack
-                  top="55px"
-                  position="absolute"
-                  borderRadius="50%"
-                  w="100%"
-                  h="calc(100% - 90px)"
-                  justifyContent="center"
-                  gap={0}
-                >
-                  <Text fontSize="42px" fontWeight={600} color="#111417">
-                    {DASHBOARD.engagement.coachingSessionPerTeacher}
-                  </Text>
-                  <Text fontSize={16} color="#576375">
-                    Goal: {DASHBOARD.engagement.coachingSessionPerTeacherGoal}
-                  </Text>
-                </VStack>
-              </Center>
-              <Text mt="16px" textAlign="center" color="#111417">
-                Coaching sessions per teacher over last three months
-              </Text>
-            </VStack>
-            <VStack flex={1} justifyContent="center" alignItems="stretch" p="16px" bg="#F2F4F7" borderRadius="16px">
-              <Center position="relative">
-                <Doughnut
-                  data={teachersThatCompletedTheSecondCoachSession}
-                  options={{ radius: 100, cutout: '80%' }}
-                  height="200px"
-                  width="200px"
-                />
-                <VStack
-                  top="35px"
-                  position="absolute"
-                  borderRadius="50%"
-                  w="100%"
-                  h="calc(100% - 80px)"
-                  justifyContent="center"
-                  gap={0}
-                >
-                  <Text fontSize="42px" fontWeight={600} color="#111417">
-                    {(
-                      (DASHBOARD.engagement.teacherThatCompletedSecondSession / DASHBOARD.engagement.teachersCoached) *
-                      100
-                    ).toFixed(0)}
-                    %
-                  </Text>
-                  <Text fontSize={16} color="#576375">
-                    Of teachers
-                  </Text>
-                </VStack>
-              </Center>
-              <Text mt="16px" textAlign="center" color="#111417">
-                Completed a second coach session
-              </Text>
-            </VStack>
+            <SpeedometerGraph
+              label="Coaching sessions per teacher over last three months"
+              value={dashboard.engagement.coachingSessionPerTeacher}
+              maxValue={dashboard.engagement.coachingSessionPerTeacherGoal}
+            />
+            <DoughnutGraph
+              labels={dashboard.teachingPractices.map((item) => item.name)}
+              values={[dashboard.engagement.teacherThatCompletedSecondSession, DASHBOARD.engagement.teachersCoached]}
+              label="Completed a second coach session"
+              title={
+                (
+                  (DASHBOARD.engagement.teacherThatCompletedSecondSession / DASHBOARD.engagement.teachersCoached) *
+                  100
+                ).toFixed(0) + '%'
+              }
+              subTitle="Of teachers"
+            />
           </HStack>
         </VStack>
 
@@ -154,9 +80,8 @@ const DashboardPage: React.FC = () => {
           <Text color="#111417" fontSize="16px" lineHeight="24px">
             Teaching practices teachers and coaches agreed to work on between coaching sessions
           </Text>
-          <Center flex={1} alignItems="center" p="16px" bg="#F2F4F7" borderRadius="16px">
-            <Doughnut data={teachingPracticesCount} options={{ radius: 120, cutout: '80%' }} />
-          </Center>
+
+          <DoughnutGraph values={dashboard.teachingPractices.map((item) => item.data.teachers)} />
         </VStack>
       </HStack>
 
@@ -174,8 +99,8 @@ const DashboardPage: React.FC = () => {
             borderRadius="full"
             border="1px solid #DCE0E5"
             onClick={() => setSelected(item)}
-            bg={selected === item ? '#C2E0FF' : '#ffffff'}
-            color={selected === item ? '#264673' : '#111417'}
+            bg={selected.name === item.name ? '#C2E0FF' : '#ffffff'}
+            color={selected.name === item.name ? '#264673' : '#111417'}
           >
             {item.name}
           </Button>
@@ -187,41 +112,28 @@ const DashboardPage: React.FC = () => {
       </Text>
 
       <HStack w="100%" mt="24px" alignItems="stretch">
-        <VStack
-          justifyContent="center"
-          flex={2}
-          minH={300}
-          alignItems="center"
-          p="16px"
-          bg="#F2F4F7"
-          borderRadius="16px"
-          gap="0px"
-        >
-          <Bar
-            options={{ responsive: true }}
-            data={{
-              labels: ['Needs work', 'Keep working', 'Needs attention', 'Almost there', 'Doing great'],
-              datasets: [
-                {
-                  label: 'Dataset 1',
-                  data: [
-                    selected.data.stars.needsWork,
-                    selected.data.stars.keepWorking,
-                    selected.data.stars.needsAttention,
-                    selected.data.stars.almostThere,
-                    selected.data.stars.doingGreat,
-                  ],
-                  backgroundColor: ['#C2E0FF', '#47A3FF', '#70B8FF', '#99CCFF', '#4B83D2'],
-                },
-              ],
-            }}
-          />
-        </VStack>
+        <BarGraph
+          labels={['Needs work', 'Keep working', 'Needs attention', 'Almost there', 'Doing great']}
+          values={[
+            selected.data.stars.needsWork,
+            selected.data.stars.keepWorking,
+            selected.data.stars.needsAttention,
+            selected.data.stars.almostThere,
+            selected.data.stars.doingGreat,
+          ]}
+        />
+
         <VStack flex={3} alignItems="stretch">
           <HStack alignItems="stretch">
-            {renderValue(selected.data.teachersShowingImprovement, 'Teachers showing improvement or mastery')}
-            {renderValue(selected.data.teachers, 'Teachers and coaches chose to work on improving this practice')}
-            {renderValue(selected.data.teacherWithoutFeedback, 'Teachers didn’t have a feedback session')}
+            <CardValue
+              label={'Teachers showing improvement or mastery'}
+              value={selected.data.teachersShowingImprovement}
+            />
+            <CardValue
+              label={'Teachers and coaches chose to work on improving this practice'}
+              value={selected.data.teachers}
+            />
+            <CardValue label={'Teachers didn’t have a feedback session'} value={selected.data.teacherWithoutFeedback} />
           </HStack>
 
           <VStack
diff --git a/src/services/dashboard/index.ts b/src/services/dashboard/index.ts
new file mode 100644
index 0000000..b59b818
--- /dev/null
+++ b/src/services/dashboard/index.ts
@@ -0,0 +1,8 @@
+import { IDashboard } from '@/types';
+import _axios from '..';
+
+export const DashboardService = {
+  getData: async (): Promise<IDashboard> => (await _axios.get<IDashboard>('dashboard')).data,
+};
+
+export default DashboardService;
diff --git a/src/types/index.ts b/src/types/index.ts
index 7c1ea47..e818235 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -124,3 +124,32 @@ export interface ILogs {
   description: string;
   created_at: string;
 }
+
+export interface ITeachingPractices {
+  name: string;
+  data: {
+    stars: {
+      needsWork: number;
+      keepWorking: number;
+      needsAttention: number;
+      almostThere: number;
+      doingGreat: number;
+    };
+    teachers: number;
+    teachersShowingImprovement: number;
+    teacherWithoutFeedback: number;
+  };
+}
+
+export interface IDashboard {
+  teachingPractices: ITeachingPractices[];
+  engagement: {
+    teachersCoached: number;
+    activeCoaches: number;
+    coachingSessions: number;
+    coachingSessionPerTeacher: number;
+    coachingSessionPerTeacherGoal: number;
+    teacherThatCompletedSecondSession: number;
+  };
+  targetedImprovementAreas: {};
+}