diff --git a/awwwards_ss4/src/App.jsx b/awwwards_ss4/src/App.jsx
index f995c0c..79e044b 100644
--- a/awwwards_ss4/src/App.jsx
+++ b/awwwards_ss4/src/App.jsx
@@ -1,4 +1,6 @@
 import Home from "./components/Home"
+import KitVideo from "./components/KitVideo"
+import Products from "./components/Products"
 import Shop from "./components/Shop"
 
 
@@ -8,6 +10,8 @@ function App() {
     <>
       <Home/>
       <Shop/>
+      <KitVideo/>
+      <Products/>
     </>
   )
 }
diff --git a/awwwards_ss4/src/assets/VProduct1.mp4 b/awwwards_ss4/src/assets/VProduct1.mp4
new file mode 100644
index 0000000..68c4a32
Binary files /dev/null and b/awwwards_ss4/src/assets/VProduct1.mp4 differ
diff --git a/awwwards_ss4/src/assets/kit.mp4 b/awwwards_ss4/src/assets/kit.mp4
new file mode 100644
index 0000000..ac3769c
Binary files /dev/null and b/awwwards_ss4/src/assets/kit.mp4 differ
diff --git a/awwwards_ss4/src/assets/product1.webp b/awwwards_ss4/src/assets/product1.webp
new file mode 100644
index 0000000..fff5db0
Binary files /dev/null and b/awwwards_ss4/src/assets/product1.webp differ
diff --git a/awwwards_ss4/src/components/KitVideo.jsx b/awwwards_ss4/src/components/KitVideo.jsx
new file mode 100644
index 0000000..a8931ba
--- /dev/null
+++ b/awwwards_ss4/src/components/KitVideo.jsx
@@ -0,0 +1,17 @@
+import videoKit from "../assets/kit.mp4"
+
+const KitVideo = () => {
+  return (
+    <div className='w-full h-screen flex items-end -mt-48 md:mt-0 bg-[#FAF3E8]'>
+        <video src={videoKit} autoPlay loop muted className="w-[100%] h-[100%] object-cover"></video>
+        <div className="w-full flex absolute px-5 sm:px-10">
+            <h1 className="mb-10 text-white">
+                <p className="w-[100vw] xl:w-[40vw] 2xl:w-[35vw] text-[32px] md:text-[36px] xl:text-[3vw] 2xl:text-[2.5vw]">For the good kind of stretch.</p>
+                <button className="uppercase px-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white hover:bg-transparent hover:text-[#C20019] mt-5">shop the gua sha body tool</button>
+            </h1>
+        </div>
+    </div>
+  )
+}
+
+export default KitVideo
\ No newline at end of file
diff --git a/awwwards_ss4/src/components/Products.jsx b/awwwards_ss4/src/components/Products.jsx
new file mode 100644
index 0000000..2b44d55
--- /dev/null
+++ b/awwwards_ss4/src/components/Products.jsx
@@ -0,0 +1,74 @@
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import Product1 from "../assets/product1.webp"
+import VProduct1 from "../assets/VProduct1.mp4"
+
+const Products = () => {
+    const shopSlide = {
+        dots: false,
+        arrows: false,
+        infinite: false,
+        speed: 500,
+        slidesToShow: 3.5,
+        slidesToScroll: 3.5,
+        initialSlide: 0,
+        responsive: [
+          {
+            breakpoint: 1250,
+            settings: {
+              slidesToShow: 2.5,
+              slidesToScroll: 2.5,
+              infinite: false,
+              dots: false
+            }
+          },
+          {
+            breakpoint: 560,
+            settings: {
+              slidesToShow: 1.5,
+              slidesToScroll: 1.5
+            }
+          }
+        ]
+    };
+
+
+  return (
+    <div className="w-full h-full flex flex-col pt-14 overflow-hidden bg-[#FAF3E8]">
+        <div className="flex flex-col md:grid md:grid-cols-2 mb-10 px-5 sm:px-10">
+            <div className="w-[100vw] flex-col md:flex md:flex-row justify-between">
+              <p className="w-[90vw] sm:w-[80vw] md:w-[65vw] text-[12vw] sm:text-[5vw] md:text-[4.5vw] leading-[12.5vw] sm:leading-[5.5vw] md:leading-[5vw] tracking-tighter text-[#C20019]">What’s in your kit? </p>
+              <div className="flex flex-col justify-start items-start md:items-end w-[90vw] md:w-[35vw] pr-20 mt-5 md:mt-0">
+                <button className="uppercase px-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white hover:bg-transparent hover:text-[#C20019]">shop all</button>
+              </div>
+            </div>
+        </div>
+        <div className="pl-5 sm:pl-10 w-full h-screen">
+            <Slider {...shopSlide}>
+                <div className="w-full flex flex-col justify-center items-center text-center hover:bg-[#FBF8F4] hover:rounded-3xl">
+                    <div className="relative overflow-hidden z-50">
+                        <div className="transition 0.3s ease-in opacity-100 hover:opacity-0 cursor-pointer">
+                            <img src={Product1} alt="" className="w-[100vw] h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-1"/>
+                        </div>
+                        <div className="absolute inset-0 -z-[1] px-1">
+                            <div className="bg-[#FBF8F4] rounded-3xl">
+                                <button className="w-full h-full flex justify-center items-end py-10 absolute capitalize">
+                                    <span className="w-[100%] mx-10 py-2 border border-[#C20019] rounded-full bg-[#C20019] text-white">add to cart</span>
+                                </button>
+                                <video src={VProduct1} loop muted autoPlay className="w-full h-[50vh] md:h-[70vh] lg:h-[60vh] xl:h-[70vh] 2xl:h-[80vh] object-cover rounded-3xl px-3 py-3"></video>
+                            </div>
+                        </div>      
+                    </div>
+                    <p className="mt-5 uppercase text-sm">skinkind face oil</p>
+                    <p className="uppercase text-sm text-[#B9B8B7]">30ML / 1.01FL. OZ</p>
+                    <p className="mb-5 uppercase text-sm">$42</p>
+                </div>
+                {/* Need 9 more*/}
+            </Slider>
+        </div>
+    </div>
+  )
+}
+
+export default Products
\ No newline at end of file
diff --git a/awwwards_ss4/src/components/Shop.jsx b/awwwards_ss4/src/components/Shop.jsx
index 872437b..aca96a0 100644
--- a/awwwards_ss4/src/components/Shop.jsx
+++ b/awwwards_ss4/src/components/Shop.jsx
@@ -35,11 +35,11 @@ const Shop = () => {
             }
           }
         ]
