diff --git a/src/components/events/EventCard/index.tsx b/src/components/events/EventCard/index.tsx
index d03f6805..69f1d16e 100644
--- a/src/components/events/EventCard/index.tsx
+++ b/src/components/events/EventCard/index.tsx
@@ -16,7 +16,7 @@ import {
 } from '@/lib/utils';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useState } from 'react';
+import { ComponentType, Fragment, ReactNode, useState } from 'react';
 import styles from './style.module.scss';
 
 interface EventCardProps {
@@ -26,6 +26,9 @@ interface EventCardProps {
   showYear?: boolean;
   borderless?: boolean;
   hideInfo?: boolean;
+  interactive?: boolean;
+  /** Used by onboarding to highlight the badges */
+  badgeWrapper?: ComponentType<{ children: ReactNode }>;
 }
 
 const EventCard = ({
@@ -35,6 +38,8 @@ const EventCard = ({
   showYear,
   borderless,
   hideInfo,
+  interactive = true,
+  badgeWrapper: BadgeWrapper = Fragment,
 }: EventCardProps) => {
   const { uuid, cover, title, start, end, location, committee } = isOrderPickupEvent(event)
     ? {
@@ -49,6 +54,8 @@ const EventCard = ({
 
   const displayCover = getDefaultEventCover(cover);
 
+  const Component = interactive ? Link : 'div';
+
   return (
     <>
       {isPickupEvent ? (
@@ -71,12 +78,17 @@ const EventCard = ({
         />
       )}
 
-      <Link
+      <Component
         href={`${config.eventsRoute}/${uuid}`}
         data-community={community}
         data-disabled={borderless}
-        className={`${styles.container} ${borderless ? '' : styles.bordered} ${className || ''}`}
+        className={`${styles.container} ${borderless ? '' : styles.bordered} ${className || ''} ${
+          interactive ? styles.interactive : ''
+        }`}
         onClick={e => {
+          if (!interactive) {
+            return;
+          }
           e.preventDefault();
           setExpanded(true);
         }}
@@ -117,10 +129,12 @@ const EventCard = ({
                 {location}
               </Typography>
             </div>
-            <EventBadges event={event} attended={attended} />
+            <BadgeWrapper>
+              <EventBadges event={event} attended={attended} />
+            </BadgeWrapper>
           </div>
         ) : null}
-      </Link>
+      </Component>
     </>
   );
 };
diff --git a/src/components/events/EventCard/style.module.scss b/src/components/events/EventCard/style.module.scss
index d2e9962c..76ee6de9 100644
--- a/src/components/events/EventCard/style.module.scss
+++ b/src/components/events/EventCard/style.module.scss
@@ -20,7 +20,7 @@
     border-radius: 10px;
   }
 
-  &:not([data-disabled]):hover {
+  &.interactive:not([data-disabled]):hover {
     outline-width: 4px;
     transform: scale(0.975);
 
diff --git a/src/components/events/EventCard/style.module.scss.d.ts b/src/components/events/EventCard/style.module.scss.d.ts
index 732f49bd..35b4eb13 100644
--- a/src/components/events/EventCard/style.module.scss.d.ts
+++ b/src/components/events/EventCard/style.module.scss.d.ts
@@ -4,6 +4,7 @@ export type Styles = {
   image: string;
   info: string;
   infoText: string;
+  interactive: string;
 };
 
 export type ClassNames = keyof Styles;
diff --git a/src/components/events/EventFilter/index.tsx b/src/components/events/EventFilter/index.tsx
index 787cbcf1..2613844e 100644
--- a/src/components/events/EventFilter/index.tsx
+++ b/src/components/events/EventFilter/index.tsx
@@ -16,6 +16,7 @@ interface EventFilterProps {
   filters: FilterOptions;
   onFilter?: (param: string, value: string) => void;
   loggedOut?: boolean;
+  className?: string;
 }
 
 export const DEFAULT_FILTER_STATE: FilterEventOptions = {
@@ -29,11 +30,12 @@ const EventFilter = ({
   filters: { search, communityFilter, dateFilter, attendanceFilter },
   onFilter,
   loggedOut,
+  className = '',
 }: EventFilterProps) => {
   const years = useMemo(getYears, []);
 
   return (
-    <div className={styles.controls}>
+    <div className={`${styles.controls} ${className}`}>
       <input
         className={styles.search}
         type="search"
diff --git a/src/components/onboarding/Events/index.tsx b/src/components/onboarding/Events/index.tsx
index 3bcff4a7..30f20689 100644
--- a/src/components/onboarding/Events/index.tsx
+++ b/src/components/onboarding/Events/index.tsx
@@ -1,6 +1,7 @@
 import { Typography } from '@/components/common';
 import { DEFAULT_FILTER_STATE, EventCard, EventFilter } from '@/components/events';
 import { PublicEvent } from '@/lib/types/apiResponses';
+import { PropsWithChildren } from 'react';
 import styles from './style.module.scss';
 
 const dummyEvents: PublicEvent[] = [
@@ -24,50 +25,65 @@ const dummyEvents: PublicEvent[] = [
     discordEvent: '1285653645505069086',
   },
   {
-    uuid: '4c44e774-ada8-4a04-921e-4587d819effd',
+    uuid: 'e154acf7-3465-49e4-baa6-f40bfa2f4ad8',
     organization: 'ACM',
-    committee: 'General',
+    committee: 'Cyber',
     thumbnail: null,
     cover:
-      'https://acmucsd.s3.us-west-1.amazonaws.com/portal/events/4c44e774-ada8-4a04-921e-4587d819effd.png',
-    title: 'Bit Byte Info Session',
+      'https://acmucsd.s3.us-west-1.amazonaws.com/portal/events/e154acf7-3465-49e4-baa6-f40bfa2f4ad8.png',
+    title: 'Lockpicking 101',
     description:
-      "Looking to learn about ACM's Bit-Byte mentorship big/little program? Swing by our info session where we'll discuss the timeline, structure, requirements, and overall vibes! ask any questions and get hyped for the upcoming iteration!",
-    location: 'CSE 1202',
-    eventLink: 'acmurl.com/bitbyteinfosesh',
-    start: '2024-10-02T00:00:00.000Z',
-    end: '2024-10-02T01:30:00.000Z',
+      "Wanna learn how to pick locks? Ever gotten locked out of your dorm? \n\nCome and join ACM Cyber at Lockpicking 101! We'll be demonstrating the core theory of breaking the security of locks, including techniques such as bumping, raking, single-pin picking, and impressioning! We will also be providing practice locks and picks for YOU🫵 to hone your picking skills. Become a lockpicking virtuoso 🤩✨✨",
+    location: 'SME ASML Room',
+    eventLink: 'acmurl.com/lockpicking',
+    start: '2024-04-13T01:30:00.000Z',
+    end: '2024-04-13T03:30:00.000Z',
     pointValue: 10,
     requiresStaff: false,
     staffPointBonus: 0,
-    discordEvent: '1288736115079118881',
+    discordEvent: null,
   },
   {
-    uuid: 'eb4cb2c6-f6e1-4fc0-b086-a93ac066d933',
+    uuid: '9d2023d4-3649-4407-8538-d71687656c45',
     organization: 'ACM',
-    committee: 'General',
+    committee: 'AI',
     thumbnail: null,
     cover:
-      'https://acmucsd.s3.us-west-1.amazonaws.com/portal/events/eb4cb2c6-f6e1-4fc0-b086-a93ac066d933.png',
-    title: 'Resume Review',
+      'https://acmucsd.s3.us-west-1.amazonaws.com/portal/events/9d2023d4-3649-4407-8538-d71687656c45.png',
+    title: 'Deep Reinforcement Learning',
     description:
-      "Recruitment is in season! Come out and join ACM's resume review night, where we'll go over bulletproof strategies for creating and tailoring your resume for whatever opportunities you want to pursue! Regardless of your experience level, we will help you workshop and develop your resume so that you can present your best self!",
-    location: 'Qualcomm Room',
-    eventLink: 'acmurl.com/resume-review',
-    start: '2024-10-03T00:30:00.000Z',
-    end: '2024-10-03T02:00:00.000Z',
+      "Come learn about AI tools and models at ACM AI's third spring quarter technical workshop!",
+    location: 'DIB 202/208',
+    eventLink: 'acmurl.com/ai-sp-ws3',
+    start: '2023-06-03T01:00:00.000Z',
+    end: '2023-06-03T03:00:00.000Z',
     pointValue: 10,
     requiresStaff: false,
     staffPointBonus: 0,
-    discordEvent: '1288736670102851625',
+    discordEvent: null,
   },
 ];
 
+const BadgeAnnotation = ({ children }: PropsWithChildren) => {
+  return (
+    <div className={styles.badgeWrapper}>
+      {children}
+      <div className={styles.annotation}>
+        Each event is categorized under one of the ACM communities and tagged with the number of
+        points you can earn from attending.
+      </div>
+    </div>
+  );
+};
+
 const Events = () => {
   return (
     <div className={styles.page}>
-      <Typography variant="headline/heavy/small">Events</Typography>
+      <Typography variant="headline/heavy/small" className={styles.fadeOut}>
+        Events
+      </Typography>
       <EventFilter
+        className={`${styles.desktopOnly} ${styles.fadeOut}`}
         filters={{
           search: DEFAULT_FILTER_STATE.search,
           communityFilter: DEFAULT_FILTER_STATE.community,
@@ -76,8 +92,16 @@ const Events = () => {
         }}
       />
       <div className={styles.events}>
-        {dummyEvents.map(event => (
-          <EventCard key={event.uuid} event={event} attended={false} showYear />
+        {dummyEvents.map((event, i) => (
+          <EventCard
+            key={event.uuid}
+            event={event}
+            attended={false}
+            showYear
+            className={i !== 0 ? `${styles.desktopOnly} ${styles.fadeOut}` : undefined}
+            badgeWrapper={i === 0 ? BadgeAnnotation : undefined}
+            interactive={false}
+          />
         ))}
       </div>
     </div>
diff --git a/src/components/onboarding/Events/style.module.scss b/src/components/onboarding/Events/style.module.scss
index 0c3d2e91..ab36cf30 100644
--- a/src/components/onboarding/Events/style.module.scss
+++ b/src/components/onboarding/Events/style.module.scss
@@ -10,5 +10,75 @@
     display: flex;
     gap: 1rem;
     justify-content: space-between;
+
+    @media (max-width: vars.$breakpoint-lg) {
+      justify-content: center;
+    }
+
+    .badgeWrapper {
+      animation: badge-highlight 0.5s 1s forwards;
+      border: 2px solid transparent;
+      border-radius: 4px;
+      margin: calc(-0.25rem - 2px);
+      padding: 0.25rem;
+      position: relative;
+      transform-origin: left;
+      width: fit-content;
+
+      .annotation {
+        animation: annotation-appear 0.5s 1.5s backwards;
+        bottom: 100%;
+        left: 0;
+        position: absolute;
+        transform: scale(calc(1 / 1.2));
+        white-space: pre-wrap;
+      }
+    }
+  }
+
+  .fadeOut {
+    animation: fade-out 0.5s 1s forwards;
+  }
+
+  .desktopOnly {
+    @media (max-width: vars.$breakpoint-lg) {
+      display: none;
+    }
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0.3;
+  }
+}
+
+@keyframes badge-highlight {
+  from {
+    background-color: transparent;
+    border-color: transparent;
+    transform: scale(1);
+  }
+
+  to {
+    background-color: rgba(255, 243, 181, 0.6);
+    border-color: #ffdc24;
+    transform: scale(1.2);
+  }
+}
+
+@keyframes annotation-appear {
+  from {
+    opacity: 0;
+    transform: translateY(1rem) scale(calc(1 / 1.2));
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(calc(1 / 1.2));
   }
 }
diff --git a/src/components/onboarding/Events/style.module.scss.d.ts b/src/components/onboarding/Events/style.module.scss.d.ts
index 87aeaac2..bc496c72 100644
--- a/src/components/onboarding/Events/style.module.scss.d.ts
+++ b/src/components/onboarding/Events/style.module.scss.d.ts
@@ -1,5 +1,11 @@
 export type Styles = {
+  annotation: string;
+  annotationAppear: string;
+  badgeHighlight: string;
+  badgeWrapper: string;
+  desktopOnly: string;
   events: string;
+  fadeOut: string;
   page: string;
 };