diff --git a/src/components/charts/ActivityContributionChart.js b/src/components/charts/ActivityContributionChart.js
index 4806166..782cba4 100644
--- a/src/components/charts/ActivityContributionChart.js
+++ b/src/components/charts/ActivityContributionChart.js
@@ -1,10 +1,12 @@
 import React, { useState, useCallback } from 'react';
 import { Tooltip } from 'primereact/tooltip';
 import { formatDateTime } from "@/utils/time";
+import useWindowWidth from '@/hooks/useWindowWidth';
 
 const ActivityContributionChart = ({ session }) => {
     const [contributionData, setContributionData] = useState({});
     const [totalActivities, setTotalActivities] = useState(0);
+    const windowWidth = useWindowWidth();
 
     // Prepare activity data
     const prepareActivityData = useCallback(() => {
@@ -156,6 +158,12 @@ const ActivityContributionChart = ({ session }) => {
     const calendar = generateCalendar();
     const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 
+    const getScaleClass = (width) => {
+        if (width <= 800) return 'scale-75 origin-top-left';
+        if (width <= 1000) return 'scale-95 origin-top-left';
+        return '';
+    };
+
     return (
         <div className="w-full mx-2 bg-gray-800 rounded-lg border border-gray-700 shadow-md h-[330px] max-lap:mx-0 max-lap:mt-2">
             <div className="flex flex-row justify-between items-center p-4">
@@ -164,7 +172,7 @@ 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">
+            <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
diff --git a/src/components/charts/CombinedContributionChart.js b/src/components/charts/CombinedContributionChart.js
index 1312ede..76675b7 100644
--- a/src/components/charts/CombinedContributionChart.js
+++ b/src/components/charts/CombinedContributionChart.js
@@ -2,10 +2,12 @@ import React, { useState, useCallback, useEffect } from 'react';
 import { useFetchGithubCommits } from '@/hooks/githubQueries/useFetchGithubCommits';
 import { Tooltip } from 'primereact/tooltip';
 import { formatDateTime } from "@/utils/time";
+import useWindowWidth from '@/hooks/useWindowWidth';
 
 const CombinedContributionChart = ({ session }) => {
     const [contributionData, setContributionData] = useState({});
     const [totalContributions, setTotalContributions] = useState(0);
+    const windowWidth = useWindowWidth();
 
     const prepareProgressData = useCallback(() => {
         if (!session?.user?.userCourses) return {};
@@ -180,6 +182,12 @@ const CombinedContributionChart = ({ session }) => {
         return months;
     }, [calendar]);
 
+    const getScaleClass = (width) => {
+        if (width <= 800) return 'overflow-x-auto';
+        if (width <= 1000) return 'scale-95 origin-top-left';
+        return '';
+    };
+
     return (
         <div className="w-full mx-2 bg-gray-800 rounded-lg border border-gray-700 shadow-md h-[330px] max-lap:mx-0 max-lap:mt-2">
             <div className="flex flex-row justify-between items-center p-4">
@@ -188,70 +196,72 @@ const CombinedContributionChart = ({ session }) => {
                     data-pr-tooltip="Combined total of GitHub commits and learning activities (starting/completing courses and lessons)" />
                 <Tooltip target=".pi-question-circle" position="left" />
             </div>
-            <div className="max-w-[910px] p-4">
-                {(isLoading || isFetching) && <h4 className="text-base font-semibold text-gray-200 mb-3">Loading contribution data... ({totalContributions} total contributions / activities fetched)</h4>}
-                {!isLoading && !isFetching &&
-                    <div className="flex justify-between items-center mb-3">
-                        <h4 className="text-base font-semibold text-gray-200">
-                            {totalContributions} total contributions / 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 className={`${getScaleClass(windowWidth)}`}>
+                <div className="min-w-[910px] p-4">
+                    {(isLoading || isFetching) && <h4 className="text-base font-semibold text-gray-200 mb-3">Loading contribution data... ({totalContributions} total contributions / activities fetched)</h4>}
+                    {!isLoading && !isFetching &&
+                        <div className="flex justify-between items-center mb-3">
+                            <h4 className="text-base font-semibold text-gray-200">
+                                {totalContributions} total contributions / 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].githubCount > 0 ? `${row[weekIndex].githubCount} contribution${row[weekIndex].githubCount !== 1 ? 's' : ''}` : '',
+                                                        row[weekIndex].activityCount > 0 ? `${row[weekIndex].activityCount} activit${row[weekIndex].activityCount !== 1 ? 'ies' : 'y'}` : ''
+                                                    ].filter(Boolean).join(' & ') || 'No contributions or activities'
+                                                        }`}
+                                                ></div>
+                                            )
+                                        ))}
+                                    </div>
+                                ))}
                             </div>
-                        ))}
+                            {/* Month labels moved to bottom */}
+                            <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 */}
+                    <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].githubCount > 0 ? `${row[weekIndex].githubCount} contribution${row[weekIndex].githubCount !== 1 ? 's' : ''}` : '',
-                                                    row[weekIndex].activityCount > 0 ? `${row[weekIndex].activityCount} activit${row[weekIndex].activityCount !== 1 ? 'ies' : 'y'}` : ''
-                                                ].filter(Boolean).join(' & ') || 'No contributions or activities'
-                                                    }`}
-                                            ></div>
-                                        )
-                                    ))}
-                                </div>
-                            ))}
-                        </div>
-                        {/* Month labels moved to bottom */}
-                        <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>
-                <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/UserProfile.js b/src/components/profile/UserProfile.js
index cd10e04..c35fc41 100644
--- a/src/components/profile/UserProfile.js
+++ b/src/components/profile/UserProfile.js
@@ -38,11 +38,11 @@ const UserProfile = () => {
                     )
                 }
                 <div className="w-full flex flex-row max-lap:flex-col">
