diff --git a/src/components/Contact/ContactCard.css b/src/components/Contact/ContactCard.css
index 7f4d8f6..d437095 100644
--- a/src/components/Contact/ContactCard.css
+++ b/src/components/Contact/ContactCard.css
@@ -69,7 +69,7 @@
       rgba(255, 255, 255, 0) 50%
     );
   /* backdrop-filter: blur(10.5px); */
-  color: #1e1e1e;
+  color: #000;
 }
 
 .text-field h2 {
diff --git a/src/components/Contact/ContactCard.jsx b/src/components/Contact/ContactCard.jsx
index 0d3514d..8fcd541 100644
--- a/src/components/Contact/ContactCard.jsx
+++ b/src/components/Contact/ContactCard.jsx
@@ -83,6 +83,7 @@ const ContactCard = ({ details }) => {
         className="card-container"
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
+        onClick={() => setIsHovered(!isHovered)}
       >
         <div className="background-image">
           <Image
diff --git a/src/components/Contact/ContactPage.jsx b/src/components/Contact/ContactPage.jsx
index 7a9c23c..80cf50d 100644
--- a/src/components/Contact/ContactPage.jsx
+++ b/src/components/Contact/ContactPage.jsx
@@ -1,84 +1,83 @@
 import ContactCard from "./ContactCard";
-import chairperson from "../../assets/contacts/sreeparvathy_crop.jpg"
-import gensec from "../../assets/contacts/arif.jpg"
-import jointsec from "../../assets/contacts/akash.jpg"
-import sim from "../../assets/contacts/laya.jpg"
-import eventhead from "../../assets/contacts/Athul.png"
-import eventhead2 from "../../assets/contacts/aleena.jpg"
+import chairperson from "../../assets/contacts/sreeparvathy_crop.jpg";
+import gensec from "../../assets/contacts/arif.jpg";
+import jointsec from "../../assets/contacts/akash.jpg";
+import sim from "../../assets/contacts/laya.jpg";
+import eventhead from "../../assets/contacts/Athul.png";
+import eventhead2 from "../../assets/contacts/aleena.jpg";
 
-export default function Contact (){
-    const contactDetails = [
-        {
-            name: "Sreeparvathy S Nair",
-            title: "Chairperson",
-            email: "sreeparvathynair.mec@gmail.com",
-            phone: "",
-            linkedin: "https://www.linkedin.com/in/sreeparvathy-nair-b29a6326b/",
-            img: chairperson
-        },
-        
-        {
-            name: "Arif Basheer",
-            title: "General Secretary",
-            email: "arifbasheer.mec@gmail.com",
-            phone: "",
-            linkedin: "https://www.linkedin.com/in/arif-basheer-b20491258/",
-            img: gensec
-        },
+export default function Contact() {
+  const contactDetails = [
+    {
+      name: "Sreeparvathy S Nair",
+      title: "Chairperson",
+      email: "sreeparvathynair.mec@gmail.com",
+      phone: "",
+      linkedin: "https://www.linkedin.com/in/sreeparvathy-nair-b29a6326b/",
+      img: chairperson,
+    },
 
-        {
-            name: "Akash V P",
-            title: "Joint Secretary",
-            email: "akashvp.mec@gmail.com",
-            phone: "",
-            linkedin: "https://www.linkedin.com/in/akashvp/",
-            img: jointsec
-        },
+    {
+      name: "Arif Basheer",
+      title: "General Secretary",
+      email: "arifbasheer.mec@gmail.com",
+      phone: "",
+      linkedin: "https://www.linkedin.com/in/arif-basheer-b20491258/",
+      img: gensec,
+    },
 
-        {
-            name: "Laya Sara Joy",
-            title: "Social Initiatives Manager",
-            email: "layasarajoy.mec@gmail.com",
-            phone: "",
-            linkedin: "https://www.linkedin.com/in/laya-sara-joy/",
-            img: sim
-        },
+    {
+      name: "Akash V P",
+      title: "Joint Secretary",
+      email: "akashvp.mec@gmail.com",
+      phone: "",
+      linkedin: "https://www.linkedin.com/in/akashvp/",
+      img: jointsec,
+    },
 
-        {
-            name: "Athul Babu",
-            title: "Event Head",
-            email: "athulbabu5088@gmail.com",
-            phone: "",
-            linkedin: "https://www.linkedin.com/in/athul-babu-9b55362a5/",
-            img: eventhead
-        },
+    {
+      name: "Laya Sara Joy",
+      title: "Social Initiatives Manager",
+      email: "layasarajoy.mec@gmail.com",
+      phone: "",
+      linkedin: "https://www.linkedin.com/in/laya-sara-joy/",
+      img: sim,
+    },
 
-        {
-            name: "Aleena Prince",
-            title: "Event Head",
-            email: "aleenaprince.mec@gmail.com",
-            phone: "",
-            linkedin: "https://www.linkedin.com/in/aleena-prince-b85244230/",
-            img: eventhead2
-        }
-    ]
-    return (
-        <>
-        <div className="w-[100vw] flex justify-center items-center flex-col overflow-hidden h-full pb-10">
-            <h1 className="mt-10 text-4xl text-center">Contact Us</h1>
-            <p className="text-center md:w-[30vw] w-[90vw] mt-5 mb-10 font-sans bg-gradient-to-r  bg-clip-text text-white text-[18px]" >We’d love to hear from you! Whether you have questions, feedback, or just want to chat, feel free to reach out to us. Your thoughts and inquiries are valuable to us, and we’re here to help in any way we can.</p>
-            <div className="flex flex-wrap justify-center flex-row items-center  h-fit w-[80vw] gap-[120px] align-middle">
+    {
+      name: "Athul Babu",
+      title: "Event Head",
+      email: "athulbabu5088@gmail.com",
+      phone: "",
+      linkedin: "https://www.linkedin.com/in/athul-babu-9b55362a5/",
+      img: eventhead,
+    },
 
-                {contactDetails.map((cd, index) => (
-                    <ContactCard
-                        key={index}
-                        details = {cd}
-                    />
-                ))}
-
-
-            </div>
+    {
+      name: "Aleena Prince",
+      title: "Event Head",
+      email: "aleenaprince.mec@gmail.com",
+      phone: "",
+      linkedin: "https://www.linkedin.com/in/aleena-prince-b85244230/",
+      img: eventhead2,
+    },
+  ];
+  return (
+    <>
+      <div className="w-[100vw] flex justify-center items-center flex-col overflow-hidden h-full pb-10">
+        <h1 className="mt-10 text-4xl text-center">Contact Us</h1>
+        <p className="text-center md:w-[30vw] w-[90vw] mt-5 mb-10 font-sans bg-gradient-to-r  bg-clip-text text-white text-[18px]">
+          We’d love to hear from you! Whether you have questions, feedback, or
+          just want to chat, feel free to reach out to us. Your thoughts and
+          inquiries are valuable to us, and we’re here to help in any way we
+          can.
+        </p>
+        <div className="grid grid-cols-3 max-sm:grid-cols-1 max-md:grid-cols-2 gap-[50px]">
+          {contactDetails.map((cd, index) => (
+            <ContactCard key={index} details={cd} />
+          ))}
         </div>
-        </>
-    )
-}
\ No newline at end of file
+      </div>
+    </>
+  );
+}
diff --git a/src/components/FAQ/FAQCard.css b/src/components/FAQ/FAQCard.css
index 0ff4559..4957ad5 100644
--- a/src/components/FAQ/FAQCard.css
+++ b/src/components/FAQ/FAQCard.css
@@ -1,5 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap");
-
 .faq {
   width: 100%;
   min-height: 100vh;
@@ -16,7 +14,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-family: "Syne", sans-serif;
+  font-family: "Syne Medium", sans-serif;
   font-weight: 400;
   /* Set color to be inverted based on background*/
   color: #fff;