From ca12e799df51a1973657d0081f192cee7341d2c8 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Tue, 8 Apr 2025 14:22:48 +0200
Subject: [PATCH 1/3] feat: enhance activity completion handling and tooltip
 functionality

---
 .../activity/[activityid]/activity.tsx        | 50 ++++++++----
 .../activity/[activityid]/page.tsx            |  2 +-
 .../StyledElements/Tooltip/Tooltip.tsx        | 13 ++++
 .../Pages/Courses/ActivityIndicators.tsx      | 76 ++++++++++++++++++-
 4 files changed, 121 insertions(+), 20 deletions(-)

diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
index 1752862e..6ae554ff 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
@@ -260,14 +260,26 @@ export function MarkStatus(props: {
   const router = useRouter()
   const session = useLHSession() as any;
   const isMobile = useMediaQuery('(max-width: 768px)')
+  const [isLoading, setIsLoading] = React.useState(false);
+
   async function markActivityAsCompleteFront() {
-    const trail = await markActivityAsComplete(
-      props.orgslug,
-      props.course.course_uuid,
-      props.activity.activity_uuid,
-      session.data?.tokens?.access_token
-    )
-    router.refresh()
+    try {
+      setIsLoading(true);
+      const trail = await markActivityAsComplete(
+        props.orgslug,
+        props.course.course_uuid,
+        props.activity.activity_uuid,
+        session.data?.tokens?.access_token
+      );
+      
+      // Mutate the course data to trigger re-render
+      await mutate(`${getAPIUrl()}courses/${props.course.course_uuid}/meta`);
+      router.refresh();
+    } catch (error) {
+      toast.error('Failed to mark activity as complete');
+    } finally {
+      setIsLoading(false);
+    }
   }
 
   const isActivityCompleted = () => {
@@ -284,7 +296,7 @@ export function MarkStatus(props: {
   return (
     <>
       {isActivityCompleted() ? (
-        <div className="bg-teal-600 rounded-full px-5 drop-shadow-md flex items-center space-x-2  p-2.5  text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out">
+        <div className="bg-teal-600 rounded-full px-5 drop-shadow-md flex items-center space-x-2 p-2.5 text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out">
           <i>
             <Check size={17}></Check>
           </i>{' '}
@@ -292,14 +304,22 @@ export function MarkStatus(props: {
         </div>
       ) : (
         <div
-          className="bg-gray-800 rounded-full px-5 drop-shadow-md flex  items-center space-x-2 p-2.5  text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out"
-          onClick={markActivityAsCompleteFront}
+          className={`${isLoading ? 'opacity-75 cursor-not-allowed' : ''} bg-gray-800 rounded-full px-5 drop-shadow-md flex items-center space-x-2 p-2.5 text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out`}
+          onClick={!isLoading ? markActivityAsCompleteFront : undefined}
         >
-          {' '}
-          <i>
-            <Check size={17}></Check>
-          </i>{' '}
-          {!isMobile && <i className="not-italic text-xs font-bold">Mark as complete</i>}
+          {isLoading ? (
+            <div className="animate-spin">
+              <svg className="w-4 h-4" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"></circle>
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+            </div>
+          ) : (
+            <i>
+              <Check size={17}></Check>
+            </i>
+          )}{' '}
+          {!isMobile && <i className="not-italic text-xs font-bold">{isLoading ? 'Marking...' : 'Mark as complete'}</i>}
         </div>
       )}
     </>
diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/page.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/page.tsx
index d8341cd7..470251d0 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/page.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/page.tsx
@@ -21,7 +21,7 @@ type Session = {
 async function fetchCourseMetadata(courseuuid: string, access_token: string | null | undefined) {
   return await getCourseMetadata(
     courseuuid,
-    { revalidate: 1800, tags: ['courses'] },
+    { revalidate: 0, tags: ['courses'] },
     access_token || null
   )
 }
diff --git a/apps/web/components/Objects/StyledElements/Tooltip/Tooltip.tsx b/apps/web/components/Objects/StyledElements/Tooltip/Tooltip.tsx
index 91495910..173f804f 100644
--- a/apps/web/components/Objects/StyledElements/Tooltip/Tooltip.tsx
+++ b/apps/web/components/Objects/StyledElements/Tooltip/Tooltip.tsx
@@ -9,6 +9,7 @@ type TooltipProps = {
   children: React.ReactNode
   side?: 'top' | 'right' | 'bottom' | 'left' // default is bottom
   slateBlack?: boolean
+  unstyled?: boolean // new prop to remove default styling
 }
 
 const ToolTip = (props: TooltipProps) => {
@@ -19,6 +20,7 @@ const ToolTip = (props: TooltipProps) => {
         <Tooltip.Portal>
           <TooltipContent
             slateBlack={props.slateBlack}
+            unstyled={props.unstyled}
             side={props.side ? props.side : 'bottom'}
             sideOffset={props.sideOffset}
           >
@@ -63,6 +65,17 @@ const TooltipContent = styled(Tooltip.Content, {
         color: 'white',
       },
     },
+    unstyled: {
+      true: {
+        padding: 0,
+        backgroundColor: 'transparent',
+        boxShadow: 'none',
+        borderRadius: 0,
+        fontSize: 'inherit',
+        lineHeight: 'inherit',
+        color: 'inherit',
+      },
+    },
   },
 
   borderRadius: 4,
diff --git a/apps/web/components/Pages/Courses/ActivityIndicators.tsx b/apps/web/components/Pages/Courses/ActivityIndicators.tsx
index 230624c8..13482de8 100644
--- a/apps/web/components/Pages/Courses/ActivityIndicators.tsx
+++ b/apps/web/components/Pages/Courses/ActivityIndicators.tsx
@@ -2,6 +2,7 @@ import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
 import { getUriWithOrg } from '@services/config/config'
 import Link from 'next/link'
 import React from 'react'
+import { Video, FileText, Layers, BookOpenCheck, Check } from 'lucide-react'
 
 interface Props {
   course: any
@@ -16,7 +17,7 @@ function ActivityIndicators(props: Props) {
   const courseid = props.course_uuid.replace('course_', '')
 
   const done_activity_style = 'bg-teal-600 hover:bg-teal-700'
-  const black_activity_style = 'bg-black hover:bg-gray-700'
+  const black_activity_style = 'bg-zinc-300 hover:bg-zinc-400'
   const current_activity_style = 'bg-gray-600 animate-pulse hover:bg-gray-700'
 
   const trail = props.course.trail
@@ -50,6 +51,51 @@ function ActivityIndicators(props: Props) {
     return black_activity_style
   }
 
+  const getActivityTypeIcon = (activityType: string) => {
+    switch (activityType) {
+      case 'TYPE_VIDEO':
+        return <Video size={16} className="text-gray-400" />
+      case 'TYPE_DOCUMENT':
+        return <FileText size={16} className="text-gray-400" />
+      case 'TYPE_DYNAMIC':
+        return <Layers size={16} className="text-gray-400" />
+      case 'TYPE_ASSIGNMENT':
+        return <BookOpenCheck size={16} className="text-gray-400" />
+      default:
+        return <FileText size={16} className="text-gray-400" />
+    }
+  }
+
+  const getActivityTypeLabel = (activityType: string) => {
+    switch (activityType) {
+      case 'TYPE_VIDEO':
+        return 'Video'
+      case 'TYPE_DOCUMENT':
+        return 'Document'
+      case 'TYPE_DYNAMIC':
+        return 'Page'
+      case 'TYPE_ASSIGNMENT':
+        return 'Assignment'
+      default:
+        return 'Learning Material'
+    }
+  }
+
+  const getActivityTypeBadgeColor = (activityType: string) => {
+    switch (activityType) {
+      case 'TYPE_VIDEO':
+        return 'bg-blue-50 text-blue-600 font-bold'
+      case 'TYPE_DOCUMENT':
+        return 'bg-orange-50 text-orange-600 font-bold'
+      case 'TYPE_DYNAMIC':
+        return 'bg-purple-50 text-purple-600 font-bold'
+      case 'TYPE_ASSIGNMENT':
+        return 'bg-green-50 text-green-600 font-bold'
+      default:
+        return 'bg-gray-50 text-gray-600 font-bold'
+    }
+  }
+
   return (
     <div className="grid grid-flow-col justify-stretch space-x-6">
       {course.chapters.map((chapter: any) => {
@@ -57,11 +103,33 @@ function ActivityIndicators(props: Props) {
           <React.Fragment key={chapter.id || `chapter-${chapter.name}`}>
             <div className="grid grid-flow-col justify-stretch space-x-2">
               {chapter.activities.map((activity: any) => {
+                const isDone = isActivityDone(activity)
+                const isCurrent = isActivityCurrent(activity)
                 return (
                   <ToolTip
                     sideOffset={8}
-                    slateBlack
-                    content={activity.name}
+                    unstyled
+                    content={
+                      <div className="bg-white rounded-lg nice-shadow py-3 px-4 min-w-[200px] animate-in fade-in duration-200">
+                        <div className="flex items-center gap-2">
+                          {getActivityTypeIcon(activity.activity_type)}
+                          <span className="text-sm text-gray-700">{activity.name}</span>
+                          {isDone && (
+                            <span className="ml-auto text-gray-400">
+                              <Check size={14} />
+                            </span>
+                          )}
+                        </div>
+                        <div className="flex items-center gap-2 mt-2">
+                          <span className={`text-xs px-2 py-0.5 rounded-full ${getActivityTypeBadgeColor(activity.activity_type)}`}>
+                            {getActivityTypeLabel(activity.activity_type)}
+                          </span>
+                          <span className="text-xs text-gray-400">
+                            {isCurrent ? 'Current Activity' : isDone ? 'Completed' : 'Not Started'}
+                          </span>
+                        </div>
+                      </div>
+                    }
                     key={activity.activity_uuid}
                   >
                     <Link
@@ -77,7 +145,7 @@ function ActivityIndicators(props: Props) {
                       <div
                         className={`h-[7px] w-auto ${getActivityClass(
                           activity
-                        )} rounded-lg shadow-md`}
+                        )} rounded-lg`}
                       ></div>
                     </Link>
                   </ToolTip>

From b40ddde2c281b563eafb527e0a4ce986c307062e Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Tue, 8 Apr 2025 15:44:13 +0200
Subject: [PATCH 2/3] feat: enhance course page and indicators

---
 .../(withmenu)/course/[courseuuid]/course.tsx | 255 ++++-----
 .../Courses/CourseActions/CoursesActions.tsx  | 513 ++++++++----------
 .../Courses/CourseAuthors/CourseAuthors.tsx   | 410 ++++++++++++++
 .../Courses/CourseProgress/CourseProgress.tsx | 122 +++++
 .../Objects/StyledElements/Form/Form.tsx      |  18 +-
 .../Pages/Courses/ActivityIndicators.tsx      |  10 +-
 6 files changed, 895 insertions(+), 433 deletions(-)
 create mode 100644 apps/web/components/Objects/Courses/CourseAuthors/CourseAuthors.tsx
 create mode 100644 apps/web/components/Objects/Courses/CourseProgress/CourseProgress.tsx

diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
index 716a5e1a..236415c3 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/course.tsx
@@ -9,16 +9,14 @@ import { useRouter } from 'next/navigation'
 import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
 import {
   getCourseThumbnailMediaDirectory,
-  getUserAvatarMediaDirectory,
 } from '@services/media/media'
-import { ArrowRight, Backpack, Check, File, Sparkles, Video } from 'lucide-react'
+import { ArrowRight, Backpack, Check, File, Sparkles, StickyNote, Video, Square } from 'lucide-react'
 import { useOrg } from '@components/Contexts/OrgContext'
-import UserAvatar from '@components/Objects/UserAvatar'
-import CourseUpdates from '@components/Objects/Courses/CourseUpdates/CourseUpdates'
 import { CourseProvider } from '@components/Contexts/CourseContext'
 import { useMediaQuery } from 'usehooks-ts'
 import CoursesActions from '@components/Objects/Courses/CourseActions/CoursesActions'
 import CourseActionsMobile from '@components/Objects/Courses/CourseActions/CourseActionsMobile'
+import CourseAuthors from '@components/Objects/Courses/CourseAuthors/CourseAuthors'
 
 const CourseClient = (props: any) => {
   const [learnings, setLearnings] = useState<any>([])
@@ -64,6 +62,54 @@ const CourseClient = (props: any) => {
     getLearningTags()
   }, [org, course])
 
+  const getActivityTypeLabel = (activityType: string) => {
+    switch (activityType) {
+      case 'TYPE_VIDEO':
+        return 'Video'
+      case 'TYPE_DOCUMENT':
+        return 'Document'
+      case 'TYPE_DYNAMIC':
+        return 'Page'
+      case 'TYPE_ASSIGNMENT':
+        return 'Assignment'
+      default:
+        return 'Learning Material'
+    }
+  }
+
+  const getActivityTypeBadgeColor = (activityType: string) => {
+    switch (activityType) {
+      case 'TYPE_VIDEO':
+        return 'bg-neutral-100 text-neutral-500'
+      case 'TYPE_DOCUMENT':
+        return 'bg-neutral-100 text-neutral-500'
+      case 'TYPE_DYNAMIC':
+        return 'bg-neutral-100 text-neutral-500'
+      case 'TYPE_ASSIGNMENT':
+        return 'bg-neutral-100 text-neutral-500'
+      default:
+        return 'bg-neutral-100 text-neutral-500'
+    }
+  }
+
+  const isActivityDone = (activity: any) => {
+    const run = course?.trail?.runs?.find(
+      (run: any) => run.course_id == course.id
+    )
+    if (run) {
+      return run.steps.find((step: any) => step.activity_id == activity.id)
+    }
+    return false
+  }
+
+  const isActivityCurrent = (activity: any) => {
+    const activity_uuid = activity.activity_uuid.replace('activity_', '')
+    if (props.current_activity && props.current_activity == activity_uuid) {
+      return true
+    }
+    return false
+  }
+
   return (
     <>
       {!course && !org ? (
@@ -76,11 +122,6 @@ const CourseClient = (props: any) => {
                 <p className="text-md font-bold text-gray-400 pb-2">Course</p>
                 <h1 className="text-3xl md:text-3xl -mt-3 font-bold">{course.name}</h1>
               </div>
-              <div className="mt-4 md:mt-0">
-                {!isMobile && <CourseProvider courseuuid={course.course_uuid}>
-                  <CourseUpdates />
-                </CourseProvider>}
-              </div>
             </div>
 
             {props.course?.thumbnail_image && org ? (
@@ -195,147 +236,59 @@ const CourseClient = (props: any) => {
                             {chapter.activities.map((activity: any) => {
                               return (
                                 <div key={activity.activity_uuid} className="activity-container">
-                                  <p className="flex text-md"></p>
-                                  <div className="flex space-x-1 py-2 px-4 items-center">
-                                    <div className="courseicon items-center flex space-x-2 text-neutral-400">
-                                      {activity.activity_type ===
-                                        'TYPE_DYNAMIC' && (
-                                          <div className="bg-gray-100 px-2 py-2 rounded-full">
-                                            <Sparkles
-                                              className="text-gray-400"
-                                              size={13}
-                                            />
+                                  <div className="group hover:bg-neutral-50 transition-colors  px-4 py-3">
+                                    <div className="flex space-x-3 items-center">
+                                      <div className="flex items-center">
+                                        {isActivityDone(activity) ? (
+                                          <div className="relative cursor-pointer">
+                                            <Square size={18} className="stroke-[2] text-teal-600" />
+                                            <Check size={18} className="stroke-[2.5] text-teal-600 absolute top-0 left-0" />
+                                          </div>
+                                        ) : (
+                                          <div className="text-neutral-300 cursor-pointer">
+                                            <Square size={18} className="stroke-[2]" />
                                           </div>
                                         )}
-                                      {activity.activity_type === 'TYPE_VIDEO' && (
-                                        <div className="bg-gray-100 px-2 py-2 rounded-full">
-                                          <Video
-                                            className="text-gray-400"
-                                            size={13}
-                                          />
-                                        </div>
-                                      )}
-                                      {activity.activity_type ===
-                                        'TYPE_DOCUMENT' && (
-                                          <div className="bg-gray-100 px-2 py-2 rounded-full">
-                                            <File
-                                              className="text-gray-400"
-                                              size={13}
-                                            />
-                                          </div>
-                                        )}
-                                      {activity.activity_type ===
-                                        'TYPE_ASSIGNMENT' && (
-                                          <div className="bg-gray-100 px-2 py-2 rounded-full">
-                                            <Backpack
-                                              className="text-gray-400"
-                                              size={13}
-                                            />
-                                          </div>
-                                        )}
-                                    </div>
-                                    <Link
-                                      className="flex font-semibold grow pl-2 text-neutral-500"
-                                      href={
-                                        getUriWithOrg(orgslug, '') +
-                                        `/course/${courseuuid}/activity/${activity.activity_uuid.replace(
-                                          'activity_',
-                                          ''
-                                        )}`
-                                      }
-                                      rel="noopener noreferrer"
-                                      prefetch={false}
-                                    >
-                                      <p>{activity.name}</p>
-                                    </Link>
-                                    <div className="flex ">
-                                      {activity.activity_type ===
-                                        'TYPE_DYNAMIC' && (
-                                          <div>
-                                            <Link
-                                              className="flex grow pl-2 text-gray-500"
-                                              href={
-                                                getUriWithOrg(orgslug, '') +
-                                                `/course/${courseuuid}/activity/${activity.activity_uuid.replace(
-                                                  'activity_',
-                                                  ''
-                                                )}`
-                                              }
-                                              rel="noopener noreferrer"
-                                              prefetch={false}
-                                            >
-                                              <div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
-                                                <p>Page</p>
-                                                <ArrowRight size={13} />
-                                              </div>
-                                            </Link>
-                                          </div>
-                                        )}
-                                      {activity.activity_type === 'TYPE_VIDEO' && (
-                                        <div>
-                                          <Link
-                                            className="flex grow pl-2 text-gray-500"
-                                            href={
-                                              getUriWithOrg(orgslug, '') +
-                                              `/course/${courseuuid}/activity/${activity.activity_uuid.replace(
-                                                'activity_',
-                                                ''
-                                              )}`
-                                            }
-                                            rel="noopener noreferrer"
-                                            prefetch={false}
-                                          >
-                                            <div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
-                                              <p>Video</p>
-                                              <ArrowRight size={13} />
+                                      </div>
+                                      <Link
+                                        className="flex flex-col grow"
+                                        href={
+                                          getUriWithOrg(orgslug, '') +
+                                          `/course/${courseuuid}/activity/${activity.activity_uuid.replace(
+                                            'activity_',
+                                            ''
+                                          )}`
+                                        }
+                                        rel="noopener noreferrer"
+                                        prefetch={false}
+                                      >
+                                        <div className="flex items-center space-x-2 w-full">
+                                          <p className="font-semibold text-neutral-600 group-hover:text-neutral-800 transition-colors">{activity.name}</p>
+                                          {isActivityCurrent(activity) && (
+                                            <div className="flex items-center space-x-1 text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full text-xs font-semibold animate-pulse">
+                                              <span>Current</span>
                                             </div>
-                                          </Link>
+                                          )}
                                         </div>
-                                      )}
-                                      {activity.activity_type ===
-                                        'TYPE_DOCUMENT' && (
-                                          <div>
-                                            <Link
-                                              className="flex grow pl-2 text-gray-500"
-                                              href={
-                                                getUriWithOrg(orgslug, '') +
-                                                `/course/${courseuuid}/activity/${activity.activity_uuid.replace(
-                                                  'activity_',
-                                                  ''
-                                                )}`
-                                              }
-                                              rel="noopener noreferrer"
-                                              prefetch={false}
-                                            >
-                                              <div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
-                                                <p>Document</p>
-                                                <ArrowRight size={13} />
-                                              </div>
-                                            </Link>
-                                          </div>
-                                        )}
-                                      {activity.activity_type ===
-                                        'TYPE_ASSIGNMENT' && (
-                                          <div>
-                                            <Link
-                                              className="flex grow pl-2 text-gray-500"
-                                              href={
-                                                getUriWithOrg(orgslug, '') +
-                                                `/course/${courseuuid}/activity/${activity.activity_uuid.replace(
-                                                  'activity_',
-                                                  ''
-                                                )}`
-                                              }
-                                              rel="noopener noreferrer"
-                                              prefetch={false}
-                                            >
-                                              <div className="text-xs bg-gray-100 text-gray-400 font-bold px-2 py-1 rounded-full flex space-x-1 items-center">
-                                                <p>Assignment</p>
-                                                <ArrowRight size={13} />
-                                              </div>
-                                            </Link>
-                                          </div>
-                                        )}
+                                        <div className="flex items-center space-x-1.5 mt-1 text-neutral-400">
+                                          {activity.activity_type === 'TYPE_DYNAMIC' && (
+                                            <StickyNote size={11} />
+                                          )}
+                                          {activity.activity_type === 'TYPE_VIDEO' && (
+                                            <Video size={11} />
+                                          )}
+                                          {activity.activity_type === 'TYPE_DOCUMENT' && (
+                                            <File size={11} />
+                                          )}
+                                          {activity.activity_type === 'TYPE_ASSIGNMENT' && (
+                                            <Backpack size={11} />
+                                          )}
+                                          <span className="text-xs font-medium">{getActivityTypeLabel(activity.activity_type)}</span>
+                                        </div>
+                                      </Link>
+                                      <div className="text-neutral-300 group-hover:text-neutral-400 transition-colors cursor-pointer">
+                                        <ArrowRight size={16} />
+                                      </div>
                                     </div>
                                   </div>
                                 </div>
@@ -348,8 +301,16 @@ const CourseClient = (props: any) => {
                   })}
                 </div>
               </div>
-              <div className='course_metadata_right basis-1/4'>
+              <div className='course_metadata_right basis-1/4 space-y-4'>
+                {/* Actions Box */}
                 <CoursesActions courseuuid={courseuuid} orgslug={orgslug} course={course} />
+                
+                {/* Authors & Updates Box */}
+                <div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden p-4">
+                  <CourseProvider courseuuid={course.course_uuid}>
+                    <CourseAuthors authors={course.authors} />
+                  </CourseProvider>
+                </div>
               </div>
             </div>
           </GeneralWrapperStyled>
diff --git a/apps/web/components/Objects/Courses/CourseActions/CoursesActions.tsx b/apps/web/components/Objects/Courses/CourseActions/CoursesActions.tsx
index 49453edb..f2f45b3c 100644
--- a/apps/web/components/Objects/Courses/CourseActions/CoursesActions.tsx
+++ b/apps/web/components/Objects/Courses/CourseActions/CoursesActions.tsx
@@ -1,42 +1,31 @@
 import React, { useState, useEffect } from 'react'
-import UserAvatar from '../../UserAvatar'
-import { getUserAvatarMediaDirectory } from '@services/media/media'
 import { removeCourse, startCourse } from '@services/courses/activity'
 import { revalidateTags } from '@services/utils/ts/requests'
 import { useRouter } from 'next/navigation'
 import { useLHSession } from '@components/Contexts/LHSessionContext'
-import { useMediaQuery } from 'usehooks-ts'
 import { getUriWithOrg, getUriWithoutOrg } from '@services/config/config'
 import { getProductsByCourse } from '@services/payments/products'
-import { LogIn, LogOut, ShoppingCart, AlertCircle, UserPen, ClockIcon } from 'lucide-react'
+import { LogIn, LogOut, ShoppingCart, AlertCircle, UserPen, ClockIcon, ArrowRight, Sparkles, BookOpen } from 'lucide-react'
 import Modal from '@components/Objects/StyledElements/Modal/Modal'
 import CoursePaidOptions from './CoursePaidOptions'
 import { checkPaidAccess } from '@services/payments/payments'
 import { applyForContributor } from '@services/courses/courses'
 import toast from 'react-hot-toast'
 import { useContributorStatus } from '../../../../hooks/useContributorStatus'
-
-interface Author {
-  user: {
-    id: string
-    user_uuid: string
-    avatar_image: string
-    first_name: string
-    last_name: string
-    username: string
-  }
-  authorship: 'CREATOR' | 'CONTRIBUTOR' | 'MAINTAINER' | 'REPORTER'
-  authorship_status: 'ACTIVE' | 'INACTIVE' | 'PENDING'
-}
+import CourseProgress from '../CourseProgress/CourseProgress'
+import UserAvatar from '@components/Objects/UserAvatar'
 
 interface CourseRun {
   status: string
   course_id: string
+  steps: Array<{
+    activity_id: string
+    complete: boolean
+  }>
 }
 
 interface Course {
   id: string
-  authors: Author[]
   trail?: {
     runs: CourseRun[]
   }
@@ -59,137 +48,7 @@ interface CourseActionsProps {
   }
 }
 
-// Separate component for author display
-const AuthorInfo = ({ author, isMobile }: { author: Author, isMobile: boolean }) => (
-  <div className="flex flex-row md:flex-col mx-auto space-y-0 md:space-y-3 space-x-4 md:space-x-0 px-2 py-2 items-center">
-    <UserAvatar
-      border="border-8"
-      avatar_url={author.user.avatar_image ? getUserAvatarMediaDirectory(author.user.user_uuid, author.user.avatar_image) : ''}
-      predefined_avatar={author.user.avatar_image ? undefined : 'empty'}
-      width={isMobile ? 60 : 100}
-      showProfilePopup={true}
-      userId={author.user.user_uuid}
-    />
-    <div className="md:-space-y-2">
-      <div className="text-[12px] text-neutral-400 font-semibold">Author</div>
-      <div className="text-lg md:text-xl font-bold text-neutral-800">
-        {(author.user.first_name && author.user.last_name) ? (
-          <div className="flex space-x-2 items-center">
-            <p>{`${author.user.first_name} ${author.user.last_name}`}</p>
-            <span className="text-xs bg-neutral-100 p-1 px-3 rounded-full text-neutral-400 font-semibold">
-              @{author.user.username}
-            </span>
-          </div>
-        ) : (
-          <div className="flex space-x-2 items-center">
-            <p>@{author.user.username}</p>
-          </div>
-        )}
-      </div>
-    </div>
-  </div>
-)
-
-const MultipleAuthors = ({ authors, isMobile }: { authors: Author[], isMobile: boolean }) => {
-  const displayedAvatars = authors.slice(0, 3)
-  const displayedNames = authors.slice(0, 2)
-  const remainingCount = Math.max(0, authors.length - 3)
-  
-  // Consistent sizes for both avatars and badge
-  const avatarSize = isMobile ? 72 : 86
-  const borderSize = "border-4"
-
-  return (
-    <div className="flex flex-col items-center space-y-4 px-2 py-2">
-      <div className="text-[12px] text-neutral-400 font-semibold self-start">Authors</div>
-      
-      {/* Avatars row */}
-      <div className="flex justify-center -space-x-6 relative">
-        {displayedAvatars.map((author, index) => (
-          <div
-            key={author.user.user_uuid}
-            className="relative"
-            style={{ zIndex: displayedAvatars.length - index }}
-          >
-            <div className="ring-white">
-              <UserAvatar
-                border={borderSize}
-                rounded='rounded-full'
-                avatar_url={author.user.avatar_image ? getUserAvatarMediaDirectory(author.user.user_uuid, author.user.avatar_image) : ''}
-                predefined_avatar={author.user.avatar_image ? undefined : 'empty'}
-                width={avatarSize}
-                showProfilePopup={true}
-                userId={author.user.id}
-              />
-            </div>
-          </div>
-        ))}
-        {remainingCount > 0 && (
-          <div 
-            className="relative"
-            style={{ zIndex: 0 }}
-          >
-            <div 
-              className="flex items-center justify-center bg-neutral-100 text-neutral-600 font-medium rounded-full border-4 border-white shadow-sm"
-              style={{ 
-                width: `${avatarSize}px`, 
-                height: `${avatarSize}px`,
-                fontSize: isMobile ? '14px' : '16px'
-              }}
-            >
-              +{remainingCount}
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Names row - improved display logic */}
-      <div className="text-center mt-2">
-        <div className="text-sm font-medium text-neutral-800">
-          {authors.length === 1 ? (
-            <span>
-              {authors[0].user.first_name && authors[0].user.last_name
-                ? `${authors[0].user.first_name} ${authors[0].user.last_name}`
-                : `@${authors[0].user.username}`}
-            </span>
-          ) : (
-            <>
-              {displayedNames.map((author, index) => (
-                <span key={author.user.user_uuid}>
-                  {author.user.first_name && author.user.last_name
-                    ? `${author.user.first_name} ${author.user.last_name}`
-                    : `@${author.user.username}`}
-                  {index === 0 && authors.length > 1 && index < displayedNames.length - 1 && " & "}
-                </span>
-              ))}
-              {authors.length > 2 && (
-                <span className="text-neutral-500 ml-1">
-                  & {authors.length - 2} more
-                </span>
-              )}
-            </>
-          )}
-        </div>
-        <div className="text-xs text-neutral-500 mt-0.5">
-          {authors.length === 1 ? (
-            <span>@{authors[0].user.username}</span>
-          ) : (
-            <>
-              {displayedNames.map((author, index) => (
-                <span key={author.user.user_uuid}>
-                  @{author.user.username}
-                  {index === 0 && authors.length > 1 && index < displayedNames.length - 1 && " & "}
-                </span>
-              ))}
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
+function CoursesActions({ courseuuid, orgslug, course }: CourseActionsProps) {
   const router = useRouter()
   const session = useLHSession() as any
   const [linkedProducts, setLinkedProducts] = useState<any[]>([])
@@ -198,7 +57,8 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
   const [isContributeLoading, setIsContributeLoading] = useState(false)
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [hasAccess, setHasAccess] = useState<boolean | null>(null)
-  const { contributorStatus, refetch } = useContributorStatus(courseuuid);
+  const { contributorStatus, refetch } = useContributorStatus(courseuuid)
+  const [isProgressOpen, setIsProgressOpen] = useState(false)
 
   const isStarted = course.trail?.runs?.some(
     (run) => run.status === 'STATUS_IN_PROGRESS' && run.course_id === course.id
@@ -321,12 +181,33 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
     }
   }
 
-  if (isLoading) {
-    return <div className="animate-pulse h-20 bg-gray-100 rounded-lg nice-shadow" />
-  }
+  const renderActionButton = (action: 'start' | 'leave') => {
+    if (!session.data?.user) {
+      return (
+        <>
+          <UserAvatar width={24} predefined_avatar="empty" rounded="rounded-full" border="border-2" borderColor="border-white" />
+          <span>{action === 'start' ? 'Start Course' : 'Leave Course'}</span>
+          <ArrowRight className="w-5 h-5" />
+        </>
+      );
+    }
+
+    return (
+      <>
+        <UserAvatar 
+          width={24} 
+          use_with_session={true} 
+          rounded="rounded-full" 
+          border="border-2" 
+          borderColor="border-white"
+        />
+        <span>{action === 'start' ? 'Start Course' : 'Leave Course'}</span>
+        <ArrowRight className="w-5 h-5" />
+      </>
+    );
+  };
 
   const renderContributorButton = () => {
-    // Don't render anything if the course is not open to contributors or if the user status is INACTIVE
     if (contributorStatus === 'INACTIVE' || course.open_to_contributors !== true) {
       return null;
     }
@@ -379,139 +260,219 @@ const Actions = ({ courseuuid, orgslug, course }: CourseActionsProps) => {
     );
   };
 
+  const renderProgressSection = () => {
+    const totalActivities = course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 0;
+    const completedActivities = course.trail?.runs?.find(
+      (run: CourseRun) => run.course_id === course.id
+    )?.steps?.filter((step) => step.complete)?.length || 0;
+    
+    const progressPercentage = Math.round((completedActivities / totalActivities) * 100);
+
+    if (!isStarted) {
+      return (
+        <div className="relative bg-white nice-shadow rounded-lg overflow-hidden">
+          <div 
+            className="absolute inset-0 opacity-[0.05]" 
+            style={{
+              backgroundImage: 'radial-gradient(circle at center, #101010 1px, transparent 1px)',
+              backgroundSize: '12px 12px'
+            }}
+          />
+          <div className="relative p-4">
+            <div className="flex items-center gap-4">
+              <div className="flex-1">
+                <div className="flex items-center gap-4">
+                  <div className="relative w-16 h-16">
+                    <svg className="w-full h-full transform -rotate-90">
+                      <circle
+                        cx="32"
+                        cy="32"
+                        r="28"
+                        stroke="#e5e7eb"
+                        strokeWidth="6"
+                        fill="none"
+                      />
+                    </svg>
+                    <div className="absolute inset-0 flex items-center justify-center">
+                      <BookOpen className="w-6 h-6 text-neutral-400" />
+                    </div>
+                  </div>
+                  <div className="flex-1">
+                    <div className="text-sm font-medium text-gray-900">Ready to Begin?</div>
+                    <div className="text-sm text-gray-500">
+                      Start your learning journey with {totalActivities} exciting {totalActivities === 1 ? 'activity' : 'activities'}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+        <div className="relative bg-white nice-shadow rounded-lg overflow-hidden">
+          <div 
+          className="absolute inset-0 opacity-[0.05]" 
+          style={{
+            backgroundImage: 'radial-gradient(circle at center, #000 1px, transparent 1px)',
+            backgroundSize: '24px 24px'
+          }}
+        />
+        <div className="relative p-4">
+          <div className="flex items-center gap-4">
+            <div className="flex-1">
+              <div className="flex items-center gap-4">
+                <div className="relative w-16 h-16">
+                  <svg className="w-full h-full transform -rotate-90">
+                    <circle
+                      cx="32"
+                      cy="32"
+                      r="28"
+                      stroke="#e5e7eb"
+                      strokeWidth="6"
+                      fill="none"
+                    />
+                    <circle
+                      cx="32"
+                      cy="32"
+                      r="28"
+                      stroke="#10b981"
+                      strokeWidth="6"
+                      fill="none"
+                      strokeLinecap="round"
+                      strokeDasharray={2 * Math.PI * 28}
+                      strokeDashoffset={2 * Math.PI * 28 * (1 - completedActivities / totalActivities)}
+                      className="transition-all duration-500 ease-out"
+                    />
+                  </svg>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    <span className="text-lg font-bold text-gray-800">
+                      {progressPercentage}%
+                    </span>
+                  </div>
+                </div>
+                <button
+                  onClick={() => setIsProgressOpen(true)}
+                  className="flex-1 text-left hover:bg-neutral-50/50 p-2 rounded-lg transition-colors"
+                >
+                  <div className="text-sm font-medium text-gray-900">Course Progress</div>
+                  <div className="text-sm text-gray-500">
+                    {completedActivities} of {totalActivities} completed
+                  </div>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  if (isLoading) {
+    return <div className="animate-pulse h-20 bg-gray-100 rounded-lg nice-shadow" />
+  }
+
   if (linkedProducts.length > 0) {
     return (
-      <div className="space-y-4">
-        {hasAccess ? (
-          <>
-            <div className="p-4 bg-green-50 border border-green-200 rounded-lg nice-shadow">
-              <div className="flex items-center gap-3">
-                <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
-                <h3 className="text-green-800 font-semibold">You Own This Course</h3>
+      <div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden p-4">
+        <div className="space-y-4">
+          {hasAccess ? (
+            <>
+              <div className="p-4 bg-green-50 border border-green-200 rounded-lg nice-shadow">
+                <div className="flex items-center gap-3">
+                  <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+                  <h3 className="text-green-800 font-semibold">You Own This Course</h3>
+                </div>
+                <p className="text-green-700 text-sm mt-1">
+                  You have purchased this course and have full access to all content.
+                </p>
               </div>
-              <p className="text-green-700 text-sm mt-1">
-                You have purchased this course and have full access to all content.
-              </p>
-            </div>
-            <button
-              onClick={handleCourseAction}
-              disabled={isActionLoading}
-              className={`w-full py-3 rounded-lg nice-shadow font-semibold transition-colors flex items-center justify-center gap-2 cursor-pointer ${
-                isStarted
-                  ? 'bg-red-500 text-white hover:bg-red-600 disabled:bg-red-400'
-                  : 'bg-neutral-900 text-white hover:bg-neutral-800 disabled:bg-neutral-700'
-              }`}
-            >
-              {isActionLoading ? (
-                <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
-              ) : isStarted ? (
-                <>
-                  <LogOut className="w-5 h-5" />
-                  Leave Course
-                </>
-              ) : (
-                <>
-                  <LogIn className="w-5 h-5" />
-                  Start Course
-                </>
-              )}
-            </button>
-            {renderContributorButton()}
-          </>
-        ) : (
-          <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg nice-shadow">
-            <div className="flex items-center gap-3">
-              <AlertCircle className="w-5 h-5 text-amber-800" />
-              <h3 className="text-amber-800 font-semibold">Paid Course</h3>
-            </div>
-            <p className="text-amber-700 text-sm mt-1">
-              This course requires purchase to access its content.
-            </p>
-          </div>
-        )}
-        
-        {!hasAccess && (
-          <>
-            <Modal
-              isDialogOpen={isModalOpen}
-              onOpenChange={setIsModalOpen}
-              dialogContent={<CoursePaidOptions course={course} />}
-              dialogTitle="Purchase Course"
-              dialogDescription="Select a payment option to access this course"
-              minWidth="sm"
-            />
-            <button
-              className="w-full bg-neutral-900 text-white py-3 rounded-lg nice-shadow font-semibold hover:bg-neutral-800 transition-colors flex items-center justify-center gap-2"
-              onClick={() => setIsModalOpen(true)}
-            >
-              <ShoppingCart className="w-5 h-5" />
-              Purchase Course
-            </button>
-            {renderContributorButton()}
-          </>
-        )}
+              <button
+                onClick={handleCourseAction}
+                disabled={isActionLoading}
+                className={`w-full py-3 rounded-lg nice-shadow font-semibold transition-colors flex items-center justify-center gap-2 cursor-pointer ${
+                  isStarted
+                    ? 'bg-red-500 text-white hover:bg-red-600 disabled:bg-red-400'
+                    : 'bg-neutral-900 text-white hover:bg-neutral-800 disabled:bg-neutral-700'
+                }`}
+              >
+                {isActionLoading ? (
+                  <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                ) : (
+                  renderActionButton(isStarted ? 'leave' : 'start')
+                )}
+              </button>
+              {renderContributorButton()}
+            </>
+          ) : (
+            <>
+              <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg nice-shadow">
+                <div className="flex items-center gap-3">
+                  <AlertCircle className="w-5 h-5 text-amber-800" />
+                  <h3 className="text-amber-800 font-semibold">Paid Course</h3>
+                </div>
+                <p className="text-amber-700 text-sm mt-1">
+                  This course requires purchase to access its content.
+                </p>
+              </div>
+              <Modal
+                isDialogOpen={isModalOpen}
+                onOpenChange={setIsModalOpen}
+                dialogContent={<CoursePaidOptions course={course} />}
+                dialogTitle="Purchase Course"
+                dialogDescription="Select a payment option to access this course"
+                minWidth="sm"
+              />
+              <button
+                className="w-full bg-neutral-900 text-white py-3 rounded-lg nice-shadow font-semibold hover:bg-neutral-800 transition-colors flex items-center justify-center gap-2"
+                onClick={() => setIsModalOpen(true)}
+              >
+                <ShoppingCart className="w-5 h-5" />
+                Purchase Course
+              </button>
+              {renderContributorButton()}
+            </>
+          )}
+        </div>
       </div>
     )
   }
 
   return (
-    <div className="space-y-4">
-      <button
-        onClick={handleCourseAction}
-        disabled={isActionLoading}
-        className={`w-full py-3 rounded-lg nice-shadow font-semibold transition-colors flex items-center justify-center gap-2 cursor-pointer ${
-          isStarted
-            ? 'bg-red-500 text-white hover:bg-red-600 disabled:bg-red-400'
-            : 'bg-neutral-900 text-white hover:bg-neutral-800 disabled:bg-neutral-700'
-        }`}
-      >
-        {isActionLoading ? (
-          <div className="w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin" />
-        ) : !session.data?.user ? (
-          <>
-            <LogIn className="w-5 h-5" />
-            Authenticate to start course
-          </>
-        ) : isStarted ? (
-          <>
-            <LogOut className="w-5 h-5" />
-            Leave Course
-          </>
-        ) : (
-          <>
-            <LogIn className="w-5 h-5" />
-            Start Course
-          </>
-        )}
-      </button>
-      {renderContributorButton()}
-    </div>
-  )
-}
+    <div className="bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden p-4">
+      <div className="space-y-4">
+        {/* Progress Section */}
+        {renderProgressSection()}
 
-function CoursesActions({ courseuuid, orgslug, course }: CourseActionsProps) {
-  const router = useRouter()
-  const session = useLHSession() as any
-  const isMobile = useMediaQuery('(max-width: 768px)')
+        {/* Start/Leave Course Button */}
+        <button
+          onClick={handleCourseAction}
+          disabled={isActionLoading}
+          className={`w-full py-3 rounded-lg nice-shadow font-semibold transition-colors flex items-center justify-center gap-2 cursor-pointer ${
+            isStarted
+              ? 'bg-red-500 text-white hover:bg-red-600 disabled:bg-red-400'
+              : 'bg-neutral-900 text-white hover:bg-neutral-800 disabled:bg-neutral-700'
+          }`}
+        >
+          {isActionLoading ? (
+            <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+          ) : (
+            renderActionButton(isStarted ? 'leave' : 'start')
+          )}
+        </button>
 
-  // Filter active authors and sort by role priority
-  const sortedAuthors = [...course.authors]
-    .filter(author => author.authorship_status === 'ACTIVE')
-    .sort((a, b) => {
-      const rolePriority: Record<string, number> = {
-        'CREATOR': 0,
-        'MAINTAINER': 1,
-        'CONTRIBUTOR': 2,
-        'REPORTER': 3
-      };
-      return rolePriority[a.authorship] - rolePriority[b.authorship];
-    });
+        {/* Contributor Button */}
+        {renderContributorButton()}
 
-  return (
-    <div className="space-y-3 antialiased flex flex-col p-3 py-5 bg-white shadow-md shadow-gray-300/25 outline outline-1 outline-neutral-200/40 rounded-lg overflow-hidden">
-      <MultipleAuthors authors={sortedAuthors} isMobile={isMobile} />
-      <div className='px-3 py-2'>
-        <Actions courseuuid={courseuuid} orgslug={orgslug} course={course} />
+        {/* Course Progress Modal */}
+        <CourseProgress
+          course={course}
+          orgslug={orgslug}
+          isOpen={isProgressOpen}
+          onClose={() => setIsProgressOpen(false)}
+        />
       </div>
     </div>
   )
diff --git a/apps/web/components/Objects/Courses/CourseAuthors/CourseAuthors.tsx b/apps/web/components/Objects/Courses/CourseAuthors/CourseAuthors.tsx
new file mode 100644
index 00000000..1ed560df
--- /dev/null
+++ b/apps/web/components/Objects/Courses/CourseAuthors/CourseAuthors.tsx
@@ -0,0 +1,410 @@
+import React, { useState } from 'react'
+import UserAvatar from '../../UserAvatar'
+import { getUserAvatarMediaDirectory } from '@services/media/media'
+import { useMediaQuery } from 'usehooks-ts'
+import { Rss, PencilLine, TentTree } from 'lucide-react'
+import { useCourse } from '@components/Contexts/CourseContext'
+import { useLHSession } from '@components/Contexts/LHSessionContext'
+import useSWR, { mutate } from 'swr'
+import { getAPIUrl } from '@services/config/config'
+import { swrFetcher } from '@services/utils/ts/requests'
+import useAdminStatus from '@components/Hooks/useAdminStatus'
+import { useOrg } from '@components/Contexts/OrgContext'
+import { createCourseUpdate, deleteCourseUpdate } from '@services/courses/updates'
+import toast from 'react-hot-toast'
+import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import * as Form from '@radix-ui/react-form'
+import FormLayout, {
+  FormField,
+  FormLabelAndMessage,
+  Input,
+  Textarea,
+} from '@components/Objects/StyledElements/Form/Form'
+import { useFormik } from 'formik'
+import { motion } from 'framer-motion'
+
+dayjs.extend(relativeTime)
+
+interface Author {
+  user: {
+    id: string
+    user_uuid: string
+    avatar_image: string
+    first_name: string
+    last_name: string
+    username: string
+  }
+  authorship: 'CREATOR' | 'CONTRIBUTOR' | 'MAINTAINER' | 'REPORTER'
+  authorship_status: 'ACTIVE' | 'INACTIVE' | 'PENDING'
+}
+
+interface CourseAuthorsProps {
+  authors: Author[]
+}
+
+const MultipleAuthors = ({ authors, isMobile }: { authors: Author[], isMobile: boolean }) => {
+  const displayedAvatars = authors.slice(0, 3)
+  const displayedNames = authors.slice(0, 2)
+  const remainingCount = Math.max(0, authors.length - 3)
+  
+  // Consistent sizes for both avatars and badge
+  const avatarSize = isMobile ? 72 : 86
+  const borderSize = "border-4"
+
+  return (
+    <div className="flex flex-col items-center space-y-4 px-2 py-2">
+      <div className="text-[12px] text-neutral-400 font-semibold self-start">Authors & Updates </div>
+      
+      {/* Avatars row */}
+      <div className="flex justify-center -space-x-6 relative">
+        {displayedAvatars.map((author, index) => (
+          <div
+            key={author.user.user_uuid}
+            className="relative"
+            style={{ zIndex: displayedAvatars.length - index }}
+          >
+            <div className="ring-white">
+              <UserAvatar
+                border={borderSize}
+                rounded='rounded-full'
+                avatar_url={author.user.avatar_image ? getUserAvatarMediaDirectory(author.user.user_uuid, author.user.avatar_image) : ''}
+                predefined_avatar={author.user.avatar_image ? undefined : 'empty'}
+                width={avatarSize}
+                showProfilePopup={true}
+                userId={author.user.id}
+              />
+            </div>
+          </div>
+        ))}
+        {remainingCount > 0 && (
+          <div 
+            className="relative"
+            style={{ zIndex: 0 }}
+          >
+            <div 
+              className="flex items-center justify-center bg-neutral-100 text-neutral-600 font-medium rounded-full border-4 border-white shadow-sm"
+              style={{ 
+                width: `${avatarSize}px`, 
+                height: `${avatarSize}px`,
+                fontSize: isMobile ? '14px' : '16px'
+              }}
+            >
+              +{remainingCount}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Names row - improved display logic */}
+      <div className="text-center mt-2">
+        <div className="text-sm font-medium text-neutral-800">
+          {authors.length === 1 ? (
+            <span>
+              {authors[0].user.first_name && authors[0].user.last_name
+                ? `${authors[0].user.first_name} ${authors[0].user.last_name}`
+                : `@${authors[0].user.username}`}
+            </span>
+          ) : (
+            <>
+              {displayedNames.map((author, index) => (
+                <span key={author.user.user_uuid}>
+                  {author.user.first_name && author.user.last_name
+                    ? `${author.user.first_name} ${author.user.last_name}`
+                    : `@${author.user.username}`}
+                  {index === 0 && authors.length > 1 && index < displayedNames.length - 1 && " & "}
+                </span>
+              ))}
+              {authors.length > 2 && (
+                <span className="text-neutral-500 ml-1">
+                  & {authors.length - 2} more
+                </span>
+              )}
+            </>
+          )}
+        </div>
+        <div className="text-xs text-neutral-500 mt-0.5">
+          {authors.length === 1 ? (
+            <span>@{authors[0].user.username}</span>
+          ) : (
+            <>
+              {displayedNames.map((author, index) => (
+                <span key={author.user.user_uuid}>
+                  @{author.user.username}
+                  {index === 0 && authors.length > 1 && index < displayedNames.length - 1 && " & "}
+                </span>
+              ))}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const UpdatesSection = () => {
+  const [selectedView, setSelectedView] = React.useState('list')
+  const adminStatus = useAdminStatus()
+  const course = useCourse() as any
+  const session = useLHSession() as any
+  const access_token = session?.data?.tokens?.access_token
+  const { data: updates } = useSWR(
+    `${getAPIUrl()}courses/${course?.courseStructure.course_uuid}/updates`,
+    (url) => swrFetcher(url, access_token)
+  )
+
+  return (
+    <div className="mt-2 pt-2">
+      <div className="flex justify-between items-center mb-4">
+        <div className="flex items-center space-x-3">
+          <div className="flex items-center space-x-2">
+            <Rss size={14} className="text-neutral-400" />
+            <span className="text-sm font-semibold text-neutral-600">Course Updates</span>
+          </div>
+          {updates && updates.length > 0 && (
+            <span className="px-2 py-0.5 text-[11px] font-medium bg-neutral-100 text-neutral-500 rounded-full">
+              {updates.length} {updates.length === 1 ? 'update' : 'updates'}
+            </span>
+          )}
+        </div>
+        {adminStatus.isAdmin && (
+          <button
+            onClick={() => setSelectedView(selectedView === 'new' ? 'list' : 'new')}
+            className={`
+              inline-flex items-center space-x-1.5 px-2.5 py-1 rounded-full text-xs font-medium
+              transition-colors duration-150
+              ${selectedView === 'new' 
+                ? 'bg-neutral-200 text-neutral-700 hover:bg-neutral-300' 
+                : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
+              }
+            `}
+          >
+            <PencilLine size={12} />
+            <span>{selectedView === 'new' ? 'Cancel' : 'New Update'}</span>
+          </button>
+        )}
+      </div>
+      
+      <motion.div
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.2 }}
+        className="relative"
+      >
+        <div className="max-h-[300px] overflow-y-auto pr-1 -mr-1">
+          {selectedView === 'list' ? (
+            <UpdatesListView />
+          ) : (
+            <NewUpdateForm setSelectedView={setSelectedView} />
+          )}
+        </div>
+      </motion.div>
+    </div>
+  )
+}
+
+const NewUpdateForm = ({ setSelectedView }: { setSelectedView: (view: string) => void }) => {
+  const org = useOrg() as any
+  const course = useCourse() as any
+  const session = useLHSession() as any
+
+  const formik = useFormik({
+    initialValues: {
+      title: '',
+      content: ''
+    },
+    validate: (values) => {
+      const errors: any = {}
+      if (!values.title) errors.title = 'Title is required'
+      if (!values.content) errors.content = 'Content is required'
+      return errors
+    },
+    onSubmit: async (values) => {
+      const body = {
+        title: values.title,
+        content: values.content,
+        course_uuid: course.courseStructure.course_uuid,
+        org_id: org.id
+      }
+      const res = await createCourseUpdate(body, session.data?.tokens?.access_token)
+      if (res.status === 200) {
+        toast.success('Update added successfully')
+        setSelectedView('list')
+        mutate(`${getAPIUrl()}courses/${course?.courseStructure.course_uuid}/updates`)
+      } else {
+        toast.error('Failed to add update')
+      }
+    }
+  })
+
+  return (
+    <div className="space-y-4">
+      <FormLayout onSubmit={formik.handleSubmit} className="space-y-4">
+        <FormField name="title">
+          <FormLabelAndMessage
+            label="Update Title"
+            message={formik.errors.title}
+          />
+          <Form.Control asChild>
+            <Input
+              onChange={formik.handleChange}
+              value={formik.values.title}
+              type="text"
+              required
+              placeholder="What's new in this update?"
+              className="bg-white border-neutral-200 focus:border-neutral-300 focus:ring-neutral-200"
+            />
+          </Form.Control>
+        </FormField>
+        <FormField name="content">
+          <FormLabelAndMessage
+            label="Update Content"
+            message={formik.errors.content}
+          />
+          <Form.Control asChild>
+            <Textarea
+              onChange={formik.handleChange}
+              value={formik.values.content}
+              required
+              placeholder="Share the details of your update..."
+              className="bg-white h-[120px] border-neutral-200 focus:border-neutral-300 focus:ring-neutral-200 resize-none"
+            />
+          </Form.Control>
+        </FormField>
+        <div className="flex justify-end space-x-2 pt-2">
+          <button
+            type="submit"
+            className="px-4 py-1.5 bg-neutral-900 hover:bg-black text-white text-xs font-medium rounded-full transition-colors duration-150"
+          >
+            Publish Update
+          </button>
+        </div>
+      </FormLayout>
+    </div>
+  )
+}
+
+const UpdatesListView = () => {
+  const course = useCourse() as any
+  const adminStatus = useAdminStatus()
+  const session = useLHSession() as any
+  const access_token = session?.data?.tokens?.access_token
+  const { data: updates } = useSWR(
+    `${getAPIUrl()}courses/${course?.courseStructure?.course_uuid}/updates`,
+    (url) => swrFetcher(url, access_token)
+  )
+
+  if (!updates || updates.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-8 px-4 text-center bg-neutral-50/50 rounded-lg border border-dashed border-neutral-200">
+        <TentTree size={28} className="text-neutral-400 mb-2" />
+        <p className="text-sm text-neutral-600 font-medium">No updates yet</p>
+        <p className="text-xs text-neutral-400 mt-1">Updates about this course will appear here</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {updates.map((update: any) => (
+        <motion.div
+          key={update.id}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.2 }}
+          className="group p-3 rounded-lg bg-neutral-50/50 hover:bg-neutral-100/80 transition-colors duration-150"
+        >
+          <div className="flex items-start justify-between">
+            <div className="space-y-1 min-w-0 flex-1">
+              <div className="flex items-baseline space-x-2">
+                <h4 className="text-sm font-medium text-neutral-800 truncate">{update.title}</h4>
+                <span
+                  title={dayjs(update.creation_date).format('MMMM D, YYYY')}
+                  className="text-[11px] font-medium text-neutral-400 whitespace-nowrap"
+                >
+                  {dayjs(update.creation_date).fromNow()}
+                </span>
+              </div>
+              <p className="text-sm text-neutral-600 line-clamp-3">{update.content}</p>
+            </div>
+            {adminStatus.isAdmin && !adminStatus.loading && (
+              <div className="ml-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                <DeleteUpdateButton update={update} />
+              </div>
+            )}
+          </div>
+        </motion.div>
+      ))}
+    </div>
+  )
+}
+
+const DeleteUpdateButton = ({ update }: any) => {
+  const session = useLHSession() as any
+  const course = useCourse() as any
+
+  const handleDelete = async () => {
+    const toast_loading = toast.loading('Deleting update...')
+    const res = await deleteCourseUpdate(
+      course.courseStructure.course_uuid,
+      update.courseupdate_uuid,
+      session.data?.tokens?.access_token
+    )
+    
+    if (res.status === 200) {
+      toast.dismiss(toast_loading)
+      toast.success('Update deleted successfully')
+      mutate(`${getAPIUrl()}courses/${course?.courseStructure.course_uuid}/updates`)
+    } else {
+      toast.error('Failed to delete update')
+    }
+  }
+
+  return (
+    <ConfirmationModal
+      confirmationButtonText="Delete Update"
+      confirmationMessage="Are you sure you want to delete this update?"
+      dialogTitle="Delete Update?"
+      buttonid="delete-update-button"
+      dialogTrigger={
+        <button
+          id="delete-update-button"
+          className="p-1.5 text-neutral-400 hover:text-rose-500 rounded-full hover:bg-rose-50 transition-all duration-150"
+        >
+          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+          </svg>
+        </button>
+      }
+      functionToExecute={handleDelete}
+      status="warning"
+    />
+  )
+}
+
+const CourseAuthors = ({ authors }: CourseAuthorsProps) => {
+  const isMobile = useMediaQuery('(max-width: 768px)')
+
+  // Filter active authors and sort by role priority
+  const sortedAuthors = [...authors]
+    .filter(author => author.authorship_status === 'ACTIVE')
+    .sort((a, b) => {
+      const rolePriority: Record<string, number> = {
+        'CREATOR': 0,
+        'MAINTAINER': 1,
+        'CONTRIBUTOR': 2,
+        'REPORTER': 3
+      };
+      return rolePriority[a.authorship] - rolePriority[b.authorship];
+    });
+
+  return (
+    <div className="antialiased">
+      <MultipleAuthors authors={sortedAuthors} isMobile={isMobile} />
+      <UpdatesSection />
+    </div>
+  )
+}
+
+export default CourseAuthors 
\ No newline at end of file
diff --git a/apps/web/components/Objects/Courses/CourseProgress/CourseProgress.tsx b/apps/web/components/Objects/Courses/CourseProgress/CourseProgress.tsx
new file mode 100644
index 00000000..4b697d18
--- /dev/null
+++ b/apps/web/components/Objects/Courses/CourseProgress/CourseProgress.tsx
@@ -0,0 +1,122 @@
+import React, { useState, useEffect } from 'react'
+import { Check, Square, ArrowRight, Folder, FileText, Video, Layers, BookOpenCheck } from 'lucide-react'
+import { getUriWithOrg } from '@services/config/config'
+import Link from 'next/link'
+import Modal from '@components/Objects/StyledElements/Modal/Modal'
+
+interface CourseProgressProps {
+  course: any
+  orgslug: string
+  isOpen: boolean
+  onClose: () => void
+}
+
+const CourseProgress: React.FC<CourseProgressProps> = ({ course, orgslug, isOpen, onClose }) => {
+  const [completedActivities, setCompletedActivities] = useState(0)
+  const [totalActivities, setTotalActivities] = useState(0)
+
+  useEffect(() => {
+    let total = 0
+    let completed = 0
+
+    course.chapters.forEach((chapter: any) => {
+      chapter.activities.forEach((activity: any) => {
+        total++
+        if (isActivityDone(activity)) {
+          completed++
+        }
+      })
+    })
+
+    setTotalActivities(total)
+    setCompletedActivities(completed)
+  }, [course])
+
+  const isActivityDone = (activity: any) => {
+    const run = course?.trail?.runs?.find(
+      (run: any) => run.course_id === course.id
+    )
+    if (run) {
+      return run.steps.find((step: any) => step.activity_id === activity.id)
+    }
+    return false
+  }
+
+  const getActivityTypeIcon = (activityType: string) => {
+    switch (activityType) {
+      case 'TYPE_VIDEO':
+        return <Video size={16} className="text-gray-400" />
+      case 'TYPE_DOCUMENT':
+        return <FileText size={16} className="text-gray-400" />
+      case 'TYPE_DYNAMIC':
+        return <Layers size={16} className="text-gray-400" />
+      case 'TYPE_ASSIGNMENT':
+        return <BookOpenCheck size={16} className="text-gray-400" />
+      default:
+        return <FileText size={16} className="text-gray-400" />
+    }
+  }
+
+  const progressPercentage = totalActivities > 0 ? (completedActivities / totalActivities) * 100 : 0
+  const radius = 40
+  const circumference = 2 * Math.PI * radius
+  const strokeDashoffset = circumference - (progressPercentage / 100) * circumference
+
+  const dialogContent = (
+    <div className="space-y-4">
+      {course.chapters.map((chapter: any) => (
+        <div key={chapter.chapter_uuid} className="bg-gray-50 rounded-lg overflow-hidden">
+          <div className="px-4 py-3 bg-gray-100 font-semibold text-gray-700 flex items-center space-x-2">
+            <Folder size={16} className="text-gray-400" />
+            <span>{chapter.name}</span>
+          </div>
+          <div className="divide-y divide-gray-100">
+            {chapter.activities.map((activity: any) => {
+              const activityId = activity.activity_uuid.replace('activity_', '')
+              const courseId = course.course_uuid.replace('course_', '')
+              return (
+                <Link
+                  key={activity.activity_uuid}
+                  href={getUriWithOrg(orgslug, '') + `/course/${courseId}/activity/${activityId}`}
+                >
+                  <div className="px-4 py-3 hover:bg-gray-100 transition-colors flex items-center group">
+                    <div className="flex items-center space-x-3 flex-1">
+                      {isActivityDone(activity) ? (
+                        <div className="relative">
+                          <Square size={18} className="stroke-[2] text-teal-600" />
+                          <Check size={18} className="stroke-[2.5] text-teal-600 absolute top-0 left-0" />
+                        </div>
+                      ) : (
+                        <Square size={18} className="stroke-[2] text-gray-300" />
+                      )}
+                      <div className="flex items-center space-x-2">
+                        {getActivityTypeIcon(activity.activity_type)}
+                        <span className="text-gray-700 group-hover:text-gray-900">
+                          {activity.name}
+                        </span>
+                      </div>
+                    </div>
+                    <ArrowRight size={16} className="text-gray-400 group-hover:text-gray-600" />
+                  </div>
+                </Link>
+              )
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+
+  return (
+    <Modal
+      isDialogOpen={isOpen}
+      onOpenChange={onClose}
+      dialogContent={dialogContent}
+      dialogTitle="Course Progress"
+      dialogDescription={`${completedActivities} of ${totalActivities} activities completed`}
+      minWidth="md"
+    />
+  )
+}
+
+export default CourseProgress 
\ No newline at end of file
diff --git a/apps/web/components/Objects/StyledElements/Form/Form.tsx b/apps/web/components/Objects/StyledElements/Form/Form.tsx
index 818b04f1..d752e458 100644
--- a/apps/web/components/Objects/StyledElements/Form/Form.tsx
+++ b/apps/web/components/Objects/StyledElements/Form/Form.tsx
@@ -4,11 +4,19 @@ import { styled } from '@stitches/react'
 import { blackA } from '@radix-ui/colors'
 import { Info } from 'lucide-react'
 
-const FormLayout: React.FC<{ children: React.ReactNode; onSubmit: (e: any) => void }> = (props) => (
-  <FormRoot className="h-fit" onSubmit={props.onSubmit}>
-    {props.children}
-  </FormRoot>
-)
+interface FormLayoutProps {
+  children: React.ReactNode
+  onSubmit: (e: any) => void
+  className?: string
+}
+
+const FormLayout = ({ children, onSubmit, className }: FormLayoutProps) => {
+  return (
+    <Form.Root onSubmit={onSubmit} className={className}>
+      {children}
+    </Form.Root>
+  )
+}
 
 export const FormLabelAndMessage = (props: {
   label: string
diff --git a/apps/web/components/Pages/Courses/ActivityIndicators.tsx b/apps/web/components/Pages/Courses/ActivityIndicators.tsx
index 13482de8..8e47f7f7 100644
--- a/apps/web/components/Pages/Courses/ActivityIndicators.tsx
+++ b/apps/web/components/Pages/Courses/ActivityIndicators.tsx
@@ -84,15 +84,15 @@ function ActivityIndicators(props: Props) {
   const getActivityTypeBadgeColor = (activityType: string) => {
     switch (activityType) {
       case 'TYPE_VIDEO':
-        return 'bg-blue-50 text-blue-600 font-bold'
+        return 'bg-gray-100 text-gray-700 font-bold'
       case 'TYPE_DOCUMENT':
-        return 'bg-orange-50 text-orange-600 font-bold'
+        return 'bg-gray-100 text-gray-700 font-bold'
       case 'TYPE_DYNAMIC':
-        return 'bg-purple-50 text-purple-600 font-bold'
+        return 'bg-gray-100 text-gray-700 font-bold'
       case 'TYPE_ASSIGNMENT':
-        return 'bg-green-50 text-green-600 font-bold'
+        return 'bg-gray-100 text-gray-700 font-bold'
       default:
-        return 'bg-gray-50 text-gray-600 font-bold'
+        return 'bg-gray-100 text-gray-700 font-bold'
     }
   }
 

From 016d2b3aed0f1aa507908827b34ebeeb10f4ad38 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Tue, 8 Apr 2025 15:50:32 +0200
Subject: [PATCH 3/3] fix: improve video file validation in VideoBlockComponent

---
 .../Objects/Editor/Extensions/Video/VideoBlockComponent.tsx   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx b/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
index ad3603c3..3a4e64ce 100644
--- a/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
+++ b/apps/web/components/Objects/Editor/Extensions/Video/VideoBlockComponent.tsx
@@ -235,7 +235,9 @@ function VideoBlockComponent(props: ExtendedNodeViewProps) {
     setIsDragging(false)
 
     const file = e.dataTransfer.files[0]
-    if (file && SUPPORTED_FILES.split(',').some(format => file.name.toLowerCase().endsWith(format.trim()))) {
+    const fileExtension = file?.name.split('.').pop()?.toLowerCase()
+    
+    if (file && fileExtension && ['mp4', 'webm'].includes(fileExtension)) {
       setVideo(file)
       setError(null)
       handleUpload(file)