diff --git a/src/components/AI/MistakeHeatmap.tsx b/src/components/AI/MistakeHeatmap.tsx
index 44707c5..45373be 100644
--- a/src/components/AI/MistakeHeatmap.tsx
+++ b/src/components/AI/MistakeHeatmap.tsx
@@ -51,12 +51,12 @@ export function MistakeHeatmap() {
           {/* Header row */}
           <div className="flex items-center mb-3 text-xs sm:text-sm font-black text-muted-foreground uppercase tracking-wider">
             <div className="w-32 sm:w-36 md:w-40 shrink-0 pr-2">Topic</div>
-            <div className="flex-1 grid grid-cols-5 gap-1 text-center">
-              <span>T-4</span>
-              <span>T-3</span>
-              <span>T-2</span>
-              <span>T-1</span>
-              <span>Latest</span>
+            <div className="flex-1 grid grid-cols-5 gap-0.5 sm:gap-1 text-center text-[9px] sm:text-xs">
+              <span className="whitespace-nowrap">T-4</span>
+              <span className="whitespace-nowrap">T-3</span>
+              <span className="whitespace-nowrap">T-2</span>
+              <span className="whitespace-nowrap">T-1</span>
+              <span className="whitespace-nowrap truncate">Latest</span>
             </div>
           </div>
           
@@ -67,14 +67,14 @@ export function MistakeHeatmap() {
                 <div className="w-32 sm:w-36 md:w-40 shrink-0 text-xs sm:text-sm md:text-base font-bold truncate pr-2 group-hover:text-primary transition-colors" title={row.topic}>
                   {row.topic}
                 </div>
-                <div className="flex-1 grid grid-cols-5 gap-1">
+                <div className="flex-1 grid grid-cols-5 gap-0.5 sm:gap-1">
                   {row.attempts.map((errRate, i) => (
                     <div 
                       key={i} 
-                      className={`h-8 sm:h-9 rounded-md border transition-all duration-300 group-hover:scale-105 flex items-center justify-center cursor-help ${getColor(errRate)}`}
+                      className={`h-8 sm:h-9 rounded-sm sm:rounded-md border transition-all duration-300 group-hover:scale-105 flex items-center justify-center cursor-help ${getColor(errRate)}`}
                       title={`Error Rate: ${errRate}%`}
                     >
-                      <span className="text-[10px] sm:text-xs font-black text-foreground/90">{errRate}%</span>
+                      <span className="text-[8px] sm:text-xs font-black text-foreground/90">{errRate}%</span>
                     </div>
                   ))}
                 </div>
diff --git a/src/hooks/useActiveUser.ts b/src/hooks/useActiveUser.ts
index 39fdc48..6e22962 100644
--- a/src/hooks/useActiveUser.ts
+++ b/src/hooks/useActiveUser.ts
@@ -303,7 +303,11 @@ export function useActiveUser() {
 
     // Compute effective tier via trial logic
     const { effectiveTier } = computeTrialInfo(user, globalSettings);
-    const tier = effectiveTier || "Free";
+    // Normalize tier string to handle both DB format (AI_COACH, PRO, FREE) and UI format
+    let tier = effectiveTier || "Free";
+    if (tier === "AI_COACH" as any) tier = "AI Coach";
+    if (tier === "PRO" as any) tier = "Pro";
+    if (tier === "FREE" as any) tier = "Free";
 
     // Core restrictions mapping based on PRD feature matrix
     switch (feature) {