diff --git a/src/pages/products/Extension.tsx b/src/pages/products/Extension.tsx
index ae4efe6..9aa36f9 100644
--- a/src/pages/products/Extension.tsx
+++ b/src/pages/products/Extension.tsx
@@ -107,13 +107,13 @@ export const Extension = () => {
       <Navbar />
 
       {/* Hero */}
-      <section className="pt-32 pb-20 relative overflow-hidden">
+      <section className="pt-24 pb-12 sm:pt-32 sm:pb-20 relative overflow-hidden">
         <div className="absolute top-0 right-0 w-[300px] sm:w-[600px] h-[300px] sm:h-[600px] bg-green-500/20 rounded-full blur-[120px] -z-10 opacity-40" />
         <div className="absolute bottom-0 left-0 w-[250px] sm:w-[400px] h-[250px] sm:h-[400px] bg-green-500/10 rounded-full blur-[100px] -z-10 opacity-30" />
         <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-b from-transparent to-gray-950/50 -z-10" />
 
-        <div className="max-w-7xl mx-auto px-6">
-          <div className="grid lg:grid-cols-2 gap-12 items-center">
+        <div className="max-w-7xl mx-auto px-5 sm:px-6">
+          <div className="grid lg:grid-cols-2 gap-8 lg:gap-12 items-center">
 
             {/* Left — text & CTAs */}
             <div className="min-w-0">
@@ -127,8 +127,8 @@ export const Extension = () => {
               </AnimateIn>
 
               <AnimateIn variant="fade-up" delay={100}>
-                <div className="space-y-4 mb-8">
-                  <h1 className="text-4xl sm:text-5xl lg:text-7xl font-bold leading-tight tracking-tight">
+                <div className="space-y-3 sm:space-y-4 mb-6 sm:mb-8">
+                  <h1 className="text-4xl sm:text-5xl lg:text-7xl font-bold leading-[1.05] tracking-tight">
                     {t('Extension')}
                   </h1>
                   <p className="text-base sm:text-xl text-slate-400 leading-relaxed">
@@ -138,7 +138,7 @@ export const Extension = () => {
               </AnimateIn>
 
               <AnimateIn variant="fade-up" delay={250}>
-                <div className="flex flex-col sm:flex-row gap-4 mb-8">
+                <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 mb-6 sm:mb-8">
                   <Link to="/products/extension/beta" className="w-full sm:w-auto">
                     <Button
                       size="lg"
@@ -179,11 +179,11 @@ export const Extension = () => {
             </div>
 
             {/* Right — extension screenshot with 3D tilt */}
-            <AnimateIn variant="scale" delay={200} duration={800} className="min-w-0 mt-8 lg:mt-0 flex justify-center">
+            <AnimateIn variant="scale" delay={200} duration={800} className="min-w-0 mt-4 lg:mt-0 flex justify-center">
               <TiltCard
                 src="/images/extension-screenshot.png"
                 alt="KaleidoSwap Extension"
-                className="w-full max-w-[380px]"
+                className="w-full max-w-[300px] sm:max-w-[380px]"
               />
             </AnimateIn>
           </div>
@@ -191,16 +191,16 @@ export const Extension = () => {
       </section>
 
       {/* Features */}
-      <section className="py-20 bg-gray-950/50">
-        <div className="max-w-7xl mx-auto px-6">
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+      <section className="py-14 sm:py-20 bg-gray-950/50">
+        <div className="max-w-7xl mx-auto px-5 sm:px-6">
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-6">
             {features.map((feature) => (
-              <div key={feature.title} className="glass-card p-6 rounded-xl">
-                <div className="w-12 h-12 rounded-xl bg-green-500/10 text-green-400 flex items-center justify-center mb-4">
-                  <feature.icon className="w-6 h-6" />
+              <div key={feature.title} className="glass-card p-4 sm:p-6 rounded-xl">
+                <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-green-500/10 text-green-400 flex items-center justify-center mb-3 sm:mb-4">
+                  <feature.icon className="w-5 h-5 sm:w-6 sm:h-6" />
                 </div>
-                <h3 className="text-lg font-bold mb-2">{t(feature.title)}</h3>
-                <p className="text-slate-400 text-sm">{t(feature.description)}</p>
+                <h3 className="text-base sm:text-lg font-bold mb-1.5 sm:mb-2">{t(feature.title)}</h3>
+                <p className="text-slate-400 text-xs sm:text-sm leading-relaxed">{t(feature.description)}</p>
               </div>
             ))}
           </div>
@@ -208,22 +208,22 @@ export const Extension = () => {
       </section>
 
       {/* Supported Protocols */}
-      <section className="py-20">
-        <div className="max-w-7xl mx-auto px-6">
-          <h2 className="text-3xl font-bold text-center mb-4">{t('Five Protocols, One Extension')}</h2>
-          <p className="text-slate-400 text-center mb-12 max-w-2xl mx-auto">
+      <section className="py-14 sm:py-20">
+        <div className="max-w-7xl mx-auto px-5 sm:px-6">
+          <h2 className="text-2xl sm:text-3xl font-bold text-center mb-3 sm:mb-4">{t('Five Protocols, One Extension')}</h2>
+          <p className="text-slate-400 text-sm sm:text-base text-center mb-8 sm:mb-12 max-w-2xl mx-auto leading-relaxed">
             {t('The KaleidoSwap Extension connects to RGB, Lightning, Spark, Arkade, and Nostr through a pluggable protocol adapter architecture. No switching between wallets.')}
           </p>
 
-          <div className="grid grid-cols-2 md:grid-cols-5 gap-6 max-w-5xl mx-auto">
+          <div className="grid grid-cols-2 md:grid-cols-5 gap-3 sm:gap-6 max-w-5xl mx-auto">
             {protocols.map((protocol) => (
               <div
                 key={protocol.name}
-                className={`glass-card p-6 rounded-xl text-center transition-colors ${protocol.border} last:col-span-2 last:max-w-[calc(50%-12px)] last:mx-auto md:last:col-span-1 md:last:max-w-none md:last:mx-0`}
+                className={`glass-card p-4 sm:p-6 rounded-xl text-center transition-colors ${protocol.border} last:col-span-2 last:max-w-[calc(50%-6px)] last:mx-auto md:last:col-span-1 md:last:max-w-none md:last:mx-0`}
               >
-                <img src={protocol.logo} alt={protocol.name} className="w-10 h-10 mx-auto mb-4 object-contain" />
-                <h3 className={`text-lg font-bold mb-2 ${protocol.color}`}>{protocol.name}</h3>
-                <p className="text-slate-500 text-sm">{t(protocol.description)}</p>
+                <img src={protocol.logo} alt={protocol.name} className="w-9 h-9 sm:w-10 sm:h-10 mx-auto mb-3 sm:mb-4 object-contain" />
+                <h3 className={`text-base sm:text-lg font-bold mb-1.5 sm:mb-2 ${protocol.color}`}>{protocol.name}</h3>
+                <p className="text-slate-500 text-xs sm:text-sm leading-relaxed">{t(protocol.description)}</p>
               </div>
             ))}
           </div>
@@ -231,16 +231,16 @@ export const Extension = () => {
       </section>
 
       {/* Sovereignty */}
-      <section className="py-20 bg-gray-950/50">
-        <div className="max-w-7xl mx-auto px-6">
-          <div className="glass-card rounded-2xl p-8 md:p-12">
-            <div className="grid md:grid-cols-2 gap-8 items-center">
+      <section className="py-14 sm:py-20 bg-gray-950/50">
+        <div className="max-w-7xl mx-auto px-5 sm:px-6">
+          <div className="glass-card rounded-2xl p-6 sm:p-8 md:p-12">
+            <div className="grid md:grid-cols-2 gap-6 md:gap-8 items-center">
               <div>
-                <h2 className="text-3xl font-bold mb-4">{t('Sovereignty First')}</h2>
-                <p className="text-slate-400 mb-6">
+                <h2 className="text-2xl sm:text-3xl font-bold mb-3 sm:mb-4">{t('Sovereignty First')}</h2>
+                <p className="text-slate-400 text-sm sm:text-base mb-5 sm:mb-6 leading-relaxed">
                   {t('The KaleidoSwap Extension is self-custodial by design. Your seed never leaves the extension, your traffic never leaves your machine, and your funds never sit on our servers — because there are none.')}
                 </p>
-                <ul className="space-y-3 mb-6">
+                <ul className="space-y-2.5 sm:space-y-3 mb-2 sm:mb-6">
                   {[
                     'Self-custody by default — no accounts, no KYC',
                     'No tracking, no telemetry, no analytics',
@@ -248,27 +248,27 @@ export const Extension = () => {
                     'Open-source and independently auditable',
                     'Local-first — no servers in the payment path',
                   ].map((item) => (
-                    <li key={item} className="flex items-center gap-2 text-slate-300">
-                      <Check className="w-4 h-4 text-green-400 shrink-0" />
-                      {t(item)}
+                    <li key={item} className="flex items-start gap-2 text-slate-300 text-sm sm:text-base">
+                      <Check className="w-4 h-4 text-green-400 shrink-0 mt-0.5 sm:mt-1" />
+                      <span>{t(item)}</span>
                     </li>
                   ))}
                 </ul>
               </div>
               <div className="flex flex-col gap-4">
-                <div className="glass-card p-5 rounded-xl">
-                  <div className="w-12 h-12 rounded-xl bg-green-500/10 text-green-400 flex items-center justify-center mb-3">
-                    <Shield className="w-6 h-6" />
+                <div className="glass-card p-4 sm:p-5 rounded-xl">
+                  <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-green-500/10 text-green-400 flex items-center justify-center mb-2.5 sm:mb-3">
+                    <Shield className="w-5 h-5 sm:w-6 sm:h-6" />
                   </div>
-                  <h3 className="text-lg font-bold mb-1">{t('Non-Custodial')}</h3>
-                  <p className="text-slate-400 text-sm">{t('You hold your private keys. No third party — including KaleidoSwap — can access, freeze, or move your funds.')}</p>
+                  <h3 className="text-base sm:text-lg font-bold mb-1">{t('Non-Custodial')}</h3>
+                  <p className="text-slate-400 text-xs sm:text-sm leading-relaxed">{t('You hold your private keys. No third party — including KaleidoSwap — can access, freeze, or move your funds.')}</p>
                 </div>
-                <div className="glass-card p-5 rounded-xl">
-                  <div className="w-12 h-12 rounded-xl bg-green-500/10 text-green-400 flex items-center justify-center mb-3">
-                    <Server className="w-6 h-6" />
+                <div className="glass-card p-4 sm:p-5 rounded-xl">
+                  <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-green-500/10 text-green-400 flex items-center justify-center mb-2.5 sm:mb-3">
+                    <Server className="w-5 h-5 sm:w-6 sm:h-6" />
                   </div>
-                  <h3 className="text-lg font-bold mb-1">{t('Bring Your Own Node')}</h3>
-                  <p className="text-slate-400 text-sm">{t('Point the extension at your own RGB Lightning Node for full sovereignty over routing, channels, and asset issuance.')}</p>
+                  <h3 className="text-base sm:text-lg font-bold mb-1">{t('Bring Your Own Node')}</h3>
+                  <p className="text-slate-400 text-xs sm:text-sm leading-relaxed">{t('Point the extension at your own RGB Lightning Node for full sovereignty over routing, channels, and asset issuance.')}</p>
                 </div>
               </div>
             </div>
@@ -277,32 +277,32 @@ export const Extension = () => {
       </section>
 
       {/* Get Started */}
-      <section className="py-20">
-        <div className="max-w-7xl mx-auto px-6">
-          <h2 className="text-3xl font-bold text-center mb-12">{t('Get Started')}</h2>
+      <section className="py-14 sm:py-20">
+        <div className="max-w-7xl mx-auto px-5 sm:px-6">
+          <h2 className="text-2xl sm:text-3xl font-bold text-center mb-8 sm:mb-12">{t('Get Started')}</h2>
 
-          <div className="grid md:grid-cols-4 gap-8 max-w-4xl mx-auto">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8 max-w-4xl mx-auto">
             {[
               { step: '01', title: 'Join Early Access', desc: 'Request access via our Telegram community to get the extension build.' },
               { step: '02', title: 'Load Extension', desc: 'Enable Developer mode in Chrome, then load the unpacked dist/ folder.' },
               { step: '03', title: 'Create Wallet', desc: 'Create or import a seed, set a password, and connect to your RGB Lightning Node.' },
               { step: '04', title: 'Start Using', desc: 'Send, receive, swap, and connect your wallet to any WebLN-compatible dApp.' },
             ].map((item) => (
-              <div key={item.step} className="text-center max-w-[220px] md:max-w-none mx-auto">
-                <div className="w-16 h-16 rounded-full bg-green-500/10 border border-green-500/30 flex items-center justify-center mx-auto mb-4">
-                  <span className="text-2xl font-bold text-green-400">{item.step}</span>
+              <div key={item.step} className="text-center max-w-none mx-auto">
+                <div className="w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-green-500/10 border border-green-500/30 flex items-center justify-center mx-auto mb-3 sm:mb-4">
+                  <span className="text-lg sm:text-2xl font-bold text-green-400">{item.step}</span>
                 </div>
-                <h3 className="text-lg font-bold mb-2">{t(item.title)}</h3>
-                <p className="text-slate-400 text-sm">{t(item.desc)}</p>
+                <h3 className="text-sm sm:text-lg font-bold mb-1.5 sm:mb-2">{t(item.title)}</h3>
+                <p className="text-slate-400 text-xs sm:text-sm leading-relaxed">{t(item.desc)}</p>
               </div>
             ))}
           </div>
 
-          <div className="flex justify-center mt-12">
-            <Link to="/products/extension/beta">
+          <div className="flex justify-center mt-10 sm:mt-12 px-5 sm:px-0">
+            <Link to="/products/extension/beta" className="w-full sm:w-auto">
               <Button
                 size="lg"
-                className="bg-green-500 hover:bg-green-600 flex items-center gap-2"
+                className="bg-green-500 hover:bg-green-600 flex items-center justify-center gap-2 w-full"
               >
                 <LockOpen className="w-4 h-4" />
                 {t('Apply for Beta Access')}
diff --git a/src/pages/products/ExtensionBeta.tsx b/src/pages/products/ExtensionBeta.tsx
index 7c5fb38..5d754e8 100644
--- a/src/pages/products/ExtensionBeta.tsx
+++ b/src/pages/products/ExtensionBeta.tsx
@@ -139,7 +139,7 @@ export const ExtensionBeta = () => {
   }
 
   const inputClass =
-    'w-full bg-gray-900/60 border border-gray-700 rounded-lg px-4 py-2.5 text-sm text-white placeholder:text-slate-500 focus:outline-none focus:border-purple-400 focus:ring-1 focus:ring-purple-400/40 transition-colors'
+    'w-full bg-gray-900/60 border border-gray-700 rounded-lg px-4 py-3 text-base sm:text-sm text-white placeholder:text-slate-500 focus:outline-none focus:border-purple-400 focus:ring-1 focus:ring-purple-400/40 transition-colors'
 
   return (
     <div className="min-h-screen bg-background-dark text-white font-display">
@@ -152,51 +152,53 @@ export const ExtensionBeta = () => {
 
       <Navbar />
 
-      <section className="pt-32 pb-12 relative overflow-hidden">
-        <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-purple-500/15 rounded-full blur-[120px] -z-10 opacity-40" />
-        <div className="max-w-3xl mx-auto px-6">
+      <section className="pt-24 pb-8 sm:pt-32 sm:pb-12 relative overflow-hidden">
+        <div className="absolute top-0 right-0 w-[300px] sm:w-[500px] h-[300px] sm:h-[500px] bg-purple-500/15 rounded-full blur-[120px] -z-10 opacity-40" />
+        <div className="max-w-3xl mx-auto px-5 sm:px-6">
           <Link
             to="/products/extension"
-            className="inline-flex items-center gap-2 text-sm text-slate-400 hover:text-white mb-6 transition-colors"
+            className="inline-flex items-center gap-2 text-sm text-slate-400 hover:text-white mb-5 sm:mb-6 transition-colors"
           >
             <ArrowLeft className="w-4 h-4" />
             Back to KaleidoSwap Extension
           </Link>
 
-          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-purple-500/30 bg-purple-500/10 mb-6">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-purple-500/30 bg-purple-500/10 mb-4 sm:mb-6">
             <span className="text-xs font-semibold text-purple-400 uppercase tracking-wider">Closed Beta</span>
           </div>
 
-          <h1 className="text-4xl lg:text-5xl font-bold mb-4">Apply for KaleidoSwap Extension Beta access</h1>
-          <p className="text-slate-400 text-lg mb-2">
+          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-bold leading-[1.1] mb-3 sm:mb-4">
+            Apply for KaleidoSwap Extension Beta access
+          </h1>
+          <p className="text-slate-400 text-base sm:text-lg mb-2 leading-relaxed">
             Help us shape the multi-protocol browser wallet before public release.
           </p>
-          <p className="text-slate-500 text-sm mb-8">
+          <p className="text-slate-500 text-xs sm:text-sm mb-6 sm:mb-8 leading-relaxed">
             Beta covers mainnet (Spark, Arkade) and RLN testnets (regtest, mutinynet). We'll review your
             request and email you a Proton Drive link with the extension package and an install guide.
           </p>
         </div>
       </section>
 
-      <section className="pb-20">
-        <div className="max-w-3xl mx-auto px-6">
+      <section className="pb-14 sm:pb-20">
+        <div className="max-w-3xl mx-auto px-5 sm:px-6">
           {status.kind === 'success' ? (
-            <div className="glass-card rounded-2xl p-8 text-center">
+            <div className="glass-card rounded-2xl p-6 sm:p-8 text-center">
               <div className="w-14 h-14 rounded-full bg-purple-500/15 border border-purple-500/30 flex items-center justify-center mx-auto mb-4">
                 <Check className="w-7 h-7 text-purple-400" />
               </div>
-              <h2 className="text-2xl font-bold mb-2">You're on the list</h2>
-              <p className="text-slate-400 mb-6">
+              <h2 className="text-xl sm:text-2xl font-bold mb-2">You're on the list</h2>
+              <p className="text-slate-400 text-sm sm:text-base mb-5 sm:mb-6 leading-relaxed">
                 Thanks for applying. We'll review your request and email you a download link if you're selected
                 for the beta cohort.
               </p>
-              <Link to="/products/extension">
-                <Button variant="outline">Back to KaleidoSwap Extension</Button>
+              <Link to="/products/extension" className="inline-block w-full sm:w-auto">
+                <Button variant="outline" className="w-full sm:w-auto">Back to KaleidoSwap Extension</Button>
               </Link>
             </div>
           ) : (
-            <form onSubmit={onSubmit} className="glass-card rounded-2xl p-6 md:p-8 space-y-5">
-              <div className="grid md:grid-cols-2 gap-5">
+            <form onSubmit={onSubmit} className="glass-card rounded-2xl p-5 sm:p-6 md:p-8 space-y-4 sm:space-y-5">
+              <div className="grid sm:grid-cols-2 gap-4 sm:gap-5">
                 <div>
                   <label htmlFor="name" className="block text-sm font-medium text-slate-300 mb-1.5">
                     Name <span className="text-purple-400">*</span>
@@ -260,7 +262,7 @@ export const ExtensionBeta = () => {
                 />
               </div>
 
-              <div className="grid md:grid-cols-2 gap-5">
+              <div className="grid sm:grid-cols-2 gap-4 sm:gap-5">
                 <div>
                   <label htmlFor="telegram" className="block text-sm font-medium text-slate-300 mb-1.5">
                     Telegram <span className="text-slate-500 font-normal">(optional)</span>
@@ -306,16 +308,16 @@ export const ExtensionBeta = () => {
                 </div>
               )}
 
-              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pt-2">
-                <p className="text-xs text-slate-500 flex items-center gap-1.5">
-                  <Shield className="w-3.5 h-3.5 text-slate-500" />
-                  We only use your details to review and contact you about the beta.
+              <div className="flex flex-col-reverse sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4 pt-2">
+                <p className="text-xs text-slate-500 flex items-start sm:items-center gap-1.5">
+                  <Shield className="w-3.5 h-3.5 text-slate-500 shrink-0 mt-0.5 sm:mt-0" />
+                  <span>We only use your details to review and contact you about the beta.</span>
                 </p>
                 <Button
                   type="submit"
                   size="lg"
                   disabled={status.kind === 'submitting'}
-                  className="bg-purple-500 hover:bg-purple-600"
+                  className="bg-purple-500 hover:bg-purple-600 w-full sm:w-auto justify-center"
                 >
                   <Mail className="w-4 h-4 mr-2" />
                   {status.kind === 'submitting' ? 'Submitting…' : 'Apply for Beta'}