diff --git a/src/app/page.tsx b/src/app/page.tsx
index bbbf5b8..13273a3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,9 +10,51 @@ import TestimonialCardTwelve from '@/components/sections/testimonial/Testimonial
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { Zap, Users, Award, Handshake } from "lucide-react";
+import { Zap, Users, Award, Handshake, Github, Linkedin, Twitter } from "lucide-react";
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [flippedCards, setFlippedCards] = useState<{[key: string]: boolean}>({});
+
+  const toggleFlip = (memberId: string) => {
+    setFlippedCards(prev => ({
+      ...prev,
+      [memberId]: !prev[memberId]
+    }));
+  };
+
+  // Team members with social links
+  const teamMembers = [
+    {
+      id: "1",      name: "Alex Johnson",      role: "Club President",      imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg?_wi=1",      imageAlt: "Alex Johnson, Club President",      socials: [
+        { icon: Github, href: "https://github.com/alexjohnson", label: "GitHub" },
+        { icon: Linkedin, href: "https://linkedin.com/in/alexjohnson", label: "LinkedIn" },
+        { icon: Twitter, href: "https://twitter.com/alexjohnson", label: "Twitter" }
+      ]
+    },
+    {
+      id: "2",      name: "Sarah Chen",      role: "VP of Projects",      imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg?_wi=2",      imageAlt: "Sarah Chen, VP of Projects",      socials: [
+        { icon: Github, href: "https://github.com/sarahchen", label: "GitHub" },
+        { icon: Linkedin, href: "https://linkedin.com/in/sarahchen", label: "LinkedIn" },
+        { icon: Twitter, href: "https://twitter.com/sarahchen", label: "Twitter" }
+      ]
+    },
+    {
+      id: "3",      name: "Marcus Williams",      role: "Tech Lead",      imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg?_wi=3",      imageAlt: "Marcus Williams, Tech Lead",      socials: [
+        { icon: Github, href: "https://github.com/marcuswilliams", label: "GitHub" },
+        { icon: Linkedin, href: "https://linkedin.com/in/marcuswilliams", label: "LinkedIn" },
+        { icon: Twitter, href: "https://twitter.com/marcuswilliams", label: "Twitter" }
+      ]
+    },
+    {
+      id: "4",      name: "Emily Rodriguez",      role: "Community Manager",      imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg?_wi=4",      imageAlt: "Emily Rodriguez, Community Manager",      socials: [
+        { icon: Github, href: "https://github.com/emilyrodriguez", label: "GitHub" },
+        { icon: Linkedin, href: "https://linkedin.com/in/emilyrodriguez", label: "LinkedIn" },
+        { icon: Twitter, href: "https://twitter.com/emilyrodriguez", label: "Twitter" }
+      ]
+    }
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -96,30 +138,88 @@ export default function LandingPage() {
       </div>
 
       <div id="team" data-section="team">
-        <TeamCardSix
-          tag="Leadership"
-          tagIcon={Users}
-          title="Meet Our Team"
-          description="The passionate individuals driving innovation and mentorship within CodeClub."
-          members={[
-            {
-              id: "1",              name: "Alex Johnson",              role: "Club President",              imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg?_wi=1",              imageAlt: "Alex Johnson, Club President"
-            },
-            {
-              id: "2",              name: "Sarah Chen",              role: "VP of Projects",              imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg?_wi=2",              imageAlt: "Sarah Chen, VP of Projects"
-            },
-            {
-              id: "3",              name: "Marcus Williams",              role: "Tech Lead",              imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg?_wi=3",              imageAlt: "Marcus Williams, Tech Lead"
-            },
-            {
-              id: "4",              name: "Emily Rodriguez",              role: "Community Manager",              imageSrc: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg?_wi=4",              imageAlt: "Emily Rodriguez, Community Manager"
-            }
-          ]}
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={true}
-        />
+        <div className="w-full">
+          <div className="mx-auto w-content-width px-vw-1_5">
+            <div className="flex flex-col gap-vw-2 mb-vw-3">
+              <div>
+                <div className="inline-flex items-center gap-2 rounded-full bg-accent/10 px-4 py-2 mb-4">
+                  <Users className="w-4 h-4" />
+                  <span className="text-sm font-medium text-foreground/70">Leadership</span>
+                </div>
+                <h2 className="text-5xl font-medium text-foreground mb-4">Meet Our Team</h2>
+                <p className="text-foreground/70">The passionate individuals driving innovation and mentorship within CodeClub.</p>
+              </div>
+            </div>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              {teamMembers.map((member) => {
+                const isFlipped = flippedCards[member.id];
+                return (
+                  <div key={member.id} className="h-96">
+                    <div
+                      className="relative w-full h-full cursor-pointer transition-transform duration-500 transform-gpu"
+                      style={{
+                        transformStyle: 'preserve-3d',
+                        transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)'
+                      }}
+                      onClick={() => toggleFlip(member.id)}
+                    >
+                      {/* Front side - Profile */}
+                      <div
+                        className="absolute w-full h-full rounded-lg overflow-hidden bg-card border border-accent/20 flex flex-col items-end justify-end p-6 shadow-lg"
+                        style={{
+                          backfaceVisibility: 'hidden'
+                        }}
+                      >
+                        <img
+                          src={member.imageSrc}
+                          alt={member.imageAlt}
+                          className="absolute inset-0 w-full h-full object-cover"
+                        />
+                        <div className="absolute inset-0 bg-gradient-to-t from-black via-black/30 to-transparent" />
+                        <div className="relative z-10">
+                          <h3 className="text-xl font-semibold text-white">{member.name}</h3>
+                          <p className="text-sm text-white/80">{member.role}</p>
+                        </div>
+                      </div>
+
+                      {/* Back side - Social Links */}
+                      <div
+                        className="absolute w-full h-full rounded-lg overflow-hidden bg-primary-cta border border-accent/20 flex flex-col items-center justify-center p-6 shadow-lg"
+                        style={{
+                          backfaceVisibility: 'hidden',
+                          transform: 'rotateY(180deg)'
+                        }}
+                      >
+                        <div className="text-center mb-6">
+                          <p className="text-white font-medium text-lg">Connect</p>
+                        </div>
+                        <div className="flex flex-col gap-4 w-full">
+                          {member.socials.map((social) => {
+                            const Icon = social.icon;
+                            return (
+                              <a
+                                key={social.label}
+                                href={social.href}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="flex items-center justify-center gap-3 px-4 py-3 rounded-lg bg-white/10 hover:bg-white/20 text-white transition-colors"
+                                title={social.label}
+                              >
+                                <Icon className="w-5 h-5" />
+                                <span className="text-sm font-medium">{social.label}</span>
+                              </a>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="testimonials" data-section="testimonials">