diff --git a/src/app/_Home/components/Owners.tsx b/src/app/_Home/components/Owners.tsx
index df2f124..a3b2bbf 100644
--- a/src/app/_Home/components/Owners.tsx
+++ b/src/app/_Home/components/Owners.tsx
@@ -12,8 +12,9 @@ const Owners = () => {
           <span className="text-gray-250">Revolution?</span>
         </h1>
         <p className="md:mt-24 max-w-xl ">
-          Discover the story, vision, and passion that drive <span className="text-red-800 font-bold">Himspired</span> to
-          redefine fashion for a new era.
+          Discover the story, vision, and passion that drive{" "}
+          <span className="text-red-800 font-bold">Himspired</span> to redefine
+          fashion for a new era.
         </p>
       </Wrapper>
       <ImageStack />
diff --git a/src/app/_Home/components/Products.tsx b/src/app/_Home/components/Products.tsx
index b1320d4..93f2990 100644
--- a/src/app/_Home/components/Products.tsx
+++ b/src/app/_Home/components/Products.tsx
@@ -8,7 +8,12 @@ import {
   CarouselItem,
   type CarouselApi,
 } from "@/components/ui/carousel";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  ArrowRight,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsUp,
+} from "lucide-react";
 import { cn } from "@/lib/utils";
 import { colors } from "@/constants/colors";
 import ProductSection from "./products/components/ProductSection";
