diff --git a/public/assets/Icons/chat.svg b/public/assets/Icons/chat.svg
index 98e0bd9c..148ef230 100644
--- a/public/assets/Icons/chat.svg
+++ b/public/assets/Icons/chat.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="blue">
+<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="#ff0000">
     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5"
         d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
 </svg>
\ No newline at end of file
diff --git a/public/assets/Icons/email.svg b/public/assets/Icons/email.svg
index 89f0fe05..134b5a9c 100644
--- a/public/assets/Icons/email.svg
+++ b/public/assets/Icons/email.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="blue">
+<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="#ff0000">
     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5"
         d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
 </svg>
\ No newline at end of file
diff --git a/public/assets/Icons/mail.svg b/public/assets/Icons/mail.svg
index 965ae213..6e4c46ce 100644
--- a/public/assets/Icons/mail.svg
+++ b/public/assets/Icons/mail.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="blue">
+<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="#ff0000">
   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5"
     d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
 </svg>
\ No newline at end of file
diff --git a/public/assets/Icons/phone.svg b/public/assets/Icons/phone.svg
index 40659002..ee63a23a 100644
--- a/public/assets/Icons/phone.svg
+++ b/public/assets/Icons/phone.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="blue">
+<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="#ff0000">
     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5"
         d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
 </svg>
\ No newline at end of file
diff --git a/public/assets/Images/contact-us.png b/public/assets/Images/contact-us.png
new file mode 100644
index 00000000..5f3da03f
Binary files /dev/null and b/public/assets/Images/contact-us.png differ
diff --git a/src/pages/About/ContactUs.tsx b/src/pages/About/ContactUs.tsx
index 94333e4a..b1ba7ab0 100644
--- a/src/pages/About/ContactUs.tsx
+++ b/src/pages/About/ContactUs.tsx
@@ -1,303 +1,276 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { socialLinks } from '@/constants/Footer';
 import Header from '@/sections/Header';
 import Footer from '@/sections/Footer';
