diff --git a/apps/upskii/messages/en.json b/apps/upskii/messages/en.json
index 1090935f1b..d63692663c 100644
--- a/apps/upskii/messages/en.json
+++ b/apps/upskii/messages/en.json
@@ -3524,7 +3524,9 @@
     "edit_description": "Edit an existing course",
     "delete_confirm_title": "Deleting \"{name}\"",
     "card_view": "Card View",
-    "table_view": "Table View"
+    "table_view": "Table View",
+    "no_courses_found": "No courses found",
+    "no_description_provided": "No description provided"
   },
   "ws-crawlers": {
     "plural": "Crawlers",
@@ -4136,7 +4138,5 @@
     "ai_teach_studio": "AI Teaching Studio",
     "users": "Users",
     "teams": "Teams"
-  },
-  "no-courses-found": "No courses found",
-  "no-description-provided": "No description provided"
+  }
 }
diff --git a/apps/upskii/messages/vi.json b/apps/upskii/messages/vi.json
index 90934abef9..ac27cbed2a 100644
--- a/apps/upskii/messages/vi.json
+++ b/apps/upskii/messages/vi.json
@@ -3522,10 +3522,12 @@
     "edit": "Chỉnh sửa khóa học",
     "name": "Tên khóa học",
     "edit_description": "Chỉnh sửa khóa học hiện có",
-    "delete_confirm_title": "Xác nhận xoá \"{name}\"",
     "course_description": "Mô tả khóa học",
     "card_view": "Dạng thẻ",
-    "table_view": "Dạng bảng"
+    "table_view": "Dạng bảng",
+    "no_courses_found": "Chưa có khóa học nào",
+    "no_description_provided": "Không có mô tả",
+    "delete_confirm_title": "Xác nhận xoá \"{name}\""
   },
   "ws-crawlers": {
     "plural": "Công cụ cào dữ liệu",
@@ -4131,7 +4133,5 @@
     "empty_state_description": "Hoàn thành các khóa học để giành chứng chỉ và thể hiện thành tích của bạn.",
     "browse_courses": "Xem các khóa học",
     "certified": "Được chứng nhận"
-  },
-  "no-courses-found": "Chưa có khóa học nào",
-  "no-description-provided": "Không có mô tả"
+  }
 }
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/columns.tsx b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/columns.tsx
index 54d17645fd..1a2856f15d 100644
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/columns.tsx
+++ b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/columns.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import { WorkspaceCourseModuleRowActions } from './row-actions';
 import { ColumnDef } from '@tanstack/react-table';
 import { WorkspaceCourseModule } from '@tuturuuu/types/db';
+import { WorkspaceCourseModuleRowActions } from '@tuturuuu/ui/custom/education/modules/course-module-row-actions';
 import { DataTableColumnHeader } from '@tuturuuu/ui/custom/tables/data-table-column-header';
 import { Check, X } from '@tuturuuu/ui/icons';
 import moment from 'moment';
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/layout.tsx b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/layout.tsx
index 14fbca3d58..83388b9a7a 100644
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/layout.tsx
+++ b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/layout.tsx
@@ -1,10 +1,7 @@
 import { createClient } from '@tuturuuu/supabase/next/server';
 import { UserGroup } from '@tuturuuu/types/primitives/UserGroup';
-import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
-import { GraduationCap } from '@tuturuuu/ui/icons';
+import { CourseHeader } from '@tuturuuu/ui/custom/education/courses/course-header';
 import { Separator } from '@tuturuuu/ui/separator';
-import { getTranslations } from 'next-intl/server';
-import Link from 'next/link';
 import { notFound } from 'next/navigation';
 import { ReactNode } from 'react';
 
