From 32ba251b770248476ba99c158d94a84de80da27b Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sat, 4 Jan 2025 05:55:14 +0100
Subject: [PATCH] feat: move lesson comments under lesson note

---
 .../Apps/components/Comments/index.svelte     | 241 ------------
 .../Apps/components/Notes/index.svelte        |   2 +-
 .../Apps/components/Poll/index.svelte         |   2 +-
 .../Apps/components/QandA/index.svelte        |  10 +-
 .../src/lib/components/Apps/index.svelte      |  50 +--
 .../Course/components/Attendance/index.svelte |   2 +-
 .../components/Lesson/Exercise/index.svelte   |   2 +-
 .../components/Lesson/Exercises/index.svelte  |  28 +-
 .../Materials/components/Comments.svelte      | 367 ++++++++++++++++++
 .../Materials/{constants.js => constants.ts}  |  16 +-
 .../components/Lesson/Materials/index.svelte  |  89 +++--
 .../components/HTMLRender/HTMLRender.svelte   |   2 +-
 .../lib/components/Modal/DeleteModal.svelte   |   6 +-
 .../lib/components/Org/Community/index.svelte |  35 +-
 .../index.svelte => Page/Body.svelte}         |   6 +-
 .../{PageNav/index.svelte => Page/Nav.svelte} |  28 +-
 .../{NotFound => Page}/NotFound.svelte        |  10 +-
 .../index.svelte => Page/Unauthorized.svelte} |   8 +-
 .../src/lib/components/Page/index.ts          |   5 +
 .../PrimaryContainedButton/index.svelte       |  36 --
 .../QuestionnaireBuilder/index.svelte         |   1 -
 .../lib/components/RootPage/RootPage.svelte   |   0
 .../src/lib/components/Space/index.svelte     |   9 -
 .../src/lib/components/Tabs/index.svelte      |  18 +-
 .../src/lib/utils/translations/de.json        |   9 +-
 .../src/lib/utils/translations/en.json        |   7 +-
 .../src/lib/utils/translations/es.json        |   9 +-
 .../src/lib/utils/translations/fr.json        |   9 +-
 .../src/lib/utils/translations/hi.json        |   9 +-
 .../src/lib/utils/translations/pt.json        |   9 +-
 .../src/lib/utils/translations/ru.json        |   9 +-
 .../src/lib/utils/translations/vi.json        |   9 +-
 apps/dashboard/src/lib/utils/types/index.ts   |   4 +-
 apps/dashboard/src/routes/+layout.svelte      |   4 +-
 apps/dashboard/src/routes/404/+page.svelte    |   4 +-
 .../src/routes/courses/[id]/+page.svelte      |  50 ++-
 .../courses/[id]/attendance/+page.svelte      |  53 ++-
 .../courses/[id]/certificates/+page.svelte    |   7 +-
 .../routes/courses/[id]/lessons/+page.svelte  |  51 ++-
 .../lessons/[...lessonParams]/+page.svelte    |  83 ++--
 .../routes/courses/[id]/marks/+page.svelte    |  62 ++-
 .../routes/courses/[id]/people/+layout.svelte |   3 +-
 .../routes/courses/[id]/settings/+page.svelte |   5 +-
 .../courses/[id]/submissions/+page.svelte     |  73 ++--
 44 files changed, 760 insertions(+), 682 deletions(-)
 delete mode 100644 apps/dashboard/src/lib/components/Apps/components/Comments/index.svelte
 create mode 100644 apps/dashboard/src/lib/components/Course/components/Lesson/Materials/components/Comments.svelte
 rename apps/dashboard/src/lib/components/Course/components/Lesson/Materials/{constants.js => constants.ts} (68%)
 rename apps/dashboard/src/lib/components/{PageBody/index.svelte => Page/Body.svelte} (69%)
 rename apps/dashboard/src/lib/components/{PageNav/index.svelte => Page/Nav.svelte} (72%)
 rename apps/dashboard/src/lib/components/{NotFound => Page}/NotFound.svelte (74%)
 rename apps/dashboard/src/lib/components/{Unauthorized/index.svelte => Page/Unauthorized.svelte} (66%)
 create mode 100644 apps/dashboard/src/lib/components/Page/index.ts
 delete mode 100644 apps/dashboard/src/lib/components/PrimaryContainedButton/index.svelte
 delete mode 100644 apps/dashboard/src/lib/components/QuestionnaireBuilder/index.svelte
 delete mode 100644 apps/dashboard/src/lib/components/RootPage/RootPage.svelte
 delete mode 100644 apps/dashboard/src/lib/components/Space/index.svelte

