diff --git a/docs/development/CENTRAL.md b/docs/development/CENTRAL.md
index 9c2877a..46f4f23 100644
--- a/docs/development/CENTRAL.md
+++ b/docs/development/CENTRAL.md
@@ -37,3 +37,4 @@
 - [Cube Sticky Sidebar](./devlog/2025-12-17-003000_cube_sticky_sidebar.md): Completed. Made the Cube Manager left sidebar sticky to improve usability with long pack lists.
 - [Cube Full Width Layout](./devlog/2025-12-17-003500_cube_full_width.md): Completed. Updated Cube Manager to use the full screen width.
 - [Cube Archidekt View](./devlog/2025-12-17-004500_archidekt_view.md): Completed. Implemented column-based stacked view for packs.
+- [Cube Mobile UI Fixes](./devlog/2025-12-17-005000_mobile_ui_fixes.md): Completed. Fixed overlapping elements and disabled hover previews on mobile.
diff --git a/docs/development/devlog/2025-12-17-005000_mobile_ui_fixes.md b/docs/development/devlog/2025-12-17-005000_mobile_ui_fixes.md
new file mode 100644
index 0000000..0669523
--- /dev/null
+++ b/docs/development/devlog/2025-12-17-005000_mobile_ui_fixes.md
@@ -0,0 +1,20 @@
+# Cube Manager Mobile Improvements
+
+## Objective
+Fix usability issues on mobile devices where UI elements were overlapping and "unusable".
+
+## Changes
+1.  **Sidebar Responsiveness**:
+    -   Modified `CubeManager.tsx` to apply `sticky` positioning to the left sidebar *only* on large screens (`lg:` prefix). On mobile, it is now standard static flow.
+    -   Limited `max-height` and `overflow-y-auto` only to `lg:` screens.
+
+2.  **Header Improvements**:
+    -   Updated the "Packs" sticky header in `CubeManager.tsx` to handle wrapping gracefully.
+    -   Added `backdrop-blur-xl` and slightly higher opacity to ensure content behind it doesn't bleed through visually (fixing "overlap" perception).
+    -   Enabled `overflow-x-auto` for the buttons container to prevent them from breaking out of the viewport on very narrow screens.
+
+3.  **Disable Heavy Hovers**:
+    -   Modified `CardPreview.tsx` to disable the `FloatingPreview` (large full-card hover) on devices with width < 1024px. This prevents the preview from sticking or covering the UI on touch devices.
+
+## Result
+The UI should now be clean and usable on mobile, with no overlapping elements and a natural scroll flow.
diff --git a/src/client/src/components/CardPreview.tsx b/src/client/src/components/CardPreview.tsx
index a02105c..ba383fd 100644
--- a/src/client/src/components/CardPreview.tsx
+++ b/src/client/src/components/CardPreview.tsx
@@ -57,6 +57,8 @@ export const CardHoverWrapper: React.FC<{ card: DraftCard; children: React.React
     setMousePos({ x: e.clientX, y: e.clientY });
   };
 
+  const isMobile = typeof window !== 'undefined' && window.innerWidth < 1024; // Disable on tablet/mobile
+
   return (
     <div
       className={className}
@@ -65,7 +67,7 @@ export const CardHoverWrapper: React.FC<{ card: DraftCard; children: React.React
       onMouseMove={handleMouseMove}
     >
       {children}
-      {isHovering && hasImage && (
+      {isHovering && hasImage && !isMobile && (
         <FloatingPreview card={card} x={mousePos.x} y={mousePos.y} />
       )}
     </div>
diff --git a/src/client/src/modules/cube/CubeManager.tsx b/src/client/src/modules/cube/CubeManager.tsx
index 55d9ac7..45bff5b 100644
--- a/src/client/src/modules/cube/CubeManager.tsx
+++ b/src/client/src/modules/cube/CubeManager.tsx
@@ -327,7 +327,7 @@ export const CubeManager: React.FC<CubeManagerProps> = ({ packs, setPacks, onGoT
     <div className="h-full overflow-y-auto w-full grid grid-cols-1 lg:grid-cols-12 gap-8 p-4 md:p-6">
 
       {/* --- LEFT COLUMN: CONTROLS --- */}
-      <div className="lg:col-span-4 flex flex-col gap-4 sticky top-4 self-start max-h-[calc(100vh-2rem)] overflow-y-auto custom-scrollbar p-1">
+      <div className="lg:col-span-4 flex flex-col gap-4 lg:sticky lg:top-4 lg:self-start lg:max-h-[calc(100vh-2rem)] lg:overflow-y-auto custom-scrollbar p-1">
         <div className="bg-slate-800 rounded-xl p-4 border border-slate-700 shadow-xl">
           {/* Source Toggle */}
           <div className="flex p-1 bg-slate-900 rounded-lg mb-4 border border-slate-700">
@@ -627,21 +627,21 @@ export const CubeManager: React.FC<CubeManagerProps> = ({ packs, setPacks, onGoT
 
       {/* --- RIGHT COLUMN: PACKS --- */}
       <div className="lg:col-span-8">
-        <div className="flex flex-col sm:flex-row justify-between items-center mb-6 gap-4 sticky top-4 z-40 bg-slate-900/90 backdrop-blur-sm p-3 rounded-xl border border-white/5 shadow-2xl">
-          <div className="flex items-center gap-4">
+        <div className="flex flex-col sm:flex-row justify-between items-center mb-6 gap-4 sticky top-4 z-40 bg-slate-900/95 backdrop-blur-xl p-3 rounded-xl border border-white/10 shadow-2xl">
+          <div className="flex items-center gap-4 w-full sm:w-auto justify-between sm:justify-start">
             <h2 className="text-xl font-bold text-white flex items-center gap-2">
               <span className="bg-slate-700 text-purple-400 px-3 py-1 rounded-lg text-sm border border-slate-600">{packs.length}</span>
               Packs
             </h2>
           </div>
 
-          <div className="flex gap-2">
+          <div className="flex gap-2 w-full sm:w-auto justify-end overflow-x-auto pb-1 sm:pb-0">
             {/* Play Button */}
             {packs.length > 0 && (
               <>
                 <button
                   onClick={onGoToLobby}
-                  className="px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold rounded-lg shadow-lg flex items-center gap-2 animate-in fade-in zoom-in"
+                  className="px-4 py-2 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold rounded-lg shadow-lg flex items-center gap-2 animate-in fade-in zoom-in whitespace-nowrap"
                 >
                   <Users className="w-4 h-4" /> <span className="hidden sm:inline">Play Online</span>
                 </button>
@@ -663,7 +663,7 @@ export const CubeManager: React.FC<CubeManagerProps> = ({ packs, setPacks, onGoT
               </>
             )}
 
-            <div className="flex bg-slate-800 rounded-lg p-1 border border-slate-700">
+            <div className="flex bg-slate-800 rounded-lg p-1 border border-slate-700 shrink-0">
               <button onClick={() => setViewMode('list')} className={`p-2 rounded ${viewMode === 'list' ? 'bg-slate-600 text-white' : 'text-slate-400'}`}><List className="w-4 h-4" /></button>
               <button onClick={() => setViewMode('grid')} className={`p-2 rounded ${viewMode === 'grid' ? 'bg-slate-600 text-white' : 'text-slate-400'}`}><LayoutGrid className="w-4 h-4" /></button>
               <button onClick={() => setViewMode('stack')} className={`p-2 rounded ${viewMode === 'stack' ? 'bg-slate-600 text-white' : 'text-slate-400'}`}><Layers className="w-4 h-4" /></button>