diff --git a/README.md b/README.md
index f268f60e..b89d76cc 100644
--- a/README.md
+++ b/README.md
@@ -19,6 +19,53 @@
 9. Run `npm install` to install all the node packages.
 10. Run `npm start` to run the React App and check if you can see the rendered site at http://localhost:3000/
 
+## Google Calendar sync (Events page)
+
+The Events page displays upcoming events from the CSES Google Calendar (`csesucsd@gmail.com`) via
+`GET /api/v1/calendar/events`. Backend setup (see `backend/.env.example`):
+
+1. Requires Node 18+ (the backend uses the built-in `fetch`).
+2. In [Google Cloud Console](https://console.cloud.google.com/), create/select a project, enable the
+   **Google Calendar API**, and create an **API key**. Restrict the key to the Calendar API.
+3. In the calendar's settings (as `csesucsd@gmail.com`), enable **"Make available to public"** under
+   Access permissions and set the dropdown to **"See all event details"** (free/busy mode strips
+   titles and locations). The API returns 404 for private calendars even with a valid key.
+4. Add to `backend/.env`:
+   - `GOOGLE_CALENDAR_API_KEY=<your key>`
+   - `GOOGLE_CALENDAR_ID` (default `csesucsd@gmail.com`), found under the calendar's
+     Settings > "Integrate calendar".
+
+When `GOOGLE_CALENDAR_API_KEY` is unset the endpoint logs a warning and returns `[]`, and the
+Events page shows its empty state. Responses are cached in memory for 5 minutes.
+
+### Sorting an event into a community tab
+
+Every event lives on the one calendar; its tab comes from a prefix on the event **title**:
+
+| Title prefix | Tab |
+| --- | --- |
+| `CSES General ...` | General |
+| `CSES Opensource ...` | Open-Source |
+| `CSES Innovate ...` | Innovate |
+| `CSES Dev ...` | Dev |
+
+The prefix is stripped before display, so `CSES Opensource Git Workshop` shows as
+**Git Workshop** under Open-Source. Matching ignores case and tolerates spelling and separator
+variants (`Open-Source`, `open source`, `CSES DEV: ...`). A title with no recognized prefix falls
+under **General** with its title left untouched.
+
+### Labelling an event's type
+
+Each event card shows a small label under the title ("Social", "Career", "Workshop", ...). Set it
+on the Google Calendar event in either of these ways:
+
+- Add a `Type: Social` line anywhere in the event's **description**, or
+- Prefix the event **title** with the type in square brackets: `[Social] Welcome Week Social`.
+
+Either way the tag is stripped before display, so the card shows a clean title and description. The
+label is free-form — any word works, no code change needed. Untagged events fall back to showing
+their community (General / Open-Source / Innovate / Dev).
+
 ## Development
 
 - Prior to any local development, you should pull the latest code from `main` and work on your separate branch.
diff --git a/backend/.env.example b/backend/.env.example
new file mode 100644
index 00000000..b485c54f
--- /dev/null
+++ b/backend/.env.example
@@ -0,0 +1,22 @@
+# MongoDB connection string
+CONNECTION_URL=
+
+# Mailchimp API key
+MAILCHIMP_API_KEY=
+
+# Server port
+PORT=5000
+
+# Google Calendar sync (Events page).
+# Create an API key in Google Cloud Console (enable the Google Calendar API and
+# restrict the key to it). The calendar must be public ("Make available to
+# public" + "See all event details" in its sharing settings).
+# When the key is unset, /api/v1/calendar/events returns an empty list.
+GOOGLE_CALENDAR_API_KEY=
+
+# All events come from one public calendar. An event's community tab is taken
+# from a prefix on its title -- "CSES General", "CSES Opensource",
+# "CSES Innovate", "CSES Dev" -- and the prefix is stripped before display.
+# Titles with no recognized prefix fall under General.
+# Defaults to csesucsd@gmail.com when unset.
+GOOGLE_CALENDAR_ID=csesucsd@gmail.com
diff --git a/backend/controllers/calendarController.js b/backend/controllers/calendarController.js
new file mode 100644
index 00000000..b62086c2
--- /dev/null
+++ b/backend/controllers/calendarController.js
@@ -0,0 +1,135 @@
+import asyncHandler from 'express-async-handler';
+
+// All events live on one public CSES calendar.
+const DEFAULT_CALENDAR_ID = 'csesucsd@gmail.com';
+
+// Upcoming events to request. One calendar now carries every community's
+// events, so this is the budget across all four tabs, not per tab.
+const MAX_RESULTS = 50;
+
+// In-memory cache so we don't burn Google API quota on every page load.
+const CACHE_TTL_MS = 5 * 60 * 1000;
+let cache = { data: null, fetchedAt: 0 };
+
+// Organizers prefix each event title with its community, e.g.
+// "CSES Opensource Workshop". Matching is deliberately loose about spelling
+// and separators so a stray hyphen or capital doesn't silently drop an event
+// into General. Anything with no recognized prefix falls under General.
+const DEFAULT_CATEGORY = 'General';
+const CATEGORY_PREFIXES = [
+  { category: 'Open-Source', pattern: /^\s*CSES[\s_-]+open[\s_-]?source\b[\s:_–—-]*/i },
+  { category: 'Innovate', pattern: /^\s*CSES[\s_-]+innovate\b[\s:_–—-]*/i },
+  { category: 'Dev', pattern: /^\s*CSES[\s_-]+dev\b[\s:_–—-]*/i },
+  { category: 'General', pattern: /^\s*CSES[\s_-]+general\b[\s:_–—-]*/i },
+];
+
+// The prefix is routing information, not part of the event name, so it is
+// stripped from what we display.
+const extractCategory = (summary) => {
+  for (const { category, pattern } of CATEGORY_PREFIXES) {
+    if (pattern.test(summary)) {
+      return { category, title: summary.replace(pattern, '').trim() || summary.trim() };
+    }
+  }
+
+  return { category: DEFAULT_CATEGORY, title: summary };
+};
+
+// Organizers tag an event's type ("Social", "Career", ...) either with a
+// "Type: X" line anywhere in the description or with a "[X]" prefix on the
+// title. Both are stripped from what we display.
+const TYPE_IN_DESCRIPTION = /^[ \t]*type[ \t]*:[ \t]*(.+?)[ \t]*$/im;
+const TYPE_IN_TITLE = /^\s*\[([^\]]+)\]\s*/;
+
+const extractType = (summary, description) => {
+  const fromDescription = description.match(TYPE_IN_DESCRIPTION);
+  if (fromDescription) {
+    return {
+      type: fromDescription[1],
+      title: summary,
+      description: description.replace(TYPE_IN_DESCRIPTION, '').trim(),
+    };
+  }
+
+  const fromTitle = summary.match(TYPE_IN_TITLE);
+  if (fromTitle) {
+    return {
+      type: fromTitle[1].trim(),
+      title: summary.replace(TYPE_IN_TITLE, '').trim(),
+      description,
+    };
+  }
+
+  return { type: '', title: summary, description };
+};
+
+const fetchCalendar = async (apiKey, calendarId) => {
+  const url = new URL(
+    `https://www.googleapis.com/calendar/v3/calendars/${encodeURIComponent(calendarId)}/events`,
+  );
+  url.search = new URLSearchParams({
+    key: apiKey,
+    timeMin: new Date().toISOString(),
+    singleEvents: 'true',
+    orderBy: 'startTime',
+    maxResults: String(MAX_RESULTS),
+  }).toString();
+
+  const response = await fetch(url);
+  if (!response.ok) {
+    const body = await response.text();
+    console.error(`Google Calendar API error for "${calendarId}" (${response.status}): ${body}`);
+    return [];
+  }
+
+  const { items = [] } = await response.json();
+  return items
+    .filter((item) => item.status !== 'cancelled')
+    .map((item) => {
+      // Category prefix comes first in the title, so strip it before looking
+      // for a "[Type]" prefix on what remains.
+      const { category, title: untagged } = extractCategory(item.summary ?? 'Untitled event');
+      const { type, title, description } = extractType(untagged, item.description ?? '');
+
+      return {
+        id: item.id,
+        title,
+        description,
+        type,
+        location: item.location ?? '',
+        start: item.start?.dateTime ?? item.start?.date,
+        end: item.end?.dateTime ?? item.end?.date,
+        allDay: !item.start?.dateTime,
+        htmlLink: item.htmlLink ?? '',
+        category,
+      };
+    });
+};
+
+// Display list of upcoming events from the CSES Google Calendar.
+export const calendarEventList = asyncHandler(async (req, res) => {
+  // Read env inside the handler: dotenv.config() runs after module imports.
+  const apiKey = process.env.GOOGLE_CALENDAR_API_KEY;
+
+  if (!apiKey) {
+    console.warn('GOOGLE_CALENDAR_API_KEY is not set; returning empty calendar event list');
+    return res.json([]);
+  }
+
+  if (cache.data && Date.now() - cache.fetchedAt < CACHE_TTL_MS) {
+    return res.json(cache.data);
+  }
+
+  const calendarId = process.env.GOOGLE_CALENDAR_ID || DEFAULT_CALENDAR_ID;
+  const events = (await fetchCalendar(apiKey, calendarId)).sort(
+    (a, b) => new Date(a.start) - new Date(b.start),
+  );
+
+  cache = { data: events, fetchedAt: Date.now() };
+  res.json(events);
+});
+
+// Export default controller methods
+export default {
+  calendarEventList,
+};
diff --git a/backend/database/connect-db.js b/backend/database/connect-db.js
index 7e4d420f..07fd6b87 100644
--- a/backend/database/connect-db.js
+++ b/backend/database/connect-db.js
@@ -6,6 +6,10 @@ const uri = process.env.CONNECTION_URL;
 
 // Connect to database
 const connectDB = async () => {
+  if (!uri) {
+    console.warn('CONNECTION_URL is not set; skipping MongoDB connection (event/user routes will fail)');
+    return;
+  }
   try {
     await mongoose.connect(uri, {
       useNewUrlParser: true,
diff --git a/backend/index.js b/backend/index.js
index 28346f74..a9ed92f1 100644
--- a/backend/index.js
+++ b/backend/index.js
@@ -9,6 +9,7 @@ import connectMailchimp from './mailchimp/connect-mailchimp.js';
 
 // import routes
 import eventRoutes from './routes/event.js';
+import calendarRoutes from './routes/calendar.js';
 import subscriptionRoutes from './routes/emailSubscription.js';
 import userRoutes from './routes/user.js';
 
@@ -39,6 +40,7 @@ app.get('/', function (_, res) {
 });
 
 app.use(`${baseApi}`, eventRoutes);
+app.use(`${baseApi}/calendar`, calendarRoutes);
 app.use(`${baseApi}/subscribers`, subscriptionRoutes);
 app.use(`${baseApi}/users`, userRoutes);
 
diff --git a/backend/mailchimp/connect-mailchimp.js b/backend/mailchimp/connect-mailchimp.js
index 00a3315a..d4f0588e 100644
--- a/backend/mailchimp/connect-mailchimp.js
+++ b/backend/mailchimp/connect-mailchimp.js
@@ -9,8 +9,16 @@ mailchimp.setConfig({
 });
 
 async function connectMailchimp() {
-  const response = await mailchimp.ping.get();
-  console.log(response.health_status); // if successful, returns "Everything's Chimpy!"
+  if (!apikey) {
+    console.warn('MAILCHIMP_API_KEY is not set; skipping Mailchimp connection (subscriber routes will fail)');
+    return;
+  }
+  try {
+    const response = await mailchimp.ping.get();
+    console.log(response.health_status); // if successful, returns "Everything's Chimpy!"
+  } catch (error) {
+    console.error('Mailchimp connection error:', error);
+  }
 }
 
 export default connectMailchimp;
\ No newline at end of file
diff --git a/backend/package-lock.json b/backend/package-lock.json
index 3587215d..0941a7bd 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -23,6 +23,9 @@
       },
       "devDependencies": {
         "eslint": "^8.43.0"
+      },
+      "engines": {
+        "node": ">=18"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
diff --git a/backend/package.json b/backend/package.json
index bdcc2348..baa4ddd6 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -25,7 +25,7 @@
     "qrcode": "^1.5.3"
   },
   "engines": {
-    "node": ">=16"
+    "node": ">=18"
   },
   "devDependencies": {
     "eslint": "^8.43.0"
diff --git a/backend/routes/calendar.js b/backend/routes/calendar.js
new file mode 100644
index 00000000..2caca985
--- /dev/null
+++ b/backend/routes/calendar.js
@@ -0,0 +1,13 @@
+import express from 'express';
+const router = express.Router();
+
+// Require controller modules.
+import calendarController from '../controllers/calendarController.js';
+
+/// CALENDAR ROUTES ///
+
+// GET request for upcoming events synced from the CSES Google Calendar.
+router.get('/events', calendarController.calendarEventList);
+
+// Export router.
+export default router;
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f0a24f0a..6f0ce1af 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -38,7 +38,7 @@
         "react-countup": "^6.4.2",
         "react-dom": "^18.2.0",
         "react-google-button": "^0.7.2",
-        "react-router-dom": "^6.30.1",
+        "react-router-dom": "^6.30.4",
         "react-scripts": "^5.0.1",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
@@ -3732,9 +3732,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.23.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
-      "integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==",
+      "version": "1.23.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.3.tgz",
+      "integrity": "sha512-4An71tdz9X8+3sI4Qqqd2LWd9vS39J7sqd9EU4Scw7TJE/qB10Flv/UuqbPVgfQV9XoK8Np6jNquZitnZq5i+Q==",
       "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
@@ -17781,12 +17781,12 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.30.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.1.tgz",
-      "integrity": "sha512-X1m21aEmxGXqENEPG3T6u0Th7g0aS4ZmoNynhbs+Cn+q+QGTLt+d5IQ2bHAXKzKcxGJjxACpVbnYQSCRcfxHlQ==",
+      "version": "6.30.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.4.tgz",
+      "integrity": "sha512-SVUsDe+DybHM/WmYKIVYhZh1o5Dcuf16yM6WjG02Q9XVFMZIJyHYhwrr6bFBXZkVP6z69kNkMyBCujt8FaFLJA==",
       "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.23.0"
+        "@remix-run/router": "1.23.3"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -17796,13 +17796,13 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.30.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.1.tgz",
-      "integrity": "sha512-llKsgOkZdbPU1Eg3zK8lCn+sjD9wMRZZPuzmdWWX5SUs8OFkN5HnFVC0u5KMeMaC9aoancFI/KoLuKPqN+hxHw==",
+      "version": "6.30.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.4.tgz",
+      "integrity": "sha512-q4HvNl+mmDdkS0g+MqiBZNteQJCuimWoOyHMy4T/RQLAn9Z29+E91QXRaxOujeMl2HTzRSS0KFPd7lxX3PjV0Q==",
       "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.23.0",
-        "react-router": "6.30.1"
+        "@remix-run/router": "1.23.3",
+        "react-router": "6.30.4"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -23608,9 +23608,9 @@
       "requires": {}
     },
     "@remix-run/router": {
-      "version": "1.23.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
-      "integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA=="
+      "version": "1.23.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.3.tgz",
+      "integrity": "sha512-4An71tdz9X8+3sI4Qqqd2LWd9vS39J7sqd9EU4Scw7TJE/qB10Flv/UuqbPVgfQV9XoK8Np6jNquZitnZq5i+Q=="
     },
     "@restart/hooks": {
       "version": "0.4.11",
@@ -32837,20 +32837,20 @@
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
     "react-router": {
-      "version": "6.30.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.1.tgz",
-      "integrity": "sha512-X1m21aEmxGXqENEPG3T6u0Th7g0aS4ZmoNynhbs+Cn+q+QGTLt+d5IQ2bHAXKzKcxGJjxACpVbnYQSCRcfxHlQ==",
+      "version": "6.30.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.4.tgz",
+      "integrity": "sha512-SVUsDe+DybHM/WmYKIVYhZh1o5Dcuf16yM6WjG02Q9XVFMZIJyHYhwrr6bFBXZkVP6z69kNkMyBCujt8FaFLJA==",
       "requires": {
-        "@remix-run/router": "1.23.0"
+        "@remix-run/router": "1.23.3"
       }
     },
     "react-router-dom": {
-      "version": "6.30.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.1.tgz",
-      "integrity": "sha512-llKsgOkZdbPU1Eg3zK8lCn+sjD9wMRZZPuzmdWWX5SUs8OFkN5HnFVC0u5KMeMaC9aoancFI/KoLuKPqN+hxHw==",
+      "version": "6.30.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.4.tgz",
+      "integrity": "sha512-q4HvNl+mmDdkS0g+MqiBZNteQJCuimWoOyHMy4T/RQLAn9Z29+E91QXRaxOujeMl2HTzRSS0KFPd7lxX3PjV0Q==",
       "requires": {
-        "@remix-run/router": "1.23.0",
-        "react-router": "6.30.1"
+        "@remix-run/router": "1.23.3",
+        "react-router": "6.30.4"
       }
     },
     "react-scripts": {
diff --git a/frontend/package.json b/frontend/package.json
index 0db63c4d..8acf3704 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -33,7 +33,7 @@
     "react-countup": "^6.4.2",
     "react-dom": "^18.2.0",
     "react-google-button": "^0.7.2",
-    "react-router-dom": "^6.30.1",
+    "react-router-dom": "^6.30.4",
     "react-scripts": "^5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4a08aac5..fcfe3309 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -17,6 +17,7 @@ import Sponsorships from './components/Sponsorships/Sponsorships'; // added my m
 import OpenSourceCommunity from './components/OpenSourceCommunity/OpenSourceCommunity';
 import DevCommunity from './components/Dev/DevCommunity'
 import InovateCommunity from './components/Inovate/InovateCommunity'
+import JoinUs from './components/JoinUs/JoinUs';
 
 function App() {
   return (
@@ -38,6 +39,7 @@ function App() {
           <Route path="/opensourcecommunity" element={<OpenSourceCommunity />} /> 
           <Route path="/devcommunity" element={<DevCommunity />} />
           <Route path="/innovatecommunity" element={<InovateCommunity />} />
+          <Route path="/join-us" element={<JoinUs />} />
         </Routes>
         <Footer />
       </Container>
diff --git a/frontend/src/api/index.js b/frontend/src/api/index.js
index 2b1358a3..5a340590 100644
--- a/frontend/src/api/index.js
+++ b/frontend/src/api/index.js
@@ -127,6 +127,18 @@ export const eventListAPI = () => {
   });
 };
 
+export const calendarEventsAPI = () => {
+  return new Promise((resolve, reject) => {
+    API.get('/calendar/events')
+      .then((response) => {
+        resolve(response.data);
+      })
+      .catch((error) => {
+        reject(error);
+      });
+  });
+};
+
 export const eventCreateAPI = (newEvent) => {
   return new Promise((resolve, reject) => {
     API.post('/event/create', newEvent)
diff --git a/frontend/src/components/Footer/Footer.tsx b/frontend/src/components/Footer/Footer.tsx
index deb660a2..e98f0372 100644
--- a/frontend/src/components/Footer/Footer.tsx
+++ b/frontend/src/components/Footer/Footer.tsx
@@ -1,12 +1,16 @@
 import React from 'react';
 import { Box, Typography, Link } from '@mui/material';
 import InstagramIcon from '../../images/instagram-icon.svg';
+import DiscordIcon from '../../images/discord-icon.svg';
+import FacebookIcon from '../../images/facebook-icon.svg';
 import LinkedInIcon from '../../images/linkedin-icon.svg';
 import csesLogo from '../../images/logo.png';
 import { colors, fonts } from '../../theme';
 
 const links = [
   { logo: InstagramIcon, link: 'https://www.instagram.com/cses_ucsd/', label: 'Instagram' },
+  { logo: DiscordIcon, link: 'https://discord.gg/UkdACyy2h8', label: 'Discord' },
+  { logo: FacebookIcon, link: 'https://www.facebook.com/csesucsd', label: 'Facebook' },
   { logo: LinkedInIcon, link: 'https://www.linkedin.com/in/csesucsd/', label: 'LinkedIn' },
 ];
 
diff --git a/frontend/src/components/JoinUs/JoinUs.tsx b/frontend/src/components/JoinUs/JoinUs.tsx
new file mode 100644
index 00000000..749cfe3e
--- /dev/null
+++ b/frontend/src/components/JoinUs/JoinUs.tsx
@@ -0,0 +1,131 @@
+import { Box, Button, Container, Grid, useMediaQuery } from '@mui/material';
+import { joinUsStyles } from './styles';
+import chainGraphic from '../../images/joinus/chain.png';
+import lightbulbGraphic from '../../images/joinus/lightbulb.png';
+import gearGraphic from '../../images/joinus/gear.png';
+import ASLogo from '../../images/sponsors/AS_Logo.png';
+import CSEDeptLogo from '../../images/sponsors/CSEDept_Logo.png';
+import BasementLogo from '../../images/sponsors/Basement_Logo.jpeg';
+import EyePopAILogo from '../../images/sponsors/EyePopAI_Logo.png';
+import BSLLogo from '../../images/sponsors/BSL.png';
+import IGELogo from '../../images/sponsors/IGE_Logo.png';
+import LinuxLogo from '../../images/sponsors/Linux_Logo.png';
+import LovableLogo from '../../images/sponsors/Lovable_Logo.png';
+import OSPOLogo from '../../images/sponsors/OSPO_Logo.png';
+import PersonaLogo from '../../images/sponsors/Persona_Logo.png';
+import RobloxLogo from '../../images/sponsors/Roblox_Logo.png';
+
+const APPLY_URL = '#';
+
+const STATS = [
+  { number: '455+', label: 'members' },
+  { number: '18+', label: 'annual events' },
+  { number: '12+', label: 'annual projects' },
+];
+
+// Flat list: the grid reflows it per breakpoint, so adding or removing a
+// sponsor needs no layout changes.
+const SPONSORS = [
+  { logo: ASLogo, name: 'Associated Students' },
+  { logo: CSEDeptLogo, name: 'CSE Department' },
+  { logo: BSLLogo, name: 'Big Strategy Lab' },
+  { logo: RobloxLogo, name: 'Roblox' },
+  { logo: PersonaLogo, name: 'Persona' },
+  { logo: LovableLogo, name: 'Lovable' },
+  { logo: EyePopAILogo, name: 'EyePop AI' },
+  { logo: IGELogo, name: 'IGE' },
+  { logo: LinuxLogo, name: 'Linux Foundation' },
+  { logo: OSPOLogo, name: 'OSPO' },
+  { logo: BasementLogo, name: 'Basement' },
+];
+
+// The design staggers the tiles: rows alternate three, two, three, two, with
+// the short rows inset between the full ones. Deriving the rows from the list
+// keeps that shape for any number of sponsors.
+const ROW_PATTERN = [3, 2];
+
+const chunkIntoRows = <T,>(items: T[]): T[][] => {
+  const rows: T[][] = [];
+  let index = 0;
+  while (index < items.length) {
+    const size = ROW_PATTERN[rows.length % ROW_PATTERN.length];
+    rows.push(items.slice(index, index + size));
+    index += size;
+  }
+  return rows;
+};
+
+const DECOR = [
+  { src: chainGraphic, key: 'chain', position: 'decorChain' as const },
+  { src: lightbulbGraphic, key: 'lightbulb', position: 'decorLightbulb' as const },
+  { src: gearGraphic, key: 'gear', position: 'decorGear' as const },
+];
+
+const JoinUs = () => {
+  const styles = joinUsStyles();
+  // Below sm the stagger has no room to read; fall back to an even 2-up grid.
+  const isStaggered = useMediaQuery('(min-width:600px)');
+  const sponsorRows = isStaggered ? chunkIntoRows(SPONSORS) : [SPONSORS];
+  const tilesPerRow = isStaggered ? ROW_PATTERN[0] : 2;
+
+  return (
+    <Box sx={styles.pageWrapper}>
+      {DECOR.map(({ src, key, position }) => (
+        <Box
+          key={key}
+          component="img"
+          src={src}
+          alt=""
+          aria-hidden="true"
+          sx={{ ...styles.decor, ...styles[position] }}
+        />
+      ))}
+
+      <Container maxWidth="lg" sx={styles.container}>
+        <Box component="h1" sx={{ ...styles.heading, m: 0 }}>
+          Join us.
+        </Box>
+        <Box sx={styles.subtext}>Interested in joining our initiative? Apply below!</Box>
+        <Button href={APPLY_URL} sx={styles.applyButton}>
+          Apply
+        </Button>
+
+        <Box sx={styles.tagline}>We are UCSD&apos;s largest computing organization</Box>
+
+        <Grid container spacing={3} justifyContent="center" sx={styles.statsGrid}>
+          {STATS.map((stat) => (
+            <Grid item xs={12} sm={4} key={stat.label}>
+              <Box sx={styles.statBox}>
+                <Box sx={styles.statNumber}>{stat.number}</Box>
+                <Box sx={styles.statLabel}>{stat.label}</Box>
+              </Box>
+            </Grid>
+          ))}
+        </Grid>
+
+        <Box component="h2" sx={{ ...styles.partnersHeading, m: 0 }}>
+          Thank You to Our Current Partners
+        </Box>
+
+        <Box sx={styles.sponsorRows}>
+          {sponsorRows.map((row, rowIndex) => (
+            <Box key={rowIndex} sx={styles.sponsorRow}>
+              {row.map((sponsor) => (
+                <Box key={sponsor.name} sx={styles.sponsorTile(tilesPerRow)}>
+                  <Box
+                    component="img"
+                    src={sponsor.logo}
+                    alt={sponsor.name}
+                    sx={styles.sponsorImg}
+                  />
+                </Box>
+              ))}
+            </Box>
+          ))}
+        </Box>
+      </Container>
+    </Box>
+  );
+};
+
+export default JoinUs;
diff --git a/frontend/src/components/JoinUs/styles.ts b/frontend/src/components/JoinUs/styles.ts
new file mode 100644
index 00000000..5504ad86
--- /dev/null
+++ b/frontend/src/components/JoinUs/styles.ts
@@ -0,0 +1,177 @@
+import { colors, fonts, radii } from '../../theme';
+
+// Gap between sponsor tiles, in px. Shared by the row gap and the tile width
+// calculation so the stagger stays aligned if it changes.
+export const SPONSOR_GAP = 24;
+
+export const joinUsStyles = () => ({
+  pageWrapper: {
+    position: 'relative' as const,
+    minHeight: '100vh',
+    overflowX: 'hidden' as const,
+    color: colors.textPrimary,
+    // Accent washes are placed in percentages so they track the viewport
+    // instead of the fixed canvas the design was traced onto.
+    background: `
+      radial-gradient(ellipse 90% 55% at 20% 15%, rgba(114, 93, 240, 0.15), transparent 65%),
+      radial-gradient(ellipse 90% 55% at 80% 32%, rgba(100, 195, 227, 0.12), transparent 65%),
+      radial-gradient(ellipse 90% 55% at 50% 68%, rgba(93, 240, 196, 0.10), transparent 65%),
+      ${colors.background}
+    `,
+    pt: { xs: 14, md: 18 },
+    pb: { xs: 8, md: 12 },
+  },
+  container: {
+    position: 'relative' as const,
+    zIndex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    px: { xs: 3, md: 6 },
+  },
+
+  // Decorative artwork. Hidden on small screens, where it would crowd the copy.
+  decor: {
+    display: { xs: 'none', lg: 'block' },
+    position: 'absolute' as const,
+    pointerEvents: 'none' as const,
+    zIndex: 0,
+    userSelect: 'none' as const,
+  },
+  decorChain: {
+    top: '11%',
+    left: '3%',
+    width: 'clamp(180px, 19vw, 340px)',
+  },
+  decorLightbulb: {
+    top: '7%',
+    right: '4%',
+    width: 'clamp(120px, 12vw, 220px)',
+  },
+  decorGear: {
+    top: '30%',
+    left: '-2%',
+    width: 'clamp(220px, 22vw, 400px)',
+  },
+
+  // Hero
+  heading: {
+    fontFamily: fonts.heading,
+    fontWeight: 400,
+    fontSize: { xs: '2rem', md: '2.5rem' },
+    color: colors.gold,
+    textAlign: 'center',
+  },
+  subtext: {
+    fontFamily: fonts.heading,
+    fontSize: { xs: '0.95rem', md: '1.15rem' },
+    color: colors.textPrimary,
+    textAlign: 'center',
+    maxWidth: '620px',
+    lineHeight: 1.5,
+    mt: 2.5,
+  },
+  applyButton: {
+    fontFamily: fonts.heading,
+    fontSize: { xs: '1rem', md: '1.15rem' },
+    fontWeight: 700,
+    textTransform: 'none',
+    color: colors.textPrimary,
+    backgroundColor: colors.surface,
+    border: `1px solid ${colors.purple}`,
+    borderRadius: radii.card,
+    px: { xs: 4, md: 5 },
+    py: { xs: 1, md: 1.25 },
+    mt: 4,
+    '&:hover': { backgroundColor: 'rgba(114, 93, 240, 0.15)', borderColor: colors.purpleBright },
+  },
+  tagline: {
+    fontFamily: fonts.heading,
+    fontSize: { xs: '1rem', md: '1.15rem' },
+    color: colors.textPrimary,
+    textAlign: 'center',
+    mt: { xs: 7, md: 9 },
+  },
+
+  // Stats
+  statsGrid: {
+    width: '100%',
+    maxWidth: '900px',
+    mt: 4,
+  },
+  statBox: {
+    boxSizing: 'border-box' as const,
+    backgroundColor: colors.surface,
+    border: `1px solid ${colors.purple}`,
+    borderRadius: radii.card,
+    height: '100%',
+    minHeight: { xs: '110px', md: '150px' },
+    px: 2,
+    py: { xs: 2.5, md: 4 },
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+  },
+  statNumber: {
+    fontFamily: fonts.heading,
+    fontWeight: 700,
+    fontSize: { xs: '1.75rem', md: '2.25rem' },
+    color: colors.textPrimary,
+  },
+  statLabel: {
+    fontFamily: fonts.heading,
+    fontSize: { xs: '0.9rem', md: '1.05rem' },
+    color: colors.textPrimary,
+    lineHeight: 1.3,
+    mt: 1,
+  },
+
+  // Partners
+  partnersHeading: {
+    fontFamily: fonts.heading,
+    fontWeight: 400,
+    fontSize: { xs: '1.5rem', md: '2.2rem' },
+    color: colors.textPrimary,
+    textAlign: 'center',
+    mt: { xs: 7, md: 10 },
+  },
+  sponsorRows: {
+    width: '100%',
+    maxWidth: '900px',
+    mt: { xs: 4, md: 6 },
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: `${SPONSOR_GAP}px`,
+  },
+  // Rows are centred, so a short row insets itself between the row above —
+  // that is what produces the design's staggered brick pattern, with no
+  // per-tile positioning.
+  sponsorRow: {
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    flexWrap: 'wrap' as const,
+    gap: `${SPONSOR_GAP}px`,
+  },
+  sponsorTile: (perRow: number) => ({
+    boxSizing: 'border-box' as const,
+    // Every tile is one third of a full row wide, whatever its row holds.
+    width: `calc((100% - ${SPONSOR_GAP * (perRow - 1)}px) / ${perRow})`,
+    backgroundColor: '#D9D9D9',
+    borderRadius: radii.card,
+    // Holds the design's tile proportion at any column width.
+    aspectRatio: '267 / 148',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    p: 2,
+  }),
+  sponsorImg: {
+    maxWidth: '85%',
+    maxHeight: '85%',
+    objectFit: 'contain' as const,
+  },
+});
diff --git a/frontend/src/components/NavBar/NavBar.tsx b/frontend/src/components/NavBar/NavBar.tsx
index dd6f0ab2..350524f1 100644
--- a/frontend/src/components/NavBar/NavBar.tsx
+++ b/frontend/src/components/NavBar/NavBar.tsx
@@ -130,8 +130,16 @@ const NavBar = () => {
               ))}
             </Menu>
 
-            {/* TODO: point this at the Join us page once that branch is merged. */}
-            <Button sx={styles.button}>Join us</Button>
+            <Button
+              component={Link}
+              to="/join-us"
+              sx={{
+                ...styles.button,
+                ...(location.pathname === '/join-us' ? styles.buttonActive : {}),
+              }}
+            >
+              Join us
+            </Button>
           </Box>
 
           {isLoggedIn && userData && (
@@ -193,7 +201,7 @@ const NavBar = () => {
             button
             key="Join us"
             sx={styles.listitem}
-            onClick={() => setIsDrawerOpen(false)}
+            onClick={() => clickItem('/join-us')}
           >
             <ListItemText
               primary={
diff --git a/frontend/src/components/NewEvents/EventCard.tsx b/frontend/src/components/NewEvents/EventCard.tsx
index c274c9e0..58c079a6 100644
--- a/frontend/src/components/NewEvents/EventCard.tsx
+++ b/frontend/src/components/NewEvents/EventCard.tsx
@@ -1,91 +1,65 @@
-import React from "react";
-import { Typography, Box } from "@mui/material";
+import { Box } from '@mui/material';
+import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
+import AccessTimeOutlinedIcon from '@mui/icons-material/AccessTimeOutlined';
+import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined';
+import { CalendarEvent } from '../../utils/types';
+import { eventCardStyles } from './styles';
 
-type EventCardProps = {
-  title: string;
-  startDate: string;
-  endDate: string;
-  location: string;
-  calendar_link: string;
-  description: string;
-  instagram_link: string;
-  _id: string;
-};
+const TIME_ZONE = 'America/Los_Angeles';
+
+const dateFormatter = new Intl.DateTimeFormat('en-US', {
+  timeZone: TIME_ZONE,
+  month: 'long',
+  day: 'numeric',
+  year: 'numeric',
+});
 
-const EventCard = ({
-  title,
-  startDate,
-  endDate,
-  location,
-  calendar_link,
-  description,
-  instagram_link,
-  _id,
-}: EventCardProps) => {
-  const start = new Date(startDate);
-  const end = new Date(endDate);
+const timeFormatter = new Intl.DateTimeFormat('en-US', {
+  timeZone: TIME_ZONE,
+  hour: 'numeric',
+  minute: '2-digit',
+});
 
-  const formattedDate = start.toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-  });
+const formatDate = (event: CalendarEvent) => {
+  // All-day events use date-only strings (e.g. "2026-04-28"); parse as local
+  // midnight rather than UTC so the displayed day doesn't shift.
+  const date = event.allDay ? new Date(`${event.start}T00:00:00`) : new Date(event.start);
+  return dateFormatter.format(date);
+};
 
-  const formattedTime = `${start.toLocaleTimeString("en-US", {
-    hour: "numeric",
-    minute: "2-digit",
-  })} - ${end.toLocaleTimeString("en-US", {
-    hour: "numeric",
-    minute: "2-digit",
-  })}`;
+const formatTimeRange = (event: CalendarEvent) => {
+  if (event.allDay) return 'All day';
+  return `${timeFormatter.format(new Date(event.start))} - ${timeFormatter.format(
+    new Date(event.end),
+  )}`;
+};
+
+const EventCard = ({ event }: { event: CalendarEvent }) => {
+  const styles = eventCardStyles();
 
   return (
-    <Box
-      sx={{
-        display: "inline-block",
-        borderRadius: 6,
-        p: "4px",
-        background: "linear-gradient(45deg, orange, cyan, purple, blue)",
-      }}
-    >
-      <Box
-        sx={{
-          minHeight: "20rem",
-          width: "16rem",
-          borderRadius: 6,
-          bgcolor: "white",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "space-between",
-          boxShadow: 3,
-          p: 2,
-        }}
-      >
-        <Typography
-          variant="subtitle1"
-          fontWeight="bold"
-          fontSize={20}
-          align="center"
-          sx={{
-            mb: 1,
-            overflowWrap: "break-word",
-            wordBreak: "break-word",
-            fontSize: "25px"
-          }}
-        >
-          {title}
-        </Typography>
-        <Box sx={{ textAlign: "center" }}>
-          <Typography variant="body2" color="text.secondary" sx={{ fontSize: "18px" }}>
-            {formattedDate} | {formattedTime}
-          </Typography>
-          <Typography variant="body2" color="text.secondary" sx={{ fontSize: "18px" }}>
-            {location}
-          </Typography>
+    <Box sx={styles.card}>
+      <Box sx={styles.title}>{event.title}</Box>
+      <Box sx={styles.category}>{event.type || event.category}</Box>
+
+      <Box sx={styles.detailsWrapper}>
+        <Box sx={styles.detailRow}>
+          <CalendarTodayOutlinedIcon sx={styles.detailIcon} />
+          <Box sx={styles.detailText}>{formatDate(event)}</Box>
+        </Box>
+        <Box sx={styles.detailRow}>
+          <AccessTimeOutlinedIcon sx={styles.detailIcon} />
+          <Box sx={styles.detailText}>{formatTimeRange(event)}</Box>
         </Box>
+        {event.location && (
+          <Box sx={styles.detailRow}>
+            <LocationOnOutlinedIcon sx={styles.detailIcon} />
+            <Box sx={styles.detailText}>{event.location}</Box>
+          </Box>
+        )}
       </Box>
     </Box>
   );
 };
 
-export default EventCard;
\ No newline at end of file
+export default EventCard;
diff --git a/frontend/src/components/NewEvents/Events.tsx b/frontend/src/components/NewEvents/Events.tsx
index c5c9dcaf..4114a8e4 100644
--- a/frontend/src/components/NewEvents/Events.tsx
+++ b/frontend/src/components/NewEvents/Events.tsx
@@ -1,394 +1,72 @@
-import React, { useState, useEffect } from "react";
-import { Box, Grid, Button, Typography, IconButton, useTheme, useMediaQuery } from "@mui/material";
-import { ArrowBackIosNewRounded, ArrowForwardIosRounded } from "@mui/icons-material";
-import axios from "axios";
-import EventCard from "./EventCard";
-import { positions } from "@mui/system";
+import { useEffect, useMemo, useState } from 'react';
+import { Box, CircularProgress, Container, Stack } from '@mui/material';
+import EventCard from './EventCard';
+import SegmentedTabs from '../common/SegmentedTabs';
+import { calendarEventsAPI } from '../../api';
+import { CalendarEvent } from '../../utils/types';
+import { colors } from '../../theme';
+import { eventsStyles } from './styles';
 
-const categories = ["General", "Dev", "Open Source", "Innovate"];
-
-const categoryColors: Record<string, string> = {
-    General: "#EBB111",
-    Dev: "#5DF0C4",
-    "Open Source": "#64C3E3",
-    Innovate: "#725DF0",
-};
-
-interface Event {
-    calendar_link: string;
-    description: string;
-    end_time: string;
-    instagram_link: string;
-    location: string;
-    start_time: string;
-    title: string;
-    _id: string;
-    event_type: string;
-}
+const CATEGORIES = ['General', 'Open-Source', 'Innovate', 'Dev'];
 
 const EventsPage = () => {
-    const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
-    const [upcomingEvents, setUpcomingEvents] = useState<Event[]>([]);
-    const [pastEvents, setPastEvents] = useState<Event[]>([]);
-    const [currentIndex, setCurrentIndex] = useState(0);
-
-    useEffect(() => {
-        const fetchEvents = async () => {
-            try {
-                const [upcomingRes, pastRes] = await Promise.all([
-                    axios.get<Event[]>(`${process.env.REACT_APP_BACKEND_URL}/api/v1/events?type=upcoming`),
-                    axios.get<Event[]>(`${process.env.REACT_APP_BACKEND_URL}/api/v1/events?type=past`),
-                ]);
-
-                const sortedUpcoming = upcomingRes.data.sort(
-                    (a, b) =>
-                        new Date(a.start_time).getTime() - new Date(b.start_time).getTime()
-                );
-                const sortedPast = pastRes.data.sort(
-                    (a, b) =>
-                        new Date(b.start_time).getTime() - new Date(a.start_time).getTime()
-                );
-
-                setUpcomingEvents(sortedUpcoming);
-                setPastEvents(sortedPast);
-            } catch (error) {
-                console.error("Error fetching events:", error);
-            }
-        };
-
-        fetchEvents();
-    }, []);
-
-    const theme = useTheme();
-    const isXs = useMediaQuery(theme.breakpoints.down("sm"));
-    const isSm = useMediaQuery(theme.breakpoints.between("sm", "md"));
-    const isMd = useMediaQuery(theme.breakpoints.between("md", "lg"));
-
-    const VISIBLE_COUNT = isXs ? 1 : isSm ? 2 : isMd ? 3 : 4;
-
-    const handlePrev = () => {
-        setCurrentIndex((prev) =>
-            prev === 0 ? Math.max(filteredUpcomingEvents.length - VISIBLE_COUNT, 0) : prev - 1
-        );
-    };
-
-    const handleNext = () => {
-        setCurrentIndex((prev) =>
-            prev >= Math.max(filteredUpcomingEvents.length - VISIBLE_COUNT, 0) ? 0 : prev + 1
-        );
-    };
-
-    const filteredUpcomingEvents = selectedCategory
-        ? upcomingEvents.filter((event: any) => event.event_type === selectedCategory)
-        : upcomingEvents;
-
-    const filteredPastEvents = selectedCategory
-        ? pastEvents.filter((event: any) => event.event_type === selectedCategory)
-        : pastEvents;
-
-    let visibleEvents: Event[] = [];
-    if (filteredUpcomingEvents.length <= VISIBLE_COUNT) {
-        visibleEvents = filteredUpcomingEvents;
-    } else {
-        visibleEvents = filteredUpcomingEvents.slice(currentIndex, currentIndex + VISIBLE_COUNT);
-
-        if (visibleEvents.length < VISIBLE_COUNT) {
-            const wrapCount = VISIBLE_COUNT - visibleEvents.length;
-            visibleEvents = visibleEvents.concat(filteredUpcomingEvents.slice(0, wrapCount));
-        }
-    }
-
-    const [pastIndex, setPastIndex] = useState(0);
-
-    const pastCols = isXs ? 1 : isSm ? 2 : isMd ? 3 : 4;
-    const pastRows = 3;
-    const pastPerPage = pastCols * pastRows;
-
-    const paginatedPastEvents = [];
-    for (let i = 0; i < filteredPastEvents.length; i += pastPerPage) {
-        paginatedPastEvents.push(filteredPastEvents.slice(i, i + pastPerPage));
-    }
-
-    const handlePastPrev = () => {
-        setPastIndex((prev) => (prev === 0 ? paginatedPastEvents.length - 1 : prev - 1));
-    };
-
-    const handlePastNext = () => {
-        setPastIndex((prev) => (prev === paginatedPastEvents.length - 1 ? 0 : prev + 1));
-    };
-
-    return (
-        <Box
-            sx={{
-                mt: 18,
-                mb: 18,
-                maxWidth: "1400px",
-                mx: "auto",
-                px: { xs: 2, sm: 3, md: 4, lg: 5 },
-            }}
-        >
-            <Typography
-                variant="h3"
-                align="center"
-                fontWeight="bold"
-                sx={{
-                    mb: { xs: 2, md: 3 },
-                    color: "white",
-                    fontSize: { sm: "40px", md: "55px", lg: "65px" }
-                }}
-            >
-                Events
-            </Typography>
-
-            {/* Category Buttons */}
-            <Box
-                sx={{
-                    display: "flex",
-                    justifyContent: "center",
-                    gap: { xs: 1.5, sm: 3, md: 4, lg: 6 },
-                    flexWrap: "wrap",
-                    mb: { xs: 4, md: 6 },
-                    mt: { xs: 4, md: 6 },
-                }}
-            >
-                {categories.map((cat) => {
-                    const isSelected = selectedCategory === cat;
-                    const color = categoryColors[cat];
-                    return (
-                        <Button
-                            key={cat}
-                            onClick={() => setSelectedCategory(isSelected ? null : cat)}
-                            variant={isSelected ? "contained" : "outlined"}
-                            sx={{
-                                minWidth: { xs: "100px", sm: "140px", md: "180px", lg: "220px" },
-                                py: { xs: 0.8, sm: 1, md: 1.2 },
-                                borderRadius: 2,
-                                textTransform: "none",
-                                fontWeight: "bold",
-                                fontSize: { xs: "0.75rem", sm: "0.9rem", md: "1.1rem", lg: "1.3rem" },
-                                borderColor: color,
-                                borderWidth: 2,
-                                color: isSelected ? "white" : color,
-                                bgcolor: isSelected ? color : "transparent",
-                                "&:hover": {
-                                    borderWidth: 2,
-                                    bgcolor: isSelected ? color : "rgba(255,255,255,0.1)",
-                                },
-                            }}
-                        >
-                            {cat}
-                        </Button>
-                    );
-                })}
-            </Box>
-
-            {/* Upcoming Events */}
-            <Box sx={{ textAlign: "center", mb: { xs: 12, md: 20 }, mt: { xs: 6, md: 8 } }}>
-                {filteredUpcomingEvents.length > 0 ? (
-                    <Box
-                        sx={{
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            width: "100%",
-                            position: "relative",
-                        }}
-                    >
-                        {filteredUpcomingEvents.length > VISIBLE_COUNT && (
-                            <IconButton
-                                disableRipple
-                                onClick={handlePrev}
-                                sx={{
-                                    color: "white",
-                                    flexShrink: 0,
-                                    "&:hover": { color: "rgba(255,255,255,0.5)" },
-                                    mr: { xs: 1, lg: 2 }
-                                }}
-                            >
-                                <ArrowBackIosNewRounded sx={{ fontSize: { sm: 28, md: 32 } }} />
-                            </IconButton>
-                        )}
-                        <Box
-                            sx={{
-                                flex: 1,
-                                display: "flex",
-                                justifyContent: "center",
-                                overflow: "hidden",
-                                minWidth: 0,
-                            }}
-                        >
-                            <Box
-                                sx={{
-                                    display: "flex",
-                                    justifyContent: "center",
-                                    gap: { xs: 2, sm: 2.5, md: 3, lg: 3.5 },
-                                    flexWrap: "nowrap",
-                                    width: "100%",
-                                    alignItems: { xs: "center", lg: "stretch" },
-                                    position: "relative"
-                                }}
-                            >
-                                {visibleEvents.map((event) => (
-                                    <Box
-                                        key={event._id}
-                                        sx={{
-                                            flex: {
-                                                xs: "0 0 100%",
-                                                sm: "0 0 auto",
-                                                md: "0 0 auto",
-                                                lg: "0 0 auto"
-                                            },
-                                            width: {
-                                                xs: "85%",
-                                                sm: "calc((100% - 20px) / 2)",
-                                                md: "calc((100% - 48px) / 3)",
-                                                lg: "calc((100% - 84px) / 4)"
-                                            },
-                                            display: "flex",
-                                        }}
-                                    >
-                                        <EventCard
-                                            title={event.title}
-                                            startDate={event.start_time}
-                                            endDate={event.end_time}
-                                            location={event.location}
-                                            calendar_link={event.calendar_link}
-                                            description={event.description}
-                                            instagram_link={event.instagram_link}
-                                            _id={event._id}
-                                        />
-                                    </Box>
-                                ))}
-                            </Box>
-                        </Box>
-                        {filteredUpcomingEvents.length > VISIBLE_COUNT && (
-                            <IconButton
-                                disableRipple
-                                onClick={handleNext}
-                                sx={{
-                                    color: "white",
-                                    flexShrink: 0,
-                                    "&:hover": { color: "rgba(255,255,255,0.5)" },
-                                    ml: { xs: 0, lg: 2 }
-                                }}
-                            >
-                                <ArrowForwardIosRounded sx={{ fontSize: { sm: 28, md: 32 } }} />
-                            </IconButton>
-                        )}
-                    </Box>
-                ) : (
-                    <Typography
-                        sx={{
-                            color: "white",
-                            mt: 2,
-                            fontSize: { xs: "1.1rem", sm: "1.3rem", md: "1.5rem" }
-                        }}
-                        align="center"
-                    >
-                        No upcoming events.
-                    </Typography>
-                )}
-            </Box>
-
-            {/* Past Events */}
-            <Box sx={{ textAlign: "center" }}>
-                <Typography
-                    variant="h3"
-                    align="center"
-                    fontWeight="bold"
-                    sx={{
-                        mb: { xs: 6, md: 8 },
-                        color: "white",
-                        fontSize: { sm: "40px", md: "55px", lg: "65px" }
-                    }}
-                >
-                    Past Events
-                </Typography>
-
-                {filteredPastEvents.length > 0 ? (
-                    <Box
-                        sx={{
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            width: "100%",
-                            position: "relative",
-                        }}
-                    >
-                        {paginatedPastEvents.length > 1 && (
-                            <IconButton
-                                disableRipple
-                                onClick={handlePastPrev}
-                                sx={{
-                                    color: "white",
-                                    flexShrink: 0,
-                                    "&:hover": { color: "rgba(255,255,255,0.5)" },
-                                }}
-                            >
-                                <ArrowBackIosNewRounded sx={{ fontSize: { sm: 28, md: 32 } }} />
-                            </IconButton>
-                        )}
+  const styles = eventsStyles();
+
+  const [events, setEvents] = useState<CalendarEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [category, setCategory] = useState('General');
+
+  useEffect(() => {
+    calendarEventsAPI()
+      .then((data: CalendarEvent[]) => setEvents(data))
+      .catch((error: unknown) => {
+        console.error('Error fetching calendar events:', error);
+        setEvents([]);
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  const filteredEvents = useMemo(
+    () => events.filter((event) => event.category === category),
+    [events, category],
+  );
+
+  return (
+    <Box sx={styles.pageWrapper}>
+      <Container maxWidth="xl" sx={styles.container}>
+        <Box component="h1" sx={{ ...styles.title, m: 0 }}>
+          Events
+        </Box>
+        <Box sx={styles.subtitle}>
+          Join us for workshops, hackathons, tech talks, and networking events
+        </Box>
 
-                        <Box sx={{ flex: 1, minWidth: 0, px: { xs: 1, sm: 0 } }}>
-                            <Grid container spacing={{ xs: 2, sm: 2, md: 2.5 }} justifyContent="center" alignItems="stretch">
-                                {paginatedPastEvents[pastIndex].map((event) => (
-                                    <Grid
-                                        item
-                                        key={event._id}
-                                        xs={12}
-                                        sm={6}
-                                        md={4}
-                                        lg={3}
-                                        sx={{
-                                            display: "flex",
-                                            justifyContent: "center",
-                                        }}
-                                    >
-                                        <EventCard
-                                            title={event.title}
-                                            startDate={event.start_time}
-                                            endDate={event.end_time}
-                                            location={event.location}
-                                            calendar_link={event.calendar_link}
-                                            description={event.description}
-                                            instagram_link={event.instagram_link}
-                                            _id={event._id}
-                                        />
-                                    </Grid>
-                                ))}
-                            </Grid>
-                        </Box>
+        <Box component="h2" sx={{ ...styles.sectionHeading, m: 0 }}>
+          Upcoming Events
+        </Box>
 
-                        {paginatedPastEvents.length > 1 && (
-                            <IconButton
-                                disableRipple
-                                onClick={handlePastNext}
-                                sx={{
-                                    color: "white",
-                                    flexShrink: 0,
-                                    "&:hover": { color: "rgba(255,255,255,0.5)" },
-                                }}
-                            >
-                                <ArrowForwardIosRounded sx={{ fontSize: { sm: 28, md: 32 } }} />
-                            </IconButton>
-                        )}
-                    </Box>
-                ) : (
-                    <Typography
-                        sx={{
-                            color: "white",
-                            mt: { xs: 6, md: 8 },
-                            mb: { xs: 6, md: 8 },
-                            fontSize: { sm: "1.5rem", md: "1.5rem", lg: "1.5rem" }
-                        }}
-                        align="center"
-                    >
-                        No past events.
-                    </Typography>
-                )}
-            </Box>
+        <Box sx={styles.tabsWrapper}>
+          <SegmentedTabs options={CATEGORIES} value={category} onChange={setCategory} />
         </Box>
-    );
+
+        {loading ? (
+          <Box sx={styles.statusWrapper}>
+            <CircularProgress sx={{ color: colors.purple }} />
+          </Box>
+        ) : filteredEvents.length > 0 ? (
+          <Stack spacing={3} sx={styles.cardsStack}>
+            {filteredEvents.map((event) => (
+              <EventCard key={event.id} event={event} />
+            ))}
+          </Stack>
+        ) : (
+          <Box sx={styles.statusWrapper}>
+            <Box sx={styles.emptyText}>No upcoming events. Check back soon!</Box>
+          </Box>
+        )}
+      </Container>
+    </Box>
+  );
 };
 
-export default EventsPage;
\ No newline at end of file
+export default EventsPage;
diff --git a/frontend/src/components/NewEvents/styles.ts b/frontend/src/components/NewEvents/styles.ts
new file mode 100644
index 00000000..fd3f3c8f
--- /dev/null
+++ b/frontend/src/components/NewEvents/styles.ts
@@ -0,0 +1,105 @@
+import { colors, fonts, radii } from '../../theme';
+
+export const eventsStyles = () => ({
+  pageWrapper: {
+    backgroundColor: colors.background,
+    minHeight: '100vh',
+    pb: 10,
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    px: { xs: 3, md: 6 },
+    pt: { xs: 16, md: 18 },
+  },
+  title: {
+    fontFamily: fonts.heading,
+    fontWeight: 700,
+    fontSize: { xs: '2.2rem', md: '3rem' },
+    color: colors.textPrimary,
+    textAlign: 'center',
+  },
+  subtitle: {
+    fontFamily: fonts.heading,
+    fontSize: { xs: '0.85rem', md: '1rem' },
+    color: colors.textSecondary,
+    textAlign: 'center',
+    mt: 2,
+    px: 2,
+  },
+  sectionHeading: {
+    fontFamily: fonts.heading,
+    fontWeight: 700,
+    fontSize: { xs: '1.6rem', md: '2.2rem' },
+    color: colors.textPrimary,
+    textAlign: 'center',
+    mt: { xs: 6, md: 8 },
+  },
+  tabsWrapper: {
+    width: '100%',
+    maxWidth: '1000px',
+    mt: 4,
+  },
+  cardsStack: {
+    width: '100%',
+    maxWidth: '1000px',
+    mt: 4,
+  },
+  statusWrapper: {
+    display: 'flex',
+    justifyContent: 'center',
+    width: '100%',
+    mt: 8,
+  },
+  emptyText: {
+    fontFamily: fonts.body,
+    fontSize: '1rem',
+    color: colors.textSecondary,
+    textAlign: 'center',
+  },
+});
+
+export const eventCardStyles = () => ({
+  card: {
+    display: 'block',
+    backgroundColor: colors.surface,
+    border: `1px solid ${colors.border}`,
+    borderRadius: radii.card,
+    p: { xs: 2.5, md: 3 },
+    width: '100%',
+  },
+  title: {
+    fontFamily: fonts.body,
+    fontWeight: 600,
+    fontSize: { xs: '1.1rem', md: '1.25rem' },
+    color: colors.textPrimary,
+  },
+  category: {
+    fontFamily: fonts.body,
+    fontSize: '0.9rem',
+    color: colors.purple,
+    mt: 0.5,
+  },
+  detailsWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 1,
+    mt: 2.5,
+  },
+  detailRow: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 1.2,
+    color: colors.textSecondary,
+  },
+  detailIcon: {
+    fontSize: '1.1rem',
+    color: colors.textSecondary,
+  },
+  detailText: {
+    fontFamily: fonts.body,
+    fontSize: '0.95rem',
+    color: colors.textSecondary,
+  },
+});
diff --git a/frontend/src/images/cses-logo-white.png b/frontend/src/images/cses-logo-white.png
new file mode 100644
index 00000000..20e9e937
Binary files /dev/null and b/frontend/src/images/cses-logo-white.png differ
diff --git a/frontend/src/images/joinus/chain.png b/frontend/src/images/joinus/chain.png
new file mode 100644
index 00000000..639b5883
Binary files /dev/null and b/frontend/src/images/joinus/chain.png differ
diff --git a/frontend/src/images/joinus/gear.png b/frontend/src/images/joinus/gear.png
new file mode 100644
index 00000000..1f4b5377
Binary files /dev/null and b/frontend/src/images/joinus/gear.png differ
diff --git a/frontend/src/images/joinus/lightbulb.png b/frontend/src/images/joinus/lightbulb.png
new file mode 100644
index 00000000..42aa9e90
Binary files /dev/null and b/frontend/src/images/joinus/lightbulb.png differ