+import { socialLinks } from '@/constants/Footer';
 import { Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { ReactNode } from 'react';
 import {
-  fadeIn,
   slideInLeft,
   slideInRight,
   slideInBottom,
-  bounce,
-  staggerContainer,
-  subtleRise,
-  dividerVariants,
+  cardFadeIn,
+  fadeIn,
+  headerReveal,
 } from '@/styles/Animations';
 
-const ContactUs: React.FC = () => {
+interface CardProps {
+  icon: string;
+  title: string;
+  content: ReactNode;
+}
+
+const Card: React.FC<CardProps> = ({ icon, title, content }) => (
+  <motion.div
+    className="relative bg-gradient-to-b from-white to-red-50 dark:from-gray-800 dark:to-gray-900
+               border border-gray-200 dark:border-gray-700 
+               rounded-2xl p-8 text-center shadow-md hover:shadow-xl 
+               transition-all duration-300 overflow-hidden"
+    variants={cardFadeIn}
+    whileHover={{ scale: 1.05, y: -4 }}
+  >
+    {/* Gradient bar at top */}
+    <div className="absolute top-0 left-0 w-full h-1 rounded-t-2xl bg-gradient-to-r from-red-500 to-red-700" />
+
+    <div className="mx-auto w-16 h-16 rounded-full bg-red-100 dark:bg-red-300 flex items-center justify-center mb-4 shadow-inner mt-2">
+      <img src={icon} alt={`${title} Icon`} className="h-8 w-8" />
+    </div>
+    <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">
+      {title}
+    </h3>
+    <div className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
+      {content}
+    </div>
+  </motion.div>
+);
+
+const ContactUs = () => {
   return (
-    <>
+    <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
       <Header />
-      <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <main className="container mx-auto p-4">
         {/* Hero Section */}
         <motion.section
-          variants={fadeIn}
+          className="my-8 flex justify-center"
           initial="hidden"
-          animate="visible"
-          className="relative w-full bg-gradient-to-r from-blue-900 via-slate-800 to-slate-900 py-32 overflow-hidden"
+          whileInView="visible"
+          viewport={{ once: true, amount: 0.3 }}
+          variants={fadeIn}
         >
-          <div className="absolute inset-0 overflow-hidden">
-            <svg
-              className="absolute w-full h-full opacity-5"
-              viewBox="0 0 100 100"
-              preserveAspectRatio="none"
-              aria-hidden="true"
-            >
-              <defs>
-                <pattern
-                  id="grid"
-                  width="8"
-                  height="8"
-                  patternUnits="userSpaceOnUse"
-                >
-                  <path
-                    d="M 8 0 L 0 0 0 8"
-                    fill="none"
-                    stroke="white"
-                    strokeWidth="0.5"
-                  />
-                </pattern>
-              </defs>
-              <rect x="0" y="0" width="100%" height="100%" fill="url(#grid)" />
-            </svg>
-          </div>
-
-          <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="max-w-4xl w-4/5 flex flex-col md:flex-row justify-between items-center">
             <motion.div
-              className="max-w-3xl"
-              variants={slideInBottom}
-              initial="hidden"
-              animate="visible"
+              className="md:w-1/2 text-left md:pr-8"
+              variants={slideInLeft}
             >
-              <motion.h1
-                className="text-4xl md:text-5xl font-bold text-white mb-4 tracking-tight"
-                variants={slideInBottom}
-                initial="hidden"
-                animate="visible"
-              >
-                Contact <span className="text-blue-200">Sugar Labs</span>
+              <motion.h1 className="text-4xl font-bold" variants={headerReveal}>
+                Contact Us
               </motion.h1>
-              <motion.div
-                className="w-20 h-1 bg-blue-400 mb-6"
-                variants={dividerVariants}
-                initial="hidden"
-                animate="visible"
-              ></motion.div>
               <motion.p
-                className="text-base md:text-lg text-gray-200 max-w-2xl leading-relaxed"
+                className="text-gray-600 dark:text-gray-400 mt-2 text-lg"
                 variants={fadeIn}
-                initial="hidden"
-                animate="visible"
-                transition={{ delay: 0.3 }}
               >
-                We'd love to hear from you. Here's how you can reach our team of
-                educational innovators.
+                We'd love to hear from you. Reach out to our team and join our
+                global community dedicated to bringing learning opportunities to
+                children worldwide.
               </motion.p>
             </motion.div>
+
+            <motion.div
+              className="md:w-1/2 flex justify-end mt-6 md:mt-0"
+              variants={slideInRight}
+            >
+              <img
+                src="/assets/Images/contact-us.png"
+                alt="Contact Us Illustration"
+                className="w-80 md:w-[400px]"
+              />
+            </motion.div>
           </div>
         </motion.section>
 
-        {/* Main Content */}
-        <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-20">
-          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 md:gap-8">
-            {/* Contact Information Card */}
-            <motion.div
-              className="lg:col-span-7 bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden border border-gray-200 dark:border-gray-700 transition-shadow duration-300 hover:shadow-lg"
-              variants={slideInLeft}
-              initial="hidden"
-              animate="visible"
-              whileHover={{ y: -5 }}
-              transition={{ duration: 0.3 }}
+        <div className="w-4/5 max-w-5xl mx-auto">
+          {/* Contact Methods */}
+          <motion.section
+            className="my-16 px-6"
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, amount: 0.2 }}
+            variants={fadeIn}
+          >
+            <motion.h2
+              className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-gray-100 text-center"
+              variants={headerReveal}
             >
-              <div className="p-6 md:p-8 lg:p-10">
-                <motion.h2
-                  className="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-8 flex items-center"
-                  variants={fadeIn}
-                  initial="hidden"
-                  animate="visible"
-                >
-                  <span className="w-1.5 h-6 bg-blue-600 mr-3 rounded-sm"></span>
-                  How to Reach Us
-                </motion.h2>
+              <motion.span
+                className="text-red-500 font-Pacifico"
+                variants={fadeIn}
+              >
+                Get In{' '}
+              </motion.span>
+              Touch
+            </motion.h2>
 
-                <motion.div
-                  className="grid grid-cols-1 md:grid-cols-2 gap-y-8 gap-x-6 lg:gap-x-8"
-                  variants={staggerContainer}
-                  initial="hidden"
-                  animate="visible"
-                >
-                  {/* Mail Address */}
-                  <ContactMethod
-                    iconSrc="assets/Icons/mail.svg"
-                    title="By Mail"
-                    description={
-                      <address className="mt-2 not-italic text-gray-600 dark:text-gray-400 leading-relaxed text-sm">
-                        Sugar Labs
-                        <br />
-                        2028 E Ben White Blvd <b>STE 240 PMB 1271</b>
-                        <br />
-                        AUSTIN, TX 78741
-                        <br />
-                        USA
-                      </address>
-                    }
-                  />
+            <hr className="w-24 border-t-4 border-red-600 dark:border-red-500 mx-auto mt-3" />
 
-                  {/* Phone */}
-                  <ContactMethod
-                    iconSrc="assets/Icons/phone.svg"
-                    title="By Phone"
-                    description={
-                      <a
-                        href="tel:+16177024088"
-                        className="mt-2 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block text-sm"
-                      >
-                        +1 (617) 702-4088
-                      </a>
-                    }
-                  />
+            <motion.div
+              className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 mt-12"
+              variants={fadeIn}
+            >
+              <Card
+                icon="assets/Icons/mail.svg"
+                title="By Mail"
+                content={
+                  <>
+                    Sugar Labs <br />
+                    2028 E Ben White Blvd <br />
+                    STE 240 PMB 1271 <br />
+                    AUSTIN, TX 78741 <br />
+                    USA
+                  </>
+                }
+              />
 
-                  {/* Email */}
-                  <ContactMethod
-                    iconSrc="assets/Icons/email.svg"
-                    title="By Email"
-                    description={
-                      <a
-                        href="mailto:info@sugarlabs.org"
-                        className="mt-2 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block text-sm"
-                      >
-                        info@sugarlabs.org
-                      </a>
-                    }
-                  />
+              <Card
+                icon="assets/Icons/phone.svg"
+                title="By Phone"
+                content={
+                  <a
+                    href="tel:+16177024088"
+                    className="text-red-600 dark:text-red-400 hover:underline font-medium"
+                  >
+                    +1 (617) 702-4088
+                  </a>
+                }
+              />
 
-                  {/* Matrix Chat */}
-                  <ContactMethod
-                    iconSrc="assets/Icons/chat.svg"
-                    title="Via Matrix Chat"
-                    description={
-                      <Link
-                        to="matrix"
-                        className="mt-2 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition duration-200 block text-sm"
-                      >
-                        Go to Matrix Chat
-                      </Link>
-                    }
-                  />
-                </motion.div>
-              </div>
+              <Card
+                icon="assets/Icons/email.svg"
+                title="By Email"
+                content={
+                  <a
+                    href="mailto:info@sugarlabs.org"
+                    className="text-red-600 dark:text-red-400 hover:underline font-medium break-all"
+                  >
+                    info@sugarlabs.org
+                  </a>
+                }
+              />
             </motion.div>
+          </motion.section>
 
-            {/* Social Connect Card */}
-            <motion.div
-              className="lg:col-span-5 rounded-xl overflow-hidden shadow-md"
-              variants={slideInRight}
-              initial="hidden"
-              animate="visible"
-              whileHover={{ y: -5 }}
-              transition={{ duration: 0.3 }}
+          {/* Social Links */}
+          <motion.section
+            className="my-16 mt-4 justify-center px-6"
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, amount: 0.2 }}
+            variants={fadeIn}
+          >
+            <motion.h2
+              className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-gray-100 text-center"
+              variants={headerReveal}
             >
