diff --git a/frontend/src/App.css b/frontend/src/App.css
index 6af73281..2bff4d11 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -26,16 +26,52 @@ input[type='radio'] {
 }
 
 .star {
-    cursor: pointer;
-    font-size: 2rem;
-    margin-bottom: 0;
+  cursor: pointer;
+  font-size: 2rem;
+  margin-bottom: 0;
 }
 
 .card {
-    transition: all 0.3s ease; /* Ensure smooth transitions */
+  @apply transition-all duration-300 ease-in-out; /* Smooth transition */
+}
+
+.card:hover {
+  @apply shadow-lg; /* Adds a shadow on hover */
+}
+
+/* Responsive adjustments for different screen sizes */
+@media (min-width: 640px) {
+  /* Small devices (sm) */
+  .star {
+    font-size: 1.5rem; /* Smaller star size for narrow screens */
+  }
+}
+
+@media (min-width: 768px) {
+  /* Medium devices (md) */
+  .star {
+    font-size: 1.75rem; /* Slightly larger star size */
+  }
+
+  .rating-button {
+    @apply p-3; /* More padding for buttons on medium screens */
+  }
+}
+
+@media (min-width: 1024px) {
+  /* Large devices (lg) */
+  .card {
+    @apply rounded-lg p-4; /* Larger padding and rounded corners */
   }
-  
-  /* Shadow effect on hover */
-  .card:hover {
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add a shadow on hover */
+}
+
+@media (min-width: 1280px) {
+  /* Extra large devices (xl) */
+  .star {
+    font-size: 2rem; /* Default large star size */
+  }
+
+  .rating-button {
+    @apply p-4; /* Extra padding for larger screens */
   }
+}
\ No newline at end of file
diff --git a/frontend/src/components/Shared/footer/Content.jsx b/frontend/src/components/Shared/footer/Content.jsx
index 2237fb85..5016b742 100644
--- a/frontend/src/components/Shared/footer/Content.jsx
+++ b/frontend/src/components/Shared/footer/Content.jsx
@@ -1,12 +1,11 @@
 import { useEffect, useState } from 'react';
 import Logo from '../../../assets/Logo/playcafe.png';
-import googleImage from '../../../assets/img/google.png';
 import { FaFacebook, FaInstagram, FaTiktok, FaGithub } from 'react-icons/fa';
 import Google from './Google';
 
 export default function Content() {
   return (
-    <div className="bg-amber-100 dark:bg-black pt-16 py-8 px-12 h-full w-full flex flex-col justify-between md:pt-24`">
+    <div className="bg-amber-100 dark:bg-gray-900 pt-16 py-8 px-4 sm:px-6 lg:px-12 h-full w-full flex flex-col justify-between md:pt-24">
       <Nav />
       <Section2 />
       <NewsletterForm />
@@ -41,23 +40,21 @@ const NewsletterForm = () => {
   };
 
   return (
-    <div className="absolute top-12 right-60 p-2 rounded-md shadow-lg ">
-      <h3 className="text-white text-lg mb-2">Subscribe to our Newsletter</h3>
-      <form onSubmit={handleSubmit} className="flex flex-col md:flex-row gap-2 md:gap-4">
-      <div className="flex items-center border rounded-md bg-white">
-          <span className="p-2 text-gray-600">
-            📧
-          </span>
-        <input
-          type="email"
-          className="p-2 rounded-r-none border-l border-gray-300 focus:outline-none"
-          placeholder="Enter your email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          required
-        />
+    <div className="fixed bottom-4 right-4 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg max-w-xs w-full text-center z-50">
+      <h3 className="text-lg font-semibold mb-3 text-black dark:text-white">Subscribe to our Newsletter</h3>
+      <form onSubmit={handleSubmit} className="flex flex-col gap-2 items-center">
+        <div className="flex items-center border rounded-md bg-gray-100 dark:bg-gray-700 w-full">
+          <span className="p-2 text-gray-600 dark:text-gray-300">📧</span>
+          <input
+            type="email"
+            className="p-2 rounded-r-none w-full border-l border-gray-300 dark:border-gray-600 focus:outline-none bg-transparent text-black dark:text-white"
+            placeholder="Enter your email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
         </div>
-        <button type="submit" className="p-2 bg-green-500 text-white rounded-md ml-2">
+        <button type="submit" className="p-2 bg-green-500 text-white rounded-md w-full mt-2">
           Subscribe
         </button>
       </form>
@@ -65,12 +62,13 @@ const NewsletterForm = () => {
     </div>
   );
 };
+
 const Section2 = () => {
   const [isWide, setIsWide] = useState(null);
 
   useEffect(() => {
     const handleResize = () => setIsWide(window.innerWidth > 640);
-    handleResize(); // Set initial value
+    handleResize();
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
   }, []);
@@ -78,142 +76,64 @@ const Section2 = () => {
   if (isWide === null) return null;
 
   return (
-    <>
-      {!isWide && (
-        <div className="flex justify-center">
-          <img
-            className="w-24 bg-transparent p-0 rounded-3xl h-24"
-            alt="logo"
-            src={Logo}
-            loading="lazy"
-          />
-        </div>
-      )}
-      <div
-
-        className={`flex ${isWide ? 'justify-between items-end' : 'flex-col items-center'
-          } text-white`}
-
-      >
-        <div>
-          <h1
-            className={`${isWide ? 'text-[7.5vw]' : 'text-[12vw]'} leading-[0.8]`}
-          >
-            BoardGame Cafe{!isWide && <br />}
-          </h1>
-          <p className={`flex ${isWide ? `text-[center] mt-3 ml-[620px]` : `text-base mt-1`}`}>
-             ©2024 by Sip & Play
-          </p>
-        </div>
-      </div>
-    </>
+    <div className="flex flex-col items-center text-center my-6">
+      <img src={Logo} alt="Logo" className="w-20 h-20 sm:w-24 sm:h-24 bg-transparent p-0 rounded-3xl" loading="lazy" />
+      <h1 className={`${isWide ? 'text-5xl' : 'text-3xl'} font-bold leading-tight text-black dark:text-white mt-4`}>
+        BoardGame Cafe
+      </h1>
+      <p className="text-gray-600 dark:text-gray-400 mt-2">©2024 by Sip & Play</p>
+    </div>
   );
 };
 
 const Nav = () => {
   const navLinks = [
-    {
-      name: 'Home',
-      link: '/',
-    },
-    {
-      name: 'Events',
-      link: '/events',
-    },
-    {
-      name: 'Reservation',
-      link: '/reservation',
-    },
-    {
-      name: 'Boardgame',
-      link: '/boardgame',
-    },
-    {
-      name: 'About',
-      link: '/about',
-    },
+    { name: 'Home', link: '/' },
+    { name: 'Events', link: '/events' },
+    { name: 'Reservation', link: '/reservation' },
+    { name: 'Boardgame', link: '/boardgame' },
+    { name: 'About', link: '/about' },
   ];
+
   const socialLink = [
-    {
-      name: 'Facebook',
-      link: 'https://www.facebook.com/sipnplaynyc/',
-      icon: <FaFacebook />,
-    },
-    {
-      name: 'Instagram',
-      link: 'https://www.instagram.com/sipnplaynyc/?hl=en',
-      icon: <FaInstagram />,
-    },
-    {
-      name: 'Tiktok',
-      link: 'https://www.tiktok.com/@sipnplaynycofficial?lang=en',
-      icon: <FaTiktok />,
-    },
-    {
-      name: 'GitHub',
-      link: 'https://github.com/RamakrushnaBiswal/PlayCafe',
-      icon: <FaGithub />,
-    },
+    { name: 'Facebook', link: 'https://www.facebook.com/sipnplaynyc/', icon: <FaFacebook /> },
+    { name: 'Instagram', link: 'https://www.instagram.com/sipnplaynyc/?hl=en', icon: <FaInstagram /> },
+    { name: 'Tiktok', link: 'https://www.tiktok.com/@sipnplaynycofficial?lang=en', icon: <FaTiktok /> },
+    { name: 'GitHub', link: 'https://github.com/RamakrushnaBiswal/PlayCafe', icon: <FaGithub /> },
   ];
+
   const emailAddress = 'sipnplaynyc@gmail.com';
 
   return (
-    <div className="flex md:flex-row flex-col shrink-0 gap-4 sm:gap-20 ml-[30px]">
-      <div className="flex justify-between md:gap-20">
-        <div className="flex flex-col gap-2 text-black dark:text-white">
-          <h3 className="mb-2 uppercase text-black dark:text-white cursor-pointer">About</h3>
-          {navLinks.map((item, index) => (
-            <a
-              className="hover:text-white duration-300"
-              key={index}
-              href={item.link}
-            >
-              {item.name}
-            </a>
-          ))}
-        </div>
+    <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 sm:gap-8 md:gap-12 p-4 sm:p-6">
+      <div className="flex flex-col gap-3">
+        <h3 className="uppercase font-semibold text-black dark:text-white">About</h3>
+        {navLinks.map((item, index) => (
+          <a key={index} href={item.link} className="hover:text-gray-700 dark:hover:text-gray-300 transition-colors text-sm sm:text-base">
+            {item.name}
+          </a>
+        ))}
+      </div>
 
-        <div className="flex flex-col gap-2 text-black dark:text-white">
-          <h3 className="mb-2 uppercase text-black dark:text-white ml-[30px] cursor-pointer">Socials</h3>
-          {socialLink.map((item, index) => (
-            <a
-              target="_blank"
-              className="hover:text-white duration-300 flex items-center gap-2"
-              key={index}
-              href={item.link}
-              aria-label={`${item.name} - opens in a new tab`}
-            >
-              {item.icon}
-              {item.name}
-            </a>
-          ))}
-        </div>
+      <div className="flex flex-col gap-3">
+        <h3 className="uppercase font-semibold text-black dark:text-white">Socials</h3>
+        {socialLink.map((item, index) => (
+          <a key={index} href={item.link} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 hover:text-gray-700 dark:hover:text-gray-300 transition-colors text-sm sm:text-base">
+            {item.icon} {item.name}
+          </a>
+        ))}
       </div>
 
-      <div className="flex flex-col text-black dark:text-white">
-        <h3 className="mb-2 uppercase text-black dark:text-white ml-[30px] cursor-pointer">Contact Us</h3>
-        <a
-          href={`mailto:${emailAddress}`}
-          className="block mb-2 hover:underline"
-        >
+      <div className="flex flex-col gap-3">
+        <h3 className="uppercase font-semibold text-black dark:text-white">Contact Us</h3>
+        <a href={`mailto:${emailAddress}`} className="hover:underline text-gray-800 dark:text-gray-300 text-sm sm:text-base">
           {emailAddress}
         </a>
-        <a href="tel:+17189711684" className="mb-2 hover:underline">
+        <a href="tel:+17189711684" className="hover:underline text-gray-800 dark:text-gray-300 text-sm sm:text-base">
           718-971-1684
         </a>
-
-        {/* <div className="flex items-center justify-center mt-4">
-          <img
-            src={googleImage}
-            alt="Google Translate"
-            className="w-[2rem] h-[2rem] mr-[65px]"
-          />
-        </div> */}
         <Google />
       </div>
-      <div className="flex flex-col md:ml-4 mt-4 md:mt-0"> {/* NewsletterForm flex container */}
-          <NewsletterForm />
-        </div>
     </div>
   );
 };
diff --git a/frontend/src/components/ui/FeedbackForm.jsx b/frontend/src/components/ui/FeedbackForm.jsx
index df15fd07..924664fd 100644
--- a/frontend/src/components/ui/FeedbackForm.jsx
+++ b/frontend/src/components/ui/FeedbackForm.jsx
@@ -17,7 +17,6 @@ const FeedbackForm = () => {
     visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
   };
   
-  // Use an environment variable for backend URL
   const API_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3000';
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
@@ -25,22 +24,17 @@ const FeedbackForm = () => {
   const [submitted, setSubmitted] = useState(false);
   const [rating, setRating] = useState(null);
   const [hover, setHover] = useState(null);
-  const [totalStars] = useState(5); // No need to set this dynamically unless you plan to change it later
+  const [totalStars] = useState(5);
   const [error, setError] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-
-    // Basic client-side validation for security
     if (!name || !email || !feedback || !rating) {
       setError('All fields are required, including the rating.');
       return;
     }
-
-    // Clear any previous errors
     setError(null);
-
     setIsLoading(true);
     try {
       const response = await fetch(`${API_URL}/api/feedback/create`, {
@@ -50,23 +44,13 @@ const FeedbackForm = () => {
         },
         body: JSON.stringify({ name, email, feedback, rating }),
       });
-
-      // Check for JSON response
-      let data;
-      try {
-        data = await response.json();
-      } catch (jsonError) {
-        throw new Error('Invalid response format.');
-      }
-
+      const data = await response.json();
       if (!response.ok) {
-        const errorMessage =
-          data.message || 'An error occurred while submitting feedback.';
+        const errorMessage = data.message || 'An error occurred while submitting feedback.';
         setError(errorMessage);
         console.error('Feedback submission failed:', errorMessage);
         return;
       }
-
       setSubmitted(true);
       setTimeout(() => {
         setName('');
@@ -91,61 +75,55 @@ const FeedbackForm = () => {
           initial="hidden"
           animate={inView ? 'visible' : 'hidden'}
           variants={animationVariants}
-          className="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center"
+          className="flex flex-col lg:flex-row lg:gap-8 lg:items-center"
         >
-          <div className="mb-8 lg:mb-0 relative">
-            <h2 className="text-5xl font-black text-[#004D43] dark:text-green-500">
+          <div className="mb-8 lg:mb-0 lg:w-1/2 relative">
+            <h2 className="text-3xl md:text-4xl lg:text-5xl font-black text-[#004D43] dark:text-green-500">
               We value Your Feedback!
             </h2>
-            <p className="mt-1 text-lg text-gray-700 pb-3 dark:text-white">
+            <p className="mt-2 text-base md:text-lg lg:text-xl text-gray-700 pb-3 dark:text-white">
               Your thoughts help us improve. Share your experience and suggestions with us!
             </p>
-            <div className="flex md:h-[40vh] md:w-[60vh] items-center justify-center mt-12">
+            <div className="flex md:h-[40vh] md:w-[60vh] items-center justify-center mt-8 lg:mt-12">
               <img
                 src={chess}
                 alt="Chess"
                 loading="lazy"
-                className="md:p-10 p-5 object-contain bg-[#004D43] dark:bg-green-500 rounded-full shadow-2xl"
+                className="md:p-10 p-5 object-contain bg-[#004D43] dark:bg-green-500 rounded-full shadow-2xl w-48 h-48 md:w-60 md:h-60 lg:w-80 lg:h-80"
               />
             </div>
           </div>
 
-          <div className="bg-[#004D43] dark:bg-green-500 rounded-xl p-3 pt-4 h-fit">
+          <div className="lg:w-1/2 bg-[#004D43] dark:bg-green-500 rounded-xl p-4 lg:p-6">
             <form onSubmit={handleSubmit} className="space-y-4">
-              <div>
-                <input
-                  type="text"
-                  id="name"
-                  value={name}
-                  placeholder="Name"
-                  onChange={(e) => setName(e.target.value)}
-                  required
-                  className="mt-1 block w-full border border-gray-300 dark:bg-black rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43]"
-                />
-              </div>
-              <div>
-                <input
-                  type="email"
-                  id="email"
-                  placeholder="Email"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  required
-                  className="mt-1 block w-full border border-gray-300 dark:bg-black rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43]"
-                />
-              </div>
-              <div>
-                <textarea
-                  id="feedback"
-                  placeholder="Your valuable feedback here"
-                  rows="4"
-                  value={feedback}
-                  onChange={(e) => setFeedback(e.target.value)}
-                  required
-                  className="mt-1 block w-full border dark:bg-black border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43] resize-none"
-                ></textarea>
-              </div>
-              <div className="flex flex-row justify-center gap-2">
+              <input
+                type="text"
+                id="name"
+                value={name}
+                placeholder="Name"
+                onChange={(e) => setName(e.target.value)}
+                required
+                className="w-full border border-gray-300 dark:bg-black rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43]"
+              />
+              <input
+                type="email"
+                id="email"
+                placeholder="Email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                className="w-full border border-gray-300 dark:bg-black rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43]"
+              />
+              <textarea
+                id="feedback"
+                placeholder="Your valuable feedback here"
+                rows="4"
+                value={feedback}
+                onChange={(e) => setFeedback(e.target.value)}
+                required
+                className="w-full border dark:bg-black border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43] resize-none"
+              ></textarea>
+              <div className="flex justify-center gap-2">
                 {[...Array(totalStars)].map((star, index) => {
                   const currentRating = index + 1;
                   return (
@@ -155,38 +133,30 @@ const FeedbackForm = () => {
                         name="rating"
                         value={currentRating}
                         onChange={() => setRating(currentRating)}
+                        className="hidden"
                       />
-                      <span
-                        className="star"
-                        style={{
-                          color:
-                            currentRating <= (hover || rating)
-                              ? '#ffc107'
-                              : '#e4e5e9',
-                        }}
+                      <FaStar
+                        className="cursor-pointer"
+                        color={currentRating <= (hover || rating) ? '#ffc107' : '#e4e5e9'}
                         onMouseEnter={() => setHover(currentRating)}
                         onMouseLeave={() => setHover(null)}
-                      >
-                        <FaStar />
-                      </span>
+                      />
                     </label>
                   );
                 })}
               </div>
-              <div>
-                <button
-                  type="submit"
-                  className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md dark:bg-green-700 shadow-sm text-sm font-medium text-white bg-[#09342e] hover:bg-[#072d28] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#004D43]"
-                  disabled={isLoading} // Disable the button while loading
-                >
-                  {isLoading ? 'Submitting...' : 'Submit Feedback'}
-                </button>
-              </div>
+              <button
+                type="submit"
+                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md dark:bg-green-700 shadow-sm text-sm font-medium text-white bg-[#09342e] hover:bg-[#072d28] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#004D43]"
+                disabled={isLoading}
+              >
+                {isLoading ? 'Submitting...' : 'Submit Feedback'}
+              </button>
             </form>
             {submitted && (
               <motion.div
-                initial={{ opacity: 0, y: -10, display: 'none', height: 0 }}
-                animate={{ opacity: 1, y: 0, display: 'block', height: 'auto' }}
+                initial={{ opacity: 0, y: -10 }}
+                animate={{ opacity: 1, y: 0 }}
                 className="mt-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded"
               >
                 Thank you for your feedback!
@@ -208,4 +178,4 @@ const FeedbackForm = () => {
   );
 };
 
-export default FeedbackForm;
+export default FeedbackForm;
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index eca33bfa..1f8e0ea1 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -3,6 +3,7 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Base Styles */
 @layer base {
   .font-outline-2 {
     -webkit-text-stroke: 2px white;
@@ -13,21 +14,18 @@
   font-family: 'Poppins', sans-serif;
 }
 
+/* Component Styles */
 @layer components {
   .primary-btn {
-    @apply block;
+    @apply block w-full md:w-auto px-4 py-2 text-center rounded-lg bg-green-500 text-white transition-all duration-200 ease-in-out hover:bg-green-600;
   }
+
   .page-shadow {
     @apply shadow-[inset_0_0_8px_rgba(0,0,0,0.6),12px_12px_14px_rgba(0,0,0,0.9)];
   }
 }
 
-/* ------- THIS IS WILL REMOVE THE EMPTY SPACE THAT IS BEING CREATED ON THE EXTREME RIGHT SIDE OF THE WEBSITE ------- */
-/* *::-webkit-scrollbar {
-  display: none;
-} */
-/* ------------------------------------------------------------------------------------------------------------------  */
-
+/* Global Scrollbar Styles */
 ::-webkit-scrollbar {
   width: 7px;
   height: 7px;
@@ -42,3 +40,32 @@
   background-color: #004d43;
   border-radius: 10px;
 }
+
+/* Responsive Adjustments */
+@media (min-width: 640px) {
+  /* Small devices (sm) */
+  .primary-btn {
+    @apply px-6 py-3 text-lg; /* Larger padding for small screens */
+  }
+}
+
+@media (min-width: 768px) {
+  /* Medium devices (md) */
+  .primary-btn {
+    @apply px-8 py-4 text-xl; /* Larger padding for medium screens */
+  }
+}
+
+@media (min-width: 1024px) {
+  /* Large devices (lg) */
+  .page-shadow {
+    @apply rounded-lg p-4; /* Add padding and rounded corners for larger screens */
+  }
+}
+
+@media (min-width: 1280px) {
+  /* Extra-large devices (xl) */
+  .primary-btn {
+    @apply px-10 py-4 text-xl; /* Extra padding for large screens */
+  }
+}
\ No newline at end of file