diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index b0cff9d..5fb8e79 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -124,7 +124,7 @@ function ShowSection({
   return (
     <motion.section
       ref={ref}
-      className="h-svh p-10 md:p-20 w-full flex flex-col items-center justify-center snap-center"
+      className="h-full p-10 md:p-20 w-full flex flex-col items-center justify-center snap-center"
     >
       <motion.div
         className="flex flex-col gap-2 items-center justify-center"
@@ -172,8 +172,8 @@ export default function HomePage() {
   const [currentText, setCurrentText] = useState(mistShowcase[0]?.code || "");
 
   return (
-    <div className="h-[calc(100vh-58px)] overflow-auto snap-y snap-mandatory scroll-smooth no-scrollbar relative flex flex-col xl:flex-row">
-      <div className="hidden pointer-events-none sticky top-0 right-0 z-50 xl:flex order-first xl:order-last w-full xl:w-[40vw] h-svh items-center justify-center p-10 no-scrollbar">
+    <div className="flex-1 min-h-0 overflow-auto snap-y snap-mandatory scroll-smooth no-scrollbar relative flex flex-col xl:flex-row">
+      <div className="hidden pointer-events-none sticky top-0 right-0 z-50 xl:flex order-first xl:order-last w-full xl:w-[40vw] items-center justify-center p-10 no-scrollbar">
         <div className="w-full max-w-2xl overflow-hidden no-scrollbar">
           <motion.div
             className="will-change-transform transform-gpu w-full h-auto border border-fd-border p-5 rounded-xl min-h-24 backdrop-blur bg-black dark:bg-black/20 pointer-events-auto"