diff --git a/src/components/charts/ActivityContributionChart.js b/src/components/charts/ActivityContributionChart.js
index 782cba4..3a855bb 100644
--- a/src/components/charts/ActivityContributionChart.js
+++ b/src/components/charts/ActivityContributionChart.js
@@ -1,6 +1,5 @@
 import React, { useState, useCallback } from 'react';
 import { Tooltip } from 'primereact/tooltip';
-import { formatDateTime } from "@/utils/time";
 import useWindowWidth from '@/hooks/useWindowWidth';
 
 const ActivityContributionChart = ({ session }) => {
@@ -159,7 +158,7 @@ const ActivityContributionChart = ({ session }) => {
     const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 
     const getScaleClass = (width) => {
-        if (width <= 800) return 'scale-75 origin-top-left';
+        if (width <= 800) return 'overflow-x-auto';
         if (width <= 1000) return 'scale-95 origin-top-left';
         return '';
     };
@@ -172,68 +171,70 @@ const ActivityContributionChart = ({ session }) => {
                     data-pr-tooltip="Total number of learning activities on the platform" />
                 <Tooltip target=".pi-question-circle" position="left" />
             </div>
-            <div className={`max-w-[910px] p-4 ${getScaleClass(windowWidth)}`}>
-                <div className="flex justify-between items-center mb-3">
-                    <h4 className="text-base font-semibold text-gray-200">
-                        {totalActivities} learning activities in the last year
-                    </h4>
-                </div>
-                <div className="flex">
-                    {/* Days of week labels */}
-                    <div className="flex flex-col gap-[3px] text-[11px] text-gray-400 pr-3">
-                        {weekDays.map((day, index) => (
-                            <div key={day} className="h-[14px] leading-[14px]">
-                                {index % 2 === 0 && day}
+            <div className={`${getScaleClass(windowWidth)}`}>
+                <div className="min-w-[910px] p-4">
+                    <div className="flex justify-between items-center mb-3">
+                        <h4 className="text-base font-semibold text-gray-200">
+                            {totalActivities} learning activities in the last year
+                        </h4>
+                    </div>
+                    <div className="flex">
+                        {/* Days of week labels */}
+                        <div className="flex flex-col gap-[3px] text-[11px] text-gray-400 pr-3">
+                            {weekDays.map((day, index) => (
+                                <div key={day} className="h-[13px] leading-[13px]">
+                                    {index % 2 === 0 && day}
+                                </div>
+                            ))}
+                        </div>
+                        <div className="flex flex-col">
+                            {/* Calendar grid */}
+                            <div className="flex gap-[3px]">
+                                {calendar[0].map((_, weekIndex) => (
+                                    <div key={weekIndex} className="flex flex-col gap-[3px]">
+                                        {calendar.map((row, dayIndex) => (
+                                            row[weekIndex] && (
+                                                <div
+                                                    key={`${weekIndex}-${dayIndex}`}
+                                                    className={`w-[14px] h-[14px] ${getColor(row[weekIndex].count)} rounded-[2px] cursor-pointer transition-colors duration-100`}
+                                                    title={`${row[weekIndex].date.toDateString()}: ${
+                                                        row[weekIndex].count > 0 
+                                                            ? `${row[weekIndex].count} activit${row[weekIndex].count !== 1 ? 'ies' : 'y'}`
+                                                            : 'No activities'
+                                                    }`}
+                                                ></div>
+                                            )
+                                        ))}
+                                    </div>
+                                ))}
                             </div>
-                        ))}
+                            {/* Month labels */}
+                            <div className="flex text-[11px] text-gray-400 h-[20px] mt-1 relative">
+                                {getMonthLabels().map((month, index) => (
+                                    <div
+                                        key={index}
+                                        className="absolute"
+                                        style={{ left: `${month.index * 15}px` }}
+                                    >
+                                        {month.name}
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
                     </div>
-                    <div className="flex flex-col">
-                        {/* Calendar grid */}
+                    {/* Legend */}
+                    <div className="text-[11px] text-gray-400 flex items-center justify-start pt-4">
+                        <span className="mr-2">Less</span>
                         <div className="flex gap-[3px]">
-                            {calendar[0].map((_, weekIndex) => (
-                                <div key={weekIndex} className="flex flex-col gap-[3px]">
-                                    {calendar.map((row, dayIndex) => (
-                                        row[weekIndex] && (
-                                            <div
-                                                key={`${weekIndex}-${dayIndex}`}
-                                                className={`w-[14px] h-[14px] ${getColor(row[weekIndex].count)} rounded-[2px] cursor-pointer transition-colors duration-100`}
-                                                title={`${row[weekIndex].date.toDateString()}: ${
-                                                    row[weekIndex].count > 0 
-                                                        ? `${row[weekIndex].count} activit${row[weekIndex].count !== 1 ? 'ies' : 'y'}`
-                                                        : 'No activities'
-                                                }`}
-                                            ></div>
-                                        )
-                                    ))}
-                                </div>
-                            ))}
-                        </div>
-                        {/* Month labels */}
-                        <div className="flex text-[11px] text-gray-400 h-[20px] mt-1">
-                            {getMonthLabels().map((month, index) => (
-                                <div
-                                    key={index}
-                                    className="absolute"
-                                    style={{ marginLeft: `${month.index * 15}px` }}
-                                >
-                                    {month.name}
-                                </div>
-                            ))}
+                            <div className="w-[14px] h-[14px] bg-gray-100 rounded-[2px]"></div>
+                            <div className="w-[14px] h-[14px] bg-green-300 rounded-[2px]"></div>
+                            <div className="w-[14px] h-[14px] bg-green-400 rounded-[2px]"></div>
+                            <div className="w-[14px] h-[14px] bg-green-600 rounded-[2px]"></div>
+                            <div className="w-[14px] h-[14px] bg-green-700 rounded-[2px]"></div>
                         </div>
+                        <span className="ml-2">More</span>
                     </div>
                 </div>
-                {/* Legend */}
-                <div className="text-[11px] text-gray-400 flex items-center justify-end">
-                    <span className="mr-2">Less</span>
-                    <div className="flex gap-[3px]">
-                        <div className="w-[14px] h-[14px] bg-gray-100 rounded-[2px]"></div>
-                        <div className="w-[14px] h-[14px] bg-green-300 rounded-[2px]"></div>
-                        <div className="w-[14px] h-[14px] bg-green-400 rounded-[2px]"></div>
-                        <div className="w-[14px] h-[14px] bg-green-600 rounded-[2px]"></div>
-                        <div className="w-[14px] h-[14px] bg-green-700 rounded-[2px]"></div>
-                    </div>
-                    <span className="ml-2">More</span>
-                </div>
             </div>
         </div>
     );
diff --git a/src/components/profile/UserBadges.js b/src/components/profile/UserBadges.js
index 6a82984..5671c07 100644
--- a/src/components/profile/UserBadges.js
+++ b/src/components/profile/UserBadges.js
@@ -105,7 +105,7 @@ const UserBadges = ({ visible, onHide }) => {
                     </div>
                 ) : badges.length === 0 ? (
                     <div className="text-center text-gray-400">
-                        No badges earned yet. Complete courses to earn badges!
+                        No badges earned yet. Get started on the Dev Journey to earn badges!
                     </div>
                 ) : (
                     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
diff --git a/src/components/profile/progress/UserProgress.js b/src/components/profile/progress/UserProgress.js
index c0324d3..2854dc2 100644
--- a/src/components/profile/progress/UserProgress.js
+++ b/src/components/profile/progress/UserProgress.js
@@ -193,9 +193,8 @@ const UserProgress = () => {
         <div className="bg-gray-800 rounded-lg p-4 pb-0 m-2 w-full border border-gray-700 shadow-md max-lap:mx-0">
             <div className="flex flex-row justify-between items-center">
                 <h1 className="text-3xl font-bold text-white mb-2">Dev Journey</h1>
-                <i className="pi pi-question-circle text-2xl cursor-pointer text-gray-200"
-                    data-pr-tooltip="Track your progress through the courses, showcase your GitHub contributions, submit projects, and earn badges!" />
-                <Tooltip target=".pi-question-circle" position="left" />
+                    <i className="pi pi-question-circle journey-tooltip text-2xl cursor-pointer text-gray-200" />
+                    <Tooltip target=".journey-tooltip" position="left" className="w-[300px]" content="This is an optional Dev Journey that will walk you through the primary course materials and help you learn how to code, gain the required experience to Build Bitcoin/Lightning/Nostr Apps, and set you up to go through the rest of the free workshops and other content on the platform." />
             </div>
             <p className="text-gray-400 mb-4">Track your progress through the courses, showcase your GitHub contributions, submit projects, and earn badges!</p>
 
@@ -280,6 +279,13 @@ const UserProgress = () => {
                                                             <span className={`${subTask.completed ? 'text-white' : 'text-gray-400'}`}>
                                                                 {subTask.status}
                                                             </span>
+                                                            {subTask.status === 'Connect your GitHub account' && (
+                                                                <>
+                                                                    <i className="pi pi-question-circle github-tooltip ml-2 text-sm cursor-pointer text-gray-200"
+                                                                        data-pr-tooltip="Connect your GitHub account to track your progress and submit projects" />
+                                                                    <Tooltip target=".github-tooltip" position="right" />
+                                                                </>
+                                                            )}
                                                         </div>
                                                         {subTask.status.includes('repository') && !subTask.completed && (
                                                             <RepoSelector 
@@ -310,11 +316,8 @@ const UserProgress = () => {
                                             <div className="mt-2 flex justify-end">
                                                 <GenericButton 
                                                     icon="pi pi-external-link"
+                                                    label="View Course"
                                                     onClick={() => router.push(`/course/${task.courseNAddress}`)}
-                                                    tooltip="View Course"
-                                                    tooltipOptions={{
-                                                        position: "top"
-                                                    }}
                                                     outlined
                                                     size="small"
                                                 />
diff --git a/src/hooks/tracking/useTrackVideoLesson.js b/src/hooks/tracking/useTrackVideoLesson.js
index 33a30ac..0f261a6 100644
--- a/src/hooks/tracking/useTrackVideoLesson.js
+++ b/src/hooks/tracking/useTrackVideoLesson.js
@@ -103,7 +103,7 @@ const useTrackVideoLesson = ({lessonId, videoDuration, courseId, videoPlayed, pa
     if (isAdmin) return;
 
     if (videoDuration && timeSpent >= Math.round(videoDuration * 0.8) && !completedRef.current) {
-      console.log('🎯 Video reached 90% threshold - Marking as completed');
+      console.log('🎯 Video reached 80% threshold - Marking as completed');
       markLessonAsCompleted();
     }
   }, [timeSpent, videoDuration, markLessonAsCompleted, isAdmin]);