diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
index 376f311..a8cc435 100644
--- a/src/components/Footer/index.jsx
+++ b/src/components/Footer/index.jsx
@@ -1,9 +1,8 @@
-import React from "react";
 import { Link, useLocation } from "react-router-dom";
 import Logo from "@/assets/images/logo.svg";
 import SitLogo from "@/assets/images/Teams/sitlogo.svg";
 
-const Footer = () => {
+function Footer() {
   const location = useLocation();
 
   const handleLinkClick = () => {
@@ -38,7 +37,7 @@ const Footer = () => {
                 alt="Symbiosis Logo"
                 className="h-10 md:h-12"
               />
-              <div className="hidden sm:block w-px h-10 bg-secondary-light"></div>
+              <div className="hidden sm:block w-px h-10 bg-secondary-light" />
               <img src={Logo} alt="CodeX Logo" className="h-10 md:h-12" />
             </div>
           </div>
@@ -48,7 +47,7 @@ const Footer = () => {
             <div className="flex-1">
               <h4 className="text-lg font-medium mb-4 text-secondary-light relative inline-block sm:block">
                 QUICK LINKS
-                <span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light"></span>
+                <span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light" />
               </h4>
               <ul className="space-y-2 text-text-light text-sm sm:text-base">
                 {[
@@ -79,7 +78,7 @@ const Footer = () => {
               <div className="flex-1">
                 <h4 className="text-lg font-medium mb-4 text-secondary-light relative inline-block sm:block ">
                   SOCIAL
-                  <span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light"></span>
+                  <span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light" />
                 </h4>
                 <ul className="space-y-2 text-text-light text-sm sm:text-base">
                   <li className="cursor-pointer">
@@ -101,7 +100,7 @@ const Footer = () => {
                 <div className="relative bottom-0 left-0 w-full">
                   <h4 className="text-lg font-medium mb-4 text-secondary-light relative inline-block sm:block">
                     CONTACT
-                    <span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light"></span>
+                    <span className="absolute bottom-0 left-0 w-full h-[2px] bg-secondary-light" />
                   </h4>
                 </div>
                 <ul className="space-y-2 text-text-light text-sm sm:text-base">
@@ -127,6 +126,6 @@ const Footer = () => {
       </div>
     </footer>
   );
-};
+}
 
 export default Footer;
diff --git a/src/pages/Contact/index.jsx b/src/pages/Contact/index.jsx
index 2557c31..7a5719c 100644
--- a/src/pages/Contact/index.jsx
+++ b/src/pages/Contact/index.jsx
@@ -44,20 +44,20 @@ function Contact() {
         >
           {result}
         </div>
-        <div className="mt-8 flex gap-x-8 overflow-hidden">
-          <span className="text-outlined uppercase text-8xl font-black text-transparent whitespace-nowrap">
+        <div className="mt-8 flex gap-x-4 md:gap-x-8 overflow-hidden justify-center">
+          <span className="text-outlined uppercase text-4xl md:text-8xl font-black text-transparent whitespace-nowrap">
             Contact Us
           </span>
-          <span className="text-text-light uppercase text-8xl font-black whitespace-nowrap">
+          <span className="text-text-light uppercase text-4xl md:text-8xl font-black whitespace-nowrap">
             Contact Us
           </span>
-          <span className="text-outlined uppercase text-8xl font-black text-transparent whitespace-nowrap">
+          <span className="text-outlined uppercase text-4xl md:text-8xl font-black text-transparent whitespace-nowrap">
             Contact Us
           </span>
         </div>
-        <div className="mx-10 mt-16">
+        <div className="mx-8 md:mx-10 mt-8">
           <form onSubmit={onSubmit}>
-            <div className="m-auto flex flex-col p-8 bg-background-elevation rounded-lg shadow-lg px-12 py-8 max-w-2xl">
+            <div className="m-auto flex flex-col p-8 bg-background-elevation rounded-lg shadow-lg px-8 md:px-12 py-8 max-w-2xl">
               <span className=" text-secondary-light uppercase tracking-widest m-auto mb-3">
                 Drop us a message
               </span>
@@ -87,7 +87,7 @@ function Contact() {
                 className="bg-background-elevation py-2 my-3 border-b-2 border-secondary-light text-text-light outline-none"
                 required
               />
-              <div className=" flex justify-end mt-4">
+              <div className=" flex justify-center md:justify-end mt-4">
                 <button
                   type="submit"
                   className="bg-transparent rounded-full border-2 border-secondary-light px-8 py-2 text-secondary-light cursor-pointer"
diff --git a/src/pages/Gallery/Gallery.jsx b/src/pages/Gallery/Gallery.jsx
index 5f6bfd9..31d0c5a 100644
--- a/src/pages/Gallery/Gallery.jsx
+++ b/src/pages/Gallery/Gallery.jsx
@@ -161,76 +161,78 @@ export default function Gallery() {
 
   return (
     <PageTransition>
-      <Heading
-        text="Gallery"
-        className="text-center absolute top-0 left-0 right-0 mb-24"
-      />
-      <div className="grid grid-cols-2 md:grid-cols-3 gap-4 m-[5%]">
-        {images.map((image, index) => (
-          <div
-            role="button"
-            aria-label="Open"
-            onClick={() => openModal(index)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                openModal(index);
-              }
-            }}
-            tabIndex={0} // Makes the div focusable
-            key={image.src}
-            className="cursor-pointer"
-          >
-            <img
-              className="h-auto max-w-full rounded-lg aspect-square"
-              src={image.src}
-              alt={`Gallery img ${index + 1}`}
-            />
-          </div>
-        ))}
-
-        {modalOpen ? (
-          <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-75 overflow-y-auto">
-            <div className="relative max-h-screen max-w-screen-lg p-4 bg-white rounded-lg">
-              <button
-                type="button"
-                className="absolute top-0 right-0 m-4 text-white bg-gray-500 hover:bg-gray-700 font-bold py-2 px-4 border border-gray-700 rounded"
-                onClick={closeModal}
-                aria-label="Close"
-              >
-                x
-              </button>
-              <button
-                className="absolute left-0 top-1/2 transform -translate-y-1/2 text-black font-bold py-2 px-4 border border-black rounded-3xl ml-5"
-                onClick={goToPrevious}
-                aria-label="Previous Image"
-                type="button"
-              >
-                &lt;&lt;
-              </button>
-              <button
-                className="absolute right-0 top-1/2 transform -translate-y-1/2 text-black font-bold py-2 px-4 border border-black rounded-3xl mr-5"
-                onClick={goToNext}
-                aria-label="Next Image"
-                type="button"
-              >
-                &gt;&gt;
-              </button>
+      <div className="pt-8 pb-16">
+        <Heading
+          text="Gallery"
+          className="text-center absolute top-0 left-0 right-0 mb-12 md:mb-24"
+        />
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-4 m-[5%]">
+          {images.map((image, index) => (
+            <div
+              role="button"
+              aria-label="Open"
+              onClick={() => openModal(index)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  openModal(index);
+                }
+              }}
+              tabIndex={0} // Makes the div focusable
+              key={image.src}
+              className="cursor-pointer"
+            >
               <img
-                className="max-h-[80vh] max-w-[80vw] rounded-lg mb-4"
-                src={images[selectedImageIndex].src}
-                alt={`Selected gallery img ${selectedImageIndex + 1}`}
+                className="h-auto max-w-full rounded-lg aspect-square"
+                src={image.src}
+                alt={`Gallery img ${index + 1}`}
               />
-              <div className="text-center max-w-[80vw]">
-                <h3 className="text-lg font-semibold truncate">
-                  {images[selectedImageIndex].caption}
-                </h3>
-                <p className="text-sm text-gray-500">
-                  Date: {images[selectedImageIndex].date}
-                </p>
+            </div>
+          ))}
+
+          {modalOpen ? (
+            <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-75 overflow-y-auto">
+              <div className="relative max-h-screen max-w-screen-lg p-4 bg-white rounded-lg">
+                <button
+                  type="button"
+                  className="absolute top-0 right-0 m-4 text-white bg-gray-500 hover:bg-gray-700 font-bold py-2 px-4 border border-gray-700 rounded"
+                  onClick={closeModal}
+                  aria-label="Close"
+                >
+                  x
+                </button>
+                <button
+                  className="absolute left-0 top-1/2 transform -translate-y-1/2 text-black font-bold py-2 px-4 border border-black rounded-3xl ml-5"
+                  onClick={goToPrevious}
+                  aria-label="Previous Image"
+                  type="button"
+                >
+                  &lt;&lt;
+                </button>
+                <button
+                  className="absolute right-0 top-1/2 transform -translate-y-1/2 text-black font-bold py-2 px-4 border border-black rounded-3xl mr-5"
+                  onClick={goToNext}
+                  aria-label="Next Image"
+                  type="button"
+                >
+                  &gt;&gt;
+                </button>
+                <img
+                  className="max-h-[80vh] max-w-[80vw] rounded-lg mb-4"
+                  src={images[selectedImageIndex].src}
+                  alt={`Selected gallery img ${selectedImageIndex + 1}`}
+                />
+                <div className="text-center max-w-[80vw]">
+                  <h3 className="text-lg font-semibold truncate">
+                    {images[selectedImageIndex].caption}
+                  </h3>
+                  <p className="text-sm text-gray-500">
+                    Date: {images[selectedImageIndex].date}
+                  </p>
+                </div>
               </div>
             </div>
-          </div>
-        ) : null}
+          ) : null}
+        </div>
       </div>
     </PageTransition>
   );
diff --git a/src/pages/Teams/index.jsx b/src/pages/Teams/index.jsx
index 2ddf3a0..8dc1848 100644
--- a/src/pages/Teams/index.jsx
+++ b/src/pages/Teams/index.jsx
@@ -13,12 +13,12 @@ function Teams() {
     <PageTransition>
       <div className="min-h-screen">
         <div className="flex justify-center items-center">
-          <div className="flex-grow mx-auto pr-5 pl-5 space-x-30 py-8">
+          <div className="flex-grow mx-auto px-5 space-x-30 pt-8 pb-16">
             <Heading
               text="MEET OUR TEAM"
-              className="text-center absolute top-0 left-0 right-0 mb-24"
+              className="text-center absolute top-0 left-0 right-0 mb-12 md:mb-24"
             />
-            <div className="flex flex-row flex-wrap gap-16 justify-center items-center mt-12">
+            <div className="flex flex-row flex-wrap gap-8 md:gap-16 justify-center items-center mt-4 sm:mt-12">
               {teamMembers}
             </div>
             {/* <SkewButton text="SEE ALL" link="/all-members" className="mt-16" /> */}