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 b7f70ecc..e665561c 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
@@ -29,6 +29,9 @@ import { useMediaQuery } from 'usehooks-ts'
 import PaidCourseActivityDisclaimer from '@components/Objects/Courses/CourseActions/PaidCourseActivityDisclaimer'
 import { useContributorStatus } from '../../../../../../../../hooks/useContributorStatus'
 import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
+import ActivityNavigation from '@components/Dashboard/Pages/Activity/ActivityNavigation'
+import ActivityChapterDropdown from '@components/Dashboard/Pages/Activity/ActivityChapterDropdown'
+import FixedActivitySecondaryBar from '@components/Dashboard/Pages/Activity/FixedActivitySecondaryBar'
 
 interface ActivityClientProps {
   activityid: string
@@ -92,158 +95,167 @@ function ActivityClient(props: ActivityClientProps) {
       <CourseProvider courseuuid={course?.course_uuid}>
         <AIChatBotProvider>
           <GeneralWrapperStyled>
-            <div className="space-y-4 pt-4">
-              <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>
-              </div>
-              <ActivityIndicators
-                course_uuid={courseuuid}
-                current_activity={activityid}
-                orgslug={orgslug}
-                course={course}
-              />
-
-              <div className="flex justify-between items-center">
-                <div className="flex items-center space-x-3">
-                  <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>
-                <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 to Activity</span>
-                            </Link>
-                          )}
-                          <MoreVertical size={17} className="text-gray-300" />
-                          <MarkStatus
-                            activity={activity}
-                            activityid={activityid}
-                            course={course}
-                            orgslug={orgslug}
+            <div className="space-y-4 pt-0">
+              
+              
+              <div className="pt-2">
+                <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=""
                           />
-                        </>
-                      }
-                      {activity.activity_type == 'TYPE_ASSIGNMENT' &&
-                        <>
-                          <MoreVertical size={17} className="text-gray-300 " />
-                          <AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
-                            <AssignmentTools
-                              assignment={assignment}
-                              activity={activity}
-                              activityid={activityid}
-                              course={course}
-                              orgslug={orgslug}
-                            />
-                          </AssignmentSubmissionProvider>
-                        </>
-                      }
-                    </AuthenticatedClientElement>
-                  )}
-                </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>
-              )}
-
-              {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>
-                        )}
+                        </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>
-                  )}
-                </>
-              )}
+                  </div>
+
+                  <ActivityIndicators
+                    course_uuid={courseuuid}
+                    current_activity={activityid}
+                    orgslug={orgslug}
+                    course={course}
+                  />
+
+                  <div className="flex justify-between items-center">
+                    <div className="flex items-center space-x-3">
+                      <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>
+                    <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 to Activity</span>
+                                </Link>
+                              )}
+                              <MoreVertical size={17} className="text-gray-300" />
+                              <MarkStatus
+                                activity={activity}
+                                activityid={activityid}
+                                course={course}
+                                orgslug={orgslug}
+                              />
+                            </>
+                          )}
+                          {activity.activity_type == 'TYPE_ASSIGNMENT' && (
+                            <>
+                              <MoreVertical size={17} className="text-gray-300 " />
+                              <AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
+                                <AssignmentTools
+                                  assignment={assignment}
+                                  activity={activity}
+                                  activityid={activityid}
+                                  course={course}
+                                  orgslug={orgslug}
+                                />
+                              </AssignmentSubmissionProvider>
+                            </>
+                          )}
+                        </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>
+                )}
+
+                {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>
+                      </div>
+                    )}
+                  </>
+                )}
               
