diff --git a/donutshop_ecommerce/public/donut10.png b/donutshop_ecommerce/public/donut10.png
new file mode 100644
index 0000000..34b0eef
Binary files /dev/null and b/donutshop_ecommerce/public/donut10.png differ
diff --git a/donutshop_ecommerce/public/donut6.png b/donutshop_ecommerce/public/donut6.png
new file mode 100644
index 0000000..f52a71e
Binary files /dev/null and b/donutshop_ecommerce/public/donut6.png differ
diff --git a/donutshop_ecommerce/public/donut7.png b/donutshop_ecommerce/public/donut7.png
new file mode 100644
index 0000000..1aa373a
Binary files /dev/null and b/donutshop_ecommerce/public/donut7.png differ
diff --git a/donutshop_ecommerce/public/donut8.png b/donutshop_ecommerce/public/donut8.png
new file mode 100644
index 0000000..24a6a08
Binary files /dev/null and b/donutshop_ecommerce/public/donut8.png differ
diff --git a/donutshop_ecommerce/public/donut9.png b/donutshop_ecommerce/public/donut9.png
new file mode 100644
index 0000000..5b41e6d
Binary files /dev/null and b/donutshop_ecommerce/public/donut9.png differ
diff --git a/donutshop_ecommerce/public/drink1.png b/donutshop_ecommerce/public/drink1.png
deleted file mode 100644
index eefc57c..0000000
Binary files a/donutshop_ecommerce/public/drink1.png and /dev/null differ
diff --git a/donutshop_ecommerce/src/app/page.js b/donutshop_ecommerce/src/app/page.js
index 739186c..f857980 100644
--- a/donutshop_ecommerce/src/app/page.js
+++ b/donutshop_ecommerce/src/app/page.js
@@ -3,7 +3,7 @@ import Header from '@/components/layout/Header'
 import Hero from '@/components/layout/Hero'
 import HomeCreateBox from '@/components/layout/HomeCreateBox'
 import HomeMenu from '@/components/layout/HomeMenu'
-import HomeDrink from '@/components/layout/HomeDrink'
+import HomeMonthly from '@/components/layout/HomeMonthly'
 import React from 'react'
 import { ParallaxProvider } from "react-scroll-parallax";
 
@@ -14,7 +14,7 @@ const page = () => {
     <Hero/>
     <HomeMenu/>
     <HomeCreateBox/>
-    <HomeDrink/>
+    <HomeMonthly/>
   </ParallaxProvider>
 
   )
