diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index d845e4f..c6bd33d 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -35,6 +35,9 @@ export default function Navbar() {
         <Link className={styles.hoverable} href="/about">
           <li>About</li>
         </Link>
+        <Link className={styles.hoverable} href="/members">
+          <li>Members</li>
+        </Link>
         <Link className={styles.hoverable} href="/events">
           <li>Events</li>
         </Link>
@@ -44,6 +47,14 @@ export default function Navbar() {
         <Link className={styles.hoverable} href="/archive">
           <li>Archive</li>
         </Link>
+        <li>
+          <button
+            onClick={() => (window.location.href = "/join")}
+            className={styles.join}
+          >
+            <Link href="/join">Join Us</Link>
+          </button>
+        </li>
       </ul>
     </nav>
   );
diff --git a/data/events.ts b/data/events.ts
index 8a329f1..2f18d42 100644
--- a/data/events.ts
+++ b/data/events.ts
@@ -2,38 +2,52 @@ export interface EventType {
   name: string;
   description: string;
   link?: string;
+  id: string;
+  icon?: any;
+  textIcon?: string;
+  iconAlt?: string;
 }
 
 enum EventKind {
+  CyAc = "Cyber Academy",
   PBR = "Psi Beta Rho",
   CyLab = "Cyber Lab",
   LACTF = "LA CTF",
-  CyTalks = "Cyber Talks",
   Misc = "Miscellaneous",
 }
 
 export const eventTypes = [
   {
-    name: EventKind.PBR,
-    description: "add description here",
-    link: "https://pbr.uclaacm.com/",
+    name: EventKind.CyAc,
+    description: 'Cyber Academy is a weekly track designed to introduce you to the world of cybersecurity and help you expand your knowledge, regardless of your current skill level. Each week, we\'ll explore various cybersecurity topics in 15-20 minute talks and provide you with the opportunity to apply your learning through engaging "capture-the-flag"-style challenges. You\'ll also have the chance to collaborate with your peers in smaller groups to do some hands-on hacking! At Cyber Academy, we strive to open the door to all that cybersecurity has to offer, helping you learn and apply the foundational skills essential for success in this dynamic field.',
+    id: "cyber-academy",
+    icon: "cyber-logo-light-inverted.png"
   },
   {
     name: EventKind.CyLab,
-    description: "add description here",
+    description: 'ACM Cyber\'s newest offering, Cyber Lab is home to a rotating variety of quarter-long projects, planned to give you the freedom to learn something new and apply what you already know in a practical setting. With help from current officers, alumni mentors, and other members of ACM Cyber, you can create a unique product by the end of the quarter.  From building your own operating system, to video game hacking, to adversarial AI, Cyber Lab has it all!  Be sure to keep a lookout for our future projects and even submit ideas of your own.',
+    id: "cyber-lab",
+    icon: "test-tube.svg"
   },
   {
-    name: EventKind.LACTF,
-    description: "add description here",
-    link: "https://lac.tf",
+    name: EventKind.PBR,
+    description: 'Psi Beta Rho (PBR) is UCLA\'s premier competitive cybersecurity team. We are a group of hackers, programmers, and security enthusiasts who love to learn and compete. Whether we are pwning a binary or attacking a site using cross-site scripting, we like to have fun! We mostly compete in Capture the Flag (CTF) competitions which are cybersecurity competitions where you tackle challenges and gain hands-on experience with solving security problems! If you are interested in getting hands-on experience with exploit development, security research, or just enjoy solving challenges then PBR is for you! We are advised by Dr. Yuan Tian.',
+    link: "https://pbr.uclaacm.com/",
+    id: "pbr",
+    textIcon: "ψβρ"
   },
   {
-    name: EventKind.CyTalks,
-    description: "add description here",
+    name: EventKind.LACTF,
+    description: 'Our largest event of the year, LA CTF is an annual cybersecurity competition with speakers, career events, challenges, and prizes, hosted right here at UCLA. Whether you are tackling your first exploit or have professional experience, there will be something just right for you!  Participation and planning sessions are open to all.',
+    id: "lactf",
+    link: 'https://lac.tf',
+    icon: "flag.svg"
   },
   {
     name: EventKind.Misc,
-    description: "add description here",
+    description: 'Alongside our other events, we also offer socials, member talks, speaker events, career panels, and more! Our club not only helps develop peoples\' careers but also grows the community of hacking enthusiasts!',
+    id: "misc",
+    icon: "boba.svg"
   },
 ];
 
diff --git a/next.config.js b/next.config.js
index 61a0820..7fc1f8b 100644
--- a/next.config.js
+++ b/next.config.js
@@ -22,9 +22,11 @@ const nextConfig = {
     return {
       "/": { page: "/" },
       "/about": { page: "/about" },
+      "/members": { page: "/members" },
       "/events": { page: "/events" },
       "/archive": { page: "/archive" },
       "/blog": { page: "/blog" },
+      "/join": { page: "/join" },
       "/404": { page: "/404" },
       ...(debug
         ? {
diff --git a/pages/about.tsx b/pages/about.tsx
index ea731c1..626daef 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -1,6 +1,4 @@
-import Image from "next/image";
-
-import members, { PersonInfoProps } from "@/data/members";
+import { eventTypes, EventType } from "@/data/events";
 
 import styles from "@/styles/About.module.scss";
 import CyberSeo from "@/components/CyberSeo";
@@ -16,8 +14,8 @@ export default function About() {
         <div className="content">
           <h1>About</h1>
           <img
-            src="/images/cyber-symposium.png"
-            alt="ACM Cyber x ACM AI Spring 2023 projects symposium."
+            src="/images/ctf-experts.png"
+            alt="A talk from two CTF experts."
             className={styles.aboutImage}
           />
 
@@ -31,46 +29,56 @@ export default function About() {
             the students at UCLA!
           </p>
 
-          <h2>Members</h2>
-
-          <div className={styles.officersContainer}>
-            {members.map((officer: PersonInfoProps, index: number) => (
-              <PersonInfo
+          <h2>What We Do</h2>
+          <p>
+            ACM Cyber is home to a wide variety of events and projects hosted
+            throughout the year. Check out our main initiatives below!
+          </p>
+          <div className={styles.cyberThings}>
+            {eventTypes.map((event: EventType, index: number) => (
+              <EventInfo
                 key={index}
-                name={officer.name}
-                role={officer.role}
-                bio={officer.bio}
-                pronouns={officer.pronouns}
-                photo={officer.photo}
+                name={event.name}
+                description={event.description}
+                id={event.id}
+                link={event.link}
+                icon={event.icon}
+                iconAlt={event.iconAlt}
+                textIcon={event.textIcon}
               />
             ))}
           </div>
+          <h2 />
         </div>
       </div>
     </>
   );
 }
 
-function PersonInfo({ name, role, bio, pronouns, photo }: PersonInfoProps) {
+function EventInfo({
+  name,
+  description,
+  link,
+  id,
+  icon,
+  iconAlt,
+  textIcon,
+}: EventType) {
   return (
-    <div className={styles.personInfo}>
-      <Image
-        className={styles.personImage}
-        src={
-          photo !== ""
-            ? "/images/members/" + photo
-            : "/images/cyber-logo-light.png"
-        }
-        alt={`Profile picture of ${name}`}
-        width={300}
-        height={300}
-      />
-      <h3>{name}</h3>
-      <p>{pronouns}</p>
-      <p>
-        <i>{role}</i>
-      </p>
-      <p>{bio}</p>
-    </div>
+    <span id={id}>
+      <div className={styles.cyberThing}>
+        <div className={styles.cyberThingIcon} draggable="true">
+          {textIcon ? (
+            <p role="img" aria-label={iconAlt}>
+              {textIcon}
+            </p>
+          ) : (
+            <img src={"/images/" + icon} alt={iconAlt} />
+          )}
+        </div>
+        <h2>{name}</h2>
+        <p>{description}</p>
+      </div>
+    </span>
   );
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index abf04ce..58add4a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,3 +1,4 @@
+import Link from "next/link";
 import styles from "styles/Home.module.scss";
 import CyberSeo from "@/components/CyberSeo";
 import CyberWordmark from "@/components/CyberWordmark";
@@ -7,6 +8,7 @@ import Boba from "@/public/images/boba.svg";
 import InstagramLogo from "@/public/images/instagram.svg";
 import LinkedinLogo from "@/public/images/linkedin.svg";
 import TestTube from "@/public/images/test-tube.svg";
+import CyberLogoInverted from "@/public/images/cyber-logo-light-inverted.png";
 import TropicalImage from "@/components/TropicalImage";
 
 export default function HomePage() {
@@ -35,6 +37,12 @@ export default function HomePage() {
           </p>
           <h1 className={styles.motto}>ACM Cyber has something for you.</h1>
           <div className={styles.cyberThings}>
+            <CyberThing
+              icon={CyberLogoInverted}
+              title="Cyber Academy"
+              description="Learn cybersecurity skills from beginner to advanced topics!"
+              link="/about#cyber-academy"
+            />
             <CyberThing
               textIcon="ψβρ"
               title="Psi Beta Rho (PBR)"
@@ -43,9 +51,9 @@ export default function HomePage() {
             />
             <CyberThing
               icon={TestTube}
-              title="Cyber Labs"
+              title="Cyber Lab"
               description="Hands-on security projects!"
-              link="/events"
+              link="/about#cyber-lab"
             />
             <CyberThing
               icon={Flag}
@@ -57,7 +65,7 @@ export default function HomePage() {
               icon={Boba}
               title="And More!"
               description="Career panels, talks, socials, and much more!"
-              link="/events"
+              link="/about#misc"
             />
           </div>
         </div>
@@ -99,7 +107,7 @@ function CyberThing({
 }) {
   iconAlt = iconAlt ?? title + " Logo";
   return (
-    <a href={link} draggable="false">
+    <Link href={link} draggable="false">
       <div className={styles.cyberThing}>
         <div className={styles.cyberThingIcon} draggable="true">
           {textIcon ? (
@@ -113,6 +121,6 @@ function CyberThing({
         <h2>{title}</h2>
         <p>{description}</p>
       </div>
-    </a>
+    </Link>
   );
 }
diff --git a/pages/join.tsx b/pages/join.tsx
new file mode 100644
index 0000000..ffd70ec
--- /dev/null
+++ b/pages/join.tsx
@@ -0,0 +1,75 @@
+import CyberSeo from "@/components/CyberSeo";
+import styles from "@/styles/Join.module.scss";
+
+export default function Join() {
+  return (
+    <>
+      <CyberSeo title="Join Us" description="Join ACM Cyber at UCLA!" />
+      <div className="page">
+        <div className="content">
+          <h1>Join Us</h1>
+
+          <img
+            src="/images/cyber-symposium.png"
+            alt="AI x Cyber Symposium Spring 2023."
+            className={styles.joinImg}
+          />
+
+          <p>
+            Want to join UCLA's premier cybersecurity club?{" "}
+            <strong>All experiences welcome!</strong> Our membership form opens
+            at the start of every quarter. Join our{" "}
+            <a href="https://discord.com/invite/j9dgf2q">Discord</a> to stay up
+            to date! All of our events are open to the public, so feel free to
+            join us at any time!
+          </p>
+
+          <h2>What do I have to do?</h2>
+          <p>
+            ACM Cyber is an entirely student-run organization and would not
+            exist without the contributions from all of our members! If you'd
+            like to become an active member of ACM Cyber, complete one of the
+            following requirements.
+          </p>
+          <ul>
+            <li>
+              <strong>Cyber Academy:</strong> Submit one writeup for a challenge
+              you've solved by the end of the quarter.
+            </li>
+            <li>
+              <strong>Cyber Lab:</strong> Participate in a project with Cyber
+              Lab. At the end of the quarter, create a blog post with your
+              project group about your work and present your creation to the
+              club!
+            </li>
+            <li>
+              <strong>Psi Beta Rho:</strong> Submit one writeup for a challenge
+              you've solved by the end of the quarter and attend at least one
+              CTF on the weekend
+            </li>
+          </ul>
+
+          <h2>What's in it for me?</h2>
+          <ul>
+            <li>
+              <strong>Community:</strong> Join a community of like-minded peers
+              enthusiastic about hacking! Your photo and bio will also be added
+              to our <a href="/members">members page</a>!
+            </li>
+            <li>
+              <strong>Cyber Pals:</strong> Our mentorship/peer program that
+              groups you with members of the club for social & academic support!
+            </li>
+            <li>
+              <strong>Cyber Summer Research Fellowship (CSRF):</strong> Members
+              who complete all requirements will be guaranteed a position in
+              CSRF, our summer research program, where you work on a security &
+              privacy project advised by a mentor!
+            </li>
+          </ul>
+          <br />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/pages/members.tsx b/pages/members.tsx
new file mode 100644
index 0000000..c14b500
--- /dev/null
+++ b/pages/members.tsx
@@ -0,0 +1,58 @@
+import Image from "next/image";
+
+import members, { PersonInfoProps } from "@/data/members";
+
+import styles from "@/styles/Members.module.scss";
+import CyberSeo from "@/components/CyberSeo";
+
+export default function Members() {
+  return (
+    <>
+      <CyberSeo
+        title="Members"
+        description="Learn more about the members of ACM Cyber at UCLA!"
+      />
+      <div className="page">
+        <div className="content">
+          <h1>Members</h1>
+          <div className={styles.officersContainer}>
+            {members.map((officer: PersonInfoProps, index: number) => (
+              <PersonInfo
+                key={index}
+                name={officer.name}
+                role={officer.role}
+                bio={officer.bio}
+                pronouns={officer.pronouns}
+                photo={officer.photo}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+function PersonInfo({ name, role, bio, pronouns, photo }: PersonInfoProps) {
+  return (
+    <div className={styles.personInfo}>
+      <Image
+        className={styles.personImage}
+        src={
+          photo !== ""
+            ? "/images/members/" + photo
+            : "/images/cyber-logo-light.png"
+        }
+        alt={`Profile picture of ${name}`}
+        width={300}
+        height={300}
+      />
+      <h3>{name}</h3>
+      <p>{pronouns}</p>
+      <p>
+        <i>{role}</i>
+      </p>
+      <p>{bio}</p>
+    </div>
+  );
+}
diff --git a/public/images/ctf-experts.png b/public/images/ctf-experts.png
new file mode 100644
index 0000000..c82a38b
Binary files /dev/null and b/public/images/ctf-experts.png differ
diff --git a/public/images/cyber-logo-light-inverted.png b/public/images/cyber-logo-light-inverted.png
new file mode 100644
index 0000000..d4d8306
Binary files /dev/null and b/public/images/cyber-logo-light-inverted.png differ
diff --git a/styles/About.module.scss b/styles/About.module.scss
index 15ff047..282ba6f 100644
--- a/styles/About.module.scss
+++ b/styles/About.module.scss
@@ -1,31 +1,147 @@
-.officersContainer {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  align-content: center;
+.aboutImage {
+  width: 90%;
+  height: 100%;
+  object-fit: cover;
+  margin: 2rem auto;
+  display: block;
 }
 
-.personInfo {
-  text-align: center;
-  margin: 0.5rem 2rem;
-  font-size: larger;
-  width: 300px;
-  height: 500px;
-  overflow: hidden;
-}
+.cyberThings {
+  max-width: 800px;
+  margin: 0 auto;
 
-.personImage {
-  border-radius: 50%;
-  object-fit: cover;
-  width: 200px;
-  height: 200px;
-  margin: 0 0 1rem 0;
-}
+  > span {
+    scroll-margin-top: 80px;
 
-.aboutImage {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+    .cyberThing {
+      --cyber-thing-width: 0.09;
+      --inner-padding: 0.2;
+      position: relative;
+      width: calc(100% * (1 - var(--cyber-thing-width)));
+      min-height: 11rem;
+      height: fit-content;
+      margin: 50px 0rem;
+      pointer-events: all;
+
+      .cyberThingIcon {
+        --border-width: 4px;
+        --extra-size: 2.75;
+        --size: calc(11rem / 1.41 + var(--border-width) * var(--extra-size));
+        --rot-offset: calc(var(--size) * 0.41);
+        position: absolute;
+        background: var(--cyber-gold);
+        width: var(--size);
+        height: var(--size);
+        --parent-parent-width: min(80vw, 800px);
+        --parent-width: var(--parent-parent-width) *
+          (1 - var(--cyber-thing-width));
+        transform-style: preserve-3d;
+        // prettier-ignore
+        top: 50%;
+        transform: translate(
+            calc(
+              var(--left) *
+                calc(var(--parent-parent-width) * -1 * var(--inner-padding)) +
+                var(--right) *
+                calc(
+                  var(--parent-width) - var(--border-width) * 2.5 - var(--size)
+                ) + var(--dir) * (0.5 * var(--size) - 28px)
+            ),
+            -50%
+          )
+          rotate(45deg);
+        border: var(--border-width) solid var(--cyber-gold);
+        border-radius: 20px;
+
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        flex-direction: column;
+
+        &::before {
+          content: "";
+          --offset: 12px;
+          position: absolute;
+          width: calc(11rem / 1.41);
+          height: calc(11rem / 1.41);
+          // prettier-ignore
+          transform: translate(
+              calc(var(--dir) * var(--offset) - var(--left) * var(--border-width)),
+              calc(-1 * (var(--dir) * var(--offset) + var(--right) * var(--border-width)))
+            )
+            translateZ(-10px);
+          background: #86652d;
+          border: var(--border-width) solid #86652d;
+          border-radius: 20px;
+        }
+
+        p,
+        img {
+          transform: translateZ(1px) rotate(-45deg);
+          user-select: none;
+          pointer-events: none;
+        }
+
+        p {
+          padding-bottom: 8%;
+          text-align: center;
+          font-weight: 800;
+          font-size: calc(0.35 * var(--size));
+          transition: font-size 100ms linear, padding-bottom 100ms linear;
+        }
+
+        img {
+          margin: auto;
+          object-fit: contain;
+          width: calc(0.75 * var(--size));
+          height: calc(0.75 * var(--size));
+          transition: width 100ms linear, height 100ms linear;
+        }
+      }
+
+      h2 {
+        font-family: "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana,
+          sans-serif;
+      }
+    }
+
+    &:nth-child(2n + 1) {
+      .cyberThing {
+        --dir: -1;
+        --left: 1;
+        --right: 0;
+        margin-left: calc(100% * var(--cyber-thing-width));
+        padding-left: calc(100% * var(--inner-padding));
+        text-align: left;
+      }
+    }
+
+    &:nth-child(2n) {
+      .cyberThing {
+        --dir: 1;
+        --left: 0;
+        --right: 1;
+        margin-right: calc(100% * var(--cyber-thing-width));
+        padding-right: calc(100% * var(--inner-padding));
+        text-align: right;
+      }
+    }
+
+    @media (max-width: 750px) {
+      .cyberThing .cyberThingIcon {
+        display: none;
+      }
+
+      &:nth-child(n) {
+        .cyberThing {
+          width: 100%;
+          margin-left: 0;
+          margin-right: 0;
+          padding-left: 10%;
+          padding-right: 10%;
+          padding-bottom: 2rem;
+        }
+      }
+    }
+  }
 }
diff --git a/styles/Join.module.scss b/styles/Join.module.scss
new file mode 100644
index 0000000..d1ea91c
--- /dev/null
+++ b/styles/Join.module.scss
@@ -0,0 +1,5 @@
+.joinImg {
+  width: 90%;
+  margin: 2rem auto;
+  display: block;
+}
diff --git a/styles/Members.module.scss b/styles/Members.module.scss
new file mode 100644
index 0000000..bf658f9
--- /dev/null
+++ b/styles/Members.module.scss
@@ -0,0 +1,25 @@
+.officersContainer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+}
+
+.personInfo {
+  text-align: center;
+  margin: 0.5rem 2rem;
+  font-size: larger;
+  width: 300px;
+  height: 500px;
+  overflow: hidden;
+}
+
+.personImage {
+  border-radius: 50%;
+  object-fit: cover;
+  width: 200px;
+  height: 200px;
+  margin: 0 0 1rem 0;
+}
diff --git a/styles/Navbar.module.scss b/styles/Navbar.module.scss
index fdf86c5..de8ec18 100644
--- a/styles/Navbar.module.scss
+++ b/styles/Navbar.module.scss
@@ -44,6 +44,18 @@
     }
   }
 
+  .right > li {
+    display: inline-block;
+    line-height: 40px;
+    padding: 0 8px;
+    text-transform: uppercase;
+    list-style: none;
+
+    a {
+      padding: 8px 18px 0 18px;
+    }
+  }
+
   /* yes this hamburger code is stolen directly from myself @ lactf ~ andrew */
 
   .hamburgerToggle,
@@ -95,7 +107,34 @@
     }
   }
 
-  @media (max-width: 750px) {
+  button.join {
+    color: var(--cyber-gold);
+    background-color: transparent;
+    border: 2px solid var(--cyber-gold);
+    border-radius: 0.8rem;
+    padding: 0.1rem 0;
+    font-family: "NTR", sans-serif;
+    font-size: 1.5rem;
+  }
+
+  button.join:hover {
+    background-color: var(--cyber-gold);
+    color: white;
+  }
+
+  @media (min-width: 1042px) {
+    button.join {
+      height: 40px;
+      transform: translateY(10px);
+
+      > a {
+        transform: translateY(-10px);
+        line-height: 40px;
+      }
+    }
+  }
+
+  @media (max-width: 1042px) {
     .hamburgerContainer {
       display: flex;
       width: 30px;
@@ -121,6 +160,17 @@
         }
       }
 
+      & ~ ul > li {
+        display: contents;
+        height: 0;
+        margin: -10px;
+        padding: 0;
+        border: 0;
+        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1),
+          margin 400ms cubic-bezier(0.23, 1, 0.32, 1);
+        display: none;
+      }
+
       &:checked {
         & ~ ul {
           width: 100vw;
@@ -137,9 +187,40 @@
               display: unset;
             }
           }
+
+          & > li {
+            display: block;
+            height: 60px;
+            margin: 0;
+            line-height: unset;
+            text-align: center;
+            padding: 4px 0 5px 0;
+
+            a {
+              display: unset;
+            }
+          }
+
+          & > li:hover {
+            background-color: #2c2f36;
+            filter: brightness(150%);
+
+            a {
+              color: white;
+            }
+          }
         }
       }
     }
+
+    button.join {
+      border: none;
+    }
+
+    button.join:hover {
+      background-color: transparent;
+      color: var(--cyber-gold);
+    }
   }
 
   @media (max-width: 350px) {
@@ -162,7 +243,6 @@
   background-color: #2c2f36;
   filter: brightness(150%);
 }
-
 .tropicalImageStrikesAgain :not(img) {
   transition: filter ease-in-out 0.25s;
 }
diff --git a/styles/globals.scss b/styles/globals.scss
index c60f822..2936d04 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -55,6 +55,10 @@ a {
   text-decoration: none;
 }
 
+strong {
+  color: var(--cyber-gold);
+}
+
 .page {
   background: var(--soul-dark);
   min-height: calc(100vh - 80px - 200px);
@@ -63,6 +67,23 @@ a {
   .content {
     width: 80%;
     margin: 0 auto;
+
+    ul {
+      width: 80%;
+      margin: 2rem auto 0 auto;
+      font-size: large;
+      li {
+        margin: 1rem 0;
+      }
+    }
+
+    a {
+      text-decoration: underline var(--cyber-gold);
+    }
+
+    a:hover {
+      color: var(--cyber-gold);
+    }
   }
 
   h1 {