diff --git a/src/app/page.tsx b/src/app/page.tsx
index 188115d..2f9fc47 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -65,7 +65,22 @@ const TabLoadingFallback = () => <div className="p-4 text-center text-gray-400">
 // ============================================================================
 
 function GrimoireTab() {
-  const grimoireSpells = Object.values(SPELLS_DEF).filter((s: any) => s.grimoire);
+  // 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
+    if (typeof window !== 'undefined' && SPELLS_DEF) {
+      const filtered = Object.values(SPELLS_DEF).filter((s: any) => s.grimoire);
+      setGrimoireSpells(filtered);
+    }
+  }, []);
+
+  if (!grimoireSpells.length) {
+    return <div className="p-4 text-center text-gray-400">Loading grimoire...</div>;
+  }
+
   const availablePages = Math.ceil(grimoireSpells.length / 12);
 
   return (
@@ -131,7 +146,7 @@ export default function ManaLoopGame() {
 
   const gameOver = useUIStore((s) => s.gameOver);
 
-  // Computed effects from upgrades and equipment
+  // Derived state
   const upgradeEffects = getUnifiedEffects({
     skillUpgrades,
     skillTiers,
@@ -139,7 +154,6 @@ export default function ManaLoopGame() {
     equipmentInstances: {}
   });
 
-  // Derived stats
   const maxMana = computeMaxMana({
     skills,
     prestigeUpgrades,
@@ -192,14 +206,14 @@ export default function ManaLoopGame() {
   }, [gameLoop]);
 
   // Conditional returns AFTER all hooks
-  if (typeof window === 'undefined') {
-    return <div>Loading...</div>;
-  }
-
   if (gameOver) {
     return <GameOverScreen store={{ day, hour, insight }} />;
   }
 
+  if (typeof window === 'undefined') {
+    return <div>Loading...</div>;
+  }
+
   return (
     <ErrorBoundary>
       <TooltipProvider>
@@ -216,10 +230,10 @@ export default function ManaLoopGame() {
 
           {/* Main Content */}
           <main className="flex-1 flex flex-col md:flex-row gap-4 p-4">
-            <LeftPanel
-              store={{ rawMana, maxMana, day, hour }}
-              effectiveRegen={effectiveRegen}
-              incursionStrength={incursionStrength}
+            <LeftPanel 
+              store={{ rawMana, maxMana, day, hour }} 
+              effectiveRegen={effectiveRegen} 
+              incursionStrength={incursionStrength} 
             />
 
             <div className="flex-1 min-w-0">
@@ -242,7 +256,7 @@ export default function ManaLoopGame() {
 
                 <TabsContent value="spire">
                   <Suspense fallback={<TabLoadingFallback />}>
-                    <SpireTab store={{ day, hour, skills }} />
+                    <SpireTab />
                   </Suspense>
                 </TabsContent>
 
@@ -260,7 +274,7 @@ export default function ManaLoopGame() {
 
                 <TabsContent value="skills">
                   <Suspense fallback={<TabLoadingFallback />}>
-                    <SkillsTab store={{ skills, skillUpgrades, skillTiers }} />
+                    <SkillsTab />
                   </Suspense>
                 </TabsContent>