diff --git a/frontend/src/components/layout/Navbar.tsx b/frontend/src/components/layout/Navbar.tsx
index 2a587c7..38940a6 100644
--- a/frontend/src/components/layout/Navbar.tsx
+++ b/frontend/src/components/layout/Navbar.tsx
@@ -6,8 +6,8 @@ interface NavbarProps {
 
 export const Navbar: React.FC<NavbarProps> = ({ onCtaClick }) => {
   return (
-    <nav className="w-full px-4 sm:px-6 lg:px-8 py-4 bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-200/60">
-      <div className="max-w-7xl mx-auto flex items-center justify-between">
+    <nav className="w-full py-4 bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-200/60">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
         {/* Logo */}
         <div className="flex items-center gap-2">
           <span className="text-2xl">🌌</span>
diff --git a/frontend/src/components/sections/Hero.tsx b/frontend/src/components/sections/Hero.tsx
index c1617d6..349b91e 100644
--- a/frontend/src/components/sections/Hero.tsx
+++ b/frontend/src/components/sections/Hero.tsx
@@ -10,8 +10,8 @@ export const Hero: React.FC<HeroProps> = ({
   onSecondaryCtaClick,
 }) => {
   return (
-    <section className="w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-slate-50 to-white">
-      <div className="max-w-5xl mx-auto text-center">
+    <section className="w-full py-24 lg:py-32 bg-gradient-to-b from-slate-50 to-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
         {/* Badge */}
         <div className="inline-flex items-center gap-2 px-4 py-2 bg-indigo-50 border border-indigo-100 rounded-full mb-8">
           <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
diff --git a/frontend/src/components/sections/HowItWorks.tsx b/frontend/src/components/sections/HowItWorks.tsx
index 5d7a6db..b62c4ce 100644
--- a/frontend/src/components/sections/HowItWorks.tsx
+++ b/frontend/src/components/sections/HowItWorks.tsx
@@ -101,8 +101,8 @@ export const HowItWorks: React.FC = () => {
   ];
 
   return (
-    <section className="w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24 bg-slate-50">
-      <div className="max-w-6xl mx-auto">
+    <section className="w-full py-24 lg:py-32 bg-slate-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Section Header */}
         <div className="text-center mb-16">
           <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">
diff --git a/frontend/src/components/sections/ProblemSolution.tsx b/frontend/src/components/sections/ProblemSolution.tsx
index d1cd764..c6b8d80 100644
--- a/frontend/src/components/sections/ProblemSolution.tsx
+++ b/frontend/src/components/sections/ProblemSolution.tsx
@@ -3,8 +3,8 @@ import { Terminal, AlertCircle, CheckCircle, ArrowRight } from 'lucide-react';
 
 export const ProblemSolution: React.FC = () => {
   return (
-    <section className="w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24 bg-white">
-      <div className="max-w-6xl mx-auto">
+    <section className="w-full py-24 lg:py-32 bg-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Section Header */}
         <div className="text-center mb-16">
           <h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">