diff --git a/donutshop_ecommerce/src/components/layout/HomeCreateBox.js b/donutshop_ecommerce/src/components/layout/HomeCreateBox.js
index 97addd1..bc6a768 100644
--- a/donutshop_ecommerce/src/components/layout/HomeCreateBox.js
+++ b/donutshop_ecommerce/src/components/layout/HomeCreateBox.js
@@ -4,7 +4,7 @@ import { Parallax } from "react-scroll-parallax";
 
 const HomeCreateBox = () => {
   return (
-    <Parallax speed={-5}>
+    <Parallax speed={-10}>
       <div className='w-full h-full bg-[#FFD0D0] rounded-t-3xl md:pb-20 pb-10 px-5'>
         <div className='grid grid-cols-1 md:grid-cols-2 items-center py-10 px-5 lg:px-10'>
           <div className='w-full hidden md:flex mt-5 md:mt-0 justify-center md:justify-start'>
diff --git a/donutshop_ecommerce/src/components/layout/HomeDrink.js b/donutshop_ecommerce/src/components/layout/HomeDrink.js
deleted file mode 100644
index 6b4fb29..0000000
--- a/donutshop_ecommerce/src/components/layout/HomeDrink.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react'
-import { Parallax } from "react-scroll-parallax";
-import Slider from "react-slick";
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
-import Image from 'next/image';
-import DrinkItem from '../menu/DrinkItem';
-
-const HomeMonthly = () => {
-  var drinkSlide = {
-    dots: false,
-    infinite: false,
-    speed: 500,
-    slidesToShow: 5,
-    initialSlide: 0,
-    responsive: [
-      {
-        breakpoint: 1524,
-        settings: {
-        slidesToShow: 4,
-        slidesToScroll: 4,
-        infinite: true,
-        dots: false
-        }
-      },
-      {
-        breakpoint: 1024,
-        settings: {
-        slidesToShow: 3,
-        slidesToScroll: 3,
-        infinite: true,
-        dots: false
-        }
-      },
-      {
-        breakpoint: 810,
-        settings: {
-        slidesToShow: 2,
-        slidesToScroll: 2,
-        initialSlide: 2
-        }
-      },
-      {
-        breakpoint: 480,
-        settings: {
-        slidesToShow: 1,
-        slidesToScroll: 1
-        }
-      }
-    ]
-  };
-  
-  return (
-    <Parallax speed={0}>
-      <div className='w-full h-full bg-[#5F8670] rounded-t-3xl pb-20'>
-        <div className='flex flex-col gap-4 py-5 sm:py-10 px-5 lg:px-10'>
-          <p className='text-center md:text-start text-3xl lg:text-[50px] leading-none xl:text-6xl 2xl:text-[5vw] text-[#BACD92] uppercase font-semibold drop-shadow-[0_3px_3px_rgba(105,105,105,1)]'>Coffee and Drinks</p>
-          <p className='w-full md:w-[500px] lg:w-[600px] text-center md:text-start text-base lg:text-lg xl:text-xl text-white'>Enjoy a selection of freshly made coffee and drinks available in a range of delightful flavors.</p> 
-        </div>
-        <div className='py-2 sm:py-10 px-10'>
-          <Slider arrows={false} {...drinkSlide}>
-            <div className='px-2'> 
-              <DrinkItem/>
-            </div>
-            <div className='px-2'> 
-              <DrinkItem/>
-            </div>
-            <div className='px-2'> 
-              <DrinkItem/>
-            </div>
-            <div className='px-2'> 
-              <DrinkItem/>
-            </div>
-            <div className='px-2'> 
-              <DrinkItem/>
-            </div>
-          </Slider>
-        </div>
-      </div>
-    </Parallax>
-  )
-}
-
-export default HomeMonthly
\ No newline at end of file
diff --git a/donutshop_ecommerce/src/components/layout/HomeMenu.js b/donutshop_ecommerce/src/components/layout/HomeMenu.js
index e49e085..b5fc1e7 100644
--- a/donutshop_ecommerce/src/components/layout/HomeMenu.js
+++ b/donutshop_ecommerce/src/components/layout/HomeMenu.js
@@ -51,8 +51,8 @@ const HomeDrink = () => {
   };
   
   return (
-    <Parallax speed={-10}>
-    <div className='w-full h-full bg-[#D1BB9E] rounded-t-3xl md:pb-40 pb-20'>
+    <Parallax speed={-15}>
+    <div className='w-full h-full bg-[#D1BB9E] rounded-t-3xl pb-20 md:pb-40'>
       <div className='grid grid-cols-1 md:grid-cols-2 items-center py-5 sm:py-10 px-5 lg:px-10'>
         <div className='flex flex-col gap-4'>
           <p className='text-center md:text-start text-3xl lg:text-[50px] leading-none xl:text-6xl 2xl:text-[5vw] text-yellow-100 uppercase font-semibold drop-shadow-[0_3px_3px_rgba(105,105,105,1)]'>Treat yourself</p>
diff --git a/donutshop_ecommerce/src/components/layout/HomeMonthly.js b/donutshop_ecommerce/src/components/layout/HomeMonthly.js
new file mode 100644
index 0000000..7cd5ff8
--- /dev/null
+++ b/donutshop_ecommerce/src/components/layout/HomeMonthly.js
@@ -0,0 +1,75 @@
+import React from 'react'
+import { Parallax } from "react-scroll-parallax";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import Image from 'next/image';
+
+
+const HomeMonthly = () => {
+  const settings = {
+    dots: false,
+    infinite: true,
+    slidesToShow: 3,
+    slidesToScroll: 1,
+    autoplay: true,
+    speed: 2000,
+    autoplaySpeed: 2000,
+    cssEase: "linear",
+    responsive: [
+      {
+        breakpoint: 815,
+        settings: {
+          slidesToShow: 2,
+          slidesToScroll: 2,
+          initialSlide: 2
+        }
+      },
+      {
+        breakpoint: 480,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1
+        }
+      }
+    ]
+  };
+  
+  return (
+    <Parallax speed={0}>
+      <div className='w-full h-full bg-[#5F8670] rounded-t-3xl pb-20'>
+        <div className='flex flex-col gap-4 py-5 sm:py-10 px-5 lg:px-10'>
+          <p className='text-center md:text-start text-3xl lg:text-[50px] leading-none xl:text-6xl 2xl:text-[5vw] text-[#BACD92] uppercase font-semibold drop-shadow-[0_3px_3px_rgba(105,105,105,1)]'>Monthly Special</p>
+          <p className='w-full md:w-[500px] lg:w-[800px] text-center md:text-start text-base lg:text-lg xl:text-xl text-white'>Each month we bring different donuts to a classic flavor, so no two months are the same. Save up to 40% on special donuts only for our members!</p> 
+          <p className='w-full md:w-[500px] lg:w-[800px] text-center md:text-start text-base text-white'><span className='text-red-700 text-xl'>**</span> Save up to 30% on special donuts only for our members!</p> 
+        </div>
+        <div className="mt-10 sm:mt-20">
+          <Slider {...settings}>
+            <div className='flex flex-col text-center items-center justify-center'>
+              <Image src='/donut6.png' width={350} height={350} alt='monthly' className='w-[200px] sm:w-[300px] m-auto'/>
+              <p className='text-white font-semibold capitalize'>Oreo cookie crumble</p>
+            </div>
+            <div className='flex flex-col text-center items-center justify-center'>
+              <Image src='/donut7.png' width={350} height={350} alt='monthly' className='w-[250px] sm:w-[350px] m-auto'/>
+              <p className='text-white font-semibold capitalize'>Reese's Peanut Butter Cup</p>
+            </div>
+            <div className='flex flex-col text-center items-center justify-center'>
+              <Image src='/donut8.png' width={350} height={350} alt='monthly' className='w-[250px] sm:w-[350px] m-auto'/>
+              <p className='text-white font-semibold capitalize'>M&M Chocolate Boston cream</p>
+            </div>
+            <div className='flex flex-col text-center items-center justify-center'>
+              <Image src='/donut9.png' width={350} height={350} alt='monthly' className='w-[250px] sm:w-[350px] m-auto'/>
+              <p className='text-white font-semibold capitalize'>White Chocolate & Nutella Bueno</p>
+            </div>
+            <div className='flex flex-col text-center items-center justify-center'>
+              <Image src='/donut10.png' width={350} height={350} alt='monthly' className='w-[200px] sm:w-[300px] m-auto'/>
+              <p className='text-white font-semibold capitalize'>White Chocolate Matcha Pistachio</p>
+            </div>
+          </Slider>
+        </div>
+      </div>
+    </Parallax>
+  )
+}
+
+export default HomeMonthly
\ No newline at end of file
diff --git a/donutshop_ecommerce/src/components/menu/DrinkItem.js b/donutshop_ecommerce/src/components/menu/DrinkItem.js
deleted file mode 100644
index 67cadeb..0000000
--- a/donutshop_ecommerce/src/components/menu/DrinkItem.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Image from 'next/image'
-import React from 'react'
-
-const DrinkItem = () => {
-  return (
-    <div className='py-1 sm:py-5 flex flex-col gap-2 sm:gap-4 justify-center items-center text-center rounded-xl bg-white h-[350px] sm:h-[450px]'>
-      <Image src='/drink1.png' width={300} height={300} alt='menu-donut' className='w-[80px] sm:w-[100px]'/>
-      <p className='text-sm sm:text-base font-semibold capitalize text-[#95743D] px-2'>coffee milkshake</p>
-      <p className='text-[#95743D] text-sm'>$7.59</p>
-      <button className='px-2 py-1 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm border border-[#E78895] text-[#95743D] font-semibold hover:bg-[#E78895] hover:text-[#FDE2DE] duration-300'>Add to cart</button>
-    </div>
-  )
-}
-
-export default DrinkItem
\ No newline at end of file