diff --git a/frontend/src/components/home/HomePage.tsx b/frontend/src/components/home/HomePage.tsx
index f559817..c562a20 100644
--- a/frontend/src/components/home/HomePage.tsx
+++ b/frontend/src/components/home/HomePage.tsx
@@ -65,8 +65,8 @@ export default function HomePage({
           <HexCanvas isDark={theme === 'dark'} />
           <div className="absolute top-1/3 left-1/4 w-[500px] h-[500px] bg-teal-500/[0.04] rounded-full blur-[120px] pointer-events-none" />
           <div className="absolute bottom-0 right-1/4 w-[400px] h-[300px] bg-teal-600/[0.03] rounded-full blur-[100px] pointer-events-none" />
-          <div className="relative z-10 max-w-4xl mx-auto px-6 md:px-10 pt-16 md:pt-24 backdrop-blur-[2px] flex-1 flex flex-col">
-            <div>
+          <div className="relative z-10 max-w-7xl mx-auto w-full px-6 md:px-10 pt-16 md:pt-24 backdrop-blur-[2px] flex-1 flex flex-col">
+            <div className="max-w-4xl">
               <h1 className="text-3xl md:text-5xl font-extrabold text-white mb-4 leading-[1.1] tracking-tight">
                 {t('home.heroTitle1')} <span className="text-teal-400">{t('home.heroTitle2')}</span>
                 .
@@ -145,7 +145,7 @@ export default function HomePage({
         </div>
 
         {/* Our philosophy */}
-        <div className="px-6 md:px-12 lg:px-20 pt-12 md:pt-20 pb-4">
+        <div className="max-w-7xl mx-auto px-6 md:px-10 pt-12 md:pt-20 pb-4">
           <h2 className="text-2xl md:text-3xl font-bold text-navy-950 dark:text-warm-100 mb-6">
             {t('home.ourPhilosophy')}
           </h2>
@@ -156,7 +156,7 @@ export default function HomePage({
         </div>
 
         {/* How to use it + Comparison table (two columns) */}
-        <div id="how-it-works" className="max-w-7xl mx-auto px-6 pt-10 pb-2">
+        <div id="how-it-works" className="max-w-7xl mx-auto px-6 md:px-10 pt-10 pb-2">
           <div ref={whyRef} className="fade-in-section">
             <div className="grid lg:grid-cols-[2fr_3fr] gap-8 lg:gap-12 items-start">
               {/* Left: How to use it */}
@@ -277,8 +277,8 @@ export default function HomePage({
         </div>
 
         {/* The real cost CTA */}
-        <div className="max-w-4xl mx-auto px-6 pt-12 md:pt-20 pb-12">
-          <div ref={ctaRef} className="fade-in-section text-center">
+        <div className="max-w-7xl mx-auto px-6 md:px-10 pt-12 md:pt-20 pb-12">
+          <div ref={ctaRef} className="fade-in-section text-center max-w-4xl mx-auto">
             <h2 className="text-2xl md:text-3xl font-bold text-navy-950 dark:text-warm-100 mb-4 leading-snug">
               {t('home.ctaTitle')}
             </h2>