diff --git a/components/infoPage/infoBox/InfoAI.tsx b/components/infoPage/infoBox/InfoAI.tsx
index 97f230f..ef4a696 100644
--- a/components/infoPage/infoBox/InfoAI.tsx
+++ b/components/infoPage/infoBox/InfoAI.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 const InfoAI = () => {
     return (
-        <div className='max-w-[60rem] flex flex-col gap-5'>
+        <div className='max-w-[60rem] flex flex-col gap-5 mt-5'>
             <h2 className='font-semibold text-heading text-black'>How to identify an AI generated image</h2>
             <p className='font-regular text-medium text-black'>FloodGen uses AI to generate photorealistic images of potential flooding scenarios to raise awareness, bolster community preparedness, and support local governments resilience strategies. The street view images are transformed with a generative artificial intelligence process called CycleGAN to depict projected flood scenarios. CycleGAN is an image-to-image translation model that takes an input of a normal street view image and reprocesses the pixels to illustrate an image with flooding.</p>
             <p className='font-regular text-medium text-black'>All FloodGen generated imagery that is created with the use of generative artificial intelligence includes a FloodGen logo, located on the bottom-right corner of the image. View the image below for a few more tips on how to identify an AI generated flood image:</p>
diff --git a/components/infoPage/infoBox/InfoAbout.tsx b/components/infoPage/infoBox/InfoAbout.tsx
index aaf4e4a..4f9a919 100644
--- a/components/infoPage/infoBox/InfoAbout.tsx
+++ b/components/infoPage/infoBox/InfoAbout.tsx
@@ -8,7 +8,7 @@ type Props = {
 const InfoAbout = ({ clickHandler }: Props) => {
     return (
         <>
-            <div className='flex flex-col gap-5 lg:gap-0'>
+            <div className='flex flex-col gap-5 lg:gap-0 mt-5'>
                 <div className='flex flex-col gap-3 mb-5 max-w-[60rem]'>
                     <p className='font-regular text-medium text-black'>Today, 1.3 million New York City residents live within or directly adjacent to the floodplain.1 Flood damage is expensive, extensive, and oftentimes predictable. Maps of predicted flooding are helpful planning tools, but aerial views distance viewers from its potential impact. If we show the reality of predicted flooding through photorealistic imagery, could people be more prepared?</p>
                     <p className='font-regular text-medium text-black'>FloodGen is an advocacy tool that uses generative artificial intelligence (GenAI) to create photorealistic images of predicted flooding. Projected flood imagery from FloodGen can be integrated within community engagement strategies to:</p>
diff --git a/components/infoPage/infoBox/InfoBox.tsx b/components/infoPage/infoBox/InfoBox.tsx
index 8bd5eff..0f08bc4 100644
--- a/components/infoPage/infoBox/InfoBox.tsx
+++ b/components/infoPage/infoBox/InfoBox.tsx
@@ -12,7 +12,7 @@ import InfoAbout from './InfoAbout'
 import InfoCredit from './InfoCredit'
 import InfoAI from './InfoAI'
 
-import Image from 'next/image'
+
 
 
 const InfoBox = () => {
@@ -25,7 +25,7 @@ const InfoBox = () => {
     const { setOpenStreetView, openStreetView } = useContext(StreetViewContext) as StreetViewType
 
 
-
+    const isDesktop = useMediaQuery({ query: "(min-width: 1024px)" })
 
 
     const selectedClickHandler = (s: 'About' | "Credit" | "Introduction" | "AI") => {
@@ -47,19 +47,23 @@ const InfoBox = () => {
             <div className={`absolute top-[36%] lg:top-0 w-full h-[64%] lg:h-full bg-white lg:bg-secondary_blue rounded-t-[1rem] lg:rounded-none z-30 overflow-y-auto ${boxShown ? "translate-y-0 duration-700" : "translate-y-full duration-700"}`}>
                 <div className=' px-5 lg:px-16 pt-8 lg:pt-[5rem] pb-8 w-full rounded-t-[1rem]'>
                     {/* <Image width={isDesktop ? 203 : 80} height={isDesktop ? 38.17 : 15.4} src="./logos/floodgen.svg" alt='floodgen' className='mb-2' /> */}
-                    <img src="/logos/floodgen.svg" alt="" className='mb-2 w-[203px] h-[38.17px]' />
+                    {
+                        isDesktop ? <img src="/logos/floodgen.svg" alt="" className='mb-2 w-[203px] h-[38.17px]' /> :
+                        <img src="/logos/floodgen.svg" alt="" className='mb-4 w-[80px] h-[15.4px]' /> 
+                    }
+
                     {/* <InfoTitle /> */}
                     <div className='lg:flex lg:mt-8'>
-                        <div className='flex lg:flex-col gap-3 lg:gap-5  text-[#9C9C9C] '>
-                            <div className={`w-[50%] font-bold text-heading lg:text-[1.5rem]  cursor-pointer ${selected === "About" && "pb-[0.05rem] text-title_black border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("About")}>About</div>
-                            <div className={`w-[50%] font-bold text-heading lg:text-[1.5rem]  cursor-pointer ${selected === "Introduction" && "pb-[0.05rem]  text-title_black border-b-[3px] border-primary_blue"}`} onClick={narrativeClickHandler}>Introduction</div>
-                            <div className={`w-[60%] font-bold text-heading lg:text-[1.5rem]  cursor-pointer ${selected === "AI" && "pb-[0.05rem] text-title_black border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("AI")}>How to identify an AI generated image</div>
-                            <div className={`w-[50%] font-bold text-heading lg:text-[1.5rem]  cursor-pointer ${selected === "Credit" && "pb-[0.05rem] text-title_black border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("Credit")}>Credits</div>
+                        <div className='grid grid-cols-2 gap-2 lg:flex lg:flex-col lg:gap-5  text-[#9C9C9C] '>
+                            <div className={`lg:w-[50%] font-bold text-4 lg:text-[1.5rem]  cursor-pointer ${selected === "About" && "pb-[0.05rem] text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("About")}>About</div>
+                            <div className={`lg:w-[50%] font-bold text-4 lg:text-[1.5rem]  cursor-pointer ${selected === "Introduction" && "pb-[0.05rem]  text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={narrativeClickHandler}>Introduction</div>
+                            <div className={`lg:w-[50%] font-bold text-4 lg:text-[1.5rem]  cursor-pointer ${selected === "AI" && "pb-[0.05rem] text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("AI")}>How to identify an AI generated image</div>
+                            <div className={`lg:w-[50%] font-bold text-4 lg:text-[1.5rem]  cursor-pointer ${selected === "Credit" && "pb-[0.05rem] text-title_black lg:border-b-[3px] border-primary_blue"}`} onClick={() => selectedClickHandler("Credit")}>Credits</div>
                         </div>
                         {
                             selected === "About" ? <InfoAbout clickHandler={() => boxShownClickHandler(false)} /> :
-                            selected === "AI" ? <InfoAI /> :
-                            <InfoCredit />
+                                selected === "AI" ? <InfoAI /> :
+                                    <InfoCredit />
                         }
                     </div>
                 </div>
diff --git a/components/infoPage/infoBox/InfoCredit.tsx b/components/infoPage/infoBox/InfoCredit.tsx
index 0309d39..ed39cb8 100644
--- a/components/infoPage/infoBox/InfoCredit.tsx
+++ b/components/infoPage/infoBox/InfoCredit.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 const InfoCredit = () => {
   return (
-    <div className='max-w-[60rem]'>
+    <div className='max-w-[60rem] mt-5'>
       <div className='flex flex-col gap-5'>
         <h2 className='font-semibold text-heading text-black'><a href="https://beta.nyc/" target="_blank" className='hover:underline'>BetaNYC</a></h2>
         <p className='font-regular text-medium text-black'>BetaNYC is a civic organization dedicated to improving lives in New York through civic design, technology, and data. With an aim to improve access to public interest technology, the Civic Innovation Lab at BetaNYC provides assistance with research, data analysis, and data visualization. This project was created by the Civic Innovation Lab at BetaNYC, with the initial research into the flood image generator model led by Vaishali Talwar.</p>
diff --git a/components/narrative/Ending.tsx b/components/narrative/Ending.tsx
index 7dc258f..720567e 100644
--- a/components/narrative/Ending.tsx
+++ b/components/narrative/Ending.tsx
@@ -4,14 +4,14 @@ type Props = {
     clickHandler: () => void
 }
 
-const Ending = ({clickHandler}:Props) => {
+const Ending = ({ clickHandler }: Props) => {
     return (
-        <div className="relative w-full h-full">
-            <img src="/imgs/narrative_six.png" alt="" className="w-full h-[100vh]" />
-            <div className="absolute left-8 bottom-[11rem] px-5 py-7 max-w-[50rem] bg-black bg-opacity-[.65] rounded-lg">
-                <p className="font-semibold text-heading text-white">FloodGen uses AI to generate photorealistic images of potential flooding scenarios to raise awareness, bolster community preparedness, and support local governments resilience strategies.</p>
+        <div className="relative w-full h-[50%] md:h-full">
+            <img src="/imgs/narrative_six.png" alt="" className="w-full h-full" />
+            <div className="absolute max-sm:right-4 left-4  md:left-8 bottom-[11rem] px-5 py-7 md:max-w-[50rem] bg-black bg-opacity-[.65] rounded-lg">
+                <p className="font-semibold text-[14px] md:text-heading text-white">FloodGen uses AI to generate photorealistic images of potential flooding scenarios to raise awareness, bolster community preparedness, and support local governments resilience strategies.</p>
             </div>
-            <button className='absolute left-8 bottom-[5rem] px-5 py-4 text-semibold text-[1.25rem] bg-[#306DDD] rounded-[40px] cursor-pointer' onClick={clickHandler}>Explore Floodgen</button>
+            <button className='absolute left-8 bottom-[5rem] px-5 py-4 text-semibold text-[14px] md:text-[1.25rem] bg-[#306DDD] rounded-[40px] cursor-pointer' onClick={clickHandler}>Explore Floodgen</button>
             <img src='/logos/fg_logo_white_sm.png' className='absolute right-6 bottom-4 z-30 w-8 h-8' />
         </div>
     )
diff --git a/components/narrative/Introduction.tsx b/components/narrative/Introduction.tsx
index 9f40344..83ee596 100644
--- a/components/narrative/Introduction.tsx
+++ b/components/narrative/Introduction.tsx
@@ -2,12 +2,12 @@ import React from 'react'
 
 const Introduction = () => {
     return (
-        <div className="relative w-full h-full">
+        <div className="relative w-full h-[50%] md:h-full">
             <img src="/imgs/narrative_one.png" className="w-full h-full" />
-            <div className="absolute right-12 bottom-16 px-5 py-7 w-[36rem] bg-black bg-opacity-[.65] rounded-lg">
-                <h1 className="font-semibold text-[3.75rem] text-white">1.3 million</h1>
-                <p className="mb-[1rem] font-semibold text-heading text-white">New York City residents live within or directly adjacent to the floodplain. Flood damage is extensive, expensive, and often times predictable</p>
-                <p className="font-semibold text-[0.875rem] text-white">Source: Info, Photo</p>
+            <div className="absolute right-8 max-sm:left-8  md:right-12 bottom-16 px-5 py-7 md:w-[36rem] bg-black bg-opacity-[.65] rounded-lg">
+                <h1 className="font-semibold text-[24px]  md:text-[3.75rem] text-white">1.3 million</h1>
+                <p className="mb-[1rem] font-semibold text-[14px] md:text-heading text-white">New York City residents live within or directly adjacent to the floodplain. Flood damage is extensive, expensive, and often times predictable</p>
+                <p className="font-semibold text-[10px] md:text-[0.875rem] text-white">Source: Info, Photo</p>
             </div>
         </div>
     )
diff --git a/components/narrative/Satellite.tsx b/components/narrative/Satellite.tsx
index abf88cf..f7cd3fc 100644
--- a/components/narrative/Satellite.tsx
+++ b/components/narrative/Satellite.tsx
@@ -15,26 +15,25 @@ const Satellite = () => {
         <div className="">
             {/* <Scrollama offset={0.5} onStepEnter={onStepEnter}> */}
             {/* <Step data={1}> */}
-            <div className='relative w-full h-full'>
+            <div className='relative w-full h-[50%] md:h-full'>
                 <img src="/imgs/narrative_two.png" className='w-full h-full' alt="" />
-                <div className="absolute right-12 bottom-16 px-5 py-7 w-[36rem] bg-black bg-opacity-[.65] rounded-lg">
-                    <p className="mb-[1rem] font-semibold text-[1.125rem] text-white">Maps of predicted flooding are helpful planning tools, but aerial views distance viewers from its potential impact</p>
+                <div className="absolute right-8 max-sm:left-8  md:right-12 bottom-[25%] md:bottom-16 px-5 py-7 md:w-[36rem] bg-black bg-opacity-[.65] rounded-lg">
+                    <p className="mb-[1rem] font-semibold max-width-full text-[14px] md:text-[1.125rem] text-white">Maps of predicted flooding are helpful planning tools, but aerial views distance viewers from its potential impact</p>
                 </div>
             </div>
             {/* </Step> */}
             {/* <Step data={2}> */}
-            <div className='relative w-full h-full'>
+            <div className='relative w-full h-[50%] md:h-full'>
                 <img src="/imgs/narrative_three.png" className='w-full h-full' alt="" />
                 {/* <div className="absolute left-0 top-0 w-full h-full bg-black bg-opacity-40"></div> */}
                 <div className="absolute left-8 bottom-[5%] flex flex-col items-center p-5 w-[50%] bg-black bg-opacity-[.65] rounded-lg">
                     <img src="/imgs/narrative_six.png" className='w-full h-[20%]' alt="" />
-                    <p className="mt-2 font-semibold text-[1.125rem] text-white">If we show the reality of predicted flooding through photorealistic imagery, could people be more prepared?</p>
+                    <p className="mt-2 font-semibold text-[14px] md:text-[1.125rem] text-white">If we show the reality of predicted flooding through photorealistic imagery, could people be more prepared?</p>
                 </div>
             </div>
             {/* </Step> */}
             {/* </Scrollama> */}
         </div>
-
     )
 }
 
diff --git a/components/narrative/Slider.tsx b/components/narrative/Slider.tsx
index 99777be..f0c5f6e 100644
--- a/components/narrative/Slider.tsx
+++ b/components/narrative/Slider.tsx
@@ -30,19 +30,19 @@ const Slider = () => {
 
 
     return (
-        <div className="w-full h-[100vh] bg-white relative" onMouseUp={handleMouseUp}  >
+        <div className="w-full h-[50vh] md:h-[100vh] bg-white relative" onMouseUp={handleMouseUp}  >
             <div
                 className="relative w-full h-full overflow-hidden select-none"
                 onMouseMove={handleMove}
                 onMouseDown={handleMouseDown}
             >
                 <img src="/imgs/narrative_six.png" className="w-full h-full" alt="" />
-                <div className="absolute right-8 bottom-24 p-5 font-semibold text-[1.125rem] bg-black bg-opacity-70 rounded-lg text-white">AI generated</div>
+                <div className="absolute right-8 bottom-10 md:bottom-24 p-5 font-semibold text-[14px] md:text-[1.125rem] bg-black bg-opacity-70 rounded-lg text-white">AI generated</div>
                 <div
                     className="absolute top-0 left-0 right-0 w-full h-full overflow-hidden select-none z-30"
                     style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)` }}
                 >
-                    <div className="absolute left-8 bottom-24 p-5 font-semibold text-[1.125rem] bg-black bg-opacity-70 rounded-lg text-white">Street view</div>
+                    <div className="absolute left-8 bottom-10 md:bottom-24 p-5 font-semibold text-[14px] md:text-[1.125rem] bg-black bg-opacity-70 rounded-lg text-white">Street view</div>
                     <img src="/imgs/narrative_four.png" className="w-full h-full" alt="" />
                 </div>
                 <div
diff --git a/components/narrative/StreetView.tsx b/components/narrative/StreetView.tsx
index fad5e3e..04d1d71 100644
--- a/components/narrative/StreetView.tsx
+++ b/components/narrative/StreetView.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 const StreetView = () => {
     return (
-        <div className="relative w-full h-full">
+        <div className="relative w-full h-[50%] md:h-full">
             <img src="/imgs/narrative_four.png" alt="" className="w-full h-full" />
         </div>
     )