-              {/* Activity Navigation */}
-              {activity && activity.published == true && activity.content.paid_access != false && (
-                <ActivityNavigation
-                  course={course}
-                  currentActivityId={activity.activity_uuid ? activity.activity_uuid.replace('activity_', '') : activityid.replace('activity_', '')}
-                  orgslug={orgslug}
-                />
-              )}
-              
-              {<div style={{ height: '100px' }}></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>
           </GeneralWrapperStyled>
         </AIChatBotProvider>
@@ -485,335 +497,4 @@ function AssignmentTools(props: {
   return null
 }
 
-function ActivityChapterDropdown(props: {
-  course: any
-  currentActivityId: string
-  orgslug: string
-}): React.ReactNode {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const dropdownRef = React.useRef<HTMLDivElement>(null);
-  const isMobile = useMediaQuery('(max-width: 768px)');
-
-  // Close dropdown when clicking outside
-  React.useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  const toggleDropdown = () => {
-    setIsOpen(!isOpen);
-  };
-
-  // Function to get the appropriate icon for activity type
-  const getActivityTypeIcon = (activityType: string) => {
-    switch (activityType) {
-      case 'TYPE_VIDEO':
-        return <Video size={16} />;
-      case 'TYPE_DOCUMENT':
-        return <FileText size={16} />;
-      case 'TYPE_DYNAMIC':
-        return <Layers size={16} />;
-      case 'TYPE_ASSIGNMENT':
-        return <BookOpenCheck size={16} />;
-      default:
-        return <FileText size={16} />;
-    }
-  };
-
-  // Function to get the appropriate badge color for activity type
-  const getActivityTypeBadgeColor = (activityType: string) => {
-    return 'bg-gray-100 text-gray-600';
-  };
-
-  return (
-    <div className="relative" ref={dropdownRef}>
-      <button
-        onClick={toggleDropdown}
-        className="flex items-center justify-center bg-white nice-shadow p-2.5 rounded-full cursor-pointer"
-        aria-label="View all activities"
-        title="View all activities"
-      >
-        <ListTree size={18} className="text-gray-700" />
-      </button>
-      
-      {isOpen && (
-        <div className={`absolute z-50 mt-2 ${isMobile ? 'left-0 w-[90vw] sm:w-80' : 'left-0 w-80'} max-h-[70vh] cursor-pointer overflow-y-auto bg-white rounded-lg shadow-xl border border-gray-200 py-2 animate-in fade-in duration-200`}>
-          <div className="px-4 py-2 border-b border-gray-100 flex justify-between items-center">
-            <h3 className="font-bold text-gray-800">Course Content</h3>
-            <button 
-              onClick={() => setIsOpen(false)}
-              className="text-gray-500 hover:text-gray-700 p-1 rounded-full hover:bg-gray-100 cursor-pointer"
-            >
-              <X size={18} />
-            </button>
-          </div>
-          
-          <div className="py-1">
-            {props.course.chapters.map((chapter: any) => (
-              <div key={chapter.id} className="mb-2">
-                <div className="px-4 py-2 font-medium text-gray-600 bg-gray-50 border-y border-gray-100 flex items-center">
-                  <div className="flex items-center space-x-2">
-                    <Folder size={16} className="text-gray-400" />
-                    <span>{chapter.name}</span>
-                  </div>
-                </div>
-                <div className="py-1">
-                  {chapter.activities.map((activity: any) => {
-                    // Remove any prefixes from UUIDs
-                    const cleanActivityUuid = activity.activity_uuid?.replace('activity_', '');
-                    const cleanCourseUuid = props.course.course_uuid?.replace('course_', '');
-                    
-                    return (
-                      <Link
-                        key={activity.id}
-                        href={getUriWithOrg(props.orgslug, '') + `/course/${cleanCourseUuid}/activity/${cleanActivityUuid}`}
-                        prefetch={false}
-                        onClick={() => setIsOpen(false)}
-                      >
-                        <div 
-                          className={`px-4 py-2.5 hover:bg-gray-100 transition-colors flex items-center ${
-                            cleanActivityUuid === props.currentActivityId.replace('activity_', '') ? 'bg-gray-50 border-l-2 border-gray-300 pl-3 font-medium' : ''
-                          }`}
-                        >
-                          <div className="flex-1 flex items-center gap-2">
-                            <span className="text-gray-400">
-                              {getActivityTypeIcon(activity.activity_type)}
-                            </span>
-                            <div className="text-sm">
-                              {activity.name}
-                            </div>
-                          </div>
-                          {props.course.trail?.runs?.find(
-                            (run: any) => run.course_id === props.course.id
-                          )?.steps?.find(
-                            (step: any) => (step.activity_id === activity.id || step.activity_id === activity.activity_uuid) && step.complete === true
-                          ) && (
-                            <span className="ml-2 text-gray-400 shrink-0">
-                              <Check size={14} />
-                            </span>
-                          )}
-                        </div>
-                      </Link>
-                    );
-                  })}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ActivityNavigation(props: {
-  course: any
-  currentActivityId: string
-  orgslug: string
-}): React.ReactNode {
-  const router = useRouter();
-  const isMobile = useMediaQuery('(max-width: 768px)');
-  const [isBottomNavVisible, setIsBottomNavVisible] = React.useState(true);
-  const bottomNavRef = React.useRef<HTMLDivElement>(null);
-  const [navWidth, setNavWidth] = React.useState<number | null>(null);
-  
-  // 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
-    props.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 === props.currentActivityId.replace('activity_', '')) {
-          currentIndex = allActivities.length - 1;
-        }
-      });
-    });
-    
-    return { allActivities, currentIndex };
-  };
-  
-  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;
-    
-    const cleanCourseUuid = props.course.course_uuid?.replace('course_', '');
-    router.push(getUriWithOrg(props.orgslug, '') + `/course/${cleanCourseUuid}/activity/${activity.cleanUuid}`);
-  };
-
-  // Set up intersection observer to detect when bottom nav is out of viewport
-  // and measure the width of the bottom navigation
-  React.useEffect(() => {
-    if (!bottomNavRef.current) return;
-    
-    // Update width when component mounts and on window resize
-    const updateWidth = () => {
-      if (bottomNavRef.current) {
-        setNavWidth(bottomNavRef.current.offsetWidth);
-      }
-    };
-    
-    // Initial width measurement
-    updateWidth();
-    
-    // Set up resize listener
-    window.addEventListener('resize', updateWidth);
-    
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        setIsBottomNavVisible(entry.isIntersecting);
-      },
-      { threshold: 0.1 }
-    );
-    
-    observer.observe(bottomNavRef.current);
-    
-    return () => {
-      window.removeEventListener('resize', updateWidth);
-      if (bottomNavRef.current) {
-        observer.unobserve(bottomNavRef.current);
-      }
-    };
-  }, []);
-
-  // Navigation buttons component - reused for both top and bottom
-  const NavigationButtons = ({ isFloating = false }) => (
-    <div className={`${isFloating ? 'flex justify-between' : 'grid grid-cols-3'} items-center w-full`}>
-      {isFloating ? (
-        // Floating navigation - original flex layout
-        <>
-          <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>
-          
-          <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>
-        </>
-      ) : (
-        // Regular navigation - grid layout with centered counter
-        <>
-          <div className="justify-self-start">
-            <button
-              onClick={() => navigateToActivity(prevActivity)}
-              className={`flex items-center space-x-1.5 px-3.5 py-2 rounded-md transition-all duration-200 cursor-pointer ${
-                prevActivity 
-                  ? 'bg-white nice-shadow text-gray-700' 
-                  : 'bg-gray-100 text-gray-400 cursor-not-allowed'
-              }`}
-              disabled={!prevActivity}
-              title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
-            >
-              <ChevronLeft size={16} className="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="text-sm text-gray-500 justify-self-center">
-            {currentIndex + 1} of {allActivities.length}
-          </div>
-          
-          <div className="justify-self-end">
-            <button
-              onClick={() => navigateToActivity(nextActivity)}
-              className={`flex items-center space-x-1.5 px-3.5 py-2 rounded-md transition-all duration-200 cursor-pointer ${
-                nextActivity 
-                  ? 'bg-white nice-shadow text-gray-700' 
-                  : 'bg-gray-100 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={16} className="shrink-0" />
-            </button>
-          </div>
-        </>
-      )}
-    </div>
-  );
-  
-  return (
-    <>
-      {/* Bottom navigation (in-place) */}
-      <div ref={bottomNavRef} className="mt-6 mb-2 w-full">
-        <NavigationButtons isFloating={false} />
-      </div>
-      
-      {/* Floating bottom navigation - shown when bottom nav is not visible */}
-      {!isBottomNavVisible && (
-        <div className="fixed bottom-8 left-1/2 transform -translate-x-1/2 z-50 w-[85%] sm:w-auto sm:min-w-[350px] max-w-lg transition-all duration-300 ease-in-out">
-          <div 
-            className="bg-white/90 backdrop-blur-xl rounded-full py-1.5 px-2.5 shadow-xs animate-in fade-in slide-in-from-bottom duration-300"
-          >
-            <NavigationButtons isFloating={true} />
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
-
 export default ActivityClient
diff --git a/apps/web/components/Dashboard/Pages/Activity/ActivityChapterDropdown.tsx b/apps/web/components/Dashboard/Pages/Activity/ActivityChapterDropdown.tsx
new file mode 100644
index 00000000..5c186634
--- /dev/null
+++ b/apps/web/components/Dashboard/Pages/Activity/ActivityChapterDropdown.tsx
@@ -0,0 +1,167 @@
+'use client'
+import { useMediaQuery } from 'usehooks-ts'
+import { BookOpenCheck, Check, FileText, Folder, Layers, ListTree, Video, X, StickyNote, Backpack, ArrowRight } from 'lucide-react'
+import { getUriWithOrg } from '@services/config/config'
+import Link from 'next/link'
+import React from 'react'
+
+interface ActivityChapterDropdownProps {
+  course: any
+  currentActivityId: string
+  orgslug: string
+}
+
+export default function ActivityChapterDropdown(props: ActivityChapterDropdownProps): React.ReactNode {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const dropdownRef = React.useRef<HTMLDivElement>(null);
+  const isMobile = useMediaQuery('(max-width: 768px)');
+
+  // Close dropdown when clicking outside
+  React.useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+
+  // Function to get the appropriate icon for activity type
+  const getActivityTypeIcon = (activityType: string) => {
+    switch (activityType) {
+      case 'TYPE_VIDEO':
+        return <Video size={10} />;
+      case 'TYPE_DOCUMENT':
+        return <FileText size={10} />;
+      case 'TYPE_DYNAMIC':
+        return <StickyNote size={10} />;
+      case 'TYPE_ASSIGNMENT':
+        return <Backpack size={10} />;
+      default:
+        return <FileText size={10} />;
+    }
+  };
+
+  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';
+    }
+  };
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={toggleDropdown}
+        className="flex items-center justify-center bg-white nice-shadow p-2 rounded-full cursor-pointer"
+        aria-label="View all activities"
+        title="View all activities"
+      >
+        <ListTree size={16} className="text-gray-700" />
+      </button>
+      
+      {isOpen && (
+        <div className={`absolute z-50 mt-2 ${isMobile ? 'left-0 w-[90vw] sm:w-72' : 'left-0 w-72'} max-h-[70vh] cursor-pointer overflow-y-auto bg-white rounded-lg shadow-xl border border-gray-200 py-1 animate-in fade-in duration-200`}>
+          <div className="px-3 py-1.5 border-b border-gray-100 flex justify-between items-center">
+            <h3 className="text-sm font-semibold text-gray-800">Course Content</h3>
+            <button 
+              onClick={() => setIsOpen(false)}
+              className="text-gray-500 hover:text-gray-700 p-1 rounded-full hover:bg-gray-100 cursor-pointer"
+            >
+              <X size={14} />
+            </button>
+          </div>
+          
+          <div className="py-0.5">
+            {props.course.chapters.map((chapter: any) => (
+              <div key={chapter.id} className="mb-1">
+                <div className="px-3 py-1.5 text-sm font-medium text-gray-600 bg-gray-50 border-y border-gray-100 flex items-center">
+                  <div className="flex items-center space-x-1.5">
+                    <Folder size={14} className="text-gray-400" />
+                    <span>{chapter.name}</span>
+                  </div>
+                </div>
+                <div className="py-0.5">
+                  {chapter.activities.map((activity: any) => {
+                    const cleanActivityUuid = activity.activity_uuid?.replace('activity_', '');
+                    const cleanCourseUuid = props.course.course_uuid?.replace('course_', '');
+                    const isCurrent = cleanActivityUuid === props.currentActivityId.replace('activity_', '');
+                    
+                    return (
+                      <Link
+                        key={activity.id}
+                        href={getUriWithOrg(props.orgslug, '') + `/course/${cleanCourseUuid}/activity/${cleanActivityUuid}`}
+                        prefetch={false}
+                        onClick={() => setIsOpen(false)}
+                      >
+                        <div 
+                          className={`group hover:bg-neutral-50 transition-colors px-3 py-2 ${
+                            isCurrent ? 'bg-neutral-50 border-l-2 border-neutral-300 pl-2.5 font-medium' : ''
+                          }`}
+                        >
+                          <div className="flex space-x-2 items-center">
+                            <div className="flex items-center">
+                              {props.course.trail?.runs?.find(
+                                (run: any) => run.course_id === props.course.id
+                              )?.steps?.find(
+                                (step: any) => (step.activity_id === activity.id || step.activity_id === activity.activity_uuid) && step.complete === true
+                              ) ? (
+                                <div className="relative cursor-pointer">
+                                  <Check size={14} className="stroke-[2.5] text-teal-600" />
+                                </div>
+                              ) : (
+                                <div className="text-neutral-300 cursor-pointer">
+                                  <Check size={14} className="stroke-[2]" />
+                                </div>
+                              )}
+                            </div>
+                            <div className="flex flex-col grow">
+                              <div className="flex items-center space-x-1.5 w-full">
+                                <p className="text-sm font-medium text-neutral-600 group-hover:text-neutral-800 transition-colors">
+                                  {activity.name}
+                                </p>
+                                {isCurrent && (
+                                  <div className="flex items-center space-x-1 text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded-full text-[10px] font-medium animate-pulse">
+                                    <span>Current</span>
+                                  </div>
+                                )}
+                              </div>
+                              <div className="flex items-center space-x-1 mt-0.5 text-neutral-400">
+                                {getActivityTypeIcon(activity.activity_type)}
+                                <span className="text-[10px] font-medium">
+                                  {getActivityTypeLabel(activity.activity_type)}
+                                </span>
+                              </div>
+                            </div>
+                            <div className="text-neutral-300 group-hover:text-neutral-400 transition-colors cursor-pointer">
+                              <ArrowRight size={12} />
+                            </div>
+                          </div>
+                        </div>
+                      </Link>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/apps/web/components/Dashboard/Pages/Activity/ActivityNavigation.tsx b/apps/web/components/Dashboard/Pages/Activity/ActivityNavigation.tsx
new file mode 100644
index 00000000..e7f4bb55
--- /dev/null
+++ b/apps/web/components/Dashboard/Pages/Activity/ActivityNavigation.tsx
@@ -0,0 +1,211 @@
+'use client'
+import { useRouter } from 'next/navigation'
+import { useMediaQuery } from 'usehooks-ts'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { getUriWithOrg } from '@services/config/config'
+import React from 'react'
+
+interface ActivityNavigationProps {
+  course: any
+  currentActivityId: string
+  orgslug: string
+}
+
+export default function ActivityNavigation(props: ActivityNavigationProps): React.ReactNode {
+  const router = useRouter();
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  const [isBottomNavVisible, setIsBottomNavVisible] = React.useState(true);
+  const bottomNavRef = React.useRef<HTMLDivElement>(null);
+  const [navWidth, setNavWidth] = React.useState<number | null>(null);
+  
+  // 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
+    props.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 === props.currentActivityId.replace('activity_', '')) {
+          currentIndex = allActivities.length - 1;
+        }
+      });
+    });
+    
+    return { allActivities, currentIndex };
+  };
+  
+  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;
+    
+    const cleanCourseUuid = props.course.course_uuid?.replace('course_', '');
+    router.push(getUriWithOrg(props.orgslug, '') + `/course/${cleanCourseUuid}/activity/${activity.cleanUuid}`);
+  };
+
+  // Set up intersection observer to detect when bottom nav is out of viewport
+  // and measure the width of the bottom navigation
+  React.useEffect(() => {
+    if (!bottomNavRef.current) return;
+    
+    // Update width when component mounts and on window resize
+    const updateWidth = () => {
+      if (bottomNavRef.current) {
+        setNavWidth(bottomNavRef.current.offsetWidth);
+      }
+    };
+    
+    // Initial width measurement
+    updateWidth();
+    
+    // Set up resize listener
+    window.addEventListener('resize', updateWidth);
+    
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsBottomNavVisible(entry.isIntersecting);
+      },
+      { threshold: 0.1 }
+    );
+    
+    observer.observe(bottomNavRef.current);
+    
+    return () => {
+      window.removeEventListener('resize', updateWidth);
+      if (bottomNavRef.current) {
+        observer.unobserve(bottomNavRef.current);
+      }
+    };
+  }, []);
+
+  // Navigation buttons component - reused for both top and bottom
+  const NavigationButtons = ({ isFloating = false }) => (
+    <div className={`${isFloating ? 'flex justify-between' : 'grid grid-cols-3'} items-center w-full`}>
+      {isFloating ? (
+        // Floating navigation - original flex layout
+        <>
+          <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>
+          
+          <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>
+        </>
+      ) : (
+        // Regular navigation - grid layout with centered counter
+        <>
+          <div className="justify-self-start">
+            <button
+              onClick={() => navigateToActivity(prevActivity)}
+              className={`flex items-center space-x-1.5 px-3.5 py-2 rounded-md transition-all duration-200 cursor-pointer ${
+                prevActivity 
+                  ? 'bg-white nice-shadow text-gray-700' 
+                  : 'bg-gray-100 text-gray-400 cursor-not-allowed'
+              }`}
+              disabled={!prevActivity}
+              title={prevActivity ? `Previous: ${prevActivity.name}` : 'No previous activity'}
+            >
+              <ChevronLeft size={16} className="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="text-sm text-gray-500 justify-self-center">
+            {currentIndex + 1} of {allActivities.length}
+          </div>
+          
+          <div className="justify-self-end">
+            <button
+              onClick={() => navigateToActivity(nextActivity)}
+              className={`flex items-center space-x-1.5 px-3.5 py-2 rounded-md transition-all duration-200 cursor-pointer ${
+                nextActivity 
+                  ? 'bg-white nice-shadow text-gray-700' 
+                  : 'bg-gray-100 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={16} className="shrink-0" />
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+  
+  return (
+    <>
+      {/* Bottom navigation (in-place) */}
+      <div ref={bottomNavRef} className="mt-6 mb-2 w-full">
+        <NavigationButtons isFloating={false} />
+      </div>
+      
+      {/* Floating bottom navigation - shown when bottom nav is not visible */}
+      {!isBottomNavVisible && (
+        <div className="fixed bottom-8 left-1/2 transform -translate-x-1/2 z-50 w-[85%] sm:w-auto sm:min-w-[350px] max-w-lg transition-all duration-300 ease-in-out">
+          <div 
+            className="bg-white/90 backdrop-blur-xl rounded-full py-1.5 px-2.5 shadow-xs animate-in fade-in slide-in-from-bottom duration-300"
+          >
+            <NavigationButtons isFloating={true} />
+          </div>
+        </div>
+      )}
+    </>
+  );
+} 
\ No newline at end of file
diff --git a/apps/web/components/Dashboard/Pages/Activity/FixedActivitySecondaryBar.tsx b/apps/web/components/Dashboard/Pages/Activity/FixedActivitySecondaryBar.tsx
new file mode 100644
index 00000000..56ecdf43
--- /dev/null
+++ b/apps/web/components/Dashboard/Pages/Activity/FixedActivitySecondaryBar.tsx
@@ -0,0 +1,187 @@
+'use client'
+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 ActivityIndicators from '@components/Pages/Courses/ActivityIndicators'
+import ActivityChapterDropdown from './ActivityChapterDropdown'
+import { getCourseThumbnailMediaDirectory } from '@services/media/media'
+import { useOrg } from '@components/Contexts/OrgContext'
+
+interface FixedActivitySecondaryBarProps {
+  course: any
+  currentActivityId: string
+  orgslug: string
+  activity: any
+}
+
+export default function FixedActivitySecondaryBar(props: FixedActivitySecondaryBarProps): React.ReactNode {
+  const router = useRouter();
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [shouldShow, setShouldShow] = useState(false);
+  const mainActivityInfoRef = useRef<HTMLDivElement | null>(null);
+  const org = useOrg() as any;
+
+  // 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
+    props.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 === props.currentActivityId.replace('activity_', '')) {
+          currentIndex = allActivities.length - 1;
+        }
+      });
+    });
+    
+    return { allActivities, currentIndex };
+  };
+  
+  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;
+    
+    const cleanCourseUuid = props.course.course_uuid?.replace('course_', '');
+    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
+      }
+    );
+
+    // 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);
+
+    window.addEventListener('scroll', handleScroll);
+    
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      if (mainActivityInfoRef.current) {
+        observer.unobserve(mainActivityInfoRef.current);
+      }
+    };
+  }, []);
+
+  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-xs font-medium text-gray-500">Course</p>
+                  <h1 className="font-semibold text-gray-900 text-sm 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={14} className="shrink-0 sm:w-4 sm:h-4" />
+                    <div className="flex flex-col items-start hidden sm:flex">
+                      <span className="text-[10px] text-gray-500">Previous</span>
+                      <span className="text-xs font-medium text-left truncate max-w-[100px] sm:max-w-[150px]">
+                        {prevActivity ? prevActivity.name : 'No previous activity'}
+                      </span>
+                    </div>
+                  </button>
+
+                  <span className="text-xs 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 ${
+                      nextActivity 
+                        ? 'bg-gray-100 text-gray-700 hover:bg-gray-200' 
+                        : 'text-gray-300 cursor-not-allowed'
+                    }`}
+                    disabled={!nextActivity}
+                    title={nextActivity ? `Next: ${nextActivity.name}` : 'No next activity'}
+                  >
+                    <div className="flex flex-col items-end hidden sm:flex">
+                      <span className={`text-[10px] ${nextActivity ? 'text-gray-500' : 'text-gray-500'}`}>Next</span>
+                      <span className="text-xs font-medium text-right truncate max-w-[100px] sm:max-w-[150px]">
+                        {nextActivity ? nextActivity.name : 'No next activity'}
+                      </span>
+                    </div>
+                    <ChevronRight size={14} className="shrink-0 sm:w-4 sm:h-4" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+} 
\ No newline at end of file