diff --git a/src/lib/components/Icons/CommunityIcon.svelte b/src/lib/components/Icons/CommunityIcon.svelte
index 2d87592a..da7b294e 100644
--- a/src/lib/components/Icons/CommunityIcon.svelte
+++ b/src/lib/components/Icons/CommunityIcon.svelte
@@ -2,7 +2,14 @@
   export let color = 'currentColor';
 </script>
 
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg
+  width="22"
+  height="22"
+  viewBox="0 0 22 22"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class="dark"
+>
   <path
     fill-rule="evenodd"
     clip-rule="evenodd"
diff --git a/src/lib/components/Icons/ReviewsIcon.svelte b/src/lib/components/Icons/ReviewsIcon.svelte
index fc52e81f..679dab3e 100644
--- a/src/lib/components/Icons/ReviewsIcon.svelte
+++ b/src/lib/components/Icons/ReviewsIcon.svelte
@@ -2,7 +2,14 @@
   export let color = 'currentColor';
 </script>
 
-<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg
+  width="25"
+  height="24"
+  viewBox="0 0 25 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class="dark"
+>
   <g clip-path="url(#clip0_3647_18153)">
     <path
       d="M24 15C24 15.5304 23.7893 16.0391 23.4142 16.4142C23.0391 16.7893 22.5304 17 22 17H10L6 21V5C6 4.46957 6.21071 3.96086 6.58579 3.58579C6.96086 3.21071 7.46957 3 8 3H22C22.5304 3 23.0391 3.21071 23.4142 3.58579C23.7893 3.96086 24 4.46957 24 5V15Z"
diff --git a/src/lib/components/LMS/SideBar.svelte b/src/lib/components/LMS/SideBar.svelte
index cea38ffb..66b7653e 100644
--- a/src/lib/components/LMS/SideBar.svelte
+++ b/src/lib/components/LMS/SideBar.svelte
@@ -53,7 +53,7 @@
   ];
 </script>
 