@@ -21,7 +26,8 @@ import {
 import { useClothesByCategory } from "@/sanity/queries";
 import React from "react";
 import ProductCardSkeleton from "@/components/common/skeleton/product-card-skeleton.component";
-
+import Wrapper from "@/components/layout/Wrapper";
+import Link from "next/link";
 
 // Define our sections with their components and data
 const SECTIONS = [
@@ -59,15 +65,14 @@ const Products = () => {
   // const { clothes, loading, error, refetch } = useClothes();
   const { clothesByCategory, loading } = useClothesByCategory(8);
 
-
-
-
   // Calculate items to show based on screen width
   useEffect(() => {
     const updateItemsToShow = () => {
       const width = window.innerWidth;
-      if (width >= 1280) setItemsToShow(4); // XL and 2XL
-      else if (width >= 768) setItemsToShow(3); // MD
+      if (width >= 1280)
+        setItemsToShow(4); // XL and 2XL
+      else if (width >= 768)
+        setItemsToShow(3); // MD
       else setItemsToShow(2); // SM
     };
 
@@ -120,7 +125,7 @@ const Products = () => {
       if (!isHovering) {
         autoplayRef.current = setTimeout(() => {
           // Check if we're at the last slide
-          const isLastSlide = current === SECTIONS.length - 1;
+          const isLastSlide = current === clothesByCategory.length - 1;
 
           if (isLastSlide) {
             // Go back to the first slide
@@ -155,170 +160,256 @@ const Products = () => {
 
   // Check if we're at the first or last slide
   const isFirstSlide = current === 0;
-  const isLastSlide = current === SECTIONS.length - 1;
-  if (loading && clothesByCategory.length === 0) {
-    return (<div className="w-full flex items-center justify-center gap-4 md:gap-20  overflow-hidden mt-30 mb-10" >
-      {Array.from({ length: 4 }).map((_, i) => <ProductCardSkeleton key={i} delay={i * 0.1} />)}
-    </div>
-    )
-  }
+  const isLastSlide = current === clothesByCategory.length - 1;
+  // if (loading && clothesByCategory.length === 0) {
+  //   return (<div className="w-full flex items-center justify-center gap-4 md:gap-20  overflow-hidden mt-30 mb-10" >
+  //     {Array.from({ length: 4 }).map((_, i) => <ProductCardSkeleton key={i} delay={i * 0.1} />)}
+  //   </div>
+  //   )
+  // }
   return (
-    <div
-      className="relative pt-8 md:pt-16 xl:pt-24 pb-24 mt-[5em] lg:mt-0"
-      ref={containerRef}
-      onMouseEnter={() => setIsHovering(true)}
-      onMouseLeave={() => setIsHovering(false)}
-    >
-      {" "}
-      {/* Section indicator - with enhanced animation */}
-      <div className="px-4 md:px-8 lg:px-16 mb-6 md:mb-8 h-12 overflow-hidden font-moon">
-        <AnimatePresence mode="wait">
-          <motion.div
-            key={`${clothesByCategory[current]?.category}`}
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -20 }}
-            transition={{
-              duration: 0.5,
-              ease: [0.22, 1, 0.36, 1],
-              type: "spring",
-              stiffness: 100,
-              damping: 15,
+    <Wrapper>
+      <div
+        className=" pt-8 md:pt-16 xl:pt-24 pb-24 mt-[5em] lg:mt-0 w-full"
+        ref={containerRef}
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => setIsHovering(false)}
+      >
+        {/* Section indicator - with enhanced animation */}
+        <div className=" mb-6 md:mb-8 h-12 overflow-hidden font-moon">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={`${clothesByCategory[current]?.category}`}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{
+                duration: 0.5,
+                ease: [0.22, 1, 0.36, 1],
+                type: "spring",
+                stiffness: 100,
+                damping: 15,
+              }}
+              className="text-2xl md:text-3xl lg:text-4xl text-left font-bold"
+            >
+              <span className="text-black font-moon">{current + 1} / </span>
+              <span
+                className=" capitalize"
+                style={{ color: colors.primary_color }}
+              >
+                {clothesByCategory[current]?.category}
+              </span>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+        {/* Carousel */}
+        <div className="container mx-auto px-4 min-h-96 min-w-full">
+          <Carousel
+            setApi={setApi}
+            className="w-full relative"
+            opts={{
+              align: "start",
+              loop: false,
+              duration: 50,
             }}
-            className="text-2xl md:text-3xl lg:text-4xl text-left font-bold"
           >
-            <span className="text-black font-moon">
-              {current + 1} /{" "}
-            </span>
-            <span className=" capitalize" style={{ color: colors.primary_color }}>
-              {clothesByCategory[current]?.category}
-            </span>
-          </motion.div>
-        </AnimatePresence>
-      </div>
-      {/* Carousel */}
-      <div className="container mx-auto px-4">
-        <Carousel
-          setApi={setApi}
-          className="w-full relative"
-          opts={{
-            align: "start",
-            loop: false,
-            duration: 50,
-          }}
-        >
-          <CarouselContent>
-            {clothesByCategory.map((section) => (
-              <CarouselItem key={section.id} className="w-full">
-                <motion.div
-                  className="w-full flex items-center justify-center"
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  transition={{ duration: 0.5 }}
-                >
-                  <div className="w-full max-w-7xl">
-                    <ProductSection
-                      itemsToShow={itemsToShow}
-                      products={section?.products}
-                      key={`${section.id}-${itemsToShow}`}
-                    />
-                  </div>
-                </motion.div>
-              </CarouselItem>
-            ))}
-          </CarouselContent>
+            <CarouselContent>
+              {clothesByCategory.map((section) => (
+                <CarouselItem key={section.id} className="w-full">
+                  <motion.div
+                    className="w-full flex items-center justify-center"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    transition={{ duration: 0.5 }}
+                  >
+                    <div className="w-full max-w-7xl">
+                      <ProductSection
+                        itemsToShow={itemsToShow}
+                        products={section?.products}
+                        key={`${section.id}-${itemsToShow}`}
+                      />
+                    </div>
+                  </motion.div>
+                </CarouselItem>
+              ))}
+            </CarouselContent>
 
-          {/* Custom navigation arrows - disabled when at first/last slide */}
-          <motion.div
-            className="absolute top-1/2 -translate-y-1/2 left-0 md:left-4 lg:-left-12 hidden md:flex"
-            initial={{ opacity: 0, x: -20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ delay: 0.3, duration: 0.5 }}
-          >
-            <motion.button
-              onClick={() => api && api.scrollPrev()}
-              className={cn(
-                "rounded-full p-3 shadow-lg transition-all duration-300 backdrop-blur-sm group",
-                isFirstSlide
-                  ? "bg-gray-200/80 cursor-not-allowed"
-                  : "bg-white/80 hover:bg-[#68191E]"
-              )}
-              disabled={isFirstSlide}
-              aria-label="Previous section"
-              whileHover={!isFirstSlide ? { scale: 1.1 } : undefined}
-              whileTap={!isFirstSlide ? { scale: 0.95 } : undefined}
+            {/* Custom navigation arrows - disabled when at first/last slide */}
+            <motion.div
+              className="absolute top-1/2 -translate-y-1/2 left-0 md:left-4 lg:-left-12 hidden md:flex"
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.3, duration: 0.5 }}
             >
-              <ChevronLeft
+              <motion.button
+                onClick={() => api && api.scrollPrev()}
                 className={cn(
-                  "h-6 w-6 transition-colors duration-300",
+                  "rounded-full p-3 shadow-lg transition-all duration-300 backdrop-blur-sm group",
                   isFirstSlide
-                    ? "text-gray-400"
-                    : "text-gray-800 group-hover:text-white"
+                    ? "bg-gray-200/80 cursor-not-allowed"
+                    : "bg-white/80 hover:bg-[#68191E]"
                 )}
-              />
-            </motion.button>
-          </motion.div>
+                disabled={isFirstSlide}
+                aria-label="Previous section"
+                whileHover={!isFirstSlide ? { scale: 1.1 } : undefined}
+                whileTap={!isFirstSlide ? { scale: 0.95 } : undefined}
+              >
+                <ChevronLeft
+                  className={cn(
+                    "h-6 w-6 transition-colors duration-300",
+                    isFirstSlide
+                      ? "text-gray-400"
+                      : "text-gray-800 group-hover:text-white"
+                  )}
+                />
+              </motion.button>
+            </motion.div>
 
-          <motion.div
-            className="absolute top-1/2 -translate-y-1/2 right-0 md:right-4 lg:-right-12 hidden md:flex"
-            initial={{ opacity: 0, x: 20 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ delay: 0.3, duration: 0.5 }}
-          >
-            <motion.button
-              onClick={() => api && api.scrollNext()}
-              className={cn(
-                "rounded-full p-3 shadow-lg transition-all duration-300 backdrop-blur-sm group",
-                isLastSlide
-                  ? "bg-gray-200/80 cursor-not-allowed"
-                  : "bg-white/80 hover:bg-[#68191E]"
-              )}
-              disabled={isLastSlide}
-              aria-label="Next section"
-              whileHover={!isLastSlide ? { scale: 1.1 } : undefined}
-              whileTap={!isLastSlide ? { scale: 0.95 } : undefined}
+            <motion.div
+              className="absolute top-1/2 -translate-y-1/2 right-0 md:right-4 lg:-right-12 hidden md:flex"
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.3, duration: 0.5 }}
             >
-              <ChevronRight
+              <motion.button
+                onClick={() => api && api.scrollNext()}
                 className={cn(
-                  "h-6 w-6 transition-colors duration-300",
+                  "rounded-full p-3 shadow-lg transition-all duration-300 backdrop-blur-sm group",
                   isLastSlide
-                    ? "text-gray-400"
-                    : "text-gray-800 group-hover:text-white"
+                    ? "bg-gray-200/80 cursor-not-allowed"
+                    : "bg-white/80 hover:bg-[#68191E]"
                 )}
+                disabled={isLastSlide}
+                aria-label="Next section"
+                whileHover={!isLastSlide ? { scale: 1.1 } : undefined}
+                whileTap={!isLastSlide ? { scale: 0.95 } : undefined}
+              >
+                <ChevronRight
+                  className={cn(
+                    "h-6 w-6 transition-colors duration-300",
+                    isLastSlide
+                      ? "text-gray-400"
+                      : "text-gray-800 group-hover:text-white"
+                  )}
+                />
+              </motion.button>
+            </motion.div>
+          </Carousel>
+
+          {/* Navigation dots with animation */}
+          <motion.div
+            className="flex justify-center gap-2 mt-6 md:mt-8"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.4, duration: 0.5 }}
+          >
+            {clothesByCategory.map((section, index) => (
+              <motion.button
+                key={section.id}
+                className={cn(
+                  "w-3 h-3 rounded-full transition-all duration-300",
+                  current === index
+                    ? "scale-125"
+                    : "bg-gray-300 hover:bg-gray-400"
+                )}
+                style={{
+                  backgroundColor:
+                    current === index ? colors.primary_color : undefined,
+                }}
+                onClick={() => goToSlide(index)}
+                aria-label={`Go to ${section.category}`}
+                whileHover={{ scale: 1.2 }}
+                whileTap={{ scale: 0.9 }}
               />
-            </motion.button>
+            ))}
           </motion.div>
-        </Carousel>
-
-        {/* Navigation dots with animation */}
-        <motion.div
-          className="flex justify-center gap-2 mt-6 md:mt-8"
-          initial={{ opacity: 0, y: 20 }}
+        </div>{" "}
+       {/* Animated Footer Section */}
+       <motion.div
+          className="flex w-full flex-col gap-y-4 pt-10 text-black"
+          initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.4, duration: 0.5 }}
+          transition={{ 
+            delay: 0.6, 
+            duration: 0.6,
+            ease: [0.22, 1, 0.36, 1]
+          }}
         >
-          {clothesByCategory.map((section, index) => (
-            <motion.button
-              key={section.id}
-              className={cn(
-                "w-3 h-3 rounded-full transition-all duration-300",
-                current === index
-                  ? "scale-125"
-                  : "bg-gray-300 hover:bg-gray-400"
-              )}
-              style={{
-                backgroundColor:
-                  current === index ? colors.primary_color : undefined,
+          {/* Swipe Up Section */}
+          <motion.div
+            className="w-full text-center flex flex-col gap-1 items-center"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ 
+              delay: 0.7, 
+              duration: 0.5,
+              ease: [0.22, 1, 0.36, 1]
+            }}
+          >
+            <motion.div
+              animate={{ y: [0, -5, 0] }}
+              transition={{
+                duration: 2,
+                repeat: Infinity,
+                ease: "easeInOut"
               }}
-              onClick={() => goToSlide(index)}
-              aria-label={`Go to ${section.category}`}
-              whileHover={{ scale: 1.2 }}
-              whileTap={{ scale: 0.9 }}
-            />
-          ))}
+            >
+              <ChevronsUp />
+            </motion.div>
+            <motion.p
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.8, duration: 0.3 }}
+            >
+              SWIPE UP
+            </motion.p>
+          </motion.div>
+
+          {/* Shop Now Button */}
+          <motion.div
+            className="w-full flex justify-end"
+            initial={{ opacity: 0, x: 30 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ 
+              delay: 0.8, 
+              duration: 0.5,
+              ease: [0.22, 1, 0.36, 1]
+            }}
+          >
+            <Link href="/shop" className="group">
+              <motion.div
+                className="bg-[#F4F4F4] flex gap-1 rounded-full px-6 py-4 transition-all duration-300 group-hover:bg-[#68191E] group-hover:text-white"
+                whileHover={{ 
+                  scale: 1.05,
+                  transition: { duration: 0.2 }
+                }}
+                whileTap={{ 
+                  scale: 0.98,
+                  transition: { duration: 0.1 }
+                }}
+              >
+                <motion.p
+                  className="transition-colors duration-300"
+                >
+                  SHOP NOW
+                </motion.p>
+                <motion.div
+                  animate={{ x: [0, 5, 0] }}
+                  transition={{
+                    duration: 2,
+                    repeat: Infinity,
+                    ease: "easeInOut"
+                  }}
+                  className="group-hover:text-white"
+                >
+                  <ArrowRight />
+                </motion.div>
+              </motion.div>
+            </Link>
+          </motion.div>
         </motion.div>
       </div>
