diff --git a/src/pages/ProCanvas.jsx b/src/pages/ProCanvas.jsx
index 498c91f..b860285 100644
--- a/src/pages/ProCanvas.jsx
+++ b/src/pages/ProCanvas.jsx
@@ -537,10 +537,10 @@ const ProCanvasContent = () => {
     const [showRewards, setShowRewards] = useState(false);
 
     return (
-        <div className="min-h-screen bg-zinc-100/80 dark:bg-[#09090b] text-zinc-900 dark:text-white font-sans selection:bg-[#FFD700]/30 overflow-x-hidden pb-40 relative">
+        <div className="min-h-screen bg-zinc-100/80 dark:bg-[#09090b] text-zinc-900 dark:text-white font-sans selection:bg-[#FFD700]/30 overflow-x-hidden relative flex flex-col">
 
             {/* Ambient Background Glows */}
-            <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
+            <div className="absolute inset-0 pointer-events-none z-0 overflow-hidden">
                 <div className="absolute top-[-20%] left-[-10%] w-[60vw] h-[60vw] bg-[#3B82F6]/5 dark:bg-[#3B82F6]/10 rounded-full blur-[180px]" />
                 <div className="absolute bottom-[-10%] right-[-10%] w-[50vw] h-[50vw] bg-[#FFD700]/5 rounded-full blur-[180px]" />
             </div>
@@ -549,13 +549,13 @@ const ProCanvasContent = () => {
             <LevelUpModal />
 
             {/* TOP NAVIGATION */}
-            <header className="relative z-40 flex items-center justify-between px-8 py-5 backdrop-blur-3xl border-b border-zinc-200 dark:border-white/5 bg-white/90 dark:bg-zinc-950/60 sticky top-0">
-                <div className="flex items-center gap-4">
-                    <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-[#FFD700] to-[#FF8C00] flex items-center justify-center shadow-[0_0_25px_rgba(255,215,0,0.3)]">
+            <header className="relative z-40 flex items-center justify-between gap-3 px-4 sm:px-6 lg:px-8 py-4 sm:py-5 backdrop-blur-3xl border-b border-zinc-200 dark:border-white/5 bg-white/90 dark:bg-zinc-950/60 sticky top-0">
+                <div className="flex items-center gap-3 sm:gap-4 min-w-0">
+                    <div className="w-10 h-10 sm:w-12 sm:h-12 shrink-0 rounded-xl bg-gradient-to-br from-[#FFD700] to-[#FF8C00] flex items-center justify-center shadow-[0_0_25px_rgba(255,215,0,0.3)]">
                         <Flame size={24} className="text-black" fill="currentColor" />
                     </div>
-                    <div className="flex flex-col">
-                        <h1 className="font-['Barlow_Condensed'] font-black text-3xl uppercase tracking-widest leading-none text-zinc-900 dark:text-white drop-shadow-md">
+                    <div className="flex flex-col min-w-0">
+                        <h1 className="font-['Barlow_Condensed'] font-black text-2xl sm:text-3xl uppercase tracking-widest leading-none text-zinc-900 dark:text-white drop-shadow-md truncate">
                             LynkedUp <span className="text-[#FFD700]">Pro</span>
                         </h1>
                         <span className="text-xs font-bold text-zinc-500 dark:text-white/50 tracking-widest uppercase mt-0.5">SEASON 3 ACTIVE</span>
@@ -563,14 +563,14 @@ const ProCanvasContent = () => {
                 </div>
 
                 {/* Resource Bar (Like Coins/Points in FUT) */}
-                <div className="flex items-center gap-6">
+                <div className="flex items-center gap-3 sm:gap-6 shrink-0">
                     <div className="hidden md:flex items-center bg-zinc-100 dark:bg-black/60 border border-zinc-200 dark:border-white/10 rounded-full px-6 py-2 shadow-sm dark:shadow-inner">
                         <Trophy size={20} className="text-[#FFD700] mr-3" />
                         <span className="font-['Barlow_Condensed'] font-black text-2xl tracking-wider text-zinc-700 dark:text-white">
                             <CountUp to={gs.xp || 3360} /> <span className="text-zinc-400 dark:text-white/40 text-sm ml-1">XP</span>
                         </span>
                     </div>
-                    <div className="w-14 h-14 rounded-full p-1 bg-gradient-to-b from-[#FFD700] to-transparent cursor-pointer shadow-lg hover:scale-105 transition-transform">
+                    <div className="w-11 h-11 sm:w-14 sm:h-14 shrink-0 rounded-full p-1 bg-gradient-to-b from-[#FFD700] to-transparent cursor-pointer shadow-lg hover:scale-105 transition-transform">
                         <div className="w-full h-full rounded-full bg-zinc-900 border-2 border-transparent overflow-hidden">
                             <img src={profilePic} alt="Profile" className="w-full h-full object-cover" />
                         </div>
@@ -579,10 +579,10 @@ const ProCanvasContent = () => {
             </header>
 
             {/* MAIN DASHBOARD */}
-            <div className="relative z-10 w-full max-w-[1700px] mx-auto px-4 sm:px-6 mt-6 sm:mt-8 flex flex-col lg:flex-row gap-6 sm:gap-8">
+            <div className="relative z-10 flex-1 w-full max-w-[1700px] mx-auto px-4 sm:px-6 mt-6 sm:mt-8 flex flex-col xl:flex-row gap-6 sm:gap-8">
 
                 {/* LEFT: PLAYER CARD & LIVE ACTIONS */}
-                <div className="w-full lg:w-[360px] xl:w-[420px] shrink-0 flex flex-col gap-6 sm:gap-8">
+                <div className="w-full xl:w-[380px] 2xl:w-[420px] shrink-0 min-w-0 flex flex-col gap-6 sm:gap-8">
                     {/* The Ultimate Player Card */}
                     <OperatorCard user={mockDbUser} gamestate={gs} />
 
@@ -686,7 +686,7 @@ const ProCanvasContent = () => {
                 </div>
 
                 {/* RIGHT: LIVE EVENTS & CAMPAIGNS */}
-                <div className="flex-1 flex flex-col gap-8">
+                <div className="flex-1 min-w-0 flex flex-col gap-6 sm:gap-8">
 
                     {/* HERO LIVE EVENT BANNER (Today's Mission) */}
                     <motion.div
@@ -698,12 +698,12 @@ const ProCanvasContent = () => {
                         <div className="absolute inset-0 bg-gradient-to-r from-emerald-600 via-green-700 to-emerald-800 dark:from-green-900 dark:via-[#1A2E1A] dark:to-zinc-900 z-0" />
                         <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10 dark:opacity-30 mix-blend-overlay pointer-events-none z-0" />
 
-                        <div className="relative z-10 p-8 sm:p-10 flex flex-col sm:flex-row items-start sm:items-center justify-between min-h-[180px] gap-8">
-                            <div className="flex flex-col text-center sm:text-left">
-                                <span className="font-['Barlow_Condensed'] font-black text-base sm:text-lg uppercase tracking-widest text-[#AAFF00] mb-2 flex items-center justify-center sm:justify-start gap-2">
+                        <div className="relative z-10 p-6 sm:p-8 lg:p-10 flex flex-col md:flex-row md:items-center justify-between min-h-[160px] sm:min-h-[180px] gap-6">
+                            <div className="flex flex-col text-center md:text-left min-w-0">
+                                <span className="font-['Barlow_Condensed'] font-black text-base sm:text-lg uppercase tracking-widest text-[#AAFF00] mb-2 flex items-center justify-center md:justify-start gap-2">
                                     <Target size={20} /> LIVE EVENT ACTIVE
                                 </span>
-                                <h2 className="font-['Barlow_Condensed'] font-black text-4xl sm:text-5xl lg:text-6xl text-white uppercase tracking-tight leading-none drop-shadow-xl">
+                                <h2 className="font-['Barlow_Condensed'] font-black text-3xl sm:text-4xl lg:text-5xl xl:text-6xl text-white uppercase tracking-tight leading-none drop-shadow-xl">
                                     Knock 20 Doors<br />
                                     <span className="text-white/60">Pineland Heights</span>
                                 </h2>
@@ -713,8 +713,8 @@ const ProCanvasContent = () => {
                             <motion.div
                                 animate={{ scale: [1, 1.03, 1], boxShadow: ["0 0 30px rgba(170,255,0,0.4)", "0 0 60px rgba(170,255,0,0.7)", "0 0 30px rgba(170,255,0,0.4)"] }}
                                 transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
-                                className="shrink-0 flex items-center justify-center px-6 py-4 sm:px-8 sm:py-5 rounded-2xl sm:rounded-3xl bg-gradient-to-br from-[#AAFF00] to-[#558000] border-4 border-[#CCFF33] hover:brightness-110 active:scale-95 transition-all cursor-pointer">
-                                <span className="font-['Barlow_Condensed'] font-black text-2xl sm:text-3xl italic uppercase tracking-widest text-black flex items-center gap-2 sm:gap-3">
+                                className="w-full md:w-auto shrink-0 flex items-center justify-center px-6 py-4 sm:px-8 sm:py-5 rounded-2xl sm:rounded-3xl bg-gradient-to-br from-[#AAFF00] to-[#558000] border-4 border-[#CCFF33] hover:brightness-110 active:scale-95 transition-all cursor-pointer">
+                                <span className="font-['Barlow_Condensed'] font-black text-2xl sm:text-3xl italic uppercase tracking-widest text-black flex items-center gap-2 sm:gap-3 whitespace-nowrap">
                                     START PLAY <ChevronRight size={28} className="text-black sm:w-8 sm:h-8 w-6 h-6" />
                                 </span>
                             </motion.div>
@@ -934,8 +934,9 @@ const ProCanvasContent = () => {
                 </div>
             </div>
 
-            {/* FIXED BOTTOM NAVIGATION */}
-            <div className="fixed bottom-0 inset-x-0 h-[80px] sm:h-[100px] bg-white/95 dark:bg-zinc-950/90 backdrop-blur-2xl border-t border-zinc-200 dark:border-white/10 z-50 flex items-center justify-center pointer-events-none">
+            {/* STICKY BOTTOM NAVIGATION — sticky (not fixed) so it stays within the
+                layout's content area instead of spanning under the sidebar. */}
+            <div className="sticky bottom-0 inset-x-0 mt-8 h-[80px] sm:h-[100px] bg-white/95 dark:bg-zinc-950/90 backdrop-blur-2xl border-t border-zinc-200 dark:border-white/10 z-50 flex items-center justify-center pointer-events-none">
                 <div className="max-w-[1000px] w-full px-2 sm:px-6 flex items-center justify-between pointer-events-auto">
                     {[
                         { label: 'Map', icon: MapIcon, active: true },
@@ -960,7 +961,7 @@ const ProCanvasContent = () => {
             </div>
 
             {/* Background Texture Overlay */}
-            <div className="fixed inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-[0.015] pointer-events-none z-0" />
+            <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-[0.015] pointer-events-none z-0" />
 
             {/* Modal Injection */}
             <AnimatePresence>