diff --git a/web/src/components/AppLayout.tsx b/web/src/components/AppLayout.tsx
index a2091391..c0f7bb8f 100644
--- a/web/src/components/AppLayout.tsx
+++ b/web/src/components/AppLayout.tsx
@@ -548,15 +548,20 @@ const AppLayout: React.FC = () => {
         ) : (
           <>
             <HeroSection />
+            {/* ChainSpecs (Mainnet card) - show right after hero on mobile */}
+            <div id="chain-specs" className="block sm:hidden">
+              <ChainSpecs />
+            </div>
             <NetworkStats key="network-stats-live" />
             <PalletsGrid />
             <TokenomicsSection />
-            
-            
+
+
             <div id="trust-calculator">
               <TrustScoreCalculator />
             </div>
-            <div id="chain-specs">
+            {/* ChainSpecs - original position for desktop */}
+            <div id="chain-specs-desktop" className="hidden sm:block">
               <ChainSpecs />
             </div>
             <div id="governance">
diff --git a/web/src/components/HeroSection.tsx b/web/src/components/HeroSection.tsx
index db9db5df..de56dd44 100644
--- a/web/src/components/HeroSection.tsx
+++ b/web/src/components/HeroSection.tsx
@@ -156,7 +156,7 @@ const HeroSection: React.FC = () => {
           </button>
           <button
             onClick={() => document.getElementById('governance')?.scrollIntoView({ behavior: 'smooth' })}
-            className="px-5 py-3 sm:px-8 sm:py-4 bg-gray-900/80 backdrop-blur-sm text-white font-semibold rounded-lg border border-gray-700 hover:bg-gray-800 hover:border-gray-600 transition-all"
+            className="hidden sm:inline-flex px-5 py-3 sm:px-8 sm:py-4 bg-gray-900/80 backdrop-blur-sm text-white font-semibold rounded-lg border border-gray-700 hover:bg-gray-800 hover:border-gray-600 transition-all"
           >
             {t('hero.learnMore', 'Learn More')}
           </button>