From 30b7dc4410e5d7032cdaa1804cfcc08d3eb4dcc5 Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Fri, 16 May 2025 23:13:16 +0200
Subject: [PATCH] feat: improve performance on activity page

---
 .../activity/[activityid]/activity.tsx        | 851 +++++++++---------
 .../activity/[activityid]/page.tsx            |   2 +-
 .../(withmenu)/course/[courseuuid]/page.tsx   |   2 +-
 .../Activity/FixedActivitySecondaryBar.tsx    | 211 +++--
 .../Pages/Courses/ActivityIndicators.tsx      | 180 ++--
 5 files changed, 640 insertions(+), 606 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 fcdc1948..eb52b567 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
@@ -1,27 +1,19 @@
 'use client'
 import Link from 'next/link'
 import { getAPIUrl, getUriWithOrg } from '@services/config/config'
-import Canva from '@components/Objects/Activities/DynamicCanva/DynamicCanva'
-import VideoActivity from '@components/Objects/Activities/Video/Video'
 import { BookOpenCheck, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, FileText, Folder, List, Menu, MoreVertical, UserRoundPen, Video, Layers, ListFilter, ListTree, X, Edit2, EllipsisVertical, Maximize2, Minimize2 } from 'lucide-react'
 import { markActivityAsComplete, unmarkActivityAsComplete } from '@services/courses/activity'
-import DocumentPdfActivity from '@components/Objects/Activities/DocumentPdf/DocumentPdf'
-import ActivityIndicators from '@components/Pages/Courses/ActivityIndicators'
-import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
 import { usePathname, useRouter } from 'next/navigation'
 import AuthenticatedClientElement from '@components/Security/AuthenticatedClientElement'
 import { getCourseThumbnailMediaDirectory } from '@services/media/media'
 import { useOrg } from '@components/Contexts/OrgContext'
 import { CourseProvider } from '@components/Contexts/CourseContext'
-import AIActivityAsk from '@components/Objects/Activities/AI/AIActivityAsk'
-import AIChatBotProvider from '@components/Contexts/AI/AIChatBotContext'
 import { useLHSession } from '@components/Contexts/LHSessionContext'
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useMemo, lazy, Suspense } from 'react'
 import { getAssignmentFromActivityUUID, getFinalGrade, submitAssignmentForGrading } from '@services/courses/assignments'
-import AssignmentStudentActivity from '@components/Objects/Activities/Assignment/AssignmentStudentActivity'
 import { AssignmentProvider } from '@components/Contexts/Assignments/AssignmentContext'
 import { AssignmentsTaskProvider } from '@components/Contexts/Assignments/AssignmentsTaskContext'
-import AssignmentSubmissionProvider, {  useAssignmentSubmission } from '@components/Contexts/Assignments/AssignmentSubmissionContext'
+import AssignmentSubmissionProvider, { useAssignmentSubmission } from '@components/Contexts/Assignments/AssignmentSubmissionContext'
 import toast from 'react-hot-toast'
 import { mutate } from 'swr'
 import ConfirmationModal from '@components/Objects/StyledElements/ConfirmationModal/ConfirmationModal'
@@ -36,7 +28,26 @@ import CourseEndView from '@components/Pages/Activity/CourseEndView'
 import { motion, AnimatePresence } from 'framer-motion'
 import ActivityBreadcrumbs from '@components/Pages/Activity/ActivityBreadcrumbs'
 import MiniInfoTooltip from '@components/Objects/MiniInfoTooltip'
+import GeneralWrapperStyled from '@components/Objects/StyledElements/Wrappers/GeneralWrapper'
+import ActivityIndicators from '@components/Pages/Courses/ActivityIndicators'
 