-      };
+    };
 
   return (
-    <div className="w-full h-full flex flex-col py-14 overflow-hidden bg-[#FAF3E8]">
-        <div className="flex flex-col md:grid md:grid-cols-2 mb-10 px-5 sm:px-10 ">
+    <div className="w-full h-full flex flex-col pt-14 overflow-hidden bg-[#FAF3E8]">
+        <div className="flex flex-col md:grid md:grid-cols-2 mb-10 px-5 sm:px-10">
             <div className="w-[100vw] flex-col md:flex md:flex-row justify-between">
               <p className="w-[90vw] sm:w-[80vw] md:w-[65vw] text-[12vw] sm:text-[5vw] md:text-[4.5vw] leading-[12.5vw] sm:leading-[5.5vw] md:leading-[5vw] tracking-tighter text-[#C20019]">Everyone’s kit is different, and we’ve got a kit for everyone. </p>
               <div className="flex flex-col justify-start items-start md:items-end w-[90vw] md:w-[35vw] pr-20 mt-5 md:mt-0">
@@ -56,8 +56,8 @@ const Shop = () => {
                     </div>
                     <div className="absolute inset-0 -z-[1] px-1">
                         <div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
-                            <p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
-                                <span className="text-[2vw]">thank you kit</span>
+                            <p className="w-[100%] h-[100%] flex justify-between items-center px-5 md:px-10 text-white capitalize tracking-tighter">
+                                <span className="text-[5vw] md:text-[2vw]">thank you kit</span>
                                 <span>01</span>
                             </p>
                         </div>
@@ -71,7 +71,7 @@ const Shop = () => {
                     <div className="absolute inset-0 -z-[1] px-1">
                         <div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
                             <p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
-                                <span className="text-[2vw]">Best sellers</span>
+                                <span className="text-[5vw] md:text-[2vw]">Best sellers</span>
                                 <span>23</span>
                             </p>
                         </div>
@@ -85,7 +85,7 @@ const Shop = () => {
                     <div className="absolute inset-0 -z-[1] px-1">
                         <div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
                             <p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
-                                <span className="text-[2vw]">unwind</span>
+                                <span className="text-[5vw] md:text-[2vw]">unwind</span>
                                 <span>05</span>
                             </p>
                         </div>
@@ -99,7 +99,7 @@ const Shop = () => {
                     <div className="absolute inset-0 -z-[1] px-1">
                         <div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
                             <p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
-                                <span className="text-[2vw]">treat</span>
+                                <span className="text-[5vw] md:text-[2vw]">treat</span>
                                 <span>07</span>
                             </p>
                         </div>
@@ -113,7 +113,7 @@ const Shop = () => {
                     <div className="absolute inset-0 -z-[1] px-1">
                         <div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
                             <p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
-                                <span className="text-[2vw]">Body</span>
+                                <span className="text-[5vw] md:text-[2vw]">Body</span>
                                 <span>09</span>
                             </p>
                         </div>
@@ -127,7 +127,7 @@ const Shop = () => {
                     <div className="absolute inset-0 -z-[1] px-1">
                         <div className="w-full h-[60vh] md:h-[80vh] lg:h-[70vh] xl:h-[80vh] 2xl:h-[90vh] object-cover rounded-3xl px-1 bg-[#C20019]">
                             <p className="w-[100%] h-[100%] flex justify-between items-center px-10 text-white capitalize tracking-tighter">
-                                <span className="text-[2vw]">face</span>
+                                <span className="text-[5vw] md:text-[2vw]">face</span>
                                 <span>10</span>
                             </p>
                         </div>