-                    <div className="w-1/4 h-full max-lap:w-full">
+                    <div className="w-[22%] h-full max-lap:w-full">
                         {user && <UserProfileCard user={user} />}
                     </div>
 
-                    <div className="w-3/4 flex flex-col justify-center mx-auto max-lap:w-full">
+                    <div className="w-[78%] flex flex-col justify-center mx-auto max-lap:w-full">
                         {account && account?.provider === "github" ? (
                             <CombinedContributionChart session={session} />
                         ) : (
diff --git a/src/components/profile/UserProfileCard.js b/src/components/profile/UserProfileCard.js
index e7186e2..0c93869 100644
--- a/src/components/profile/UserProfileCard.js
+++ b/src/components/profile/UserProfileCard.js
@@ -71,15 +71,17 @@ const UserProfileCard = ({ user }) => {
             <h3 className="text-center">
                 {user.username || user?.name || user?.email || "Anon"}
             </h3>
-            <div className="flex flex-col gap-2 justify-center">
+            <div className="flex flex-col gap-2 justify-center w-full overflow-hidden">
                 {
                     user?.pubkey && (
-                        <div className="flex flex-row gap-2 justify-center">
-                            <p className="truncate">
-                                {nip19.npubEncode(user.pubkey)}
-                            </p>
+                        <div className="flex flex-row gap-2 items-center w-full overflow-hidden">
+                            <div className="overflow-hidden">
+                                <p className="text-ellipsis overflow-hidden whitespace-nowrap">
+                                    {nip19.npubEncode(user.pubkey)}
+                                </p>
+                            </div>
                             <Tooltip target=".pubkey-tooltip" content={"this is your account pubkey"} />
-                            <i className="pi pi-question-circle pubkey-tooltip text-xs cursor-pointer" />
+                            <i className="pi pi-question-circle pubkey-tooltip text-xs cursor-pointer shrink-0" />
                         </div>
                     )
                 }
@@ -134,7 +136,7 @@ const UserProfileCard = ({ user }) => {
 
     const DesktopProfileCard = () => (
         <div className="w-full bg-gray-800 rounded-lg p-2 py-1 border border-gray-700 shadow-md h-[330px]">
-            <div className="flex flex-row w-full justify-around">
+            <div className="flex flex-row w-full justify-evenly">
                 <Image
                     alt="user's avatar"
                     src={returnImageProxy(user.avatar, user?.pubkey || "")}
@@ -143,7 +145,7 @@ const UserProfileCard = ({ user }) => {
                     className="rounded-full my-4"
                 />
                 <div className="flex flex-col gap-2 pt-4 w-fit relative">
-                    <div className="absolute top-[-4px] right-[-10px]">
+                    <div className="absolute top-[-4px] right-[-30px]">
                         <i
                             className="pi pi-ellipsis-h text-2xl cursor-pointer"
                             onClick={(e) => menu.current.toggle(e)}
diff --git a/src/components/profile/UserSettings.js b/src/components/profile/UserSettings.js
index 6b0be80..9e9d045 100644
--- a/src/components/profile/UserSettings.js
+++ b/src/components/profile/UserSettings.js
@@ -32,7 +32,7 @@ const UserSettings = () => {
                     <h1 className="text-3xl font-bold mb-6">Settings</h1>
                 )}
                 <div className="w-full flex flex-row max-lap:flex-col">
-                    <div className="w-1/4 h-full max-lap:w-full">
+                    <div className="w-[22%] h-full max-lap:w-full">
                         <UserProfileCard user={user} />
 
                         {/* Lightning Info Card */}
@@ -51,7 +51,7 @@ const UserSettings = () => {
                         {user && <SubscribeModal user={user} />}
                     </div>
 
-                    <div className="w-3/4 flex flex-col justify-center mx-auto max-lap:w-full ml-2 max-lap:ml-0">
+                    <div className="w-[78%] flex flex-col justify-center mx-auto max-lap:w-full ml-2 max-lap:ml-0">
                         <UserRelaysTable 
                             ndk={ndk}
                             userRelays={userRelays}