-    </div>
+    </Wrapper>
   );
 };
 
diff --git a/src/app/_Home/components/products/components/ProductSection.tsx b/src/app/_Home/components/products/components/ProductSection.tsx
index 29baec6..3ce6fda 100644
--- a/src/app/_Home/components/products/components/ProductSection.tsx
+++ b/src/app/_Home/components/products/components/ProductSection.tsx
@@ -206,15 +206,17 @@ const ProductItem = ({
         </p>
       )}
 
-      <AnimatePresence>
-        {showSizes && (
-          <motion.div
-            className="flex gap-4 flex-wrap justify-center"
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: 20 }}
-            transition={{ duration: 0.4 }}
-          >
+<div className="min-h-[60px] flex items-center justify-center">
+        <AnimatePresence mode="wait">
+          {showSizes && (
+            <motion.div
+              className="flex gap-4 flex-wrap justify-center"
+              layout
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 0 }}
+              transition={{ duration: 0.4 }}
+            >
             {product.size?.map((sizeOption) => {
               const sizeCartQuantity = sizeQuantities[sizeOption] || 0;
               
@@ -246,6 +248,7 @@ const ProductItem = ({
           </motion.div>
         )}
       </AnimatePresence>
+      </div>
     </motion.div>
   )
 }
diff --git a/src/components/layout/Wrapper.tsx b/src/components/layout/Wrapper.tsx
index 2cdabe0..684427e 100644
--- a/src/components/layout/Wrapper.tsx
+++ b/src/components/layout/Wrapper.tsx
@@ -6,7 +6,7 @@ interface WrapperProps {
 }
 
 const Wrapper: React.FC<WrapperProps> = ({ children, className = "" }) => {
-  return <div className={`flex justify-between px-4 md:px-10 lg:px-16 xl:px-30 ${className}`}>{children}</div>;
+  return <div className={`flex justify-between  px-6 md:px-10 lg:px-0 max-w-5xl mx-auto ${className}`}>{children}</div>;
 };
 
 export default Wrapper;