-              <div className="bg-gradient-to-br from-gray-800 via-gray-850 to-gray-900 p-6 md:p-8 lg:p-10">
-                <motion.h2
-                  className="text-2xl font-bold text-white mb-6 flex items-center"
-                  variants={fadeIn}
-                  initial="hidden"
-                  animate="visible"
-                >
-                  <span className="w-1.5 h-6 bg-blue-500 mr-3 rounded-sm"></span>
-                  Connect With The Community
-                </motion.h2>
+              <motion.span
+                className="text-red-500 font-Pacifico"
+                variants={fadeIn}
+              >
+                Connect{' '}
+              </motion.span>
+              With Our Community
+            </motion.h2>
 
-                <motion.p
-                  className="text-gray-300 text-sm leading-relaxed mb-8"
-                  variants={fadeIn}
-                  initial="hidden"
-                  animate="visible"
-                  transition={{ delay: 0.2 }}
-                >
-                  Join our global community of educators, developers, and
-                  learners who are passionate about bringing educational
-                  software to children around the world.
-                </motion.p>
+            <hr className="w-32 border-t-4 border-red-600 dark:border-red-500 mx-auto mt-2" />
+            <motion.p
+              className="text-gray-600 dark:text-gray-400 text-center mt-4 text-lg max-w-3xl mx-auto"
+              variants={fadeIn}
+            >
+              Join our global community of educators, developers, and learners
+              who are passionate about bringing educational software to children
+              around the world.
+            </motion.p>
 
