diff --git a/website/public/assets/js/pages/city-hub.js b/website/public/assets/js/pages/city-hub.js
index ab714a36..c388a6f8 100644
--- a/website/public/assets/js/pages/city-hub.js
+++ b/website/public/assets/js/pages/city-hub.js
@@ -65,40 +65,14 @@
                         '<span class="hub-preview-meta">' + esc(s.community || s.location || '') + '</span></a>'
                       ).join('')
                     : '<div class="hub-empty">No stories here yet.</div>';
-            }
-
-            // Community Stories card -> Live when the city has stories.
-            const storiesCard = document.querySelector('[data-feature="stories"]');
-            if (storiesCard && cityStories.length > 0) {
-                storiesCard.classList.remove('coming-soon');
-
-                const badge = storiesCard.querySelector('.feature-status-badge');
-                if (badge) {
-                    badge.className = 'feature-status-badge live';
-                    badge.innerHTML =
-                        '<i class="fa-solid fa-check-circle"></i> ' +
-                        '<span data-i18n="cityHub.features.map.statusLive">Live</span>';
-                }
-
-                const desc = storiesCard.querySelector('.feature-description');
-                if (desc) {
-                    desc.setAttribute('data-i18n', 'cityHub.features.stories.description');
-                    desc.textContent =
-                        'Discover real stories of neighbourhood transformation, ' +
-                        'told by the people who made it happen.';
-                }
-
-                const action = storiesCard.querySelector('.feature-action');
-                if (action) {
-                    action.innerHTML =
-                        '<a href="/cities/' + slug + '/stories/" class="btn btn-primary">' +
-                        '<span data-i18n="cityHub.features.stories.button">Read Stories</span> ' +
-                        '<i class="fa-solid fa-arrow-right"></i></a>';
-                }
 
-                // Translate the newly injected data-i18n nodes.
-                if (window.translator && typeof window.translator.translatePage === 'function') {
-                    window.translator.translatePage();
+                // Hide the "Read all" link for cities without a stories page yet
+                // (they have no stories) so it can't 404. It reappears once a
+                // city has stories (and thus a /stories/ page).
+                if (cityStories.length === 0) {
+                    const seeAll = hubStories.closest('.hub-section');
+                    const link = seeAll && seeAll.querySelector('.hub-see-all');
+                    if (link) link.style.display = 'none';
                 }
             }
 
diff --git a/website/public/cities/ahmedabad/index.html b/website/public/cities/ahmedabad/index.html
index 94e3d1b0..0f1e1987 100644
--- a/website/public/cities/ahmedabad/index.html
+++ b/website/public/cities/ahmedabad/index.html
@@ -61,6 +61,7 @@
     <meta name="description" content="Communities, solution providers, and ward-level climate data for Ahmedabad neighbourhoods.">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="/assets/css/main.css">
+    <link rel="stylesheet" href="/assets/css/pages/city-hub.css">
     <link rel="stylesheet" href="/assets/chat/chat.css">
     <link rel="stylesheet" href="/assets/i18n/language-selector.css">
     <style>
@@ -378,96 +379,38 @@ <h2 data-i18n="cityHub.ahmedabad.exploreTitle">Explore Ahmedabad</h2>
                 <p data-i18n="cityHub.ahmedabad.exploreSubtitle">Ward-level map available now. Community and provider directories coming soon.</p>
             </div>
 
-            <div class="feature-grid">
-                <!-- Ward Map (Available) -->
-                <div class="feature-card-large">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <i class="fa-solid fa-map" style="color: #B9C98A !important;"></i>
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.map.title">Ward-Level Map</h3>
-                            <span class="feature-status-badge live">
-                                <i class="fa-solid fa-check-circle"></i> <span data-i18n="cityHub.features.map.statusLive">Live</span>
-                            </span>
-                        </div>
+                        <div class="hub-grid">
+                <!-- Communities Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/community.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.communities.title">Communities</span></h3>
+                        <span class="hub-count" id="hubCommCount">-</span>
+                        <a href="/communities/" class="hub-see-all">See all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.map.description" data-i18n-params='{"wardCount":"64"}'>
-                        Explore all 64 electoral wards with interactive boundaries. View ward demographics and geographical data across Chennai.
-                    </p>
-                    <div class="feature-action">
-                        <a href="/cities/ahmedabad/map/" class="btn btn-primary">
-                            <span data-i18n="cityHub.features.map.button">View Map</span> <i class="fa-solid fa-arrow-right"></i>
-                        </a>
+                    <div class="hub-preview-list" id="hubCommunities">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-                <!-- Communities (Coming Soon) -->
-                <div class="feature-card-large coming-soon">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Stories Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/story.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.stories.title">Community Stories</span></h3>
+                        <a href="/cities/ahmedabad/stories/" class="hub-see-all">Read all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.comingSoonCallout.description">
-                        Community directory for Ahmedabad is under development. Help us build the network by joining as a community.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
+                    <div class="hub-preview-list" id="hubStories">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-            
-                <!-- Community Stories (Coming Soon) -->
-                <div class="feature-card-large coming-soon" data-feature="stories">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/story.svg" alt="" style="width:20px;height:20px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.stories.title">Community Stories</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Map Preview -->
+                <div class="hub-section hub-section-wide">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/location.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.map.title">Ward-Level Map</span></h3>
+                        <a href="/cities/ahmedabad/map/" class="hub-see-all">View map <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.stories.comingSoonDescription">
-                        Community stories for this city are under development. Real stories of neighbourhood transformation coming soon.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
-                    </div>
-                </div>
-</div>
-
-            <!-- Coming Soon Callout -->
-            <div class="coming-soon-callout">
-                <img src="/assets/images/icons/plant.svg" alt="" aria-hidden="true" style="width: 64px; height: 64px; margin-bottom: var(--space-md);">
-                <h3 data-i18n="cityHub.comingSoonCallout.title">Ahmedabad Data Coming Soon</h3>
-                <p data-i18n="cityHub.comingSoonCallout.description">
-                    We're currently building the Ahmedabad directory. Help us grow the network by registering your community or organization.
-                </p>
-                <p style="font-weight: 600;">
-                    <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.communityDirectory">Community Directory</span><br>
-                    <i class="fa-solid fa-building"></i> <span data-i18n="cityHub.comingSoonCallout.providerNetwork">Solution Provider Network</span><br>
-                    <img src="/assets/images/icons/conservation.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.climateAction">Climate Action Dashboard</span>
-                </p>
-                <div class="cta-buttons">
-                    <a href="/join/" class="btn btn-primary">
-                        <i class="fa-solid fa-user-plus"></i> <span data-i18n="cityHub.comingSoonCallout.joinCommunity">Join as Community</span>
-                    </a>
-                    <a href="/join/" class="btn btn-secondary">
-                        <i class="fa-solid fa-building-user"></i> <span data-i18n="cityHub.comingSoonCallout.joinProvider">Join as Provider</span>
+                    <a href="/cities/ahmedabad/map/" class="hub-map-preview" id="hubMap">
+                        <img src="/assets/images/cities/ahmedabad.svg" alt="Ahmedabad ward map" style="width:100%; height:200px; object-fit: contain; opacity: 0.7;">
                     </a>
                 </div>
             </div>
diff --git a/website/public/cities/bhubaneswar/index.html b/website/public/cities/bhubaneswar/index.html
index b8c129c0..53d567ed 100644
--- a/website/public/cities/bhubaneswar/index.html
+++ b/website/public/cities/bhubaneswar/index.html
@@ -61,6 +61,7 @@
     <meta name="description" content="Communities, solution providers, and ward-level data for Bhubaneswar neighbourhoods.">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="/assets/css/main.css">
+    <link rel="stylesheet" href="/assets/css/pages/city-hub.css">
     <link rel="stylesheet" href="/assets/chat/chat.css">
     <link rel="stylesheet" href="/assets/i18n/language-selector.css">
     <style>
@@ -378,96 +379,38 @@ <h2 data-i18n="cityHub.bhubaneswar.exploreTitle">Explore Bhubaneswar</h2>
                 <p data-i18n="cityHub.bhubaneswar.exploreSubtitle">Ward-level map available now. Community and provider directories coming soon.</p>
             </div>
 
-            <div class="feature-grid">
-                <!-- Ward Map (Available) -->
-                <div class="feature-card-large">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <i class="fa-solid fa-map" style="color: #B9C98A !important;"></i>
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.map.title">Ward-Level Map</h3>
-                            <span class="feature-status-badge live">
-                                <i class="fa-solid fa-check-circle"></i> <span data-i18n="cityHub.features.map.statusLive">Live</span>
-                            </span>
-                        </div>
+                        <div class="hub-grid">
+                <!-- Communities Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/community.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.communities.title">Communities</span></h3>
+                        <span class="hub-count" id="hubCommCount">-</span>
+                        <a href="/communities/" class="hub-see-all">See all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.map.description" data-i18n-params='{"wardCount":"67"}'>
-                        Explore all 67 electoral wards with interactive boundaries. View ward demographics and geographical data across Chennai.
-                    </p>
-                    <div class="feature-action">
-                        <a href="/cities/bhubaneswar/map/" class="btn btn-primary">
-                            <span data-i18n="cityHub.features.map.button">View Map</span> <i class="fa-solid fa-arrow-right"></i>
-                        </a>
+                    <div class="hub-preview-list" id="hubCommunities">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-                <!-- Communities (Coming Soon) -->
-                <div class="feature-card-large coming-soon">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Stories Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/story.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.stories.title">Community Stories</span></h3>
+                        <a href="/cities/bhubaneswar/stories/" class="hub-see-all">Read all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.comingSoonCallout.description">
-                        Community directory for Bhubaneswar is under development. Help us build the network by joining as a community.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
+                    <div class="hub-preview-list" id="hubStories">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-            
-                <!-- Community Stories (Coming Soon) -->
-                <div class="feature-card-large coming-soon" data-feature="stories">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/story.svg" alt="" style="width:20px;height:20px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.stories.title">Community Stories</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Map Preview -->
+                <div class="hub-section hub-section-wide">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/location.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.map.title">Ward-Level Map</span></h3>
+                        <a href="/cities/bhubaneswar/map/" class="hub-see-all">View map <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.stories.comingSoonDescription">
-                        Community stories for this city are under development. Real stories of neighbourhood transformation coming soon.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
-                    </div>
-                </div>
-</div>
-
-            <!-- Coming Soon Callout -->
-            <div class="coming-soon-callout">
-                <img src="/assets/images/icons/plant.svg" alt="" aria-hidden="true" style="width: 64px; height: 64px; margin-bottom: var(--space-md);">
-                <h3 data-i18n="cityHub.comingSoonCallout.title">Bhubaneswar Data Coming Soon</h3>
-                <p data-i18n="cityHub.comingSoonCallout.description">
-                    We're currently building the Bhubaneswar directory. Help us grow the network by registering your community or organization.
-                </p>
-                <p style="font-weight: 600;">
-                    <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.communityDirectory">Community Directory</span><br>
-                    <i class="fa-solid fa-building"></i> <span data-i18n="cityHub.comingSoonCallout.providerNetwork">Solution Provider Network</span><br>
-                    <img src="/assets/images/icons/conservation.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.climateAction">Climate Action Dashboard</span>
-                </p>
-                <div class="cta-buttons">
-                    <a href="/join/" class="btn btn-primary">
-                        <i class="fa-solid fa-user-plus"></i> <span data-i18n="cityHub.comingSoonCallout.joinCommunity">Join as Community</span>
-                    </a>
-                    <a href="/join/" class="btn btn-secondary">
-                        <i class="fa-solid fa-building-user"></i> <span data-i18n="cityHub.comingSoonCallout.joinProvider">Join as Provider</span>
+                    <a href="/cities/bhubaneswar/map/" class="hub-map-preview" id="hubMap">
+                        <img src="/assets/images/cities/bhubaneswar.svg" alt="Bhubaneswar ward map" style="width:100%; height:200px; object-fit: contain; opacity: 0.7;">
                     </a>
                 </div>
             </div>
diff --git a/website/public/cities/gurugram/index.html b/website/public/cities/gurugram/index.html
index b774a1b7..c0f02ac2 100644
--- a/website/public/cities/gurugram/index.html
+++ b/website/public/cities/gurugram/index.html
@@ -61,6 +61,7 @@
     <meta name="description" content="Communities, solution providers, and ward-level data for Gurugram neighbourhoods.">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="/assets/css/main.css">
+    <link rel="stylesheet" href="/assets/css/pages/city-hub.css">
     <link rel="stylesheet" href="/assets/chat/chat.css">
     <link rel="stylesheet" href="/assets/i18n/language-selector.css">
     <style>
@@ -378,96 +379,38 @@ <h2 data-i18n="cityHub.gurugram.exploreTitle">Explore Gurugram</h2>
                 <p data-i18n="cityHub.gurugram.exploreSubtitle">Ward-level map available now. Community and provider directories coming soon.</p>
             </div>
 
-            <div class="feature-grid">
-                <!-- Ward Map (Available) -->
-                <div class="feature-card-large">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <i class="fa-solid fa-map" style="color: #B9C98A !important;"></i>
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.map.title">Ward-Level Map</h3>
-                            <span class="feature-status-badge live">
-                                <i class="fa-solid fa-check-circle"></i> <span data-i18n="cityHub.features.map.statusLive">Live</span>
-                            </span>
-                        </div>
+                        <div class="hub-grid">
+                <!-- Communities Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/community.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.communities.title">Communities</span></h3>
+                        <span class="hub-count" id="hubCommCount">-</span>
+                        <a href="/communities/" class="hub-see-all">See all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.map.description" data-i18n-params='{"wardCount":"56"}'>
-                        Explore all 56 electoral wards with interactive boundaries. View ward demographics and geographical data across Chennai.
-                    </p>
-                    <div class="feature-action">
-                        <a href="/cities/gurugram/map/" class="btn btn-primary">
-                            <span data-i18n="cityHub.features.map.button">View Map</span> <i class="fa-solid fa-arrow-right"></i>
-                        </a>
+                    <div class="hub-preview-list" id="hubCommunities">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-                <!-- Communities (Coming Soon) -->
-                <div class="feature-card-large coming-soon">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Stories Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/story.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.stories.title">Community Stories</span></h3>
+                        <a href="/cities/gurugram/stories/" class="hub-see-all">Read all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.comingSoonCallout.description">
-                        Community directory for Gurugram is under development. Help us build the network by joining as a community.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
+                    <div class="hub-preview-list" id="hubStories">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-            
-                <!-- Community Stories (Coming Soon) -->
-                <div class="feature-card-large coming-soon" data-feature="stories">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/story.svg" alt="" style="width:20px;height:20px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.stories.title">Community Stories</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Map Preview -->
+                <div class="hub-section hub-section-wide">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/location.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.map.title">Ward-Level Map</span></h3>
+                        <a href="/cities/gurugram/map/" class="hub-see-all">View map <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.stories.comingSoonDescription">
-                        Community stories for this city are under development. Real stories of neighbourhood transformation coming soon.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
-                    </div>
-                </div>
-</div>
-
-            <!-- Coming Soon Callout -->
-            <div class="coming-soon-callout">
-                <img src="/assets/images/icons/plant.svg" alt="" aria-hidden="true" style="width: 64px; height: 64px; margin-bottom: var(--space-md);">
-                <h3 data-i18n="cityHub.comingSoonCallout.title">Gurugram Data Coming Soon</h3>
-                <p data-i18n="cityHub.comingSoonCallout.description">
-                    We're currently building the Gurugram directory. Help us grow the network by registering your community or organization.
-                </p>
-                <p style="font-weight: 600;">
-                    <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.communityDirectory">Community Directory</span><br>
-                    <i class="fa-solid fa-building"></i> <span data-i18n="cityHub.comingSoonCallout.providerNetwork">Solution Provider Network</span><br>
-                    <img src="/assets/images/icons/conservation.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.climateAction">Climate Action Dashboard</span>
-                </p>
-                <div class="cta-buttons">
-                    <a href="/join/" class="btn btn-primary">
-                        <i class="fa-solid fa-user-plus"></i> <span data-i18n="cityHub.comingSoonCallout.joinCommunity">Join as Community</span>
-                    </a>
-                    <a href="/join/" class="btn btn-secondary">
-                        <i class="fa-solid fa-building-user"></i> <span data-i18n="cityHub.comingSoonCallout.joinProvider">Join as Provider</span>
+                    <a href="/cities/gurugram/map/" class="hub-map-preview" id="hubMap">
+                        <img src="/assets/images/cities/gurugram.svg" alt="Gurugram ward map" style="width:100%; height:200px; object-fit: contain; opacity: 0.7;">
                     </a>
                 </div>
             </div>
diff --git a/website/public/cities/hyderabad/index.html b/website/public/cities/hyderabad/index.html
index a9528b53..904d7f70 100644
--- a/website/public/cities/hyderabad/index.html
+++ b/website/public/cities/hyderabad/index.html
@@ -61,6 +61,7 @@
     <meta name="description" content="Communities, solution providers, and ward-level climate data for Hyderabad neighbourhoods.">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="/assets/css/main.css">
+    <link rel="stylesheet" href="/assets/css/pages/city-hub.css">
     <link rel="stylesheet" href="/assets/chat/chat.css">
     <link rel="stylesheet" href="/assets/i18n/language-selector.css">
     <style>
@@ -378,96 +379,38 @@ <h2 data-i18n="cityHub.hyderabad.exploreTitle">Explore Hyderabad</h2>
                 <p data-i18n="cityHub.hyderabad.exploreSubtitle">Ward-level map available now. Community and provider directories coming soon.</p>
             </div>
 
-            <div class="feature-grid">
-                <!-- Ward Map (Available) -->
-                <div class="feature-card-large">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <i class="fa-solid fa-map" style="color: #B9C98A !important;"></i>
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.map.title">Ward-Level Map</h3>
-                            <span class="feature-status-badge live">
-                                <i class="fa-solid fa-check-circle"></i> <span data-i18n="cityHub.features.map.statusLive">Live</span>
-                            </span>
-                        </div>
+                        <div class="hub-grid">
+                <!-- Communities Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/community.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.communities.title">Communities</span></h3>
+                        <span class="hub-count" id="hubCommCount">-</span>
+                        <a href="/communities/" class="hub-see-all">See all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.map.description" data-i18n-params='{"wardCount":"150"}'>
-                        Explore all 150 electoral wards with interactive boundaries. View ward demographics and geographical data across Chennai.
-                    </p>
-                    <div class="feature-action">
-                        <a href="/cities/hyderabad/map/" class="btn btn-primary">
-                            <span data-i18n="cityHub.features.map.button">View Map</span> <i class="fa-solid fa-arrow-right"></i>
-                        </a>
+                    <div class="hub-preview-list" id="hubCommunities">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-                <!-- Communities (Coming Soon) -->
-                <div class="feature-card-large coming-soon">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Stories Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/story.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.stories.title">Community Stories</span></h3>
+                        <a href="/cities/hyderabad/stories/" class="hub-see-all">Read all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.comingSoonCallout.description">
-                        Community directory for Hyderabad is under development. Help us build the network by joining as a community.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
+                    <div class="hub-preview-list" id="hubStories">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-            
-                <!-- Community Stories (Coming Soon) -->
-                <div class="feature-card-large coming-soon" data-feature="stories">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/story.svg" alt="" style="width:20px;height:20px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.stories.title">Community Stories</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Map Preview -->
+                <div class="hub-section hub-section-wide">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/location.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.map.title">Ward-Level Map</span></h3>
+                        <a href="/cities/hyderabad/map/" class="hub-see-all">View map <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.stories.comingSoonDescription">
-                        Community stories for this city are under development. Real stories of neighbourhood transformation coming soon.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
-                    </div>
-                </div>
-</div>
-
-            <!-- Coming Soon Callout -->
-            <div class="coming-soon-callout">
-                <img src="/assets/images/icons/plant.svg" alt="" aria-hidden="true" style="width: 64px; height: 64px; margin-bottom: var(--space-md);">
-                <h3 data-i18n="cityHub.comingSoonCallout.title">Hyderabad Data Coming Soon</h3>
-                <p data-i18n="cityHub.comingSoonCallout.description">
-                    We're currently building the Hyderabad directory. Help us grow the network by registering your community or organization.
-                </p>
-                <p style="font-weight: 600;">
-                    <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.communityDirectory">Community Directory</span><br>
-                    <i class="fa-solid fa-building"></i> <span data-i18n="cityHub.comingSoonCallout.providerNetwork">Solution Provider Network</span><br>
-                    <img src="/assets/images/icons/conservation.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.climateAction">Climate Action Dashboard</span>
-                </p>
-                <div class="cta-buttons">
-                    <a href="/join/" class="btn btn-primary">
-                        <i class="fa-solid fa-user-plus"></i> <span data-i18n="cityHub.comingSoonCallout.joinCommunity">Join as Community</span>
-                    </a>
-                    <a href="/join/" class="btn btn-secondary">
-                        <i class="fa-solid fa-building-user"></i> <span data-i18n="cityHub.comingSoonCallout.joinProvider">Join as Provider</span>
+                    <a href="/cities/hyderabad/map/" class="hub-map-preview" id="hubMap">
+                        <img src="/assets/images/cities/hyderabad.svg" alt="Hyderabad ward map" style="width:100%; height:200px; object-fit: contain; opacity: 0.7;">
                     </a>
                 </div>
             </div>
diff --git a/website/public/cities/jaipur/index.html b/website/public/cities/jaipur/index.html
index 783e34b3..cc0cd252 100644
--- a/website/public/cities/jaipur/index.html
+++ b/website/public/cities/jaipur/index.html
@@ -61,6 +61,7 @@
     <meta name="description" content="Communities, solution providers, and ward-level data for Jaipur neighbourhoods.">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="/assets/css/main.css">
+    <link rel="stylesheet" href="/assets/css/pages/city-hub.css">
     <link rel="stylesheet" href="/assets/chat/chat.css">
     <link rel="stylesheet" href="/assets/i18n/language-selector.css">
     <style>
@@ -378,96 +379,38 @@ <h2 data-i18n="cityHub.jaipur.exploreTitle">Explore Jaipur</h2>
                 <p data-i18n="cityHub.jaipur.exploreSubtitle">Ward-level map available now. Community and provider directories coming soon.</p>
             </div>
 
-            <div class="feature-grid">
-                <!-- Ward Map (Available) -->
-                <div class="feature-card-large">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <i class="fa-solid fa-map" style="color: #B9C98A !important;"></i>
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.map.title">Ward-Level Map</h3>
-                            <span class="feature-status-badge live">
-                                <i class="fa-solid fa-check-circle"></i> <span data-i18n="cityHub.features.map.statusLive">Live</span>
-                            </span>
-                        </div>
+                        <div class="hub-grid">
+                <!-- Communities Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/community.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.communities.title">Communities</span></h3>
+                        <span class="hub-count" id="hubCommCount">-</span>
+                        <a href="/communities/" class="hub-see-all">See all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.map.description" data-i18n-params='{"wardCount":"150"}'>
-                        Explore all 150 electoral wards with interactive boundaries. View ward demographics and geographical data across Chennai.
-                    </p>
-                    <div class="feature-action">
-                        <a href="/cities/jaipur/map/" class="btn btn-primary">
-                            <span data-i18n="cityHub.features.map.button">View Map</span> <i class="fa-solid fa-arrow-right"></i>
-                        </a>
+                    <div class="hub-preview-list" id="hubCommunities">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-                <!-- Communities (Coming Soon) -->
-                <div class="feature-card-large coming-soon">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Stories Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/story.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.stories.title">Community Stories</span></h3>
+                        <a href="/cities/jaipur/stories/" class="hub-see-all">Read all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.comingSoonCallout.description">
-                        Community directory for Jaipur is under development. Help us build the network by joining as a community.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
+                    <div class="hub-preview-list" id="hubStories">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-            
-                <!-- Community Stories (Coming Soon) -->
-                <div class="feature-card-large coming-soon" data-feature="stories">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/story.svg" alt="" style="width:20px;height:20px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.stories.title">Community Stories</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Map Preview -->
+                <div class="hub-section hub-section-wide">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/location.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.map.title">Ward-Level Map</span></h3>
+                        <a href="/cities/jaipur/map/" class="hub-see-all">View map <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.stories.comingSoonDescription">
-                        Community stories for this city are under development. Real stories of neighbourhood transformation coming soon.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
-                    </div>
-                </div>
-</div>
-
-            <!-- Coming Soon Callout -->
-            <div class="coming-soon-callout">
-                <img src="/assets/images/icons/plant.svg" alt="" aria-hidden="true" style="width: 64px; height: 64px; margin-bottom: var(--space-md);">
-                <h3 data-i18n="cityHub.comingSoonCallout.title">Jaipur Data Coming Soon</h3>
-                <p data-i18n="cityHub.comingSoonCallout.description">
-                    We're currently building the Jaipur directory. Help us grow the network by registering your community or organization.
-                </p>
-                <p style="font-weight: 600;">
-                    <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.communityDirectory">Community Directory</span><br>
-                    <i class="fa-solid fa-building"></i> <span data-i18n="cityHub.comingSoonCallout.providerNetwork">Solution Provider Network</span><br>
-                    <img src="/assets/images/icons/conservation.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.climateAction">Climate Action Dashboard</span>
-                </p>
-                <div class="cta-buttons">
-                    <a href="/join/" class="btn btn-primary">
-                        <i class="fa-solid fa-user-plus"></i> <span data-i18n="cityHub.comingSoonCallout.joinCommunity">Join as Community</span>
-                    </a>
-                    <a href="/join/" class="btn btn-secondary">
-                        <i class="fa-solid fa-building-user"></i> <span data-i18n="cityHub.comingSoonCallout.joinProvider">Join as Provider</span>
+                    <a href="/cities/jaipur/map/" class="hub-map-preview" id="hubMap">
+                        <img src="/assets/images/cities/jaipur.svg" alt="Jaipur ward map" style="width:100%; height:200px; object-fit: contain; opacity: 0.7;">
                     </a>
                 </div>
             </div>
diff --git a/website/public/cities/kochi/index.html b/website/public/cities/kochi/index.html
index 6ab96174..468fae45 100644
--- a/website/public/cities/kochi/index.html
+++ b/website/public/cities/kochi/index.html
@@ -61,6 +61,7 @@
     <meta name="description" content="Communities, solution providers, and ward-level data for Kochi neighbourhoods.">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="/assets/css/main.css">
+    <link rel="stylesheet" href="/assets/css/pages/city-hub.css">
     <link rel="stylesheet" href="/assets/chat/chat.css">
     <link rel="stylesheet" href="/assets/i18n/language-selector.css">
     <style>
@@ -378,96 +379,38 @@ <h2 data-i18n="cityHub.kochi.exploreTitle">Explore Kochi</h2>
                 <p data-i18n="cityHub.kochi.exploreSubtitle">Ward-level map available now. Community and provider directories coming soon.</p>
             </div>
 
-            <div class="feature-grid">
-                <!-- Ward Map (Available) -->
-                <div class="feature-card-large">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <i class="fa-solid fa-map" style="color: #B9C98A !important;"></i>
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.map.title">Ward-Level Map</h3>
-                            <span class="feature-status-badge live">
-                                <i class="fa-solid fa-check-circle"></i> <span data-i18n="cityHub.features.map.statusLive">Live</span>
-                            </span>
-                        </div>
+                        <div class="hub-grid">
+                <!-- Communities Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/community.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.communities.title">Communities</span></h3>
+                        <span class="hub-count" id="hubCommCount">-</span>
+                        <a href="/communities/" class="hub-see-all">See all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.map.description" data-i18n-params='{"wardCount":"74"}'>
-                        Explore all 74 electoral wards with interactive boundaries. View ward demographics and geographical data across Chennai.
-                    </p>
-                    <div class="feature-action">
-                        <a href="/cities/kochi/map/" class="btn btn-primary">
-                            <span data-i18n="cityHub.features.map.button">View Map</span> <i class="fa-solid fa-arrow-right"></i>
-                        </a>
+                    <div class="hub-preview-list" id="hubCommunities">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-                <!-- Communities (Coming Soon) -->
-                <div class="feature-card-large coming-soon">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Stories Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/story.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.stories.title">Community Stories</span></h3>
+                        <a href="/cities/kochi/stories/" class="hub-see-all">Read all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.comingSoonCallout.description">
-                        Community directory for Kochi is under development. Help us build the network by joining as a community.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
+                    <div class="hub-preview-list" id="hubStories">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-            
-                <!-- Community Stories (Coming Soon) -->
-                <div class="feature-card-large coming-soon" data-feature="stories">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/story.svg" alt="" style="width:20px;height:20px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.stories.title">Community Stories</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Map Preview -->
+                <div class="hub-section hub-section-wide">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/location.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.map.title">Ward-Level Map</span></h3>
+                        <a href="/cities/kochi/map/" class="hub-see-all">View map <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.stories.comingSoonDescription">
-                        Community stories for this city are under development. Real stories of neighbourhood transformation coming soon.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
-                    </div>
-                </div>
-</div>
-
-            <!-- Coming Soon Callout -->
-            <div class="coming-soon-callout">
-                <img src="/assets/images/icons/plant.svg" alt="" aria-hidden="true" style="width: 64px; height: 64px; margin-bottom: var(--space-md);">
-                <h3 data-i18n="cityHub.comingSoonCallout.title">Kochi Data Coming Soon</h3>
-                <p data-i18n="cityHub.comingSoonCallout.description">
-                    We're currently building the Kochi directory. Help us grow the network by registering your community or organization.
-                </p>
-                <p style="font-weight: 600;">
-                    <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.communityDirectory">Community Directory</span><br>
-                    <i class="fa-solid fa-building"></i> <span data-i18n="cityHub.comingSoonCallout.providerNetwork">Solution Provider Network</span><br>
-                    <img src="/assets/images/icons/conservation.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.climateAction">Climate Action Dashboard</span>
-                </p>
-                <div class="cta-buttons">
-                    <a href="/join/" class="btn btn-primary">
-                        <i class="fa-solid fa-user-plus"></i> <span data-i18n="cityHub.comingSoonCallout.joinCommunity">Join as Community</span>
-                    </a>
-                    <a href="/join/" class="btn btn-secondary">
-                        <i class="fa-solid fa-building-user"></i> <span data-i18n="cityHub.comingSoonCallout.joinProvider">Join as Provider</span>
+                    <a href="/cities/kochi/map/" class="hub-map-preview" id="hubMap">
+                        <img src="/assets/images/cities/kochi.svg" alt="Kochi ward map" style="width:100%; height:200px; object-fit: contain; opacity: 0.7;">
                     </a>
                 </div>
             </div>
diff --git a/website/public/cities/kolkata/index.html b/website/public/cities/kolkata/index.html
index bf766a86..6939027b 100644
--- a/website/public/cities/kolkata/index.html
+++ b/website/public/cities/kolkata/index.html
@@ -61,6 +61,7 @@
     <meta name="description" content="Communities, solution providers, and ward-level data for Kolkata neighbourhoods.">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="/assets/css/main.css">
+    <link rel="stylesheet" href="/assets/css/pages/city-hub.css">
     <link rel="stylesheet" href="/assets/chat/chat.css">
     <link rel="stylesheet" href="/assets/i18n/language-selector.css">
     <style>
@@ -378,96 +379,38 @@ <h2 data-i18n="cityHub.kolkata.exploreTitle">Explore Kolkata</h2>
                 <p data-i18n="cityHub.kolkata.exploreSubtitle">Ward-level map available now. Community and provider directories coming soon.</p>
             </div>
 
-            <div class="feature-grid">
-                <!-- Ward Map (Available) -->
-                <div class="feature-card-large">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <i class="fa-solid fa-map" style="color: #B9C98A !important;"></i>
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.map.title">Ward-Level Map</h3>
-                            <span class="feature-status-badge live">
-                                <i class="fa-solid fa-check-circle"></i> <span data-i18n="cityHub.features.map.statusLive">Live</span>
-                            </span>
-                        </div>
+                        <div class="hub-grid">
+                <!-- Communities Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/community.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.communities.title">Communities</span></h3>
+                        <span class="hub-count" id="hubCommCount">-</span>
+                        <a href="/communities/" class="hub-see-all">See all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.map.description" data-i18n-params='{"wardCount":"144"}'>
-                        Explore all 144 electoral wards with interactive boundaries. View ward demographics and geographical data across Chennai.
-                    </p>
-                    <div class="feature-action">
-                        <a href="/cities/kolkata/map/" class="btn btn-primary">
-                            <span data-i18n="cityHub.features.map.button">View Map</span> <i class="fa-solid fa-arrow-right"></i>
-                        </a>
+                    <div class="hub-preview-list" id="hubCommunities">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-                <!-- Communities (Coming Soon) -->
-                <div class="feature-card-large coming-soon">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Stories Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/story.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.stories.title">Community Stories</span></h3>
+                        <a href="/cities/kolkata/stories/" class="hub-see-all">Read all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.comingSoonCallout.description">
-                        Community directory for Kolkata is under development. Help us build the network by joining as a community.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
+                    <div class="hub-preview-list" id="hubStories">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-            
-                <!-- Community Stories (Coming Soon) -->
-                <div class="feature-card-large coming-soon" data-feature="stories">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/story.svg" alt="" style="width:20px;height:20px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.stories.title">Community Stories</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Map Preview -->
+                <div class="hub-section hub-section-wide">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/location.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.map.title">Ward-Level Map</span></h3>
+                        <a href="/cities/kolkata/map/" class="hub-see-all">View map <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.stories.comingSoonDescription">
-                        Community stories for this city are under development. Real stories of neighbourhood transformation coming soon.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
-                    </div>
-                </div>
-</div>
-
-            <!-- Coming Soon Callout -->
-            <div class="coming-soon-callout">
-                <img src="/assets/images/icons/plant.svg" alt="" aria-hidden="true" style="width: 64px; height: 64px; margin-bottom: var(--space-md);">
-                <h3 data-i18n="cityHub.comingSoonCallout.title">Kolkata Data Coming Soon</h3>
-                <p data-i18n="cityHub.comingSoonCallout.description">
-                    We're currently building the Kolkata directory. Help us grow the network by registering your community or organization.
-                </p>
-                <p style="font-weight: 600;">
-                    <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.communityDirectory">Community Directory</span><br>
-                    <i class="fa-solid fa-building"></i> <span data-i18n="cityHub.comingSoonCallout.providerNetwork">Solution Provider Network</span><br>
-                    <img src="/assets/images/icons/conservation.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.climateAction">Climate Action Dashboard</span>
-                </p>
-                <div class="cta-buttons">
-                    <a href="/join/" class="btn btn-primary">
-                        <i class="fa-solid fa-user-plus"></i> <span data-i18n="cityHub.comingSoonCallout.joinCommunity">Join as Community</span>
-                    </a>
-                    <a href="/join/" class="btn btn-secondary">
-                        <i class="fa-solid fa-building-user"></i> <span data-i18n="cityHub.comingSoonCallout.joinProvider">Join as Provider</span>
+                    <a href="/cities/kolkata/map/" class="hub-map-preview" id="hubMap">
+                        <img src="/assets/images/cities/kolkata.svg" alt="Kolkata ward map" style="width:100%; height:200px; object-fit: contain; opacity: 0.7;">
                     </a>
                 </div>
             </div>
diff --git a/website/public/cities/mumbai/index.html b/website/public/cities/mumbai/index.html
index 289c6423..c958a876 100644
--- a/website/public/cities/mumbai/index.html
+++ b/website/public/cities/mumbai/index.html
@@ -61,6 +61,7 @@
     <meta name="description" content="Communities, solution providers, and ward-level data for Mumbai neighbourhoods.">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="/assets/css/main.css">
+    <link rel="stylesheet" href="/assets/css/pages/city-hub.css">
     <link rel="stylesheet" href="/assets/chat/chat.css">
     <link rel="stylesheet" href="/assets/i18n/language-selector.css">
     <style>
@@ -378,119 +379,62 @@ <h2 data-i18n="cityHub.mumbai.exploreTitle">Explore Mumbai</h2>
                 <p data-i18n="cityHub.mumbai.exploreSubtitle">Ward-level map and climate data now available. Community and provider directories coming soon.</p>
             </div>
 
-            <div class="feature-grid">
-                <!-- Ward Map (Available) -->
-                <div class="feature-card-large">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <i class="fa-solid fa-map" style="color: #B9C98A !important;"></i>
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.map.title">Ward-Level Map</h3>
-                            <span class="feature-status-badge live">
-                                <i class="fa-solid fa-check-circle"></i> <span data-i18n="cityHub.features.map.statusLive">Live</span>
-                            </span>
-                        </div>
+                        <div class="hub-grid">
+                <!-- Communities Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/community.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.communities.title">Communities</span></h3>
+                        <span class="hub-count" id="hubCommCount">-</span>
+                        <a href="/communities/" class="hub-see-all">See all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.map.description" data-i18n-params='{"wardCount":"227"}'>
-                        Explore all 227 electoral wards with interactive boundaries. View ward demographics and geographical data across Chennai.
-                    </p>
-                    <div class="feature-action">
-                        <a href="/cities/mumbai/map/" class="btn btn-primary">
-                            <span data-i18n="cityHub.features.map.button">View Map</span> <i class="fa-solid fa-arrow-right"></i>
-                        </a>
+                    <div class="hub-preview-list" id="hubCommunities">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-                <!-- Climate Dashboard (Available) -->
-                <div class="feature-card-large">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/conservation.svg" alt="" style="width:36px;height:36px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.climate.title">Climate Data</h3>
-                            <span class="feature-status-badge live">
-                                <i class="fa-solid fa-check-circle"></i> <span data-i18n="cityHub.features.climate.statusLive">Live</span>
-                            </span>
-                        </div>
+                <!-- Stories Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/story.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.stories.title">Community Stories</span></h3>
+                        <a href="/cities/mumbai/stories/" class="hub-see-all">Read all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.climate.description" data-i18n-params='{"wardCount":"227","sectors":"2"}'>
-                        Ward-level climate baseline data across 227 wards. Explore Energy & Buildings and Waste Management sectors with interactive dashboards.
-                    </p>
-                    <div class="feature-action">
-                        <a href="/cities/mumbai/climate/" class="btn btn-primary">
-                            <span data-i18n="cityHub.features.climate.button">View Dashboard</span> <i class="fa-solid fa-arrow-right"></i>
-                        </a>
+                    <div class="hub-preview-list" id="hubStories">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-                <!-- Communities (Coming Soon) -->
-                <div class="feature-card-large coming-soon">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/community.svg" alt="" style="width:36px;height:36px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Climate Dashboard -->
+                <div class="hub-section hub-section-wide">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/conservation.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.climate.title">Climate Data</span></h3>
+                        <a href="/cities/mumbai/climate/" class="hub-see-all">Full dashboard <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.comingSoonCallout.description">
-                        Community directory for Mumbai is under development. Help us build the network by joining as a community.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
+                    <div class="hub-sector-grid">
+                        <a href="/cities/mumbai/climate/energy/" class="hub-sector-card">
+                            <img src="/assets/images/icons/solar.svg" alt="" style="width:24px;height:24px;">
+                            <div>
+                                <strong data-i18n="cityHub.features.climate.sectors.energy">Energy &amp; Buildings</strong>
+                                <span>Ward-level baseline</span>
+                            </div>
+                        </a>
+                        <a href="/cities/mumbai/climate/waste/" class="hub-sector-card">
+                            <img src="/assets/images/icons/waste-circular.svg" alt="" style="width:24px;height:24px;">
+                            <div>
+                                <strong data-i18n="cityHub.features.climate.sectors.waste">Solid Waste</strong>
+                                <span>Ward-level baseline</span>
+                            </div>
+                        </a>
                     </div>
                 </div>
 
-                <!-- Community Stories (Coming Soon) -->
-                <div class="feature-card-large coming-soon" data-feature="stories">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/story.svg" alt="" style="width:36px;height:36px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.stories.title">Community Stories</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
-                    </div>
-                    <p class="feature-description" data-i18n="cityHub.features.stories.comingSoonDescription">
-                        Community stories for this city are under development. Real stories of neighbourhood transformation coming soon.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
+                <!-- Map Preview -->
+                <div class="hub-section hub-section-wide">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/location.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.map.title">Ward-Level Map</span></h3>
+                        <a href="/cities/mumbai/map/" class="hub-see-all">View map <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                </div>
-
-            </div>
-
-            <!-- Coming Soon Callout -->
-            <div class="coming-soon-callout">
-                <img src="/assets/images/icons/plant.svg" alt="" aria-hidden="true" style="width: 64px; height: 64px; margin-bottom: var(--space-md);">
-                <h3 data-i18n="cityHub.comingSoonCallout.title">More Mumbai Data Coming Soon</h3>
-                <p data-i18n="cityHub.comingSoonCallout.description">
-                    We're currently building the Mumbai directory. Help us grow the network by registering your community or organization.
-                </p>
-                <p style="font-weight: 600;">
-                    <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.communityDirectory">Community Directory</span><br>
-                    <i class="fa-solid fa-building"></i> <span data-i18n="cityHub.comingSoonCallout.providerNetwork">Solution Provider Network</span><br>
-                    <i class="fa-solid fa-chart-line"></i> <span data-i18n="cityHub.comingSoonCallout.additionalSectors">Additional Climate Sectors (5 more)</span>
-                </p>
-                <div class="cta-buttons">
-                    <a href="/join/" class="btn btn-primary">
-                        <i class="fa-solid fa-user-plus"></i> <span data-i18n="cityHub.comingSoonCallout.joinCommunity">Join as Community</span>
-                    </a>
-                    <a href="/join/" class="btn btn-secondary">
-                        <i class="fa-solid fa-building-user"></i> <span data-i18n="cityHub.comingSoonCallout.joinProvider">Join as Provider</span>
+                    <a href="/cities/mumbai/map/" class="hub-map-preview" id="hubMap">
+                        <img src="/assets/images/cities/mumbai.svg" alt="Mumbai ward map" style="width:100%; height:200px; object-fit: contain; opacity: 0.7;">
                     </a>
                 </div>
             </div>
diff --git a/website/public/cities/pune/index.html b/website/public/cities/pune/index.html
index 9a9aacc3..092d3fbe 100644
--- a/website/public/cities/pune/index.html
+++ b/website/public/cities/pune/index.html
@@ -61,6 +61,7 @@
     <meta name="description" content="Communities, solution providers, and ward-level data for Pune neighbourhoods.">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="/assets/css/main.css">
+    <link rel="stylesheet" href="/assets/css/pages/city-hub.css">
     <link rel="stylesheet" href="/assets/chat/chat.css">
     <link rel="stylesheet" href="/assets/i18n/language-selector.css">
     <style>
@@ -378,96 +379,38 @@ <h2 data-i18n="cityHub.pune.exploreTitle">Explore Pune</h2>
                 <p data-i18n="cityHub.pune.exploreSubtitle">Ward-level map available now. Community and provider directories coming soon.</p>
             </div>
 
-            <div class="feature-grid">
-                <!-- Ward Map (Available) -->
-                <div class="feature-card-large">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <i class="fa-solid fa-map" style="color: #B9C98A !important;"></i>
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.map.title">Ward-Level Map</h3>
-                            <span class="feature-status-badge live">
-                                <i class="fa-solid fa-check-circle"></i> <span data-i18n="cityHub.features.map.statusLive">Live</span>
-                            </span>
-                        </div>
+                        <div class="hub-grid">
+                <!-- Communities Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/community.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.communities.title">Communities</span></h3>
+                        <span class="hub-count" id="hubCommCount">-</span>
+                        <a href="/communities/" class="hub-see-all">See all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.map.description" data-i18n-params='{"wardCount":"158"}'>
-                        Explore all 158 electoral wards with interactive boundaries. View ward demographics and geographical data across Chennai.
-                    </p>
-                    <div class="feature-action">
-                        <a href="/cities/pune/map/" class="btn btn-primary">
-                            <span data-i18n="cityHub.features.map.button">View Map</span> <i class="fa-solid fa-arrow-right"></i>
-                        </a>
+                    <div class="hub-preview-list" id="hubCommunities">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-                <!-- Communities (Coming Soon) -->
-                <div class="feature-card-large coming-soon">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Stories Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/story.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.stories.title">Community Stories</span></h3>
+                        <a href="/cities/pune/stories/" class="hub-see-all">Read all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.comingSoonCallout.description">
-                        Community directory for Pune is under development. Help us build the network by joining as a community.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
+                    <div class="hub-preview-list" id="hubStories">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-            
-                <!-- Community Stories (Coming Soon) -->
-                <div class="feature-card-large coming-soon" data-feature="stories">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/story.svg" alt="" style="width:20px;height:20px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.stories.title">Community Stories</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Map Preview -->
+                <div class="hub-section hub-section-wide">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/location.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.map.title">Ward-Level Map</span></h3>
+                        <a href="/cities/pune/map/" class="hub-see-all">View map <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.stories.comingSoonDescription">
-                        Community stories for this city are under development. Real stories of neighbourhood transformation coming soon.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
-                    </div>
-                </div>
-</div>
-
-            <!-- Coming Soon Callout -->
-            <div class="coming-soon-callout">
-                <img src="/assets/images/icons/plant.svg" alt="" aria-hidden="true" style="width: 64px; height: 64px; margin-bottom: var(--space-md);">
-                <h3 data-i18n="cityHub.comingSoonCallout.title">Pune Data Coming Soon</h3>
-                <p data-i18n="cityHub.comingSoonCallout.description">
-                    We're currently building the Pune directory. Help us grow the network by registering your community or organization.
-                </p>
-                <p style="font-weight: 600;">
-                    <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.communityDirectory">Community Directory</span><br>
-                    <i class="fa-solid fa-building"></i> <span data-i18n="cityHub.comingSoonCallout.providerNetwork">Solution Provider Network</span><br>
-                    <img src="/assets/images/icons/conservation.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.climateAction">Climate Action Dashboard</span>
-                </p>
-                <div class="cta-buttons">
-                    <a href="/join/" class="btn btn-primary">
-                        <i class="fa-solid fa-user-plus"></i> <span data-i18n="cityHub.comingSoonCallout.joinCommunity">Join as Community</span>
-                    </a>
-                    <a href="/join/" class="btn btn-secondary">
-                        <i class="fa-solid fa-building-user"></i> <span data-i18n="cityHub.comingSoonCallout.joinProvider">Join as Provider</span>
+                    <a href="/cities/pune/map/" class="hub-map-preview" id="hubMap">
+                        <img src="/assets/images/cities/pune.svg" alt="Pune ward map" style="width:100%; height:200px; object-fit: contain; opacity: 0.7;">
                     </a>
                 </div>
             </div>
diff --git a/website/public/cities/thane/index.html b/website/public/cities/thane/index.html
index 07883004..d509831c 100644
--- a/website/public/cities/thane/index.html
+++ b/website/public/cities/thane/index.html
@@ -61,6 +61,7 @@
     <meta name="description" content="Communities, solution providers, and ward-level data for Thane neighbourhoods.">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="/assets/css/main.css">
+    <link rel="stylesheet" href="/assets/css/pages/city-hub.css">
     <link rel="stylesheet" href="/assets/chat/chat.css">
     <link rel="stylesheet" href="/assets/i18n/language-selector.css">
     <style>
@@ -378,96 +379,38 @@ <h2 data-i18n="cityHub.thane.exploreTitle">Explore Thane</h2>
                 <p data-i18n="cityHub.thane.exploreSubtitle">Ward-level map available now. Community and provider directories coming soon.</p>
             </div>
 
-            <div class="feature-grid">
-                <!-- Ward Map (Available) -->
-                <div class="feature-card-large">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <i class="fa-solid fa-map" style="color: #B9C98A !important;"></i>
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.map.title">Ward-Level Map</h3>
-                            <span class="feature-status-badge live">
-                                <i class="fa-solid fa-check-circle"></i> <span data-i18n="cityHub.features.map.statusLive">Live</span>
-                            </span>
-                        </div>
+                        <div class="hub-grid">
+                <!-- Communities Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/community.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.communities.title">Communities</span></h3>
+                        <span class="hub-count" id="hubCommCount">-</span>
+                        <a href="/communities/" class="hub-see-all">See all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.map.description" data-i18n-params='{"wardCount":"135"}'>
-                        Explore all 135 electoral wards with interactive boundaries. View ward demographics and geographical data across Chennai.
-                    </p>
-                    <div class="feature-action">
-                        <a href="/cities/thane/map/" class="btn btn-primary">
-                            <span data-i18n="cityHub.features.map.button">View Map</span> <i class="fa-solid fa-arrow-right"></i>
-                        </a>
+                    <div class="hub-preview-list" id="hubCommunities">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-                <!-- Communities (Coming Soon) -->
-                <div class="feature-card-large coming-soon">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Stories Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/story.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.stories.title">Community Stories</span></h3>
+                        <a href="/cities/thane/stories/" class="hub-see-all">Read all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.comingSoonCallout.description">
-                        Community directory for Thane is under development. Help us build the network by joining as a community.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
+                    <div class="hub-preview-list" id="hubStories">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-            
-                <!-- Community Stories (Coming Soon) -->
-                <div class="feature-card-large coming-soon" data-feature="stories">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/story.svg" alt="" style="width:20px;height:20px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.stories.title">Community Stories</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Map Preview -->
+                <div class="hub-section hub-section-wide">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/location.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.map.title">Ward-Level Map</span></h3>
+                        <a href="/cities/thane/map/" class="hub-see-all">View map <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.stories.comingSoonDescription">
-                        Community stories for this city are under development. Real stories of neighbourhood transformation coming soon.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
-                    </div>
-                </div>
-</div>
-
-            <!-- Coming Soon Callout -->
-            <div class="coming-soon-callout">
-                <img src="/assets/images/icons/plant.svg" alt="" aria-hidden="true" style="width: 64px; height: 64px; margin-bottom: var(--space-md);">
-                <h3 data-i18n="cityHub.comingSoonCallout.title">Thane Data Coming Soon</h3>
-                <p data-i18n="cityHub.comingSoonCallout.description">
-                    We're currently building the Thane directory. Help us grow the network by registering your community or organization.
-                </p>
-                <p style="font-weight: 600;">
-                    <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.communityDirectory">Community Directory</span><br>
-                    <i class="fa-solid fa-building"></i> <span data-i18n="cityHub.comingSoonCallout.providerNetwork">Solution Provider Network</span><br>
-                    <img src="/assets/images/icons/conservation.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.climateAction">Climate Action Dashboard</span>
-                </p>
-                <div class="cta-buttons">
-                    <a href="/join/" class="btn btn-primary">
-                        <i class="fa-solid fa-user-plus"></i> <span data-i18n="cityHub.comingSoonCallout.joinCommunity">Join as Community</span>
-                    </a>
-                    <a href="/join/" class="btn btn-secondary">
-                        <i class="fa-solid fa-building-user"></i> <span data-i18n="cityHub.comingSoonCallout.joinProvider">Join as Provider</span>
+                    <a href="/cities/thane/map/" class="hub-map-preview" id="hubMap">
+                        <img src="/assets/images/cities/thane.svg" alt="Thane ward map" style="width:100%; height:200px; object-fit: contain; opacity: 0.7;">
                     </a>
                 </div>
             </div>
diff --git a/website/public/cities/visakhapatnam/index.html b/website/public/cities/visakhapatnam/index.html
index 291ab334..197f8f41 100644
--- a/website/public/cities/visakhapatnam/index.html
+++ b/website/public/cities/visakhapatnam/index.html
@@ -61,6 +61,7 @@
     <meta name="description" content="Communities, solution providers, and ward-level data for Visakhapatnam neighbourhoods.">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="/assets/css/main.css">
+    <link rel="stylesheet" href="/assets/css/pages/city-hub.css">
     <link rel="stylesheet" href="/assets/chat/chat.css">
     <link rel="stylesheet" href="/assets/i18n/language-selector.css">
     <style>
@@ -378,96 +379,38 @@ <h2 data-i18n="cityHub.visakhapatnam.exploreTitle">Explore Visakhapatnam</h2>
                 <p data-i18n="cityHub.visakhapatnam.exploreSubtitle">Ward-level map available now. Community and provider directories coming soon.</p>
             </div>
 
-            <div class="feature-grid">
-                <!-- Ward Map (Available) -->
-                <div class="feature-card-large">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <i class="fa-solid fa-map" style="color: #B9C98A !important;"></i>
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.map.title">Ward-Level Map</h3>
-                            <span class="feature-status-badge live">
-                                <i class="fa-solid fa-check-circle"></i> <span data-i18n="cityHub.features.map.statusLive">Live</span>
-                            </span>
-                        </div>
+                        <div class="hub-grid">
+                <!-- Communities Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/community.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.communities.title">Communities</span></h3>
+                        <span class="hub-count" id="hubCommCount">-</span>
+                        <a href="/communities/" class="hub-see-all">See all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.map.description" data-i18n-params='{"wardCount":"98"}'>
-                        Explore all 98 electoral wards with interactive boundaries. View ward demographics and geographical data across Chennai.
-                    </p>
-                    <div class="feature-action">
-                        <a href="/cities/visakhapatnam/map/" class="btn btn-primary">
-                            <span data-i18n="cityHub.features.map.button">View Map</span> <i class="fa-solid fa-arrow-right"></i>
-                        </a>
+                    <div class="hub-preview-list" id="hubCommunities">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-                <!-- Communities (Coming Soon) -->
-                <div class="feature-card-large coming-soon">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.communities.title">Communities</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Stories Preview (populated by city-hub.js) -->
+                <div class="hub-section">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/story.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.stories.title">Community Stories</span></h3>
+                        <a href="/cities/visakhapatnam/stories/" class="hub-see-all">Read all <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.comingSoonCallout.description">
-                        Community directory for Visakhapatnam is under development. Help us build the network by joining as a community.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
+                    <div class="hub-preview-list" id="hubStories">
+                        <div class="hub-loading">Loading...</div>
                     </div>
                 </div>
 
-            
-                <!-- Community Stories (Coming Soon) -->
-                <div class="feature-card-large coming-soon" data-feature="stories">
-                    <div class="feature-header">
-                        <div class="feature-icon-large">
-                            <img src="/assets/images/icons/story.svg" alt="" style="width:20px;height:20px;">
-                        </div>
-                        <div class="feature-info">
-                            <h3 data-i18n="cityHub.features.stories.title">Community Stories</h3>
-                            <span class="feature-status-badge coming-soon">
-                                <i class="fa-solid fa-clock"></i> <span data-i18n="cityHub.features.statusComingSoon">Coming Soon</span>
-                            </span>
-                        </div>
+                <!-- Map Preview -->
+                <div class="hub-section hub-section-wide">
+                    <div class="hub-section-header">
+                        <h3><img src="/assets/images/icons/location.svg" alt="" style="width:24px;height:24px;vertical-align:middle;"> <span data-i18n="cityHub.features.map.title">Ward-Level Map</span></h3>
+                        <a href="/cities/visakhapatnam/map/" class="hub-see-all">View map <i class="fa-solid fa-arrow-right"></i></a>
                     </div>
-                    <p class="feature-description" data-i18n="cityHub.features.stories.comingSoonDescription">
-                        Community stories for this city are under development. Real stories of neighbourhood transformation coming soon.
-                    </p>
-                    <div class="feature-action">
-                        <button class="btn" style="background: var(--color-text-lighter); cursor: not-allowed;" disabled>
-                            <span data-i18n="cityHub.comingSoonCallout.comingSoonButton">Coming Soon</span>
-                        </button>
-                    </div>
-                </div>
-</div>
-
-            <!-- Coming Soon Callout -->
-            <div class="coming-soon-callout">
-                <img src="/assets/images/icons/plant.svg" alt="" aria-hidden="true" style="width: 64px; height: 64px; margin-bottom: var(--space-md);">
-                <h3 data-i18n="cityHub.comingSoonCallout.title">Visakhapatnam Data Coming Soon</h3>
-                <p data-i18n="cityHub.comingSoonCallout.description">
-                    We're currently building the Visakhapatnam directory. Help us grow the network by registering your community or organization.
-                </p>
-                <p style="font-weight: 600;">
-                    <img src="/assets/images/icons/community.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.communityDirectory">Community Directory</span><br>
-                    <i class="fa-solid fa-building"></i> <span data-i18n="cityHub.comingSoonCallout.providerNetwork">Solution Provider Network</span><br>
-                    <img src="/assets/images/icons/conservation.svg" alt="" style="width:20px;height:20px;"> <span data-i18n="cityHub.comingSoonCallout.climateAction">Climate Action Dashboard</span>
-                </p>
-                <div class="cta-buttons">
-                    <a href="/join/" class="btn btn-primary">
-                        <i class="fa-solid fa-user-plus"></i> <span data-i18n="cityHub.comingSoonCallout.joinCommunity">Join as Community</span>
-                    </a>
-                    <a href="/join/" class="btn btn-secondary">
-                        <i class="fa-solid fa-building-user"></i> <span data-i18n="cityHub.comingSoonCallout.joinProvider">Join as Provider</span>
+                    <a href="/cities/visakhapatnam/map/" class="hub-map-preview" id="hubMap">
+                        <img src="/assets/images/cities/visakhapatnam.svg" alt="Visakhapatnam ward map" style="width:100%; height:200px; object-fit: contain; opacity: 0.7;">
                     </a>
                 </div>
             </div>