diff --git a/package.json b/package.json
index 8c3c4966..0dc66924 100644
--- a/package.json
+++ b/package.json
@@ -13,13 +13,15 @@
     "@splidejs/splide": "^4.1.4",
     "@splidejs/splide-extension-auto-scroll": "^0.5.3",
     "autoprefixer": "^10.4.19",
-    "framer-motion": "^11.3.2",
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.5.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-intersection-observer": "^9.13.0",
     "react-pageflip": "^2.0.3",
     "react-router-dom": "^6.24.1",
+    "tailwind-merge": "^2.5.2",
     "tailwindcss": "^3.4.4"
   },
   "devDependencies": {
diff --git a/public/mask.svg b/public/mask.svg
new file mode 100644
index 00000000..13211033
--- /dev/null
+++ b/public/mask.svg
@@ -0,0 +1,8 @@
+<svg
+  width="1298"
+  height="1298"
+  viewBox="0 0 1298 1298"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <circle cx="649" cy="649" r="649" fill="black" />
+</svg>
diff --git a/src/Components/Pages/About.jsx b/src/Components/Pages/About.jsx
index 84efa2e2..87d0ed8d 100644
--- a/src/Components/Pages/About.jsx
+++ b/src/Components/Pages/About.jsx
@@ -1,40 +1,31 @@
 export default function About() {
   return (
-    <div id="about" className="w-full h-full">
-      <div className="flex w-full mx-auto">
-        <div className="w-full mx-auto">
-          <h1 className="text-9xl font-bold text-gray-800 text-center">A</h1>
-          <h1 className="text-9xl font-bold text-gray-800 text-center">B</h1>
-          <h1 className="text-9xl font-bold text-gray-800 text-center">O</h1>
-          <h1 className="text-9xl font-bold text-gray-800 text-center">U</h1>
-          <h1 className="text-9xl font-bold text-gray-800 text-center">T</h1>
-          <h4 className="text-6xl font-bold text-gray-800 text-center">US</h4>
-        </div>
-        <div>
-          <img src="./src/assets/img/abt1.jpg" alt="dfs" />
-        </div>
-      </div>
-      <div className="flex w-full justify-center align-middle mt-10 px-36">
-        <p className="text-xl text-gray-800  w-full">
+    <div id="about" className="w-full mt-28 h-screen relative">
+      <div className="absolute inset-0 bg-[url('./src/assets/img/abt1.jpg')] bg-cover bg-center opacity-30"></div>
+      <div className="relative z-10 flex items-center justify-center h-full ms-10">
+        <h1 className="text-9xl font-bold text-start w-full">ABOUT US</h1>
+       <div className="flex w-full justify-center align-middle mt-10 px-36 relative z-10">
+        <p className="text-xl text-gray-800 text-pretty w-full">
           How it works..
           Our name says it all!
           Founder, Jonathan Li, shares a passion for board games, boba, and 
           delicious food, so he combined them all to become Sip & Play, Park Slope’s 
           first board game cafe.  It is a straightforward concept, come in with your 
-          friends and family to play any board game from our library of 300+ games!
+          friends and family to play any board game from our library of <span className="text-amber-600">300+ games!</span>
            We hope when you visit, you also enjoy our coffee, espresso, boba, 
            sandwiches, and snacks!
           <br/> 
           <br/>
           Hours and Location
-          New opening hours:
-          Sunday: 10am-11pm
-          Mon-Thurs: 11am-11pm
-          Fri: 11am-midnight
-          Sat: 10am-midnight
+          New opening hours:<br/>
+          Sunday: 10am-11pm <br/>
+          Mon-Thurs: 11am-11pm <br/>
+          Fri: 11am-midnight <br/>
+          Sat: 10am-midnight <br/>
           Our kitchen closes 2.5-3 hours before we close!
         </p>
       </div>
+      </div>
     </div>
   );
 }
diff --git a/src/Components/Pages/Home.jsx b/src/Components/Pages/Home.jsx
index c4fc3635..64f64c69 100644
--- a/src/Components/Pages/Home.jsx
+++ b/src/Components/Pages/Home.jsx
@@ -2,16 +2,16 @@
 import Landing from "../ui/Landing";
 import Footer from "../Shared/Footer";
 import Navbar from "../Shared/Navbar";
-import ImageCarousel from "../ui/ImageCarousel";
 import ReviewCarousel from "../ui/ReviewCarousel";
 import FeedbackForm from "../ui/FeedbackForm";
+import About from "./About";
 
 export default function Home() {
     return (
         <div id="home" className="bg-[#FDF3C7]">
             <Navbar />
             <Landing />
-            <ImageCarousel />
+            <About/>
             <ReviewCarousel/>
             <FeedbackForm />
             <Footer />
diff --git a/src/Components/ui/ImageCarousel.jsx b/src/Components/ui/ImageCarousel.jsx
deleted file mode 100644
index f282bbe7..00000000
--- a/src/Components/ui/ImageCarousel.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import event1 from "../../assets/img/event1.jpg";
-import event2 from "../../assets/img/event2.jpg";
-import event3 from "../../assets/img/event3.jpg";
-import event4 from "../../assets/img/event4.jpg";
-import event6 from "../../assets/img/event6.jpg";
-import { MdEventRepeat, MdOutlineArrowBackIosNew, MdOutlineArrowForwardIos } from "react-icons/md";
-import { Link } from "react-router-dom";
-import { HiMiniArrowUpRight } from "react-icons/hi2";
-
-const Carousel = () => {
-  const [images] = useState([event1, event2, event3, event4, event6]);
-  const [currentImageIndex, setCurrentImageIndex] = useState(0);
-
-  const nextSlide = useCallback(() => {
-    const newIndex = (currentImageIndex + 1) % images.length;
-    setCurrentImageIndex(newIndex);
-  }, [currentImageIndex, images.length]);
-
-  const prevSlide = () => {
-    const newIndex = (currentImageIndex - 1 + images.length) % images.length;
-    setCurrentImageIndex(newIndex);
-  };
-
-  useEffect(() => {
-    const interval = setInterval(nextSlide, 3000);
-    return () => clearInterval(interval);
-  }, [nextSlide]);
-
-  return (
-    <div className="relative mb-20 p-2 ">
-      <h1 className="md:text-6xl text-3xl text-[#004D43]  pt-8 font-bold mb-5 mr-2 md:mr-0 flex items-center">
-        Explore our fun events{" "}
-        <MdEventRepeat size={80} className="mr-10 text-yellow-800" />
-      </h1>
-
-      <div className="overflow-hidden rounded-md  items-center flex justify-center bg-green-700">
-        <img
-          className="md:w-screen md:h-[60vh] h-[40vh] w-[50vh] p-2 object-cover rounded-xl "
-          src={images[currentImageIndex]}
-          alt={`Slide ${currentImageIndex + 1}`}
-        />
-        <div
-          onClick={prevSlide}
-          className="absolute left-5 hidden md:block  top-1/2 rounded-full hover:bg-black bg-black bg-opacity-40 transform -translate-y-1/2 cursor-pointer p-3 "
-        >
-          <MdOutlineArrowBackIosNew className="text-white" size={30} />
-        </div>
-        <div
-          onClick={nextSlide}
-          className="absolute right-5 hidden md:block top-1/2 rounded-full hover:bg-black bg-black bg-opacity-40 transform -translate-y-1/2 cursor-pointer p-3 "
-        >
-          <MdOutlineArrowForwardIos className="text-white" size={30} />
-        </div>
-      </div>
-
-      <div className="flex justify-center mt-4 ">
-        <Link
-          to="/event"
-          className=" flex  items-center text-2xl md:text-4xl py-3 px-10 bg-yellow-800 text-white rounded-full hover:bg-green-800"
-        >
-          Events
-
-          <HiMiniArrowUpRight className="text-white ml-2" />
-
-        </Link>
-      </div>
-    </div>
-  );
-};
-
-export default Carousel;
diff --git a/src/Components/ui/Landing.jsx b/src/Components/ui/Landing.jsx
index d6906537..e9ee105b 100644
--- a/src/Components/ui/Landing.jsx
+++ b/src/Components/ui/Landing.jsx
@@ -1,76 +1,59 @@
-import heroBg from "../../assets/img/heroBg.jpg";
-import { motion } from "framer-motion";
-import Marquee from "./Marquee";
+import heropic from "../../assets/landing/hero pic.jpg";
+import coffecup from "../../assets/landing/coffecup.png";
+
 
 export default function Landing() {
   return (
     <div>
-      <section
-        className="relative h-screen bg-cover bg-center overflow-hidden"
-        style={{
-          backgroundImage: 'url("https://via.placeholder.com/1600x900")',
-        }}
-      >
-        <div className="absolute inset-0 bg-[#F1EADC]">
-          <img
-            className=" inset-0 w-full h-full object-cover"
-            alt="logo"
-            src={heroBg}
-          />
-        </div>
-        <div className="container mx-auto flex flex-col md:flex-row items-center justify-end pt-20">
+      <section className="relative h-screen bg-cover bg-center overflow-hidden">
+        <div className="flex flex-col md:flex-row items-center ms-20 pt-20">
           {/* Text Content */}
-          <div className="md:w-1/2 mb-6 md:mb-0 text-center md:text-left z-10 pt-14 relative">
-            <motion.div
-              initial={{ x: -200, opacity: 0 }} 
-              animate={{ x: 0, opacity: 1 }} 
-              transition={{ type: "spring", duration: 2 }} 
-            >
-              <h1 className=" text-3xl font-roboto md:text-6xl ml-2 uppercase shadow-lg z-10 font-bold text-white rounded-s-full text-center p-4 bg-black bg-opacity-50">
+          <div className="md:w-1/2 mb-6 md:mb-0 text-center md:text-left z-10 pt-14">
+            <h1 className="text-9xl font-bold ">
               A unique café experience awaits you
-              </h1>
-            </motion.div>
-            
-
+            </h1>
+          </div>
+          <div className="absolute w-2/4 left-2/3 rotate-12 -bottom-20">
+            <img src={heropic} alt="" className="w-2/4" />
+          </div>
+          <div className="absolute w-2/4 left-2/3 -rotate-12 -bottom-16">
+            <img src={heropic} alt="" className="w-2/4" />
           </div>
         </div>
       </section>
 
-      <Marquee />  
 
-      <section className="p-6 sm:p-10cs">
-            <motion.div
-                initial={{ scale: 0 }}
-                animate={{ scale: 1 }}
-                transition={{ duration: 0.5 }}
-                className="container mx-auto bg-[#E0F0B1] rounded-lg shadow-lg overflow-hidden px-4 py-8"
-            >
-                <motion.div animate={{ x: [0, 100, 0] }} transition={{ duration: 1 }}>
-                    <h1 className="text-4xl text-[#004D43] sm:text-3xl md:text-5xl font-bold mb-4 text-center font-serif">
-                        Our name says it all!
-                    </h1>
-                </motion.div>
-                <div className="text-lg mb-4 text-center">
-                    <p className="mb-4 font-semibold">How it works..</p>
-                    <p className="text-gray-600 text-base md:text-xl">
-                        Founder, Jonathan Li, shares a passion for board games, boba, and delicious food, so he combined them all to become Sip & Play, Park Slope’s first board game cafe. It is a straightforward concept: come in with your friends and family to play any board game from our library of 300+ games! We hope when you visit, you also enjoy our coffee, espresso, boba, sandwiches, and snacks!
-                    </p>
-                </div>
-                <motion.div animate={{ x: [0, 100, 0] }} transition={{ duration: 1 }}>
-                    <h2 className="text-xl sm:text-2xl md:text-3xl font-bold mb-2 text-center">
-                        Hours
-                    </h2>
-                </motion.div>
-                <ul className="ml-4 text-center text-gray-600 text-base md:text-xl">
-                    <li>New opening hours:</li>
-                    <li>Sunday: 10am-11pm</li>
-                    <li>Mon-Thurs: 11am-11pm</li>
-                    <li>Fri: 11am-midnight</li>
-                    <li>Sat: 10am-midnight</li>
-                    <li>Our kitchen closes 2.5-3 hours before we close!</li>
-                </ul>
-            </motion.div>
-        </section>
-</div>
-);
+      <section className="flex flex-row justify-center items-center mt-20">
+        {/* <div className="w-3/5 p-28 mt-20">
+          <h1 className="text-8xl font-bold text-black ">
+            Our name says it all!
+          </h1>
+          <p className="text-black text-2xl">
+            Founder, Jonathan Li, shares a passion for board games, boba, and
+            delicious food, so he combined them all to become Sip & Play, Park
+            Slope’s first board game cafe. It is a straightforward concept: come
+            in with your friends and family to play any board game from our
+            library of 300+ games! We hope when you visit, you also enjoy our
+            coffee, espresso, boba, sandwiches, and snacks!
+          </p>
+          <ul className="text-xl mt-4">
+            <li>New opening hours:</li>
+            <li>Sunday: 10am-11pm</li>
+            <li>Mon-Thurs: 11am-11pm</li>
+            <li>Fri: 11am-midnight</li>
+            <li>Sat: 10am-midnight</li>
+          </ul>
+          <button className="p-2 border-2 border-slate-500">Learn more↗️</button>
+        </div> */}
+        <div className="w-1/2  absolute right-40 m-auto">
+          <img src={coffecup} alt="" className="w-96 rotate-12"/>
+        </div>
+        <div className="py-28 z-10">
+          <h1 className="text-[18rem] font-bold text-black">
+            PLAYCAFE
+          </h1>
+        </div>
+      </section>
+    </div>
+  );
 }
diff --git a/src/Components/ui/Marquee.jsx b/src/Components/ui/Marquee.jsx
deleted file mode 100644
index 08206716..00000000
--- a/src/Components/ui/Marquee.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { motion } from 'framer-motion';
-
-function Marquee() {
-  return (
-    <div className='w-full py-5 mt-1 bg-[#004D43]'>
-      <div className='text-amber-100 border-t-2 border-b-2 border-zinc-200 flex whitespace-nowrap overflow-hidden '>
-        <motion.div
-          className='flex'
-          initial={{ x: 0 }}
-          animate={{ x: "-100%" }}
-          transition={{ ease: "linear", repeat: Infinity, duration: 40 }}
-          style={{width: "500%"}}
-        >
-          <h1 className='text-[6vw] mr-20 leading-none pt-5 mb-6 font-roboto uppercase font-semibold'>
-            Welcome to Sip & Play
-          </h1>
-          <h1 className='text-[6vw] mr-20  leading-none pt-5 font-roboto uppercase font-semibold'>
-            Welcome to Sip & Play
-          </h1>
-          <h1 className='text-[6vw] mr-20  leading-none pt-5 font-roboto uppercase font-semibold'>
-            Welcome to Sip & Play
-          </h1>
-        </motion.div>
-      </div>
-    </div>
-  );
-}
-
-export default Marquee;
diff --git a/src/assets/landing/coffecup.png b/src/assets/landing/coffecup.png
new file mode 100644
index 00000000..c7085cc5
Binary files /dev/null and b/src/assets/landing/coffecup.png differ
diff --git a/src/assets/landing/hero pic.jpg b/src/assets/landing/hero pic.jpg
new file mode 100644
index 00000000..56a21c34
Binary files /dev/null and b/src/assets/landing/hero pic.jpg differ
diff --git a/src/lib/utils.js b/src/lib/utils.js
new file mode 100644
index 00000000..378ccef4
--- /dev/null
+++ b/src/lib/utils.js
@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}