diff --git a/public/fonts/Montserrat-ExtraBold.ttf b/public/fonts/Montserrat-ExtraBold.ttf
new file mode 100644
index 0000000..476ec30
Binary files /dev/null and b/public/fonts/Montserrat-ExtraBold.ttf differ
diff --git a/src/components/About.tsx b/src/components/About.tsx
deleted file mode 100644
index 088a76c..0000000
--- a/src/components/About.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import { useState } from "react";
-import BouncingText from "./ui/BouncingText";
-import { IconCaretUp, IconCaretDown } from "@tabler/icons-react";
-import AnimatedTestimonials from "./ui/Animated-testimonials";
-
-
-export default function About() {
-  const [storyOpen, setStoryOpen] = useState(true);
-  const [selectedTeam, setSelectedTeam] = useState<string>("President");
-
-  const teams = [
-    {
-      name: "President",
-      members: [
-        { name: "Brittney Chong", role: "Prez", img: "/execs/Brittney.jpg", 
-          bio: "My name is Brittney and I love to climb with my cat. I love making new friends let’s climb together (lead, boulder and even toprope)!" },
-      ]
-    },
-    {
-      name: "Communications",
-      members: [
-        { name: "Caleb Chen", role: "VP", img: "/execs/comms/Caleb.jpg", 
-          bio: "Hey everyone! I'm Caleb, I've been climbing for almost 2 years now. I love slopers, but slabs always humble me. Can't wait to see you all on climb nights!"},
-        { name: "Carina Chan", role: "", img: "/execs/comms/Carina.jpg", 
-          bio: "Hi! I'm Carina and I'm in fourth year studying Psych and MIT. I love being outdoors, whether I'm climbing or sk8ing. I'm all about capturing fun moments and turning them into creativer photos and designs to share the club's best adventures!" },
-        { name: "Jiajun Chen", role: "", img: "/execs/comms/Jiajun.jpg", 
-          bio: "Hi, I’m Jiajun — a third-year Medical Sciences student specializing in Physiology and Pharmacology. I’ve been climbing for a little over a year, mostly bouldering. Outside the gym, I’m into photography. Currently working on making it through a session without getting injured." },
-        { name: "Kayleigh Gerritsen", role: "", img: "/execs/comms/Kayleigh.jpg", 
-          bio: "Hi WCC! I'm a third year student specializing in biology. I love anything outdoorsy, going on hikes, and of course climbing! Bouldering specifically helps me release stress while also exercising both my body and mind. Aside from that I also love formula one, concerts, and exploring new countires :)" },
-      ]
-    },
-    {
-      name: "Events",
-      members: [
-        { name: "Sophie DiCiacca", role: "VP", img: "/execs/events/Sophie.jpg", 
-          bio: "Hey, my name is Sophie and I'm a second year in accounting. I used to be a competitive climber and coach!" },
-        { name: "Luna Olin", role: "", img: "/execs/events/Luna.jpg", 
-          bio: "Hi! My name is Luna Olin. I am currently a second year student studying Geography and Environment. I love spending time outdoors, going to concerts, and hanging out with my friends!" },
-        { name: "Charlie Song", role: "", img: "/execs/events/Charlie.jpg", 
-          bio: "Hey! I'm Charlie, I'm a 2nd year student studying finance. I've been bouldering for about 2 years now and I love crimps and dynos. I love spending time with friends, going outside, and snowboarding. I can't wait to meet you all at Junction!" },
-      ]
-    },
-    {
-      name: "Finance",
-      members: [
-        { name: "Isa Dahya", role: "VP", img: "/execs/finance/Isa.jpg", bio: "Hi! I'm Isa and I'm in 4th year HSP physharm. Surprisingly I also like climbing especially indoor bouldering. I got 2 pet cats and I also enjoy biking. If you ever need any med sci advice feel free to contact :)" },
-        { name: "Noah Medland", role: "VP", img: "/execs/finance/Noah.jpg", 
-          bio: "Hey guys, I'm a third-year finance student with a passion for adventure. Outside the classroom, I thrive on mountain climbing, skydiving, and bungee jumping - activities that fuel my drive for challenge, focus, and resilience." },
-        { name: "Jason Too", role: "VP", img: "/execs/finance/Jason.jpg",
-          bio: "Hi, my name is Jason and I’m a 2nd year finance student. I have been climbing for a year and I now live for it. I also play volleyball and a bit of soccer. My home is the climbing gym and if you see me say hi!"
-        }
-      ]
-    },
-    {
-      name: "Sponsorship",
-      members: [
-        { name: "Marshall Howard", role: "", img: "/execs/sponsor/Marshall.jpg", 
-          bio: "Hi! I'm Marshall and I'm a second year psychology major with a minor in ethics! I've been climbing for about 3-ish years now, and it's one of my fav ways to pass the time! Aside from climbing, I also like to train triathalon, read, and binge watch shows!" },
-        { name: "Jeremy Dai", role: "", img: "/execs/sponsor/Jeremy.jpg", 
-          bio: "Hey! I'm Jeremy, a second year in med sci. I'm relatively new to climbing, having just over a year under my belt, but I'm already hooked. Apart from climbing, I enjoy folding origami and sharing what I make on my Instagram account. Hope to see you on the wall!" },
-      ]
-    },
-    {
-      name: "Web Devs",
-      members: [
-        { name: "Ethan Wakefield", role: "VP", img: "/execs/web/Ethan.jpg", 
-          bio: "Hey! I’m Ethan, a 4th year computer science student and the VP of web development. I’ve been climbing consistently for a few months and I’m completely hooked. I also enjoy going to the gym, playing games, watching movies, and sleeping. Looking forward to meeting new faces and climbing with yall!" },
-        { name: "Jenni Shi", role: "", img: "/execs/web/Jen.jpg", 
-          bio: "Hey guys! I'm Jen, a 4th-year Software Engineering student. I've been bouldering for around 2 years, but I dabble in top rope occasionally. You’ll probably catch me eating, thrifting, or crimping some wall on campus >:)" },
-        { name: "Ryhana Williams", role: "", img: "/execs/web/Ryhana.jpg", 
-          bio: "Hi! My name is Ryhana. I'm in my 2nd year of cs and I love to go thrifting, stay active and try new cafes." },
-      ]
-    },
-  ];
-
-  return (
-    <section id="about">
-      <div className="mb-12 flex flex-col items-center justify-start bg-[#10091e] text-gray-200 p-6">
-        
-        <h1 className="md:ms-4 text-3xl md:text-5xl font-bold mb-6 text-purple-300 text-center md:pt-30"> <BouncingText text="About Us" /> </h1>
-
-        {/* Mission */}
-        <h2
-          className="text-2xl font-semibold text-purple-200 mb-3 cursor-pointer flex items-center"
-          onClick={() => setStoryOpen(!storyOpen)}
-        >
-          Our Story 
-          {storyOpen ? (
-            <IconCaretUp className="ml-2" size={20} />
-          ) : (
-            <IconCaretDown className="ml-2" size={20} />
-          )}
-        </h2>
-
-   {storyOpen && (
-    <div className="mt-6 w-full flex flex-col md:flex-row items-center md:items-start md:space-x-8 max-w-5xl mx-auto px-4">
-      {/* Text */}
-      <div className="flex-1">
-        <p className="max-w-2xl mb-4 text-sm">
-          Hey Climbers! We’re so excited to welcome you to another incredible year with the Western Climbing Club! 
-          Since our very first meet-up in 2017, this community has grown into something truly special — all because of you. 
-          Your passion, your encouragement, and your adventurous spirit are what make this club feel like home. 
-        </p>
-        <p className="max-w-2xl mb-4 text-sm">
-          Over the past months, our exec team has been busy behind the scenes making this year the most unforgettable one yet. 
-          From friendly competitions and outdoor trips to skill-building sessions and late-night bouldering hangs, 
-          everything we’ve planned is here to support you — to help you push your limits, grow your skills, and connect with others who share your love for climbing. 
-        </p>
-        <p className="max-w-2xl mb-4 text-sm">
-          Whether you’ve been with us since our first rope nights or you’re just stepping onto the wall for the first time, 
-          we want this to be a place where you feel encouraged to challenge yourself, try new things, and share in the joy of reaching new heights. 
-          We can’t wait to see the memories we’ll make together this year. 
-          Here’s to another season of climbing, laughter, and adventure. 
-        </p>
-        <p className="max-w-2xl mb-4 text-sm">
-          – Western Climbing Club Team
-        </p>
-      </div>
-
-      {/* Team Photo */}
-      <div className="flex-1 flex justify-center mt-6 md:mt-0">
-        <img
-          src="/execs/team.jpg"
-          alt="Our Team"
-          className="rounded-2xl shadow-lg max-w-full h-auto"
-        />
-      </div>
-    </div>
-  )}
-
-        {/*Nav*/}
-        <div className="mt-6 w-full">
-          <div className="flex flex-wrap justify-center gap-2 md:space-x-4">
-            {teams.map((team) => (
-              <button
-          key={team.name}
-          className={`px-4 py-2 rounded-md transition-colors duration-200 ${
-            selectedTeam === team.name ? "bg-purple-300 text-white" : "bg-gray-700 text-gray-200"
-          }`}
-          onClick={() => setSelectedTeam(team.name)}
-              >
-          {team.name}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Team display */}
-        <div className="space-y-12 w-full max-w-6xl">
-          {teams
-            .filter((team) => team.name === selectedTeam) // show selected team
-            .map((team) => (
-              <div key={team.name} className="flex flex-col items-center">
-
-                <AnimatedTestimonials
-                  testimonials={team.members.map((member) => ({
-                    quote: member.bio,
-                    name: member.name,
-                    designation: member.role,
-                    src: member.img,
-                  }))}
-                />
-              </div>
-            ))}
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx
index f64f169..679137f 100644
--- a/src/components/Contact.tsx
+++ b/src/components/Contact.tsx
@@ -49,27 +49,40 @@ export default function Contact() {
   ];
 
   return (
-    <section id="contact">
-      <div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-bl from-[#10091e] via-[#1a0d2e] to-[#0f0820] text-gray-800 dark:text-gray-200 p-6 relative overflow-hidden">
-        <h1 className="text-center text-3xl md:text-5xl font-bold mb-6 text-purple-300">
-          <BouncingText text="Contact Us" />
-        </h1>
+    <section id="contact" className="relative bg-[#0a0513] overflow-hidden">
+      <div className="min-h-screen flex flex-col items-center justify-center text-gray-800 dark:text-gray-200 px-6 py-32 relative">
+        {/* Header Section */}
+        <div className="text-center mb-16 space-y-6 relative z-10">
+          <div className="inline-block">
+            <span className="text-xs md:text-sm font-bold text-blue-300 uppercase tracking-widest bg-blue-500/10 px-5 py-2.5 rounded-full border border-blue-500/20 shadow-lg shadow-blue-500/10">
+              Get in Touch
+            </span>
+          </div>
+          
+          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-fuchsia-300">
+            <BouncingText text="Contact Us" />
+          </h1>
+          
+          <p className="text-base md:text-lg text-gray-300 max-w-2xl mx-auto leading-relaxed">
+            Have questions? We're here to help! Reach out through any of the channels below.
+          </p>
+        </div>
         
         {/* Contact Information */}
-        <div className="max-w-4xl w-full space-y-8 relative z-10">
+        <div className="max-w-5xl w-full space-y-6 relative z-10">
           {/* General Questions */}
-          <div className="bg-gray-800/30 backdrop-blur-sm rounded-2xl p-6 border border-purple-300/20 hover:border-purple-400/40 transition-all duration-300 hover:shadow-2xl hover:shadow-purple-500/10 group">
+          <div className="bg-gradient-to-br from-gray-800/40 to-gray-900/40 backdrop-blur-md rounded-3xl p-8 border border-purple-400/30 hover:border-purple-400/50 transition-all duration-300 hover:shadow-2xl hover:shadow-purple-500/20 group hover:-translate-y-1">
             <div className="flex items-center mb-4">
-              <div className="p-2 rounded-lg bg-purple-500/20 mr-4 group-hover:bg-purple-500/30 transition-colors duration-300">
-                <IconMail className="text-purple-300" size={24} />
+              <div className="p-3 rounded-xl bg-gradient-to-br from-purple-500/30 to-fuchsia-500/20 mr-4 group-hover:from-purple-500/40 group-hover:to-fuchsia-500/30 transition-all duration-300 shadow-lg">
+                <IconMail className="text-purple-200" size={28} />
               </div>
-              <h2 className="text-xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-purple-200 to-fuchsia-200">General Questions</h2>
+              <h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-200 to-fuchsia-200">General Questions</h2>
             </div>
-            <p className="text-gray-200 leading-relaxed">
+            <p className="text-gray-200 leading-relaxed text-lg">
               For general questions about the club, events, or membership, reach out to us at{" "}
               <a 
                 href="mailto:climbing.club@westernusc.ca" 
-                className="text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-fuchsia-300 hover:from-fuchsia-300 hover:to-purple-300 transition-all duration-300 font-medium underline decoration-purple-400/50 hover:decoration-purple-300"
+                className="text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-fuchsia-300 hover:from-fuchsia-300 hover:to-purple-300 transition-all duration-300 font-semibold underline decoration-purple-400/50 hover:decoration-purple-300 decoration-2"
               >
                 climbing.club@westernusc.ca
               </a>
@@ -77,20 +90,20 @@ export default function Contact() {
           </div>
 
           {/* Instagram Contact */}
-          <div className="bg-gray-800/30 backdrop-blur-sm rounded-2xl p-6 border border-purple-300/20 hover:border-purple-400/40 transition-all duration-300 hover:shadow-2xl hover:shadow-purple-500/10 group">
+          <div className="bg-gradient-to-br from-gray-800/40 to-gray-900/40 backdrop-blur-md rounded-3xl p-8 border border-blue-400/30 hover:border-blue-400/50 transition-all duration-300 hover:shadow-2xl hover:shadow-blue-500/20 group hover:-translate-y-1">
             <div className="flex items-center mb-4">
-              <div className="p-2 rounded-lg bg-purple-500/20 mr-4 group-hover:bg-purple-500/30 transition-colors duration-300">
-                <IconMessageCircle className="text-purple-300" size={24} />
+              <div className="p-3 rounded-xl bg-gradient-to-br from-blue-500/30 to-purple-500/20 mr-4 group-hover:from-blue-500/40 group-hover:to-purple-500/30 transition-all duration-300 shadow-lg">
+                <IconMessageCircle className="text-blue-200" size={28} />
               </div>
-              <h2 className="text-xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-purple-200 to-fuchsia-200">Quick Contact</h2>
+              <h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-200 to-purple-200">Quick Contact</h2>
             </div>
-            <p className="text-gray-200 leading-relaxed">
+            <p className="text-gray-200 leading-relaxed text-lg">
               For quick questions and updates, contact us through our Instagram DMs at{" "}
               <a 
                 href="https://www.instagram.com/westernclimbingclub/" 
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-fuchsia-300 hover:from-fuchsia-300 hover:to-purple-300 transition-all duration-300 font-medium underline decoration-purple-400/50 hover:decoration-purple-300"
+                className="text-transparent bg-clip-text bg-gradient-to-r from-blue-300 to-purple-300 hover:from-purple-300 hover:to-blue-300 transition-all duration-300 font-semibold underline decoration-blue-400/50 hover:decoration-blue-300 decoration-2"
               >
                 @westernclimbingclub
               </a>
@@ -98,29 +111,29 @@ export default function Contact() {
           </div>
 
           {/* FAQ Section */}
-          <div className="bg-gray-800/30 backdrop-blur-sm rounded-2xl p-6 border border-purple-300/20 hover:border-purple-400/40 transition-all duration-300 hover:shadow-2xl hover:shadow-purple-500/10">
-            <div className="flex items-center mb-6">
-              <div className="p-2 rounded-lg bg-purple-500/20 mr-4">
-                <IconHelp className="text-purple-300" size={24} />
+          <div className="bg-gradient-to-br from-gray-800/40 to-gray-900/40 backdrop-blur-md rounded-3xl p-8 border border-fuchsia-400/30 hover:border-fuchsia-400/50 transition-all duration-300 hover:shadow-2xl hover:shadow-fuchsia-500/20">
+            <div className="flex items-center mb-8">
+              <div className="p-3 rounded-xl bg-gradient-to-br from-fuchsia-500/30 to-pink-500/20 mr-4 shadow-lg">
+                <IconHelp className="text-fuchsia-200" size={28} />
               </div>
-              <h2 className="text-2xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-purple-200 to-fuchsia-200">Frequently Asked Questions</h2>
+              <h2 className="text-2xl md:text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-200 to-pink-200">Frequently Asked Questions</h2>
             </div>
             
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-min">
               {faqData.map((item, index) => (
-                <div key={index} className="bg-gray-700/20 backdrop-blur-sm rounded-xl border border-purple-300/10 hover:border-purple-300/30 self-start transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/10">
+                <div key={index} className="bg-gradient-to-br from-gray-700/30 to-gray-800/30 backdrop-blur-sm rounded-2xl border border-purple-300/20 hover:border-purple-300/40 self-start transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/10 overflow-hidden">
                   <button
                     onClick={() => toggleItem(index)}
-                    className="w-full px-4 py-3 text-left flex items-center justify-between hover:bg-gray-600/20 transition-colors duration-200 rounded-xl group"
+                    className="w-full px-5 py-4 text-left flex items-center justify-between hover:bg-gray-600/30 transition-colors duration-200 group"
                   >
-                    <span className="text-purple-200 font-medium text-sm md:text-base group-hover:text-purple-100 transition-colors duration-200">
+                    <span className="text-purple-100 font-semibold text-sm md:text-base group-hover:text-white transition-colors duration-200 pr-2">
                       {item.question}
                     </span>
                     <div className="ml-3 flex-shrink-0">
                       {openItems.includes(index) ? (
-                        <IconMinus className="text-purple-300 group-hover:text-purple-200 transition-all duration-300 ease-in-out transform group-hover:scale-110" size={20} />
+                        <IconMinus className="text-purple-300 group-hover:text-purple-200 transition-all duration-300 ease-in-out transform group-hover:scale-110" size={22} />
                       ) : (
-                        <IconPlus className="text-purple-300 group-hover:text-purple-200 transition-all duration-300 ease-in-out transform group-hover:scale-110" size={20} />
+                        <IconPlus className="text-purple-300 group-hover:text-purple-200 transition-all duration-300 ease-in-out transform group-hover:scale-110" size={22} />
                       )}
                     </div>
                   </button>
@@ -131,7 +144,7 @@ export default function Contact() {
                         : 'max-h-0 opacity-0'
                     }`}
                   >
-                    <div className="px-4 pb-4 pt-2">
+                    <div className="px-5 pb-5 pt-1">
                       <p className="text-gray-200 text-sm md:text-base leading-relaxed">
                         {item.answer}
                       </p>
@@ -143,33 +156,33 @@ export default function Contact() {
           </div>
 
           {/* Social Media Links */}
-          <div className="text-center">
-            <h2 className="text-2xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-purple-200 to-fuchsia-200 mb-8">Connect With Us</h2>
-            <div className="flex flex-wrap justify-center gap-8">
+          <div className="text-center pt-8">
+            <h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-200 via-purple-200 to-pink-200 mb-10">Connect With Us</h2>
+            <div className="flex flex-wrap justify-center gap-10">
               <a
                 href="https://discord.com/invite/8vjZAzeECQ"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="group flex flex-col items-center p-6 bg-gray-800/30 backdrop-blur-sm hover:bg-gray-700/40 rounded-2xl border border-purple-300/20 hover:border-purple-300/50 transition-all duration-300 hover:scale-110 hover:shadow-2xl hover:shadow-blue-500/20"
+                className="group flex flex-col items-center p-8 bg-gradient-to-br from-gray-800/50 to-gray-900/50 backdrop-blur-md hover:from-gray-700/60 hover:to-gray-800/60 rounded-3xl border border-blue-400/30 hover:border-blue-400/60 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-blue-500/30 min-w-[160px]"
                 aria-label="Discord"
               >
-                <div className="w-18 h-18 flex items-center justify-center bg-gradient-to-br from-[#5865F2] to-[#4752C4] rounded-2xl shadow-lg mb-4 group-hover:shadow-xl group-hover:scale-110 transition-all duration-300">
-                  <IconBrandDiscord size={36} color="white" />
+                <div className="w-20 h-20 flex items-center justify-center bg-gradient-to-br from-[#5865F2] to-[#4752C4] rounded-2xl shadow-xl mb-4 group-hover:shadow-2xl group-hover:scale-110 transition-all duration-300">
+                  <IconBrandDiscord size={40} color="white" />
                 </div>
-                <span className="text-purple-200 font-medium group-hover:text-white transition-colors duration-300">Discord</span>
+                <span className="text-blue-200 font-semibold text-lg group-hover:text-white transition-colors duration-300">Discord</span>
               </a>
               
               <a
                 href="https://www.instagram.com/westernclimbingclub/"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="group flex flex-col items-center p-6 bg-gray-800/30 backdrop-blur-sm hover:bg-gray-700/40 rounded-2xl border border-purple-300/20 hover:border-purple-300/50 transition-all duration-300 hover:scale-110 hover:shadow-2xl hover:shadow-pink-500/20"
+                className="group flex flex-col items-center p-8 bg-gradient-to-br from-gray-800/50 to-gray-900/50 backdrop-blur-md hover:from-gray-700/60 hover:to-gray-800/60 rounded-3xl border border-pink-400/30 hover:border-pink-400/60 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-pink-500/30 min-w-[160px]"
                 aria-label="Instagram"
               >
-                <div className="w-18 h-18 flex items-center justify-center bg-gradient-to-br from-pink-500 via-red-500 to-yellow-500 rounded-2xl shadow-lg mb-4 group-hover:shadow-xl group-hover:scale-110 transition-all duration-300">
-                  <IconBrandInstagram size={36} color="white" />
+                <div className="w-20 h-20 flex items-center justify-center bg-gradient-to-br from-pink-500 via-red-500 to-yellow-500 rounded-2xl shadow-xl mb-4 group-hover:shadow-2xl group-hover:scale-110 transition-all duration-300">
+                  <IconBrandInstagram size={40} color="white" />
                 </div>
-                <span className="text-purple-200 font-medium group-hover:text-white transition-colors duration-300">Instagram</span>
+                <span className="text-pink-200 font-semibold text-lg group-hover:text-white transition-colors duration-300">Instagram</span>
               </a>
             </div>
           </div>
diff --git a/src/components/Events.tsx b/src/components/Events.tsx
index 9f5a139..6e1fb99 100644
--- a/src/components/Events.tsx
+++ b/src/components/Events.tsx
@@ -11,8 +11,8 @@ export default function Events() {
   ));
 
   return (
-    <section id="events">
-      <div className="min-h-screen flex flex-col items-start justify-center bg-[#090414] text-gray-800 dark:text-gray-200 p-6 rounded-[70px]">
+    <section id="events" className="relative">
+      <div className="min-h-screen flex flex-col items-start justify-center text-gray-800 dark:text-gray-200 p-6 rounded-[70px]">
         <h1 className="md:ms-12 text-3xl md:text-5xl font-bold mb-6 text-purple-300">
           <BouncingText text="Join us at our Events!" />
         </h1>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index d297fd2..af5bdbc 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -7,7 +7,7 @@ import { IconMenu2, IconX } from "@tabler/icons-react";
 import wccLogo from "@/assets/WCC-logo-symbol.png";
 
 const navLinks = [
-  { name: "About", href: "#about" },
+  { name: "Team", href: "#team" },
   { name: "Events", href: "#events" },
   { name: "Pricing", href: "#pricing" },
   // { name: "History", href: "#history" },
diff --git a/src/components/Pricing.tsx b/src/components/Pricing.tsx
index 9747638..1e6a7db 100644
--- a/src/components/Pricing.tsx
+++ b/src/components/Pricing.tsx
@@ -161,24 +161,40 @@ export default function Pricing() {
   return (
     <section
       id="pricing"
-      className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-[#10091e] via-[#1a0d2e] to-[#0f0820] text-gray-800 dark:text-gray-200 p-6 relative overflow-hidden"
+      className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-[#10091e] via-[#1a0d2e] to-[#0f0820] text-gray-800 dark:text-gray-200 relative overflow-hidden"
     >
-      <h1 className="text-3xl md:text-5xl font-bold mb-6 text-purple-300">
-        <BouncingText text="Choose Your Plan" />
-      </h1>
-      {/* Animated background elements */}
-      <div className="absolute inset-0 opacity-20">
-        <div className="absolute top-20 left-10 w-72 h-72 bg-purple-500/10 rounded-full blur-3xl animate-pulse"></div>
-        <div className="absolute bottom-20 right-10 w-96 h-96 bg-fuchsia-500/10 rounded-full blur-3xl animate-pulse" style={{animationDelay: '2s'}}></div>
-        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-indigo-500/10 rounded-full blur-3xl animate-pulse" style={{animationDelay: '4s'}}></div>
+      {/* Large Wavy Squiggle Transition */}
+
+      <div className="absolute top-0 left-0 w-full overflow-hidden leading-[0]">
+        <svg className="relative block w-full h-[60px] md:h-[100px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+          <path d="M0,0 L0,60 Q150,110 300,60 Q450,10 600,60 Q750,110 900,60 Q1050,10 1200,60 L1200,0 Z" className="fill-[#10091e]" />
+        </svg>
       </div>
 
-      <div className="relative z-10">
-        <h1 className="text-3xl md:text-5xl font-bold mb-8 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-fuchsia-300 to-purple-500 text-center">
-          <BouncingText text="Choose Your Plan" />
-        </h1>
-        <MemberToggle isMember={isMember} setIsMember={setIsMember} />
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full max-w-6xl">
+      
+
+      <div className="relative z-10 w-full max-w-7xl mx-auto px-6 py-30">
+        {/* Header Section */}
+        <div className="text-center mb-16 space-y-6">
+          <div className="inline-block">
+            <span className="text-xs md:text-sm font-bold text-purple-300 uppercase tracking-widest bg-purple-500/10 px-5 py-2.5 rounded-full border border-purple-500/20 shadow-lg shadow-purple-500/10">
+              Membership Options
+            </span>
+          </div>
+          
+          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-purple-300">
+            <BouncingText text="Choose Your Plan" />
+          </h1>
+          
+        </div>
+
+        {/* Toggle Section */}
+        <div className="flex justify-center mb-12">
+          <MemberToggle isMember={isMember} setIsMember={setIsMember} />
+        </div>
+
+        {/* Cards Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 w-full">
           {Object.values(plans).map((plan) => (
             <TiltCard
               key={plan.title}
@@ -191,6 +207,20 @@ export default function Pricing() {
             />
           ))}
         </div>
+
+        {/* Bottom Info */}
+        <div className="mt-16 text-center">
+          <p className="text-sm text-gray-400 max-w-3xl mx-auto">
+            All passes include access to our exclusive climb nights with free snacks and exciting giveaways. 
+            <span className="text-purple-300 font-semibold"> Junction Members save 50%!</span>
+          </p>
+        </div>
+      </div>
+      {/* Bottom Wavy Divider */}
+      <div className="absolute bottom-0 left-0 w-full overflow-hidden leading-[0] rotate-180">
+        <svg className="relative block w-full h-[60px] md:h-[100px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+          <path d="M0,0 L0,60 Q150,10 300,60 Q450,110 600,60 Q750,10 900,60 Q1050,110 1200,60 L1200,0 Z" className="fill-[#0a0513]" />
+        </svg>
       </div>
     </section>
   );
diff --git a/src/components/Team.tsx b/src/components/Team.tsx
new file mode 100644
index 0000000..bfc252c
--- /dev/null
+++ b/src/components/Team.tsx
@@ -0,0 +1,265 @@
+import { useState } from "react";
+import AnimatedTestimonials from "./ui/Animated-testimonials";
+
+
+export default function About() {
+  const [selectedTeam, setSelectedTeam] = useState<string>("President");
+  const [isFlipped, setIsFlipped] = useState(false);
+
+  const teams = [
+    {
+      name: "President",
+      members: [
+        { name: "Brittney Chong", role: "Prez", img: "/execs/Brittney.jpg", 
+          bio: "My name is Brittney and I love to climb with my cat. I love making new friends let’s climb together (lead, boulder and even toprope)!" },
+      ]
+    },
+    {
+      name: "Communications",
+      members: [
+        { name: "Caleb Chen", role: "VP", img: "/execs/comms/Caleb.jpg", 
+          bio: "Hey everyone! I'm Caleb, I've been climbing for almost 2 years now. I love slopers, but slabs always humble me. Can't wait to see you all on climb nights!"},
+        { name: "Carina Chan", role: "", img: "/execs/comms/Carina.jpg", 
+          bio: "Hi! I'm Carina and I'm in fourth year studying Psych and MIT. I love being outdoors, whether I'm climbing or sk8ing. I'm all about capturing fun moments and turning them into creativer photos and designs to share the club's best adventures!" },
+        { name: "Jiajun Chen", role: "", img: "/execs/comms/Jiajun.jpg", 
+          bio: "Hi, I’m Jiajun — a third-year Medical Sciences student specializing in Physiology and Pharmacology. I’ve been climbing for a little over a year, mostly bouldering. Outside the gym, I’m into photography. Currently working on making it through a session without getting injured." },
+        { name: "Kayleigh Gerritsen", role: "", img: "/execs/comms/Kayleigh.jpg", 
+          bio: "Hi WCC! I'm a third year student specializing in biology. I love anything outdoorsy, going on hikes, and of course climbing! Bouldering specifically helps me release stress while also exercising both my body and mind. Aside from that I also love formula one, concerts, and exploring new countires :)" },
+      ]
+    },
+    {
+      name: "Events",
+      members: [
+        { name: "Sophie DiCiacca", role: "VP", img: "/execs/events/Sophie.jpg", 
+          bio: "Hey, my name is Sophie and I'm a second year in accounting. I used to be a competitive climber and coach!" },
+        { name: "Luna Olin", role: "", img: "/execs/events/Luna.jpg", 
+          bio: "Hi! My name is Luna Olin. I am currently a second year student studying Geography and Environment. I love spending time outdoors, going to concerts, and hanging out with my friends!" },
+        { name: "Charlie Song", role: "", img: "/execs/events/Charlie.jpg", 
+          bio: "Hey! I'm Charlie, I'm a 2nd year student studying finance. I've been bouldering for about 2 years now and I love crimps and dynos. I love spending time with friends, going outside, and snowboarding. I can't wait to meet you all at Junction!" },
+      ]
+    },
+    {
+      name: "Finance",
+      members: [
+        { name: "Isa Dahya", role: "VP", img: "/execs/finance/Isa.jpg", bio: "Hi! I'm Isa and I'm in 4th year HSP physharm. Surprisingly I also like climbing especially indoor bouldering. I got 2 pet cats and I also enjoy biking. If you ever need any med sci advice feel free to contact :)" },
+        { name: "Noah Medland", role: "VP", img: "/execs/finance/Noah.jpg", 
+          bio: "Hey guys, I'm a third-year finance student with a passion for adventure. Outside the classroom, I thrive on mountain climbing, skydiving, and bungee jumping - activities that fuel my drive for challenge, focus, and resilience." },
+        { name: "Jason Too", role: "VP", img: "/execs/finance/Jason.jpg",
+          bio: "Hi, my name is Jason and I’m a 2nd year finance student. I have been climbing for a year and I now live for it. I also play volleyball and a bit of soccer. My home is the climbing gym and if you see me say hi!"
+        }
+      ]
+    },
+    {
+      name: "Sponsorship",
+      members: [
+        { name: "Marshall Howard", role: "", img: "/execs/sponsor/Marshall.jpg", 
+          bio: "Hi! I'm Marshall and I'm a second year psychology major with a minor in ethics! I've been climbing for about 3-ish years now, and it's one of my fav ways to pass the time! Aside from climbing, I also like to train triathalon, read, and binge watch shows!" },
+        { name: "Jeremy Dai", role: "", img: "/execs/sponsor/Jeremy.jpg", 
+          bio: "Hey! I'm Jeremy, a second year in med sci. I'm relatively new to climbing, having just over a year under my belt, but I'm already hooked. Apart from climbing, I enjoy folding origami and sharing what I make on my Instagram account. Hope to see you on the wall!" },
+      ]
+    },
+    {
+      name: "Web Devs",
+      members: [
+        { name: "Ethan Wakefield", role: "VP", img: "/execs/web/Ethan.jpg", 
+          bio: "Hey! I’m Ethan, a 4th year computer science student and the VP of web development. I’ve been climbing consistently for a few months and I’m completely hooked. I also enjoy going to the gym, playing games, watching movies, and sleeping. Looking forward to meeting new faces and climbing with yall!" },
+        { name: "Jenni Shi", role: "", img: "/execs/web/Jen.jpg", 
+          bio: "Hey guys! I'm Jen, a 4th-year Software Engineering student. I've been bouldering for around 2 years, but I dabble in top rope occasionally. You’ll probably catch me eating, thrifting, or crimping some wall on campus >:)" },
+        { name: "Ryhana Williams", role: "", img: "/execs/web/Ryhana.jpg", 
+          bio: "Hi! My name is Ryhana. I'm in my 2nd year of cs and I love to go thrifting, stay active and try new cafes." },
+      ]
+    },
+  ];
+
+  return (
+    <section id="team" className="min-h-screen relative overflow-hidden py-12 md:py-0">
+      {/* Gradient Background */}
+      <div className="absolute inset-0 bg-[#0f0c29]"></div>
+      
+      {/* Top Squiggly Border */}
+      <div className="absolute top-0 left-0 w-full overflow-hidden leading-[0]">
+        <svg className="relative block w-full h-[60px] md:h-[100px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+          <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" 
+                className="fill-[#10091e]"></path>
+        </svg>
+      </div>
+
+      {/* Bottom Squiggly Border */}
+      <div className="absolute bottom-0 left-0 w-full overflow-hidden leading-[0] rotate-180">
+        <svg className="relative block w-full h-[60px] md:h-[100px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+          <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" 
+                className="fill-[#10091e]"></path>
+        </svg>
+      </div>
+
+      <div className="flex flex-col md:flex-row items-center justify-start text-gray-200 relative z-10 pt-36">
+        
+        {/* Rotated Title */}
+        <div className="flex justify-center items-center md:h-screen h-[200px] md:w-[250px] w-full md:mr-8">
+          <h1
+            className="transform md:-rotate-90 text-[4rem] md:text-[8rem] font-extrabold bg-gradient-to-r from-purple-300 via-pink-300 to-purple-400 bg-clip-text text-transparent"
+            style={{ whiteSpace: "nowrap", fontFamily: 'BodoniFLF Bold, serif' }}
+          >
+            Our Team
+          </h1>
+        </div>
+
+        <div className="flex-1 w-full px-4 md:px-8">
+          {/* Header Section */}
+          <div className="text-center mb-12 md:mb-16">
+            <h2 className="text-3xl md:text-5xl font-bold text-white mb-4">
+              Meet the <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">Dream Team</span>
+            </h2>
+            <p className="text-gray-400 text-lg max-w-2xl mx-auto mb-8">
+              The passionate climbers behind Western's most exciting community
+            </p>
+          </div>
+
+          {/* Postcard Container */}
+          <div className="w-full max-w-4xl mx-auto mb-12">
+            <div className="relative w-full max-w-3xl mx-auto" style={{ perspective: '1500px' }}>
+              <div 
+                className="postcard-container relative w-full h-[500px] md:h-[450px] cursor-pointer transition-all duration-700 group"
+                style={{ 
+                  transformStyle: 'preserve-3d',
+                  transform: `${isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)'}`,
+                }}
+                onClick={() => setIsFlipped((prev) => !prev)}
+              >
+                {/* Front of Postcard */}
+                <div 
+                  className="absolute inset-0 w-full h-full bg-gradient-to-br from-white to-gray-50 p-5 md:p-6 shadow-2xl group-hover:shadow-purple-500/30 transition-shadow duration-300"
+                  style={{ 
+                    backfaceVisibility: 'hidden',
+                    borderRadius: '12px',
+                    boxShadow: '0 25px 50px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3)'
+                  }}
+                >
+                  <div className="relative w-full h-full bg-gradient-to-br from-gray-900 to-gray-800 rounded-lg overflow-hidden">
+                    <img
+                      src="/execs/team.jpg"
+                      alt="Our Team"
+                      className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+                    />
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>
+                    
+                    {/* Flip Indicator */}
+                    <div className="absolute top-4 right-4 bg-white/90 backdrop-blur-sm px-3 py-2 rounded-lg shadow-lg">
+                      <p className="text-xs font-semibold text-purple-600 flex items-center gap-2">
+                        <span className="text-lg">↻</span>
+                        Click to flip
+                      </p>
+                    </div>
+                    
+                    {/* Bottom Info */}
+                    <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6">
+                      <div className="text-center">
+                        <p className="text-2xl md:text-3xl font-bold text-white mb-1">Western Climbing Club</p>
+                        <p className="text-purple-300 font-semibold">2025-2026 Executive Team</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Back of Postcard */}
+                <div 
+                  className="absolute inset-0 w-full h-full bg-gradient-to-br from-purple-50 to-pink-50 p-5 md:p-6 shadow-2xl"
+                  style={{ 
+                    backfaceVisibility: 'hidden', 
+                    transform: 'rotateY(180deg)',
+                    borderRadius: '12px',
+                    boxShadow: '0 25px 50px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3)'
+                  }}
+                >
+                  <div className="h-full bg-white/60 backdrop-blur-sm rounded-lg p-6 md:p-8 relative overflow-hidden">
+                    {/* Decorative lines */}
+                    <div className="absolute inset-8 opacity-10">
+                      {[...Array(15)].map((_, i) => (
+                        <div key={i} className="border-b-2 border-purple-300 mb-6"></div>
+                      ))}
+                    </div>
+                    
+                    {/* Header */}
+                    <div className="text-center mb-6 relative z-10">
+                      <div className="inline-block bg-gradient-to-r from-purple-600 to-pink-600 p-3 rounded-lg shadow-lg mb-3">
+                        <h3 className="text-xl md:text-2xl font-bold text-white">
+                          Welcome to WCC!
+                        </h3>
+                      </div>
+                      <div className="w-24 h-1 bg-gradient-to-r from-purple-400 to-pink-400 mx-auto rounded-full"></div>
+                    </div>
+
+                    {/* Content */}
+                    <div className="space-y-4 text-gray-700 relative z-10 text-sm md:text-base">
+                      <p className="leading-relaxed font-medium">
+                        🧗 <strong>Hey Climbers!</strong> We're thrilled to welcome you to another amazing year with the Western Climbing Club!
+                      </p>
+                      <p className="leading-relaxed">
+                        Since 2017, we've built an incredible community where passion meets adventure. Your energy and spirit make this club feel like home.
+                      </p>
+                      <p className="leading-relaxed">
+                        Whether you're a seasoned climber or just starting out, we're here to support you as you challenge yourself and reach new heights! 🎯
+                      </p>
+                      
+                      {/* Signature */}
+                      <div className="pt-4 text-right">
+                        <p className="text-lg font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
+                          – The WCC Team
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Decorative stamp */}
+                    <div className="absolute top-6 right-6 w-20 h-16 border-4 border-dashed border-purple-400 flex items-center justify-center transform rotate-12 bg-white shadow-lg">
+                      <div className="text-center">
+                        <span className="text-2xl">🧗</span>
+                        <p className="text-xs font-bold text-purple-600">WCC</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Team Navigation */}
+          <div className="mb-12">
+            <div className="flex flex-wrap justify-center gap-3">
+              {teams.map((team) => (
+                <button
+                  key={team.name}
+                  className={`px-5 md:px-6 py-3 rounded-xl font-semibold transition-all duration-300 ${
+                    selectedTeam === team.name 
+                      ? "bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg shadow-purple-500/50 scale-105" 
+                      : "bg-gray-800/50 text-gray-300 hover:bg-gray-700/50 hover:text-white hover:scale-105"
+                  }`}
+                  onClick={() => setSelectedTeam(team.name)}
+                >
+                  {team.name}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Team Display */}
+          <div className="w-full max-w-6xl mx-auto pb-12">
+            {teams
+              .filter((team) => team.name === selectedTeam)
+              .map((team) => (
+                <div key={team.name} className="flex flex-col items-center">
+                  <AnimatedTestimonials
+                    testimonials={team.members.map((member) => ({
+                      quote: member.bio,
+                      name: member.name,
+                      designation: member.role,
+                      src: member.img,
+                    }))}
+                  />
+                </div>
+              ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/Title.tsx b/src/components/Title.tsx
index d6bf5f5..8a24e8b 100644
--- a/src/components/Title.tsx
+++ b/src/components/Title.tsx
@@ -33,14 +33,26 @@ export default function Title() {
       <ParallaxContainer pages={isMobile ? 1 : 1.5}>
         {!isMobile ? (
           <>
-            {[bg1, bg2, bg3, bg4, bg5, bg6, bg7, bg8, bg9].map((bg, i) => (
+            <ParallaxLayer
+                  speed={0.1}
+                  factor={factor}
+                  image={`${bg1}`}
+            />
+            {/* <ParallaxLayer speed={0}>
+              <div className="flex flex-col items-start h-[150vh] w-full font-" style={{fontFamily: 'BodoniFLF Bold, serif'}}>
+                <span className="text-[40vh] leading-none font-bold text-white opacity-6">WESTERN</span>
+                <span className="text-[40vh] leading-none font-bold text-white opacity-6">CLIMBING</span>
+                <span className="text-[40vh] leading-none font-bold text-white opacity-6">CLUB</span>
+              </div>
+            </ParallaxLayer> */}
+            <ShootingStars />
+            {[bg2, bg3, bg4, bg5, bg6, bg7, bg8, bg9].map((bg, i) => (
               <Fragment key={i}>
                 <ParallaxLayer
-                  speed={[0.1, 0.12, 0.25, 0.3, 0.35, 0.45, 0.7, 0.85, 1][i]}
+                  speed={[0.12, 0.25, 0.3, 0.35, 0.45, 0.7, 0.85, 1][i]}
                   factor={factor}
                   image={`${bg}`}
                 />
-                {i === 0 && <ShootingStars />}
               </Fragment>
             ))}
           </>
@@ -81,7 +93,7 @@ export default function Title() {
         </ParallaxLayer>
         <ParallaxLayer factor={2} speed={1} pageOffset={2} colour='#10091e' />
       </ParallaxContainer>
-      <div className={`${isMobile ? 'h-[100vh]' : 'h-[140vh]'}`}></div>
+      <div className={`${isMobile ? 'h-[100vh]' : 'h-[150vh]'}`}></div>
     </>
   )
 }
\ No newline at end of file
diff --git a/src/components/Tutorial.tsx b/src/components/Tutorial.tsx
new file mode 100644
index 0000000..5bf2bbd
--- /dev/null
+++ b/src/components/Tutorial.tsx
@@ -0,0 +1,150 @@
+
+
+export default function Tutorial() {
+  const steps = [
+    {
+      number: "1",
+      title: "Get Your Membership",
+      description: "Sign up for membership to access exclusive discounts, events, and climbing sessions throughout the year.",
+      icon: "🤝",
+      color: "from-purple-500 to-pink-500"
+    },
+    {
+      number: "2",
+      title: "Sign the Waivers",
+      description: "Complete all necessary waivers to ensure a safe and enjoyable climbing experience.",
+      icon: "🖊️",
+      color: "from-pink-500 to-purple-600"
+    },
+    {
+      number: "3",
+      title: "Purchase Tickets",
+      description: "Buy your climbing session tickets online or at the gym to secure your spot.",
+      icon: "🎟️",
+      color: "from-purple-600 to-indigo-500"
+    },
+    {
+      number: "4",
+      title: "Start Climbing!",
+      description: "Whether you're a beginner or expert, challenge yourself, meet new friends, and reach new heights!",
+      icon: "🧗‍♂️",
+      color: "from-indigo-500 to-purple-500"
+    }
+  ];
+
+  return (
+    <section id="tutorial" className="min-h-screen">
+      <div className="flex flex-col md:flex-row items-center justify-start bg-[#10091e] text-gray-200 py-12 md:py-0">
+
+        {/* Steps Container */}
+        <div className="flex-1 w-full max-w-6xl mx-auto px-4 md:px-8 py-12">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-5xl font-bold text-white mb-4">
+              How to <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">Join</span>
+            </h2>
+            <p className="text-gray-400 text-lg max-w-2xl mx-auto">
+              Follow these simple steps to become part of Western's most exciting climbing community
+            </p>
+          </div>
+
+          {/* Steps Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
+            {steps.map((step, index) => (
+              <div
+                key={index}
+                className="group relative bg-gradient-to-br from-gray-800/50 to-gray-900/50 backdrop-blur-sm rounded-2xl p-6 md:p-8 border border-gray-700/50 hover:border-purple-500/50 transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-purple-500/20"
+              >
+                {/* Step Number */}
+                <div className="absolute -top-4 -left-4 w-16 h-16 md:w-20 md:h-20 bg-gradient-to-br from-purple-600 to-pink-600 rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
+                  <span className="text-2xl md:text-3xl font-bold text-white">{step.number}</span>
+                </div>
+
+                {/* Icon */}
+                <div className="text-right text-4xl md:text-5xl mb-4 opacity-80 group-hover:scale-110 transition-transform duration-300">
+                  {step.icon}
+                </div>
+
+                {/* Content */}
+                <div className="mt-4">
+                  <h3 className="text-xl md:text-2xl font-bold text-white mb-3 group-hover:text-purple-300 transition-colors duration-300">
+                    {step.title}
+                  </h3>
+                  <p className="text-gray-400 leading-relaxed group-hover:text-gray-300 transition-colors duration-300">
+                    {step.description}
+                  </p>
+                </div>
+
+                {/* Decorative gradient line */}
+                <div className={`absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r ${step.color} rounded-b-2xl transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500`}></div>
+              </div>
+            ))}
+          </div>
+
+          {/* Call to Action */}
+          <div className="text-center mt-12 md:mt-16">
+            <div className="flex flex-wrap justify-center gap-4 md:gap-6">
+              {/* Membership Link */}
+              <div className="inline-block bg-gradient-to-r from-purple-600 to-pink-600 p-1 rounded-full shadow-lg hover:shadow-purple-500/50 transition-shadow duration-300">
+                <a
+                  href="https://westernusc.store/product/western-climbing-club/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block bg-[#10091e] px-6 md:px-8 py-3 md:py-4 rounded-full text-white font-semibold hover:bg-transparent transition-all duration-300 group"
+                >
+                  <span className="flex items-center gap-2">
+                    Membership
+                    <span className="group-hover:translate-x-1 transition-transform duration-300">→</span>
+                  </span>
+                </a>
+              </div>
+
+              {/* Waivers Link */}
+              <div className="inline-block bg-gradient-to-r from-pink-600 to-purple-600 p-1 rounded-full shadow-lg hover:shadow-pink-500/50 transition-shadow duration-300">
+                <a
+                  href="https://westernu.campuslabs.ca/engage/submitter/form/start/19928"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block bg-[#10091e] px-6 md:px-8 py-3 md:py-4 rounded-full text-white font-semibold hover:bg-transparent transition-all duration-300 group"
+                >
+                  <span className="flex items-center gap-2">
+                    USC Waiver
+                    <span className="group-hover:translate-x-1 transition-transform duration-300">→</span>
+                  </span>
+                </a>
+              </div>
+
+              <div className="inline-block bg-gradient-to-r from-pink-600 to-purple-600 p-1 rounded-full shadow-lg hover:shadow-pink-500/50 transition-shadow duration-300">
+                <a
+                  href="https://waiver.smartwaiver.com/w/5d1618de069c2/web/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block bg-[#10091e] px-6 md:px-8 py-3 md:py-4 rounded-full text-white font-semibold hover:bg-transparent transition-all duration-300 group"
+                >
+                  <span className="flex items-center gap-2">
+                    Junction Waiver
+                    <span className="group-hover:translate-x-1 transition-transform duration-300">→</span>
+                  </span>
+                </a>
+              </div>
+
+              {/* Tickets Link */}
+              <div className="inline-block bg-gradient-to-r from-indigo-600 to-purple-600 p-1 rounded-full shadow-lg hover:shadow-indigo-500/50 transition-shadow duration-300">
+                <a
+                  href="https://westernusc.store/product/wcc-climb-night-pass/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block bg-[#10091e] px-6 md:px-8 py-3 md:py-4 rounded-full text-white font-semibold hover:bg-transparent transition-all duration-300 group"
+                >
+                  <span className="flex items-center gap-2">
+                    Tickets
+                    <span className="group-hover:translate-x-1 transition-transform duration-300">→</span>
+                  </span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
\ No newline at end of file
diff --git a/src/components/ui/Noise.tsx b/src/components/ui/Noise.tsx
new file mode 100644
index 0000000..0601fae
--- /dev/null
+++ b/src/components/ui/Noise.tsx
@@ -0,0 +1,79 @@
+import React, { useRef, useEffect } from 'react';
+
+interface NoiseProps {
+  patternRefreshInterval?: number;
+  patternAlpha?: number;
+}
+
+const Noise: React.FC<NoiseProps> = ({
+  patternRefreshInterval = 2,
+  patternAlpha = 15
+}) => {
+  const grainRef = useRef<HTMLCanvasElement | null>(null);
+
+  useEffect(() => {
+    const canvas = grainRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d', { alpha: true });
+    if (!ctx) return;
+
+    let frame = 0;
+    let animationId: number;
+
+    const canvasSize = 1024;
+
+    const resize = () => {
+      if (!canvas) return;
+      canvas.width = canvasSize;
+      canvas.height = canvasSize;
+
+      canvas.style.width = '100vw';
+      canvas.style.height = '200vh';
+    };
+
+    const drawGrain = () => {
+      const imageData = ctx.createImageData(canvasSize, canvasSize);
+      const data = imageData.data;
+
+      for (let i = 0; i < data.length; i += 4) {
+        const value = Math.random() * 255;
+        data[i] = value;
+        data[i + 1] = value;
+        data[i + 2] = value;
+        data[i + 3] = patternAlpha;
+      }
+
+      ctx.putImageData(imageData, 0, 0);
+    };
+
+    const loop = () => {
+      if (frame % patternRefreshInterval === 0) {
+        drawGrain();
+      }
+      frame++;
+      animationId = window.requestAnimationFrame(loop);
+    };
+
+    window.addEventListener('resize', resize);
+    resize();
+    loop();
+
+    return () => {
+      window.removeEventListener('resize', resize);
+      window.cancelAnimationFrame(animationId);
+    };
+  }, [patternRefreshInterval, patternAlpha]);
+
+  return (
+    <canvas
+      className="pointer-events-none"
+      ref={grainRef}
+      style={{
+        imageRendering: 'pixelated'
+      }}
+    />
+  );
+};
+
+export default Noise;
diff --git a/src/index.css b/src/index.css
index a17e504..94b0d51 100644
--- a/src/index.css
+++ b/src/index.css
@@ -30,6 +30,13 @@ html {
   src: local('Montserrat'), url('/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
 }
 
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: bold;
+  src: local('Montserrat Bold'), url('/fonts/Montserrat-ExtraBold.ttf') format('truetype');
+}
+
 .scrollbar-hide::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
diff --git a/src/pages/Homepage.tsx b/src/pages/Homepage.tsx
index 94ec06c..5d5bfde 100644
--- a/src/pages/Homepage.tsx
+++ b/src/pages/Homepage.tsx
@@ -1,6 +1,7 @@
 import Title from '@/components/Title'
-import About from '@/components/About'
+import Team from '@/components/Team'
 import Events from '@/components/Events'
+import Tutorial from '@/components/Tutorial'
 // import History from '@/components/History'
 // import Sponsors from '@/components/Sponsors'
 // import Resources from '@/components/Resources'
@@ -11,7 +12,8 @@ export default function Homepage() {
   return (
     <>
       <Title />
-      <About />
+      <Tutorial />
+      <Team />
       <Events />
       <Pricing />
       {/* <History /> */}