diff --git a/src/app/invest/page.tsx b/src/app/invest/page.tsx
index 98e39d2..de3245b 100644
--- a/src/app/invest/page.tsx
+++ b/src/app/invest/page.tsx
@@ -69,13 +69,19 @@ export default function Invest() {
       <div>
         <Toaster position="top-right" reverseOrder={false} />
       </div>
-      <div className="w-[90%] h-[45w0px]-500 m-auto mt-12  pl-24">
+      <div className="w-[90%] h-[450px]-500 md:m-auto mt-12 md:mt-12 pl-14 md:pl-24">
         <div>
           {/* Name, star and share button packed */}
           <div className="grid grid-cols-4">
             <div className="flex col-span-2">
-              <Image src="./logo.svg" alt="logo" width={50} height={50} />
-              <h1 className="mt-3 font-bold text-3xl">NVIDIA</h1>
+              <Image
+                src="./logo.svg"
+                alt="logo"
+                width={50}
+                height={50}
+                className="sm:scale-75"
+              />
+              <div className="mt-3 font-bold  text-lg md:text-3xl">NVIDIA</div>
             </div>
             <div className="grid grid-cols-2 gap-5 justify-self-end ">
               <div className="mt-2 cursor-pointer" onClick={handleFollow}>
@@ -100,7 +106,10 @@ export default function Invest() {
             </div>
           </div>
           {/* end of pack */}
-          <p className="mt-2"> World's first non-metal sustainable battery</p>
+          <p className="mt-2 sm:text-sm">
+            {" "}
+            World's first non-metal sustainable battery
+          </p>
           <div className="flex flex-wrap mt-3">
             {["Technology", "Gaming"].map((tag) => (
               <span
@@ -113,20 +122,48 @@ export default function Invest() {
           </div>
           <div className="grid grid-cols-2">
             {/* image carousel */}
-            <Carousel className="w-full mt-4">
-              <CarouselContent className="h-[450px]">
-                {Array.from({ length: 5 }).map((_, index) => (
-                  <CarouselItem key={index}>
+            <div>
+              <Carousel className="w-full -mt-20 md:mt-0">
+                <CarouselContent className="h-[400px]">
+                  {Array.from({ length: 5 }).map((_, index) => (
+                    <CarouselItem key={index}>
+                      <div className="flex h-full items-center justify-center">
+                        <img
+                          src="./boiler1.jpg"
+                          alt=""
+                          className="rounded-lg self-center"
+                        />
+                      </div>
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>{" "}
+                <CarouselPrevious />
+                <CarouselNext />
+              </Carousel>
+              <Carousel className="w-2/3 md:w-full ml-10 md:ml-0 -mt-24 md:mt-0">
+                <CarouselContent>
+                  {/* boiler plate for an actual pictures */}
+                  <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
                     <img src="./boiler1.jpg" alt="" className="rounded-lg" />
                   </CarouselItem>
-                ))}
-              </CarouselContent>{" "}
-              <CarouselPrevious />
-              <CarouselNext />
-            </Carousel>
-            <div className=" w-2/3 mt-4 h-[400px] m-auto grid-rows-5 ">
+                  <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
+                    <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+                  </CarouselItem>
+                  <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
+                    <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+                  </CarouselItem>
+                  <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
+                    <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+                  </CarouselItem>
+                  <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
+                    <img src="./boiler1.jpg" alt="" className="rounded-lg" />
+                  </CarouselItem>
+                </CarouselContent>
+              </Carousel>
+            </div>
+            <div className=" w-2/3 mt-4  m-auto grid-rows-5">
               <div className="pl-5">
-                <h1 className="font-semibold text-4xl mt-8">
+                <h1 className="font-semibold text-xl md:text-4xl mt-8">
                   <CountUp
                     start={0}
                     end={100000}
@@ -135,43 +172,36 @@ export default function Invest() {
                     className=""
                   />
                 </h1>
-                <p className=""> 5% raised of $5M max goal</p>
+                <p className="text-sm md:text-lg"> 5% raised of $5M max goal</p>
                 <Progress value={progress} className="w-[60%] h-3 mt-3" />
-                <h1 className="font-semibold text-4xl mt-8">
+                <h1 className="font-semibold text-4xl md:mt-8">
                   {" "}
-                  <CountUp start={0} end={1000} duration={2} className="" />
+                  <CountUp
+                    start={0}
+                    end={1000}
+                    duration={2}
+                    className="text-xl md:text-4xl"
+                  />
                 </h1>
-                <p className=""> Investors</p>
+                <p className="text-sm md:text-lg"> Investors</p>
               </div>
               <Separator decorative className="mt-3 w-3/4 ml-5" />
-              <h1 className="font-semibold text-4xl mt-8 ml-5">
-                <CountUp start={0} end={5800} duration={2} className="" /> hours
+              <h1 className="font-semibold text-xl md:text-4xl mt-8 ml-5">
+                <CountUp
+                  start={0}
+                  end={5800}
+                  duration={2}
+                  className="text-xl md:text-4xl"
+                />{" "}
+                hours
               </h1>
               <p className="ml-5"> Left to invest</p>
-              <Button className="mt-10 ml-[25%]">Invest in NVIDIA</Button>
+              <Button className="mt-5 md:mt-10 ml-0 md:ml-[25%] scale-75 md:scale-100">
+                Invest in NVIDIA
+              </Button>
             </div>
           </div>
         </div>
-        <Carousel className="w-1/2 ml-10">
-          <CarouselContent>
-            {/* boiler plate for an actual pictures */}
-            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
-              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
-            </CarouselItem>
-            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
-              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
-            </CarouselItem>
-            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
-              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
-            </CarouselItem>
-            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
-              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
-            </CarouselItem>
-            <CarouselItem className="pl-1 md:basis-1/2 lg:basis-1/3">
-              <img src="./boiler1.jpg" alt="" className="rounded-lg" />
-            </CarouselItem>
-          </CarouselContent>
-        </Carousel>
       </div>
       {/* menu */}
       <div className="flex w-[90%]  mt-24 m-auto ml-32">