diff --git a/guide/age-of-four/src/App.tsx b/guide/age-of-four/src/App.tsx
index 2b7bc0ba..c6962eb6 100644
--- a/guide/age-of-four/src/App.tsx
+++ b/guide/age-of-four/src/App.tsx
@@ -21,6 +21,10 @@ const ClimateTerrainPage     = lazy(() => import('@/pages/ClimateTerrainPage'))
 const ClimateSimulationPage  = lazy(() => import('@/pages/ClimateSimulationPage'))
 const SurvivalGuidePage      = lazy(() => import('@/pages/SurvivalGuidePage'))
 const EcosystemPage          = lazy(() => import('@/pages/EcosystemPage'))
+const BiomeBrowserPage       = lazy(() => import('@/pages/BiomeBrowserPage'))
+const SpeciesBrowserPage     = lazy(() => import('@/pages/SpeciesBrowserPage'))
+const FoodWebPage            = lazy(() => import('@/pages/FoodWebPage'))
+const PopulationDashboardPage = lazy(() => import('@/pages/PopulationDashboardPage'))
 
 // Races & Empire
 const RacesPage              = lazy(() => import('@/pages/RacesPage'))
@@ -111,7 +115,11 @@ export default function App(): ReactElement {
         <Route path="/climate/terrain"     element={<ClimateTerrainPage />} />
         <Route path="/climate/simulation"  element={<ClimateSimulationPage />} />
         <Route path="/climate/survival"    element={<SurvivalGuidePage />} />
-        <Route path="/climate/ecosystem"   element={<EcosystemPage />} />
+        <Route path="/climate/ecosystem"              element={<EcosystemPage />} />
+        <Route path="/climate/ecosystem/biomes"      element={<BiomeBrowserPage />} />
+        <Route path="/climate/ecosystem/species"     element={<SpeciesBrowserPage />} />
+        <Route path="/climate/ecosystem/food-web"    element={<FoodWebPage />} />
+        <Route path="/climate/ecosystem/populations" element={<PopulationDashboardPage />} />
         {/* Redirects for old climate routes */}
         <Route path="/climate/temperature" element={<Navigate to="/climate" replace />} />
         <Route path="/climate/moisture"    element={<Navigate to="/climate/terrain" replace />} />