diff --git a/src/Components/Pages/About.jsx b/src/Components/Pages/About.jsx
index 93508dd4..244d9bf5 100644
--- a/src/Components/Pages/About.jsx
+++ b/src/Components/Pages/About.jsx
@@ -2,31 +2,36 @@ import bgpic from "../../assets/img/abt1.jpg"
 
 export default function About() {
   return (
-    <div id="about" className="w-full mt-28 h-screen relative">
-      <div className="absolute inset-0  bg-cover bg-center opacity-30" style={{ backgroundImage: `url(${bgpic})` }}></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 <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/>
-          Our kitchen closes 2.5-3 hours before we close!
-        </p>
-      </div>
+    <div id="about" className="w-full md:mt-28 h-screen relative">
+      <div
+        className="absolute inset-0 bg-cover bg-center"
+        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 */}
+              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>
+              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 />
+              Our kitchen closes 2.5-3 hours before we close!
+            </p>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/Components/Shared/Navbar.jsx b/src/Components/Shared/Navbar.jsx
index 5f60e88f..f31bad03 100644
--- a/src/Components/Shared/Navbar.jsx
+++ b/src/Components/Shared/Navbar.jsx
@@ -115,7 +115,7 @@ const Navbar = () => {
               <svg
                 className="h-6 w-6"
                 fill="none"
-                stroke="currentColor"
+                stroke="black"
                 viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
               >
diff --git a/src/Components/ui/Landing.jsx b/src/Components/ui/Landing.jsx
index e9ee105b..309c8c7e 100644
--- a/src/Components/ui/Landing.jsx
+++ b/src/Components/ui/Landing.jsx
@@ -5,25 +5,29 @@ import coffecup from "../../assets/landing/coffecup.png";
 export default function Landing() {
   return (
     <div>
-      <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">
+      <section className="relative pb-24 h-screen-dvh w-screen bg-cover bg-center overflow-hidden">
+        <div className="flex-col md:flex pt-20 z-1">
           {/* Text Content */}
-          <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 ">
+          <div className="w-screen p-4 md:w-1/2 mb-6 md:mb-0 text-center md:text-left z-10 pt-14">
+            <h1 className="text-6xl md:text-9xl font-bold">
               A unique café experience awaits you
             </h1>
           </div>
-          <div className="absolute w-2/4 left-2/3 rotate-12 -bottom-20">
+          <div>
+            <div className="flex justify-center pt-64 z-0">
+          <div className="absolute flex justify-center md:w-2/4 md:left-2/4 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">
+          <div className="absolute flex justify-center md:w-2/4 md:left-2/4 -rotate-12 -bottom-16">
             <img src={heropic} alt="" className="w-2/4" />
           </div>
+          </div>
+        </div>
         </div>
       </section>
 
 
-      <section className="flex flex-row justify-center items-center mt-20">
+      <section className="flex flex-row justify-center items-center p-32">
         {/* <div className="w-3/5 p-28 mt-20">
           <h1 className="text-8xl font-bold text-black ">
             Our name says it all!
@@ -45,11 +49,12 @@ export default function Landing() {
           </ul>
           <button className="p-2 border-2 border-slate-500">Learn more↗️</button>
         </div> */}
-        <div className="w-1/2  absolute right-40 m-auto">
+        
+        <div className="w-1/2 absolute p-4 md: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">
+          <h1 className="text-[4rem] md:text-[18rem] font-bold text-black">
             PLAYCAFE
           </h1>
         </div>
diff --git a/src/Components/ui/ReviewCarousel.jsx b/src/Components/ui/ReviewCarousel.jsx
index 442043c7..12d1b238 100644
--- a/src/Components/ui/ReviewCarousel.jsx
+++ b/src/Components/ui/ReviewCarousel.jsx
@@ -72,7 +72,7 @@ const ReviewCarousel = () => {
 
   return (
     <div className="mb-20">
-      <div className="items-center flex justify-center mb-10">
+      <div className="items-center flex justify-center mb-10 p-20">
         <h1 className="md:text-6xl text-4xl pl-3 pr-3 text-center font-bold text-[#004D43]">
           Customer Feedback
         </h1>
diff --git a/tailwind.config.js b/tailwind.config.js
index c60af255..2e630091 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,9 @@ export default {
   content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
   theme: {
     extend: {
+      height: {
+        'screen-dvh': '100dvh',
+      },
       fontFamily: {
         'poppins': ['Poppins', 'sans-serif'],
         'roboto': ['"Roboto Serif"', 'sans-serif'],
diff --git a/vite.config.js b/vite.config.js
index 5a33944a..721bd06e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,5 +3,9 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  server: {
+    host: '0.0.0.0', // allows access from all IP addresses
+    port: 5173,
+  },
   plugins: [react()],
 })