-<aside class="root bg-gray-100 dark:bg-gray-700 h-full">
+<aside class=" root bg-gray-100 dark:bg-gray-700 h-full">
   <div class="h-full flex flex-col">
     <div class="border-b border-gray-200 pt-5 px-4">
       {#if $currentOrg.avatar_url}
diff --git a/src/lib/components/LMS/components/Learning.svelte b/src/lib/components/LMS/components/Learning.svelte
new file mode 100644
index 00000000..00e555d4
--- /dev/null
+++ b/src/lib/components/LMS/components/Learning.svelte
@@ -0,0 +1,58 @@
+<script>
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { course } from '$lib/components/Course/store';
+  import Box from '$lib/components/Box/index.svelte';
+  import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
+  import { courseInProgress } from './store';
+
+  const mockData = [
+    {
+      title: 'Colorful digital painting',
+      description: 'Learn the basics of figma and start design web apps for the world ...',
+      src: '/painting.png',
+      progress: 'w-[30%]'
+    },
+    {
+      title: 'Photo editing 101',
+      description: 'Learn the different techniques to edit photos using Adobe Lightroom.',
+      src: '/digital.png',
+      progress: 'w-[45%]'
+    }
+  ];
+</script>
+
+<section class="h-full mt-10 mb-20 xl:mt-2">
+  <p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">Currently Learning</p>
+  <Box className="w-full h-full border-2 border-[#EAEAEA] gap-10 rounded">
+    {#if courseInProgress === false}
+      <div class="flex flex-col items-center">
+        <CoursesEmptyIcon />
+        <h3 class="">No courses progress yet</h3>
+        <p class="w-[75%] text-center">Once you start a course, your progress will reflect here</p>
+      </div>
+    {:else}
+      <div class="w-full h-full flex flex-col justify-start">
+        {#each mockData as data, index}
+          <div class="p-5">
+            <span class="flex flex-col md:flex-row gap-3 items-start pb-5">
+              <img src={data.src} alt="course" class="hidden md:block md:w-[60px] md:h-[60px]" />
+              <div class="w-full">
+                <p class="text-base font-semibold dark:text-white">{data.title}</p>
+                <p class="text-xs font-normal text-[#656565] dark:text-white">{data.description}</p>
+              </div>
+              <PrimaryButton
+                label="continue"
+                variant={VARIANTS.OUTLINED}
+                className="rounded-none text-[#0233BD]"
+              />
+            </span>
+            <div class="relative bg-[#EAEAEA] w-full h-1">
+              <div class={`absolute top-0 left-0 bg-[#0233BD] h-full ${data.progress} ]`} />
+            </div>
+          </div>
+        {/each}
+      </div>
+    {/if}
+  </Box>
+</section>
diff --git a/src/lib/components/LMS/components/Student.svelte b/src/lib/components/LMS/components/Student.svelte
new file mode 100644
index 00000000..74ba2a44
--- /dev/null
+++ b/src/lib/components/LMS/components/Student.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { InlineCalendar, Datepicker } from 'svelte-calendar';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import Box from '$lib/components/Box/index.svelte';
+  import { isMobile } from '$lib/utils/store/useMobile';
+  import { formatDate } from '$lib/utils/functions/routes/dashboard';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+
+  let store;
+
+  const theme = {
+    calendar: {
+      width: '22em',
+      height: '100%',
+      shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)',
+      colors: {
+        background: {
+          highlight: '#0F62FE'
+        }
+      },
+      font: {
+        regular: '0.7em',
+        large: '0.9em'
+      }
+    }
+  };
+
+  // just copy and paste
+</script>
+
+<section class="w-full h-full mt-2">
+  <p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">Your Schedule</p>
+
+  <Box
+    className="p-5 border-2 border-[#EAEAEA] gap-5 rounded w-full h-fit xl:h-full flex flex-col justify-start"
+  >
+    <div class="w-full hidden xl:flex items-center justify-center">
+      <InlineCalendar bind:store {theme} />
+    </div>
+    {#if $isMobile}
+      <div class="header w-full flex items-center">
+        <Datepicker bind:store let:key let:send let:receive>
+          <button
+            class="text-lg font-bold text-blue-700 p-3 hover:bg-gray-300 rounded-md"
+            in:receive|local={{ key }}
+            out:send|local={{ key }}
+          >
+            {formatDate($store?.selected)}
+          </button>
+        </Datepicker>
+      </div>
+    {:else}
+      <p class="xl:hidden dark:text-white font-bold m-5">
+        {formatDate($store?.selected)}
+      </p>
+    {/if}
+    {#if formatDate($store?.selected) == 'Today'}
+      <span class="flex flex-col md:flex-row items-baseline justify-center gap-10 mt-5">
+        <p class="text-xs font-normal text-[#656565] dark:text-white">2:30pm</p>
+        <div class="flex flex-col items-start gap-4">
+          <span>
+            <p class="text-lg font-semibold text-[#262626] dark:text-white">
+              The essence of design collaboration
+            </p>
+            <a href="#" class="text-sm font-normal text-[#0233BD] dark:text-white"
+              >Figma Introduction</a
+            >
+          </span>
+          <PrimaryButton
+            label="Join Call"
+            variant={VARIANTS.OUTLINED}
+            className="bg-transparent outline-1 outline-[#0233BD] text-[#0233BD] rounded-md hover:bg-[blue]"
+          />
+        </div>
+      </span>
+    {:else}
+      <p>No Lesson on this day</p>
+    {/if}
+  </Box>
+</section>
diff --git a/src/lib/components/LMS/components/store.js b/src/lib/components/LMS/components/store.js
new file mode 100644
index 00000000..5c1a5c66
--- /dev/null
+++ b/src/lib/components/LMS/components/store.js
@@ -0,0 +1 @@
+export const courseInProgress = false;
diff --git a/src/routes/lms/+page.svelte b/src/routes/lms/+page.svelte
index ecb14607..ab96db80 100644
--- a/src/routes/lms/+page.svelte
+++ b/src/routes/lms/+page.svelte
@@ -1,15 +1,69 @@
 <script>
+  import Student from '$lib/components/LMS/components/Student.svelte';
+  import Learning from '$lib/components/LMS/components/Learning.svelte';
+  import { courseInProgress } from '$lib/components/LMS/components/store';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import Box from '$lib/components/Box/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import { goto } from '$app/navigation';
 </script>
 
-<section class="m-5 w-[calc(100vw - 250px)] h-full gap-5">
-  <h1 class="text-3xl font-semibold">Dashboard</h1>
+<svelte:head>
+  <title>Student Dashboard - ClassroomIO</title>
+</svelte:head>
 
-  <main class="w-full h-full flex flex-row gap-3">
-    <div class="w-full h-full border-2 border-dashed flex items-center justify-center">
-      <p>Student section</p>
+<section class="m-5 w-[calc(100vw - 300px)] h-full gap-5">
+  <h1 class="text-3xl font-semibold">Dashboard</h1>
+  <div
+    class="w-full h-fit lg:h-[265px] flex items-center justify-between p-2 md:p-5 lg:p-10 rounded-md bg-[#042172] my-2"
+  >
+    <span>
+      <p class="w-full md:w-[75%] lg:w-[80%] text-white text-xs lg:text-xl font-normal mb-5">
+        Today is another day to bring you closer to your learning goals. Don’t give up, the more you
+        learn the better you get.
+      </p>
+      <PrimaryButton
+        label="Start learning"
+        variant={VARIANTS.CONTAINED_WHITE}
+        className="bg-white text-blue-800"
+        onClick={() => goto('/lms/mylearning')}
+      />
+    </span>
+    <img
+      src="/images/student-learning.svg"
+      alt="student Learning Pictogram"
+      class="hidden md:block md:w-20 md:h-16 lg:w-[275px] lg:h-[205px]"
+    />
+  </div>
+  <main class="flex w-full h-full flex-col xl:flex-row gap-5">
+    <div class="w-full h-full">
+      <Student />
     </div>
-    <div class="w-full h-full border-2 border-dashed flex items-center justify-center">
-      <p>Currently Learning</p>
+
+    <div class="w-full h-full">
+      <Learning />
     </div>
+    <Box
+      className="w-full xl:w-[400px] h-full bg-[#F5F8FE] dark:bg-gray-500 flex items-center justify-center my-20 xl:mt-11 p-2"
+    >
+      <div
+        class="w-full h-full flex flex-col md:flex-row xl:flex-col items-center md:items-center xl:items-start gap-5 md:justify-around"
+      >
+        <div>
+          <img src="/images/target.svg" alt="student Learning score" />
+        </div>
+        <span class="text-center xl:text-start">
+          <p class="text-base font-semibold py-2 text-[#040F2D] dark:text-white">Your Progress</p>
+          {#if courseInProgress}
+            <p class="text-xs font-normal text-[#656565] dark:text-white">2/15 lessons completed</p>
+          {:else}
+            <p class="text-xs font-normal text-[#656565] dark:text-white">No lessons started</p>
+          {/if}
+        </span>
+        <h1 class="text-5xl md:text-7xl font-bold text-[#262626] dark:text-white my-0">
+          {courseInProgress ? 1 : 0} %
+        </h1>
+      </div>
+    </Box>
   </main>
 </section>
diff --git a/static/digital.png b/static/digital.png
new file mode 100644
index 00000000..ace32085
Binary files /dev/null and b/static/digital.png differ
diff --git a/static/images/student-learning.svg b/static/images/student-learning.svg
new file mode 100644
index 00000000..9113d0b7
--- /dev/null
+++ b/static/images/student-learning.svg
@@ -0,0 +1,5 @@
+<svg width="276" height="205" viewBox="0 0 276 205" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.84784 47.2127C1.82731 35.6597 10.3656 25.4669 21.9185 24.4463L237.467 5.40586C249.02 4.38533 259.213 12.9236 260.234 24.4766L272.32 161.302C273.341 172.855 264.802 183.048 253.249 184.069L37.7007 203.109C26.1477 204.13 15.9549 195.591 14.9343 184.038L2.84784 47.2127Z" fill="#3D022B"/>
+<path d="M21.8392 20.7669C23.5625 9.29764 34.2571 1.39698 45.7264 3.12024L254.781 34.5308C266.25 36.2541 274.151 46.9487 272.427 58.4179L253.709 183.002C251.985 194.472 241.291 202.372 229.821 200.649L20.767 169.238C9.29778 167.515 1.39709 156.821 3.12035 145.351L21.8392 20.7669Z" fill="#FECC06"/>
+<path d="M86.2195 76.5945L84.1557 74.5307L89.2135 69.4689L84.1557 64.407L86.2235 62.3392L93.3492 69.4689L86.2195 76.5945ZM85.1876 47.1251C84.0663 47.1251 83.1563 48.0351 83.1563 49.1563C83.1563 50.2776 84.0663 51.1876 85.1876 51.1876C86.3088 51.1876 87.2188 50.2776 87.2188 49.1563C87.2188 48.0351 86.3088 47.1251 85.1876 47.1251ZM95.3438 49.1563C95.3438 50.2776 94.4339 51.1876 93.3126 51.1876C92.1913 51.1876 91.2813 50.2776 91.2813 49.1563C91.2813 48.0351 92.1913 47.1251 93.3126 47.1251C94.4339 47.1251 95.3438 48.0351 95.3438 49.1563ZM103.469 49.1563C103.469 50.2776 102.559 51.1876 101.438 51.1876C100.316 51.1876 99.4063 50.2776 99.4063 49.1563C99.4063 48.0351 100.316 47.1251 101.438 47.1251C102.559 47.1251 103.469 48.0351 103.469 49.1563ZM148.156 65.4063C148.156 66.5276 147.246 67.4376 146.125 67.4376C145.004 67.4376 144.094 66.5276 144.094 65.4063C144.094 64.2851 145.004 63.3751 146.125 63.3751C147.246 63.3751 148.156 64.2851 148.156 65.4063ZM156.281 65.4063C156.281 66.5276 155.371 67.4376 154.25 67.4376C153.129 67.4376 152.219 66.5276 152.219 65.4063C152.219 64.2851 153.129 63.3751 154.25 63.3751C155.371 63.3751 156.281 64.2851 156.281 65.4063ZM164.406 65.4063C164.406 66.5276 163.496 67.4376 162.375 67.4376C161.254 67.4376 160.344 66.5276 160.344 65.4063C160.344 64.2851 161.254 63.3751 162.375 63.3751C163.496 63.3751 164.406 64.2851 164.406 65.4063ZM95.3438 138.531C95.3438 139.653 94.4339 140.563 93.3126 140.563C92.1913 140.563 91.2813 139.653 91.2813 138.531C91.2813 137.41 92.1913 136.5 93.3126 136.5C94.4339 136.5 95.3438 137.41 95.3438 138.531ZM125.813 97.3376H77.0626C76.2542 97.3376 75.6001 96.6835 75.6001 95.8751V43.0626C75.6001 42.2542 76.2542 41.6001 77.0626 41.6001H125.813C126.621 41.6001 127.275 42.2542 127.275 43.0626V95.8751C127.275 96.6835 126.621 97.3376 125.813 97.3376ZM124.35 56.7126H78.5251V94.4126H124.35V56.7126ZM124.35 44.5251H78.5251V53.7917H124.35V44.5251ZM200.4 59.3126V128.375C200.4 129.184 199.746 129.838 198.938 129.838H152.995C151.772 131.751 150.192 133.433 148.315 134.774C159.994 139.039 167.892 150.122 167.892 162.813L167.9 164.929L164.971 164.938L164.963 162.817C164.963 150.313 156.472 139.543 144.313 136.614C143.704 136.472 143.257 135.952 143.2 135.33C143.143 134.709 143.484 134.115 144.057 133.864C149.399 131.459 152.853 126.145 152.853 120.319C152.853 112.125 146.19 105.463 138 105.463C129.802 105.463 123.131 112.125 123.131 120.319C123.131 126.145 126.584 131.459 131.931 133.864C132.504 134.115 132.845 134.709 132.788 135.33C132.731 135.952 132.28 136.472 131.675 136.614C119.516 139.543 111.021 150.313 111.021 162.813L111.025 164.929L108.1 164.938L108.096 162.817C108.096 150.122 115.989 139.035 127.673 134.774C123.05 131.475 120.206 126.104 120.206 120.315C120.206 111.004 127.405 103.342 136.538 102.594V59.3126C136.538 58.5042 137.192 57.8501 138 57.8501H198.938C199.746 57.8501 200.4 58.5042 200.4 59.3126ZM197.475 72.9626H139.463V102.599C148.587 103.346 155.782 111.008 155.782 120.319C155.782 122.619 155.335 124.849 154.502 126.913H197.475V72.9626ZM197.475 60.7751H139.463V70.0376H197.475V60.7751ZM162.375 86.2876H146.125V89.2126H162.375V86.2876ZM169.038 110.094C169.038 103.687 174.25 98.4751 180.656 98.4751C187.063 98.4751 192.275 103.687 192.275 110.094C192.275 116.5 187.063 121.713 180.656 121.713C174.25 121.713 169.038 116.5 169.038 110.094ZM187.733 105.081L182.115 110.699L182.099 118.641C186.202 117.947 189.346 114.392 189.346 110.094C189.35 108.225 188.741 106.499 187.733 105.081ZM171.963 110.094C171.963 114.38 175.087 117.926 179.169 118.637L179.194 109.484L185.661 103.013C184.244 102.005 182.521 101.4 180.652 101.4C175.863 101.4 171.963 105.3 171.963 110.094ZM105.5 78.1626H93.3126V81.0876H105.5V78.1626ZM87.2188 125.775H99.4063V122.85H87.2188V125.775ZM87.2188 117.65H99.4063V114.725H87.2188V117.65ZM162.375 94.4126H146.125V97.3376H162.375V94.4126ZM190.813 86.2876H174.563V89.2126H190.813V86.2876ZM190.813 78.1626H174.563V81.0876H190.813V78.1626ZM162.375 78.1626H146.125V81.0876H162.375V78.1626ZM106.963 110.435V142.253C106.963 144.369 105.244 146.088 103.128 146.088H83.4976C81.381 146.088 79.6626 144.365 79.6626 142.253V110.435C79.6626 108.319 81.381 106.6 83.4976 106.6H103.128C105.244 106.6 106.963 108.319 106.963 110.435ZM104.038 133.9H82.5876V142.253C82.5876 142.752 82.9979 143.163 83.4976 143.163H103.128C103.631 143.163 104.038 142.752 104.038 142.253V133.9ZM104.038 110.435C104.038 109.935 103.627 109.525 103.128 109.525H83.4976C82.9938 109.525 82.5876 109.935 82.5876 110.435V130.975H104.038V110.435Z" fill="#581010"/>
+</svg>
diff --git a/static/images/target.svg b/static/images/target.svg
new file mode 100644
index 00000000..aa3067bb
--- /dev/null
+++ b/static/images/target.svg
@@ -0,0 +1,13 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3547_18366)">
+<path opacity="0.2" d="M40 55C48.2843 55 55 48.2843 55 40C55 31.7157 48.2843 25 40 25C31.7157 25 25 31.7157 25 40C25 48.2843 31.7157 55 40 55Z" fill="#0233BD"/>
+<path d="M40 40L70 10" stroke="#0233BD" stroke-width="5.0625" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M61.2121 18.7841C55.8984 13.4829 48.7886 10.3691 41.2891 10.0588C33.7896 9.74855 26.4469 12.2643 20.7134 17.1084C14.9799 21.9525 11.2734 28.7722 10.3271 36.2182C9.38075 43.6641 11.2636 51.1941 15.6031 57.3184C19.9426 63.4427 26.4226 67.7152 33.7613 69.2907C41.0999 70.8662 48.7626 69.63 55.2335 65.8265C61.7043 62.023 66.5119 55.9294 68.7052 48.7511C70.8985 41.5728 70.3177 33.8328 67.0778 27.0622" stroke="#0233BD" stroke-width="5.0625" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M50.606 29.3948C48.1247 26.9165 44.8534 25.3859 41.3607 25.0691C37.868 24.7524 34.3748 25.6694 31.4881 27.6609C28.6013 29.6524 26.5036 32.5924 25.5596 35.9699C24.6155 39.3475 24.8847 42.9491 26.3205 46.1487C27.7562 49.3484 30.2677 51.9438 33.4184 53.484C36.5692 55.0241 40.1599 55.4116 43.5667 54.5791C46.9735 53.7465 49.9808 51.7466 52.0661 48.9269C54.1514 46.1072 55.1828 42.646 54.981 39.1448" stroke="#0233BD" stroke-width="5.0625" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3547_18366">
+<rect width="80" height="80" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/static/painting.png b/static/painting.png
new file mode 100644
index 00000000..4caae879
Binary files /dev/null and b/static/painting.png differ