@@ -18,29 +15,12 @@ interface Props {
 }
 
 export default async function CourseDetailsLayout({ children, params }: Props) {
-  const t = await getTranslations();
   const { wsId, courseId } = await params;
   const data = await getData(wsId, courseId);
 
   return (
     <>
-      <FeatureSummary
-        title={
-          <h1 className="flex w-full items-center gap-2 text-2xl font-bold">
-            <div className="flex items-center gap-2 rounded-lg border border-dynamic-blue/20 bg-dynamic-blue/10 px-2 text-lg text-dynamic-blue max-md:hidden">
-              <GraduationCap className="h-6 w-6" />
-              {t('ws-courses.singular')}
-            </div>
-            <Link
-              href={`/${wsId}/courses/${courseId}`}
-              className="line-clamp-1 text-lg font-bold hover:underline md:text-2xl"
-            >
-              {data.name || t('common.unknown')}
-            </Link>
-          </h1>
-        }
-        description={<div>{data.description || t('common.unknown')}</div>}
-      />
+      <CourseHeader data={data} href={`/${wsId}/courses/${courseId}`} />
       <Separator className="my-4" />
       {children}
     </>
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/content/page.tsx b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/content/page.tsx
index 1c1af586d2..84b1e4b735 100644
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/content/page.tsx
+++ b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/content/page.tsx
@@ -1,8 +1,8 @@
-import ModuleContentEditor from './content-editor';
 import { createClient } from '@tuturuuu/supabase/next/server';
 import { Button } from '@tuturuuu/ui/button';
 import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
 import { Goal, Sparkles } from '@tuturuuu/ui/icons';
+import { ModuleContentEditor } from '@tuturuuu/ui/text-editor/content-editor';
 import { JSONContent } from '@tuturuuu/ui/tiptap';
 import { getTranslations } from 'next-intl/server';
 
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/layout.tsx b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/layout.tsx
index a81e545f33..75d83d63a1 100644
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/layout.tsx
+++ b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/layout.tsx
@@ -1,10 +1,10 @@
-import LinkButton from '../../link-button';
-import ModuleToggles from './toggles';
 import {
   createClient,
   createDynamicClient,
 } from '@tuturuuu/supabase/next/server';
 import { WorkspaceCourseModule } from '@tuturuuu/types/db';
+import LinkButton from '@tuturuuu/ui/custom/education/modules/link-button';
+import { ModuleToggles } from '@tuturuuu/ui/custom/education/modules/module-toggle';
 import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
 import {
   BookText,
@@ -41,7 +41,7 @@ export default async function CourseDetailsLayout({ children, params }: Props) {
 
   const data = await getData(courseId, moduleId);
   const resources = await getResources({
-    path: `${wsId}/courses/${courseId}/modules/${moduleId}/resources/`,
+    path: `${commonHref}/resources/`,
   });
   const completionStatus = await getCompletionStatus(moduleId);
 
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/page.tsx b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/page.tsx
index 0cd17885f8..ee52e3bece 100644
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/page.tsx
+++ b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/page.tsx
@@ -1,8 +1,5 @@
-import { CourseSection } from '../../section';
 import ClientFlashcards from './flashcards/client-flashcards';
 import ClientQuizzes from './quizzes/client-quizzes';
-import FileDisplay from './resources/file-display';
-import { YoutubeEmbed } from './youtube-links/embed';
 import { extractYoutubeId } from '@/utils/url-helper';
 import {
   createClient,
@@ -10,6 +7,9 @@ import {
 } from '@tuturuuu/supabase/next/server';
 import { WorkspaceCourseModule } from '@tuturuuu/types/db';
 import { Accordion } from '@tuturuuu/ui/accordion';
+import { CourseSection } from '@tuturuuu/ui/custom/education/modules/content-section';
+import { FileDisplay } from '@tuturuuu/ui/custom/education/modules/resources/file-display';
+import { YoutubeEmbed } from '@tuturuuu/ui/custom/education/modules/youtube/embed';
 import {
   BookText,
   Goal,
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/resources/page.tsx b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/resources/page.tsx
index 9824697928..555d37fada 100644
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/resources/page.tsx
+++ b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/resources/page.tsx
@@ -1,7 +1,7 @@
-import DeleteResourceButton from './delete-resource';
-import FileDisplay from './file-display';
-import { StorageObjectForm } from '@/app/[locale]/(dashboard)/[wsId]/drive/form';
 import { createDynamicClient } from '@tuturuuu/supabase/next/server';
+import { DeleteResourceButton } from '@tuturuuu/ui/custom/education/modules/resources/delete-resource';
+import { FileDisplay } from '@tuturuuu/ui/custom/education/modules/resources/file-display';
+import { StorageObjectForm } from '@tuturuuu/ui/custom/education/modules/resources/file-upload-form';
 import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
 import { Paperclip } from '@tuturuuu/ui/icons';
 import { Separator } from '@tuturuuu/ui/separator';
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/toggles.tsx b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/toggles.tsx
deleted file mode 100644
index 64f1cdf6a7..0000000000
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/toggles.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-'use client';
-
-import { createClient } from '@tuturuuu/supabase/next/client';
-import { Checkbox } from '@tuturuuu/ui/checkbox';
-import { useTranslations } from 'next-intl';
-import { useState } from 'react';
-
-export default function ModuleToggles({
-  courseId,
-  moduleId,
-  //   isPublic: initialIsPublic,
-  isPublished: initialIsPublished,
-}: {
-  courseId: string;
-  moduleId: string;
-  isPublic: boolean;
-  isPublished: boolean;
-}) {
-  const t = useTranslations();
-  const supabase = createClient();
-
-  const [loading, setLoading] = useState(false);
-  //   const [isPublic, setIsPublic] = useState(initialIsPublic);
-  const [isPublished, setIsPublished] = useState(initialIsPublished);
-
-  //   const handlePublicChange = async (checked: boolean) => {
-  //     setLoading(true);
-
-  //     const { error } = await supabase
-  //       .from('workspace_course_modules')
-  //       .update({ is_public: checked })
-  //       .eq('course_id', courseId)
-  //       .eq('id', moduleId);
-
-  //     if (error) {
-  //       setLoading(false);
-  //       throw error;
-  //     }
-
-  //     setIsPublic(checked);
-  //     setLoading(false);
-  //   };
-
-  const handlePublishedChange = async (checked: boolean) => {
-    const { error } = await supabase
-      .from('workspace_course_modules')
-      .update({ is_published: checked })
-      .eq('course_id', courseId)
-      .eq('id', moduleId);
-
-    if (error) {
-      setLoading(false);
-      throw error;
-    }
-
-    setIsPublished(checked);
-    setLoading(false);
-  };
-
-  return (
-    <div className="flex flex-col space-y-4 pt-4 pb-2">
-      {/* <div className="flex items-center space-x-2">
-        <Checkbox
-          id="isPublic"
-          checked={isPublic}
-          onCheckedChange={handlePublicChange}
-          disabled={loading}
-        />
-        <label
-          htmlFor="isPublic"
-          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-        >
-          Public
-        </label>
-      </div> */}
-      <div className="flex items-center space-x-2">
-        <Checkbox
-          id="isPublished"
-          checked={isPublished}
-          onCheckedChange={handlePublishedChange}
-          disabled={loading}
-        />
-        <label
-          htmlFor="isPublished"
-          className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-        >
-          {t('common.published')}
-        </label>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/youtube-links/embed.tsx b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/youtube-links/embed.tsx
deleted file mode 100644
index ca40c2a106..0000000000
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/youtube-links/embed.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useTranslations } from 'next-intl';
-
-export const YoutubeEmbed = ({ embedId }: { embedId: string | undefined }) => {
-  const t = useTranslations();
-
-  return embedId ? (
-    <iframe
-      src={`https://www.youtube.com/embed/${embedId}`}
-      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-      allowFullScreen
-      title="Embedded youtube"
-      className="h-full w-full rounded-lg"
-    />
-  ) : (
-    <div>{t('ws-course-modules.invalid_youtube_link')}.</div>
-  );
-};
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/youtube-links/page.tsx b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/youtube-links/page.tsx
index a7e475b022..efd0d24f2c 100644
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/youtube-links/page.tsx
+++ b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/youtube-links/page.tsx
@@ -1,8 +1,8 @@
-import DeleteLinkButton from './delete-link';
-import { YoutubeEmbed } from './embed';
-import YouTubeLinkForm from './form';
 import { extractYoutubeId } from '@/utils/url-helper';
 import { createClient } from '@tuturuuu/supabase/next/server';
+import DeleteLinkButton from '@tuturuuu/ui/custom/education/modules/youtube/delete-link-button';
+import { YoutubeEmbed } from '@tuturuuu/ui/custom/education/modules/youtube/embed';
+import YouTubeLinkForm from '@tuturuuu/ui/custom/education/modules/youtube/form';
 import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
 import { Youtube } from '@tuturuuu/ui/icons';
 import { Separator } from '@tuturuuu/ui/separator';
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/page.tsx b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/page.tsx
index 3c5efc3c71..af4488057c 100644
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/page.tsx
+++ b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/page.tsx
@@ -1,10 +1,10 @@
 import { getWorkspaceCourseModuleColumns } from './columns';
-import CourseModuleForm from './form';
 import { CustomDataTable } from '@/components/custom-data-table';
 import { createClient } from '@tuturuuu/supabase/next/server';
 import { WorkspaceCourseModule } from '@tuturuuu/types/db';
 import { Database } from '@tuturuuu/types/supabase';
 import { Button } from '@tuturuuu/ui/button';
+import { CourseModuleForm } from '@tuturuuu/ui/custom/education/modules/course-module-form';
 import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
 import { Separator } from '@tuturuuu/ui/separator';
 import { getTranslations } from 'next-intl/server';
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/columns.tsx b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/columns.tsx
index 23a2c178b1..ae306dc57d 100644
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/columns.tsx
+++ b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/columns.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import { WorkspaceCourseRowActions } from './row-actions';
 import { ColumnDef } from '@tanstack/react-table';
 import { WorkspaceCourse } from '@tuturuuu/types/db';
+import { WorkspaceCourseRowActions } from '@tuturuuu/ui/custom/education/courses/course-row-actions';
 import { DataTableColumnHeader } from '@tuturuuu/ui/custom/tables/data-table-column-header';
 import moment from 'moment';
 import Link from 'next/link';
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/page.tsx b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/page.tsx
index e0bfec42d1..f88bb86a7f 100644
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/page.tsx
+++ b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/page.tsx
@@ -1,13 +1,13 @@
-import { CourseCardView } from './card-view';
 import { getWorkspaceCourseColumns } from './columns';
-import { CoursePagination } from './course-pagination';
-import CourseForm from './form';
-import { ViewToggle } from './view-toggle';
 //import { mockData } from './mock/mock-courses';
 import { CustomDataTable } from '@/components/custom-data-table';
 import { createClient } from '@tuturuuu/supabase/next/server';
 import { WorkspaceCourse } from '@tuturuuu/types/db';
+import { CourseCardView } from '@tuturuuu/ui/custom/education/courses/course-card-view';
+import { CourseForm } from '@tuturuuu/ui/custom/education/courses/course-form';
+import { CoursePagination } from '@tuturuuu/ui/custom/education/courses/course-pagination';
 import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
+import { ViewToggle } from '@tuturuuu/ui/custom/view-toggle';
 import { Separator } from '@tuturuuu/ui/separator';
 import { getTranslations } from 'next-intl/server';
 
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/drive/columns.tsx b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/drive/columns.tsx
deleted file mode 100644
index f510006b45..0000000000
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/drive/columns.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-'use client';
-
-import { StorageObjectRowActions } from './row-actions';
-import { formatBytes } from '@/utils/file-helper';
-import { joinPath, popPath } from '@/utils/path-helper';
-import { ColumnDef } from '@tanstack/react-table';
-import { StorageObject } from '@tuturuuu/types/primitives/StorageObject';
-import { DataTableColumnHeader } from '@tuturuuu/ui/custom/tables/data-table-column-header';
-import { ChevronLeft, FileText, Folder } from '@tuturuuu/ui/icons';
-import moment from 'moment';
-import Link from 'next/link';
-import { usePathname, useSearchParams } from 'next/navigation';
-import { Fragment } from 'react';
-
-export const storageObjectsColumns = (
-  t: any,
-  namespace: string | undefined,
-  // eslint-disable-next-line no-unused-vars
-  setStorageObject: (value: StorageObject | undefined) => void,
-  wsId: string,
-  path?: string
-): ColumnDef<StorageObject>[] => [
-  // {
-  //   id: 'select',
-  //   header: ({ table }) => (
-  //     <Checkbox
-  //       checked={table.getIsAllPageRowsSelected()}
-  //       onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-  //       aria-label="Select all"
-  //       className="translate-y-[2px]"
-  //     />
-  //   ),
-  //   cell: ({ row }) => (
-  //     <Checkbox
-  //       checked={row.getIsSelected()}
-  //       onCheckedChange={(value) => row.toggleSelected(!!value)}
-  //       aria-label="Select row"
-  //       className="translate-y-[2px]"
-  //     />
-  //   ),
-  //   enableSorting: false,
-  //   enableHiding: false,
-  // },
-  {
-    accessorKey: 'id',
-    header: ({ column }) => (
-      <DataTableColumnHeader
-        t={t}
-        column={column}
-        title={t(`${namespace}.id`)}
-      />
-    ),
-    cell: ({ row }) => (
-      <div className="line-clamp-1 min-w-32">{row.getValue('id')}</div>
-    ),
-  },
-  {
-    accessorKey: 'name',
-    header: ({ column }) => (
-      <DataTableColumnHeader
-        t={t}
-        column={column}
-        title={t(`${namespace}.name`)}
-      />
-    ),
-    cell: ({ row }) => {
-      if (row.getValue('id'))
-        return (
-          <div className="flex min-w-32 items-center gap-2 font-semibold">
-            <FileText className="h-4 w-4" />
-            {(row.getValue('name') as string | undefined)?.replace(
-              /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}_/i,
-              ''
-            )}
-          </div>
-        );
-
-      // if id is not given, row is references as a path (folder)
-      // therefore, generate path link as param
-      const pathname = usePathname();
-      const searchParams = useSearchParams();
-      const basePath = searchParams.get('path') ?? '';
-
-      return (
-        <div className="min-w-32 font-semibold">
-          <Link
-            href={{
-              pathname,
-              query: {
-                path:
-                  row.getValue('name') === '...'
-                    ? popPath(basePath)
-                    : joinPath(basePath, row.getValue('name')),
-              },
-            }}
-            className="flex items-center gap-2"
-          >
-            {row.getValue('name') === '...' ? (
-              <Fragment>
-                <ChevronLeft className="h-4 w-4" />
-                {t('common.back')}
-              </Fragment>
-            ) : (
-              <Fragment>
-                <Folder className="h-4 w-4" />
-                {row.getValue('name')}
-              </Fragment>
-            )}
-          </Link>
-        </div>
-      );
-    },
-  },
-  {
-    accessorKey: 'size',
-    header: ({ column }) => (
-      <DataTableColumnHeader
-        t={t}
-        column={column}
-        title={t(`${namespace}.size`)}
-      />
-    ),
-    cell: ({ row }) =>
-      row.getValue('name') === '...' ? null : (
-        <div className="min-w-32">
-          {row.original?.metadata?.size !== undefined
-            ? formatBytes(row.original.metadata.size)
-            : '-'}
-        </div>
-      ),
-  },
-  {
-    accessorKey: 'created_at',
-    header: ({ column }) => (
-      <DataTableColumnHeader
-        t={t}
-        column={column}
-        title={t(`${namespace}.created_at`)}
-      />
-    ),
-    cell: ({ row }) =>
-      row.getValue('name') === '...' ? null : (
-        <div className="min-w-32">
-          {row.getValue('created_at')
-            ? moment(row.getValue('created_at')).format('DD/MM/YYYY, HH:mm:ss')
-            : '-'}
-        </div>
-      ),
-  },
-  {
-    id: 'actions',
-    cell: ({ row }) =>
-      row.getValue('name') === '...' ? null : (
-        <StorageObjectRowActions
-          wsId={wsId}
-          row={row}
-          path={path}
-          setStorageObject={setStorageObject}
-        />
-      ),
-  },
-];
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/drive/new-actions.tsx b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/drive/new-actions.tsx
deleted file mode 100644
index e7c54d62e1..0000000000
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/drive/new-actions.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-'use client';
-
-import { StorageFolderForm, StorageObjectForm } from './form';
-import { Button } from '@tuturuuu/ui/button';
-import ModifiableDialogTrigger from '@tuturuuu/ui/custom/modifiable-dialog-trigger';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@tuturuuu/ui/dropdown-menu';
-import { FileText, Folder, Plus } from '@tuturuuu/ui/icons';
-import { useTranslations } from 'next-intl';
-import { useState } from 'react';
-
-interface Props {
-  wsId: string;
-  path?: string;
-}
-
-export default function NewActions({ wsId, path }: Props) {
-  const t = useTranslations();
-
-  const [showFileUploadDialog, setFileUploadDialog] = useState(false);
-  const [showFolderCreateDialog, setFolderCreateDialog] = useState(false);
-
-  return (
-    <>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button size="xs" className="cursor-pointer">
-            <Plus className="h-4 w-4" />
-            <span>{t('common.create_new')}</span>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
-          <DropdownMenuItem onSelect={() => setFolderCreateDialog(true)}>
-            <Folder className="mr-2 h-4 w-4" />
-            {t('ws-storage-objects.folder')}
-          </DropdownMenuItem>{' '}
-          <DropdownMenuItem onSelect={() => setFileUploadDialog(true)}>
-            <FileText className="mr-2 h-4 w-4" />
-            {t('ws-storage-objects.files')}
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      <ModifiableDialogTrigger
-        open={showFileUploadDialog}
-        setOpen={setFileUploadDialog}
-        title={t('ws-storage-objects.upload')}
-        form={
-          <StorageObjectForm
-            wsId={wsId}
-            uploadPath={path}
-            submitLabel={t('common.upload')}
-          />
-        }
-      />
-
-      <ModifiableDialogTrigger
-        open={showFolderCreateDialog}
-        title={t('ws-storage-objects.folder_create')}
-        setOpen={setFolderCreateDialog}
-        form={<StorageFolderForm wsId={wsId} uploadPath={path} />}
-      />
-    </>
-  );
-}
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/drive/page.tsx b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/drive/page.tsx
deleted file mode 100644
index 38da20f249..0000000000
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/drive/page.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import NewActions from './new-actions';
-import StorageObjectsTable from './table';
-import { getPermissions, verifyHasSecrets } from '@/lib/workspace-helper';
-import { formatBytes } from '@/utils/file-helper';
-import { joinPath } from '@/utils/path-helper';
-import {
-  createClient,
-  createDynamicClient,
-} from '@tuturuuu/supabase/next/server';
-import {
-  EMPTY_FOLDER_PLACEHOLDER_NAME,
-  StorageObject,
-} from '@tuturuuu/types/primitives/StorageObject';
-import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
-import { Separator } from '@tuturuuu/ui/separator';
-import { getTranslations } from 'next-intl/server';
-import { redirect } from 'next/navigation';
-
-interface Props {
-  params: Promise<{
-    wsId: string;
-  }>;
-  searchParams: Promise<{
-    q?: string;
-    page?: string;
-    pageSize?: string;
-    path?: string;
-  }>;
-}
-
-export default async function WorkspaceStorageObjectsPage({
-  params,
-  searchParams,
-}: Props) {
-  const { wsId } = await params;
-  const t = await getTranslations();
-
-  const { withoutPermission } = await getPermissions({
-    wsId,
-  });
-  const { path } = await searchParams;
-
-  if (withoutPermission('manage_drive')) redirect(`/${wsId}`);
-
-  await verifyHasSecrets(wsId, ['ENABLE_DRIVE'], `/${wsId}`);
-  const { data } = await getData(wsId, await searchParams);
-
-  const count = await getFileCount(wsId);
-  const totalSize = await getTotalSize(wsId);
-  const largestFile = await getLargestFile(wsId);
-  const smallestFile = await getSmallestFile(wsId);
-
-  return (
-    <>
-      <FeatureSummary
-        pluralTitle={t('ws-storage-objects.plural')}
-        singularTitle={t('ws-storage-objects.singular')}
-        description={t('ws-storage-objects.description')}
-        createTitle={t('ws-storage-objects.upload')}
-        createDescription={t('ws-storage-objects.upload_description')}
-        action={<NewActions wsId={wsId} path={path} />}
-      />
-      <Separator className="my-4" />
-
-      <div className="mb-4 grid gap-4 text-center md:grid-cols-2 xl:grid-cols-4">
-        <div className="rounded-lg border border-border bg-foreground/5 p-4">
-          <h2 className="text-lg font-semibold">
-            {t('ws-storage-objects.total_files')}
-          </h2>
-          <Separator className="my-2" />
-          <div className="text-3xl font-bold">{count}</div>
-        </div>
-
-        <div className="rounded-lg border border-border bg-foreground/5 p-4">
-          <h2 className="text-lg font-semibold">
-            {t('ws-storage-objects.total_size')}
-          </h2>
-          <Separator className="my-2" />
-          <div className="text-3xl font-bold">{formatBytes(totalSize)}</div>
-        </div>
-
-        <div className="rounded-lg border border-border bg-foreground/5 p-4">
-          <h2 className="text-lg font-semibold">
-            {t('ws-storage-objects.largest_file')}
-          </h2>
-          <Separator className="my-2" />
-          <div className="text-3xl font-bold">
-            {data.length > 0 ? formatBytes(largestFile?.size as number) : '-'}
-          </div>
-        </div>
-
-        <div className="rounded-lg border border-border bg-foreground/5 p-4">
-          <h2 className="text-lg font-semibold">
-            {t('ws-storage-objects.smallest_file')}
-          </h2>
-          <Separator className="my-2" />
-          <div className="text-3xl font-bold">
-            {data.length > 0 ? formatBytes(smallestFile?.size as number) : '-'}
-          </div>
-        </div>
-      </div>
-
-      <StorageObjectsTable
-        wsId={wsId}
-        data={data.map((t) => ({
-          ...t,
-          ws_id: wsId,
-        }))}
-        path={path}
-        count={count ?? 0}
-      />
-    </>
-  );
-}
-
-async function getData(
-  wsId: string,
-  { q, page = '1', pageSize = '10', path = '' }: Awaited<Props['searchParams']>
-) {
-  const supabase = await createDynamicClient();
-
-  const { data, error } = await supabase.storage
-    .from('workspaces')
-    .list(joinPath(wsId, path), {
-      limit: parseInt(pageSize),
-      offset: (parseInt(page) - 1) * parseInt(pageSize),
-      sortBy: { column: 'created_at', order: 'desc' },
-      search: `%${q ?? ''}%`,
-    });
-  if (error) throw error;
-
-  return {
-    data: data.filter(
-      (object) => !object.name.match(EMPTY_FOLDER_PLACEHOLDER_NAME)
-    ),
-  } as {
-    data: StorageObject[];
-  };
-}
-
-async function getTotalSize(wsId: string) {
-  const supabase = await createClient();
-
-  const { data, error } = await supabase.rpc('get_workspace_drive_size', {
-    ws_id: wsId,
-  });
-
-  if (error) throw error;
-  return data;
-}
-
-async function getFileCount(wsId: string) {
-  const supabase = await createDynamicClient();
-
-  const { count, error } = await supabase
-    .schema('storage')
-    .from('objects')
-    .select('*', { count: 'exact', head: true })
-    .eq('bucket_id', 'workspaces')
-    .not('owner', 'is', null)
-    .ilike('name', `${wsId}/%`)
-    .not('name', 'ilike', `%${EMPTY_FOLDER_PLACEHOLDER_NAME}`);
-
-  if (error) throw error;
-  return count;
-}
-
-async function getLargestFile(wsId: string) {
-  const supabase = await createDynamicClient();
-
-  const { data, error } = await supabase
-    .schema('storage')
-    .from('objects')
-    .select('metadata->size')
-    .eq('bucket_id', 'workspaces')
-    .not('owner', 'is', null)
-    .ilike('name', `${wsId}/%`)
-    .order('metadata->size', { ascending: false })
-    .limit(1)
-    .maybeSingle();
-
-  if (error) throw error;
-  return data;
-}
-
-async function getSmallestFile(wsId: string) {
-  const supabase = await createDynamicClient();
-
-  const { data, error } = await supabase
-    .schema('storage')
-    .from('objects')
-    .select('metadata->size')
-    .eq('bucket_id', 'workspaces')
-    .not('owner', 'is', null)
-    .ilike('name', `${wsId}/%`)
-    .order('metadata->size', { ascending: true })
-    .limit(1)
-    .maybeSingle();
-
-  if (error) throw error;
-  return data;
-}
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/drive/row-actions.tsx b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/drive/row-actions.tsx
deleted file mode 100644
index 3234ce7958..0000000000
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/drive/row-actions.tsx
+++ /dev/null
@@ -1,230 +0,0 @@
-'use client';
-
-import { joinPath } from '@/utils/path-helper';
-import { Row } from '@tanstack/react-table';
-import { createDynamicClient } from '@tuturuuu/supabase/next/client';
-import { StorageObject } from '@tuturuuu/types/primitives/StorageObject';
-import { Button } from '@tuturuuu/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@tuturuuu/ui/dropdown-menu';
-import { toast } from '@tuturuuu/ui/hooks/use-toast';
-import { Ellipsis } from '@tuturuuu/ui/icons';
-import { useTranslations } from 'next-intl';
-import { useRouter } from 'next/navigation';
-
-interface Props {
-  wsId: string;
-  row: Row<StorageObject>;
-  path?: string;
-  // eslint-disable-next-line no-unused-vars
-  setStorageObject: (value: StorageObject | undefined) => void;
-}
-
-export function StorageObjectRowActions({ wsId, row, path = '' }: Props) {
-  const supabase = createDynamicClient();
-  const t = useTranslations();
-
-  const router = useRouter();
-  const storageObj = row.original;
-
-  const deleteStorageObject = async () => {
-    if (!storageObj.name) return;
-
-    const { error } = await supabase.storage
-      .from('workspaces')
-      .remove([joinPath(wsId, path, storageObj.name)]);
-
-    if (!error) {
-      router.refresh();
-    } else {
-      toast({
-        title: 'Failed to delete file',
-        description: error.message,
-      });
-    }
-  };
-
-  const deleteStorageFolder = async () => {
-    if (!storageObj.name) return;
-
-    // get all inside contents using query
-    const objects = await supabase
-      .schema('storage')
-      .from('objects')
-      .select()
-      .ilike('name', joinPath(wsId, path, storageObj.name, '%'));
-
-    if (objects.error) {
-      toast({
-        title: 'Failed to get folder files',
-        description: objects.error.message,
-      });
-      return;
-    }
-
-    const { error } = await supabase.storage
-      .from('workspaces')
-      .remove(objects.data.map((object) => object.name));
-
-    if (!error) {
-      router.refresh();
-    } else {
-      toast({
-        title: 'Failed to delete files from folder',
-        description: error.message,
-      });
-    }
-  };
-
-  const renameStorageObject = async () => {
-    if (!storageObj.name) return;
-
-    const newName = prompt(
-      'Enter new name',
-      storageObj.name.split(`${wsId}/`)[1]
-    );
-
-    if (!newName) return;
-
-    // re-add extension if it was removed
-    const safeNewName = storageObj.name.includes('.')
-      ? newName.includes('.')
-        ? newName
-        : `${newName}.${storageObj.name.split('.').pop()}`
-      : newName;
-
-    const { error } = await supabase.storage
-      .from('workspaces')
-      .move(
-        joinPath(wsId, path, storageObj.name),
-        joinPath(wsId, path, safeNewName)
-      );
-
-    if (!error) {
-      router.refresh();
-    } else {
-      toast({
-        title: 'Failed to rename file',
-        description: error.message,
-      });
-    }
-  };
-
-  const renameStorageFolder = async () => {
-    if (!storageObj.name) return;
-
-    const newName = prompt(
-      'Enter new name',
-      storageObj.name.split(`${wsId}/`)[1]
-    );
-
-    if (!newName) return;
-
-    // get all inside contents using query
-    const { data, error } = await supabase
-      .schema('storage')
-      .from('objects')
-      .select()
-      .ilike('name', joinPath(wsId, path, storageObj.name, '%'));
-
-    if (error) {
-      toast({
-        title: 'Failed to get folder files',
-        description: error.message,
-      });
-      return;
-    }
-
-    for (const object of data) {
-      const source = object.name;
-      const destination = source.replace(
-        joinPath(wsId, path, storageObj.name),
-        joinPath(wsId, path, newName)
-      );
-
-      // try to move everything from old folder to new folder
-      const { error } = await supabase.storage
-        .from('workspaces')
-        .move(source, destination);
-
-      // prompt in case of error, continue otherwise
-      if (error) {
-        toast({
-          title: `Failed to move ${source} to ${destination}`,
-          description: error.message,
-        });
-      }
-    }
-
-    // refresh on complete
-    router.refresh();
-  };
-
-  const downloadStorageObject = async () => {
-    if (!storageObj.name) return;
-
-    const { data, error } = await supabase.storage
-      .from('workspaces')
-      .download(joinPath(wsId, path, storageObj.name));
-
-    if (error) {
-      toast({
-        title: 'Failed to download file',
-        description: error.message,
-      });
-      return;
-    }
-
-    const url = URL.createObjectURL(data);
-
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = storageObj.name.split(`${wsId}/`).pop() || '';
-    a.click();
-
-    URL.revokeObjectURL(url);
-  };
-
-  return (
-    <>
-      <DropdownMenu modal={false}>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
-          >
-            <Ellipsis className="h-4 w-4" />
-            <span className="sr-only">Open menu</span>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-[160px]">
-          <DropdownMenuItem
-            onClick={storageObj.id ? renameStorageObject : renameStorageFolder}
-          >
-            {t('common.rename')}
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          {storageObj.id && (
-            // only allows rename & download on onject
-            <>
-              <DropdownMenuItem onClick={downloadStorageObject}>
-                {t('common.download')}
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-            </>
-          )}
-          <DropdownMenuItem
-            onClick={storageObj.id ? deleteStorageObject : deleteStorageFolder}
-          >
-            {t('common.delete')}
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </>
-  );
-}
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/drive/table.tsx b/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/drive/table.tsx
deleted file mode 100644
index 50ad6ff80a..0000000000
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/drive/table.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-'use client';
-
-import { storageObjectsColumns } from './columns';
-import { CustomDataTable } from '@/components/custom-data-table';
-import { StorageObject } from '@tuturuuu/types/primitives/StorageObject';
-import { Dialog } from '@tuturuuu/ui/dialog';
-import { useState } from 'react';
-
-interface Props {
-  wsId: string;
-  data: StorageObject[];
-  path?: string;
-  count: number;
-}
-
-export default function StorageObjectsTable({
-  wsId,
-  data,
-  path,
-  count,
-}: Props) {
-  // const t = useTranslations('common');
-
-  const [storageObj, setStorageObject] = useState<StorageObject>();
-
-  // const onComplete = () => {
-  //   setStorageObject(undefined);
-  // };
-
-  return (
-    <Dialog
-      open={!!storageObj}
-      onOpenChange={(open) =>
-        setStorageObject(open ? storageObj || {} : undefined)
-      }
-    >
-      <CustomDataTable
-        data={!path || path === '/' ? data : [{ name: '...' }, ...data]}
-        columnGenerator={(t: any, namespace: string | undefined) =>
-          storageObjectsColumns(t, namespace, setStorageObject, wsId, path)
-        }
-        namespace="storage-object-data-table"
-        count={count}
-        defaultVisibility={{
-          id: false,
-        }}
-        // newObjectTitle={t('upload')}
-        // editContent={
-        //   <>
-        //     <DialogTitle hidden />
-        //     <StorageObjectForm
-        //       wsId={wsId}
-        //       onComplete={onComplete}
-        //       uploadPath={path}
-        //       submitLabel={storageObj?.id ? t('edit') : t('upload')}
-        //     />
-        //   </>
-        // }
-      />
-    </Dialog>
-  );
-}
diff --git a/apps/upskii/src/components/custom-data-table.tsx b/apps/upskii/src/components/custom-data-table.tsx
index 622ef00843..d3236d376f 100644
--- a/apps/upskii/src/components/custom-data-table.tsx
+++ b/apps/upskii/src/components/custom-data-table.tsx
@@ -1,52 +1,3 @@
 'use client';
 
-import useSearchParams from '@/hooks/useSearchParams';
-import {
-  DataTable,
-  DataTableProps,
-} from '@tuturuuu/ui/custom/tables/data-table';
-import { useTranslations } from 'next-intl';
-import { useRouter } from 'next/navigation';
-import { Suspense } from 'react';
-
-export function CustomDataTable<TData, TValue>({
-  namespace,
-  hideToolbar,
-  hidePagination,
-  className,
-  ...props
-}: DataTableProps<TData, TValue>) {
-  const t = useTranslations();
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const pageSize = Number(searchParams.get('pageSize') || 10);
-  const page = Number(searchParams.get('page') || 0);
-  const pageIndex = page > 0 ? page - 1 : 0;
-
-  return (
-    <Suspense fallback={null}>
-      <DataTable
-        t={t}
-        hideToolbar={hideToolbar}
-        hidePagination={hidePagination}
-        namespace={namespace}
-        pageIndex={pageIndex || 0}
-        pageSize={pageSize || 10}
-        onRefresh={() => router.refresh()}
-        defaultQuery={searchParams.getSingle('q', '')}
-        onSearch={(query: string) =>
-          query
-            ? searchParams.set({ q: query, page: '1' })
-            : searchParams.reset()
-        }
-        setParams={(params) => searchParams.set(params)}
-        resetParams={() => searchParams.reset()}
-        isEmpty={searchParams.isEmpty}
-        newObjectTitle={t('common.create')}
-        className={className}
-        {...props}
-      />
-    </Suspense>
-  );
-}
+export { CustomDataTable } from '@tuturuuu/ui/custom/tables/custom-data-table';
diff --git a/apps/upskii/src/utils/path-helper.ts b/apps/upskii/src/utils/path-helper.ts
deleted file mode 100644
index 5c8ce3e6f8..0000000000
--- a/apps/upskii/src/utils/path-helper.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export function joinPath(...paths: string[]) {
-  // join paths with "/" and removes duplicate "/"
-  // e.g. ["base", "params"] => "base/params"
-  return paths.join('/').replace(/\/{1,}/g, '/');
-}
-
-export function popPath(path: string) {
-  // parse badly formatted path
-  const parsedPath = joinPath(path).trim();
-
-  const indexOfLast = parsedPath.lastIndexOf('/');
-
-  // guard: empty path or empty string or top-level path (index = 0)
-  if (parsedPath === '/' || parsedPath === '' || indexOfLast === 0) return '/';
-
-  if (indexOfLast === parsedPath.length - 1) {
-    // trailing slash, therefore remove trailing slash and continue pop
-    return popPath(parsedPath.slice(0, indexOfLast));
-  }
-
-  return parsedPath.slice(0, indexOfLast);
-}
diff --git a/apps/web/messages/en.json b/apps/web/messages/en.json
index c5285416ae..4362072a74 100644
--- a/apps/web/messages/en.json
+++ b/apps/web/messages/en.json
@@ -284,7 +284,11 @@
     "waitlist": "Waitlist",
     "sign_in_with_google": "Sign in with Google",
     "sign_in_with_microsoft": "Sign in with Microsoft",
-    "sign_in_with_github": "Sign in with Github"
+    "sign_in_with_github": "Sign in with Github",
+    "whats_the_title": "What's the title?",
+    "write_something": "Write something",
+    "error_saving_content": "There was an error saving your content",
+    "not_completed": "Not completed"
   },
   "date_helper": {
     "time-unit": "Time unit",
@@ -1973,7 +1977,14 @@
     "description": "Manage courses in your workspace that include markdown content, slides, quizzes, and flashcards.",
     "edit": "Edit course",
     "name": "Course name",
-    "edit_description": "Edit an existing course"
+    "edit_description": "Edit an existing course",
+    "course_description": "Course description",
+    "card_view": "Card view",
+    "table_view": "Table view",
+    "no_courses_found": "No courses found",
+    "no_courses_found_description": "No courses found in your workspace. Create a new course to get started.",
+    "no_description_provided": "No description provided",
+    "delete_confirm_title": "Deleting \"{name}\""
   },
   "ws-course-modules": {
     "plural": "Course Modules",
diff --git a/apps/web/messages/vi.json b/apps/web/messages/vi.json
index 556373e021..f8126e4b22 100644
--- a/apps/web/messages/vi.json
+++ b/apps/web/messages/vi.json
@@ -282,7 +282,11 @@
     "expand_on_hover": "Mở rộng khi di chuột",
     "collapsed": "Thu nhỏ",
     "expanded": "Mở rộng",
-    "sidebar": "Thanh bên"
+    "sidebar": "Thanh bên",
+    "whats_the_title": "Tiêu đề là gì?",
+    "write_something": "Hãy viết gì đó...",
+    "error_saving_content": "Lỗi khi lưu nội dung của bạn",
+    "not_completed": "Chưa hoàn thành"
   },
   "date_helper": {
     "time-unit": "Đơn vị thời gian",
@@ -1985,7 +1989,13 @@
     "create_description": "Tạo một khóa học mới",
     "edit": "Chỉnh sửa khóa học",
     "name": "Tên khóa học",
-    "edit_description": "Chỉnh sửa khóa học hiện có"
+    "edit_description": "Chỉnh sửa khóa học hiện có",
+    "course_description": "Mô tả khóa học",
+    "card_view": "Dạng thẻ",
+    "table_view": "Dạng bảng",
+    "no_courses_found": "Chưa có khóa học nào",
+    "no_description_provided": "Không có mô tả",
+    "delete_confirm_title": "Xác nhận xoá \"{name}\""
   },
   "ws-course-modules": {
     "plural": "Mô-đun khóa học",
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/drive/form.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/drive/form.tsx
deleted file mode 100644
index aa99197d3a..0000000000
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/drive/form.tsx
+++ /dev/null
@@ -1,401 +0,0 @@
-'use client';
-
-import { joinPath } from '@/utils/path-helper';
-import { createClient } from '@tuturuuu/supabase/next/client';
-import { EMPTY_FOLDER_PLACEHOLDER_NAME } from '@tuturuuu/types/primitives/StorageObject';
-import { Button } from '@tuturuuu/ui/button';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@tuturuuu/ui/form';
-import { useForm } from '@tuturuuu/ui/hooks/use-form';
-import { toast } from '@tuturuuu/ui/hooks/use-toast';
-import { Check, Trash } from '@tuturuuu/ui/icons';
-import { Input } from '@tuturuuu/ui/input';
-import { zodResolver } from '@tuturuuu/ui/resolvers';
-import { ScrollArea } from '@tuturuuu/ui/scroll-area';
-import { generateRandomUUID } from '@tuturuuu/utils/uuid-helper';
-import { useTranslations } from 'next-intl';
-import { useRouter } from 'next/navigation';
-import { Fragment, useState } from 'react';
-import * as z from 'zod';
-
-interface FolderProps {
-  wsId: string;
-  uploadPath?: string;
-  data?: {
-    name: string;
-  };
-  onComplete?: () => unknown;
-}
-
-interface Props {
-  wsId: string;
-  path?: string;
-  uploadPath?: string;
-  accept?: string;
-  onComplete?: () => void;
-  submitLabel?: string;
-}
-
-const FolderFormSchema = z.object({
-  name: z.string().min(1).max(255),
-});
-
-const ObjectFormSchema = z.object({
-  files: z.custom<File[]>((value) => {
-    if (value.length === 0) {
-      throw new Error('At least one file is required');
-    }
-
-    return value;
-  }),
-});
-
-export function StorageFolderForm({
-  wsId,
-  uploadPath = '',
-  data,
-  onComplete,
-}: FolderProps) {
-  const t = useTranslations();
-
-  const router = useRouter();
-  const supabase = createClient();
-
-  const [loading, setLoading] = useState(false);
-
-  const form = useForm({
-    resolver: zodResolver(FolderFormSchema),
-    defaultValues: {
-      name: '',
-    },
-  });
-
-  async function onSubmit(data: z.infer<typeof FolderFormSchema>) {
-    setLoading(true);
-
-    const placeholderFile = new File([''], EMPTY_FOLDER_PLACEHOLDER_NAME);
-
-    const { error } = await supabase.storage
-      .from('workspaces')
-      .upload(
-        joinPath(wsId, uploadPath, data.name, placeholderFile.name),
-        placeholderFile
-      );
-
-    if (!error) {
-      onComplete?.();
-      setLoading(false);
-      router.refresh();
-    } else {
-      setLoading(false);
-      toast({
-        title: 'Error creating folder',
-        description: 'An error occurred while creating the folder',
-      });
-    }
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-6">
-        <FormField
-          control={form.control}
-          name="name"
-          disabled={loading}
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>
-                {t('storage-object-data-table.folder.name')}
-              </FormLabel>
-              <FormControl>
-                <Input
-                  {...field}
-                  placeholder={t('storage-object-data-table.folder.name')}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <Button type="submit" className="w-full" disabled={loading}>
-          {loading
-            ? t('common.processing')
-            : data?.name
-              ? t('common.edit')
-              : t('common.create')}
-        </Button>
-      </form>
-    </Form>
-  );
-}
-
-export function StorageObjectForm({
-  wsId,
-  path,
-  uploadPath = '',
-  accept = 'image/*',
-  onComplete,
-  submitLabel,
-}: Props) {
-  const t = useTranslations();
-
-  const router = useRouter();
-  const supabase = createClient();
-
-  const [loading, setLoading] = useState(false);
-
-  const form = useForm({
-    resolver: zodResolver(ObjectFormSchema),
-    defaultValues: {
-      files: [],
-    },
-  });
-
-  const [fileStatuses, setFileStatuses] = useState<Record<string, string>>({});
-
-  const [editingFile, setEditingFile] = useState<File | null>(null);
-  const [newFileName, setNewFileName] = useState<string>('');
-
-  async function onSubmit(formData: z.infer<typeof ObjectFormSchema>) {
-    if (loading || editingFile) return;
-
-    setLoading(true);
-
-    formData.files.forEach(async (file) => {
-      // if the file is already uploaded, skip it
-      if (fileStatuses[file.name] === 'uploaded') return;
-
-      // Set the status of the file to uploading
-      setFileStatuses((prev) => ({
-        ...prev,
-        [file.name]: 'uploading',
-      }));
-
-      const { error } = await supabase.storage
-        .from('workspaces')
-        .upload(
-          path ||
-            joinPath(wsId, uploadPath, `${generateRandomUUID()}_${file.name}`),
-          file
-        );
-
-      if (error) {
-        setFileStatuses((prev) => ({
-          ...prev,
-          [file.name]: 'error',
-        }));
-        return;
-      }
-
-      // Set the status of the file to uploaded
-      setFileStatuses((prev) => ({
-        ...prev,
-        [file.name]: 'uploaded',
-      }));
-    });
-
-    // if all files are uploaded, call onComplete
-    if (
-      formData.files.every((file) => fileStatuses[file.name] === 'uploaded')
-    ) {
-      onComplete?.();
-    }
-
-    router.refresh();
-    setLoading(false);
-  }
-
-  const files = form.watch('files');
-
-  const uploadedAllFiles =
-    // at least one file is uploaded
-    form.watch('files').length > 0 &&
-    // all files match the uploaded status
-    files.every((file) => fileStatuses[file.name] === 'uploaded') &&
-    // all file statuses are uploaded
-    Object.values(fileStatuses).every((status) => status === 'uploaded');
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <FormField
-          control={form.control}
-          name="files"
-          disabled={loading}
-          render={({ field: { onChange, ...fieldProps } }) => (
-            <FormItem>
-              <FormLabel>
-                {t('storage-object-data-table.files')}
-                {files.length > 0 ? ` (${files.length})` : ''}
-              </FormLabel>
-              {files.length === 0 ? (
-                <FormControl>
-                  <Input
-                    {...fieldProps}
-                    value={undefined}
-                    type="file"
-                    placeholder="Files"
-                    accept={accept}
-                    onChange={(e) => {
-                      onChange(e.target.files && Array.from(e.target.files));
-                    }}
-                    multiple
-                  />
-                </FormControl>
-              ) : (
-                <ScrollArea
-                  className={`${
-                    files.length > 3 ? 'h-48' : 'h-auto'
-                  } rounded-md border`}
-                >
-                  {files
-                    // sort "uploaded" files first, then sort by name
-                    .sort((a, b) => {
-                      if (fileStatuses[a.name] === 'uploaded') return -1;
-                      if (fileStatuses[b.name] === 'uploaded') return 1;
-                      return a.name.localeCompare(b.name);
-                    })
-                    .map((file, i) => (
-                      <Fragment key={file.name}>
-                        <div className="flex items-center justify-between gap-2 p-2">
-                          <div>
-                            {editingFile?.name === file.name ? (
-                              <input
-                                type="text"
-                                value={newFileName}
-                                className="w-full bg-transparent text-sm outline-0"
-                                onChange={(e) => {
-                                  setNewFileName(e.target.value);
-                                }}
-                                onFocus={(e) => {
-                                  const value = e.target.value;
-                                  const lastIndex = value.lastIndexOf('.');
-                                  // Select the part of the text that excludes the file extension
-                                  e.target.setSelectionRange(
-                                    0,
-                                    lastIndex > 0 ? lastIndex : value.length
-                                  );
-                                }}
-                                onBlur={() => {
-                                  if (newFileName.trim() === '') {
-                                    setNewFileName(file.name);
-                                    return;
-                                  }
-
-                                  setEditingFile(null);
-                                  onChange(
-                                    files.map((f) =>
-                                      f.name === file.name
-                                        ? new File([file], newFileName)
-                                        : f
-                                    )
-                                  );
-
-                                  setNewFileName('');
-                                }}
-                                onKeyPress={(e) => {
-                                  if (e.key === 'Enter') {
-                                    e.currentTarget.blur();
-                                  }
-                                }}
-                                autoFocus
-                              />
-                            ) : (
-                              <div
-                                className="line-clamp-1 text-sm opacity-70"
-                                onClick={() => {
-                                  setNewFileName(file.name);
-                                  setEditingFile(file);
-                                }}
-                              >
-                                {file.name}
-                              </div>
-                            )}
-
-                            <div className="text-xs font-semibold">
-                              {fileStatuses[file.name] === 'uploading' ? (
-                                <span className="opacity-70">
-                                  {t('common.uploading')}...
-                                </span>
-                              ) : fileStatuses[file.name] === 'uploaded' ? (
-                                <span>{t('common.uploaded')}</span>
-                              ) : fileStatuses[file.name] === 'error' ? (
-                                <span className="text-destructive">
-                                  {t('common.error')}
-                                </span>
-                              ) : (
-                                <span>{Math.round(file.size / 1024)} KB</span>
-                              )}
-                            </div>
-                          </div>
-                          {uploadedAllFiles ||
-                          fileStatuses[file.name] === 'uploaded' ? (
-                            <Check className="h-5 w-5" />
-                          ) : (
-                            <Button
-                              size="icon"
-                              type="button"
-                              variant="ghost"
-                              className="flex h-7 w-7 shrink-0 items-center justify-center"
-                              onClick={() => {
-                                setFileStatuses((prev) => {
-                                  const next = { ...prev };
-                                  delete next[file.name];
-                                  return next;
-                                });
-
-                                form.setValue(
-                                  'files',
-                                  files.filter((_, index) => index !== i)
-                                );
-                              }}
-                              disabled={loading}
-                            >
-                              <Trash className="h-4 w-4" />
-                            </Button>
-                          )}
-                        </div>
-                        {i !== files.length - 1 && <div className="border-b" />}
-                      </Fragment>
-                    ))}
-                </ScrollArea>
-              )}
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        {uploadedAllFiles || (
-          <div className="mt-2 flex gap-2">
-            <Button
-              type="button"
-              className="w-fit"
-              onClick={() => {
-                setFileStatuses({});
-                form.setValue('files', []);
-              }}
-              variant="ghost"
-              disabled={loading || files.length === 0 || uploadedAllFiles}
-            >
-              {t('storage-object-data-table.clear_files')}
-            </Button>
-            <Button
-              type="submit"
-              className="w-full"
-              disabled={loading || files.length === 0 || uploadedAllFiles}
-            >
-              {loading ? t('common.processing') : submitLabel}
-            </Button>
-          </div>
-        )}
-      </form>
-    </Form>
-  );
-}
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/drive/new-actions.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/drive/new-actions.tsx
index e7c54d62e1..99fe16b038 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/drive/new-actions.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/drive/new-actions.tsx
@@ -1,7 +1,10 @@
 'use client';
 
-import { StorageFolderForm, StorageObjectForm } from './form';
 import { Button } from '@tuturuuu/ui/button';
+import {
+  StorageFolderForm,
+  StorageObjectForm,
+} from '@tuturuuu/ui/custom/education/modules/resources/file-upload-form';
 import ModifiableDialogTrigger from '@tuturuuu/ui/custom/modifiable-dialog-trigger';
 import {
   DropdownMenu,
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/columns.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/columns.tsx
index 7e28c27a04..b6a758fd98 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/columns.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/columns.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import { WorkspaceCourseModuleRowActions } from './row-actions';
 import { ColumnDef } from '@tanstack/react-table';
 import { WorkspaceCourseModule } from '@tuturuuu/types/db';
+import { WorkspaceCourseModuleRowActions } from '@tuturuuu/ui/custom/education/modules/course-module-row-actions';
 import { DataTableColumnHeader } from '@tuturuuu/ui/custom/tables/data-table-column-header';
 import { Check, X } from '@tuturuuu/ui/icons';
 import moment from 'moment';
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/form.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/form.tsx
deleted file mode 100644
index 4973b7ad09..0000000000
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/form.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-'use client';
-
-import { WorkspaceCourseModule } from '@tuturuuu/types/db';
-import { Button } from '@tuturuuu/ui/button';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@tuturuuu/ui/form';
-import { useForm } from '@tuturuuu/ui/hooks/use-form';
-import { toast } from '@tuturuuu/ui/hooks/use-toast';
-import { Input } from '@tuturuuu/ui/input';
-import { zodResolver } from '@tuturuuu/ui/resolvers';
-import { useTranslations } from 'next-intl';
-import { useRouter } from 'next/navigation';
-import * as z from 'zod';
-
-interface Props {
-  wsId: string;
-  courseId: string;
-  data?: WorkspaceCourseModule;
-  // eslint-disable-next-line no-unused-vars
-  onFinish?: (data: z.infer<typeof FormSchema>) => void;
-}
-
-const FormSchema = z.object({
-  id: z.string().optional(),
-  name: z.string().min(1),
-});
-
-export default function CourseModuleForm({
-  wsId,
-  courseId,
-  data,
-  onFinish,
-}: Props) {
-  const t = useTranslations('ws-course-modules');
-  const router = useRouter();
-
-  const form = useForm({
-    resolver: zodResolver(FormSchema),
-    values: {
-      id: data?.id,
-      name: data?.name || '',
-    },
-  });
-
-  const isDirty = form.formState.isDirty;
-  const isValid = form.formState.isValid;
-  const isSubmitting = form.formState.isSubmitting;
-
-  const disabled = !isDirty || !isValid || isSubmitting;
-
-  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
-    try {
-      const res = await fetch(
-        data.id
-          ? `/api/v1/workspaces/${wsId}/course-modules/${data.id}`
-          : `/api/v1/workspaces/${wsId}/courses/${courseId}/modules`,
-        {
-          method: data.id ? 'PUT' : 'POST',
-          body: JSON.stringify(data),
-        }
-      );
-
-      if (res.ok) {
-        onFinish?.(data);
-        router.refresh();
-      } else {
-        const data = await res.json();
-        toast({
-          title: `Failed to ${data.id ? 'edit' : 'create'} course module`,
-          description: data.message,
-        });
-      }
-    } catch (error) {
-      toast({
-        title: `Failed to ${data.id ? 'edit' : 'create'} course module`,
-        description: error instanceof Error ? error.message : String(error),
-      });
-    }
-  };
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-3">
-        <FormField
-          control={form.control}
-          name="name"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('name')}</FormLabel>
-              <FormControl>
-                <Input placeholder={t('name')} autoComplete="off" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <Button type="submit" className="w-full" disabled={disabled}>
-          {data?.id ? t('edit') : t('create')}
-        </Button>
-      </form>
-    </Form>
-  );
-}
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/layout.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/layout.tsx
index e88136f5fc..293970eb61 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/layout.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/layout.tsx
@@ -1,10 +1,7 @@
 import { createClient } from '@tuturuuu/supabase/next/server';
 import { UserGroup } from '@tuturuuu/types/primitives/UserGroup';
-import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
-import { GraduationCap } from '@tuturuuu/ui/icons';
+import { CourseHeader } from '@tuturuuu/ui/custom/education/courses/course-header';
 import { Separator } from '@tuturuuu/ui/separator';
-import { getTranslations } from 'next-intl/server';
-import Link from 'next/link';
 import { notFound } from 'next/navigation';
 import { ReactNode } from 'react';
 
@@ -18,27 +15,14 @@ interface Props {
 }
 
 export default async function CourseDetailsLayout({ children, params }: Props) {
-  const t = await getTranslations();
   const { wsId, courseId } = await params;
   const data = await getData(wsId, courseId);
 
   return (
     <>
-      <FeatureSummary
-        title={
-          <h1 className="flex w-full items-center gap-2 text-2xl font-bold">
-            <div className="flex items-center gap-2 rounded-lg border border-dynamic-blue/20 bg-dynamic-blue/10 px-2 text-lg text-dynamic-blue max-md:hidden">
-              <GraduationCap className="h-6 w-6" />
-              {t('ws-courses.singular')}
-            </div>
-            <Link
-              href={`/${wsId}/courses/${courseId}`}
-              className="line-clamp-1 text-lg font-bold hover:underline md:text-2xl"
-            >
-              {data.name || t('common.unknown')}
-            </Link>
-          </h1>
-        }
+      <CourseHeader
+        data={data}
+        href={`/${wsId}/education/courses/${courseId}`}
       />
       <Separator className="my-4" />
       {children}
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/link-button.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/link-button.tsx
deleted file mode 100644
index 7066396a17..0000000000
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/link-button.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client';
-
-import { Button } from '@tuturuuu/ui/button';
-import { cn } from '@tuturuuu/utils/format';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { ReactNode } from 'react';
-
-export default function LinkButton({
-  href,
-  title,
-  icon,
-  className,
-  disabled,
-}: {
-  href: string;
-  title: ReactNode;
-  icon: ReactNode;
-  className?: string;
-  disabled?: boolean;
-}) {
-  const pathname = usePathname();
-
-  if (href === pathname || disabled)
-    return (
-      <Button
-        type="button"
-        variant="secondary"
-        className={cn('border font-semibold max-md:w-full', className)}
-        disabled
-      >
-        {icon}
-        {title}
-      </Button>
-    );
-
-  return (
-    <Link href={href}>
-      <Button
-        type="button"
-        variant="secondary"
-        className={cn('border font-semibold max-md:w-full', className)}
-        disabled={disabled}
-      >
-        {icon}
-        {title}
-      </Button>
-    </Link>
-  );
-}
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/content/page.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/content/page.tsx
index b6e20ed372..84b1e4b735 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/content/page.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/content/page.tsx
@@ -1,19 +1,39 @@
+import { createClient } from '@tuturuuu/supabase/next/server';
 import { Button } from '@tuturuuu/ui/button';
 import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
 import { Goal, Sparkles } from '@tuturuuu/ui/icons';
+import { ModuleContentEditor } from '@tuturuuu/ui/text-editor/content-editor';
+import { JSONContent } from '@tuturuuu/ui/tiptap';
 import { getTranslations } from 'next-intl/server';
 
-// interface Props {
-//   params: Promise<{
-//     wsId: string;
-//     courseId: string;
-//     moduleId: string;
-//   }>;
-// }
+interface Props {
+  params: Promise<{
+    courseId: string;
+    moduleId: string;
+  }>;
+}
 
-export default async function ModuleContentPage() {
+export default async function ModuleContentPage({ params }: Props) {
+  const { courseId, moduleId } = await params;
   const t = await getTranslations();
 
+  const getContent = async (courseId: string, moduleId: string) => {
+    const supabase = await createClient();
+    const { data, error } = await supabase
+      .from('workspace_course_modules')
+      .select('content')
+      .eq('id', moduleId)
+      .eq('course_id', courseId);
+
+    if (error) {
+      console.error(error);
+    }
+
+    return data?.[0]?.content as JSONContent;
+  };
+
+  const content = await getContent(courseId, moduleId);
+
   return (
     <div className="grid gap-4">
       <FeatureSummary
@@ -33,7 +53,11 @@ export default async function ModuleContentPage() {
         }
         showSecondaryTrigger
       />
-      {/* <ModuleContentEditor courseId={courseId} moduleId={moduleId} /> */}
+      <ModuleContentEditor
+        courseId={courseId}
+        moduleId={moduleId}
+        content={content}
+      />
     </div>
   );
 }
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/layout.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/layout.tsx
index 3b39f15114..136ea27a02 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/layout.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/layout.tsx
@@ -1,10 +1,10 @@
-import LinkButton from '../../link-button';
-import ModuleToggles from './toggles';
 import {
   createClient,
   createDynamicClient,
 } from '@tuturuuu/supabase/next/server';
 import { WorkspaceCourseModule } from '@tuturuuu/types/db';
+import LinkButton from '@tuturuuu/ui/custom/education/modules/link-button';
+import { ModuleToggles } from '@tuturuuu/ui/custom/education/modules/module-toggle';
 import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
 import {
   BookText,
@@ -39,7 +39,7 @@ export default async function CourseDetailsLayout({ children, params }: Props) {
 
   const data = await getData(courseId, moduleId);
   const resources = await getResources({
-    path: `${wsId}/courses/${courseId}/modules/${moduleId}/resources/`,
+    path: `${commonHref}/resources/`,
   });
 
   const flashcards = await getFlashcards(moduleId);
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/page.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/page.tsx
index e52fe125fa..697282b131 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/page.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/page.tsx
@@ -1,14 +1,15 @@
-import { CourseSection } from '../../section';
 import ClientFlashcards from './flashcards/client-flashcards';
 import ClientQuizzes from './quizzes/client-quizzes';
-import FileDisplay from './resources/file-display';
-import { YoutubeEmbed } from './youtube-links/embed';
 import { extractYoutubeId } from '@/utils/url-helper';
 import {
   createClient,
   createDynamicClient,
 } from '@tuturuuu/supabase/next/server';
 import { WorkspaceCourseModule } from '@tuturuuu/types/db';
+import { Accordion } from '@tuturuuu/ui/accordion';
+import { CourseSection } from '@tuturuuu/ui/custom/education/modules/content-section';
+import { FileDisplay } from '@tuturuuu/ui/custom/education/modules/resources/file-display';
+import { YoutubeEmbed } from '@tuturuuu/ui/custom/education/modules/youtube/embed';
 import {
   BookText,
   Goal,
@@ -18,6 +19,8 @@ import {
   Youtube,
 } from '@tuturuuu/ui/icons';
 import { Separator } from '@tuturuuu/ui/separator';
+import { RichTextEditor } from '@tuturuuu/ui/text-editor/editor';
+import { JSONContent } from '@tuturuuu/ui/tiptap';
 import { getTranslations } from 'next-intl/server';
 
 interface Props {
@@ -67,17 +70,18 @@ export default async function UserGroupDetailsPage({ params }: Props) {
   }));
 
   return (
-    <div className="grid gap-4">
+    <Accordion type="multiple" className="grid gap-4">
       <CourseSection
         href={`/${wsId}/education/courses/${courseId}/modules/${moduleId}/content`}
         title={t('course-details-tabs.module_content')}
         icon={<Goal className="h-5 w-5" />}
         rawContent={data.content as any | undefined}
         content={
-          data.content
-            ? // <BlockEditor document={data.content as any} />
-              undefined
-            : undefined
+          data.content ? (
+            <div className="h-full max-h-[500px] overflow-y-auto">
+              <RichTextEditor content={data.content as JSONContent} readOnly />
+            </div>
+          ) : undefined
         }
       />
       <CourseSection
@@ -188,7 +192,7 @@ export default async function UserGroupDetailsPage({ params }: Props) {
             : undefined
         }
       />
-    </div>
+    </Accordion>
   );
 }
 
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/resources/delete-resource.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/resources/delete-resource.tsx
deleted file mode 100644
index 1096492128..0000000000
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/resources/delete-resource.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client';
-
-import { createClient } from '@tuturuuu/supabase/next/client';
-import { Button } from '@tuturuuu/ui/button';
-import { Trash } from '@tuturuuu/ui/icons';
-import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-
-export default function DeleteResourceButton({ path }: { path: string }) {
-  const router = useRouter();
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    setLoading(false);
-  }, [path]);
-
-  const deleteResource = async (path: string) => {
-    setLoading(true);
-    const supabase = createClient();
-
-    const { error } = await supabase.storage.from('workspaces').remove([path]);
-
-    if (!error) {
-      router.refresh();
-    } else {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <Button
-      onClick={async () => {
-        await deleteResource(path);
-      }}
-      size="icon"
-      variant="destructive"
-      disabled={loading}
-    >
-      <Trash className="h-5 w-5" />
-    </Button>
-  );
-}
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/resources/file-display.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/resources/file-display.tsx
deleted file mode 100644
index 51f7262955..0000000000
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/resources/file-display.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-'use client';
-
-import { createClient } from '@tuturuuu/supabase/next/client';
-import type { StorageObject } from '@tuturuuu/types/primitives/StorageObject';
-import { useTranslations } from 'next-intl';
-import dynamic from 'next/dynamic';
-import Image from 'next/image';
-import { useEffect, useState } from 'react';
-
-const PDFViewer = dynamic(
-  () => import('./pdf-viewer').then((mod) => mod.PDFViewer),
-  { ssr: false }
-);
-
-const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'];
-
-export default function FileDisplay({
-  path,
-  file,
-}: {
-  path: string;
-  file: StorageObject;
-}) {
-  const t = useTranslations();
-
-  const supabase = createClient();
-  const [signedUrl, setSignedUrl] = useState<string | null>(null);
-
-  useEffect(() => {
-    const fetchSignedUrl = async () => {
-      if (!file.id || !file.name) return;
-      const { data, error } = await supabase.storage
-        .from('workspaces')
-        .createSignedUrl(`${path}${file.name}`, 3600);
-
-      if (error) {
-        console.error(error);
-        return;
-      }
-      console.log(data);
-
-      setSignedUrl(data?.signedUrl);
-    };
-
-    fetchSignedUrl();
-  }, [file.id]);
-
-  if (!signedUrl) return null;
-
-  if (
-    imageExtensions.includes(file.name?.split('.').pop()?.toLowerCase() || '')
-  )
-    return (
-      <Image
-        src={signedUrl}
-        className="h-64 w-64 rounded-lg object-cover md:h-96 md:w-96"
-        width={1000}
-        height={1000}
-        alt={file.name || 'Unknown file'}
-      />
-    );
-
-  if (file.name?.endsWith('.pdf')) {
-    return <PDFViewer url={signedUrl} />;
-  }
-
-  return (
-    <div className="opacity-50">
-      {t('course-details-tabs.resource_preview_unavailable')}.
-    </div>
-  );
-}
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/resources/page.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/resources/page.tsx
index c1911c8ec3..1bbd0adf38 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/resources/page.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/resources/page.tsx
@@ -1,7 +1,7 @@
-import DeleteResourceButton from './delete-resource';
-import FileDisplay from './file-display';
-import { StorageObjectForm } from '@/app/[locale]/(dashboard)/[wsId]/drive/form';
 import { createDynamicClient } from '@tuturuuu/supabase/next/server';
+import { DeleteResourceButton } from '@tuturuuu/ui/custom/education/modules/resources/delete-resource';
+import { FileDisplay } from '@tuturuuu/ui/custom/education/modules/resources/file-display';
+import { StorageObjectForm } from '@tuturuuu/ui/custom/education/modules/resources/file-upload-form';
 import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
 import { Paperclip } from '@tuturuuu/ui/icons';
 import { Separator } from '@tuturuuu/ui/separator';
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/resources/pdf-viewer.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/resources/pdf-viewer.tsx
deleted file mode 100644
index aa3b906872..0000000000
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/resources/pdf-viewer.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-'use client';
-
-import { Button } from '@tuturuuu/ui/button';
-import { ChevronLeft, ChevronRight } from '@tuturuuu/ui/icons';
-import { cn } from '@tuturuuu/utils/format';
-import { AnimatePresence, motion } from 'framer-motion';
-import { useTranslations } from 'next-intl';
-import { useEffect, useRef, useState } from 'react';
-import { Document, Page, pdfjs } from 'react-pdf';
-
-pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-  `https://unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`
-).toString();
-
-export function PDFViewer({ url }: { url: string }) {
-  const t = useTranslations();
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const [pageNumber, setPageNumber] = useState(1);
-  const [numPages, setNumPages] = useState(0);
-  const [pdfWidth, setPdfWidth] = useState(0);
-  const [isLoading, setIsLoading] = useState(true);
-
-  const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
-    setNumPages(numPages);
-  };
-
-  useEffect(() => {
-    const updatePdfWidth = () => {
-      if (containerRef.current) {
-        setPdfWidth(containerRef.current.offsetWidth);
-      }
-    };
-
-    updatePdfWidth();
-    window.addEventListener('resize', updatePdfWidth);
-    return () => window.removeEventListener('resize', updatePdfWidth);
-  }, []);
-
-  const changePage = (offset: number) => {
-    setIsLoading(true);
-    setPageNumber((prevPageNumber) => {
-      const newPageNumber = prevPageNumber + offset;
-      return Math.max(1, Math.min(newPageNumber, numPages));
-    });
-  };
-
-  return (
-    <div ref={containerRef} className="relative">
-      <Document file={url} onLoadSuccess={onDocumentLoadSuccess}>
-        <AnimatePresence mode="wait">
-          <motion.div
-            key={pageNumber}
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.2 }}
-            className="relative aspect-video"
-            style={{ width: pdfWidth }}
-          >
-            <div
-              className="absolute inset-0 aspect-video animate-pulse bg-white"
-              style={{ width: pdfWidth }}
-            />
-            <Page
-              pageNumber={pageNumber}
-              width={pdfWidth}
-              renderAnnotationLayer={false}
-              renderTextLayer={false}
-              onRenderSuccess={() => setIsLoading(false)}
-              className={cn(isLoading ? 'opacity-0' : 'opacity-100')}
-              loading={
-                <div
-                  className="absolute inset-0 aspect-video animate-pulse bg-white"
-                  style={{ width: pdfWidth }}
-                />
-              }
-            />
-          </motion.div>
-        </AnimatePresence>
-      </Document>
-      <div className="mt-2 flex flex-col items-stretch justify-center gap-2">
-        <div className="flex items-center justify-between gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => changePage(-1)}
-            disabled={pageNumber <= 1 || isLoading}
-            className="w-full md:w-auto"
-          >
-            <ChevronLeft className="h-4 w-4" />
-            {t('common.previous')}
-          </Button>
-          <p className="hidden text-center text-sm md:block">
-            {t('common.page')} <span className="font-bold">{pageNumber}</span>{' '}
-            {t('common.of')} <span className="font-bold">{numPages || 1}</span>
-          </p>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => changePage(1)}
-            disabled={pageNumber >= numPages || isLoading}
-            className="w-full md:w-auto"
-          >
-            {t('common.next')}
-            <ChevronRight className="h-4 w-4" />
-          </Button>
-        </div>
-        <p className="text-center text-sm md:hidden">
-          {t('common.page')} <span className="font-bold">{pageNumber}</span>{' '}
-          {t('common.of')} <span className="font-bold">{numPages || 1}</span>
-        </p>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/youtube-links/delete-link.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/youtube-links/delete-link.tsx
deleted file mode 100644
index 9c7a80f2fe..0000000000
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/youtube-links/delete-link.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-'use client';
-
-import { createClient } from '@tuturuuu/supabase/next/client';
-import { Button } from '@tuturuuu/ui/button';
-import { Trash } from '@tuturuuu/ui/icons';
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
-
-export default function DeleteLinkButton({
-  moduleId,
-  courseId,
-  link,
-  links,
-}: {
-  moduleId: string;
-  courseId: string;
-  link: string;
-  links: string[];
-}) {
-  const router = useRouter();
-  const [loading, setLoading] = useState(false);
-
-  const updateYoutubeLinks = async (
-    moduleId: string,
-    courseId: string,
-    links: string[]
-  ) => {
-    setLoading(true);
-    const supabase = createClient();
-
-    const { data, error } = await supabase
-      .from('workspace_course_modules')
-      .update({
-        youtube_links: links,
-      })
-      .eq('id', moduleId)
-      .eq('course_id', courseId);
-
-    if (error) {
-      console.error('error', error);
-      setLoading(false);
-    } else {
-      router.refresh();
-    }
-
-    return data;
-  };
-
-  return (
-    <Button
-      onClick={async () => {
-        await updateYoutubeLinks(
-          moduleId,
-          courseId,
-          links.filter((l) => l !== link)
-        );
-      }}
-      size="icon"
-      variant="destructive"
-      disabled={loading}
-    >
-      <Trash className="h-5 w-5" />
-    </Button>
-  );
-}
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/youtube-links/form.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/youtube-links/form.tsx
deleted file mode 100644
index c0a382b4c0..0000000000
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/youtube-links/form.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-'use client';
-
-import { Button } from '@tuturuuu/ui/button';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@tuturuuu/ui/form';
-import { useForm } from '@tuturuuu/ui/hooks/use-form';
-import { toast } from '@tuturuuu/ui/hooks/use-toast';
-import { Input } from '@tuturuuu/ui/input';
-import { zodResolver } from '@tuturuuu/ui/resolvers';
-import { useTranslations } from 'next-intl';
-import { useRouter } from 'next/navigation';
-import * as z from 'zod';
-
-interface Props {
-  wsId: string;
-  moduleId: string;
-  link?: string;
-  links?: string[];
-  // eslint-disable-next-line no-unused-vars
-  onFinish?: (data: z.infer<typeof FormSchema>) => void;
-}
-
-const FormSchema = z.object({
-  link: z
-    .string()
-    .min(1, 'Link is required')
-    .regex(
-      /^(https?:\/\/)?(www\.youtube\.com|youtu\.?be)\/.+$/,
-      'Invalid YouTube link'
-    ),
-});
-
-export default function YouTubeLinkForm({
-  wsId,
-  moduleId,
-  link,
-  links,
-  onFinish,
-}: Props) {
-  const t = useTranslations('ws-course-modules');
-  const router = useRouter();
-
-  const form = useForm({
-    resolver: zodResolver(FormSchema),
-    values: {
-      link: link || '',
-    },
-  });
-
-  const isDirty = form.formState.isDirty;
-  const isValid = form.formState.isValid;
-  const isSubmitting = form.formState.isSubmitting;
-
-  const disabled = !isDirty || !isValid || isSubmitting;
-
-  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
-    try {
-      const res = await fetch(
-        `/api/v1/workspaces/${wsId}/course-modules/${moduleId}`,
-        {
-          method: 'PUT',
-          body: JSON.stringify({
-            youtube_links: [...(links || []), data.link],
-          }),
-        }
-      );
-
-      if (res.ok) {
-        onFinish?.(data);
-        router.refresh();
-      } else {
-        const data = await res.json();
-        toast({
-          title: `Failed to ${link ? 'edit' : 'create'} youtube link`,
-          description: data.message,
-        });
-      }
-    } catch (error) {
-      toast({
-        title: `Failed to ${link ? 'edit' : 'create'} youtube link`,
-        description: error instanceof Error ? error.message : String(error),
-      });
-    }
-  };
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-3">
-        <FormField
-          control={form.control}
-          name="link"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('youtube_link')}</FormLabel>
-              <FormControl>
-                <Input
-                  placeholder={t('youtube_link')}
-                  autoComplete="off"
-                  {...field}
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <Button type="submit" className="w-full" disabled={disabled}>
-          {link ? t('edit_link') : t('add_link')}
-        </Button>
-      </form>
-    </Form>
-  );
-}
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/youtube-links/page.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/youtube-links/page.tsx
index f331c5a522..36f0b7df0f 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/youtube-links/page.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/youtube-links/page.tsx
@@ -1,8 +1,8 @@
-import DeleteLinkButton from './delete-link';
-import { YoutubeEmbed } from './embed';
-import YouTubeLinkForm from './form';
 import { extractYoutubeId } from '@/utils/url-helper';
 import { createClient } from '@tuturuuu/supabase/next/server';
+import DeleteLinkButton from '@tuturuuu/ui/custom/education/modules/youtube/delete-link-button';
+import { YoutubeEmbed } from '@tuturuuu/ui/custom/education/modules/youtube/embed';
+import YouTubeLinkForm from '@tuturuuu/ui/custom/education/modules/youtube/form';
 import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
 import { Youtube } from '@tuturuuu/ui/icons';
 import { Separator } from '@tuturuuu/ui/separator';
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/page.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/page.tsx
index fb7b556459..f3e22ebbaa 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/page.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/page.tsx
@@ -1,8 +1,8 @@
 import { getWorkspaceCourseModuleColumns } from './columns';
-import CourseModuleForm from './form';
 import { CustomDataTable } from '@/components/custom-data-table';
 import { createClient } from '@tuturuuu/supabase/next/server';
 import { WorkspaceCourseModule } from '@tuturuuu/types/db';
+import { CourseModuleForm } from '@tuturuuu/ui/custom/education/modules/course-module-form';
 import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
 import { Separator } from '@tuturuuu/ui/separator';
 import { getTranslations } from 'next-intl/server';
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/row-actions.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/row-actions.tsx
deleted file mode 100644
index 4fe275f56e..0000000000
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/row-actions.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-'use client';
-
-import WorkspaceCourseModuleForm from './form';
-import { Row } from '@tanstack/react-table';
-import { WorkspaceCourseModule } from '@tuturuuu/types/db';
-import { Button } from '@tuturuuu/ui/button';
-import ModifiableDialogTrigger from '@tuturuuu/ui/custom/modifiable-dialog-trigger';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@tuturuuu/ui/dropdown-menu';
-import { toast } from '@tuturuuu/ui/hooks/use-toast';
-import { Ellipsis } from '@tuturuuu/ui/icons';
-import { useTranslations } from 'next-intl';
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
-
-interface WorkspaceCourseModuleRowActionsProps {
-  wsId: string;
-  courseId: string;
-  row: Row<WorkspaceCourseModule>;
-}
-
-export function WorkspaceCourseModuleRowActions({
-  wsId,
-  courseId,
-  row,
-}: WorkspaceCourseModuleRowActionsProps) {
-  const router = useRouter();
-  const t = useTranslations();
-
-  const data = row.original;
-
-  const deleteWorkspaceCourseModule = async () => {
-    const res = await fetch(
-      `/api/v1/workspaces/${wsId}/course-modules/${data.id}`,
-      {
-        method: 'DELETE',
-      }
-    );
-
-    if (res.ok) {
-      router.refresh();
-    } else {
-      const data = await res.json();
-      toast({
-        title: 'Failed to delete workspace user group tag',
-        description: data.message,
-      });
-    }
-  };
-
-  const [showEditDialog, setShowEditDialog] = useState(false);
-
-  if (!data.id || !wsId) return null;
-
-  return (
-    <div className="flex items-center justify-end gap-2">
-      {/* {data.href && (
-        <Link href={data.href}>
-          <Button>
-            <Eye className="mr-1 h-5 w-5" />
-            {t('common.view')}
-          </Button>
-        </Link>
-      )} */}
-
-      <DropdownMenu modal={false}>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
-          >
-            <Ellipsis className="h-4 w-4" />
-            <span className="sr-only">Open menu</span>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-[160px]">
-          <DropdownMenuItem onClick={() => setShowEditDialog(true)}>
-            {t('common.edit')}
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={deleteWorkspaceCourseModule}>
-            {t('common.delete')}
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      <ModifiableDialogTrigger
-        data={data}
-        open={showEditDialog}
-        title={t('ws-flashcards.edit')}
-        editDescription={t('ws-flashcards.edit_description')}
-        setOpen={setShowEditDialog}
-        form={
-          <WorkspaceCourseModuleForm
-            wsId={wsId}
-            courseId={courseId}
-            data={data}
-          />
-        }
-      />
-    </div>
-  );
-}
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/section.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/section.tsx
deleted file mode 100644
index fdff8b63c3..0000000000
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/section.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Separator } from '@tuturuuu/ui/separator';
-import { isEqual } from 'lodash';
-import { getTranslations } from 'next-intl/server';
-import Link from 'next/link';
-import { ReactNode } from 'react';
-
-export async function CourseSection({
-  href,
-  title,
-  icon,
-  rawContent,
-  content,
-  hideContent,
-}: {
-  href?: string;
-  title: string;
-  icon: ReactNode;
-  rawContent?: any;
-  content?: ReactNode;
-  hideContent?: boolean;
-}) {
-  const t = await getTranslations();
-
-  const isContentEmpty =
-    !hideContent &&
-    (rawContent
-      ? isEqual(rawContent, {
-          type: 'doc',
-          content: [
-            {
-              type: 'paragraph',
-            },
-          ],
-        })
-      : !content);
-
-  return (
-    <div className="rounded-lg border border-foreground/10 bg-foreground/5 p-4">
-      {href ? (
-        <Link
-          href={href}
-          className="flex w-fit items-center gap-2 text-lg font-semibold hover:underline md:text-2xl"
-        >
-          {icon}
-          {title}
-        </Link>
-      ) : (
-        <div className="flex items-center gap-2 text-lg font-semibold md:text-2xl">
-          {icon}
-          {title}
-        </div>
-      )}
-      {hideContent || (
-        <>
-          <Separator className="my-2" />
-          {isContentEmpty ? (
-            <div className="opacity-50">{t('common.no_content_yet')}.</div>
-          ) : (
-            content
-          )}
-        </>
-      )}
-    </div>
-  );
-}
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/columns.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/columns.tsx
index 23a2c178b1..ae306dc57d 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/columns.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/columns.tsx
@@ -1,8 +1,8 @@
 'use client';
 
-import { WorkspaceCourseRowActions } from './row-actions';
 import { ColumnDef } from '@tanstack/react-table';
 import { WorkspaceCourse } from '@tuturuuu/types/db';
+import { WorkspaceCourseRowActions } from '@tuturuuu/ui/custom/education/courses/course-row-actions';
 import { DataTableColumnHeader } from '@tuturuuu/ui/custom/tables/data-table-column-header';
 import moment from 'moment';
 import Link from 'next/link';
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/form.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/form.tsx
deleted file mode 100644
index 465075907d..0000000000
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/form.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-'use client';
-
-import { WorkspaceCourse } from '@tuturuuu/types/db';
-import { Button } from '@tuturuuu/ui/button';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@tuturuuu/ui/form';
-import { useForm } from '@tuturuuu/ui/hooks/use-form';
-import { toast } from '@tuturuuu/ui/hooks/use-toast';
-import { Input } from '@tuturuuu/ui/input';
-import { zodResolver } from '@tuturuuu/ui/resolvers';
-import { useTranslations } from 'next-intl';
-import { useRouter } from 'next/navigation';
-import * as z from 'zod';
-
-interface Props {
-  wsId: string;
-  data?: WorkspaceCourse;
-  // eslint-disable-next-line no-unused-vars
-  onFinish?: (data: z.infer<typeof FormSchema>) => void;
-}
-
-const FormSchema = z.object({
-  id: z.string().optional(),
-  name: z.string().min(1),
-});
-
-export default function CourseForm({ wsId, data, onFinish }: Props) {
-  const t = useTranslations('ws-courses');
-  const router = useRouter();
-
-  const form = useForm({
-    resolver: zodResolver(FormSchema),
-    values: {
-      id: data?.id,
-      name: data?.name || '',
-    },
-  });
-
-  const isDirty = form.formState.isDirty;
-  const isValid = form.formState.isValid;
-  const isSubmitting = form.formState.isSubmitting;
-
-  const disabled = !isDirty || !isValid || isSubmitting;
-
-  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
-    try {
-      const res = await fetch(
-        data.id
-          ? `/api/v1/workspaces/${wsId}/courses/${data.id}`
-          : `/api/v1/workspaces/${wsId}/courses`,
-        {
-          method: data.id ? 'PUT' : 'POST',
-          body: JSON.stringify(data),
-        }
-      );
-
-      if (res.ok) {
-        onFinish?.(data);
-        router.refresh();
-      } else {
-        const data = await res.json();
-        toast({
-          title: `Failed to ${data.id ? 'edit' : 'create'} course`,
-          description: data.message,
-        });
-      }
-    } catch (error) {
-      toast({
-        title: `Failed to ${data.id ? 'edit' : 'create'} course`,
-        description: error instanceof Error ? error.message : String(error),
-      });
-    }
-  };
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-3">
-        <FormField
-          control={form.control}
-          name="name"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{t('name')}</FormLabel>
-              <FormControl>
-                <Input placeholder={t('name')} autoComplete="off" {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-
-        <Button type="submit" className="w-full" disabled={disabled}>
-          {data?.id ? t('edit') : t('create')}
-        </Button>
-      </form>
-    </Form>
-  );
-}
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/page.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/page.tsx
index e0abe53dc8..6ae764ee09 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/page.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/page.tsx
@@ -1,9 +1,13 @@
 import { getWorkspaceCourseColumns } from './columns';