-                <motion.div
-                  className="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-6"
-                  variants={staggerContainer}
+            <motion.div
+              className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-4 mt-8"
+              variants={fadeIn}
+            >
+              {socialLinks.map((social) => (
+                <motion.a
+                  key={social.href}
+                  href={social.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="w-24 h-24 bg-white dark:bg-gray-800 shadow-md rounded-2xl 
+                 flex flex-col items-center justify-center 
+                 border border-gray-200 dark:border-gray-700 hover:shadow-lg 
+                 hover:bg-red-50 dark:hover:bg-gray-700 hover:border-red-300 
+                 transition-all duration-300"
+                  variants={cardFadeIn}
                   initial="hidden"
-                  animate="visible"
+                  whileInView="visible"
+                  viewport={{ once: true, amount: 0.2 }}
+                  whileHover={{ scale: 1.05, y: -3 }}
                 >
-                  {socialLinks.map((social, index) => (
-                    <motion.a
-                      key={social.href}
-                      href={social.href}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      aria-label={`Visit our ${social.name} page`}
-                      className="group flex flex-col items-center"
-                      variants={bounce}
-                      whileHover="hover"
-                      whileTap="tap"
-                      custom={index}
-                    >
-                      <div className="flex items-center justify-center w-12 h-12 bg-white/10 group-hover:bg-white/20 rounded-lg backdrop-blur-sm transition-all duration-300 ease-in-out mb-2 border border-gray-700/50 shadow-sm group-hover:shadow-blue-500/10 group-hover:shadow-md">
-                        <img
-                          src={social.icon}
-                          alt=""
-                          width={20}
-                          height={20}
-                          className="filter brightness-0 invert opacity-90"
-                          aria-hidden="true"
-                        />
-                      </div>
-                      <span className="text-xs text-gray-300 group-hover:text-gray-200 transition-colors duration-200">
-                        {social.name}
-                      </span>
-                    </motion.a>
-                  ))}
-                </motion.div>
-              </div>
-
-              <motion.div
-                className="bg-gray-800 p-5 md:p-6 border-t border-gray-700/50"
-                variants={fadeIn}
-                initial="hidden"
-                animate="visible"
-                transition={{ delay: 0.4 }}
-              >
-                <h3 className="text-xs uppercase font-bold text-gray-300 tracking-wider mb-2">
-                  Follow Our Progress
-                </h3>
-                <p className="text-xs text-gray-400 leading-relaxed">
-                  Stay updated with our latest developments and educational
-                  initiatives.
-                </p>
-              </motion.div>
+                  <div className="w-10 h-10 flex items-center justify-center mb-1">
+                    <img
+                      src={social.icon}
+                      alt=""
+                      width={28}
+                      height={28}
+                      className="filter brightness-0 dark:invert opacity-90"
+                      aria-hidden="true"
+                    />
+                  </div>
+                  <span className="text-xs text-gray-700 dark:text-gray-300 font-medium text-center">
+                    {social.name}
+                  </span>
+                </motion.a>
+              ))}
             </motion.div>
-          </div>
-        </section>
-      </div>
+          </motion.section>
+
+          {/* Matrix Chat */}
+          <motion.section
+            className="my-16"
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, amount: 0.2 }}
+            variants={slideInBottom}
+          >
+            <div className="bg-white dark:bg-gray-900 shadow-lg rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
+              <div className="flex flex-col md:flex-row items-center gap-6">
+                <div className="flex-shrink-0">
+                  <div className="w-16 h-16 bg-red-100 dark:bg-red-300 flex items-center justify-center rounded-lg border border-red-100 dark:border-none">
+                    <img
+                      src="assets/Icons/chat.svg"
+                      alt="Chat Icon"
+                      className="h-8 w-8"
+                    />
+                  </div>
+                </div>
+                <div className="flex-grow text-center md:text-left">
+                  <h3 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2 font-[Caveat]">
+                    Join Our Matrix Chat
+                  </h3>
+                  <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+                    Connect with our community in real-time. Get help, share
+                    ideas, and collaborate with fellow educators and developers.
+                  </p>
+                </div>
+                <div className="flex-shrink-0">
+                  <Link
+                    to="matrix"
+                    className="inline-block px-6 py-3 bg-red-600 dark:bg-red-500 text-white rounded-full hover:bg-red-700 dark:hover:bg-red-400 transition-colors font-medium whitespace-nowrap"
+                  >
+                    Join Chat →
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </motion.section>
+        </div>
+      </main>
       <Footer />
-    </>
+    </div>
   );
 };
 
-interface ContactMethodProps {
-  iconSrc: string;
-  title: string;
-  description: React.ReactNode;
-}
-
-const ContactMethod: React.FC<ContactMethodProps> = ({
-  iconSrc,
-  title,
-  description,
-}) => (
-  <motion.div className="flex items-start" variants={subtleRise}>
-    <motion.div
-      className="flex-shrink-0 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-blue-600 dark:text-blue-400 border border-blue-100 dark:border-blue-500/30"
-      whileHover={{ scale: 1.1 }}
-      transition={{ type: 'spring', stiffness: 400, damping: 10 }}
-    >
-      <img src={iconSrc} alt="" className="h-5 w-5" aria-hidden="true" />
-    </motion.div>
-    <div className="ml-4">
-      <h3 className="text-sm font-bold text-gray-800 dark:text-gray-200 uppercase tracking-wider">
-        {title}
-      </h3>
-      {description}
-    </div>
-  </motion.div>
-);
-
 export default ContactUs;