diff --git a/frontend/src/components/Pages/About.jsx b/frontend/src/components/Pages/About.jsx
index 244d9bf5..794229f3 100644
--- a/frontend/src/components/Pages/About.jsx
+++ b/frontend/src/components/Pages/About.jsx
@@ -1,33 +1,48 @@
-import bgpic from "../../assets/img/abt1.jpg"
+import bgpic from "../../assets/img/abt1.jpg";
 
 export default function About() {
   return (
-    <div id="about" className="w-full md:mt-28 h-screen relative">
+    <div id="about" className="relative w-full h-screen md:mt-28">
       <div
-        className="absolute inset-0 bg-cover bg-center"
+        className="absolute inset-0 bg-center bg-cover"
         style={{ backgroundImage: `url(${bgpic})` }}
       >
-        <div className="absolute inset-0 bg-black opacity-60"></div> {/* Black overlay with 40% opacity */}
-        <div className="relative z-10 grid grid-cols-1 md:grid-cols-2 items-center justify-center h-full p-4">
-          <h1 className="text-7xl md:text-9xl font-bold text-center p-8 text-white">ABOUT US</h1>
-          <div className="flex w-full justify-center align-middle mt-10 md:px-36 relative z-10">
-            <p className="text-l md:text-xl text-gray-200 w-full"> {/* Change text color for better contrast */}
+        {/* Black overlay with 40% opacity */}
+        <div className="absolute inset-0 bg-black opacity-60"></div>
+
+        {/* Content container */}
+        <div className="relative z-10 grid items-center justify-center h-full grid-cols-1 p-4 md:grid-cols-2">
+          {/* Heading */}
+          <h1 className="p-4 text-4xl font-bold text-center text-white md:text-7xl lg:text-9xl">
+            ABOUT US
+          </h1>
+
+          {/* Paragraph */}
+          <div className="relative z-10 flex justify-center w-full mt-6 md:mt-0 md:px-36 ">
+            <p className="w-full text-sm text-gray-200 md:text-base lg:text-xl">
               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 <span className="text-amber-600">300+ games!</span>
+              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:<br />
-              Sunday: 10am-11pm <br />
-              Mon-Thurs: 11am-11pm <br />
-              Fri: 11am-midnight <br />
-              Sat: 10am-midnight <br />
+              <strong>Hours and Location</strong>
+              <br />
+              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>
diff --git a/frontend/src/components/ui/ReviewCarousel.jsx b/frontend/src/components/ui/ReviewCarousel.jsx
index 12d1b238..38094e46 100644
--- a/frontend/src/components/ui/ReviewCarousel.jsx
+++ b/frontend/src/components/ui/ReviewCarousel.jsx
@@ -1,12 +1,11 @@
-import { useState } from "react";
+import { useState,useEffect } from "react";
 import { MdStars, MdArrowBackIos, MdArrowForwardIos } from "react-icons/md";
 
 const ReviewCarousel = () => {
   const reviews = [
     {
       name: "Jane Smith",
-      review:
-        "Great games and coffee. The perfect spot to unwind with friends!",
+      review: "Great games and coffee. The perfect spot to unwind with friends!",
       img: "https://randomuser.me/api/portraits/men/51.jpg",
       rating: 5,
     },
@@ -42,21 +41,28 @@ const ReviewCarousel = () => {
     },
     {
       name: "Olivia Green",
-      review:
-        "Great atmosphere and an excellent selection of board games. Will be back!",
+      review: "Great atmosphere and an excellent selection of board games. Will be back!",
       img: "https://randomuser.me/api/portraits/women/72.jpg",
       rating: 4,
     },
     {
       name: "Ethan White",
-      review:
-        "The vibe is amazing, and the staff is super friendly. Highly recommend!",
+      review: "The vibe is amazing, and the staff is super friendly. Highly recommend!",
       img: "https://randomuser.me/api/portraits/men/33.jpg",
       rating: 5,
     },
   ];
 
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [showMoreStates, setShowMoreStates] = useState(
+    reviews.map(() => false) 
+  );
+
+  const toggleShowMore = (index) => {
+    const updatedStates = [...showMoreStates];
+    updatedStates[index] = !updatedStates[index];
+    setShowMoreStates(updatedStates);
+  };
 
   const nextSlide = () => {
     setCurrentIndex((prevIndex) =>
@@ -69,37 +75,55 @@ const ReviewCarousel = () => {
       prevIndex === 0 ? reviews.length - 4 : prevIndex - 1
     );
   };
+  const [cardsToShow, setCardsToShow] = useState(1); 
+
+  const updateCardsToShow = () => {
+    if (window.innerWidth >= 768) {
+      setCardsToShow(4); 
+    } else {
+      setCardsToShow(1); 
+    }
+  };
+
+  useEffect(() => {
+    updateCardsToShow(); 
+    window.addEventListener("resize", updateCardsToShow);
+
+    return () => {
+      window.removeEventListener("resize", updateCardsToShow);
+    };
+  }, []);
 
   return (
     <div className="mb-20">
-      <div className="items-center flex justify-center mb-10 p-20">
+      <div className="flex items-center justify-center p-20 mb-10">
         <h1 className="md:text-6xl text-4xl pl-3 pr-3 text-center font-bold text-[#004D43]">
           Customer Feedback
         </h1>
       </div>
 
-      <div className="bg-[#004D43] min-h-[50vh] p-4 md:p-20 items-center justify-center flex relative ">
-        <div className="w-full max-w-7xl md:overflow-hidden overflow-x-auto  ">
+      <div className="bg-[#004D43] h-full p-4 md:p-20 items-center justify-center flex relative ">
+        <div className="w-full overflow-x-auto max-w-7xl md:overflow-hidden ">
           <div
             className="flex transition-transform duration-300 ease-in-out"
             style={{
-              transform: `translateX(-${currentIndex * (100 / 4)}%)`,
-              width: `${reviews.length * (100 / 4)}%`,
+              transform: `translateX(-${currentIndex * (100 / cardsToShow)}%)`, // Moves the grid based on cardsToShow
+              width: `${(reviews.length / cardsToShow) * 100}%`, // Dynamic width based on the number of cards
             }}
           >
             {reviews.map((review, index) => (
               <div
                 key={index}
-                className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-2 "
+                className="w-full p-2 sm:w-1/2 md:w-1/3 lg:w-1/4"
               >
-                <div className="relative h-[40vh] md:h-[35vh] p-4 rounded-xl md:w-full w-[42vh] bg-amber-200 z-10 overflow-hidden">
-                  <div className="items-center flex flex-col justify-center mb-3">
+                <div className="relative min-h-[250px] max-h-[350px] md:min-h-[300px] md:max-h-[400px] p-4 rounded-xl bg-amber-200 z-10 overflow-hidden">
+                  <div className="flex flex-col items-center justify-center mb-1">
                     <img
                       src={review.img}
                       alt=""
-                      className="rounded-full h-20 w-20"
+                      className="w-20 h-20 rounded-full"
                     />
-                    <h1 className="text-xl font-semibold">{review.name}</h1>
+                    <h1 className="text-xl font-semibold text-center">{review.name}</h1>
                     <div className="flex">
                       {Array(review.rating)
                         .fill()
@@ -108,25 +132,35 @@ const ReviewCarousel = () => {
                         ))}
                     </div>
                   </div>
-                  <p className="text-center text-lg leading-6 tracking-wide  mt-4 ">
-                    {review.review}
+
+                  <p className="text-lg leading-6 tracking-wide text-center">
+                    {showMoreStates[index]
+                      ? review.review
+                      : `${review.review.substring(0, 50)}...`}
+                    <span
+                      className="text-blue-500 cursor-pointer"
+                      onClick={() => toggleShowMore(index)}
+                    >
+                      {showMoreStates[index] ? " Show less" : " Read more"}
+                    </span>
                   </p>
                 </div>
               </div>
             ))}
           </div>
         </div>
+
         {reviews.length > 4 && (
           <>
             <button
               onClick={prevSlide}
-              className=" hidden md:block absolute left-20 top-1/2 transform -translate-y-1/2 bg-white rounded-full p-2"
+              className="absolute hidden p-2 transform -translate-y-1/2 bg-white rounded-full md:block left-20 top-1/2"
             >
               <MdArrowBackIos className="text-[#004D43]" />
             </button>
             <button
               onClick={nextSlide}
-              className=" hidden md:block absolute right-20 top-1/2 transform -translate-y-1/2 bg-white rounded-full p-2"
+              className="absolute hidden p-2 transform -translate-y-1/2 bg-white rounded-full md:block right-20 top-1/2"
             >
               <MdArrowForwardIos className="text-[#004D43]" />
             </button>