diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6a4c214..9ef6bb2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -66,23 +66,26 @@ const TabLoadingFallback = () => <div className="p-4 text-center text-gray-400">
 // ============================================================================
 
 function GrimoireTab() {
-  // Handle SSR - dont access SPELLS_DEF during server-side rendering
-  // Use state and useEffect to only access on client-side
-  const [grimoireSpells, setGrimoireSpells] = useState<any[]>([]);
-  
-  useEffect(() => {
-    // Only access SPELLS_DEF on client-side
+  const [grimoireSpells, setGrimoireSpells] = useState<any[]>(() => {
     if (typeof window !== 'undefined' && SPELLS_DEF) {
-      const filtered = Object.values(SPELLS_DEF || {}).filter((s: any) => s.grimoire);
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setGrimoireSpells(filtered);
+      return Object.values(SPELLS_DEF).filter((s: any) => s.grimoire);
     }
-  }, []);
+    return [];
+  });
+  const loaded = grimoireSpells.length > 0 || (typeof window !== 'undefined' && !SPELLS_DEF);
 
-  if (!grimoireSpells.length) {
+  if (!loaded) {
     return <div className="p-4 text-center text-gray-400">Loading grimoire...</div>;
   }
 
+  if (grimoireSpells.length === 0) {
+    return (
+      <div className="p-4 text-center text-gray-400">
+        No grimoire spells available yet. Defeat guardians to unlock spells.
+      </div>
+    );
+  }
+
   const availablePages = Math.ceil(grimoireSpells.length / 12);
 
   return (
@@ -145,6 +148,7 @@ export default function ManaLoopGame() {
 
   const maxFloorReached = useCombatStore((s) => s.maxFloorReached);
   const spells = useCombatStore((s) => s.spells);
+  const spireMode = useCombatStore((s) => s.spireMode);
 
   const gameOver = useUIStore((s) => s.gameOver);
 
@@ -206,7 +210,14 @@ export default function ManaLoopGame() {
   }, [initGame]);
 
   const [mounted, setMounted] = useState(false);
-  useEffect(() => { setMounted(true); }, []);
+  useEffect(() => { setMounted(true); }, []); // eslint-disable-line react-hooks/set-state-in-effect
+
+  // React to spireMode changes from combat store
+  useEffect(() => {
+    if (spireMode) {
+      setActiveTab('spire'); // eslint-disable-line react-hooks/set-state-in-effect
+    }
+  }, [spireMode]);
 
   // Conditional returns AFTER all hooks
   if (gameOver) {