diff --git a/apps/dashboard/src/lib/components/Apps/components/Comments/index.svelte b/apps/dashboard/src/lib/components/Apps/components/Comments/index.svelte
deleted file mode 100644
index 64055cc3..00000000
--- a/apps/dashboard/src/lib/components/Apps/components/Comments/index.svelte
+++ /dev/null
@@ -1,241 +0,0 @@
-<script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
-  import PageNav from '$lib/components/PageNav/index.svelte';
-  import CloseButton from '$lib/components/Buttons/Close/index.svelte';
-  import TextField from '$lib/components/Form/TextField.svelte';
-  import { getSupabase } from '$lib/utils/functions/supabase';
-  import type {
-    RealtimeChannel,
-    RealtimePostgresChangesPayload,
-    PostgrestSingleResponse
-  } from '@supabase/supabase-js';
-  import type { LessonCommentInsertPayload, GroupPerson, LessonComment } from '$lib/utils/types';
-  import { lesson } from '$lib/components/Course/components/Lesson/store/lessons';
-  import { group } from '$lib/components/Course/store';
-  import { profile } from '$lib/utils/store/user';
-  import { calDateDiff } from '$lib/utils/functions/date';
-  import { t } from '$lib/utils/functions/translations';
-
-  export let handleClose = () => {};
-
-  const supabase = getSupabase();
-
-  let comment = '';
-  let bodyRef: HTMLDivElement;
-  let lessonCommentChannel: RealtimeChannel;
-  let comments: LessonComment[] = [];
-  let groupmember: GroupPerson | undefined;
-  let isSaving: boolean = false;
-  let isFetched = false;
-
-  interface FetchComments {
-    comment: string;
-    created_at: string;
-    groupmember: {
-      id: string;
-      profile: {
-        avatar_url: string;
-        fullname: string;
-      };
-    };
-  }
-
-  async function handleSend() {
-    console.log('groupmember', groupmember);
-    if (!comment || !groupmember) {
-      return;
-    }
-
-    comments = [
-      ...comments,
-      {
-        comment: comment,
-        name: $t('course.navItem.lessons.comments.you'),
-        avatar: $profile.avatar_url,
-        commentAt: new Date()
-      }
-    ];
-    $lesson.totalComments = comments.length;
-    scrollToBottom();
-
-    isSaving = true;
-    supabase
-      .from('lesson_comment')
-      .insert({
-        lesson_id: $lesson.id,
-        groupmember_id: groupmember.id,
-        comment
-      })
-      .then(() => {
-        isSaving = false;
-        comment = '';
-      });
-  }
-
-  function handleKeyDown(e: KeyboardEvent) {
-    if (e.key === 'Enter') {
-      handleSend();
-    }
-  }
-
-  function scrollToBottom() {
-    setTimeout(() => {
-      bodyRef.scrollTo({
-        top: bodyRef.scrollHeight
-      });
-    }, 100);
-  }
-
-  async function handleInsert(payload: RealtimePostgresChangesPayload<LessonCommentInsertPayload>) {
-    const insertedComment = payload.new as LessonCommentInsertPayload;
-
-    if (groupmember && groupmember.id === insertedComment.groupmember_id) {
-      console.log('is my comment');
-      return;
-    }
-
-    const {
-      data,
-      error
-    }: PostgrestSingleResponse<{
-      id: string;
-      profile: {
-        fullname: string;
-        avatar_url: string;
-      };
-    }> = await supabase
-      .from('groupmember')
-      .select('id, profile:profile_id(fullname, avatar_url)')
-      .eq('id', insertedComment.groupmember_id)
-      .single();
-
-    console.log('data', data);
-    console.log('error', error);
-
-    if (error || !data) {
-      return;
-    }
-
-    comments = [
-      ...comments,
-      {
-        comment: insertedComment.comment,
-        name: data.profile.fullname,
-        avatar: data.profile.avatar_url,
-        commentAt: insertedComment.created_at
-      }
-    ];
-    $lesson.totalComments = comments.length;
-
-    scrollToBottom();
-  }
-
-  async function fetchComments(people: GroupPerson[], lessonId?: string | null) {
-    groupmember = people.find((person) => person.profile_id === $profile.id);
-
-    if (!groupmember || !lessonId) return;
-
-    const { data, error } = await supabase
-      .from('lesson_comment')
-      .select(
-        `
-          groupmember_id,
-          created_at,
-          comment,
-          groupmember:groupmember_id(
-            id,
-            profile:profile_id(fullname, avatar_url)
-          )
-        `
-      )
-      .match({
-        lesson_id: lessonId
-      })
-      .returns<FetchComments[]>();
-
-    if (error || !data) {
-      console.error('error');
-      return;
-    }
-    console.log('fetch comments', data);
-
-    comments = data.map((lessonComment) => {
-      return {
-        comment: lessonComment.comment,
-        avatar: lessonComment.groupmember.profile.avatar_url,
-        commentAt: lessonComment.created_at,
-        name:
-          lessonComment.groupmember.id === groupmember?.id
-            ? $t('course.navItem.lessons.comments.you')
-            : lessonComment.groupmember.profile.fullname
-      };
-    });
-    isFetched = true;
-    scrollToBottom();
-  }
-
-  onMount(async () => {
-    lessonCommentChannel = supabase
-      .channel('any')
-      .on(
-        'postgres_changes',
-        { event: '*', schema: 'public', table: 'lesson_comment' },
-        handleInsert
-      )
-      .subscribe();
-  });
-
-  onDestroy(() => {
-    supabase.removeChannel(lessonCommentChannel);
-  });
-
-  $: !isFetched && fetchComments($group.people, $lesson.id);
-</script>
-
-<PageNav title={$t('course.navItem.lessons.comments.title')} overidableStyle="padding: 0 10px">
-  <div slot="widget">
-    <CloseButton onClick={handleClose} />
-  </div>
-</PageNav>
-
-<div bind:this={bodyRef} class="overflow-y-auto h-[87%] pb-10 px-2 md:min-w-[350px] w-full">
-  {#each comments as comment}
-    <div class="pb-2 mt-2">
-      <div class="flex items-start">
-        <img
-          alt="Placeholder"
-          class="block rounded-full"
-          width="24"
-          height="20"
-          src={comment.avatar}
-        />
-        <div class="ml-2">
-          <p class="dark:text-white text-sm font-bold">{comment.name}</p>
-          <p class="dark:text-white text-xs font-normal text-gray-800">
-            {calDateDiff(comment.commentAt)}
-          </p>
-        </div>
-      </div>
-      <article class="prose prose-sm sm:prose ml-8 max-w-[300px] dark:text-white">
-        {comment.comment}
-      </article>
-    </div>
-  {/each}
-</div>
-
-<div class="footer">
-  <TextField
-    placeholder={$t('course.navItem.lessons.comments.placeholder')}
-    bind:value={comment}
-    onKeyDown={handleKeyDown}
-    isDisabled={isSaving}
-  />
-</div>
-
-<style>
-  .footer {
-    position: absolute;
-    bottom: 0px;
-    width: 100%;
-  }
-</style>
diff --git a/apps/dashboard/src/lib/components/Apps/components/Notes/index.svelte b/apps/dashboard/src/lib/components/Apps/components/Notes/index.svelte
index 0d4039ff..346183b7 100644
--- a/apps/dashboard/src/lib/components/Apps/components/Notes/index.svelte
+++ b/apps/dashboard/src/lib/components/Apps/components/Notes/index.svelte
@@ -1,6 +1,6 @@
 <script>
-  import PageNav from '$lib/components/PageNav/index.svelte';
   import CloseButton from '$lib/components/Buttons/Close/index.svelte';
+  import { PageNav } from '$lib/components/Page';
 
   export let handleClose;
 </script>
diff --git a/apps/dashboard/src/lib/components/Apps/components/Poll/index.svelte b/apps/dashboard/src/lib/components/Apps/components/Poll/index.svelte
index 628b3aa1..454ecde1 100644
--- a/apps/dashboard/src/lib/components/Apps/components/Poll/index.svelte
+++ b/apps/dashboard/src/lib/components/Apps/components/Poll/index.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import CloseButton from '$lib/components/Buttons/Close/index.svelte';
   import { course, group } from '$lib/components/Course/store';
-  import PageNav from '$lib/components/PageNav/index.svelte';
+  import { PageNav } from '$lib/components/Page';
   import { snackbar } from '$lib/components/Snackbar/store';
   import { getSupabase } from '$lib/utils/functions/supabase';
   import { t } from '$lib/utils/functions/translations';
diff --git a/apps/dashboard/src/lib/components/Apps/components/QandA/index.svelte b/apps/dashboard/src/lib/components/Apps/components/QandA/index.svelte
index b1a1af0f..2a8f0638 100644
--- a/apps/dashboard/src/lib/components/Apps/components/QandA/index.svelte
+++ b/apps/dashboard/src/lib/components/Apps/components/QandA/index.svelte
@@ -1,9 +1,9 @@
 <script>
-  import CheckmarkOutline from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
-  import PageNav from '$lib/components/PageNav/index.svelte';
   import CloseButton from '$lib/components/Buttons/Close/index.svelte';
-  import Vote from '$lib/components/Vote/index.svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
+  import { PageNav } from '$lib/components/Page';
+  import Vote from '$lib/components/Vote/index.svelte';
+  import CheckmarkOutline from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
 
   export let handleClose;
   let bodyRef;
@@ -95,10 +95,10 @@
 
 <div bind:this={bodyRef} class="body">
   {#each questions as question}
-    <div class="flex items-start ml-2 mb-2 mt-2">
+    <div class="mb-2 ml-2 mt-2 flex items-start">
       <Vote bind:value={question.vote} />
       <div class="ml-2 flex-grow">
-        <p class="dark:text-white text-sm font-bold">{question.name}</p>
+        <p class="text-sm font-bold dark:text-white">{question.name}</p>
         <article class="prose prose-sm sm:prose">
           {question.question}
         </article>
diff --git a/apps/dashboard/src/lib/components/Apps/index.svelte b/apps/dashboard/src/lib/components/Apps/index.svelte
index b474fe1a..594935d6 100644
--- a/apps/dashboard/src/lib/components/Apps/index.svelte
+++ b/apps/dashboard/src/lib/components/Apps/index.svelte
@@ -1,24 +1,21 @@
 <script lang="ts">
+  import IconButton from '$lib/components/IconButton/index.svelte';
+  import { globalStore } from '$lib/utils/store/app';
+  import ChartPie from 'carbon-icons-svelte/lib/ChartPie.svelte';
+  import Settings from 'carbon-icons-svelte/lib/Settings.svelte';
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
-  import SendAlt from 'carbon-icons-svelte/lib/SendAlt.svelte';
-  import ChartPie from 'carbon-icons-svelte/lib/ChartPie.svelte';
-  import IconButton from '$lib/components/IconButton/index.svelte';
-  import Settings from 'carbon-icons-svelte/lib/Settings.svelte';
   import { apps } from './store';
-  import { globalStore } from '$lib/utils/store/app';
 
+  import { browser } from '$app/environment';
   import Chip from '$lib/components/Chip/index.svelte';
-  import QandA from './components/QandA/index.svelte';
-  import Comments from './components/Comments/index.svelte';
+  import { course } from '$lib/components/Course/store';
+  import { t } from '$lib/utils/functions/translations';
+  import { currentOrg } from '$lib/utils/store/org';
   import Notes from './components/Notes/index.svelte';
   import Poll from './components/Poll/index.svelte';
+  import QandA from './components/QandA/index.svelte';
   import APPS_CONSTANTS from './constants';
-  import { browser } from '$app/environment';
-  import { course } from '$lib/components/Course/store';
-  import { lesson } from '$lib/components/Course/components/Lesson/store/lessons';
-  import { currentOrg } from '$lib/utils/store/org';
-  import { t } from '$lib/utils/functions/translations';
 
   let appBarRef: HTMLDivElement;
   let appContentRef: HTMLDivElement;
@@ -70,7 +67,7 @@
   bind:this={appBarRef}
 >
   <div class="apps">
-    <div class="lg:hidden mb-2">
+    <div class="mb-2 lg:hidden">
       <IconButton
         buttonClassName="lg:hidden"
         toolTipProps={{ title: 'Settings', hotkeys: [] }}
@@ -80,29 +77,6 @@
       </IconButton>
     </div>
 
-    <div class="mb-2 relative {getAppClass(APPS_CONSTANTS.APPS.COMMENTS, $apps.selectedApp)}">
-      <IconButton
-        toolTipProps={{
-          title: `${
-            $globalStore.isOrgSite && !$currentOrg.customization.apps.comments
-              ? $t('course.navItem.lessons.disabled')
-              : $t('course.navItem.lessons.comments.title')
-          }`,
-          hotkeys: ['Ctrl/Command', '1']
-        }}
-        value={APPS_CONSTANTS.APPS.COMMENTS}
-        onClick={handleAppClick}
-        buttonClassName="relative"
-        disabled={$globalStore.isOrgSite && !$currentOrg.customization.apps.comments}
-      >
-        <Chip
-          value={$lesson.totalComments}
-          className="absolute -top-1 right-0 bg-gray-100 text-gray-600 dark:bg-neutral-700 dark:text-white"
-        />
-        <SendAlt size={24} class="carbon-icon dark:text-white" />
-      </IconButton>
-    </div>
-
     <div class="mb-2 {getAppClass(APPS_CONSTANTS.APPS.POLL, $apps.selectedApp)}">
       <IconButton
         toolTipProps={{
@@ -149,15 +123,13 @@
 
   {#if !!$apps.selectedApp}
     <div
-      class="app max-w-[350px] transition ease-in-out delay-150 duration-100"
+      class="app max-w-[350px] transition delay-150 duration-100 ease-in-out"
       bind:this={appContentRef}
     >
       {#key $apps.selectedApp}
         <div class="h-full w-full" transition:fade={{ duration: 200 }}>
           {#if $apps.selectedApp === APPS_CONSTANTS.APPS.QANDA}
             <QandA {handleClose} />
-          {:else if $apps.selectedApp === APPS_CONSTANTS.APPS.COMMENTS}
-            <Comments {handleClose} />
           {:else if $apps.selectedApp === APPS_CONSTANTS.APPS.POLL}
             <Poll {handleClose} />
           {:else if $apps.selectedApp === APPS_CONSTANTS.APPS.NOTES}
diff --git a/apps/dashboard/src/lib/components/Course/components/Attendance/index.svelte b/apps/dashboard/src/lib/components/Course/components/Attendance/index.svelte
index ee117612..7c2d53d7 100644
--- a/apps/dashboard/src/lib/components/Course/components/Attendance/index.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Attendance/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import PageNav from '$lib/components/PageNav/index.svelte';
+  import { PageNav } from '$lib/components/Page';
 </script>
 
 <PageNav title="Attendance" />
diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/index.svelte b/apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/index.svelte
index 5f53ab9a..cc59eb66 100644
--- a/apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/index.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/index.svelte
@@ -2,7 +2,7 @@
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
   import IconButton from '$lib/components/IconButton/index.svelte';
-  import PageBody from '$lib/components/PageBody/index.svelte';
+  import { PageBody } from '$lib/components/Page';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/Exercises/index.svelte b/apps/dashboard/src/lib/components/Course/components/Lesson/Exercises/index.svelte
index e41222cc..c97af10f 100644
--- a/apps/dashboard/src/lib/components/Course/components/Lesson/Exercises/index.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Lesson/Exercises/index.svelte
@@ -1,24 +1,24 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { onMount } from 'svelte';
-  import Box from '$lib/components/Box/index.svelte';
-  import { Breadcrumb, BreadcrumbItem } from 'carbon-components-svelte';
-  import { Moon } from 'svelte-loading-spinners';
   import Backdrop from '$lib/components/Backdrop/index.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
-  import PageBody from '$lib/components/PageBody/index.svelte';
-  import Exercise from '../Exercise/index.svelte';
-  import { supabase } from '$lib/utils/functions/supabase';
-  import { createExercise, createExerciseFromTemplate } from '$lib/utils/services/courses';
-  import { QUESTION_TYPES } from '$lib/components/Question/constants';
-  import { lesson } from '../store/lessons';
-  import { questionnaire, isQuestionnaireFetching } from '../store/exercise';
+  import Box from '$lib/components/Box/index.svelte';
   import NewExerciseModal from '$lib/components/Course/components/Lesson/Exercises/NewExerciseModal.svelte';
-  import type { ExerciseTemplate } from '$lib/utils/types';
+  import { PageBody } from '$lib/components/Page';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { QUESTION_TYPES } from '$lib/components/Question/constants';
+  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
   import { formatDate } from '$lib/utils/functions/routes/dashboard';
+  import { supabase } from '$lib/utils/functions/supabase';
   import { t } from '$lib/utils/functions/translations';
+  import { createExercise, createExerciseFromTemplate } from '$lib/utils/services/courses';
   import { globalStore } from '$lib/utils/store/app';
+  import type { ExerciseTemplate } from '$lib/utils/types';
+  import { Breadcrumb, BreadcrumbItem } from 'carbon-components-svelte';
+  import { onMount } from 'svelte';
+  import { Moon } from 'svelte-loading-spinners';
+  import Exercise from '../Exercise/index.svelte';
+  import { isQuestionnaireFetching, questionnaire } from '../store/exercise';
+  import { lesson } from '../store/lessons';
 
   export let path = '';
   export let exerciseId = '';
diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/components/Comments.svelte b/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/components/Comments.svelte
new file mode 100644
index 00000000..e0f1f8ce
--- /dev/null
+++ b/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/components/Comments.svelte
@@ -0,0 +1,367 @@
+<script lang="ts">
+  import Avatar from '$lib/components/Avatar/index.svelte';
+  import { lesson } from '$lib/components/Course/components/Lesson/store/lessons';
+  import { group } from '$lib/components/Course/store';
+  import TextArea from '$lib/components/Form/TextArea.svelte';
+  import DeleteModal from '$lib/components/Modal/DeleteModal.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { snackbar } from '$lib/components/Snackbar/store';
+  import { calDateDiff } from '$lib/utils/functions/date';
+  import { getSupabase } from '$lib/utils/functions/supabase';
+  import { t } from '$lib/utils/functions/translations';
+  import { profile } from '$lib/utils/store/user';
+  import type { GroupPerson, LessonComment, LessonCommentInsertPayload } from '$lib/utils/types';
+  import type {
+    PostgrestSingleResponse,
+    RealtimeChannel,
+    RealtimePostgresChangesPayload
+  } from '@supabase/supabase-js';
+  import { OverflowMenu, OverflowMenuItem } from 'carbon-components-svelte';
+  import { onDestroy, onMount } from 'svelte';
+
+  const supabase = getSupabase();
+  const PAGE_SIZE = 20;
+
+  export let lessonId = '';
+
+  let comment = '';
+  let lessonCommentChannel: RealtimeChannel;
+  let comments: LessonComment[] = [];
+  let groupmember: GroupPerson | undefined;
+  let isSaving: boolean = false;
+  let isFetching = false;
+  let openDeleteModal = false;
+  let deleteCommentId: number | null = null;
+  let editCommentId: number | null = null;
+
+  interface FetchComments {
+    id: number;
+    comment: string;
+    created_at: string;
+    groupmember: {
+      id: string;
+      profile: {
+        avatar_url: string;
+        fullname: string;
+      };
+    };
+  }
+
+  async function handleSend() {
+    if (!comment || !groupmember) {
+      return;
+    }
+
+    isSaving = true;
+
+    comments = [
+      {
+        id: 0,
+        comment: comment,
+        name: $t('course.navItem.lessons.comments.you'),
+        avatar: $profile.avatar_url,
+        commentAt: new Date(),
+        groupmember_id: groupmember.id
+      },
+      ...comments
+    ];
+    pagination.count = comments.length;
+
+    supabase
+      .from('lesson_comment')
+      .insert({
+        lesson_id: $lesson.id,
+        groupmember_id: groupmember.id,
+        comment
+      })
+      .select('id')
+      .single()
+      .then(({ data, error }) => {
+        isSaving = false;
+        if (error) {
+          console.error('Error adding comment:', error);
+          return;
+        }
+
+        comments = comments.map((comment) =>
+          comment.id === 0 ? { ...comment, id: data.id } : comment
+        );
+        isSaving = false;
+        comment = '';
+      });
+  }
+
+  async function handleUpdate(commentItem: LessonComment) {
+    if (!editCommentId || !commentItem.comment) {
+      return;
+    }
+
+    const { error } = await supabase
+      .from('lesson_comment')
+      .update({ comment: commentItem.comment })
+      .eq('id', editCommentId);
+
+    if (error) {
+      console.error('handleUpdate', error);
+      snackbar.error($t('snackbar.something'));
+    } else {
+      snackbar.success($t('snackbar.success_update'));
+    }
+
+    editCommentId = null;
+    pagination.count = comments.length;
+  }
+
+  async function handleDeleteComment() {
+    if (!deleteCommentId) {
+      return;
+    }
+
+    const { error } = await supabase.from('lesson_comment').delete().eq('id', deleteCommentId);
+
+    if (error) {
+      console.error('error', error);
+      snackbar.error($t('snackbar.something'));
+    } else {
+      snackbar.success($t('snackbar.success_delete'));
+    }
+
+    comments = comments.filter((comment) => comment.id !== deleteCommentId);
+    pagination.count = comments.length;
+
+    deleteCommentId = null;
+  }
+
+  async function handleInsert(payload: RealtimePostgresChangesPayload<LessonCommentInsertPayload>) {
+    const insertedComment = payload.new as LessonCommentInsertPayload;
+
+    if (groupmember && groupmember.id === insertedComment.groupmember_id) {
+      return;
+    }
+
+    const {
+      data,
+      error
+    }: PostgrestSingleResponse<{
+      id: string;
+      profile: {
+        fullname: string;
+        avatar_url: string;
+      };
+    }> = await supabase
+      .from('groupmember')
+      .select('id, profile:profile_id(fullname, avatar_url)')
+      .eq('id', insertedComment.groupmember_id)
+      .single();
+
+    if (error || !data) {
+      console.error('handleInsert', error);
+      return;
+    }
+
+    comments = [
+      {
+        id: insertedComment.id,
+        comment: insertedComment.comment,
+        name: data.profile.fullname,
+        avatar: data.profile.avatar_url,
+        commentAt: insertedComment.created_at,
+        groupmember_id: insertedComment.groupmember_id
+      },
+      ...comments
+    ];
+    pagination.count = comments.length;
+  }
+
+  let pagination = {
+    hasMore: true,
+    count: 0,
+    page: 0
+  };
+
+  async function fetchComments(people: GroupPerson[]) {
+    if (!pagination.hasMore) return;
+
+    groupmember = people.find((person) => person.profile_id === $profile.id);
+
+    if (!groupmember || !lessonId) return;
+
+    isFetching = true;
+
+    const from = pagination.page * PAGE_SIZE;
+    const to = from + PAGE_SIZE - 1;
+
+    const { data, error, count } = await supabase
+      .from('lesson_comment')
+      .select(
+        `
+        groupmember_id,
+        created_at,
+        id,
+        comment,
+        groupmember:groupmember_id(
+            id,profile:profile_id(fullname, avatar_url)
+        )
+        `,
+        { count: 'exact' }
+      )
+      .match({
+        lesson_id: lessonId
+      })
+      .order('created_at', { ascending: false })
+      .range(from, to)
+      .returns<FetchComments[]>();
+
+    if (error || !data) {
+      console.error('error');
+      return;
+    }
+
+    const newComments = data.map((lessonComment) => {
+      return {
+        id: lessonComment.id,
+        comment: lessonComment.comment,
+        avatar: lessonComment.groupmember.profile.avatar_url,
+        commentAt: lessonComment.created_at,
+        groupmember_id: lessonComment.groupmember.id,
+        name:
+          lessonComment.groupmember.id === groupmember?.id
+            ? $t('course.navItem.lessons.comments.you')
+            : lessonComment.groupmember.profile.fullname
+      };
+    });
+
+    comments = pagination.page === 0 ? newComments : [...comments, ...newComments];
+    pagination.hasMore = count ? from + data.length < count : false;
+    pagination.count = count ?? 0;
+    pagination.page++;
+
+    isFetching = false;
+  }
+
+  onMount(async () => {
+    fetchComments($group.people);
+
+    lessonCommentChannel = supabase
+      .channel('any')
+      .on(
+        'postgres_changes',
+        { event: 'INSERT', schema: 'public', table: 'lesson_comment' },
+        handleInsert
+      )
+      .subscribe();
+  });
+
+  onDestroy(() => {
+    supabase.removeChannel(lessonCommentChannel);
+  });
+</script>
+
+<DeleteModal bind:open={openDeleteModal} onDelete={handleDeleteComment} />
+
+<div class="mx-auto mt-10 max-w-[65ch]">
+  <!-- <hr class="my-5" /> -->
+  <div class="mb-5">
+    <p class="text-xl font-bold capitalize">
+      {$t('course.navItem.lessons.comments.title')} ({pagination.count})
+    </p>
+  </div>
+  <div>
+    <div class="flex h-full items-start gap-3">
+      <Avatar
+        src={$profile.avatar_url}
+        name={$profile.fullname}
+        width="w-8"
+        height="h-8"
+        className="mt-2"
+      />
+      <div class="h-full w-full">
+        <TextArea
+          label={$t('course.navItem.lessons.comments.text_area_title')}
+          placeholder={$t('course.navItem.lessons.comments.placeholder')}
+          bind:value={comment}
+        />
+      </div>
+    </div>
+
+    <div class="mt-2 flex flex-row-reverse">
+      <PrimaryButton
+        label={$t('course.navItem.lessons.comments.comment_btn')}
+        onClick={handleSend}
+        isDisabled={!comment}
+        isLoading={isSaving}
+      />
+    </div>
+  </div>
+
+  <div class="my-10">
+    {#each comments as commentItem}
+      <div class="mt-2 flex items-start gap-3 pb-2">
+        <Avatar src={commentItem.avatar} name={commentItem.name} width="w-8" height="h-8" />
+
+        <div class="w-full rounded-md border px-4 pb-4 pt-2 dark:border-neutral-700">
+          <div class="flex items-center justify-between gap-2">
+            <p class="text-md font-bold dark:text-white">
+              {commentItem.name}
+              <span
+                class="ml-1 text-xs font-normal text-gray-800 dark:text-white"
+                title={commentItem.commentAt.toLocaleString()}
+              >
+                {calDateDiff(commentItem.commentAt)}
+              </span>
+            </p>
+
+            {#if groupmember?.id === commentItem.groupmember_id}
+              <OverflowMenu flipped>
+                <OverflowMenuItem text="Edit" on:click={() => (editCommentId = commentItem.id)} />
+                <OverflowMenuItem
+                  danger
+                  text="Delete"
+                  on:click={() => {
+                    deleteCommentId = commentItem.id;
+                    openDeleteModal = true;
+                  }}
+                />
+              </OverflowMenu>
+            {/if}
+          </div>
+
+          {#if editCommentId === commentItem.id}
+            <TextArea
+              placeholder={$t('course.navItem.lessons.comments.placeholder')}
+              bind:value={commentItem.comment}
+            />
+            <div class="mt-2 flex flex-row-reverse items-center gap-2">
+              <PrimaryButton
+                variant={VARIANTS.OUTLINED}
+                label={$t('course.navItem.lessons.comments.cancel_btn')}
+                onClick={() => (editCommentId = null)}
+              />
+              <PrimaryButton
+                label={$t('course.navItem.lessons.comments.comment_btn')}
+                onClick={() => handleUpdate(commentItem)}
+                isDisabled={!commentItem.comment}
+                isLoading={isSaving}
+              />
+            </div>
+          {:else}
+            <article class="prose sm:prose-sm max-w-[300px] dark:text-white">
+              {commentItem.comment}
+            </article>
+          {/if}
+        </div>
+      </div>
+    {/each}
+  </div>
+  {#if pagination.hasMore}
+    <div class="mt-2 flex items-center justify-center">
+      <PrimaryButton
+        label={$t('course.navItem.lessons.comments.load_more_btn')}
+        variant={VARIANTS.OUTLINED}
+        onClick={() => fetchComments($group.people)}
+        isLoading={isFetching}
+      />
+    </div>
+  {/if}
+</div>
diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/constants.js b/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/constants.ts
similarity index 68%
rename from apps/dashboard/src/lib/components/Course/components/Lesson/Materials/constants.js
rename to apps/dashboard/src/lib/components/Course/components/Lesson/Materials/constants.ts
index 5eb09563..b13ba65a 100644
--- a/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/constants.js
+++ b/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/constants.ts
@@ -1,6 +1,14 @@
-import { Video, Notebook, PresentationFile } from 'carbon-icons-svelte';
+import type { Tabs } from '$lib/utils/types';
+import { Notebook, PresentationFile, Video } from 'carbon-icons-svelte';
 
-export let tabs = [
+interface MaterialTab {
+  label: string;
+  icon: any;
+  value: number;
+  badgeValue?: number;
+}
+
+export let tabs: MaterialTab[] = [
   {
     label: 'course.navItem.lessons.materials.tabs.note.title',
     icon: Notebook,
@@ -21,9 +29,9 @@ export let tabs = [
   }
 ];
 
-export function orderedTabs(tabs, settingTabs) {
+export function orderedTabs(tabs: MaterialTab[], settingTabs?: Tabs[]) {
   if (!Array.isArray(settingTabs)) return tabs;
-  const reorderedTabs = [];
+  const reorderedTabs: MaterialTab[] = [];
 
   const tabMap = new Map(tabs.map((tab) => [tab.value, tab]));
 
diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/index.svelte b/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/index.svelte
index 1c654888..646a31f3 100644
--- a/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/index.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/index.svelte
@@ -1,47 +1,48 @@
 <script lang="ts">
-  import isEmpty from 'lodash/isEmpty';
-  import { fade } from 'svelte/transition';
-  import { useCompletion } from 'ai/svelte';
-  import MODES from '$lib/utils/constants/mode';
-  import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
-  import IconButton from '$lib/components/IconButton/index.svelte';
-  import { formatYoutubeVideo } from '$lib/utils/functions/formatYoutubeVideo';
-  import Modal from '$lib/components/Modal/index.svelte';
-  import { Popover } from 'carbon-components-svelte';
-  import AlignBoxTopLeftIcon from 'carbon-icons-svelte/lib/AlignBoxTopLeft.svelte';
-  import ListIcon from 'carbon-icons-svelte/lib/List.svelte';
-  import IbmWatsonKnowledgeStudioIcon from 'carbon-icons-svelte/lib/IbmWatsonKnowledgeStudio.svelte';
-  import MagicWandFilled from 'carbon-icons-svelte/lib/MagicWandFilled.svelte';
-  import Tabs from '$lib/components/Tabs/index.svelte';
-  import TabContent from '$lib/components/TabContent/index.svelte';
   import Box from '$lib/components/Box/index.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
-  import TextField from '$lib/components/Form/TextField.svelte';
+  import VideoUploader from '$lib/components/Course/components/Lesson/Materials/Video/Index.svelte';
   import {
-    lesson,
-    lessons,
-    lessonByTranslation,
+    deleteLessonVideo,
     handleUpdateLessonMaterials,
     isLessonDirty,
-    uploadCourseVideoStore,
-    deleteLessonVideo
+    lesson,
+    lessonByTranslation,
+    lessons,
+    uploadCourseVideoStore
   } from '$lib/components/Course/components/Lesson/store/lessons';
-  import VideoUploader from '$lib/components/Course/components/Lesson/Materials/Video/Index.svelte';
   import { course } from '$lib/components/Course/store';
+  import TextField from '$lib/components/Form/TextField.svelte';
+  import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
+  import IconButton from '$lib/components/IconButton/index.svelte';
+  import Modal from '$lib/components/Modal/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { snackbar } from '$lib/components/Snackbar/store';
+  import TabContent from '$lib/components/TabContent/index.svelte';
+  import Tabs from '$lib/components/Tabs/index.svelte';
   import TextEditor from '$lib/components/TextEditor/index.svelte';
-  import * as CONSTANTS from './constants';
-  import { orderedTabs } from './constants';
+  import MODES from '$lib/utils/constants/mode';
+  import { formatYoutubeVideo } from '$lib/utils/functions/formatYoutubeVideo';
+  import { supabase } from '$lib/utils/functions/supabase';
+  import { isHtmlValueEmpty } from '$lib/utils/functions/toHtml';
+  import { lessonFallbackNote, t } from '$lib/utils/functions/translations';
+  import { currentOrg } from '$lib/utils/store/org';
+  import type { LessonPage, LOCALE } from '$lib/utils/types';
+  import { useCompletion } from 'ai/svelte';
+  import { Popover } from 'carbon-components-svelte';
+  import AlignBoxTopLeftIcon from 'carbon-icons-svelte/lib/AlignBoxTopLeft.svelte';
+  import IbmWatsonKnowledgeStudioIcon from 'carbon-icons-svelte/lib/IbmWatsonKnowledgeStudio.svelte';
+  import ListIcon from 'carbon-icons-svelte/lib/List.svelte';
+  import MagicWandFilled from 'carbon-icons-svelte/lib/MagicWandFilled.svelte';
+  import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
+  import isEmpty from 'lodash/isEmpty';
+  import { fade } from 'svelte/transition';
+  import Comments from './components/Comments.svelte';
   import ComponentNote from './components/ComponentNote.svelte';
   import ComponentSlide from './components/ComponentSlide.svelte';
   import ComponentVideo from './components/ComponentVideo.svelte';
-  import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
-  import type { LessonPage } from '$lib/utils/types';
-  import { snackbar } from '$lib/components/Snackbar/store';
-  import { isHtmlValueEmpty } from '$lib/utils/functions/toHtml';
-  import { t, lessonFallbackNote } from '$lib/utils/functions/translations';
-  import { supabase } from '$lib/utils/functions/supabase';
-  import type { LOCALE } from '$lib/utils/types';
+  import * as CONSTANTS from './constants';
+  import { orderedTabs } from './constants';
   import Loader from './Loader.svelte';
 
   export let mode = MODES.view;
@@ -279,7 +280,6 @@
 
     const componentNames = tabs
       .map((tab) => {
-        // @ts-ignore
         const component = componentMap[tab.value];
         return component || null;
       })
@@ -320,7 +320,7 @@
 
 <HtmlRender className="m-auto text-center">
   <svelte:fragment slot="content">
-    <h1 class="text-2xl md:text-4xl mt-0 capitalize">
+    <h1 class="mt-0 text-2xl capitalize md:text-4xl">
       {lessonTitle}
     </h1>
   </svelte:fragment>
@@ -335,7 +335,7 @@
         value={getValue('course.navItem.lessons.materials.tabs.note.title')}
         index={currentTab}
       >
-        <div class="flex gap-1 justify-end">
+        <div class="flex justify-end gap-1">
           <div bind:this={aiButtonRef} class="flex flex-row-reverse">
             <PrimaryButton
               className="flex items-center relative"
@@ -376,7 +376,7 @@
           </div>
         </div>
 
-        <div class="h-[60vh] mt-5">
+        <div class="mt-5 h-[60vh]">
           <TextEditor
             id={lessonId}
             bind:editorWindowRef
@@ -418,7 +418,7 @@
           className="mb-2"
         />
         {#if $lesson.materials.videos.length}
-          <div class="flex flex-col items-start w-full h-full">
+          <div class="flex h-full w-full flex-col items-start">
             {#each $lesson.materials.videos as video, index}
               {#if mode === MODES.edit}
                 <div class="ml-auto">
@@ -431,7 +431,7 @@
                   </IconButton>
                 </div>
               {/if}
-              <div class="w-full h-full flex flex-col gap-2 overflow-hidden">
+              <div class="flex h-full w-full flex-col gap-2 overflow-hidden">
                 {#key video.link}
                   <div class="mb-5">
                     {#if video.type === 'youtube'}
@@ -484,21 +484,26 @@
   </Tabs>
 {:else if !isMaterialsEmpty($lesson.materials, $lessonByTranslation[lessonId])}
   {#key lessonId}
-    <div class="w-full mb-20" in:fade={{ delay: 500 }} out:fade>
+    <div class="mb-20 w-full" in:fade={{ delay: 500 }} out:fade>
       {#each componentsToRender as Component}
         <svelte:component this={Component} {lessonId} />
       {/each}
+
+      {#if $currentOrg.customization.apps.comments}
+        <hr class="my-5" />
+        <Comments {lessonId} />
+      {/if}
     </div>
   {/key}
 {:else}
   <Box className="text-center">
     <img src="/no-video.svg" alt="Video not found" />
-    <h3 class="text-xl font-normal dark:text-white py-2">
+    <h3 class="py-2 text-xl font-normal dark:text-white">
       {$t('course.navItem.lessons.materials.body_heading')}
     </h3>
 
     {#if !isStudent}
-      <p class="text-sm text-center font-normal py-2">
+      <p class="py-2 text-center text-sm font-normal">
         {$t('course.navItem.lessons.materials.body_content')}
         <strong>{$t('course.navItem.lessons.materials.get_started')}</strong>
         {$t('course.navItem.lessons.materials.button')}.
diff --git a/apps/dashboard/src/lib/components/HTMLRender/HTMLRender.svelte b/apps/dashboard/src/lib/components/HTMLRender/HTMLRender.svelte
index f9202446..dbbebddc 100644
--- a/apps/dashboard/src/lib/components/HTMLRender/HTMLRender.svelte
+++ b/apps/dashboard/src/lib/components/HTMLRender/HTMLRender.svelte
@@ -8,7 +8,7 @@
 <article
   style:max-width={disableMaxWidth ? 'unset' : undefined}
   {id}
-  class="preview prose prose-sm sm:prose {className} dark:text-white"
+  class="preview prose sm:prose-sm {className} dark:text-white"
 >
   {#if $$slots.content}
     <slot name="content" />
diff --git a/apps/dashboard/src/lib/components/Modal/DeleteModal.svelte b/apps/dashboard/src/lib/components/Modal/DeleteModal.svelte
index 10c18cb8..564c4611 100644
--- a/apps/dashboard/src/lib/components/Modal/DeleteModal.svelte
+++ b/apps/dashboard/src/lib/components/Modal/DeleteModal.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import Modal from './index.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { t } from '$lib/utils/functions/translations';
+  import Modal from './index.svelte';
 
   export let open = false;
   export let onDelete = () => {};
@@ -22,7 +22,7 @@
   modalHeading={$t('delete_modal.label')}
 >
   <div>
-    <p class="dark:text-white text-xl text-center">
+    <p class="text-center text-xl dark:text-white">
       {$t('delete_modal.content')}
     </p>
 
diff --git a/apps/dashboard/src/lib/components/Org/Community/index.svelte b/apps/dashboard/src/lib/components/Org/Community/index.svelte
index e05169c2..ca8dd116 100644
--- a/apps/dashboard/src/lib/components/Org/Community/index.svelte
+++ b/apps/dashboard/src/lib/components/Org/Community/index.svelte
@@ -1,19 +1,18 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
+  import Box from '$lib/components/Box/index.svelte';
+  import { courses } from '$lib/components/Courses/store';
+  import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
+  import Vote from '$lib/components/Vote/index.svelte';
+  import { calDateDiff } from '$lib/utils/functions/date';
+  import { supabase } from '$lib/utils/functions/supabase';
+  import { t } from '$lib/utils/functions/translations';
+  import { fetchCourses } from '$lib/utils/services/courses';
+  import { currentOrg, currentOrgPath } from '$lib/utils/store/org';
+  import { profile } from '$lib/utils/store/user';
+  import { Dropdown, Search } from 'carbon-components-svelte';
   import AddCommentIcon from 'carbon-icons-svelte/lib/AddComment.svelte';
   import CommunityLoader from './Loader.svelte';
-  import Vote from '$lib/components/Vote/index.svelte';
-  import Box from '$lib/components/Box/index.svelte';
-  import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
-  import Space from '$lib/components/Space/index.svelte';
-  import { currentOrgPath, currentOrg } from '$lib/utils/store/org';
-  import { supabase } from '$lib/utils/functions/supabase';
-  import { calDateDiff } from '$lib/utils/functions/date';
-  import { fetchCourses } from '$lib/utils/services/courses';
-  import { profile } from '$lib/utils/store/user';
-  import { Search, Dropdown } from 'carbon-components-svelte';
-  import { t } from '$lib/utils/functions/translations';
-  import { courses } from '$lib/components/Courses/store';
 
   export let isLMS = false;
 
@@ -97,7 +96,7 @@
     class=" bg-gray-100 dark:bg-neutral-800"
   />
   <Dropdown
-    class="w-[25%] h-full"
+    class="h-full w-[25%]"
     size="xl"
     label={$t('community.ask.select_course')}
     items={[
@@ -108,7 +107,7 @@
   />
 </div>
 <div
-  class="flex items-center justify-center lg:justify-start flex-wrap my-4 m-auto border-c rounded bg-gray-100 dark:bg-neutral-800"
+  class="border-c m-auto my-4 flex flex-wrap items-center justify-center rounded bg-gray-100 dark:bg-neutral-800 lg:justify-start"
 >
   {#if isLoading}
     <CommunityLoader />
@@ -117,9 +116,9 @@
     <CommunityLoader />
   {:else}
     {#each filteredDiscussions as discussion}
-      <div class="w-full flex border-bottom-c p-3">
+      <div class="border-bottom-c flex w-full p-3">
         <Vote value={discussion.votes} />
-        <div class="text-sm flex flex-col gap-y-0.5">
+        <div class="flex flex-col gap-y-0.5 text-sm">
           <h4 class="mt-0">
             <a
               class="text-black dark:text-white"
@@ -132,12 +131,12 @@
             {discussion.author} asked {discussion.createdAt}
           </span>
           <a class="m-0" href="/courses/{discussion.courseId}">
-            <span class="text-xs text-primary-200 dark:text-black text-primary-700 p-0">
+            <span class="text-primary-200 text-primary-700 p-0 text-xs dark:text-black">
               #{discussion.courseTitle}
             </span>
           </a>
         </div>
-        <Space />
+        <div class="flex-grow" />
         <div class="flex items-center">
           <AddCommentIcon size={20} />
           <span class="ml-1">{discussion.comments}</span>
diff --git a/apps/dashboard/src/lib/components/PageBody/index.svelte b/apps/dashboard/src/lib/components/Page/Body.svelte
similarity index 69%
rename from apps/dashboard/src/lib/components/PageBody/index.svelte
rename to apps/dashboard/src/lib/components/Page/Body.svelte
index 800e5c2c..7eda5c0e 100644
--- a/apps/dashboard/src/lib/components/PageBody/index.svelte
+++ b/apps/dashboard/src/lib/components/Page/Body.svelte
@@ -1,6 +1,4 @@
 <script>
-  // import
-  //   border border-gray-300 rounded-md p-3 bg-primary-200 bg-opacity-25
   export let width = 'max-w-4xl w-full lg:w-11/12';
   export let padding = 'pb-5 px-4';
   export let className = '';
@@ -14,12 +12,12 @@
 <div
   class="overflow-y-auto {isPageNavHidden
     ? 'h-[calc(100vh-65px)] lg:h-[calc(100vh-127px)]'
-    : 'h-[calc(100vh-127px)]'} mt-4 mx-auto {width} {className} relative {padding}"
+    : 'h-[calc(100vh-127px)]'} mx-auto mt-4 {width} {className} relative {padding}"
   on:click={onClick}
 >
   {#if $$slots.header}
     <div
-      class="head dark:bg-neutral-800 flex items-center justify-between sticky right-0 w-full px-3 {headerClassName}"
+      class="head sticky right-0 flex w-full items-center justify-between px-3 dark:bg-neutral-800 {headerClassName}"
     >
       <slot name="header" />
     </div>
diff --git a/apps/dashboard/src/lib/components/PageNav/index.svelte b/apps/dashboard/src/lib/components/Page/Nav.svelte
similarity index 72%
rename from apps/dashboard/src/lib/components/PageNav/index.svelte
rename to apps/dashboard/src/lib/components/Page/Nav.svelte
index f125726e..30cc82ed 100644
--- a/apps/dashboard/src/lib/components/PageNav/index.svelte
+++ b/apps/dashboard/src/lib/components/Page/Nav.svelte
@@ -1,14 +1,11 @@
 <script>
-  import NewButton from '../PrimaryContainedButton/index.svelte';
-  import TextField from '../Form/TextField.svelte';
-  import Chip from '../Chip/index.svelte';
   import { t } from '$lib/utils/functions/translations';
+  import Chip from '../Chip/index.svelte';
+  import TextField from '../Form/TextField.svelte';
 
   export let title = '';
   export let overidableStyle = '';
   export let navItems = [];
-  export let addButtonHref = '';
-  export let addButtonLabel = '';
   export let disableSticky = false;
   export let isTitleEditable = false;
   export let onEditComplete = () => {};
@@ -23,21 +20,21 @@
 
 <div
   class="{hideOnMobile &&
-    'hideOnMobile'} header dark:bg-black dark:border-neutral-600 border-b border-gray-200 bg-white {!disableSticky &&
+    'hideOnMobile'} header border-b border-gray-200 bg-white dark:border-neutral-600 dark:bg-black {!disableSticky &&
     'sticky'} {dynamicRootClass}"
   style={overidableStyle}
 >
   <div
     class="{hideOnMobile
       ? 'hidden lg:flex'
-      : ''} {paddingClass} max-w-4xl m-auto flex items-center justify-between min-h-[61px]"
+      : ''} {paddingClass} m-auto flex min-h-[61px] max-w-4xl items-center justify-between"
   >
     {#if !!title}
       {#if isTitleEditable}
         {#if !enterEditTitleMode}
           <button class="w-full" on:click={() => (enterEditTitleMode = true)}>
             <h4
-              class="editable-title hover:bg-gray-100 dark:bg-black px-3 rounded-md overflow-ellipsis"
+              class="editable-title overflow-ellipsis rounded-md px-3 hover:bg-gray-100 dark:bg-black"
             >
               {title}
             </h4>
@@ -56,12 +53,12 @@
           />
         {/if}
       {:else}
-        <div class="flex items-center w-full" {title}>
+        <div class="flex w-full items-center" {title}>
           <slot name="image" />
           <h4
             class="{$$slots.image
               ? 'ml-2'
-              : ''} dark:text-white whitespace-nowrap truncate text-lg font-semibold"
+              : ''} truncate whitespace-nowrap text-lg font-semibold dark:text-white"
           >
             {title}
           </h4>
@@ -69,12 +66,12 @@
       {/if}
     {/if}
     {#if Array.isArray(navItems) && navItems.length}
-      <div class="flex justify-evenly items-center">
+      <div class="flex items-center justify-evenly">
         {#each navItems as item}
           <a
-            class="mr-5 pb-2 text-sm font-bold flex items-center relative {item.isActive
+            class="relative mr-5 flex items-center pb-2 text-sm font-bold {item.isActive
               ? 'text-primary-700'
-              : 'dark:text-white text-black'} hover:no-underline"
+              : 'text-black dark:text-white'} hover:no-underline"
             href={item.href}
           >
             {item.label}
@@ -83,15 +80,12 @@
               <Chip value={item.badgeValue} className="ml-1 bg-gray-300 dark:text-black" />
             {/if}
             <span
-              class="absolute bottom-0 left-0 h-1 bg-primary-700 transition-all ease-in-out duration-500 {item.isActive
+              class="bg-primary-700 absolute bottom-0 left-0 h-1 transition-all duration-500 ease-in-out {item.isActive
                 ? 'w-full'
                 : 'w-0'}"
             />
           </a>
         {/each}
-        {#if addButtonHref}
-          <NewButton href={addButtonHref} label={addButtonLabel} />
-        {/if}
       </div>
     {/if}
     <slot name="widget" />
diff --git a/apps/dashboard/src/lib/components/NotFound/NotFound.svelte b/apps/dashboard/src/lib/components/Page/NotFound.svelte
similarity index 74%
rename from apps/dashboard/src/lib/components/NotFound/NotFound.svelte
rename to apps/dashboard/src/lib/components/Page/NotFound.svelte
index d47c60c4..69da18ea 100644
--- a/apps/dashboard/src/lib/components/NotFound/NotFound.svelte
+++ b/apps/dashboard/src/lib/components/Page/NotFound.svelte
@@ -1,7 +1,7 @@
 <script>
   import { goto } from '$app/navigation';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
 
   export let isOrg = false;
 
@@ -14,17 +14,17 @@
   }
 </script>
 
-<div class="root flex items-center justify-center flex-col w-screen">
+<div class="root flex w-screen flex-col items-center justify-center">
   <img src="https://brand.cdn.clsrio.com/404.png" alt="classroomio_error_image" />
-  <div class="flex flex-col items-center justify-center dark:text-white gap-3 w-4/5 lg:w-2/5">
-    <p class="text-4xl dark:text-white font-semibold mb-5">
+  <div class="flex w-4/5 flex-col items-center justify-center gap-3 dark:text-white lg:w-2/5">
+    <p class="mb-5 text-4xl font-semibold dark:text-white">
       {#if isOrg}
         Organization doesn't exist!
       {:else}
         Page not found
       {/if}
     </p>
-    <p class=" text-gray-700 text-lg text-center dark:text-white mb-5">
+    <p class=" mb-5 text-center text-lg text-gray-700 dark:text-white">
       The page you are looking for doesn't exist or has been moved. Please go back to the homepage.
     </p>
     <PrimaryButton
diff --git a/apps/dashboard/src/lib/components/Unauthorized/index.svelte b/apps/dashboard/src/lib/components/Page/Unauthorized.svelte
similarity index 66%
rename from apps/dashboard/src/lib/components/Unauthorized/index.svelte
rename to apps/dashboard/src/lib/components/Page/Unauthorized.svelte
index e0afe89d..38f84f86 100644
--- a/apps/dashboard/src/lib/components/Unauthorized/index.svelte
+++ b/apps/dashboard/src/lib/components/Page/Unauthorized.svelte
@@ -1,15 +1,15 @@
 <script>
   import { goto } from '$app/navigation';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
 </script>
 
 <div
-  class="root flex flex-col gap-2 items-center justify-center w-screen h-[calc(100vh-48px)] text-center bg-[#F3F5F9] dark:bg-black text-black dark:text-white"
+  class="root flex h-[calc(100vh-48px)] w-screen flex-col items-center justify-center gap-2 bg-[#F3F5F9] text-center text-black dark:bg-black dark:text-white"
 >
   <img src="./unauthorized.svg" alt="unauthorized" class="w-[220px]" />
-  <p class=" text-black dark:text-white text-4xl md:text-5xl font-bold">Page not found</p>
-  <p class=" text-[#656565] dark:text-white text-base font-[400] mb-2 mt-1">
+  <p class=" text-4xl font-bold text-black dark:text-white md:text-5xl">Page not found</p>
+  <p class=" mb-2 mt-1 text-base font-[400] text-[#656565] dark:text-white">
     The page you are trying to access does not exist
   </p>
 
diff --git a/apps/dashboard/src/lib/components/Page/index.ts b/apps/dashboard/src/lib/components/Page/index.ts
new file mode 100644
index 00000000..871f0896
--- /dev/null
+++ b/apps/dashboard/src/lib/components/Page/index.ts
@@ -0,0 +1,5 @@
+export { default as PageBody } from './Body.svelte';
+export { default as PageNav } from './Nav.svelte';
+export { default as PageNotFound } from './NotFound.svelte';
+export { default as PageRestricted } from './Restricted.svelte';
+export { default as PageUnauthorized } from './Unauthorized.svelte';
diff --git a/apps/dashboard/src/lib/components/PrimaryContainedButton/index.svelte b/apps/dashboard/src/lib/components/PrimaryContainedButton/index.svelte
deleted file mode 100644
index 88a038a0..00000000
--- a/apps/dashboard/src/lib/components/PrimaryContainedButton/index.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-  export let href = '';
-  export let label = '';
-  export let handleClick = () => {};
-</script>
-
-<a
-  class="root bg-primary-700 hover:bg-primary-900 text-white font-bold rounded inline-flex items-center float-right"
-  {href}
-  on:click={handleClick}
->
-  <!-- <AddAlt32 class="carbon-icon fill-current w-4 h-4 mr-1" /> -->
-  {label}
-</a>
-
-<style lang="scss">
-  .root {
-    height: fit-content;
-    border-radius: 5px;
-    padding: 4px 20px;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  @media only screen and (max-width: 1002px) {
-    a {
-      padding: 10px 15px;
-    }
-
-    a :global(svg.carbon-icon) {
-      margin-right: 0;
-    }
-  }
-</style>
diff --git a/apps/dashboard/src/lib/components/QuestionnaireBuilder/index.svelte b/apps/dashboard/src/lib/components/QuestionnaireBuilder/index.svelte
deleted file mode 100644
index a8beed51..00000000
--- a/apps/dashboard/src/lib/components/QuestionnaireBuilder/index.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<div />
diff --git a/apps/dashboard/src/lib/components/RootPage/RootPage.svelte b/apps/dashboard/src/lib/components/RootPage/RootPage.svelte
deleted file mode 100644
index e69de29b..00000000
diff --git a/apps/dashboard/src/lib/components/Space/index.svelte b/apps/dashboard/src/lib/components/Space/index.svelte
deleted file mode 100644
index b4a48ca4..00000000
--- a/apps/dashboard/src/lib/components/Space/index.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-
-<style>
-	.actions {
-		flex-grow: 1;
-	}
-</style>
-
-	<div class="actions"></div>
-
diff --git a/apps/dashboard/src/lib/components/Tabs/index.svelte b/apps/dashboard/src/lib/components/Tabs/index.svelte
index afbc0aad..2b695667 100644
--- a/apps/dashboard/src/lib/components/Tabs/index.svelte
+++ b/apps/dashboard/src/lib/components/Tabs/index.svelte
@@ -5,28 +5,28 @@
   export let tabs: {
     icon?: any;
     label: string;
-    value: string;
+    value: string | number;
     badgeValue?: number;
   }[] = [];
   export let currentTab: string | number;
   export let onChange = (v: string | number) => () => {};
 </script>
 
-<div class="w-full flex flex-col">
-  <div class="flex items-center border-b w-full overflow-x-auto mb-2">
+<div class="flex w-full flex-col">
+  <div class="mb-2 flex w-full items-center overflow-x-auto border-b">
     {#each tabs as tab}
       {#if !tab.icon && !tab.badgeValue}
         <button
           class="relative {currentTab === tab.value
             ? 'text-primary-700'
-            : 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-fit mr-4 text-center py-3 px-2"
+            : 'dark:bg-gray-500 dark:text-white'} mr-4 w-fit px-2 py-3 text-center font-semibold focus:outline-none dark:bg-transparent"
           on:click={onChange(tab.value)}
         >
-          <div class="flex items-center justify-center w-full text-center">
+          <div class="flex w-full items-center justify-center text-center">
             {$t(tab.label)}
           </div>
           <span
-            class="absolute bottom-0 left-0 h-[2px] bg-primary-700 transition-all ease-in-out duration-500 {currentTab ===
+            class="bg-primary-700 absolute bottom-0 left-0 h-[2px] transition-all duration-500 ease-in-out {currentTab ===
             tab.value
               ? 'w-full'
               : 'w-0'}"
@@ -36,10 +36,10 @@
         <button
           class="relative {currentTab === tab.value
             ? 'text-primary-700'
-            : 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-24 text-left py-3 mr-8 px-2"
+            : 'dark:bg-gray-500 dark:text-white'} mr-8 w-24 px-2 py-3 text-left font-semibold focus:outline-none dark:bg-transparent"
           on:click={onChange(tab.value)}
         >
-          <div class="grid grid-cols-5 md:grid-cols-4 gap-5 md:gap-3 items-center">
+          <div class="grid grid-cols-5 items-center gap-5 md:grid-cols-4 md:gap-3">
             {#if tab.icon}
               <svelte:component this={tab.icon} />
             {/if}
@@ -54,7 +54,7 @@
             {/if}
           </div>
           <span
-            class="absolute bottom-0 left-0 h-[2px] bg-primary-700 transition-all ease-in-out duration-500 {currentTab ===
+            class="bg-primary-700 absolute bottom-0 left-0 h-[2px] transition-all duration-500 ease-in-out {currentTab ===
             tab.value
               ? 'w-full'
               : 'w-0'}"
diff --git a/apps/dashboard/src/lib/utils/translations/de.json b/apps/dashboard/src/lib/utils/translations/de.json
index 461886d6..872cb5af 100644
--- a/apps/dashboard/src/lib/utils/translations/de.json
+++ b/apps/dashboard/src/lib/utils/translations/de.json
@@ -160,7 +160,8 @@
     "generic": {
       "success_delete": "Erfolgreich gelöscht",
       "try_again": "Fehler – Bitte versuchen Sie es später noch einmal"
-    }
+    },
+    "success_delete": "Erfolgreich gelöscht"
   },
   "exercises": {
     "heading": "Übungen",
@@ -574,7 +575,11 @@
         "comments": {
           "title": "Kommentare",
           "you": "Du",
-          "placeholder": "Sag etwas"
+          "placeholder": "Sag etwas",
+          "text_area_title": "Hinterlassen Sie einen Kommentar",
+          "comment_btn": "Kommentar",
+          "load_more_btn": "Mehr laden",
+          "cancel_btn": "Stornieren"
         },
         "exercises": {
           "heading": "Alle Übungen",
diff --git a/apps/dashboard/src/lib/utils/translations/en.json b/apps/dashboard/src/lib/utils/translations/en.json
index 97f5b1de..fa5e74b6 100644
--- a/apps/dashboard/src/lib/utils/translations/en.json
+++ b/apps/dashboard/src/lib/utils/translations/en.json
@@ -797,7 +797,11 @@
         "comments": {
           "title": "Comments",
           "you": "You",
-          "placeholder": "Say something"
+          "text_area_title": "Leave a comment",
+          "placeholder": "What do you think about this lesson?",
+          "comment_btn": "Comment",
+          "cancel_btn": "Cancel",
+          "load_more_btn": "Load more"
         },
 
         "polls": {
@@ -1267,6 +1271,7 @@
   "snackbar": {
     "success": "Success",
     "success_update": "Updated successfully",
+    "success_delete": "Deleted successfully",
     "something": "Something went wrong - Please try later",
     "update": "Update",
 
diff --git a/apps/dashboard/src/lib/utils/translations/es.json b/apps/dashboard/src/lib/utils/translations/es.json
index 0a153ac5..1fa12305 100644
--- a/apps/dashboard/src/lib/utils/translations/es.json
+++ b/apps/dashboard/src/lib/utils/translations/es.json
@@ -160,7 +160,8 @@
     "generic": {
       "success_delete": "Borrado exitosamente",
       "try_again": "Error: inténtelo de nuevo más tarde"
-    }
+    },
+    "success_delete": "Eliminado exitosamente"
   },
   "exercises": {
     "heading": "Ejercicios",
@@ -574,7 +575,11 @@
         "comments": {
           "title": "Comentarios",
           "you": "Tú",
-          "placeholder": "Di algo"
+          "placeholder": "Di algo",
+          "text_area_title": "Deja un comentario",
+          "comment_btn": "Comentario",
+          "load_more_btn": "Cargar más",
+          "cancel_btn": "Cancelar"
         },
         "exercises": {
           "heading": "Todos los ejercicios",
diff --git a/apps/dashboard/src/lib/utils/translations/fr.json b/apps/dashboard/src/lib/utils/translations/fr.json
index 923e9d4c..dca4bbae 100644
--- a/apps/dashboard/src/lib/utils/translations/fr.json
+++ b/apps/dashboard/src/lib/utils/translations/fr.json
@@ -160,7 +160,8 @@
     "generic": {
       "success_delete": "Supprimé avec succès",
       "try_again": "Erreur - Veuillez réessayer plus tard"
-    }
+    },
+    "success_delete": "Supprimé avec succès"
   },
   "exercises": {
     "heading": "Des exercices",
@@ -574,7 +575,11 @@
         "comments": {
           "title": "commentaires",
           "you": "Toi",
-          "placeholder": "Dire quelque chose"
+          "placeholder": "Dire quelque chose",
+          "text_area_title": "Laisser un commentaire",
+          "comment_btn": "Commentaire",
+          "load_more_btn": "Charger plus",
+          "cancel_btn": "Annuler"
         },
         "exercises": {
           "heading": "Tous les exercices",
diff --git a/apps/dashboard/src/lib/utils/translations/hi.json b/apps/dashboard/src/lib/utils/translations/hi.json
index 2cb934d0..579f20b1 100644
--- a/apps/dashboard/src/lib/utils/translations/hi.json
+++ b/apps/dashboard/src/lib/utils/translations/hi.json
@@ -160,7 +160,8 @@
     "generic": {
       "success_delete": "सफलतापूर्वक मिटाया गया",
       "try_again": "त्रुटि - कृपया बाद में पुनः प्रयास करें"
-    }
+    },
+    "success_delete": "सफलतापूर्वक मिटाया गया"
   },
   "exercises": {
     "heading": "अभ्यास",
@@ -574,7 +575,11 @@
         "comments": {
           "title": "टिप्पणियाँ",
           "you": "आप",
-          "placeholder": "कुछ कहो"
+          "placeholder": "कुछ कहो",
+          "text_area_title": "एक टिप्पणी छोड़ें",
+          "comment_btn": "टिप्पणी",
+          "load_more_btn": "और लोड करें",
+          "cancel_btn": "रद्द करना"
         },
         "exercises": {
           "heading": "सभी व्यायाम",
diff --git a/apps/dashboard/src/lib/utils/translations/pt.json b/apps/dashboard/src/lib/utils/translations/pt.json
index f2821781..e760a880 100644
--- a/apps/dashboard/src/lib/utils/translations/pt.json
+++ b/apps/dashboard/src/lib/utils/translations/pt.json
@@ -160,7 +160,8 @@
     "generic": {
       "success_delete": "Apagado com sucesso",
       "try_again": "Erro - Tente novamente mais tarde"
-    }
+    },
+    "success_delete": "Excluído com sucesso"
   },
   "exercises": {
     "heading": "Exercícios",
@@ -574,7 +575,11 @@
         "comments": {
           "title": "Comentários",
           "you": "Você",
-          "placeholder": "Dizer algo"
+          "placeholder": "Dizer algo",
+          "text_area_title": "Deixe um comentário",
+          "comment_btn": "Comentário",
+          "load_more_btn": "Carregar mais",
+          "cancel_btn": "Cancelar"
         },
         "exercises": {
           "heading": "Todos os exercícios",
diff --git a/apps/dashboard/src/lib/utils/translations/ru.json b/apps/dashboard/src/lib/utils/translations/ru.json
index 1c54aeab..2a3aea12 100644
--- a/apps/dashboard/src/lib/utils/translations/ru.json
+++ b/apps/dashboard/src/lib/utils/translations/ru.json
@@ -160,7 +160,8 @@
     "generic": {
       "success_delete": "Удален успешно",
       "try_again": "Ошибка. Повторите попытку позже."
-    }
+    },
+    "success_delete": "Удален успешно"
   },
   "exercises": {
     "heading": "Упражнения",
@@ -574,7 +575,11 @@
         "comments": {
           "title": "Комментарии",
           "you": "Ты",
-          "placeholder": "Скажите что-то"
+          "placeholder": "Скажите что-то",
+          "text_area_title": "Оставить комментарий",
+          "comment_btn": "Комментарий",
+          "load_more_btn": "Загрузить больше",
+          "cancel_btn": "Отмена"
         },
         "exercises": {
           "heading": "Все упражнения",
diff --git a/apps/dashboard/src/lib/utils/translations/vi.json b/apps/dashboard/src/lib/utils/translations/vi.json
index 60394005..ce68ec2c 100644
--- a/apps/dashboard/src/lib/utils/translations/vi.json
+++ b/apps/dashboard/src/lib/utils/translations/vi.json
@@ -160,7 +160,8 @@
     "generic": {
       "success_delete": "Đã xoá thành công",
       "try_again": "Lỗi - Vui lòng thử lại sau"
-    }
+    },
+    "success_delete": "Đã xóa thành công"
   },
   "exercises": {
     "heading": "Bài tập",
@@ -574,7 +575,11 @@
         "comments": {
           "title": "Bình luận",
           "you": "Bạn",
-          "placeholder": "Nói gì đó đi"
+          "placeholder": "Nói gì đó đi",
+          "text_area_title": "Để lại một bình luận",
+          "comment_btn": "Bình luận",
+          "load_more_btn": "Tải thêm",
+          "cancel_btn": "Hủy bỏ"
         },
         "exercises": {
           "heading": "Tất cả các bài tập",
diff --git a/apps/dashboard/src/lib/utils/types/index.ts b/apps/dashboard/src/lib/utils/types/index.ts
index 768b0a08..6bb6e1dd 100644
--- a/apps/dashboard/src/lib/utils/types/index.ts
+++ b/apps/dashboard/src/lib/utils/types/index.ts
@@ -117,10 +117,12 @@ export interface LessonCommentInsertPayload {
   comment: string;
 }
 export interface LessonComment {
+  id: number;
   name: string;
   avatar: string;
   comment: string;
   commentAt: string | Date;
+  groupmember_id: string;
 }
 
 // Generated from https://supabase-schema.vercel.app/
@@ -417,7 +419,7 @@ export interface Review {
   description: string;
 }
 
-interface Tabs {
+export interface Tabs {
   id: number;
   name: string;
 }
diff --git a/apps/dashboard/src/routes/+layout.svelte b/apps/dashboard/src/routes/+layout.svelte
index 80009f91..ea4bd3ef 100644
--- a/apps/dashboard/src/routes/+layout.svelte
+++ b/apps/dashboard/src/routes/+layout.svelte
@@ -10,7 +10,7 @@
   import LMSNavigation from '$lib/components/Navigation/lms.svelte';
   import OrgLandingPage from '$lib/components/Org/LandingPage/index.svelte';
   import PlayQuiz from '$lib/components/Org/Quiz/Play/index.svelte';
-  import Restricted from '$lib/components/Page/Restricted.svelte';
+  import { PageRestricted } from '$lib/components/Page';
   import PageLoadProgressBar from '$lib/components/Progress/PageLoadProgressBar.svelte';
   import Snackbar from '$lib/components/Snackbar/index.svelte';
   import UpgradeModal from '$lib/components/Upgrade/Modal.svelte';
@@ -129,7 +129,7 @@
 <Snackbar />
 
 {#if data.org?.is_restricted || $currentOrg.is_restricted}
-  <Restricted />
+  <PageRestricted />
 {:else if data.skipAuth}
   <PlayQuiz />
 {:else if data.isOrgSite && !path}
diff --git a/apps/dashboard/src/routes/404/+page.svelte b/apps/dashboard/src/routes/404/+page.svelte
index cdb8a573..a1fd0388 100644
--- a/apps/dashboard/src/routes/404/+page.svelte
+++ b/apps/dashboard/src/routes/404/+page.svelte
@@ -1,10 +1,10 @@
 <script>
   import { page } from '$app/stores';
 
-  import NotFound from '$lib/components/NotFound/NotFound.svelte';
+  import { PageNotFound } from '$lib/components/Page';
 
   $: query = new URLSearchParams($page.url.search);
   $: isOrg = query.get('type') === 'org';
 </script>
 
-<NotFound {isOrg} />
+<PageNotFound {isOrg} />
diff --git a/apps/dashboard/src/routes/courses/[id]/+page.svelte b/apps/dashboard/src/routes/courses/[id]/+page.svelte
index 84fe3fc6..f35873ac 100644
--- a/apps/dashboard/src/routes/courses/[id]/+page.svelte
+++ b/apps/dashboard/src/routes/courses/[id]/+page.svelte
@@ -1,39 +1,37 @@
 <script lang="ts">
+  import { goto } from '$app/navigation';
   import { page } from '$app/stores';
-  import PinFilled from 'carbon-icons-svelte/lib/PinFilled.svelte';
-  import PageNav from '$lib/components/PageNav/index.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import PageBody from '$lib/components/PageBody/index.svelte';
-  import { group } from '$lib/components/Course/store';
-  import { profile } from '$lib/utils/store/user';
-  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
-  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
-  import { isNewFeedModal } from '$lib/components/Course/components/NewsFeed/store';
-  import NewsFeedCard from '$lib/components/Course/components/NewsFeed/NewsFeedCard.svelte';
+  import Box from '$lib/components/Box/index.svelte';
   import NewFeedModal from '$lib/components/Course/components/NewsFeed/NewFeedModal.svelte';
+  import NewsFeedCard from '$lib/components/Course/components/NewsFeed/NewsFeedCard.svelte';
+  import NewsFeedLoader from '$lib/components/Course/components/NewsFeed/NewsFeedLoader.svelte';
+  import { isNewFeedModal, newsFeed } from '$lib/components/Course/components/NewsFeed/store';
+  import { group } from '$lib/components/Course/store';
+  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
+  import { PageBody, PageNav } from '$lib/components/Page';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
+  import { snackbar } from '$lib/components/Snackbar/store';
+  import { supabase } from '$lib/utils/functions/supabase';
+  import { t } from '$lib/utils/functions/translations';
   import {
     createComment,
-    deleteNewsFeedComment,
     deleteNewsFeed,
+    deleteNewsFeedComment,
+    fetchNewsFeedReaction,
     fetchNewsFeeds,
     handleEditFeed,
-    toggleFeedIsPinned,
-    fetchNewsFeedReaction
+    toggleFeedIsPinned
   } from '$lib/utils/services/newsfeed';
-  import { newsFeed } from '$lib/components/Course/components/NewsFeed/store';
-  import Box from '$lib/components/Box/index.svelte';
-  import { supabase } from '$lib/utils/functions/supabase';
-  import { snackbar } from '$lib/components/Snackbar/store';
-  import type { Feed } from '$lib/utils/types/feed';
   import {
     NOTIFICATION_NAME,
     triggerSendEmail
   } from '$lib/utils/services/notification/notification';
-  import NewsFeedLoader from '$lib/components/Course/components/NewsFeed/NewsFeedLoader.svelte';
-  import { t } from '$lib/utils/functions/translations';
   import { currentOrg } from '$lib/utils/store/org';
+  import { profile } from '$lib/utils/store/user';
+  import type { Feed } from '$lib/utils/types/feed';
   import type { CurrentOrg } from '$lib/utils/types/org';
-  import { goto } from '$app/navigation';
+  import PinFilled from 'carbon-icons-svelte/lib/PinFilled.svelte';
 
   export let data;
 
@@ -280,10 +278,10 @@
         </div>
       {:else if !$newsFeed.length}
         <Box>
-          <div class="flex justify-between flex-col items-center w-[90%] md:w-96">
-            <img src="/images/empty-lesson-icon.svg" alt="Lesson" class="my-2.5 mx-auto" />
-            <h2 class="text-xl my-1.5 font-normal">{$t('course.navItem.news_feed.body_header')}</h2>
-            <p class="text-sm text-center text-slate-500">
+          <div class="flex w-[90%] flex-col items-center justify-between md:w-96">
+            <img src="/images/empty-lesson-icon.svg" alt="Lesson" class="mx-auto my-2.5" />
+            <h2 class="my-1.5 text-xl font-normal">{$t('course.navItem.news_feed.body_header')}</h2>
+            <p class="text-center text-sm text-slate-500">
               {$t('course.navItem.news_feed.body_content')}
             </p>
           </div>
@@ -291,7 +289,7 @@
       {:else}
         {#each $newsFeed as feed}
           {#if feed.isPinned}
-            <div class="flex items-center gap-2 mb-3">
+            <div class="mb-3 flex items-center gap-2">
               <PinFilled size={16} />
 
               <p class="text-sm">{$t('course.navItem.news_feed.pinned')}</p>
diff --git a/apps/dashboard/src/routes/courses/[id]/attendance/+page.svelte b/apps/dashboard/src/routes/courses/[id]/attendance/+page.svelte
index 39ffc8d6..f56b9d95 100644
--- a/apps/dashboard/src/routes/courses/[id]/attendance/+page.svelte
+++ b/apps/dashboard/src/routes/courses/[id]/attendance/+page.svelte
@@ -1,31 +1,30 @@
 <script lang="ts">
+  import { browser } from '$app/environment';
+  import Box from '$lib/components/Box/index.svelte';
+  import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
+  import { getLectureNo } from '$lib/components/Course/function.js';
+  import { course, group } from '$lib/components/Course/store';
+  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
+  import { PageBody, PageNav } from '$lib/components/Page';
+  import { snackbar } from '$lib/components/Snackbar/store';
+  import { ROLE } from '$lib/utils/constants/roles';
+  import { t } from '$lib/utils/functions/translations';
+  import { takeAttendance } from '$lib/utils/services/attendance';
+  import { globalStore } from '$lib/utils/store/app';
+  import { attendance } from '$lib/utils/store/attendance';
+  import { profile } from '$lib/utils/store/user';
+  import type { GroupPerson, Lesson } from '$lib/utils/types/index';
   import {
-    Search,
     Checkbox,
+    Pagination,
+    Search,
     StructuredList,
     StructuredListBody,
     StructuredListCell,
     StructuredListHead,
-    StructuredListRow,
-    Pagination
+    StructuredListRow
   } from 'carbon-components-svelte';
   import AudioConsoleIcon from 'carbon-icons-svelte/lib/AudioConsole.svelte';
-  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
-  import PageNav from '$lib/components/PageNav/index.svelte';
-  import PageBody from '$lib/components/PageBody/index.svelte';
-  import Box from '$lib/components/Box/index.svelte';
-  import { course, group } from '$lib/components/Course/store';
-  import { getLectureNo } from '$lib/components/Course/function.js';
-  import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
-  import { ROLE } from '$lib/utils/constants/roles';
-  import { takeAttendance } from '$lib/utils/services/attendance';
-  import { snackbar } from '$lib/components/Snackbar/store';
-  import { attendance } from '$lib/utils/store/attendance';
-  import { profile } from '$lib/utils/store/user';
-  import type { GroupPerson, Lesson } from '$lib/utils/types/index';
-  import { browser } from '$app/environment';
-  import { globalStore } from '$lib/utils/store/app';
-  import { t } from '$lib/utils/functions/translations';
 
   export let data;
 
@@ -140,12 +139,12 @@
 <CourseContainer bind:courseId={data.courseId}>
   <PageNav title={$t('course.navItem.attendance.title')} />
   <PageBody width="w-full max-w-6xl md:w-11/12">
-    <section class="flex items-center mx-2 lg:mx-9 my-5">
+    <section class="mx-2 my-5 flex items-center lg:mx-9">
       <div
-        class="flex flex-col lg:flex-row items-start gap-2 lg:items-center justify-between w-full"
+        class="flex w-full flex-col items-start justify-between gap-2 lg:flex-row lg:items-center"
       >
         <div class="flex">
-          <p class="flex items-center mr-5">
+          <p class="mr-5 flex items-center">
             <Checkbox checked disabled />
             {$t('course.navItem.attendance.present')}
           </p>
@@ -164,8 +163,8 @@
       </div>
     </section>
 
-    <section class="my-5 mx-2 lg:mx-9">
-      <StructuredList class="m-0 relative">
+    <section class="mx-2 my-5 lg:mx-9">
+      <StructuredList class="relative m-0">
         <!-- Moved the lesson headers outside the students loop -->
         <StructuredListHead class="bg-primary-100">
           <StructuredListRow head class="mx-7">
@@ -186,8 +185,8 @@
           <StructuredListBody>
             <StructuredListRow>
               <StructuredListCell>
-                <div class="w-1/4 flex items-center">
-                  <p class="dark:text-white font-semibold">
+                <div class="flex w-1/4 items-center">
+                  <p class="font-semibold dark:text-white">
                     {student.profile.fullname}
                   </p>
                 </div>
@@ -213,7 +212,7 @@
       {#if students.length === 0}
         <Box className="h-[300px] w-full">
           <AudioConsoleIcon size={32} class="carbon-icon w-80" />
-          <h3 class="text-3xl text-gray-500 dark:text-white text-center">
+          <h3 class="text-center text-3xl text-gray-500 dark:text-white">
             {$t('course.navItem.attendance.no_student')}
           </h3>
         </Box>
diff --git a/apps/dashboard/src/routes/courses/[id]/certificates/+page.svelte b/apps/dashboard/src/routes/courses/[id]/certificates/+page.svelte
index 0303c9e0..f5e1a1f1 100644
--- a/apps/dashboard/src/routes/courses/[id]/certificates/+page.svelte
+++ b/apps/dashboard/src/routes/courses/[id]/certificates/+page.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
-  import PageNav from '$lib/components/PageNav/index.svelte';
-  import PageBody from '$lib/components/PageBody/index.svelte';
-  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
   import IssueCertificateModal from '$lib/components/Course/components/Ceritficate/IssueCertificateModal.svelte';
+  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
+  import { PageBody, PageNav } from '$lib/components/Page';
+  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
   // import DeleteConfirmation from '$lib/components/Course/components/People/DeleteConfirmation.svelte';
   import Design from '$lib/components/Course/components/Ceritficate/Design.svelte';
   // import Reports from '$lib/components/Course/components/Ceritficate/Reports.svelte';
diff --git a/apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte b/apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte
index 8304b7a7..5451e654 100644
--- a/apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte
+++ b/apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte
@@ -1,29 +1,28 @@
 <script lang="ts">
-  import { page } from '$app/stores';
-  import PageNav from '$lib/components/PageNav/index.svelte';
-  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
-  import Box from '$lib/components/Box/index.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
-  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
-  import {
-    lessons,
-    handleDelete,
-    lessonSections
-  } from '$lib/components/Course/components/Lesson/store/lessons';
-  import PageBody from '$lib/components/PageBody/index.svelte';
-  import DeleteLessonConfirmation from '$lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte';
-  import { handleAddLessonWidget } from '$lib/components/Course/components/Lesson/store';
-  import { course } from '$lib/components/Course/store';
-  import type { Lesson } from '$lib/utils/types';
-  import { t } from '$lib/utils/functions/translations';
   import { goto } from '$app/navigation';
-  import { COURSE_VERSION } from '$lib/utils/types';
-  import { profile } from '$lib/utils/store/user';
+  import { page } from '$app/stores';
+  import Box from '$lib/components/Box/index.svelte';
+  import ActivateSectionsModal from '$lib/components/Course/components/Lesson/ActivateSectionsModal.svelte';
+  import DeleteLessonConfirmation from '$lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte';
   import LessonList from '$lib/components/Course/components/Lesson/LessonList.svelte';
   import LessonSectionList from '$lib/components/Course/components/Lesson/LessonSectionList.svelte';
   import NewLessonModal from '$lib/components/Course/components/Lesson/NewLessonModal.svelte';
-  import ActivateSectionsModal from '$lib/components/Course/components/Lesson/ActivateSectionsModal.svelte';
+  import { handleAddLessonWidget } from '$lib/components/Course/components/Lesson/store';
+  import {
+    handleDelete,
+    lessons,
+    lessonSections
+  } from '$lib/components/Course/components/Lesson/store/lessons';
+  import { course } from '$lib/components/Course/store';
+  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
+  import { PageBody, PageNav } from '$lib/components/Page';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
+  import { t } from '$lib/utils/functions/translations';
+  import { profile } from '$lib/utils/store/user';
+  import type { Lesson } from '$lib/utils/types';
+  import { COURSE_VERSION } from '$lib/utils/types';
 
   export let data;
 
@@ -135,7 +134,7 @@
       </Box>
     {:else if lessonsLength > 0}
       {#if reorder}
-        <p class="text-gray-400 text-center dark:text-white italic text-xs">
+        <p class="text-center text-xs italic text-gray-400 dark:text-white">
           {$t('course.navItem.lessons.drag')}
         </p>
       {/if}
@@ -147,10 +146,10 @@
       {/if}
     {:else}
       <Box className="w-full lg:w-11/12 lg:px-4 m-auto">
-        <div class="flex justify-between flex-col items-center">
-          <img src="/images/empty-lesson-icon.svg" alt="Lesson" class="my-2.5 mx-auto" />
-          <h2 class="text-xl my-1.5 font-normal">{$t('course.navItem.lessons.body_header')}</h2>
-          <p class="text-sm text-center text-slate-500">
+        <div class="flex flex-col items-center justify-between">
+          <img src="/images/empty-lesson-icon.svg" alt="Lesson" class="mx-auto my-2.5" />
+          <h2 class="my-1.5 text-xl font-normal">{$t('course.navItem.lessons.body_header')}</h2>
+          <p class="text-center text-sm text-slate-500">
             {$t('course.navItem.lessons.body_content')}
           </p>
         </div>
diff --git a/apps/dashboard/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte b/apps/dashboard/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
index fc7614ef..4387caeb 100644
--- a/apps/dashboard/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
+++ b/apps/dashboard/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
@@ -1,53 +1,50 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
-  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
   import { env } from '$env/dynamic/public';
+  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
   import {
+    checkExercisesComplete,
     fetchLesson,
-    updateLessonCompletion,
-    checkExercisesComplete
+    updateLessonCompletion
   } from '$lib/utils/services/courses';
-  import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
-  import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
-  import ListChecked from 'carbon-icons-svelte/lib/ListChecked.svelte';
   import { globalStore } from '$lib/utils/store/app';
+  import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
+  import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
+  import ListChecked from 'carbon-icons-svelte/lib/ListChecked.svelte';
 
-  import SendAlt from 'carbon-icons-svelte/lib/SendAlt.svelte';
-  import CourseIcon from '$lib/components/Icons/CourseIcon.svelte';
-  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
-  import { Dropdown } from 'carbon-components-svelte';
-  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
-  import PageNav from '$lib/components/PageNav/index.svelte';
-  import PageBody from '$lib/components/PageBody/index.svelte';
-  import Materials from '$lib/components/Course/components/Lesson/Materials/index.svelte';
-  import Exercises from '$lib/components/Course/components/Lesson/Exercises/index.svelte';
-  import LessonVersionHistory from '$lib/components/Course/components/Lesson/LessonVersionHistory.svelte';
-  import MODES from '$lib/utils/constants/mode';
-  import { group, course } from '$lib/components/Course/store';
-  import Download from 'carbon-icons-svelte/lib/Download.svelte';
-  import ResultOld from 'carbon-icons-svelte/lib/ResultOld.svelte';
-  import OverflowMenuVertical from 'carbon-icons-svelte/lib/OverflowMenuVertical.svelte';
+  import { browser } from '$app/environment';
   import { apps } from '$lib/components/Apps/store';
-  import APPS_CONSTANTS from '$lib/components/Apps/constants';
-  import IconButton from '$lib/components/IconButton/index.svelte';
-  import { getGroupMemberId } from '$lib/components/Course/function';
+  import Exercises from '$lib/components/Course/components/Lesson/Exercises/index.svelte';
+  import { getIsLessonComplete } from '$lib/components/Course/components/Lesson/functions';
+  import LessonVersionHistory from '$lib/components/Course/components/Lesson/LessonVersionHistory.svelte';
+  import Materials from '$lib/components/Course/components/Lesson/Materials/index.svelte';
   import {
     lesson,
-    lessons,
     lessonByTranslation,
+    lessons,
     lessonSections
   } from '$lib/components/Course/components/Lesson/store/lessons';
-  import { browser } from '$app/environment';
-  import { currentOrg } from '$lib/utils/store/org';
+  import { getGroupMemberId } from '$lib/components/Course/function';
+  import { course, group } from '$lib/components/Course/store';
+  import IconButton from '$lib/components/IconButton/index.svelte';
+  import CourseIcon from '$lib/components/Icons/CourseIcon.svelte';
+  import { PageBody, PageNav } from '$lib/components/Page';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
   import { snackbar } from '$lib/components/Snackbar/store';
-  import { COURSE_VERSION, type LessonCompletion, type Lesson } from '$lib/utils/types';
-  import { profile } from '$lib/utils/store/user';
-  import { getIsLessonComplete } from '$lib/components/Course/components/Lesson/functions';
-  import { t } from '$lib/utils/functions/translations';
+  import MODES from '$lib/utils/constants/mode';
   import { LANGUAGES } from '$lib/utils/constants/translation';
+  import { t } from '$lib/utils/functions/translations';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { profile } from '$lib/utils/store/user';
+  import { COURSE_VERSION, type Lesson, type LessonCompletion } from '$lib/utils/types';
+  import { Dropdown } from 'carbon-components-svelte';
   import { ChevronLeft, ChevronRight, Edit, Save } from 'carbon-icons-svelte';
+  import Download from 'carbon-icons-svelte/lib/Download.svelte';
+  import OverflowMenuVertical from 'carbon-icons-svelte/lib/OverflowMenuVertical.svelte';
+  import ResultOld from 'carbon-icons-svelte/lib/ResultOld.svelte';
 
   export let data;
 
@@ -73,7 +70,7 @@
   async function fetchReqData(lessonId = '', isMaterialsTabActive: boolean) {
     const timeout = setTimeout(() => {
       $lesson.isFetching = true;
-    }, 1000);
+    }, 500);
     let lessonData;
     if (isMaterialsTabActive) {
       const lesson = await fetchLesson(lessonId);
@@ -84,9 +81,9 @@
 
     console.log({ lessonData });
 
-    const totalExercises = lessonData?.totalExercises?.[0] && lessonData.totalExercises[0].count;
-    const totalComments = lessonData?.totalComments?.[0] && lessonData.totalComments[0].count;
-    setLesson(lessonData, totalExercises || 0, totalComments || 0);
+    const totalExercises = lessonData?.totalExercises?.[0]?.count || 0;
+    const totalComments = lessonData?.totalComments?.[0]?.count || 0;
+    setLesson(lessonData, totalExercises, totalComments);
     $lesson.isFetching = false;
   }
 
@@ -321,7 +318,7 @@
 
   $: path = $page.url?.pathname?.replace(/\/exercises[\/ 0-9 a-z -]*/, '');
 
-  $: if (data.courseId && browser) {
+  $: if (data.courseId && $profile.id && browser) {
     mode = MODES.view;
     fetchReqData(data.lessonId, data.isMaterialsTabActive);
   }
@@ -414,10 +411,6 @@
   {:else if !!data.lessonId}
     <PageBody
       bind:isPageNavHidden={$globalStore.isStudent}
-      onClick={() => {
-        $apps.open = false;
-        $apps.dropdown = false;
-      }}
       width="lg:w-full xl:w-11/12"
       className="overflow-x-hidden"
     >
@@ -465,14 +458,6 @@
           <CourseIcon />
         </button>
       {/if}
-      <button
-        class="my-2 flex items-center border border-b-0 border-l-0 border-t-0 border-gray-300 px-2 pr-4 disabled:cursor-not-allowed disabled:opacity-10"
-        on:click={() => handleAppClick(APPS_CONSTANTS.APPS.COMMENTS)}
-        disabled={$globalStore.isStudent && !$currentOrg.customization.apps.comments}
-      >
-        <SendAlt size={24} class="carbon-icon" />
-        <span class="ml-1">{$lesson.totalComments}</span>
-      </button>
       <button
         class="my-2 flex items-center border border-b-0 border-l-0 border-t-0 border-gray-300 px-2 pr-4"
         on:click={() => markLessonComplete(data.lessonId)}
diff --git a/apps/dashboard/src/routes/courses/[id]/marks/+page.svelte b/apps/dashboard/src/routes/courses/[id]/marks/+page.svelte
index d1f0d1f1..f391dbc3 100644
--- a/apps/dashboard/src/routes/courses/[id]/marks/+page.svelte
+++ b/apps/dashboard/src/routes/courses/[id]/marks/+page.svelte
@@ -1,31 +1,29 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
-  import AudioConsoleIcon from 'carbon-icons-svelte/lib/AudioConsole.svelte';
-  import Papa from 'papaparse';
-  import { OverflowMenu, OverflowMenuItem, Loading } from 'carbon-components-svelte';
-  import Download from 'carbon-icons-svelte/lib/Download.svelte';
-  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
-  import PageNav from '$lib/components/PageNav/index.svelte';
-  import PageBody from '$lib/components/PageBody/index.svelte';
-  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
-  import Box from '$lib/components/Box/index.svelte';
-  import { ROLE } from '$lib/utils/constants/roles';
-  import { group } from '$lib/components/Course/store';
-  import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
-  import { fetchExercisesByMarks } from '$lib/utils/services/courses';
-  import { getLectureNo } from '$lib/components/Course/function.js';
-  import { fetchMarks } from '$lib/utils/services/marks';
-  import { profile } from '$lib/utils/store/user';
   import { browser } from '$app/environment';
-  import { course } from '$lib/components/Course/store';
+  import { goto } from '$app/navigation';
+  import Box from '$lib/components/Box/index.svelte';
+  import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
+  import { getLectureNo } from '$lib/components/Course/function.js';
+  import { course, group } from '$lib/components/Course/store';
+  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
+  import { PageBody, PageNav } from '$lib/components/Page';
+  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
   import { snackbar } from '$lib/components/Snackbar/store';
-  import { globalStore } from '$lib/utils/store/app';
+  import { ROLE } from '$lib/utils/constants/roles';
   import { t } from '$lib/utils/functions/translations';
+  import { fetchExercisesByMarks } from '$lib/utils/services/courses';
+  import { fetchMarks } from '$lib/utils/services/marks';
+  import { globalStore } from '$lib/utils/store/app';
   import { currentOrg } from '$lib/utils/store/org';
-  import type { CurrentOrg } from '$lib/utils/types/org';
+  import { profile } from '$lib/utils/store/user';
   import type { GroupPerson } from '$lib/utils/types';
+  import type { CurrentOrg } from '$lib/utils/types/org';
+  import { Loading, OverflowMenu, OverflowMenuItem } from 'carbon-components-svelte';
+  import AudioConsoleIcon from 'carbon-icons-svelte/lib/AudioConsole.svelte';
+  import Download from 'carbon-icons-svelte/lib/Download.svelte';
   import jsPDF from 'jspdf';
   import autoTable from 'jspdf-autotable';
+  import Papa from 'papaparse';
 
   export let data;
 
@@ -240,19 +238,19 @@
     </PageNav>
 
     <PageBody width="w-full max-w-6xl md:w-11/12">
-      <div id="tableContainer" class="table rounded-md border border-gray-300 w-full">
+      <div id="tableContainer" class="table w-full rounded-md border border-gray-300">
         <div class="flex items-center {borderBottomGrey}">
           <div class="box flex items-center p-3">
-            <p class="dark:text-white w-40">{$t('course.navItem.marks.student')}</p>
+            <p class="w-40 dark:text-white">{$t('course.navItem.marks.student')}</p>
           </div>
           {#each $lessons as lesson, index}
             {#if lessonMapping[lesson.id]}
               <div class="box flex flex-col items-center {borderleftGrey}">
-                <p class="dark:text-white col lesson-number" title={lesson.title}>
+                <p class="col lesson-number dark:text-white" title={lesson.title}>
                   {getLectureNo(index + 1)}
                 </p>
                 <div
-                  class="flex h-full items-center border-r-0 border-t border-b-0 border-l-0 border-gray-300"
+                  class="flex h-full items-center border-b-0 border-l-0 border-r-0 border-t border-gray-300"
                 >
                   {#each Object.keys(lessonMapping[lesson.id]) as exerciseId, index}
                     <p
@@ -268,20 +266,20 @@
             {/if}
           {/each}
           <div class="box flex items-center {borderleftGrey}">
-            <p class="dark:text-white w-20 text-center">{$t('course.navItem.marks.total')}</p>
+            <p class="w-20 text-center dark:text-white">{$t('course.navItem.marks.total')}</p>
           </div>
         </div>
 
         {#each students as student}
-          <div class="flex relative items-center p-3 cursor-pointer {borderBottomGrey}">
-            <div class="w-40 flex items-center">
+          <div class="relative flex cursor-pointer items-center p-3 {borderBottomGrey}">
+            <div class="flex w-40 items-center">
               <img
                 alt="Student avatar"
                 src={student.profile.avatar_url}
-                class="w-8 h-8 rounded-full mr-2"
+                class="mr-2 h-8 w-8 rounded-full"
               />
               <div class="text-sm">
-                <p class="dark:text-white font-semibold">
+                <p class="font-semibold dark:text-white">
                   {student.profile.fullname}
                 </p>
                 <p class="dark:text-white">
@@ -293,7 +291,7 @@
               {#if lessonMapping[lesson.id]}
                 <div class="flex items-center">
                   {#each Object.keys(lessonMapping[lesson.id]) as exerciseId}
-                    <p class="dark:text-white col">
+                    <p class="col dark:text-white">
                       {studentMarksByExerciseId[student.id]
                         ? studentMarksByExerciseId[student.id][exerciseId] || '-'
                         : '-'}
@@ -303,9 +301,9 @@
               {/if}
             {/each}
 
-            <div class="w-20 flex items-center">
+            <div class="flex w-20 items-center">
               <div class="text-sm">
-                <p class="dark:text-white col">
+                <p class="col dark:text-white">
                   {calculateStudentTotal(studentMarksByExerciseId[student.id])}
                 </p>
               </div>
diff --git a/apps/dashboard/src/routes/courses/[id]/people/+layout.svelte b/apps/dashboard/src/routes/courses/[id]/people/+layout.svelte
index 98b3ad24..42b7747d 100644
--- a/apps/dashboard/src/routes/courses/[id]/people/+layout.svelte
+++ b/apps/dashboard/src/routes/courses/[id]/people/+layout.svelte
@@ -3,8 +3,7 @@
   import { page } from '$app/stores';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
-  import PageBody from '$lib/components/PageBody/index.svelte';
-  import PageNav from '$lib/components/PageNav/index.svelte';
+  import { PageBody, PageNav } from '$lib/components/Page';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
   import { t } from '$lib/utils/functions/translations';
diff --git a/apps/dashboard/src/routes/courses/[id]/settings/+page.svelte b/apps/dashboard/src/routes/courses/[id]/settings/+page.svelte
index 131b597d..3ae9dd0e 100644
--- a/apps/dashboard/src/routes/courses/[id]/settings/+page.svelte
+++ b/apps/dashboard/src/routes/courses/[id]/settings/+page.svelte
@@ -1,8 +1,7 @@
 <script>
-  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
-  import PageNav from '$lib/components/PageNav/index.svelte';
-  import PageBody from '$lib/components/PageBody/index.svelte';
   import Settings from '$lib/components/Course/components/Settings/index.svelte';
+  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
+  import { PageBody, PageNav } from '$lib/components/Page';
   import { t } from '$lib/utils/functions/translations';
 
   export let data;
diff --git a/apps/dashboard/src/routes/courses/[id]/submissions/+page.svelte b/apps/dashboard/src/routes/courses/[id]/submissions/+page.svelte
index d270689d..f8fced83 100644
--- a/apps/dashboard/src/routes/courses/[id]/submissions/+page.svelte
+++ b/apps/dashboard/src/routes/courses/[id]/submissions/+page.svelte
@@ -1,38 +1,37 @@
 <script lang="ts">
-  import { flip } from 'svelte/animate';
-  import { dndzone } from 'svelte-dnd-action';
+  import { browser } from '$app/environment';
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
-  import { SkeletonPlaceholder } from 'carbon-components-svelte';
-  import PageNav from '$lib/components/PageNav/index.svelte';
-  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
-  import MarkExerciseModal from '$lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte';
   import Chip from '$lib/components/Chip/index.svelte';
-  import PageBody from '$lib/components/PageBody/index.svelte';
-  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
-  import { course } from '$lib/components/Course/store';
-  import {
-    fetchSubmissions,
-    updateSubmission,
-    updateQuestionAnswer,
-    deleteSubmission
-  } from '$lib/utils/services/submissions';
+  import MarkExerciseModal from '$lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte';
   import { formatAnswers } from '$lib/components/Course/function.js';
+  import { course } from '$lib/components/Course/store';
+  import CourseContainer from '$lib/components/CourseContainer/index.svelte';
+  import { PageBody, PageNav } from '$lib/components/Page';
+  import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
   import { snackbar } from '$lib/components/Snackbar/store';
-  import isSubmissionEarly from '$lib/utils/functions/isSubmissionEarly';
   import formatDate from '$lib/utils/functions/formatDate';
-  import {
-    triggerSendEmail,
-    NOTIFICATION_NAME
-  } from '$lib/utils/services/notification/notification';
-  import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
-  import { browser } from '$app/environment';
+  import isSubmissionEarly from '$lib/utils/functions/isSubmissionEarly';
   import { t } from '$lib/utils/functions/translations';
+  import {
+    NOTIFICATION_NAME,
+    triggerSendEmail
+  } from '$lib/utils/services/notification/notification';
+  import {
+    deleteSubmission,
+    fetchSubmissions,
+    updateQuestionAnswer,
+    updateSubmission
+  } from '$lib/utils/services/submissions';
+  import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
   import type {
     SubmissionIdData,
     SubmissionItem,
     SubmissionSection
   } from '$lib/utils/types/submission';
+  import { SkeletonPlaceholder } from 'carbon-components-svelte';
+  import { dndzone } from 'svelte-dnd-action';
+  import { flip } from 'svelte/animate';
 
   export let data;
   const { courseId } = data;
@@ -373,23 +372,23 @@
     <PageNav title={$t('course.navItem.submissions.title')} />
 
     <PageBody width="w-full max-w-6xl md:w-11/12 overflow-x-auto">
-      <div class="flex items-center w-full">
+      <div class="flex w-full items-center">
         {#each sections as { id, title, items }, idx (id)}
           <div
-            class="section rounded-md bg-gray-100 dark:bg-black border border-gray-50 dark:border-neutral-600 p-3 h-80 mr-3 overflow-hidden"
+            class="section mr-3 h-80 overflow-hidden rounded-md border border-gray-50 bg-gray-100 p-3 dark:border-neutral-600 dark:bg-black"
             animate:flip={{ duration: flipDurationMs }}
           >
-            <div class="flex items-center mb-2">
+            <div class="mb-2 flex items-center">
               <Chip value={items.length} className="bg-set dark:bg-neutral-800" />
-              <p class="dark:text-white ml-2 font-bold">{title}</p>
+              <p class="ml-2 font-bold dark:text-white">{title}</p>
             </div>
             {#if fetching}
-              <SkeletonPlaceholder style="width: 100%; height: 170px;" class="rounded-md my-2" />
-              <SkeletonPlaceholder style="width: 100%; height: 170px;" class="rounded-md my-2" />
-              <SkeletonPlaceholder style="width: 100%; height: 170px;" class="rounded-md my-2" />
+              <SkeletonPlaceholder style="width: 100%; height: 170px;" class="my-2 rounded-md" />
+              <SkeletonPlaceholder style="width: 100%; height: 170px;" class="my-2 rounded-md" />
+              <SkeletonPlaceholder style="width: 100%; height: 170px;" class="my-2 rounded-md" />
             {:else}
               <div
-                class="content pr-2 overflow-y-auto mb-3"
+                class="content mb-3 overflow-y-auto pr-2"
                 use:dndzone={{
                   items,
                   flipDurationMs,
@@ -402,19 +401,19 @@
                   <div
                     class="{item.isEarly
                       ? 'border-none'
-                      : 'border border-red-700'} w-full my-2 mx-0 rounded-md bg-white dark:bg-neutral-800 py-3 px-3"
+                      : 'border border-red-700'} mx-0 my-2 w-full rounded-md bg-white px-3 py-3 dark:bg-neutral-800"
                     animate:flip={{ duration: flipDurationMs }}
                   >
                     <a
-                      class="flex w-full items-center cursor-pointer text-black mb-2"
+                      class="mb-2 flex w-full cursor-pointer items-center text-black"
                       href={`${$page.url.pathname}?submissionId=${item.id}`}
                     >
                       <img
                         alt="Student avatar"
-                        class="block rounded-full h-6 w-6"
+                        class="block h-6 w-6 rounded-full"
                         src={item.student.avatar_url}
                       />
-                      <p class="dark:text-white ml-2 text-sm">
+                      <p class="ml-2 text-sm dark:text-white">
                         {item.student.username}
                       </p>
                     </a>
@@ -425,15 +424,15 @@
                       {item.exercise.title}
                     </a>
                     <a
-                      class="flex items-center no-underline hover:underline text-black my-2"
+                      class="my-2 flex items-center text-black no-underline hover:underline"
                       href="{$page.url?.pathname?.replace('submissions', 'lessons')}/{item.lesson
                         .id}/exercises/{item.exercise.id}"
                     >
-                      <p class="dark:text-white text-grey text-sm">
+                      <p class="text-grey text-sm dark:text-white">
                         #{item.lesson.title}
                       </p>
                     </a>
-                    <p class="dark:text-white text-gray-500 text-xs">
+                    <p class="text-xs text-gray-500 dark:text-white">
                       {item.submittedAt}
                     </p>
                     <!-- <div class="badge rounded-md px-2 bg-green-500 text-white">