+// Lazy load heavy components
+const Canva = lazy(() => import('@components/Objects/Activities/DynamicCanva/DynamicCanva'))
+const VideoActivity = lazy(() => import('@components/Objects/Activities/Video/Video'))
+const DocumentPdfActivity = lazy(() => import('@components/Objects/Activities/DocumentPdf/DocumentPdf'))
+const AssignmentStudentActivity = lazy(() => import('@components/Objects/Activities/Assignment/AssignmentStudentActivity'))
+const AIActivityAsk = lazy(() => import('@components/Objects/Activities/AI/AIActivityAsk'))
+const AIChatBotProvider = lazy(() => import('@components/Contexts/AI/AIChatBotContext'))
+
+// Loading fallback component
+const LoadingFallback = () => (
+  <div className="flex items-center justify-center h-64">
+    <div className="relative w-6 h-6">
+      <div className="absolute top-0 left-0 w-full h-full border-2 border-gray-100 rounded-full"></div>
+      <div className="absolute top-0 left-0 w-full h-full border-2 border-gray-400 rounded-full animate-spin border-t-transparent"></div>
+    </div>
+  </div>
+);
 
 interface ActivityClientProps {
   activityid: string
@@ -55,6 +66,31 @@ interface ActivityActionsProps {
   showNavigation?: boolean
 }
 
+// Custom hook for activity position
+function useActivityPosition(course: any, activityId: string) {
+  return useMemo(() => {
+    let allActivities: any[] = [];
+    let currentIndex = -1;
+    
+    course.chapters.forEach((chapter: any) => {
+      chapter.activities.forEach((activity: any) => {
+        const cleanActivityUuid = activity.activity_uuid?.replace('activity_', '');
+        allActivities.push({
+          ...activity,
+          cleanUuid: cleanActivityUuid,
+          chapterName: chapter.name
+        });
+        
+        if (cleanActivityUuid === activityId.replace('activity_', '')) {
+          currentIndex = allActivities.length - 1;
+        }
+      });
+    });
+    
+    return { allActivities, currentIndex };
+  }, [course, activityId]);
+}
+
 function ActivityActions({ activity, activityid, course, orgslug, assignment, showNavigation = true }: ActivityActionsProps) {
   const session = useLHSession() as any;
   const { contributorStatus } = useContributorStatus(course.course_uuid);
@@ -113,37 +149,55 @@ function ActivityClient(props: ActivityClientProps) {
   const { contributorStatus } = useContributorStatus(courseuuid);
   const router = useRouter();
 
-  // Function to find the current activity's position in the course
-  const findActivityPosition = () => {
-    let allActivities: any[] = [];
-    let currentIndex = -1;
-    
-    // Flatten all activities from all chapters
-    course.chapters.forEach((chapter: any) => {
-      chapter.activities.forEach((activity: any) => {
-        const cleanActivityUuid = activity.activity_uuid?.replace('activity_', '');
-        allActivities.push({
-          ...activity,
-          cleanUuid: cleanActivityUuid,
-          chapterName: chapter.name
-        });
-        
-        // Check if this is the current activity
-        if (cleanActivityUuid === activityid.replace('activity_', '')) {
-          currentIndex = allActivities.length - 1;
-        }
-      });
-    });
-    
-    return { allActivities, currentIndex };
-  };
-  
-  const { allActivities, currentIndex } = findActivityPosition();
+  // Memoize activity position calculation
+  const { allActivities, currentIndex } = useActivityPosition(course, activityid);
   
   // Get previous and next activities
   const prevActivity = currentIndex > 0 ? allActivities[currentIndex - 1] : null;
   const nextActivity = currentIndex < allActivities.length - 1 ? allActivities[currentIndex + 1] : null;
-  
+
+  // Memoize activity content
+  const activityContent = useMemo(() => {
+    if (!activity || !activity.published || activity.content.paid_access === false) {
+      return null;
+    }
+
+    switch (activity.activity_type) {
+      case 'TYPE_DYNAMIC':
+        return (
+          <Suspense fallback={<LoadingFallback />}>
+            <Canva content={activity.content} activity={activity} />
+          </Suspense>
+        );
+      case 'TYPE_VIDEO':
+        return (
+          <Suspense fallback={<LoadingFallback />}>
+            <VideoActivity course={course} activity={activity} />
+          </Suspense>
+        );
+      case 'TYPE_DOCUMENT':
+        return (
+          <Suspense fallback={<LoadingFallback />}>
+            <DocumentPdfActivity course={course} activity={activity} />
+          </Suspense>
+        );
+      case 'TYPE_ASSIGNMENT':
+        return assignment ? (
+          <Suspense fallback={<LoadingFallback />}>
+            <AssignmentProvider assignment_uuid={assignment?.assignment_uuid}>
+              <AssignmentsTaskProvider>
+                <AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
+                  <AssignmentStudentActivity />
+                </AssignmentSubmissionProvider>
+              </AssignmentsTaskProvider>
+            </AssignmentProvider>
+          </Suspense>
+        ) : null;
+      default:
+        return null;
+    }
+  }, [activity, course, assignment]);
+
   // Navigate to an activity
   const navigateToActivity = (activity: any) => {
     if (!activity) return;
@@ -208,259 +262,57 @@ function ActivityClient(props: ActivityClientProps) {
   return (
     <>
       <CourseProvider courseuuid={course?.course_uuid}>
-        <AIChatBotProvider>
-          {isFocusMode ? (
-            <AnimatePresence>
-              <motion.div 
-                initial={isInitialRender.current ? false : { opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                transition={{ duration: 0.3 }}
-                className="fixed inset-0 bg-white z-50"
-              >
-                {/* Focus Mode Top Bar */}
+        <Suspense fallback={<LoadingFallback />}>
+          <AIChatBotProvider>
+            {isFocusMode ? (
+              <AnimatePresence>
                 <motion.div 
-                  initial={isInitialRender.current ? false : { y: -100 }}
-                  animate={{ y: 0 }}
-                  exit={{ y: -100 }}
+                  initial={isInitialRender.current ? false : { opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
                   transition={{ duration: 0.3 }}
-                  className="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-xl border-b border-gray-100"
+                  className="fixed inset-0 bg-white z-50"
                 >
-                  <div className="container mx-auto px-4 py-2">
-                    <div className="flex items-center justify-between h-14">
-                      <div className="flex items-center space-x-2">
-                        <motion.button
-                          whileHover={{ scale: 1.05 }}
-                          whileTap={{ scale: 0.95 }}
-                          onClick={() => setIsFocusMode(false)}
-                          className="bg-white nice-shadow p-2 rounded-full cursor-pointer hover:bg-gray-50"
-                          title="Exit focus mode"
-                        >
-                          <Minimize2 size={16} className="text-gray-700" />
-                        </motion.button>
-                        <ActivityChapterDropdown 
-                          course={course}
-                          currentActivityId={activity.activity_uuid ? activity.activity_uuid.replace('activity_', '') : activityid.replace('activity_', '')}
-                          orgslug={orgslug}
-                        />
-                      </div>
-                      
-                      {/* Center Course Info */}
-                      <motion.div 
-                        initial={isInitialRender.current ? false : { opacity: 0, y: -20 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ delay: 0.1 }}
-                        className="flex items-center space-x-4"
-                      >
-                        <div className="flex">
-                          <Link
-                            href={getUriWithOrg(orgslug, '') + `/course/${courseuuid}`}
-                          >
-                            <img
-                              className="w-[60px] h-[34px] rounded-md drop-shadow-md"
-                              src={`${getCourseThumbnailMediaDirectory(
-                                org?.org_uuid,
-                                course.course_uuid,
-                                course.thumbnail_image
-                              )}`}
-                              alt=""
-                            />
-                          </Link>
-                        </div>
-                        <div className="flex flex-col -space-y-1">
-                          <p className="font-bold text-gray-700 text-sm">Course </p>
-                          <h1 className="font-bold text-gray-950 text-lg first-letter:uppercase">
-                            {course.name}
-                          </h1>
-                        </div>
-                      </motion.div>
-
-                      {/* Progress Indicator */}
-                      <motion.div 
-                        initial={isInitialRender.current ? false : { opacity: 0, x: 20 }}
-                        animate={{ opacity: 1, x: 0 }}
-                        transition={{ delay: 0.2 }}
-                        className="flex items-center space-x-2"
-                      >
-                        <div className="relative w-8 h-8">
-                          <svg className="w-full h-full transform -rotate-90">
-                            <circle
-                              cx="16"
-                              cy="16"
-                              r="14"
-                              stroke="#e5e7eb"
-                              strokeWidth="3"
-                              fill="none"
-                            />
-                            <circle
-                              cx="16"
-                              cy="16"
-                              r="14"
-                              stroke="#10b981"
-                              strokeWidth="3"
-                              fill="none"
-                              strokeLinecap="round"
-                              strokeDasharray={2 * Math.PI * 14}
-                              strokeDashoffset={2 * Math.PI * 14 * (1 - (course.trail?.runs?.find((run: any) => run.course_id === course.id)?.steps?.filter((step: any) => step.complete)?.length || 0) / (course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 1))}
-                            />
-                          </svg>
-                          <div className="absolute inset-0 flex items-center justify-center">
-                            <span className="text-xs font-bold text-gray-800">
-                              {Math.round(((course.trail?.runs?.find((run: any) => run.course_id === course.id)?.steps?.filter((step: any) => step.complete)?.length || 0) / (course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 1)) * 100)}%
-                            </span>
-                          </div>
-                        </div>
-                        <div className="text-xs text-gray-600">
-                          {course.trail?.runs?.find((run: any) => run.course_id === course.id)?.steps?.filter((step: any) => step.complete)?.length || 0} of {course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 0}
-                        </div>
-                      </motion.div>
-                    </div>
-                  </div>
-                </motion.div>
-
-                {/* Focus Mode Content */}
-                <div className="pt-16 pb-20 h-full overflow-auto">
-                  <div className="container mx-auto px-4">
-                    {activity && activity.published == true && (
-                      <>
-                        {activity.content.paid_access == false ? (
-                          <PaidCourseActivityDisclaimer course={course} />
-                        ) : (
-                          <motion.div 
-                            initial={isInitialRender.current ? false : { scale: 0.95, opacity: 0 }}
-                            animate={{ scale: 1, opacity: 1 }}
-                            transition={{ delay: 0.3 }}
-                            className={`p-7 rounded-lg ${bgColor} mt-4`}
-                          >
-                            {/* Activity Types */}
-                            <div>
-                              {activity.activity_type == 'TYPE_DYNAMIC' && (
-                                <Canva content={activity.content} activity={activity} />
-                              )}
-                              {activity.activity_type == 'TYPE_VIDEO' && (
-                                <VideoActivity course={course} activity={activity} />
-                              )}
-                              {activity.activity_type == 'TYPE_DOCUMENT' && (
-                                <DocumentPdfActivity
-                                  course={course}
-                                  activity={activity}
-                                />
-                              )}
-                              {activity.activity_type == 'TYPE_ASSIGNMENT' && (
-                                <div>
-                                  {assignment ? (
-                                    <AssignmentProvider assignment_uuid={assignment?.assignment_uuid}>
-                                      <AssignmentsTaskProvider>
-                                        <AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
-                                          <AssignmentStudentActivity />
-                                        </AssignmentSubmissionProvider>
-                                      </AssignmentsTaskProvider>
-                                    </AssignmentProvider>
-                                  ) : (
-                                    <div></div>
-                                  )}
-                                </div>
-                              )}
-                            </div>
-                          </motion.div>
-                        )}
-                      </>
-                    )}
-                  </div>
-                </div>
-
-                {/* Focus Mode Bottom Bar */}
-                {activity && activity.published == true && activity.content.paid_access != false && (
+                  {/* Focus Mode Top Bar */}
                   <motion.div 
-                    initial={isInitialRender.current ? false : { y: 100 }}
+                    initial={isInitialRender.current ? false : { y: -100 }}
                     animate={{ y: 0 }}
-                    exit={{ y: 100 }}
+                    exit={{ y: -100 }}
                     transition={{ duration: 0.3 }}
-                    className="fixed bottom-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-xl border-t border-gray-100"
+                    className="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-xl border-b border-gray-100"
                   >
-                    <div className="container mx-auto px-4">
-                      <div className="flex items-center justify-between h-16">
+                    <div className="container mx-auto px-4 py-2">
+                      <div className="flex items-center justify-between h-14">
                         <div className="flex items-center space-x-2">
-                          <button
-                            onClick={() => navigateToActivity(prevActivity)}
-                            className={`flex items-center space-x-1.5 p-2 rounded-md transition-all duration-200 cursor-pointer ${
-                              prevActivity 
-                                ? 'text-gray-700' 
-                                : 'opacity-50 text-gray-400 cursor-not-allowed'
-                            }`}
-                            disabled={!prevActivity}
-                            title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
+                          <motion.button
+                            whileHover={{ scale: 1.05 }}
+                            whileTap={{ scale: 0.95 }}
+                            onClick={() => setIsFocusMode(false)}
+                            className="bg-white nice-shadow p-2 rounded-full cursor-pointer hover:bg-gray-50"
+                            title="Exit focus mode"
                           >
-                            <ChevronLeft size={20} className="text-gray-800 shrink-0" />
-                            <div className="flex flex-col items-start">
-                              <span className="text-xs text-gray-500">Previous</span>
-                              <span className="text-sm capitalize font-semibold text-left">
-                                {prevActivity ? prevActivity.name : 'No previous activity'}
-                              </span>
-                            </div>
-                          </button>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <ActivityActions 
-                            activity={activity}
-                            activityid={activityid}
+                            <Minimize2 size={16} className="text-gray-700" />
+                          </motion.button>
+                          <ActivityChapterDropdown 
                             course={course}
+                            currentActivityId={activity.activity_uuid ? activity.activity_uuid.replace('activity_', '') : activityid.replace('activity_', '')}
                             orgslug={orgslug}
-                            assignment={assignment}
-                            showNavigation={false}
                           />
-                          <button
-                            onClick={() => navigateToActivity(nextActivity)}
-                            className={`flex items-center space-x-1.5 p-2 rounded-md transition-all duration-200 cursor-pointer ${
-                              nextActivity 
-                                ? 'text-gray-700' 
-                                : 'opacity-50 text-gray-400 cursor-not-allowed'
-                            }`}
-                            disabled={!nextActivity}
-                            title={nextActivity ? `Next: ${nextActivity.name}` : 'No next activity'}
-                          >
-                            <div className="flex flex-col items-end">
-                              <span className="text-xs text-gray-500">Next</span>
-                              <span className="text-sm capitalize font-semibold text-right">
-                                {nextActivity ? nextActivity.name : 'No next activity'}
-                              </span>
-                            </div>
-                            <ChevronRight size={20} className="text-gray-800 shrink-0" />
-                          </button>
                         </div>
-                      </div>
-                    </div>
-                  </motion.div>
-                )}
-              </motion.div>
-            </AnimatePresence>
-          ) : (
-            <GeneralWrapperStyled>
-              {/* Original non-focus mode UI */}
-              {activityid === 'end' ? (
-                <CourseEndView 
-                  courseName={course.name}
-                  orgslug={orgslug}
-                  courseUuid={course.course_uuid}
-                  thumbnailImage={course.thumbnail_image}
-                />
-              ) : (
-                <div className="space-y-4 pt-0">
-                  <div className="pt-2">
-                    <ActivityBreadcrumbs 
-                      course={course}
-                      activity={activity}
-                      orgslug={orgslug}
-                    />
-                    <div className="space-y-4 pb-4 activity-info-section">
-                      <div className="flex justify-between items-center">
-                        <div className="flex space-x-6">
+                        
+                        {/* Center Course Info */}
+                        <motion.div 
+                          initial={isInitialRender.current ? false : { opacity: 0, y: -20 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          transition={{ delay: 0.1 }}
+                          className="flex items-center space-x-4"
+                        >
                           <div className="flex">
                             <Link
                               href={getUriWithOrg(orgslug, '') + `/course/${courseuuid}`}
                             >
                               <img
-                                className="w-[100px] h-[57px] rounded-md drop-shadow-md"
+                                className="w-[60px] h-[34px] rounded-md drop-shadow-md"
                                 src={`${getCourseThumbnailMediaDirectory(
                                   org?.org_uuid,
                                   course.course_uuid,
@@ -471,181 +323,330 @@ function ActivityClient(props: ActivityClientProps) {
                             </Link>
                           </div>
                           <div className="flex flex-col -space-y-1">
-                            <p className="font-bold text-gray-700 text-md">Course </p>
-                            <h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase">
+                            <p className="font-bold text-gray-700 text-sm">Course </p>
+                            <h1 className="font-bold text-gray-950 text-lg first-letter:uppercase">
                               {course.name}
                             </h1>
                           </div>
-                        </div>
-                        {activity && activity.published == true && activity.content.paid_access != false && (
-                          <AuthenticatedClientElement checkMethod="authentication">
-                            { (
-                              <div className="flex space-x-2">
-                                <PreviousActivityButton 
-                                  course={course} 
-                                  currentActivityId={activity.id} 
-                                  orgslug={orgslug} 
-                                />
-                                <NextActivityButton 
-                                  course={course} 
-                                  currentActivityId={activity.id} 
-                                  orgslug={orgslug} 
-                                />
-                              </div>
-                            )}
-                          </AuthenticatedClientElement>
-                        )}
+                        </motion.div>
+
+                        {/* Progress Indicator */}
+                        <motion.div 
+                          initial={isInitialRender.current ? false : { opacity: 0, x: 20 }}
+                          animate={{ opacity: 1, x: 0 }}
+                          transition={{ delay: 0.2 }}
+                          className="flex items-center space-x-2"
+                        >
+                          <div className="relative w-8 h-8">
+                            <svg className="w-full h-full transform -rotate-90">
+                              <circle
+                                cx="16"
+                                cy="16"
+                                r="14"
+                                stroke="#e5e7eb"
+                                strokeWidth="3"
+                                fill="none"
+                              />
+                              <circle
+                                cx="16"
+                                cy="16"
+                                r="14"
+                                stroke="#10b981"
+                                strokeWidth="3"
+                                fill="none"
+                                strokeLinecap="round"
+                                strokeDasharray={2 * Math.PI * 14}
+                                strokeDashoffset={2 * Math.PI * 14 * (1 - (course.trail?.runs?.find((run: any) => run.course_id === course.id)?.steps?.filter((step: any) => step.complete)?.length || 0) / (course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 1))}
+                              />
+                            </svg>
+                            <div className="absolute inset-0 flex items-center justify-center">
+                              <span className="text-xs font-bold text-gray-800">
+                                {Math.round(((course.trail?.runs?.find((run: any) => run.course_id === course.id)?.steps?.filter((step: any) => step.complete)?.length || 0) / (course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 1)) * 100)}%
+                              </span>
+                            </div>
+                          </div>
+                          <div className="text-xs text-gray-600">
+                            {course.trail?.runs?.find((run: any) => run.course_id === course.id)?.steps?.filter((step: any) => step.complete)?.length || 0} of {course.chapters?.reduce((acc: number, chapter: any) => acc + chapter.activities.length, 0) || 0}
+                          </div>
+                        </motion.div>
                       </div>
+                    </div>
+                  </motion.div>
 
-                      <ActivityIndicators
-                        course_uuid={courseuuid}
-                        current_activity={activityid}
-                        orgslug={orgslug}
-                        course={course}
-                      />
+                  {/* Focus Mode Content */}
+                  <div className="pt-16 pb-20 h-full overflow-auto">
+                    <div className="container mx-auto px-4">
+                      {activity && activity.published == true && (
+                        <>
+                          {activity.content.paid_access == false ? (
+                            <PaidCourseActivityDisclaimer course={course} />
+                          ) : (
+                            <motion.div 
+                              initial={isInitialRender.current ? false : { scale: 0.95, opacity: 0 }}
+                              animate={{ scale: 1, opacity: 1 }}
+                              transition={{ delay: 0.3 }}
+                              className={`p-7 rounded-lg ${bgColor} mt-4`}
+                            >
+                              {/* Activity Types */}
+                              <div>
+                                {activityContent}
+                              </div>
+                            </motion.div>
+                          )}
+                        </>
+                      )}
+                    </div>
+                  </div>
 
-                      <div className="flex justify-between items-center w-full">
-                        <div className="flex flex-1/3 items-center space-x-3">
-                          <button
-                            onClick={() => setIsFocusMode(true)}
-                            className="bg-white nice-shadow p-2 rounded-full cursor-pointer hover:bg-gray-50 transition-all duration-200"
-                            title="Enter focus mode"
-                          >
-                            <Maximize2 size={16} className="text-gray-700" />
-                          </button>
-                          <ActivityChapterDropdown 
-                            course={course}
-                            currentActivityId={activity.activity_uuid ? activity.activity_uuid.replace('activity_', '') : activityid.replace('activity_', '')}
-                            orgslug={orgslug}
-                          />
-                          <div className="flex flex-col -space-y-1">
-                            <p className="font-bold text-gray-700 text-md">
-                              Chapter : {getChapterNameByActivityId(course, activity.id)}
-                            </p>
-                            <h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase">
-                              {activity.name}
-                            </h1>
+                  {/* Focus Mode Bottom Bar */}
+                  {activity && activity.published == true && activity.content.paid_access != false && (
+                    <motion.div 
+                      initial={isInitialRender.current ? false : { y: 100 }}
+                      animate={{ y: 0 }}
+                      exit={{ y: 100 }}
+                      transition={{ duration: 0.3 }}
+                      className="fixed bottom-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-xl border-t border-gray-100"
+                    >
+                      <div className="container mx-auto px-4">
+                        <div className="flex items-center justify-between h-16">
+                          <div className="flex items-center space-x-2">
+                            <button
+                              onClick={() => navigateToActivity(prevActivity)}
+                              className={`flex items-center space-x-1.5 p-2 rounded-md transition-all duration-200 cursor-pointer ${
+                                prevActivity 
+                                  ? 'text-gray-700' 
+                                  : 'opacity-50 text-gray-400 cursor-not-allowed'
+                              }`}
+                              disabled={!prevActivity}
+                              title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
+                            >
+                              <ChevronLeft size={20} className="text-gray-800 shrink-0" />
+                              <div className="flex flex-col items-start">
+                                <span className="text-xs text-gray-500">Previous</span>
+                                <span className="text-sm capitalize font-semibold text-left">
+                                  {prevActivity ? prevActivity.name : 'No previous activity'}
+                                </span>
+                              </div>
+                            </button>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <ActivityActions 
+                              activity={activity}
+                              activityid={activityid}
+                              course={course}
+                              orgslug={orgslug}
+                              assignment={assignment}
+                              showNavigation={false}
+                            />
+                            <button
+                              onClick={() => navigateToActivity(nextActivity)}
+                              className={`flex items-center space-x-1.5 p-2 rounded-md transition-all duration-200 cursor-pointer ${
+                                nextActivity 
+                                  ? 'text-gray-700' 
+                                  : 'opacity-50 text-gray-400 cursor-not-allowed'
+                              }`}
+                              disabled={!nextActivity}
+                              title={nextActivity ? `Next: ${nextActivity.name}` : 'No next activity'}
+                            >
+                              <div className="flex flex-col items-end">
+                                <span className="text-xs text-gray-500">Next</span>
+                                <span className="text-sm capitalize font-semibold text-right">
+                                  {nextActivity ? nextActivity.name : 'No next activity'}
+                                </span>
+                              </div>
+                              <ChevronRight size={20} className="text-gray-800 shrink-0" />
+                            </button>
                           </div>
                         </div>
-                        <div className="flex space-x-2 items-center">
+                      </div>
+                    </motion.div>
+                  )}
+                </motion.div>
+              </AnimatePresence>
+            ) : (
+              <GeneralWrapperStyled>
+                {/* Original non-focus mode UI */}
+                {activityid === 'end' ? (
+                  <CourseEndView 
+                    courseName={course.name}
+                    orgslug={orgslug}
+                    courseUuid={course.course_uuid}
+                    thumbnailImage={course.thumbnail_image}
+                  />
+                ) : (
+                  <div className="space-y-4 pt-0">
+                    <div className="pt-2">
+                      <ActivityBreadcrumbs 
+                        course={course}
+                        activity={activity}
+                        orgslug={orgslug}
+                      />
+                      <div className="space-y-4 pb-4 activity-info-section">
+                        <div className="flex justify-between items-center">
+                          <div className="flex space-x-6">
+                            <div className="flex">
+                              <Link
+                                href={getUriWithOrg(orgslug, '') + `/course/${courseuuid}`}
+                              >
+                                <img
+                                  className="w-[100px] h-[57px] rounded-md drop-shadow-md"
+                                  src={`${getCourseThumbnailMediaDirectory(
+                                    org?.org_uuid,
+                                    course.course_uuid,
+                                    course.thumbnail_image
+                                  )}`}
+                                  alt=""
+                                />
+                              </Link>
+                            </div>
+                            <div className="flex flex-col -space-y-1">
+                              <p className="font-bold text-gray-700 text-md">Course </p>
+                              <h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase">
+                                {course.name}
+                              </h1>
+                            </div>
+                          </div>
                           {activity && activity.published == true && activity.content.paid_access != false && (
                             <AuthenticatedClientElement checkMethod="authentication">
-                              {activity.activity_type != 'TYPE_ASSIGNMENT' && (
-                                <>
-                                  <AIActivityAsk activity={activity} />
-                                  {contributorStatus === 'ACTIVE' && activity.activity_type == 'TYPE_DYNAMIC' && (
-                                    <Link
-                                      href={getUriWithOrg(orgslug, '') + `/course/${courseuuid}/activity/${activityid}/edit`}
-                                      className="bg-emerald-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"
-                                    >
-                                      <Edit2 size={17} />
-                                      <span className="text-xs font-bold">Contribute</span>
-                                    </Link>
-                                  )}
-                                </>
+                              { (
+                                <div className="flex space-x-2">
+                                  <PreviousActivityButton 
+                                    course={course} 
+                                    currentActivityId={activity.id} 
+                                    orgslug={orgslug} 
+                                  />
+                                  <NextActivityButton 
+                                    course={course} 
+                                    currentActivityId={activity.id} 
+                                    orgslug={orgslug} 
+                                  />
+                                </div>
                               )}
                             </AuthenticatedClientElement>
                           )}
                         </div>
-                      </div>
-                    </div>
 
-                    {activity && activity.published == false && (
-                      <div className="p-7 drop-shadow-xs rounded-lg bg-gray-800">
-                        <div className="text-white">
-                          <h1 className="font-bold text-2xl">
-                            This activity is not published yet
-                          </h1>
-                        </div>
-                      </div>
-                    )}
+                        <ActivityIndicators
+                          course_uuid={courseuuid}
+                          current_activity={activityid}
+                          orgslug={orgslug}
+                          course={course}
+                        />
 
-                    {activity && activity.published == true && (
-                      <>
-                        {activity.content.paid_access == false ? (
-                          <PaidCourseActivityDisclaimer course={course} />
-                        ) : (
-                          <div className={`p-7 drop-shadow-xs rounded-lg ${bgColor}`}>
-                            {/* Activity Types */}
-                            <div>
-                              {activity.activity_type == 'TYPE_DYNAMIC' && (
-                                <Canva content={activity.content} activity={activity} />
-                              )}
-                              {activity.activity_type == 'TYPE_VIDEO' && (
-                                <VideoActivity course={course} activity={activity} />
-                              )}
-                              {activity.activity_type == 'TYPE_DOCUMENT' && (
-                                <DocumentPdfActivity
-                                  course={course}
-                                  activity={activity}
-                                />
-                              )}
-                              {activity.activity_type == 'TYPE_ASSIGNMENT' && (
-                                <div>
-                                  {assignment ? (
-                                    <AssignmentProvider assignment_uuid={assignment?.assignment_uuid}>
-                                      <AssignmentsTaskProvider>
-                                        <AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
-                                          <AssignmentStudentActivity />
-                                        </AssignmentSubmissionProvider>
-                                      </AssignmentsTaskProvider>
-                                    </AssignmentProvider>
-                                  ) : (
-                                    <div></div>
-                                  )}
-                                </div>
-                              )}
+                        <div className="flex justify-between items-center w-full">
+                          <div className="flex flex-1/3 items-center space-x-3">
+                            <button
+                              onClick={() => setIsFocusMode(true)}
+                              className="bg-white nice-shadow p-2 rounded-full cursor-pointer hover:bg-gray-50 transition-all duration-200"
+                              title="Enter focus mode"
+                            >
+                              <Maximize2 size={16} className="text-gray-700" />
+                            </button>
+                            <ActivityChapterDropdown 
+                              course={course}
+                              currentActivityId={activity.activity_uuid ? activity.activity_uuid.replace('activity_', '') : activityid.replace('activity_', '')}
+                              orgslug={orgslug}
+                            />
+                            <div className="flex flex-col -space-y-1">
+                              <p className="font-bold text-gray-700 text-md">
+                                Chapter : {getChapterNameByActivityId(course, activity.id)}
+                              </p>
+                              <h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase">
+                                {activity.name}
+                              </h1>
                             </div>
                           </div>
-                        )}
-                      </>
-                    )}
-
-                    {/* Activity Actions below the content box */}
-                    {activity && activity.published == true && activity.content.paid_access != false && (
-                      <div className="flex justify-between items-center mt-4 w-full">
-                        <div>
-                          <PreviousActivityButton 
-                            course={course} 
-                            currentActivityId={activity.id} 
-                            orgslug={orgslug} 
-                          />
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <ActivityActions 
-                            activity={activity}
-                            activityid={activityid}
-                            course={course}
-                            orgslug={orgslug}
-                            assignment={assignment}
-                            showNavigation={false}
-                          />
-                          <NextActivityButton 
-                            course={course} 
-                            currentActivityId={activity.id} 
-                            orgslug={orgslug} 
-                          />
+                          <div className="flex space-x-2 items-center">
+                            {activity && activity.published == true && activity.content.paid_access != false && (
+                              <AuthenticatedClientElement checkMethod="authentication">
+                                {activity.activity_type != 'TYPE_ASSIGNMENT' && (
+                                  <>
+                                    <AIActivityAsk activity={activity} />
+                                    {contributorStatus === 'ACTIVE' && activity.activity_type == 'TYPE_DYNAMIC' && (
+                                      <Link
+                                        href={getUriWithOrg(orgslug, '') + `/course/${courseuuid}/activity/${activityid}/edit`}
+                                        className="bg-emerald-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"
+                                      >
+                                        <Edit2 size={17} />
+                                        <span className="text-xs font-bold">Contribute</span>
+                                      </Link>
+                                    )}
+                                  </>
+                                )}
+                              </AuthenticatedClientElement>
+                            )}
+                          </div>
                         </div>
                       </div>
-                    )}
 
-                    {/* Fixed Activity Secondary Bar */}
-                    {activity && activity.published == true && activity.content.paid_access != false && (
-                      <FixedActivitySecondaryBar
-                        course={course}
-                        currentActivityId={activityid}
-                        orgslug={orgslug}
-                        activity={activity}
-                      />
-                    )}
-                    
-                    <div style={{ height: '100px' }}></div>
+                      {activity && activity.published == false && (
+                        <div className="p-7 drop-shadow-xs rounded-lg bg-gray-800">
+                          <div className="text-white">
+                            <h1 className="font-bold text-2xl">
+                              This activity is not published yet
+                            </h1>
+                          </div>
+                        </div>
+                      )}
+
+                      {activity && activity.published == true && (
+                        <>
+                          {activity.content.paid_access == false ? (
+                            <PaidCourseActivityDisclaimer course={course} />
+                          ) : (
+                            <div className={`p-7 drop-shadow-xs rounded-lg ${bgColor}`}>
+                              {activityContent}
+                            </div>
+                          )}
+                        </>
+                      )}
+
+                      {/* Activity Actions below the content box */}
+                      {activity && activity.published == true && activity.content.paid_access != false && (
+                        <div className="flex justify-between items-center mt-4 w-full">
+                          <div>
+                            <PreviousActivityButton 
+                              course={course} 
+                              currentActivityId={activity.id} 
+                              orgslug={orgslug} 
+                            />
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <ActivityActions 
+                              activity={activity}
+                              activityid={activityid}
+                              course={course}
+                              orgslug={orgslug}
+                              assignment={assignment}
+                              showNavigation={false}
+                            />
+                            <NextActivityButton 
+                              course={course} 
+                              currentActivityId={activity.id} 
+                              orgslug={orgslug} 
+                            />
+                          </div>
+                        </div>
+                      )}
+
+                      {/* Fixed Activity Secondary Bar */}
+                      {activity && activity.published == true && activity.content.paid_access != false && (
+                        <FixedActivitySecondaryBar
+                          course={course}
+                          currentActivityId={activityid}
+                          orgslug={orgslug}
+                          activity={activity}
+                        />
+                      )}
+                      
+                      <div style={{ height: '100px' }}></div>
+                    </div>
                   </div>
-                </div>
-              )}
-            </GeneralWrapperStyled>
-          )}
-        </AIChatBotProvider>
+                )}
+              </GeneralWrapperStyled>
+            )}
+          </AIChatBotProvider>
+        </Suspense>
       </CourseProvider>
     </>
   )
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 470251d0..48bac3cf 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
@@ -78,7 +78,7 @@ const ActivityPage = async (params: any) => {
     fetchCourseMetadata(courseuuid, access_token),
     getActivityWithAuthHeader(
       activityid,
-      { revalidate: 0, tags: ['activities'] },
+      { revalidate: 60, tags: ['activities'] },
       access_token || null
     )
   ])
diff --git a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/page.tsx b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/page.tsx
index e3216016..df4fbccd 100644
--- a/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/page.tsx
+++ b/apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/page.tsx
@@ -24,7 +24,7 @@ export async function generateMetadata(props: MetadataProps): Promise<Metadata>
   })
   const course_meta = await getCourseMetadata(
     params.courseuuid,
-    { revalidate: 1800, tags: ['courses'] },
+    { revalidate: 0, tags: ['courses'] },
     access_token ? access_token : null
   )
 
diff --git a/apps/web/components/Pages/Activity/FixedActivitySecondaryBar.tsx b/apps/web/components/Pages/Activity/FixedActivitySecondaryBar.tsx
index ae86377a..3c6f6217 100644
--- a/apps/web/components/Pages/Activity/FixedActivitySecondaryBar.tsx
+++ b/apps/web/components/Pages/Activity/FixedActivitySecondaryBar.tsx
@@ -2,7 +2,7 @@
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 import { getUriWithOrg } from '@services/config/config'
 import { useRouter } from 'next/navigation'
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useState, useRef, useMemo, memo } from 'react'
 import ActivityIndicators from '@components/Pages/Courses/ActivityIndicators'
 import ActivityChapterDropdown from './ActivityChapterDropdown'
 import { getCourseThumbnailMediaDirectory } from '@services/media/media'
@@ -15,6 +15,86 @@ interface FixedActivitySecondaryBarProps {
   activity: any
 }
 
+// Memoized navigation buttons component
+const NavigationButtons = memo(({ 
+  prevActivity, 
+  nextActivity, 
+  currentIndex, 
+  allActivities, 
+  navigateToActivity 
+}: { 
+  prevActivity: any, 
+  nextActivity: any, 
+  currentIndex: number, 
+  allActivities: any[], 
+  navigateToActivity: (activity: any) => void 
+}) => (
+  <div className="flex items-center space-x-2 sm:space-x-3">
+    <button
+      onClick={() => navigateToActivity(prevActivity)}
+      className={`flex items-center space-x-1 sm:space-x-2 py-1.5 px-1.5 sm:px-2 rounded-md transition-all duration-200 ${
+        prevActivity 
+          ? 'text-gray-700 hover:bg-gray-100' 
+          : 'text-gray-300 cursor-not-allowed'
+      }`}
+      disabled={!prevActivity}
+      title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
+    >
+      <ChevronLeft size={16} className="shrink-0 sm:w-5 sm:h-5" />
+      <div className="flex flex-col items-start hidden sm:flex">
+        <span className="text-xs text-gray-500">Previous</span>
+        <span className="text-sm font-medium text-left truncate max-w-[100px] sm:max-w-[150px]">
+          {prevActivity ? prevActivity.name : 'No previous activity'}
+        </span>
+      </div>
+    </button>
+
+    <span className="text-sm font-medium text-gray-500 px-1 sm:px-2">
+      {currentIndex + 1} of {allActivities.length}
+    </span>
+
+    <button
+      onClick={() => navigateToActivity(nextActivity)}
+      className={`flex items-center space-x-1 sm:space-x-2 py-1.5 px-1.5 sm:px-2 rounded-md transition-all duration-200`}
+      disabled={!nextActivity}
+      title={nextActivity ? `Next: ${nextActivity.name}` : 'No next activity'}
+    >
+      <div className="flex flex-col items-end hidden sm:flex">
+        <span className={`text-xs ${nextActivity ? 'text-gray-500' : 'text-gray-500'}`}>Next</span>
+        <span className="text-sm font-medium text-right truncate max-w-[100px] sm:max-w-[150px]">
+          {nextActivity ? nextActivity.name : 'No next activity'}
+        </span>
+      </div>
+      <ChevronRight size={16} className="shrink-0 sm:w-5 sm:h-5" />
+    </button>
+  </div>
+));
+
+NavigationButtons.displayName = 'NavigationButtons';
+
+// Memoized course info component
+const CourseInfo = memo(({ course, org }: { course: any, org: any }) => (
+  <div className="flex items-center space-x-2 sm:space-x-4 min-w-0 flex-shrink">
+    <img
+      className="w-[35px] sm:w-[45px] h-[20px] sm:h-[26px] rounded-md object-cover flex-shrink-0"
+      src={`${getCourseThumbnailMediaDirectory(
+        org?.org_uuid,
+        course.course_uuid,
+        course.thumbnail_image
+      )}`}
+      alt=""
+    />
+    <div className="flex flex-col -space-y-0.5 min-w-0 hidden sm:block">
+      <p className="text-sm font-medium text-gray-500">Course</p>
+      <h1 className="font-semibold text-gray-900 text-base truncate">
+        {course.name}
+      </h1>
+    </div>
+  </div>
+));
+
+CourseInfo.displayName = 'CourseInfo';
+
 export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryBarProps): React.ReactNode {
   const router = useRouter();
   const [isScrolled, setIsScrolled] = useState(false);
@@ -22,12 +102,11 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
   const mainActivityInfoRef = useRef<HTMLDivElement | null>(null);
   const org = useOrg() as any;
 
-  // Function to find the current activity's position in the course
-  const findActivityPosition = () => {
+  // Memoize activity position calculation
+  const { allActivities, currentIndex } = useMemo(() => {
     let allActivities: any[] = [];
     let currentIndex = -1;
     
-    // Flatten all activities from all chapters
     props.course.chapters.forEach((chapter: any) => {
       chapter.activities.forEach((activity: any) => {
         const cleanActivityUuid = activity.activity_uuid?.replace('activity_', '');
@@ -37,7 +116,6 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
           chapterName: chapter.name
         });
         
-        // Check if this is the current activity
         if (cleanActivityUuid === props.currentActivityId.replace('activity_', '')) {
           currentIndex = allActivities.length - 1;
         }
@@ -45,15 +123,11 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
     });
     
     return { allActivities, currentIndex };
-  };
+  }, [props.course, props.currentActivityId]);
   
-  const { allActivities, currentIndex } = findActivityPosition();
-  
-  // Get previous and next activities
   const prevActivity = currentIndex > 0 ? allActivities[currentIndex - 1] : null;
   const nextActivity = currentIndex < allActivities.length - 1 ? allActivities[currentIndex + 1] : null;
   
-  // Navigate to an activity
   const navigateToActivity = (activity: any) => {
     if (!activity) return;
     
@@ -61,32 +135,26 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
     router.push(getUriWithOrg(props.orgslug, '') + `/course/${cleanCourseUuid}/activity/${activity.cleanUuid}`);
   };
 
-  // Handle scroll and intersection observer
   useEffect(() => {
     const handleScroll = () => {
       setIsScrolled(window.scrollY > 0);
     };
 
-    // Set up intersection observer for the main activity info
     const observer = new IntersectionObserver(
       ([entry]) => {
-        // Show the fixed bar when the main info is not visible
         setShouldShow(!entry.isIntersecting);
       },
       {
         threshold: [0, 0.1, 1],
-        rootMargin: '-80px 0px 0px 0px' // Increased margin to account for the header
+        rootMargin: '-80px 0px 0px 0px'
       }
     );
 
-    // Start observing the main activity info section with a slight delay to ensure DOM is ready
-    setTimeout(() => {
-      const mainActivityInfo = document.querySelector('.activity-info-section');
-      if (mainActivityInfo) {
-        mainActivityInfoRef.current = mainActivityInfo as HTMLDivElement;
-        observer.observe(mainActivityInfo);
-      }
-    }, 100);
+    const mainActivityInfo = document.querySelector('.activity-info-section');
+    if (mainActivityInfo) {
+      mainActivityInfoRef.current = mainActivityInfo as HTMLDivElement;
+      observer.observe(mainActivityInfo);
+    }
 
     window.addEventListener('scroll', handleScroll);
     
@@ -98,86 +166,29 @@ export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryB
     };
   }, []);
 
+  if (!shouldShow) return null;
+
   return (
-    <>
-      {shouldShow && (
-        <div 
-          className={`fixed top-[60px] left-0 right-0 z-40 bg-white/90 backdrop-blur-xl transition-all duration-300 animate-in fade-in slide-in-from-top ${
-            isScrolled ? 'nice-shadow' : ''
-          }`}
-        >
-          <div className="container mx-auto px-4">
-            <div className="flex items-center justify-between h-16 py-2">
-              {/* Left Section - Course Info and Navigation */}
-              <div className="flex items-center space-x-2 sm:space-x-4 min-w-0 flex-shrink">
-                <img
-                  className="w-[35px] sm:w-[45px] h-[20px] sm:h-[26px] rounded-md object-cover flex-shrink-0"
-                  src={`${getCourseThumbnailMediaDirectory(
-                    org?.org_uuid,
-                    props.course.course_uuid,
-                    props.course.thumbnail_image
-                  )}`}
-                  alt=""
-                />
-                <ActivityChapterDropdown
-                  course={props.course}
-                  currentActivityId={props.currentActivityId}
-                  orgslug={props.orgslug}
-                />
-                <div className="flex flex-col -space-y-0.5 min-w-0 hidden sm:block">
-                  <p className="text-sm font-medium text-gray-500">Course</p>
-                  <h1 className="font-semibold text-gray-900 text-base truncate">
-                    {props.course.name}
-                  </h1>
-                </div>
-              </div>
-
-              {/* Right Section - Navigation Controls */}
-              <div className="flex items-center flex-shrink-0">
-                <div className="flex items-center space-x-2 sm:space-x-3">
-                  <button
-                    onClick={() => navigateToActivity(prevActivity)}
-                    className={`flex items-center space-x-1 sm:space-x-2 py-1.5 px-1.5 sm:px-2 rounded-md transition-all duration-200 ${
-                      prevActivity 
-                        ? 'text-gray-700 hover:bg-gray-100' 
-                        : 'text-gray-300 cursor-not-allowed'
-                    }`}
-                    disabled={!prevActivity}
-                    title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
-                  >
-                    <ChevronLeft size={16} className="shrink-0 sm:w-5 sm:h-5" />
-                    <div className="flex flex-col items-start hidden sm:flex">
-                      <span className="text-xs text-gray-500">Previous</span>
-                      <span className="text-sm font-medium text-left truncate max-w-[100px] sm:max-w-[150px]">
-                        {prevActivity ? prevActivity.name : 'No previous activity'}
-                      </span>
-                    </div>
-                  </button>
-
-                  <span className="text-sm font-medium text-gray-500 px-1 sm:px-2">
-                    {currentIndex + 1} of {allActivities.length}
-                  </span>
-
-                  <button
-                    onClick={() => navigateToActivity(nextActivity)}
-                    className={`flex items-center space-x-1 sm:space-x-2 py-1.5 px-1.5 sm:px-2 rounded-md transition-all duration-200`}
-                    disabled={!nextActivity}
-                    title={nextActivity ? `Next: ${nextActivity.name}` : 'No next activity'}
-                  >
-                    <div className="flex flex-col items-end hidden sm:flex">
-                      <span className={`text-xs ${nextActivity ? 'text-gray-500' : 'text-gray-500'}`}>Next</span>
-                      <span className="text-sm font-medium text-right truncate max-w-[100px] sm:max-w-[150px]">
-                        {nextActivity ? nextActivity.name : 'No next activity'}
-                      </span>
-                    </div>
-                    <ChevronRight size={16} className="shrink-0 sm:w-5 sm:h-5" />
-                  </button>
-                </div>
-              </div>
-            </div>
+    <div 
+      className={`fixed top-[60px] left-0 right-0 z-40 bg-white/90 backdrop-blur-xl transition-all duration-300 animate-in fade-in slide-in-from-top ${
+        isScrolled ? 'nice-shadow' : ''
+      }`}
+    >
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between h-16 py-2">
+          <CourseInfo course={props.course} org={org} />
+          
+          <div className="flex items-center flex-shrink-0">
+            <NavigationButtons
+              prevActivity={prevActivity}
+              nextActivity={nextActivity}
+              currentIndex={currentIndex}
+              allActivities={allActivities}
+              navigateToActivity={navigateToActivity}
+            />
           </div>
         </div>
-      )}
-    </>
+      </div>
+    </div>
   );
 } 
\ No newline at end of file
diff --git a/apps/web/components/Pages/Courses/ActivityIndicators.tsx b/apps/web/components/Pages/Courses/ActivityIndicators.tsx
index 8e47f7f7..bfe3be7d 100644
--- a/apps/web/components/Pages/Courses/ActivityIndicators.tsx
+++ b/apps/web/components/Pages/Courses/ActivityIndicators.tsx
@@ -1,16 +1,99 @@
+'use client'
+import { BookOpenCheck, Check, FileText, Layers, Video } from 'lucide-react'
+import React, { useMemo, memo } from 'react'
 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
   orgslug: string
   course_uuid: string
-  current_activity?: any
+  current_activity?: string
 }
 
+// Helper functions
+function getActivityTypeLabel(activityType: string): string {
+  switch (activityType) {
+    case 'TYPE_VIDEO':
+      return 'Video'
+    case 'TYPE_DOCUMENT':
+      return 'Document'
+    case 'TYPE_DYNAMIC':
+      return 'Interactive'
+    case 'TYPE_ASSIGNMENT':
+      return 'Assignment'
+    default:
+      return 'Unknown'
+  }
+}
+
+function getActivityTypeBadgeColor(activityType: string): string {
+  switch (activityType) {
+    case 'TYPE_VIDEO':
+      return 'bg-blue-100 text-blue-700'
+    case 'TYPE_DOCUMENT':
+      return 'bg-purple-100 text-purple-700'
+    case 'TYPE_DYNAMIC':
+      return 'bg-green-100 text-green-700'
+    case 'TYPE_ASSIGNMENT':
+      return 'bg-orange-100 text-orange-700'
+    default:
+      return 'bg-gray-100 text-gray-700'
+  }
+}
+
+// Memoized activity type icon component
+const ActivityTypeIcon = memo(({ activityType }: { 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" />
+  }
+});
+
+ActivityTypeIcon.displayName = 'ActivityTypeIcon';
+
+// Memoized activity tooltip content
+const ActivityTooltipContent = memo(({ 
+  activity, 
+  isDone, 
+  isCurrent 
+}: { 
+  activity: any, 
+  isDone: boolean, 
+  isCurrent: boolean 
+}) => (
+  <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">
+      <ActivityTypeIcon activityType={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>
+));
+
+ActivityTooltipContent.displayName = 'ActivityTooltipContent';
+
 function ActivityIndicators(props: Props) {
   const course = props.course
   const orgslug = props.orgslug
@@ -22,26 +105,26 @@ function ActivityIndicators(props: Props) {
 
   const trail = props.course.trail
 
-  function isActivityDone(activity: any) {
+  // Memoize activity status checks
+  const isActivityDone = useMemo(() => (activity: any) => {
     let run = props.course.trail?.runs.find(
       (run: any) => run.course_id == props.course.id
     )
     if (run) {
       return run.steps.find((step: any) => step.activity_id == activity.id)
-    } else {
-      return false
     }
-  }
+    return false
+  }, [props.course]);
 
-  function isActivityCurrent(activity: any) {
+  const isActivityCurrent = useMemo(() => (activity: any) => {
     let activity_uuid = activity.activity_uuid.replace('activity_', '')
     if (props.current_activity && props.current_activity == activity_uuid) {
       return true
     }
     return false
-  }
+  }, [props.current_activity]);
 
-  function getActivityClass(activity: any) {
+  const getActivityClass = useMemo(() => (activity: any) => {
     if (isActivityDone(activity)) {
       return done_activity_style
     }
@@ -49,52 +132,7 @@ function ActivityIndicators(props: Props) {
       return current_activity_style
     }
     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-gray-100 text-gray-700 font-bold'
-      case 'TYPE_DOCUMENT':
-        return 'bg-gray-100 text-gray-700 font-bold'
-      case 'TYPE_DYNAMIC':
-        return 'bg-gray-100 text-gray-700 font-bold'
-      case 'TYPE_ASSIGNMENT':
-        return 'bg-gray-100 text-gray-700 font-bold'
-      default:
-        return 'bg-gray-100 text-gray-700 font-bold'
-    }
-  }
+  }, [isActivityDone, isActivityCurrent]);
 
   return (
     <div className="grid grid-flow-col justify-stretch space-x-6">
@@ -110,25 +148,11 @@ function ActivityIndicators(props: Props) {
                     sideOffset={8}
                     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>
+                      <ActivityTooltipContent 
+                        activity={activity}
+                        isDone={isDone}
+                        isCurrent={isCurrent}
+                      />
                     }
                     key={activity.activity_uuid}
                   >
@@ -143,9 +167,7 @@ function ActivityIndicators(props: Props) {
                       }
                     >
                       <div
-                        className={`h-[7px] w-auto ${getActivityClass(
-                          activity
-                        )} rounded-lg`}
+                        className={`h-[7px] w-auto ${getActivityClass(activity)} rounded-lg`}
                       ></div>
                     </Link>
                   </ToolTip>
@@ -159,4 +181,4 @@ function ActivityIndicators(props: Props) {
   )
 }
 
-export default ActivityIndicators
+export default memo(ActivityIndicators)