-import CourseForm from './form';
+//import { mockData } from './mock/mock-courses';
 import { CustomDataTable } from '@/components/custom-data-table';
 import { createClient } from '@tuturuuu/supabase/next/server';
 import { WorkspaceCourse } from '@tuturuuu/types/db';
+import { CourseCardView } from '@tuturuuu/ui/custom/education/courses/course-card-view';
+import { CourseForm } from '@tuturuuu/ui/custom/education/courses/course-form';
+import { CoursePagination } from '@tuturuuu/ui/custom/education/courses/course-pagination';
 import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
+import { ViewToggle } from '@tuturuuu/ui/custom/view-toggle';
 import { Separator } from '@tuturuuu/ui/separator';
 import { getTranslations } from 'next-intl/server';
 
@@ -13,6 +17,7 @@ interface SearchParams {
   pageSize?: string;
   includedTags?: string | string[];
   excludedTags?: string | string[];
+  view?: 'card' | 'table';
 }
 
 interface Props {
@@ -28,8 +33,14 @@ export default async function WorkspaceCoursesPage({
 }: Props) {
   const t = await getTranslations();
   const { wsId } = await params;
+  const searchParamsResolved = await searchParams;
+  const { page = '1', pageSize = '10' } = searchParamsResolved;
 
-  const { data, count } = await getData(wsId, await searchParams);
+  const { data, count } = await getData(wsId, searchParamsResolved);
+  const currentView = searchParamsResolved.view || 'card';
+  const currentPage = parseInt(page);
+  const currentPageSize = parseInt(pageSize);
+  const totalPages = Math.ceil(count / currentPageSize);
 
   const courses = data.map((c) => ({
     ...c,
@@ -39,25 +50,47 @@ export default async function WorkspaceCoursesPage({
 
   return (
     <>
-      <FeatureSummary
-        pluralTitle={t('ws-courses.plural')}
-        singularTitle={t('ws-courses.singular')}
-        description={t('ws-courses.description')}
-        createTitle={t('ws-courses.create')}
-        createDescription={t('ws-courses.create_description')}
-        form={<CourseForm wsId={wsId} />}
-      />
-      <Separator className="my-4" />
-      <CustomDataTable
-        data={courses}
-        columnGenerator={getWorkspaceCourseColumns}
-        namespace="course-data-table"
-        count={count}
-        defaultVisibility={{
-          id: false,
-          created_at: false,
-        }}
-      />
+      <div className="p-4">
+        <FeatureSummary
+          pluralTitle={t('ws-courses.plural')}
+          singularTitle={t('ws-courses.singular')}
+          description={t('ws-courses.description')}
+          createTitle={t('ws-courses.create')}
+          createDescription={t('ws-courses.create_description')}
+          form={<CourseForm wsId={wsId} />}
+        />
+        <Separator className="my-4" />
+
+        <div className="mb-4 flex justify-end">
+          <ViewToggle currentView={currentView} />
+        </div>
+
+        {currentView === 'card' ? (
+          <>
+            <CourseCardView courses={courses} />
+            <div className="mt-8">
+              <CoursePagination
+                currentPage={currentPage}
+                totalPages={totalPages}
+                totalCount={count}
+                pageSize={currentPageSize}
+                wsId={wsId}
+              />
+            </div>
+          </>
+        ) : (
+          <CustomDataTable
+            data={courses}
+            columnGenerator={getWorkspaceCourseColumns}
+            namespace="course-data-table"
+            count={count}
+            defaultVisibility={{
+              id: false,
+              created_at: false,
+            }}
+          />
+        )}
+      </div>
     </>
   );
 }
@@ -71,6 +104,26 @@ async function getData(
     retry = true,
   }: { q?: string; page?: string; pageSize?: string; retry?: boolean } = {}
 ) {
+  // if (process.env.NODE_ENV === 'development') {
+  //   // Placing mock data for testing
+  //   const allMock: WorkspaceCourse[] = mockData();
+
+  //   const filteredData = allMock.filter((course) =>
+  //     q ? course.name.toLowerCase().includes(q.toLowerCase()) : true
+  //   );
+
+  //   const parsedPage = parseInt(page);
+  //   const parsedSize = parseInt(pageSize);
+  //   const start = (parsedPage - 1) * parsedSize;
+  //   const end = parsedPage * parsedSize;
+  //   const paginatedData = filteredData.slice(start, end);
+
+  //   return {
+  //     data: paginatedData,
+  //     count: filteredData.length,
+  //   };
+  // }
+
   const supabase = await createClient();
 
   const queryBuilder = supabase
@@ -103,5 +156,5 @@ async function getData(
       modules: workspace_course_modules?.[0]?.count || 0,
     })),
     count,
-  } as { data: WorkspaceCourse[]; count: number };
+  } as { data: (WorkspaceCourse & { modules: number })[]; count: number };
 }
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/row-actions.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/row-actions.tsx
deleted file mode 100644
index aaf18caff3..0000000000
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/row-actions.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-'use client';
-
-import WorkspaceCourseForm from './form';
-import { Row } from '@tanstack/react-table';
-import { WorkspaceCourse } from '@tuturuuu/types/db';
-import { Button } from '@tuturuuu/ui/button';
-import ModifiableDialogTrigger from '@tuturuuu/ui/custom/modifiable-dialog-trigger';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@tuturuuu/ui/dropdown-menu';
-import { toast } from '@tuturuuu/ui/hooks/use-toast';
-import { Ellipsis } from '@tuturuuu/ui/icons';
-import { useTranslations } from 'next-intl';
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
-
-interface WorkspaceCourseRowActionsProps {
-  row: Row<WorkspaceCourse>;
-}
-
-export function WorkspaceCourseRowActions({
-  row,
-}: WorkspaceCourseRowActionsProps) {
-  const router = useRouter();
-  const t = useTranslations();
-
-  const data = row.original;
-
-  const deleteWorkspaceCourse = async () => {
-    const res = await fetch(
-      `/api/v1/workspaces/${data.ws_id}/courses/${data.id}`,
-      {
-        method: 'DELETE',
-      }
-    );
-
-    if (res.ok) {
-      router.refresh();
-    } else {
-      const data = await res.json();
-      toast({
-        title: 'Failed to delete workspace user group tag',
-        description: data.message,
-      });
-    }
-  };
-
-  const [showEditDialog, setShowEditDialog] = useState(false);
-
-  if (!data.id || !data.ws_id) return null;
-
-  return (
-    <div className="flex items-center justify-end gap-2">
-      {/* {data.href && (
-        <Link href={data.href}>
-          <Button>
-            <Eye className="mr-1 h-5 w-5" />
-            {t('common.view')}
-          </Button>
-        </Link>
-      )} */}
-
-      <DropdownMenu modal={false}>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
-          >
-            <Ellipsis className="h-4 w-4" />
-            <span className="sr-only">Open menu</span>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-[160px]">
-          <DropdownMenuItem onClick={() => setShowEditDialog(true)}>
-            {t('common.edit')}
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={deleteWorkspaceCourse}>
-            {t('common.delete')}
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      <ModifiableDialogTrigger
-        data={data}
-        open={showEditDialog}
-        title={t('ws-flashcards.edit')}
-        editDescription={t('ws-flashcards.edit_description')}
-        setOpen={setShowEditDialog}
-        form={<WorkspaceCourseForm wsId={data.ws_id} data={data} />}
-      />
-    </div>
-  );
-}
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/quiz-sets/[setId]/layout.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/quiz-sets/[setId]/layout.tsx
index 9c1f1bd199..9f44e67fc4 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/quiz-sets/[setId]/layout.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/quiz-sets/[setId]/layout.tsx
@@ -1,6 +1,6 @@
-import LinkButton from '../../courses/[courseId]/link-button';
 import { createClient } from '@tuturuuu/supabase/next/server';
 import { type WorkspaceQuizSet } from '@tuturuuu/types/db';
+import LinkButton from '@tuturuuu/ui/custom/education/modules/link-button';
 import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
 import { Box, Eye, Paperclip } from '@tuturuuu/ui/icons';
 import { Separator } from '@tuturuuu/ui/separator';
diff --git a/apps/web/src/components/custom-data-table.tsx b/apps/web/src/components/custom-data-table.tsx
index 622ef00843..d3236d376f 100644
--- a/apps/web/src/components/custom-data-table.tsx
+++ b/apps/web/src/components/custom-data-table.tsx
@@ -1,52 +1,3 @@
 'use client';
 
-import useSearchParams from '@/hooks/useSearchParams';
-import {
-  DataTable,
-  DataTableProps,
-} from '@tuturuuu/ui/custom/tables/data-table';
-import { useTranslations } from 'next-intl';
-import { useRouter } from 'next/navigation';
-import { Suspense } from 'react';
-
-export function CustomDataTable<TData, TValue>({
-  namespace,
-  hideToolbar,
-  hidePagination,
-  className,
-  ...props
-}: DataTableProps<TData, TValue>) {
-  const t = useTranslations();
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const pageSize = Number(searchParams.get('pageSize') || 10);
-  const page = Number(searchParams.get('page') || 0);
-  const pageIndex = page > 0 ? page - 1 : 0;
-
-  return (
-    <Suspense fallback={null}>
-      <DataTable
-        t={t}
-        hideToolbar={hideToolbar}
-        hidePagination={hidePagination}
-        namespace={namespace}
-        pageIndex={pageIndex || 0}
-        pageSize={pageSize || 10}
-        onRefresh={() => router.refresh()}
-        defaultQuery={searchParams.getSingle('q', '')}
-        onSearch={(query: string) =>
-          query
-            ? searchParams.set({ q: query, page: '1' })
-            : searchParams.reset()
-        }
-        setParams={(params) => searchParams.set(params)}
-        resetParams={() => searchParams.reset()}
-        isEmpty={searchParams.isEmpty}
-        newObjectTitle={t('common.create')}
-        className={className}
-        {...props}
-      />
-    </Suspense>
-  );
-}
+export { CustomDataTable } from '@tuturuuu/ui/custom/tables/custom-data-table';
diff --git a/bun.lock b/bun.lock
index 27cd62b584..077e0de384 100644
--- a/bun.lock
+++ b/bun.lock
@@ -717,6 +717,7 @@
         "dayjs": "^1.11.13",
         "embla-carousel-react": "^8.6.0",
         "eslint": "^9.28.0",
+        "framer-motion": "^12.16.0",
         "gsap": "^3.13.0",
         "input-otp": "^1.4.2",
         "lodash": "^4.17.21",
@@ -731,6 +732,7 @@
         "react-dropzone": "^14.3.8",
         "react-hook-form": "^7.57.0",
         "react-markdown": "^10.1.0",
+        "react-pdf": "^9.2.1",
         "react-resizable": "^3.0.5",
         "react-resizable-panels": "^3.0.2",
         "react-syntax-highlighter": "^15.6.1",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index c0ff6bcb07..27f29a547a 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -57,6 +57,7 @@
     "dayjs": "^1.11.13",
     "embla-carousel-react": "^8.6.0",
     "eslint": "^9.28.0",
+    "framer-motion": "^12.16.0",
     "gsap": "^3.13.0",
     "input-otp": "^1.4.2",
     "lodash": "^4.17.21",
@@ -71,6 +72,7 @@
     "react-dropzone": "^14.3.8",
     "react-hook-form": "^7.57.0",
     "react-markdown": "^10.1.0",
+    "react-pdf": "^9.2.1",
     "react-resizable": "^3.0.5",
     "react-resizable-panels": "^3.0.2",
     "react-syntax-highlighter": "^15.6.1",
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/card-view.tsx b/packages/ui/src/components/ui/custom/education/courses/course-card-view.tsx
similarity index 96%
rename from apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/card-view.tsx
rename to packages/ui/src/components/ui/custom/education/courses/course-card-view.tsx
index 333ff36072..de91b5b067 100644
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/card-view.tsx
+++ b/packages/ui/src/components/ui/custom/education/courses/course-card-view.tsx
@@ -25,7 +25,7 @@ export function CourseCardView({ courses }: CourseCardViewProps) {
           <BookOpen className="h-8 w-8 text-purple-600" />
         </div>
         <p className="text-lg font-medium text-gray-900 dark:text-gray-100">
-          {t('no-courses-found')}
+          {t('ws-courses.no_courses_found')}
         </p>
       </div>
     );
@@ -75,7 +75,8 @@ export function CourseCardView({ courses }: CourseCardViewProps) {
 
               <CardContent className="relative flex min-h-[140px] flex-1 flex-col">
                 <p className="mb-4 line-clamp-3 text-sm leading-relaxed text-gray-600 dark:text-gray-400">
-                  {course.description || t('no-description-provided')}
+                  {course.description ||
+                    t('ws-courses.no_description_provided')}
                 </p>
 
                 <div className="mt-auto space-y-3">
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/form.tsx b/packages/ui/src/components/ui/custom/education/courses/course-form.tsx
similarity index 97%
rename from apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/form.tsx
rename to packages/ui/src/components/ui/custom/education/courses/course-form.tsx
index 82cb54ba87..83c94a1ad3 100644
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/form.tsx
+++ b/packages/ui/src/components/ui/custom/education/courses/course-form.tsx
@@ -31,7 +31,7 @@ const FormSchema = z.object({
   description: z.string().optional(),
 });
 
-export default function CourseForm({ wsId, data, onFinish }: Props) {
+export function CourseForm({ wsId, data, onFinish }: Props) {
   const t = useTranslations('ws-courses');
   const router = useRouter();
 
diff --git a/packages/ui/src/components/ui/custom/education/courses/course-header.tsx b/packages/ui/src/components/ui/custom/education/courses/course-header.tsx
new file mode 100644
index 0000000000..fa83fd8bca
--- /dev/null
+++ b/packages/ui/src/components/ui/custom/education/courses/course-header.tsx
@@ -0,0 +1,38 @@
+import { UserGroup } from '@tuturuuu/types/primitives/UserGroup';
+import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
+import { GraduationCap } from '@tuturuuu/ui/icons';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+
+export function CourseHeader({
+  href,
+  data,
+}: {
+  href: string;
+  data: UserGroup;
+}) {
+  const t = useTranslations();
+  return (
+    <FeatureSummary
+      title={
+        <h1 className="flex w-full items-center gap-2 text-2xl font-bold">
+          <div className="flex items-center gap-2 rounded-lg border border-dynamic-blue/20 bg-dynamic-blue/10 px-2 text-lg text-dynamic-blue max-md:hidden">
+            <GraduationCap className="h-6 w-6" />
+            {t('ws-courses.singular')}
+          </div>
+          <Link
+            href={href}
+            className="line-clamp-1 text-lg font-bold hover:underline md:text-2xl"
+          >
+            {data.name || t('common.unknown')}
+          </Link>
+        </h1>
+      }
+      description={
+        <div className="mt-2 line-clamp-2">
+          {data.description || t('ws-courses.no_description_provided')}
+        </div>
+      }
+    />
+  );
+}
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/course-pagination.tsx b/packages/ui/src/components/ui/custom/education/courses/course-pagination.tsx
similarity index 100%
rename from apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/course-pagination.tsx
rename to packages/ui/src/components/ui/custom/education/courses/course-pagination.tsx
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/row-actions.tsx b/packages/ui/src/components/ui/custom/education/courses/course-row-actions.tsx
similarity index 97%
rename from apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/row-actions.tsx
rename to packages/ui/src/components/ui/custom/education/courses/course-row-actions.tsx
index 054834377d..617a1ab492 100644
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/row-actions.tsx
+++ b/packages/ui/src/components/ui/custom/education/courses/course-row-actions.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import WorkspaceCourseForm from './form';
 import { Row } from '@tanstack/react-table';
 import { WorkspaceCourse } from '@tuturuuu/types/db';
 import { Button } from '@tuturuuu/ui/button';
+import { CourseForm } from '@tuturuuu/ui/custom/education/courses/course-form';
 import ModifiableDialogTrigger from '@tuturuuu/ui/custom/modifiable-dialog-trigger';
 import {
   DropdownMenu,
@@ -102,7 +102,7 @@ export function WorkspaceCourseRowActions({
         editDescription={t('ws-courses.edit_description')}
         setOpen={setShowEditDialog}
         form={
-          <WorkspaceCourseForm
+          <CourseForm
             wsId={data.ws_id}
             data={{ ...data, description: data.description ?? '' }}
           />
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/section.tsx b/packages/ui/src/components/ui/custom/education/modules/content-section.tsx
similarity index 100%
rename from apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/section.tsx
rename to packages/ui/src/components/ui/custom/education/modules/content-section.tsx
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/form.tsx b/packages/ui/src/components/ui/custom/education/modules/course-module-form.tsx
similarity index 96%
rename from apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/form.tsx
rename to packages/ui/src/components/ui/custom/education/modules/course-module-form.tsx
index 4973b7ad09..54d3e21cfa 100644
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/form.tsx
+++ b/packages/ui/src/components/ui/custom/education/modules/course-module-form.tsx
@@ -31,12 +31,7 @@ const FormSchema = z.object({
   name: z.string().min(1),
 });
 
-export default function CourseModuleForm({
-  wsId,
-  courseId,
-  data,
-  onFinish,
-}: Props) {
+export function CourseModuleForm({ wsId, courseId, data, onFinish }: Props) {
   const t = useTranslations('ws-course-modules');
   const router = useRouter();
 
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/row-actions.tsx b/packages/ui/src/components/ui/custom/education/modules/course-module-row-actions.tsx
similarity index 94%
rename from apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/row-actions.tsx
rename to packages/ui/src/components/ui/custom/education/modules/course-module-row-actions.tsx
index de39cb9c59..4a2296a4a9 100644
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/row-actions.tsx
+++ b/packages/ui/src/components/ui/custom/education/modules/course-module-row-actions.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import WorkspaceCourseModuleForm from './form';
 import { Row } from '@tanstack/react-table';
 import { WorkspaceCourseModule } from '@tuturuuu/types/db';
 import { Button } from '@tuturuuu/ui/button';
+import { CourseModuleForm } from '@tuturuuu/ui/custom/education/modules/course-module-form';
 import ModifiableDialogTrigger from '@tuturuuu/ui/custom/modifiable-dialog-trigger';
 import {
   DropdownMenu,
@@ -96,13 +96,7 @@ export function WorkspaceCourseModuleRowActions({
         title={t('ws-course-modules.edit')}
         editDescription={t('ws-course-modules.edit_description')}
         setOpen={setShowEditDialog}
-        form={
-          <WorkspaceCourseModuleForm
-            wsId={wsId}
-            courseId={courseId}
-            data={data}
-          />
-        }
+        form={<CourseModuleForm wsId={wsId} courseId={courseId} data={data} />}
       />
 
       <ModifiableDialogTrigger
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/link-button.tsx b/packages/ui/src/components/ui/custom/education/modules/link-button.tsx
similarity index 100%
rename from apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/link-button.tsx
rename to packages/ui/src/components/ui/custom/education/modules/link-button.tsx
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/toggles.tsx b/packages/ui/src/components/ui/custom/education/modules/module-toggle.tsx
similarity index 98%
rename from apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/toggles.tsx
rename to packages/ui/src/components/ui/custom/education/modules/module-toggle.tsx
index 64f1cdf6a7..ffcd9b5b18 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/toggles.tsx
+++ b/packages/ui/src/components/ui/custom/education/modules/module-toggle.tsx
@@ -5,7 +5,7 @@ import { Checkbox } from '@tuturuuu/ui/checkbox';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 
-export default function ModuleToggles({
+export function ModuleToggles({
   courseId,
   moduleId,
   //   isPublic: initialIsPublic,
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/resources/delete-resource.tsx b/packages/ui/src/components/ui/custom/education/modules/resources/delete-resource.tsx
similarity index 92%
rename from apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/resources/delete-resource.tsx
rename to packages/ui/src/components/ui/custom/education/modules/resources/delete-resource.tsx
index 1096492128..6376287142 100644
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/resources/delete-resource.tsx
+++ b/packages/ui/src/components/ui/custom/education/modules/resources/delete-resource.tsx
@@ -6,7 +6,7 @@ import { Trash } from '@tuturuuu/ui/icons';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
-export default function DeleteResourceButton({ path }: { path: string }) {
+export function DeleteResourceButton({ path }: { path: string }) {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
 
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/resources/file-display.tsx b/packages/ui/src/components/ui/custom/education/modules/resources/file-display.tsx
similarity index 91%
rename from apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/resources/file-display.tsx
rename to packages/ui/src/components/ui/custom/education/modules/resources/file-display.tsx
index bbef75b196..01b5e698fb 100644
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/resources/file-display.tsx
+++ b/packages/ui/src/components/ui/custom/education/modules/resources/file-display.tsx
@@ -8,13 +8,16 @@ import Image from 'next/image';
 import { useEffect, useState } from 'react';
 
 const PDFViewer = dynamic(
-  () => import('./pdf-viewer').then((mod) => mod.PDFViewer),
+  () =>
+    import('@tuturuuu/ui/custom/education/modules/resources/pdf-viewer').then(
+      (mod) => mod.PDFViewer
+    ),
   { ssr: false }
 );
 
 const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'];
 
-export default function FileDisplay({
+export function FileDisplay({
   path,
   file,
 }: {
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/drive/form.tsx b/packages/ui/src/components/ui/custom/education/modules/resources/file-upload-form.tsx
similarity index 98%
rename from apps/upskii/src/app/[locale]/(dashboard)/[wsId]/drive/form.tsx
rename to packages/ui/src/components/ui/custom/education/modules/resources/file-upload-form.tsx
index edd9c00684..b9d99d587a 100644
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/drive/form.tsx
+++ b/packages/ui/src/components/ui/custom/education/modules/resources/file-upload-form.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { joinPath } from '@/utils/path-helper';
 import { createClient } from '@tuturuuu/supabase/next/client';
 import { EMPTY_FOLDER_PLACEHOLDER_NAME } from '@tuturuuu/types/primitives/StorageObject';
 import { Button } from '@tuturuuu/ui/button';
@@ -18,6 +17,7 @@ import { Check, Trash } from '@tuturuuu/ui/icons';
 import { Input } from '@tuturuuu/ui/input';
 import { zodResolver } from '@tuturuuu/ui/resolvers';
 import { ScrollArea } from '@tuturuuu/ui/scroll-area';
+import { joinPath } from '@tuturuuu/utils/path-helper';
 import { generateRandomUUID } from '@tuturuuu/utils/uuid-helper';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
@@ -317,7 +317,7 @@ export function StorageObjectForm({
                               />
                             ) : (
                               <div
-                                className="line-clamp-1 text-sm opacity-70"
+                                className="line-clamp-1 max-w-[400px] text-sm break-all opacity-70"
                                 onClick={() => {
                                   setNewFileName(file.name);
                                   setEditingFile(file);
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/resources/pdf-viewer.tsx b/packages/ui/src/components/ui/custom/education/modules/resources/pdf-viewer.tsx
similarity index 100%
rename from apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/resources/pdf-viewer.tsx
rename to packages/ui/src/components/ui/custom/education/modules/resources/pdf-viewer.tsx
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/youtube-links/delete-link.tsx b/packages/ui/src/components/ui/custom/education/modules/youtube/delete-link-button.tsx
similarity index 100%
rename from apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/youtube-links/delete-link.tsx
rename to packages/ui/src/components/ui/custom/education/modules/youtube/delete-link-button.tsx
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/youtube-links/embed.tsx b/packages/ui/src/components/ui/custom/education/modules/youtube/embed.tsx
similarity index 100%
rename from apps/web/src/app/[locale]/(dashboard)/[wsId]/education/courses/[courseId]/modules/[moduleId]/youtube-links/embed.tsx
rename to packages/ui/src/components/ui/custom/education/modules/youtube/embed.tsx
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/youtube-links/form.tsx b/packages/ui/src/components/ui/custom/education/modules/youtube/form.tsx
similarity index 100%
rename from apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/youtube-links/form.tsx
rename to packages/ui/src/components/ui/custom/education/modules/youtube/form.tsx
diff --git a/packages/ui/src/components/ui/custom/tables/custom-data-table.tsx b/packages/ui/src/components/ui/custom/tables/custom-data-table.tsx
new file mode 100644
index 0000000000..6164065d38
--- /dev/null
+++ b/packages/ui/src/components/ui/custom/tables/custom-data-table.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import useSearchParams from '../../../../hooks/useSearchParams';
+import {
+  DataTable,
+  DataTableProps,
+} from '@tuturuuu/ui/custom/tables/data-table';
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
+import { Suspense } from 'react';
+
+export function CustomDataTable<TData, TValue>({
+  namespace,
+  hideToolbar,
+  hidePagination,
+  className,
+  ...props
+}: DataTableProps<TData, TValue>) {
+  const t = useTranslations();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const pageSize = Number(searchParams.get('pageSize') || 10);
+  const page = Number(searchParams.get('page') || 0);
+  const pageIndex = page > 0 ? page - 1 : 0;
+
+  return (
+    <Suspense fallback={null}>
+      <DataTable
+        t={t}
+        hideToolbar={hideToolbar}
+        hidePagination={hidePagination}
+        namespace={namespace}
+        pageIndex={pageIndex || 0}
+        pageSize={pageSize || 10}
+        onRefresh={() => router.refresh()}
+        defaultQuery={searchParams.getSingle('q', '')}
+        onSearch={(query: string) =>
+          query
+            ? searchParams.set({ q: query, page: '1' })
+            : searchParams.reset()
+        }
+        setParams={(params) => searchParams.set(params)}
+        resetParams={() => searchParams.reset()}
+        isEmpty={searchParams.isEmpty}
+        newObjectTitle={t('common.create')}
+        className={className}
+        {...props}
+      />
+    </Suspense>
+  );
+}
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/view-toggle.tsx b/packages/ui/src/components/ui/custom/view-toggle.tsx
similarity index 100%
rename from apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/view-toggle.tsx
rename to packages/ui/src/components/ui/custom/view-toggle.tsx
diff --git a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/content/content-editor.tsx b/packages/ui/src/components/ui/text-editor/content-editor.tsx
similarity index 94%
rename from apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/content/content-editor.tsx
rename to packages/ui/src/components/ui/text-editor/content-editor.tsx
index f3ab4451dc..4a6fa4f098 100644
--- a/apps/upskii/src/app/[locale]/(dashboard)/[wsId]/courses/[courseId]/modules/[moduleId]/content/content-editor.tsx
+++ b/packages/ui/src/components/ui/text-editor/content-editor.tsx
@@ -13,11 +13,7 @@ interface Props {
   content?: JSONContent;
 }
 
-export default function ModuleContentEditor({
-  courseId,
-  moduleId,
-  content,
-}: Props) {
+export function ModuleContentEditor({ courseId, moduleId, content }: Props) {
   const [post, setPost] = useState<JSONContent | null>(content || null);
   const t = useTranslations();
 
diff --git a/packages/ui/src/hooks/useSearchParams.tsx b/packages/ui/src/hooks/useSearchParams.tsx
new file mode 100644
index 0000000000..9405c0a6a8
--- /dev/null
+++ b/packages/ui/src/hooks/useSearchParams.tsx
@@ -0,0 +1,126 @@
+'use client';
+
+import {
+  useSearchParams as useDefaultSearchParams,
+  usePathname,
+  useRouter,
+} from 'next/navigation';
+import { useCallback } from 'react';
+
+const useSearchParams = () => {
+  const searchParams = useDefaultSearchParams();
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const has = useCallback(
+    (key: string) => searchParams.has(key),
+    [searchParams]
+  );
+
+  const get = useCallback(
+    (data: { key: string; fallbackValue?: string | string[] } | string) => {
+      if (typeof data === 'string') return searchParams.getAll(data) || '';
+
+      const { key, fallbackValue } = data;
+      return searchParams.getAll(key).length > 0
+        ? searchParams.getAll(key) || fallbackValue
+        : fallbackValue;
+    },
+    [searchParams]
+  );
+
+  const getSingle = useCallback(
+    (key: string, fallbackValue?: string) => {
+      return searchParams.get(key) || fallbackValue;
+    },
+    [searchParams]
+  );
+
+  const set = useCallback(
+    (
+      data: Record<string, string | number | string[] | undefined>,
+      refresh = true
+    ) => {
+      const params = new URLSearchParams(searchParams);
+
+      Object.entries(data).forEach(([key, value]) => {
+        if (value === undefined) return;
+        if (Array.isArray(value)) {
+          params.delete(key);
+          value
+            .filter((v) => v !== undefined && v !== null)
+            .forEach((item) => params.append(key, item));
+        } else {
+          params.set(key, value.toString());
+        }
+      });
+
+      router.push(`${pathname}?${params.toString()}`);
+      if (refresh) router.refresh();
+    },
+    [pathname, router, searchParams]
+  );
+
+  const add = useCallback(
+    (key: string, value: string | string[], refresh = true) => {
+      const params = new URLSearchParams(searchParams);
+      if (Array.isArray(value)) {
+        value.forEach((item) => params.append(key, item));
+      } else {
+        params.append(key, value);
+      }
+      router.push(`${pathname}?${params.toString()}`);
+      if (refresh) router.refresh();
+    },
+    [pathname, router, searchParams]
+  );
+
+  const remove = useCallback(
+    (key: string, refresh = true) => {
+      const params = new URLSearchParams(searchParams);
+      params.delete(key);
+      router.push(`${pathname}?${params.toString()}`);
+      if (refresh) router.refresh();
+    },
+    [pathname, router, searchParams]
+  );
+
+  const reset = useCallback(
+    (refresh = true) => {
+      router.push(pathname);
+      if (refresh) router.refresh();
+    },
+    [pathname, router]
+  );
+
+  const getAll = useCallback(() => {
+    const params = new URLSearchParams(searchParams);
+    const entries = params.entries();
+    const result: Record<string, string[]> = {};
+    for (const [key, value] of entries) {
+      if (result[key]) {
+        result[key]?.push(value);
+      } else {
+        result[key] = [value];
+      }
+    }
+    return result;
+  }, [searchParams]);
+
+  const isEmpty = searchParams.toString().length === 0;
+
+  return {
+    isEmpty,
+    has,
+    get,
+    set,
+    add,
+    remove,
+    reset,
+    clear: reset,
+    getAll,
+    getSingle,
+  };
+};
+
+export default useSearchParams;
diff --git a/packages/utils/src/path-helper.ts b/packages/utils/src/path-helper.ts
new file mode 100644
index 0000000000..5af3aeb853
--- /dev/null
+++ b/packages/utils/src/path-helper.ts
@@ -0,0 +1,93 @@
+export function joinPath(...paths: string[]) {
+  if (paths.length === 0) return '/';
+
+  // Clean up paths and filter empty ones
+  const validPaths = paths.filter(Boolean).map((p) => p.trim());
+  if (validPaths.length === 0) return '/';
+
+  // Track path properties
+  const firstPath = validPaths[0];
+  const shouldBeRelative =
+    firstPath?.startsWith('./') || firstPath?.startsWith('../');
+  const shouldStartWithSlash =
+    firstPath?.startsWith('/') || firstPath?.startsWith('//');
+  const shouldHaveTrailingSlash = paths[paths.length - 1]?.endsWith('/');
+
+  // Process each path segment
+  const segments: string[] = [];
+  for (const path of validPaths) {
+    const parts = path.split('/');
+    for (const part of parts) {
+      if (part === '.') {
+        continue; // Skip "." segments
+      }
+      if (part) {
+        segments.push(part);
+      }
+    }
+  }
+
+  let result = segments.join('/');
+
+  // Handle special cases
+  if (!result || result === '/') return '/';
+
+  // Add leading slash for absolute paths
+  if (!shouldBeRelative && shouldStartWithSlash) {
+    result = '/' + result.replace(/^\//, '');
+  }
+
+  // Add leading './' if the first path started with './'
+  if (shouldBeRelative && firstPath?.startsWith('./')) {
+    result = './' + result;
+  }
+
+  // Add trailing slash if original had one
+  if (shouldHaveTrailingSlash && !result.endsWith('/')) {
+    result += '/';
+  }
+
+  return result;
+}
+
+export function popPath(path: string) {
+  if (!path) return '/';
+
+  // Clean and normalize the path
+  let cleanPath = path.trim().replace(/\/+/g, '/');
+  const isRelative = cleanPath.startsWith('./') || cleanPath.startsWith('../');
+  const isAbsolute = cleanPath.startsWith('/');
+
+  // Handle root and empty cases
+  if (!cleanPath || cleanPath === '/' || cleanPath === '.') return '/';
+
+  // Remove trailing slashes for processing
+  cleanPath = cleanPath.replace(/\/*$/, '');
+
+  // Find last slash
+  const lastSlash = cleanPath.lastIndexOf('/');
+
+  // No slash found
+  if (lastSlash === -1) {
+    if (isRelative) return '.';
+    return isAbsolute ? '/' : '/base';
+  }
+
+  // Get parent path
+  let result = cleanPath.slice(0, lastSlash);
+  if (!result) return '/';
+
+  // Handle relative paths
+  if (isRelative) {
+    if (!result.startsWith('./') && !result.startsWith('../')) {
+      result = './' + result.replace(/^\/+/, '');
+    }
+  } else {
+    // Ensure leading slash for absolute paths and paths without protocol
+    if (!result.includes('://') && !result.startsWith('/')) {
+      result = '/' + result;
+    }
+  }
+
+  return result;
+}