diff --git a/src/app/components/PageLayout.tsx b/src/app/components/PageLayout.tsx
index e2f25b5..a7e071d 100644
--- a/src/app/components/PageLayout.tsx
+++ b/src/app/components/PageLayout.tsx
@@ -25,7 +25,7 @@ export default function PageLayout({
   const isMobile = isMobileDevice();
   
   return (
-    <div className="min-h-screen w-full flex flex-col relative bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors overflow-x-hidden">
+    <div className="min-h-screen w-full flex flex-col bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors">
       
       {showHeader && (
         <div className="relative z-50 w-full flex-shrink-0">
@@ -33,13 +33,13 @@ export default function PageLayout({
         </div>
       )}
       
-      {/* Main content scrolls naturally with page */}
-      <div className="flex-1 relative z-10 w-full flex flex-col">
+      {/* Main content */}
+      <div className="flex-1 relative z-10 w-full">
         <PageTransitionEffect>{children}</PageTransitionEffect>
       </div>
       
       {showFooter && (
-        <div className="relative z-50 flex-shrink-0">
+        <div className="relative z-50 w-full flex-shrink-0">
           <Footer />
         </div>
       )}
diff --git a/src/app/components/animation/pageTransitionEffect.tsx b/src/app/components/animation/pageTransitionEffect.tsx
index 3d0ebe8..dab72c2 100644
--- a/src/app/components/animation/pageTransitionEffect.tsx
+++ b/src/app/components/animation/pageTransitionEffect.tsx
@@ -25,7 +25,7 @@ const PageTransitionEffect = ({ children }: { children: React.ReactNode }) => {
         animate="enter"
         exit="exit"
         transition={{ type: 'tween', duration: 0.3 }}
-        className="flex-1 w-full flex flex-col"
+        className="w-full"
       >
         {children}
       </motion.div>
diff --git a/src/app/globals.css b/src/app/globals.css
index 00cff9c..726a36e 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -20,6 +20,10 @@
   }
 }
 
+html {
+  overflow-x: hidden;
+}
+
 html, body {
   margin: 0;
   padding: 0;
@@ -27,6 +31,7 @@ html, body {
   background: var(--background);
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
+  overflow-x: hidden;
 }
 
 #__next {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c23cfc9..4607d8e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,7 +6,7 @@ export default function HomePage() {
       {/* Hero Section */}
       <section
         id="hero"
-        className="relative isolate" // removed flex-1 to avoid nested scroll container
+        className="relative isolate min-h-screen flex flex-col justify-center"
       >
         {/* ...existing code (pattern SVG + blurred polygon) ... */}
         <svg
@@ -54,7 +54,6 @@ export default function HomePage() {
 
           {/* Content wrapper */}
           <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 sm:py-20 lg:px-8 lg:py-32 flex w-full items-center">
-            {/* removed h-full so it sizes to content */}
             <div className="mx-auto max-w-2xl gap-x-8 lg:mx-0 lg:flex lg:max-w-none lg:items-center lg:gap-x-14">
               <div className="relative w-full lg:max-w-xl lg:shrink-0 xl:max-w-2xl">
                 <h1 className="text-3xl font-semibold tracking-tight text-pretty text-white sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl">