diff --git a/src/pages/About/ContactUs.tsx b/src/pages/About/ContactUs.tsx
index 8c9300d9..29b566ed 100644
--- a/src/pages/About/ContactUs.tsx
+++ b/src/pages/About/ContactUs.tsx
@@ -5,270 +5,188 @@ import Header from '@/sections/Header';
 import Footer from '@/sections/Footer';
 import { Link } from 'react-router-dom';
 import {
-  fadeIn,
-  slideInLeft,
-  slideInRight,
-  slideInBottom,
-  bounce,
-  staggerContainer,
-  subtleRise,
+  simpleFadeIn,
+  container,
+  item,
+  testimonialHeading,
+  decorativeElement,
   dividerVariants,
 } from '@/styles/Animations';
 
 const ContactUs: React.FC = () => {
   return (
-    <>
+    <div>
       <Header />
-      <div className="min-h-screen bg-gray-50">
-        {/* Hero Section */}
-        <motion.section
-          variants={fadeIn}
-          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"
-        >
-          <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">
-            <motion.div
-              className="max-w-3xl"
-              variants={slideInBottom}
+      <section className="py-24 px-4 bg-white">
+        <div className="container mx-auto max-w-7xl">
+          {/* Section header with animations */}
+          <div className="text-center mb-16">
+            <motion.h2
+              className="text-4xl md:text-5xl font-bold text-gray-900 mb-4"
               initial="hidden"
-              animate="visible"
+              whileInView="visible"
+              viewport={{ once: true }}
+              variants={testimonialHeading}
             >
-              <motion.h1
-                className="text-4xl md:text-5xl font-bold text-white mb-4 tracking-tight"
-                variants={slideInBottom}
+              <motion.span
+                className="text-blue-500 font-Pacifico"
+                variants={decorativeElement}
                 initial="hidden"
-                animate="visible"
+                whileInView="visible"
+                viewport={{ once: true }}
               >
-                Contact <span className="text-blue-200">Sugar Labs</span>
-              </motion.h1>
+                Get{' '}
+              </motion.span>
+              In Touch
+            </motion.h2>
+
+            <div className="flex justify-center">
               <motion.div
-                className="w-20 h-1 bg-blue-400 mb-6"
-                variants={dividerVariants}
+                className="h-1 bg-blue-500 mb-8"
                 initial="hidden"
-                animate="visible"
+                whileInView="visible"
+                viewport={{ once: true }}
+                variants={dividerVariants}
               ></motion.div>
-              <motion.p
-                className="text-base md:text-lg text-gray-200 max-w-2xl leading-relaxed"
-                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.
-              </motion.p>
-            </motion.div>
-          </div>
-        </motion.section>
+            </div>
 
-        {/* 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 rounded-xl shadow-md overflow-hidden border border-gray-200 transition-shadow duration-300 hover:shadow-lg"
-              variants={slideInLeft}
+            <motion.p
+              className="text-lg text-gray-600 max-w-3xl mx-auto"
               initial="hidden"
-              animate="visible"
-              whileHover={{ y: -5 }}
-              transition={{ duration: 0.3 }}
+              whileInView="visible"
+              viewport={{ once: true }}
+              variants={simpleFadeIn}
             >
-              <div className="p-6 md:p-8 lg:p-10">
-                <motion.h2
-                  className="text-2xl font-bold text-gray-800 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.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 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>
-                    }
-                  />
-
-                  {/* Phone */}
-                  <ContactMethod
-                    iconSrc="assets/Icons/phone.svg"
-                    title="By Phone"
-                    description={
-                      <a
-                        href="tel:+16177024088"
-                        className="mt-2 text-gray-600 hover:text-blue-600 transition duration-200 block text-sm"
-                      >
-                        +1 (617) 702-4088
-                      </a>
-                    }
-                  />
-
-                  {/* Email */}
-                  <ContactMethod
-                    iconSrc="assets/Icons/email.svg"
-                    title="By Email"
-                    description={
-                      <a
-                        href="mailto:info@sugarlabs.org"
-                        className="mt-2 text-gray-600 hover:text-blue-600 transition duration-200 block text-sm"
-                      >
-                        info@sugarlabs.org
-                      </a>
-                    }
-                  />
+              Get in touch with the Sugar Labs community. We're here to help and
+              answer any questions you might have.
+            </motion.p>
+          </div>
 
-                  {/* Matrix Chat */}
-                  <ContactMethod
-                    iconSrc="assets/Icons/chat.svg"
-                    title="Via Matrix Chat"
-                    description={
-                      <Link
-                        to="matrix"
-                        className="mt-2 text-gray-600 hover:text-blue-600 transition duration-200 block text-sm"
-                      >
-                        Go to Matrix Chat
-                      </Link>
-                    }
-                  />
-                </motion.div>
-              </div>
-            </motion.div>
+          {/* Contact Methods Grid */}
+          <motion.div
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16"
+            variants={container}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, amount: 0.1 }}
+          >
+            {/* Mail Address */}
+            <ContactMethod
+              iconSrc="assets/Icons/mail.svg"
+              title="By Mail"
+              description={
+                <address className="mt-3 not-italic text-gray-600 leading-relaxed text-sm">
+                  Sugar Labs
+                  <br />
+                  2028 E Ben White Blvd <strong>STE 240 PMB 1271</strong>
+                  <br />
+                  AUSTIN, TX 78741
+                  <br />
+                  USA
+                </address>
+              }
+            />
 
-            {/* 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 }}
-            >
-              <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"
+            {/* Phone */}
+            <ContactMethod
+              iconSrc="assets/Icons/phone.svg"
+              title="By Phone"
+              description={
+                <a
+                  href="tel:+16177024088"
+                  className="mt-3 text-gray-600 hover:text-blue-500 transition duration-300 block text-sm font-medium"
                 >
-                  <span className="w-1.5 h-6 bg-blue-500 mr-3 rounded-sm"></span>
-                  Connect With The Community
-                </motion.h2>
+                  +1 (617) 702-4088
+                </a>
+              }
+            />
 
-                <motion.p
-                  className="text-gray-300 text-sm leading-relaxed mb-8"
-                  variants={fadeIn}
-                  initial="hidden"
-                  animate="visible"
-                  transition={{ delay: 0.2 }}
+            {/* Email */}
+            <ContactMethod
+              iconSrc="assets/Icons/email.svg"
+              title="By Email"
+              description={
+                <a
+                  href="mailto:info@sugarlabs.org"
+                  className="mt-3 text-gray-600 hover:text-blue-500 transition duration-300 block text-sm font-medium"
                 >
-                  Join our global community of educators, developers, and
-                  learners who are passionate about bringing educational
-                  software to children around the world.
-                </motion.p>
+                  info@sugarlabs.org
+                </a>
+              }
+            />
 
-                <motion.div
-                  className="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-6"
-                  variants={staggerContainer}
-                  initial="hidden"
-                  animate="visible"
+            {/* Matrix Chat */}
+            <ContactMethod
+              iconSrc="assets/Icons/chat.svg"
+              title="Via Matrix Chat"
+              description={
+                <Link
+                  to="matrix"
+                  className="mt-3 text-gray-600 hover:text-blue-500 transition duration-300 block text-sm font-medium"
                 >
-                  {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>
+                  Go to Matrix Chat
+                </Link>
+              }
+            />
+          </motion.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 }}
+          {/* Social Connect Section */}
+          <motion.div
+            className="text-center mb-12"
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true }}
+            variants={simpleFadeIn}
+          >
+            <h3 className="text-2xl font-bold text-gray-900 mb-4">
+              Connect With The Community
+            </h3>
+            <p className="text-gray-600 max-w-2xl mx-auto">
+              Join our global community of educators, developers, and learners
+              who are passionate about bringing educational software to children
+              around the world.
+            </p>
+          </motion.div>
+
+          <motion.div
+            className="grid grid-cols-4 gap-6 max-w-4xl mx-auto"
+            variants={container}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, amount: 0.1 }}
+          >
+            {socialLinks.map((social) => (
+              <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 p-6 rounded-lg bg-white shadow-md hover:shadow-lg transition-all duration-300 border border-gray-200 hover:border-blue-300"
+                variants={item}
+                whileHover="hover"
+                whileTap="tap"
               >
-                <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>
-            </motion.div>
-          </div>
-        </section>
-      </div>
+                <div className="flex items-center justify-center w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg mb-3 group-hover:scale-110 transition-transform duration-300">
+                  <img
+                    src={social.icon}
+                    alt=""
+                    width={24}
+                    height={24}
+                    className="filter brightness-0 invert"
+                    aria-hidden="true"
+                  />
+                </div>
+                <span className="text-sm font-medium text-gray-700 group-hover:text-blue-600 transition-colors duration-300 text-center">
+                  {social.name}
+                </span>
+              </motion.a>
+            ))}
+          </motion.div>
+        </div>
+      </section>
       <Footer />
-    </>
+    </div>
   );
 };
 
@@ -283,19 +201,34 @@ const ContactMethod: React.FC<ContactMethodProps> = ({
   title,
   description,
 }) => (
-  <motion.div className="flex items-start" variants={subtleRise}>
-    <motion.div
-      className="flex-shrink-0 p-3 bg-blue-50 rounded-lg text-blue-600 border border-blue-100"
-      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 uppercase tracking-wider">
-        {title}
-      </h3>
-      {description}
+  <motion.div
+    className="flex flex-col h-full bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300"
+    variants={item}
+    whileHover="hover"
+  >
+    <div className="flex justify-center pt-8 pb-4 relative">
+      <div className="absolute top-0 left-0 w-1 h-full bg-blue-500"></div>
+      <div className="w-16 h-16 rounded-full overflow-hidden border-4 border-white shadow-md bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
+        <img
+          src={iconSrc}
+          alt=""
+          className="h-8 w-8 filter brightness-0 invert"
+          aria-hidden="true"
+        />
+      </div>
+    </div>
+
+    <div className="flex flex-col flex-grow p-5 gap-3">
+      <div className="text-center">
+        <h3 className="text-xl font-bold text-gray-900">{title}</h3>
+      </div>
+
+      <div className="w-16 h-0.5 bg-gray-200 mx-auto"></div>
+      <div className="flex-grow">
+        <div className="text-gray-600 text-sm leading-relaxed">
+          {description}
+        </div>
+      </div>
     </div>
   </motion.div>
 );