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..7657432a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,43 +1,23 @@
 import React from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { Container } from '@mui/material';
-import ScrollToTop from './utils/scrollToTop';
-import Home from './components/Home/Home';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import NavBar from './components/NavBar/NavBar';
 import Footer from './components/Footer/Footer';
-import About from './components/About/About';
-import Events from './components/NewEvents/Events';
-import Opportunities from './components/Opportunities/Opportunities';
-import Membership from './components/Membership/Membership';
-import Login from './components/Login/Login';
-import EditForm from './components/Login/EditProfile';
-import Initiatives from './components/Initiatives/Initiatives';
-import OpenSource from './components/OpenSource/OpenSource';
-import Sponsorships from './components/Sponsorships/Sponsorships'; // added my mal and line 34
-import OpenSourceCommunity from './components/OpenSourceCommunity/OpenSourceCommunity';
-import DevCommunity from './components/Dev/DevCommunity'
-import InovateCommunity from './components/Inovate/InovateCommunity'
+import Home from './components/Home/Home';
+import Events from './components/Events/Events';
+import Communities from './components/Communities/Communities';
+import JoinUs from './components/JoinUs/JoinUs';
 
 function App() {
   return (
     <BrowserRouter>
-      <ScrollToTop />
       <Container maxWidth={false} style={{ margin: 0, padding: 0 }}>
         <NavBar />
         <Routes>
           <Route path="/" element={<Home />} />
-          <Route path="/about" element={<About />} />
           <Route path="/events" element={<Events />} />
-          <Route path="/opportunities" element={<Opportunities />} />
-          <Route path="/membership" element={<Membership />} />
-          { /* <Route path="/login" element={<Login />} /> */}
-          <Route path="/editprofile" element={<EditForm />} />
-          <Route path="/initiatives" element={<Initiatives />} />
-          <Route path="/opensource" element={<OpenSource />} />
-          <Route path="/sponsorships" element={<Sponsorships />} /> 
-          <Route path="/opensourcecommunity" element={<OpenSourceCommunity />} /> 
-          <Route path="/devcommunity" element={<DevCommunity />} />
-          <Route path="/innovatecommunity" element={<InovateCommunity />} />
+          <Route path="/communities" element={<Communities />} />
+          <Route path="/join-us" element={<JoinUs />} />
         </Routes>
         <Footer />
       </Container>
diff --git a/frontend/src/components/Communities/Communities.css b/frontend/src/components/Communities/Communities.css
new file mode 100644
index 00000000..252fb982
--- /dev/null
+++ b/frontend/src/components/Communities/Communities.css
@@ -0,0 +1,82 @@
+.communities-page {
+  min-height: 100vh;
+  background-color: #0a0e1a;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 140px;
+  padding-bottom: 64px;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+@media (min-width: 900px) {
+  .communities-page {
+    padding-top: 160px;
+  }
+}
+
+.communities-heading {
+  font-family: 'Space Mono', monospace;
+  font-size: 2.5rem;
+  font-weight: 400;
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+@media (min-width: 900px) {
+  .communities-heading {
+    font-size: 3.5rem;
+  }
+}
+
+.communities-subtext {
+  font-family: 'Space Mono', monospace;
+  font-size: 1rem;
+  text-align: center;
+  max-width: 600px;
+  line-height: 1.6;
+  margin-bottom: 48px;
+}
+
+@media (min-width: 900px) {
+  .communities-subtext {
+    font-size: 1.25rem;
+  }
+}
+
+.communities-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 32px;
+  justify-content: center;
+  max-width: 1000px;
+}
+
+.communities-card {
+  box-sizing: border-box;
+  border: 2px solid #725DEF;
+  border-radius: 12px;
+  padding: 32px;
+  width: 280px;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.communities-card-title {
+  font-family: 'Space Mono', monospace;
+  font-size: 1.4rem;
+  font-weight: 700;
+  margin-bottom: 12px;
+}
+
+.communities-card-body {
+  font-family: 'Space Mono', monospace;
+  font-size: 0.95rem;
+  color: rgba(255, 255, 255, 0.75);
+}
diff --git a/frontend/src/components/Communities/Communities.tsx b/frontend/src/components/Communities/Communities.tsx
new file mode 100644
index 00000000..40ab8c30
--- /dev/null
+++ b/frontend/src/components/Communities/Communities.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import './Communities.css';
+
+const communities = [
+  { title: 'Dev', body: 'Placeholder description for the Dev community.' },
+  { title: 'Open Source', body: 'Placeholder description for the Open Source community.' },
+  { title: 'Innovate', body: 'Placeholder description for the Innovate community.' },
+];
+
+const Communities = () => {
+  return (
+    <Box className="communities-page">
+      <Typography className="communities-heading">Communities</Typography>
+      <Typography className="communities-subtext">
+        CSES is made up of several communities, each focused on a different way to build,
+        learn, and grow together. Placeholder copy — real content coming soon.
+      </Typography>
+
+      <Box className="communities-grid">
+        {communities.map((community) => (
+          <Box key={community.title} className="communities-card">
+            <Typography className="communities-card-title">{community.title}</Typography>
+            <Typography className="communities-card-body">{community.body}</Typography>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default Communities;
diff --git a/frontend/src/components/Events/Events.css b/frontend/src/components/Events/Events.css
new file mode 100644
index 00000000..09398254
--- /dev/null
+++ b/frontend/src/components/Events/Events.css
@@ -0,0 +1,102 @@
+.events-page {
+  min-height: 100vh;
+  background-color: #0a0e1a;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 140px;
+  padding-bottom: 64px;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+@media (min-width: 900px) {
+  .events-page {
+    padding-top: 160px;
+  }
+}
+
+.events-heading {
+  font-family: 'Space Mono', monospace;
+  font-size: 2.5rem;
+  font-weight: 400;
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+@media (min-width: 900px) {
+  .events-heading {
+    font-size: 3.5rem;
+  }
+}
+
+.events-filter-row {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 40px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.events-filter-button {
+  border: 2px solid #725DEF;
+  border-radius: 24px;
+  color: white;
+  font-family: 'Space Mono', monospace;
+  font-size: 0.9rem;
+  text-transform: none;
+  padding: 8px 24px;
+}
+
+.events-filter-button:hover {
+  background-color: rgba(114, 93, 239, 0.1);
+}
+
+.events-filter-button.active {
+  background-color: #8B5CF6;
+}
+
+.events-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  justify-content: center;
+  max-width: 1000px;
+  margin-bottom: 96px;
+}
+
+.events-card {
+  box-sizing: border-box;
+  border: 2px solid #725DEF;
+  border-radius: 12px;
+  padding: 24px;
+  width: 260px;
+  min-height: 160px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.events-card-title {
+  font-family: 'Space Mono', monospace;
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.events-card-body {
+  font-family: 'Space Mono', monospace;
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.events-empty-state {
+  font-family: 'Space Mono', monospace;
+  font-size: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  text-align: center;
+  margin-bottom: 96px;
+}
diff --git a/frontend/src/components/Events/Events.tsx b/frontend/src/components/Events/Events.tsx
index 9f3dc730..7d7f2a3f 100644
--- a/frontend/src/components/Events/Events.tsx
+++ b/frontend/src/components/Events/Events.tsx
@@ -1,519 +1,62 @@
-import React, { useState, useEffect } from 'react';
-import { Container, Grid } from '@mui/material';
-import bgTop from '../../images/shape.svg';
-import bgBtm from '../../images/shape.svg';
-import { event_style } from './styles';
-import EventBox from '../Event/Event';
-import MobileEventBox from '../Event/MobileEvent';
-import Button from '../Button/Button';
-import useMediaQuery from '../../hooks/useMediaQuery';
-import { CircularProgress } from '@mui/material';
+import React from 'react';
+import { Box, Typography, Button } from '@mui/material';
+import './Events.css';
 
-interface EventData {
-  calendar_link: string;
-  description: string;
-  end_time: string;
-  instagram_link: string;
-  location: string;
-  start_time: string;
-  title: string;
-  _id: string;
-}
+const upcomingEvents = [
+  { title: '[Event 1]', body: 'Placeholder event description.' },
+  { title: '[Event 2]', body: 'Placeholder event description.' },
+  { title: '[Event 3]', body: 'Placeholder event description.' },
+  { title: '[Event 4]', body: 'Placeholder event description.' },
+];
 
-const Events = () => {
-  // add state for page number
-  const [pageNumberUpcoming, setPageNumberUpcoming] = useState(1);
-  const [pageNumberPast, setPageNumberPast] = useState(1);
-
-  // add state for the total number of pages
-  const [totalPagesUpcoming, setTotalPagesUpcoming] = useState(1);
-  const [totalPagesPast, setTotalPagesPast] = useState(1);
-
-  // add state for the number of events per page
-  const eventsPerPage = 6;
-
-  const styles = event_style();
-  const eventsContainerStyle: any = styles.eventsContainer;
-
-  const [upcomingEvents, setUpcomingEvents] = useState<EventData[]>([]);
-  const [pastEvents, setPastEvents] = useState<EventData[]>([]);
-  const [selectedYear, setSelectedYear] = useState<number | null>(new Date().getFullYear()); // Default to current year
-  const [selectedMonth] = useState<number | null>(null);
-  const [pastEventYears, setPastEventYears] = useState<number[]>([]);
-
-
-  const [displayedFutureEvents, setDisplayedFutureEvents] = useState(upcomingEvents);
-  const [displayedPastEvents, setDisplayedPastEvents] = useState(pastEvents);
-  const [isThisWeekClicked, setIsThisWeekClicked] = useState(false);
-  const [isThisMonthClicked, setIsThisMonthClicked] = useState(false);
-  // add state to keep track of the total pages based on the filtered events
-  const [filteredTotalPagesPast, setFilteredTotalPagesPast] = useState(totalPagesPast);
-
-
-  const [isLoading, setIsLoading] = useState(true);
-
-  const paginate = (
-    events: Array<EventData>,
-    pageNumber: number,
-    totalPages: number,
-    type: string,
-  ) => {
-    let filteredEvents = events;
-    if (type === 'past' && selectedYear !== null) {
-      // If a year filter is applied, use the filtered past events
-      filteredEvents = pastEvents.filter(event => new Date(event.end_time).getFullYear() === selectedYear);
-
-    }
-
-    if (type === 'upcoming') {
-      setPageNumberUpcoming(pageNumber);
-      setDisplayedFutureEvents(
-        filteredEvents.slice((pageNumber - 1) * eventsPerPage, pageNumber * eventsPerPage),
-      );
-    } else {
-      setPageNumberPast(pageNumber);
-      setDisplayedPastEvents(
-        filteredEvents.slice((pageNumber - 1) * eventsPerPage, pageNumber * eventsPerPage),
-      );
-    }
-  };
-
-  const isDesktop = useMediaQuery('(min-width: 1024px)');
-  const isIpad = useMediaQuery('(min-width: 768px) and (max-width: 1023px)');
-  const isMobile = useMediaQuery('(max-width: 767px)');
-
-  if (isDesktop) {
-    // if desktop view set styles for desktop
-    eventsContainerStyle.maxWidth = '100vw';
-    eventsContainerStyle.overflowX = 'hidden';
-    eventsContainerStyle.flexWrap = 'wrap' as 'wrap';
-  }
-
-  if (isIpad) {
-    // if ipad view set styles for ipad
-    eventsContainerStyle.maxWidth = '100vw';
-    eventsContainerStyle.overflowX = 'hidden';
-    eventsContainerStyle.alignItems = 'flex-start';
-    eventsContainerStyle.flexWrap = 'wrap' as 'wrap';
-  }
-
-  if (isMobile) {
-    // if mobile view set styles for mobile
-    eventsContainerStyle.width = '100%'; // Set width to 100% of the parent container
-    eventsContainerStyle.padding = '0'; // Remove any padding
-    eventsContainerStyle.overflowX = 'auto';
-    eventsContainerStyle.overflowY = 'auto';
-    eventsContainerStyle.flexWrap = 'wrap' as 'wrap';
-    eventsContainerStyle.alignItems = 'flex-start';
-  }
-
-  useEffect(() => {
-    // Set media queries
-    let upcomingEventsEndpoint = `${process.env.REACT_APP_BACKEND_URL}/api/v1/events?type=upcoming`;
-    let pastEventsEndpoint = `${process.env.REACT_APP_BACKEND_URL}/api/v1/events?type=past`;
-  
-    const fetchUpcomingEvents = async () => {
-      try {
-        const response = await fetch(upcomingEventsEndpoint);
-        const data = await response.json();
-        setTotalPagesUpcoming(Math.ceil(data.length / 6));
-        setUpcomingEvents(data);
-        paginate(data, 1, totalPagesUpcoming, 'upcoming');
-      } catch (error) {
-        console.error('Error fetching upcoming events:', error);
-      }
-    };
-  
-    const fetchPastEvents = async () => {
-      try {
-        const response = await fetch(pastEventsEndpoint);
-        const data = await response.json();
-        setTotalPagesPast(Math.ceil(data.length / 6));
-        setPastEvents(data);
-  
-        // Extract years from past events and sort in descending order
-        const years = Array.from(new Set(data.map((event: EventData) => new Date(event.end_time).getFullYear())))
-          .sort((a, b) => (b as number) - (a as number)); // Explicit type casting for 'a' and 'b'
-        setPastEventYears(years as number[]);
-        
-  
-        paginate(data, 1, totalPagesPast, 'past');
-      } catch (error) {
-        console.error('Error fetching past events:', error);
-      }
-    };
-  
-    async function fetchData() {
-      try {
-        await Promise.all([fetchUpcomingEvents(), fetchPastEvents()]);
-        setIsLoading(false);
-      } catch (error) {
-        console.error(error);
-        setIsLoading(false);
-      }
-    }
-  
-    fetchData();
-  }, [selectedYear, selectedMonth, totalPagesUpcoming, totalPagesPast, setTotalPagesUpcoming, setTotalPagesPast]);
-  
-
-  const handleThisWeekClick = () => {
-    if (isThisWeekClicked) {
-      setDisplayedFutureEvents(upcomingEvents);
-      setIsThisWeekClicked(false);
-    } else {
-      const now = new Date().getTime();
-      const oneWeekAfter = now + 7 * 24 * 60 * 60 * 1000;
+const pastEvents = [
+  { title: '[Past Event 1]', body: 'Placeholder event description.' },
+  { title: '[Past Event 2]', body: 'Placeholder event description.' },
+  { title: '[Past Event 3]', body: 'Placeholder event description.' },
+];
 
-      const thisWeekEvents = upcomingEvents.filter(
-        (event) =>
-          new Date(event.start_time).getTime() >= now &&
-          new Date(event.start_time).getTime() <= oneWeekAfter,
-      );
-
-      setDisplayedFutureEvents(thisWeekEvents);
-      setIsThisWeekClicked(true);
-      setIsThisMonthClicked(false);
-    }
-  };
-
-  const handleThisMonthClick = () => {
-    if (isThisMonthClicked) {
-      setDisplayedFutureEvents(upcomingEvents);
-      setIsThisMonthClicked(false);
-    } else {
-      const now = new Date().getTime();
-      const oneMonthAfter = now + 30 * 24 * 60 * 60 * 1000;
-
-      const thisMonthEvents = upcomingEvents.filter(
-        (event) =>
-          new Date(event.start_time).getTime() >= now &&
-          new Date(event.start_time).getTime() <= oneMonthAfter,
-      );
-
-      setDisplayedFutureEvents(thisMonthEvents);
-      setIsThisWeekClicked(false);
-      setIsThisMonthClicked(true);
-    }
-  };
-
-  const handleYearClick = (year: number) => {
-    if (selectedYear === year) {
-      setSelectedYear(null); 
-    } else {
-      setSelectedYear(year); 
-    }
-  };
-  
-  useEffect(() => {
-    // Filter events based on selected year
-    const filterEventsByYear = (year: number, events: EventData[]) => {
-      return events.filter((event) => {
-        const eventYear = new Date(event.end_time).getFullYear();
-        return eventYear === year;
-      });
-    };
-  
-    if (selectedYear !== null) {
-      const filteredPastEvents = filterEventsByYear(selectedYear, pastEvents);
-      setDisplayedPastEvents(filteredPastEvents);
-      setFilteredTotalPagesPast(Math.ceil(filteredPastEvents.length / eventsPerPage));
-      paginate(filteredPastEvents, 1, totalPagesPast, 'past');
-    } else {
-      setDisplayedPastEvents(pastEvents);
-      setFilteredTotalPagesPast(Math.ceil(pastEvents.length / eventsPerPage));
-      paginate(pastEvents, 1, totalPagesPast, 'past');
-    }
-  }, [selectedYear, pastEvents]); 
-  
-  
-  // Render EventBoxes using map
-  const renderEventBoxes = (events: EventData[]) => {
-    return events.map((eventData) => {
-      if (isMobile) {
-        return (
-          <MobileEventBox
-            title={eventData.title}
-            targetDate={new Date(eventData.end_time)}
-            location={eventData.location}
-            end_time={eventData.end_time}
-            start_time={eventData.start_time}
-            _id={eventData._id}
-            pastEvent
-          />
-        );
-      } else {
-        return (
-          <React.Fragment key={eventData._id}>
-            <EventBox
-              title={eventData.title}
-              targetDate={new Date(eventData.end_time)}
-              location={eventData.location}
-              calendar_link={eventData.calendar_link}
-              description={eventData.description}
-              end_time={eventData.end_time}
-              instagram_link={eventData.instagram_link}
-              start_time={eventData.start_time}
-              _id={eventData._id}
-            />
-          </React.Fragment>
-        );
-      }
-    });
-  };
-
-  const renderPastEventBoxes = (events: EventData[]) => {
-    return events.map((eventData) => {
-      if (isMobile) {
-        return (
-          <MobileEventBox
-            title={eventData.title}
-            targetDate={new Date(eventData.end_time)}
-            location={eventData.location}
-            end_time={eventData.end_time}
-            start_time={eventData.start_time}
-            _id={eventData._id}
-            pastEvent
-          />
-        );
-      } else {
-        return (
-          <React.Fragment key={eventData._id}>
-            <EventBox
-              title={eventData.title}
-              targetDate={new Date(eventData.end_time)}
-              location={eventData.location}
-              calendar_link=''
-              description={eventData.description}
-              end_time={eventData.end_time}
-              instagram_link=''
-              start_time={eventData.start_time}
-              _id={eventData._id}
-              pastEvent
-            />
-          </React.Fragment>
-        );
-      }
-    });
-  };
+const filters = ['All', 'This Week', 'This Month'];
 
+const Events = () => {
   return (
-    <div style={{ position: 'relative', overflow: 'hidden' }}>
-      <img src={bgTop} alt="bg1" style={{ ...styles.bg1, position: 'absolute' }} />
-      <img src={bgBtm} alt="bg2" style={{ ...styles.bg2, position: 'absolute' }} />
-      <Container maxWidth="xl" sx={styles.body} >
-        <Grid item mt={6} mb={2} ml={5} 
-        sx={{ color: 'white', fontFamily: 'Chakra Petch', fontSize: 'clamp(32px, 8vw, 65px)', fontWeight: '700' }}>
-        EVENTS
-      </Grid>
-
-        {isLoading && (
-          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-            <CircularProgress size="3em" style={{ color: 'white' }} />
-          </div>
-        )}
-
-        {/* Buttons for filtering events */}
-        {displayedFutureEvents.length >= 0 && (
-          <Grid item container mb={3} ml={4} justifyContent="flex-start">
-            <Button
-              size="medium"
-              text="This Week"
-              infocus={isThisWeekClicked}
-              onClick={handleThisWeekClick}
-            ></Button>
-            <Button
-              size="medium"
-              text="This Month"
-              infocus={isThisMonthClicked}
-              onClick={handleThisMonthClick}
-            ></Button>
-          </Grid>
-        )}
-        {/* Render EventBoxes for future events */}
-        <div style={{ ...eventsContainerStyle, marginTop: '20px' }}>
-          {(displayedFutureEvents.length === 0 && (
-            <Grid item
-            sx={{ color: 'white', fontSize: 20, fontFamily: 'Chakra Petch', fontWeight: '700' }}>
-              No upcoming events
-            </Grid>
-          )) ||
-            renderEventBoxes(displayedFutureEvents)}
-        </div>
-
-        {displayedFutureEvents.length > 0 && (
-          <Grid item mt={2} ml={5} 
-          sx={{ color: 'white', fontSize: 'clamp(15px, 3vw, 20px)', fontFamily: 'Chakra Petch', fontWeight: '700' }}>
-              Page {pageNumberUpcoming} of {totalPagesUpcoming}
-          </Grid>
-        )}
-        {totalPagesUpcoming > 1 && (
-          <div style={{ display: 'flex', justifyContent: 'center', marginTop: '20px' }}>
-            <Button
-              size="medium"
-              text="Previous"
-              onClick={() => {
-                if (pageNumberUpcoming > 1) {
-                  paginate(upcomingEvents, pageNumberUpcoming - 1, totalPagesUpcoming, 'upcoming');
-                  const titleElement = document.getElementById('eventsTitle');
-                  if (titleElement) {
-                    const rect = titleElement.getBoundingClientRect();
-                    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-                    const targetY = rect.top + scrollTop;
-
-                    window.scrollTo({
-                      top: targetY,
-                      behavior: 'smooth',
-                    });
-                  }
-                }
-              }}
-              inactive={pageNumberUpcoming === 1}
-            />
-            <Button
-              size="medium"
-              text="Next"
-              onClick={() => {
-                if (pageNumberUpcoming < totalPagesUpcoming) {
-                  paginate(upcomingEvents, pageNumberUpcoming + 1, totalPagesUpcoming, 'upcoming');
-                  const titleElement = document.getElementById('eventsTitle');
-                  if (titleElement) {
-                    const rect = titleElement.getBoundingClientRect();
-                    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-                    const targetY = rect.top + scrollTop;
-
-                    window.scrollTo({
-                      top: targetY,
-                      behavior: 'smooth',
-                    });
-                  }
-                }
-              }}
-              inactive={pageNumberUpcoming === totalPagesUpcoming}
-            />
-          </div>
-        )}
-
-        {/* Render EventBoxes for past events */}
-        <Grid item mt={15} mb={2} ml={5} 
-        sx={{ color: 'white', fontFamily: 'Chakra Petch', fontSize: 'clamp(32px, 8vw, 65px)', fontWeight: '700' }}>
-          PAST EVENTS
-        </Grid>
-
-        {isLoading && (
-          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-            <CircularProgress size="3em" style={{ color: 'white' }} />
-          </div>
-        )}
-        {/* Buttons for filtering past events */}
-        {displayedPastEvents.length > 0 && (
-          <Grid item container mb={4} ml={4} justifyContent="flex-start">
-            {/* <Button size="medium" text="2023" infocus={is2023Clicked} onClick={handle2023}></Button> */}
-            
-            {/*Buttons that handle general year */}
-            {Array.from(pastEventYears).sort().reverse().map(year => (
-              <Button
-                key={year}
-                size="medium"
-                text={year.toString()}
-                infocus={selectedYear === year}
-                onClick={() => handleYearClick(year)}
-              />
-            ))}
-          </Grid>
-        )}
-        <div style={{ ...eventsContainerStyle, marginTop: '20px' }}>
-          {(displayedPastEvents.length === 0 && !isLoading && (
-            <div
-              style={{
-                color: 'white',
-                fontSize: '20px',
-                fontFamily: 'Chakra Petch',
-                fontWeight: '700',
-                display: 'flex',
-                flexDirection: 'row'
-              }}
-            >
-              No past events
-            </div>
-          )) ||
-            renderPastEventBoxes(displayedPastEvents)}
-        </div>
-        {displayedPastEvents.length > 0 && (
-          <div>
-            <p
-              style={{
-                color: 'white',
-                fontSize: 'clamp(15px, 3vw, 20px)',
-                fontFamily: 'Chakra Petch',
-                fontWeight: '700',
-                display: 'flex',
-                flexDirection: 'row',
-                marginLeft: isDesktop ? '39px' : '',
-                alignItems: isDesktop ? '': 'center',
-                justifyContent: isDesktop ? '' : 'center'
-              }}
-            >
-              Page {pageNumberPast} of {filteredTotalPagesPast}
-            </p>
-          </div>
-        )}
-        {filteredTotalPagesPast > 1 && (
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'center',
-              marginTop: '20px',
-              marginBottom: '20px',
-            }}
+    <Box className="events-page">
+      <Typography className="events-heading">Events</Typography>
+
+      <Box className="events-filter-row">
+        {filters.map((filter, index) => (
+          <Button
+            key={filter}
+            className={`events-filter-button${index === 0 ? ' active' : ''}`}
           >
-            <Button
-              size="medium"
-              text="Previous"
-              onClick={() => {
-                if (pageNumberPast > 1) {
-                  paginate(pastEvents, pageNumberPast - 1, totalPagesPast, 'past');
-                  const titleElement = document.getElementById('pastEventsTitle');
-
-                  if (titleElement) {
-                    const rect = titleElement.getBoundingClientRect();
-                    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-                    const targetY = rect.top + scrollTop;
-
-                    window.scrollTo({
-                      top: targetY,
-                      behavior: 'smooth',
-                    });
-                  }
-                }
-              }}
-              inactive={pageNumberPast === 1}
-            ></Button>
-            <Button
-              size="medium"
-              text="Next"
-              onClick={() => {
-                if (pageNumberPast < totalPagesPast) {
-                  paginate(pastEvents, pageNumberPast + 1, totalPagesPast, 'past');
-                  const titleElement = document.getElementById('pastEventsTitle');
-                  if (titleElement) {
-                    const rect = titleElement.getBoundingClientRect();
-                    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-                    const targetY = rect.top + scrollTop;
-
-                    window.scrollTo({
-                      top: targetY,
-                      behavior: 'smooth',
-                    });
-                  }
-                }
-              }}
-              inactive={pageNumberPast === totalPagesPast}
-            ></Button>
-          </div>
-        )}
-      </Container>
-    </div>
+            {filter}
+          </Button>
+        ))}
+      </Box>
+
+      <Box className="events-grid">
+        {upcomingEvents.map((event) => (
+          <Box key={event.title} className="events-card">
+            <Typography className="events-card-title">{event.title}</Typography>
+            <Typography className="events-card-body">{event.body}</Typography>
+          </Box>
+        ))}
+      </Box>
+
+      <Typography className="events-heading">Past Events</Typography>
+
+      {pastEvents.length > 0 ? (
+        <Box className="events-grid">
+          {pastEvents.map((event) => (
+            <Box key={event.title} className="events-card">
+              <Typography className="events-card-title">{event.title}</Typography>
+              <Typography className="events-card-body">{event.body}</Typography>
+            </Box>
+          ))}
+        </Box>
+      ) : (
+        <Typography className="events-empty-state">No past events.</Typography>
+      )}
+    </Box>
   );
 };
 
diff --git a/frontend/src/components/Events/styles.ts b/frontend/src/components/Events/styles.ts
deleted file mode 100644
index a29f9e91..00000000
--- a/frontend/src/components/Events/styles.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-export const event_style = () => ({
-  bg1: {
-    width: '100%',
-    margin: '10% 0%',
-    transform: 'rotate(-25deg)',
-    scale: '120%',
-    top: '0%',
-    marginTop: '-10%',
-    opacity: '0.5',
-  },
-  bg2: {
-    opacity: '0.5',
-    width: '100%',
-    scale: '120%',
-    transform: 'scaleX(-1) scaleY(-1)',
-    margin: '30% 0%',
-    marginTop: '100%',
-  },
-  eventsContainer: {
-    color: 'white',
-    fontSize: '20px',
-    fontFamily: 'Chakra Petch',
-    fontWeight: '700',
-    display: 'flex',
-    flexDirection: 'row' as 'row',
-    flexWrap: 'wrap' as 'wrap' | 'nowrap' | 'wrap-reverse',
-    marginLeft: '39px',
-    maxWidth: '1024px',
-    overflowX: 'scroll' as
-      | 'scroll'
-      | 'auto'
-      | 'hidden'
-      | 'visible'
-      | 'inherit'
-      | 'initial'
-      | 'revert'
-      | 'unset',
-    gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr)',
-    gap: '40px',
-  },
-  body: { position: 'relative', top: '93px', marginBottom: '200px' },
-});
diff --git a/frontend/src/components/Footer/Footer.tsx b/frontend/src/components/Footer/Footer.tsx
index c652700d..a5556cbc 100644
--- a/frontend/src/components/Footer/Footer.tsx
+++ b/frontend/src/components/Footer/Footer.tsx
@@ -1,129 +1,82 @@
 import React from 'react';
 import { Box, Typography, Link } from '@mui/material';
 import InstagramIcon from '../../images/instagram-icon.svg';
-import FacebookIcon from '../../images/facebook-icon.svg';
 import LinkedInIcon from '../../images/linkedin-icon.svg';
-import DiscordIcon from '../../images/discord-icon.svg';
-import csesLogo from '../../images/footer-logo.png';
+import csesLogo from '../../images/cses-logo-white.png';
 
-const links = [
-  { logo: InstagramIcon, link: 'https://www.instagram.com/cses_ucsd/' },
-  { logo: DiscordIcon, link: 'https://discord.gg/UkdACyy2h8' },
-  { logo: FacebookIcon, link: 'https://www.facebook.com/csesucsd' },
-  { logo: LinkedInIcon, link: 'https://www.linkedin.com/in/csesucsd/' },
+const socialLinks = [
+  { logo: InstagramIcon, link: 'https://www.instagram.com/cses_ucsd/', alt: 'Instagram' },
+  { logo: LinkedInIcon, link: 'https://www.linkedin.com/in/csesucsd/', alt: 'LinkedIn' },
 ];
 
 const Footer = () => {
   return (
     <Box
       sx={{
-        backgroundColor: '#1F3A7E',
-        padding: { xs: '0.5rem 2.5rem 1.25rem', md: '1.25rem 2.5rem 1.25rem' },
+        backgroundColor: '#1A1A24',
+        borderTop: '1px solid rgba(139, 92, 246, 0.2)',
+        padding: { xs: '2rem 1.5rem 1.5rem', md: '2.5rem 3rem 2rem' },
         color: 'white',
       }}
     >
-      {/* Desktop Layout */}
+      {/* Top row: logo left, social icons right */}
       <Box
         sx={{
-          display: { xs: 'none', md: 'flex' },
+          display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
+          mb: 3,
         }}
       >
-        {/* Logo */}
+        {/* CSES Logo */}
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
           <Box
             component="img"
             src={csesLogo}
-            alt="logo"
+            alt="CSES Logo"
             sx={{
-              height: '3.75rem', // 60px equivalent
-              maxWidth: '100%',
-              mr: 1.25, // 10px
+              height: { xs: '48px', md: '66px' },
               objectFit: 'contain',
             }}
           />
         </Box>
 
-        {/* Center Contact Info */}
-        <Typography sx={{ fontSize: '1.125rem', fontStyle: 'italic' }}>
-          For all inquiries, contact{' '}
-          <Link href="mailto:cses@ucsd.edu" color="inherit">
-            cses@ucsd.edu
-          </Link>
-          .
-        </Typography>
-
         {/* Social Icons */}
         <Box sx={{ display: 'flex', gap: 2 }}>
-          {links.map(({ logo, link }, idx) => (
+          {socialLinks.map(({ logo, link, alt }) => (
             <Link
-              key={idx}
+              key={alt}
               href={link}
               target="_blank"
               rel="noopener noreferrer"
               sx={{
-                display: 'inline-block',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
                 '& img': {
-                  width: '2rem', // 32px
-                  height: '2rem',
+                  width: { xs: '32px', md: '40px' },
+                  height: { xs: '32px', md: '40px' },
                   objectFit: 'contain',
                 },
               }}
             >
-              <img src={logo} alt="social" />
+              <img src={logo} alt={alt} />
             </Link>
           ))}
         </Box>
       </Box>
 
-      {/* Mobile Layout */}
-      <Box
+      {/* Copyright */}
+      <Typography
         sx={{
-          display: { xs: 'flex', md: 'none' },
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          flexWrap: 'nowrap',
-          pt: 2,
+          fontFamily: '"Space Mono", monospace',
+          textAlign: 'center',
+          fontSize: { xs: '0.75rem', md: '0.875rem' },
+          color: '#9CA3AF',
         }}
       >
-        {/* Logo */}
-        <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          <Box
-            component="img"
-            src={csesLogo}
-            alt="logo"
-            sx={{
-              height: '3.125rem', // 50px equivalent
-              maxWidth: '100%',
-              mr: 1.25, // 10px
-              objectFit: 'contain',
-            }}
-          />
-        </Box>
-
-        {/* Social Icons */}
-        <Box sx={{ display: 'flex', gap: 1 }}>
-          {links.map(({ logo, link }, idx) => (
-            <Link
-              key={idx}
-              href={link}
-              target="_blank"
-              rel="noopener noreferrer"
-              sx={{
-                display: 'inline-block',
-                '& img': {
-                  width: '1.75rem', // 28px
-                  height: '1.75rem',
-                  objectFit: 'contain',
-                },
-              }}
-            >
-              <img src={logo} alt="social" />
-            </Link>
-          ))}
-        </Box>
-      </Box>
+        &copy; 2026 UC San Diego Computer Science and Engineering Society. All rights reserved.
+      </Typography>
     </Box>
   );
 };
diff --git a/frontend/src/components/Home/Home.css b/frontend/src/components/Home/Home.css
new file mode 100644
index 00000000..846a2421
--- /dev/null
+++ b/frontend/src/components/Home/Home.css
@@ -0,0 +1,148 @@
+.home-page {
+  min-height: 100vh;
+  background-color: #0a0e1a;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 140px;
+  padding-bottom: 64px;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+@media (min-width: 900px) {
+  .home-page {
+    padding-top: 160px;
+  }
+}
+
+.home-hero-heading {
+  font-family: 'Space Mono', monospace;
+  font-size: 2.5rem;
+  font-weight: 400;
+  text-align: center;
+  margin-bottom: 16px;
+}
+
+@media (min-width: 900px) {
+  .home-hero-heading {
+    font-size: 4rem;
+  }
+}
+
+.home-hero-subtitle {
+  font-family: 'Space Mono', monospace;
+  font-size: 1rem;
+  text-align: center;
+  max-width: 600px;
+  line-height: 1.6;
+  margin-bottom: 40px;
+}
+
+@media (min-width: 900px) {
+  .home-hero-subtitle {
+    font-size: 1.25rem;
+  }
+}
+
+.home-cta-wrapper {
+  border: 2px solid #725DEF;
+  border-radius: 8px;
+  margin-bottom: 80px;
+}
+
+.home-cta-button {
+  color: white;
+  font-family: 'Space Mono', monospace;
+  font-size: 1.25rem;
+  font-weight: 700;
+  padding: 12px 48px;
+  text-transform: none;
+}
+
+.home-cta-button:hover {
+  background-color: rgba(114, 93, 239, 0.1);
+}
+
+@media (min-width: 900px) {
+  .home-cta-button {
+    font-size: 1.5rem;
+  }
+}
+
+.home-section {
+  width: 100%;
+  max-width: 1000px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 80px;
+}
+
+.home-section-title {
+  font-family: 'Space Mono', monospace;
+  font-size: 1.75rem;
+  font-weight: 400;
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+@media (min-width: 900px) {
+  .home-section-title {
+    font-size: 2.5rem;
+  }
+}
+
+.home-card-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 32px;
+}
+
+.home-card {
+  box-sizing: border-box;
+  border: 2px solid #725DEF;
+  border-radius: 12px;
+  padding: 24px;
+  width: 260px;
+  min-height: 140px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.home-card-title {
+  font-family: 'Space Mono', monospace;
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.home-card-body {
+  font-family: 'Space Mono', monospace;
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.home-secondary-button-wrapper {
+  border: 2px solid #8B5CF6;
+  border-radius: 24px;
+}
+
+.home-secondary-button {
+  color: white;
+  font-family: 'Space Mono', monospace;
+  font-size: 1rem;
+  text-transform: none;
+  padding: 8px 32px;
+}
+
+.home-secondary-button:hover {
+  background-color: rgba(139, 92, 246, 0.1);
+}
diff --git a/frontend/src/components/Home/Home.tsx b/frontend/src/components/Home/Home.tsx
index a29816f9..13584bf5 100644
--- a/frontend/src/components/Home/Home.tsx
+++ b/frontend/src/components/Home/Home.tsx
@@ -1,447 +1,69 @@
-import React, { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Container, Box, Grid, Button as MuiButton } from '@mui/material';
-import { homeStyles } from './styles';
-import DevLogo from '../../images/ourCommunitiesImages/DevLogo.png';
-import InnovateLogo from '../../images/ourCommunitiesImages/InnovateLogo.png';
-import OpenSourceLogo from '../../images/ourCommunitiesImages/OpenSourceLogo.png';
-import HomeLogo from '../../images/HomeLogo.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 GoogleLogo from '../../images/sponsors/Google_Logo.webp';
-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';
-import Sithu from '../../images/homepage/sithu.jpg';
-import axios from 'axios';
-import CountUp from 'react-countup';
-import { motion } from "framer-motion";
-import jesusgonzalez from '../../images/homepage/jesusgonzalez.png';
-import shreevenkatesh from '../../images/homepage/shreevenkatesh.jpg';
-import pranavsoma from '../../images/homepage/pranavsoma.jpg';
-import nikithamaderamitla from '../../images/homepage/nikithaM.jpg';
-import westonzong from '../../images/homepage/westonzong.jpg';
-import vanditajain from '../../images/homepage/vanditajain.jpg';
-import EventCard from '../NewEvents/EventCard';
-
-
-interface EventData {
-  calendar_link: string;
-  description: string;
-  end_time: string;
-  instagram_link: string;
-  location: string;
-  start_time: string;
-  title: string;
-  _id: string;
-}
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { Box, Typography, Button } from '@mui/material';
+import './Home.css';
+
+const upcomingEventsPreview = [
+  { title: '[Event 1]', body: 'Placeholder event description.' },
+  { title: '[Event 2]', body: 'Placeholder event description.' },
+  { title: '[Event 3]', body: 'Placeholder event description.' },
+];
+
+const communitiesPreview = [
+  { title: 'Dev', body: 'Placeholder community description.' },
+  { title: 'Open Source', body: 'Placeholder community description.' },
+  { title: 'Innovate', body: 'Placeholder community description.' },
+];
 
 const Home = () => {
-  const navigate = useNavigate();
-  const styles = homeStyles();
-
-  const [totalEvents, setTotalEvents] = useState(0);
-  const [totalUsers, setTotalUsers] = useState(0);
-  const [currentPersonIndex, setCurrentPersonIndex] = useState(0);
-  const [displayedFutureEvents, setDisplayedFutureEvents] = useState<EventData[]>([]);
-  const [allFutureEvents, setAllFutureEvents] = useState<EventData[]>([]);
-  const [eventsToShow, setEventsToShow] = useState(4);
-  const [currentEventPage, setCurrentEventPage] = useState(0);
-
-
-  const teamMembers = [
-    {
-      name: "Jesus Gonzalez",
-      position: "Software Engineer Intern",
-      company: "Intuit",
-      photo: jesusgonzalez // placeholder for now
-    },
-    {
-      name: "Shree Venkatesh",
-      position: "Software Development Engineer Intern",
-      company: "Amazon Web Services",
-      photo: shreevenkatesh // placeholder for now
-    },
-    {
-      name: "Pranav Soma",
-      position: "Associate Software Engineer",
-      company: "ServiceNow",
-      photo: pranavsoma // placeholder for now
-    },
-    {
-      name: "Nikitha Maderamitla",
-      position: "Software Engineer",
-      company: "Curanostics",
-      photo: nikithamaderamitla // placeholder for now
-    },
-    {
-      name: "Weston Zong",
-      position: "Software Engineer",
-      company: "Roblox",
-      photo: westonzong // placeholder for now
-    },
-    {
-      name: "Vandita Jain",
-      position: "AL and ML Intern",
-      company: "Global Impact Assessment",
-      photo: vanditajain // placeholder for now
-    },
-    
-    {
-      name: "Sithu Soe",
-      position: "Associate Software Engineer Intern",
-      company: "ServiceNow",
-      // classOf: "2026",
-      photo: Sithu
-    },
-    /*{
-      name: "Michael Chen",
-      position: "Full Stack Developer",
-      company: "Microsoft",
-      classOf: "2019",
-      photo: null
-    },
-    {
-      name: "Emily Rodriguez",
-      position: "Product Manager",
-      company: "Apple",
-      classOf: "2021",
-      photo: null
-    },
-    {
-      name: "David Kim",
-      position: "DevOps Engineer",
-      company: "Amazon",
-      classOf: "2018",
-      photo: null
-    },
-    {
-      name: "Lisa Wang",
-      position: "Frontend Developer",
-      company: "Meta",
-      classOf: "2022",
-      photo: null
-    }*/
-  ];
-
-
-  const currentMember = teamMembers[currentPersonIndex];
-
-  const handlePrevPerson = () => {
-    setCurrentPersonIndex((prev) =>
-      prev === 0 ? teamMembers.length - 1 : prev - 1
-    );
-  };
-
-  const handleNextPerson = () => {
-    setCurrentPersonIndex((prev) =>
-      prev === teamMembers.length - 1 ? 0 : prev + 1
-    );
-  };
-
-  const handlePrevEvent = () => {
-    setCurrentEventPage((prev) => {
-      const maxPage = Math.max(0, Math.ceil(allFutureEvents.length / eventsToShow) - 1);
-      return prev > 0 ? prev - 1 : maxPage;
-    });
-  };
-
-  const handleNextEvent = () => {
-    setCurrentEventPage((prev) => {
-      const maxPage = Math.max(0, Math.ceil(allFutureEvents.length / eventsToShow) - 1);
-      return prev < maxPage ? prev + 1 : 0;
-    });
-  };
-
-  useEffect(() => {
-    axios
-      .get(`${process.env.REACT_APP_BACKEND_URL}/api/v1/events`)
-      .then((response) => {
-        setTotalEvents(response.data.length);
-      })
-      .catch((error) => {
-        console.error('Error fetching total events:', error);
-      });
-
-    axios
-      .get(`${process.env.REACT_APP_BACKEND_URL}/api/v1/users/usersCount`)
-      .then((response) => {
-        setTotalUsers(response.data);
-      })
-      .catch((error) => {
-        console.error('Error fetching total users:', error);
-      });
-  }, []);
-
-  useEffect(() => {
-    const handleResize = () => {
-      const isMobile = window.innerWidth <= 600;
-      setEventsToShow(isMobile ? 1 : 4);
-    };
-
-    // Set initial value
-    handleResize();
-
-    // Add event listener
-    window.addEventListener('resize', handleResize);
-
-    // Cleanup
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  useEffect(() => {
-    const fetchRecentEvents = async () => {
-      try {
-        console.log('Fetching events from:', `${process.env.REACT_APP_BACKEND_URL}/api/v1/events?type=upcoming`);
-        const response = await fetch(
-          `${process.env.REACT_APP_BACKEND_URL}/api/v1/events?type=upcoming`
-        );
-        let mostRecentEvents = await response.json();
-        console.log('Events received:', mostRecentEvents);
-        setAllFutureEvents(mostRecentEvents);
-      } catch (error) {
-        console.error('Error fetching upcoming events:', error);
-      }
-    };
-
-    fetchRecentEvents();
-  }, []);
-
-  // Update displayed events when page or eventsToShow changes
-  useEffect(() => {
-    const startIndex = currentEventPage * eventsToShow;
-    const endIndex = startIndex + eventsToShow;
-    setDisplayedFutureEvents(allFutureEvents.slice(startIndex, endIndex));
-  }, [allFutureEvents, currentEventPage, eventsToShow]);
-
   return (
-    <div style={styles.pageWrapper}>
-      <Box sx={styles.root}>
-        <Container maxWidth="xl" sx={styles.container}>
-          {/* Hero Section */}
-          <Grid container spacing={4} alignItems="center" sx={styles.heroGrid}>
-            <Grid item xs={12} md={6} sx={{ order: { xs: 2, md: 1 } }}>
-              <Box sx={styles.heroTextContainer}>
-                <motion.div initial={styles.motionInitialLeft} animate={styles.motionAnimate} transition={styles.motionTransition(0.2)}>
-                  <Box sx={styles.heroTitleWhite}>Create.</Box>
-                </motion.div>
-
-                <motion.div initial={styles.motionInitialLeft} animate={styles.motionAnimate} transition={styles.motionTransition(0.5)}>
-                  <Box sx={styles.heroTitleWhite}>Solve.</Box>
-                </motion.div>
-
-                <motion.div initial={styles.motionInitialLeft} animate={styles.motionAnimate} transition={styles.motionTransition(0.8)}>
-                  <Box sx={styles.heroTitleGold}>Evolve.</Box>
-                </motion.div>
-
-                <Box sx={styles.heroSubtitle}>
-                  We're CSES, the <span style={{ color: '#FFD700' }}>largest</span> student-led tech community at UCSD.
-                </Box>
-              </Box>
-            </Grid>
-
-            <Grid item xs={12} md={6} sx={{ order: { xs: 1, md: 2 } }}>
-              <Box sx={styles.logoContainer}>
-                <img src={HomeLogo} alt="CSE Society Logo" style={styles.logoImage} />
-              </Box>
-            </Grid>
-          </Grid>
-
-          {/* Scroll Down Arrow */}
-          <Box sx={styles.scrollArrowWrapper}>
-            <Box sx={styles.scrollArrow}>⌄</Box>
-          </Box>
-
-          {/* Join Section */}
-          <Box sx={styles.sectionWrapper}>
-            <Box sx={styles.sectionTitle}>Join UCSD's largest computing organisation!</Box>
-
-            <Grid container spacing={2} justifyContent="center" sx={styles.statsGrid}>
-              <Grid item xs={12} sm={4} md={3}>
-                <Box sx={styles.statsCard}>
-                  <Box sx={styles.statsNumber}>
-                    <CountUp end={totalUsers} duration={2} />+
-                  </Box>
-                  <Box sx={styles.statsLabel}>Members</Box>
-                </Box>
-              </Grid>
-
-              <Grid item xs={12} sm={4} md={3}>
-                <Box sx={styles.statsCard}>
-                  <Box sx={styles.statsNumber}>
-                    <CountUp end={totalEvents} duration={2} />+
-                  </Box>
-                  <Box sx={styles.statsLabel}>Annual Events</Box>
-                </Box>
-              </Grid>
-
-              <Grid item xs={12} sm={4} md={3}>
-                <Box sx={styles.statsCard}>
-                  <Box sx={styles.statsNumber}>12+</Box>
-                  <Box sx={styles.statsLabel}>Annual Projects</Box>
-                </Box>
-              </Grid>
-            </Grid>
-
-            {/* <MuiButton
-              variant="outlined"
-              onClick={() => navigate('/membership')}
-              sx={styles.ctaButton}
-            >
-              Become a member now!
-            </MuiButton> */}
-          </Box>
-
-          {/* Events Section  REDO THE WHOLE THING*/}
-          <Box sx={styles.sectionWrapper}>
-            <Box sx={styles.sectionTitle}>{"{Events}"}</Box>
-            <Box sx={styles.eventsWrapper}>
-              <Box sx={styles.arrowLeft} onClick={handlePrevEvent}>‹</Box>
-
-              <Grid container spacing={3} justifyContent="center" sx={styles.eventsGrid}>
-                {displayedFutureEvents.length > 0 ? (
-                  displayedFutureEvents.map((event, index) => (
-                    <Grid item xs={12} sm={6} md={4} key={event._id}>
-                      <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>
-                  ))
-                ) : (
-                  // Fallback for when no events are available
-                  Array.from({ length: eventsToShow }, (_, index) => index + 1).map((event, index) => (
-                    <Grid item xs={12} sm={12} md={4} key={index}>
-                      <Box sx={styles.eventCard}>
-                        <Box sx={styles.eventCardContent}></Box>
-                        <Box sx={styles.eventLabel}>[Event {event}]</Box>
-                      </Box>
-                    </Grid>
-                  ))
-                )}
-              </Grid>
-
-              <Box sx={styles.arrowRight} onClick={handleNextEvent}>›</Box>
-            </Box>
-
-            <Box sx={{ marginTop: '3rem' }}>
-              <MuiButton
-                variant="outlined"
-                onClick={() => navigate('/events')}
-                sx={styles.ctaButton}
-              >
-                See Events Page
-              </MuiButton>
-            </Box>
-          </Box>
-
-          {/* Communities Section */}
-          <Box sx={styles.sectionWrapper}>
-            <Box sx={styles.sectionTitle}>{"{Communities}"}</Box>
-            <Grid container spacing={3} justifyContent="center">
-              <Grid item xs={12} sm={4} onClick={() => navigate('/opensourcecommunity')} style={{ cursor: 'pointer' }}>
-                <img src={OpenSourceLogo} alt="Open Source" style={styles.communityLogo} />
-              </Grid>
-              <Grid item xs={12} sm={4} onClick={() => navigate('/innovatecommunity')} style={{ cursor: 'pointer' }}>
-                <img src={InnovateLogo} alt="Innovate" style={styles.communityLogo} />
-              </Grid>
-              <Grid item xs={12} sm={4} onClick={() => navigate('/devcommunity')} style={{ cursor: 'pointer' }}>
-                <img src={DevLogo} alt="Dev" style={styles.communityLogo} />
-              </Grid>
-            </Grid>
-
-            <Box sx={{ marginTop: '3rem' }}>
-              <MuiButton
-                variant="outlined"
-                onClick={() => navigate('/about')}
-                sx={styles.ctaButton}
-              >
-                About us
-              </MuiButton>
-            </Box>
-          </Box>
-
-          {/* Where We Are Section */}
-          <Box sx={styles.sectionWrapper}>
-            <Box sx={styles.sectionTitle}>{"{Where We Are}"}</Box>
-            <Box sx={styles.carouselWrapper}>
-              <Box sx={styles.arrowLeft} onClick={handlePrevPerson}>‹</Box>
-
-              <Box sx={styles.carouselContent}>
-                <Box sx={styles.photoContainer}>
-                  <Box sx={styles.photoInner}>
-                    {currentMember.photo ? (
-                      <img 
-                        src={currentMember.photo} 
-                        alt={currentMember.name}
-                        style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '12px' }}
-                      />
-                    ) : (
-                      ''
-                    )}
-                  </Box>
-                </Box>
-                <Box sx={styles.carouselText}>
-                  <Box sx={styles.carouselPosition}>{currentMember.position} | {currentMember.company}</Box>
-                  {/* <Box sx={styles.carouselPosition}>{currentMember.classOf}</Box> */}
-                  <Box sx={styles.carouselName}>{currentMember.name}</Box>
-                </Box>
-              </Box>
-
-              <Box sx={styles.arrowRight} onClick={handleNextPerson}>›</Box>
-            </Box>
+    <Box className="home-page">
+      <Typography className="home-hero-heading">Create. Solve. Evolve.</Typography>
+      <Typography className="home-hero-subtitle">
+        We're CSES, UC San Diego's largest student-led computing organization.
+        Placeholder copy — real content coming soon.
+      </Typography>
+
+      <Box className="home-cta-wrapper">
+        <Button component={RouterLink} to="/join-us" className="home-cta-button">
+          Join Us
+        </Button>
+      </Box>
 
-            <Box sx={styles.dotsWrapper}>
-              {teamMembers.map((_, index) => (
-                <Box key={index} sx={index === currentPersonIndex ? styles.dotActive : styles.dot} onClick={() => setCurrentPersonIndex(index)} />
-              ))}
+      <Box className="home-section">
+        <Typography className="home-section-title">Upcoming Events</Typography>
+        <Box className="home-card-grid">
+          {upcomingEventsPreview.map((event) => (
+            <Box key={event.title} className="home-card">
+              <Typography className="home-card-title">{event.title}</Typography>
+              <Typography className="home-card-body">{event.body}</Typography>
             </Box>
+          ))}
+        </Box>
+        <Box className="home-secondary-button-wrapper">
+          <Button component={RouterLink} to="/events" className="home-secondary-button">
+            See Events Page
+          </Button>
+        </Box>
+      </Box>
 
-            <MuiButton
-              variant="outlined"
-              onClick={() => navigate('/about')}
-              sx={styles.ctaButton}
-            >
-              Meet the Team
-            </MuiButton>
-          </Box>
-
-          {/* Current Sponsors */}
-          <Box sx={styles.sectionWrapper}>
-            <Box sx={styles.sectionTitle}>{"{Current Sponsors}"}</Box>
-            <Box sx={styles.sponsorSubtitle}>
-              Interested in how CSES can help you? Contact csed@ucsd.edu or view our sponsorship package here.
+      <Box className="home-section">
+        <Typography className="home-section-title">Communities</Typography>
+        <Box className="home-card-grid">
+          {communitiesPreview.map((community) => (
+            <Box key={community.title} className="home-card">
+              <Typography className="home-card-title">{community.title}</Typography>
+              <Typography className="home-card-body">{community.body}</Typography>
             </Box>
-
-            <Grid container spacing={3} justifyContent="center" alignItems="center">
-              <Grid item xs={6} sm={4} md={2}><img src={ASLogo} alt="Associated Student" style={styles.sponsorLogo} /></Grid>
-              <Grid item xs={6} sm={4} md={2}><img src={CSEDeptLogo} alt="CSE Department" style={styles.sponsorLogo} /></Grid>
-              <Grid item xs={6} sm={4} md={2}><img src={BSLLogo} alt="Big Strategy Lab" style={styles.sponsorLogo} /></Grid> 
-              <Grid item xs={6} sm={4} md={2}><img src={RobloxLogo} alt="Roblox" style={styles.sponsorLogo} /></Grid>
-              <Grid item xs={6} sm={4} md={2}><img src={PersonaLogo} alt="Persona" style={styles.sponsorLogo} /></Grid>
-              <Grid item xs={6} sm={4} md={2}><img src={LovableLogo} alt="Lovable" style={styles.sponsorLogo} /></Grid>
-              <Grid item xs={6} sm={4} md={2}><img src={EyePopAILogo} alt="EyePop AI" style={styles.sponsorLogo} /></Grid>
-              <Grid item xs={6} sm={4} md={2}><img src={IGELogo} alt="IGE" style={styles.sponsorLogo} /></Grid>
-              <Grid item xs={6} sm={4} md={2}><img src={LinuxLogo} alt="Linux Foundation" style={styles.sponsorLogo} /></Grid>
-              <Grid item xs={6} sm={4} md={2}><img src={OSPOLogo} alt="OSPO" style={styles.sponsorLogo} /></Grid>
-              <Grid item xs={6} sm={4} md={2}><img src={BasementLogo} alt="Basement" style={styles.sponsorLogo} /></Grid>
-            </Grid>
-          </Box>
-        </Container>
+          ))}
+        </Box>
+        <Box className="home-secondary-button-wrapper">
+          <Button component={RouterLink} to="/communities" className="home-secondary-button">
+            See Communities Page
+          </Button>
+        </Box>
       </Box>
-    </div>
+    </Box>
   );
 };
 
diff --git a/frontend/src/components/JoinUs/JoinUs.css b/frontend/src/components/JoinUs/JoinUs.css
new file mode 100644
index 00000000..5e059691
--- /dev/null
+++ b/frontend/src/components/JoinUs/JoinUs.css
@@ -0,0 +1,392 @@
+.join-us-page {
+  position: relative;
+  min-height: 100vh;
+  color: white;
+  background:
+    radial-gradient(ellipse 1400px 900px at 20% 15%, rgba(139, 92, 246, 0.15), transparent 65%),
+    radial-gradient(ellipse 1400px 900px at 80% 32%, rgba(68, 156, 185, 0.12), transparent 65%),
+    radial-gradient(ellipse 1400px 900px at 50% 68%, rgba(59, 181, 157, 0.1), transparent 65%),
+    #0a0a0f;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 94px;
+  padding-bottom: 64px;
+  padding-left: 24px;
+  padding-right: 24px;
+  overflow: hidden;
+}
+
+@media (min-width: 900px) {
+  .join-us-page {
+    padding-top: 105px;
+    padding-bottom: 0;
+  }
+}
+
+/* Below 900px: simple flexible flow, since no mobile spec exists. */
+.join-us-canvas {
+  position: relative;
+  width: 100%;
+  max-width: 1109px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* At 900px+: switch to an absolutely-positioned canvas matching the
+   Figma export 1:1 (coordinates measured from the bottom edge of the
+   105px-tall navbar, i.e. figma_y - 105). */
+@media (min-width: 900px) {
+  .join-us-canvas {
+    height: 1850px;
+    display: block;
+  }
+}
+
+.join-us-decor {
+  position: absolute;
+  pointer-events: none;
+  display: none;
+}
+
+@media (min-width: 900px) {
+  .join-us-decor {
+    display: block;
+  }
+}
+
+.join-us-decor-chain {
+  top: 167px;
+  left: 62px;
+  width: 401px;
+  height: 304px;
+}
+
+.join-us-decor-lightbulb {
+  top: 81px;
+  left: 779px;
+  width: 258px;
+  height: 371px;
+}
+
+.join-us-decor-gear {
+  top: 523px;
+  left: 9px;
+  width: 484px;
+  height: 484px;
+  z-index: 0;
+}
+
+.join-us-heading {
+  position: relative;
+  font-family: 'Space Mono', monospace !important;
+  font-size: 2.5rem !important;
+  font-weight: 400 !important;
+  color: #ebb111 !important;
+  margin-bottom: 24px;
+  z-index: 1;
+}
+
+@media (min-width: 900px) {
+  .join-us-heading {
+    position: absolute;
+    top: 52px;
+    left: 408px;
+    width: 294px;
+    text-align: center;
+    margin-bottom: 0;
+    font-size: 3rem !important;
+    white-space: nowrap;
+  }
+}
+
+.join-us-subtext {
+  position: relative;
+  font-family: 'Space Mono', monospace !important;
+  font-size: 1.15rem !important;
+  font-weight: 400 !important;
+  text-align: center;
+  max-width: 480px;
+  margin-bottom: 56px;
+  line-height: 1.35 !important;
+  z-index: 1;
+}
+
+@media (min-width: 900px) {
+  .join-us-subtext {
+    position: absolute;
+    top: 171px;
+    left: 194px;
+    width: 742px;
+    max-width: none;
+    margin-bottom: 0;
+    font-size: 1.875rem !important;
+  }
+}
+
+.join-us-apply-button {
+  box-sizing: border-box;
+  position: relative;
+  width: 231px;
+  height: 75px;
+  background-color: #2d2d3e !important;
+  border: 1px solid #a855f7;
+  border-radius: 4px !important;
+  color: white !important;
+  font-family: 'Space Mono', monospace !important;
+  font-size: 1.75rem !important;
+  font-weight: 700 !important;
+  text-transform: none !important;
+  margin-bottom: 48px;
+  z-index: 1;
+}
+
+@media (min-width: 900px) {
+  .join-us-apply-button {
+    position: absolute;
+    top: 348px;
+    left: 450px;
+    margin-bottom: 0;
+    font-size: 2.3125rem !important;
+  }
+}
+
+.join-us-apply-button:hover {
+  background-color: #363648 !important;
+}
+
+.join-us-tagline {
+  position: relative;
+  font-family: 'Space Mono', monospace !important;
+  font-size: 1.5rem !important;
+  font-weight: 400 !important;
+  text-align: center;
+  margin-bottom: 32px;
+  z-index: 1;
+}
+
+@media (min-width: 900px) {
+  .join-us-tagline {
+    position: absolute;
+    top: 510px;
+    left: 185px;
+    width: 760px;
+    margin-bottom: 0;
+    font-size: 1.75rem !important;
+    white-space: nowrap;
+  }
+}
+
+.join-us-stats {
+  position: relative;
+  width: 100%;
+  display: flex;
+  gap: 24px;
+  margin-bottom: 64px;
+  flex-wrap: wrap;
+  justify-content: center;
+  z-index: 1;
+}
+
+@media (min-width: 900px) {
+  .join-us-stats {
+    position: absolute;
+    top: 600px;
+    left: 0;
+    width: 100%;
+    margin-bottom: 0;
+    gap: 0;
+  }
+}
+
+.join-us-stat-box {
+  box-sizing: border-box;
+  background-color: #2d2d3e;
+  border: 1px solid #a855f7;
+  border-radius: 4.5px;
+  padding: 24px 32px;
+  text-align: center;
+  min-width: 140px;
+}
+
+@media (min-width: 900px) {
+  .join-us-stat-box {
+    position: absolute;
+    top: 0;
+    width: 279px;
+    height: 195px;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .join-us-stat-box--0 {
+    left: 102px;
+  }
+
+  .join-us-stat-box--1 {
+    left: 426px;
+  }
+
+  .join-us-stat-box--2 {
+    left: 750px;
+  }
+}
+
+.join-us-stat-number {
+  font-family: 'Space Mono', monospace !important;
+  font-size: 2.25rem !important;
+  font-weight: 700 !important;
+  margin-bottom: 8px;
+}
+
+@media (min-width: 900px) {
+  .join-us-stat-number {
+    font-size: 2.875rem !important;
+    margin-top: 40px;
+    margin-bottom: 12px;
+  }
+}
+
+.join-us-stat-label {
+  font-family: 'Space Mono', monospace !important;
+  font-size: 1.15rem !important;
+  font-weight: 400 !important;
+  white-space: pre-line;
+}
+
+@media (min-width: 900px) {
+  .join-us-stat-label {
+    font-size: 1.875rem !important;
+  }
+}
+
+.join-us-partners-heading {
+  position: relative;
+  font-family: 'Space Mono', monospace !important;
+  font-size: 2rem !important;
+  font-weight: 400 !important;
+  text-align: center;
+  margin-bottom: 48px;
+  z-index: 1;
+}
+
+@media (min-width: 900px) {
+  .join-us-partners-heading {
+    position: absolute;
+    top: 876px;
+    left: 76px;
+    width: 964px;
+    margin-bottom: 0;
+    font-size: 2.9375rem !important;
+    white-space: nowrap;
+  }
+}
+
+.join-us-sponsor-rows {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  z-index: 1;
+}
+
+@media (min-width: 900px) {
+  .join-us-sponsor-rows {
+    position: absolute;
+    top: 1035px;
+    left: 0;
+    width: 100%;
+    gap: 0;
+  }
+}
+
+.join-us-sponsor-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 24px;
+}
+
+@media (min-width: 900px) {
+  .join-us-sponsor-row {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 148px;
+    gap: 0;
+  }
+
+  .join-us-sponsor-row--0 {
+    top: 0px;
+  }
+
+  .join-us-sponsor-row--1 {
+    top: 194px;
+  }
+
+  .join-us-sponsor-row--2 {
+    top: 388px;
+  }
+
+  .join-us-sponsor-row--3 {
+    top: 582px;
+  }
+}
+
+.join-us-sponsor-box {
+  width: 120px;
+  height: 90px;
+  background-color: #d9d9d9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+@media (min-width: 900px) {
+  .join-us-sponsor-box {
+    position: absolute;
+    top: 0;
+    width: 267px;
+    height: 148px;
+  }
+
+  /* rows 0, 2, 3: symmetric 3-up layout at x=101, 421, 741 */
+  .join-us-sponsor-row--0 .join-us-sponsor-box--0,
+  .join-us-sponsor-row--2 .join-us-sponsor-box--0,
+  .join-us-sponsor-row--3 .join-us-sponsor-box--0 {
+    left: 101px;
+  }
+
+  .join-us-sponsor-row--0 .join-us-sponsor-box--1,
+  .join-us-sponsor-row--2 .join-us-sponsor-box--1,
+  .join-us-sponsor-row--3 .join-us-sponsor-box--1 {
+    left: 421px;
+  }
+
+  .join-us-sponsor-row--0 .join-us-sponsor-box--2,
+  .join-us-sponsor-row--2 .join-us-sponsor-box--2,
+  .join-us-sponsor-row--3 .join-us-sponsor-box--2 {
+    left: 741px;
+  }
+
+  /* row 1: staggered/offset 2-up layout at x=271, 607 */
+  .join-us-sponsor-row--1 .join-us-sponsor-box--0 {
+    left: 271px;
+  }
+
+  .join-us-sponsor-row--1 .join-us-sponsor-box--1 {
+    left: 607px;
+  }
+}
+
+.join-us-sponsor-img {
+  max-width: 85%;
+  max-height: 85%;
+  object-fit: contain;
+}
diff --git a/frontend/src/components/JoinUs/JoinUs.tsx b/frontend/src/components/JoinUs/JoinUs.tsx
new file mode 100644
index 00000000..a42ebb7c
--- /dev/null
+++ b/frontend/src/components/JoinUs/JoinUs.tsx
@@ -0,0 +1,129 @@
+import React from 'react';
+import { Box, Typography, Button } from '@mui/material';
+import './JoinUs.css';
+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 stats = [
+  { number: '455+', label: 'members' },
+  { number: '18+', label: 'annual\nevents' },
+  { number: '12+', label: 'annual\nprojects' },
+];
+
+// Matches the design's staggered 3-2-3(-3) sponsor grid.
+const sponsorRows = [
+  [
+    { src: ASLogo, alt: 'Associated Students' },
+    { src: CSEDeptLogo, alt: 'CSE Department' },
+    { src: BSLLogo, alt: 'Big Strategy Lab' },
+  ],
+  [
+    { src: RobloxLogo, alt: 'Roblox' },
+    { src: PersonaLogo, alt: 'Persona' },
+  ],
+  [
+    { src: LovableLogo, alt: 'Lovable' },
+    { src: EyePopAILogo, alt: 'EyePop AI' },
+    { src: IGELogo, alt: 'IGE' },
+  ],
+  [
+    { src: LinuxLogo, alt: 'Linux Foundation' },
+    { src: OSPOLogo, alt: 'OSPO' },
+    { src: BasementLogo, alt: 'Basement' },
+  ],
+];
+
+const JoinUs = () => {
+  return (
+    <Box className="join-us-page">
+      <Box className="join-us-canvas">
+        <Box
+          component="img"
+          src={chainGraphic}
+          alt=""
+          className="join-us-decor join-us-decor-chain"
+        />
+        <Box
+          component="img"
+          src={lightbulbGraphic}
+          alt=""
+          className="join-us-decor join-us-decor-lightbulb"
+        />
+        <Box
+          component="img"
+          src={gearGraphic}
+          alt=""
+          className="join-us-decor join-us-decor-gear"
+        />
+
+        {/* Heading */}
+        <Typography className="join-us-heading">Join us.</Typography>
+
+        {/* Subtext */}
+        <Typography className="join-us-subtext">
+          Interested in joining our initiative? Apply below!
+        </Typography>
+
+        {/* Apply Button */}
+        <Button href="#" className="join-us-apply-button">
+          Apply
+        </Button>
+
+        {/* Organization tagline */}
+        <Typography className="join-us-tagline">
+          We are UCSD's largest computing organization
+        </Typography>
+
+        {/* Stats */}
+        <Box className="join-us-stats">
+          {stats.map((stat, i) => (
+            <Box key={stat.label} className={`join-us-stat-box join-us-stat-box--${i}`}>
+              <Typography className="join-us-stat-number">{stat.number}</Typography>
+              <Typography className="join-us-stat-label">{stat.label}</Typography>
+            </Box>
+          ))}
+        </Box>
+
+        {/* Partners Section */}
+        <Typography className="join-us-partners-heading">
+          Thank You to Our Current Partners
+        </Typography>
+
+        {/* Sponsor Logos Grid (staggered 3-2-3-3 rows, matching design) */}
+        <Box className="join-us-sponsor-rows">
+          {sponsorRows.map((row, rowIndex) => (
+            <Box key={rowIndex} className={`join-us-sponsor-row join-us-sponsor-row--${rowIndex}`}>
+              {row.map((sponsor, boxIndex) => (
+                <Box
+                  key={sponsor.alt}
+                  className={`join-us-sponsor-box join-us-sponsor-box--${boxIndex}`}
+                >
+                  <Box
+                    component="img"
+                    src={sponsor.src}
+                    alt={sponsor.alt}
+                    className="join-us-sponsor-img"
+                  />
+                </Box>
+              ))}
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default JoinUs;
diff --git a/frontend/src/components/NavBar/NavBar.tsx b/frontend/src/components/NavBar/NavBar.tsx
index 0438ec50..5610fe0a 100644
--- a/frontend/src/components/NavBar/NavBar.tsx
+++ b/frontend/src/components/NavBar/NavBar.tsx
@@ -1,4 +1,5 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useState } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
 import {
   AppBar,
   IconButton,
@@ -10,177 +11,171 @@ import {
   Box,
   Button,
   Toolbar,
-  Avatar,
 } from '@mui/material';
 import { Menu as MenuIcon, Close as CloseIcon } from '@mui/icons-material';
-import { Link, useNavigate, useLocation } from 'react-router-dom';
-import csesLogo from '../../images/CSES-logo.png';
-import MuiButton from '../Button/Button';
-import { navBarStyles } from './styles';
-import { AuthContext } from '../../context/AuthContext';
-import ProfileDropdown from './ProfileDropdown';
-import { User } from '../../utils/types';
-import axios from 'axios';
+import csesLogo from '../../images/cses-logo-white.png';
 
 const NavBar = () => {
-  const location = useLocation();
-  const styles = navBarStyles();
-  const navigate = useNavigate();
-
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const [userData, setUserData] = useState<User | null>(null);
-
-  const { user, isLoggedIn } = useContext(AuthContext);
-
-  const navItems = [
-    { text: 'About', link: '/about' },
-    { text: 'Events', link: '/events' },
-    { text: 'Sponsors', link: '/sponsorships' },
-    { text: 'Initiatives', link: '/initiatives' },
-  ];
-
-  const clickItem = (link: string) => {
-    setIsDrawerOpen(false);
-    navigate(link);
-  };
-
-  useEffect(() => {
-    const fetchUserData = async () => {
-      try {
-        if (isLoggedIn) {
-          const response = await axios.get(
-            `${process.env.REACT_APP_BACKEND_URL}/api/v1/users/${user.email}`,
-          );
-          setUserData(response.data);
-        }
-      } catch (error) {
-        console.log('Error fetching user data: ', error);
-      }
-    };
-
-    fetchUserData();
-  }, [isLoggedIn, user.email, navigate]);
 
   return (
     <div>
-      <AppBar sx={{ backgroundColor: '#030E5D' }} position="fixed" elevation={0}>
-        <Toolbar>
-          <Link to="/">
+      <AppBar
+        position="fixed"
+        elevation={0}
+        sx={{
+          backgroundColor: 'rgba(26, 26, 36, 0.6)',
+          backdropFilter: 'blur(8px)',
+          borderBottom: '2px solid rgba(139, 92, 246, 0.2)',
+        }}
+      >
+        <Toolbar
+          disableGutters
+          sx={{
+            height: { xs: 70, md: 105 },
+            minHeight: { xs: 70, md: 105 },
+            maxWidth: 1109,
+            mx: 'auto',
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            px: { xs: 2, md: '28px' },
+          }}
+        >
+          {/* Logo + text */}
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
             <img
               src={csesLogo}
-              alt="logo"
-              style={{ margin: 'clamp(20px, 4vw, 25px)', height: '55px' }}
+              alt="CSES logo"
+              style={{ height: '45px' }}
             />
-          </Link>
-
-          <div style={{ flexGrow: 1 }} />
-
-          <Box sx={{ display: { xs: 'none', md: 'block' } }}>
-            {navItems.map(({ text, link }) => (
-              <Button key={text} component={Link} to={link} sx={styles.button}>
-                {text}
-              </Button>
-            ))}
-
-            {/* Gradient Join Us Button */}
-            {/* {!isLoggedIn && location.pathname !== '/login' && (
-              <Box
-                onClick={() => navigate('/login')}
-                sx={{
-                  cursor: 'pointer',
-                  background: 'linear-gradient(to left, #725DEF, #63CDDB, #EBB211)',
-                  padding: '2px',
-                  borderRadius: '999px',
-                  display: 'inline-flex',
-                  marginLeft: '12px',
-                }}
-              >
-                <Box
-                  sx={{
-                    backgroundColor: '#030E5D',
-                    borderRadius: '999px',
-                    padding: '6px 24px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
-                >
-                  <Typography
-                    sx={{
-                      color: 'white',
-                      fontSize: '18px',
-                      fontWeight: 600,
-                      textAlign: 'center',
-                    }}
-                  >
-                    Join Us
-                  </Typography>
-                </Box>
-              </Box>
-            )} */}
+            <Typography
+              sx={{
+                color: 'white',
+                fontFamily: '"Space Mono", monospace',
+                fontSize: '1.1rem',
+                ml: '27px',
+                display: { xs: 'none', sm: 'block' },
+              }}
+            >
+              at UC San Diego
+            </Typography>
           </Box>
 
-          {isLoggedIn && userData && (
-            <div style={{ display: 'flex', alignItems: 'center', marginLeft: '10px' }}>
-              <Link to="/membership">
-                <Avatar
-                  alt="User"
-                  src={userData.profilePicture}
-                  sx={{ width: 60, height: 60, marginLeft: '1%' }}
-                />
-              </Link>
-              <ProfileDropdown />
-            </div>
-          )}
+          {/* Desktop Nav */}
+          <Box sx={{ display: { xs: 'none', md: 'flex' }, alignItems: 'center' }}>
+            {/* Home/Events/Communities are placeholders for now (owned by
+                another dev) — visible but intentionally not linked. */}
+            <Button
+              disableRipple
+              sx={{
+                color: 'white',
+                fontFamily: '"Space Mono", monospace',
+                fontSize: '1rem',
+                textTransform: 'none',
+                mr: '37px',
+                cursor: 'default',
+                '&:hover': { backgroundColor: 'transparent' },
+              }}
+            >
+              Home
+            </Button>
+            <Button
+              disableRipple
+              sx={{
+                color: 'white',
+                fontFamily: '"Space Mono", monospace',
+                fontSize: '1rem',
+                textTransform: 'none',
+                mr: '30px',
+                cursor: 'default',
+                '&:hover': { backgroundColor: 'transparent' },
+              }}
+            >
+              Events
+            </Button>
+            <Button
+              disableRipple
+              sx={{
+                color: 'white',
+                fontFamily: '"Space Mono", monospace',
+                fontSize: '1rem',
+                textTransform: 'none',
+                mr: '19px',
+                cursor: 'default',
+                '&:hover': { backgroundColor: 'transparent' },
+              }}
+            >
+              Communities
+            </Button>
+            <Button
+              component={RouterLink}
+              to="/join-us"
+              sx={{
+                backgroundColor: '#8B5CF6',
+                color: 'white',
+                fontFamily: '"Space Mono", monospace',
+                fontSize: '1rem',
+                textTransform: 'none',
+                borderRadius: '10px',
+                width: '136px',
+                height: '40px',
+                '&:hover': {
+                  backgroundColor: '#7c4fe0',
+                },
+              }}
+            >
+              Join Us
+            </Button>
+          </Box>
 
+          {/* Mobile Menu Icon */}
           <Box sx={{ display: { xs: 'block', md: 'none' } }}>
-            <IconButton onClick={() => setIsDrawerOpen(!isDrawerOpen)} color="inherit">
-              {!isDrawerOpen && <MenuIcon sx={styles.menuicon} />}
+            <IconButton onClick={() => setIsDrawerOpen(true)} color="inherit">
+              <MenuIcon sx={{ fontSize: '2rem' }} />
             </IconButton>
           </Box>
         </Toolbar>
-        <Box
-          sx={{
-            height: '4px',
-            background: 'linear-gradient(to right, #725DEF, #63CDDB, #EBB211)',
-          }}
-        />
       </AppBar>
 
-
+      {/* Mobile Drawer */}
       <Drawer anchor="top" open={isDrawerOpen} onClose={() => setIsDrawerOpen(false)}>
-        <List sx={{ background: '#030E5D' }}>
+        <List sx={{ background: '#4a4a5c', minHeight: '100vh' }}>
           <ListItem
             button
             sx={{ justifyContent: 'flex-end' }}
             onClick={() => setIsDrawerOpen(false)}
           >
-            <CloseIcon sx={styles.closeicon} />
+            <CloseIcon sx={{ color: 'white', fontSize: '2rem' }} />
           </ListItem>
-
-          {navItems.map(({ text, link }) => (
-            <ListItem button key={text} sx={styles.listitem} onClick={() => clickItem(link)}>
+          {/* Home/Events/Communities are placeholders for now (owned by
+              another dev) — visible but intentionally not linked. */}
+          {['Home', 'Events', 'Communities'].map((text) => (
+            <ListItem key={text}>
               <ListItemText
                 primary={
-                  <Typography align="center" sx={styles.button}>
+                  <Typography sx={{ color: 'white', textAlign: 'center', fontSize: '1.25rem', fontFamily: '"Space Mono", monospace' }}>
                     {text}
                   </Typography>
                 }
               />
             </ListItem>
           ))}
-
-          {/* {!isLoggedIn && location.pathname !== '/login' && (
-            <ListItem button key="Login" sx={styles.listitem} onClick={() => clickItem('/login')}>
-              <ListItemText
-                primary={
-                  <Typography align="center" sx={styles.button}>
-                    Join Us
-                  </Typography>
-                }
-              />
-            </ListItem>
-          )} */}
+          <ListItem
+            button
+            component={RouterLink}
+            to="/join-us"
+            onClick={() => setIsDrawerOpen(false)}
+          >
+            <ListItemText
+              primary={
+                <Typography sx={{ color: '#8B5CF6', textAlign: 'center', fontSize: '1.25rem', fontWeight: 600, fontFamily: '"Space Mono", monospace' }}>
+                  Join Us
+                </Typography>
+              }
+            />
+          </ListItem>
         </List>
       </Drawer>
     </div>
diff --git a/frontend/src/components/Sponsorships/Sponsorships.css b/frontend/src/components/Sponsorships/Sponsorships.css
deleted file mode 100644
index 7b8df022..00000000
--- a/frontend/src/components/Sponsorships/Sponsorships.css
+++ /dev/null
@@ -1,125 +0,0 @@
-.sponsorships {
-  min-height: 100vh;
-  margin: 0;
-  background-color: #040f59; 
-  color: white;     
-  font-family: Arial, sans-serif;
-  text-align: center;
-}
-
-.sponsorships-container {
-  height: 100%;              
-  display: flex;
-  flex-direction: column;
-  align-items: center;     
-  justify-content: center;
-  gap: 2rem;                    
-  padding: 20px;
-  margin-top: 115px;
-  margin-bottom: 100px;
-  text-align: center;
-}
-
-.sponsorships h1 {
-  font-size: 3.5rem; 
-  margin: 0;
-}
-
-.sponsorships h2 {
-  font-size: 2.8rem;  
-  margin: 0;
-  margin-bottom: 10px;
-}
-
-.sponsorships p {
-  font-size: 1.5rem;   
-  line-height: 1.2;
-  margin: 0;
-  margin-top: 10px;
-}
-
-.computer-science {
-  display: block;
-}
-
-.sponsorship-link {
-  display: block;
-}
-
-/* Accent colors */
-.blue   { color: #64c3e3;}
-.purple { color: #725df0;}
-.teal   { color: #5df0c4;}
-.yellow { color: #ebb111;}
-
-.sponsorships a {
-  color: #64c3e3;
-  text-decoration: underline;
-}
-.sponsorships a:hover {
-  color: #4a9bb8;
-}
-
-.logos {
-  display: flex;
-  justify-content: center;
-  gap: 2rem;
-  flex-wrap: wrap;
-  margin-bottom: 2rem;
-}
-.logos img {
-  height: 120px;
-  width: auto;
-  max-width: 200px;
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
-  padding: 10px;
-  object-fit: contain;
-}
-
-@media (max-width: 650px){
-  .sponsorships-container {
-    margin-top: 120px; 
-  }
-
-  .sponsorships h1 {
-    padding: 0 5rem;
-    margin-top: 10px;
-    margin-bottom: 30px;
-  }
-
-  .sponsorships h2 {
-    padding: 0 5rem;
-    margin-top: 30px;
-    margin-bottom: 20px;
-  }
-
-  .sponsorships p {
-    line-height: 1.2;
-    margin-bottom: 30px;
-  }
-
-  .computer-science {
-    display: inline;
-    white-space: nowrap;  
-  }
-
-  .sponsorship-link {
-    display: inline;
-    white-space: nowrap; 
-  }
-
-  .logos {
-    flex-direction: row; 
-    gap: 1rem;              
-    align-items: center;   
-    justify-content: center;
-  }
-
-  .logos img {
-    height: 80px;        
-    max-width: 120px;     
-    object-fit: contain;   
-  }
-}
diff --git a/frontend/src/components/Sponsorships/Sponsorships.tsx b/frontend/src/components/Sponsorships/Sponsorships.tsx
deleted file mode 100644
index e02232db..00000000
--- a/frontend/src/components/Sponsorships/Sponsorships.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from "react";
-import "./Sponsorships.css";
-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";
-
-export default function Sponsorships() {
-  return (
-    <div className="sponsorships">
-      <div className="sponsorships-container">
-        <h1>Become a part of the Team!</h1>
-
-        <p>
-          Join us in our mission to{" "}
-          <span className="blue">build</span>,{" "}
-          <span className="purple">innovate</span>, and{" "}
-          <span className="teal">lead</span> the future of{" "}
-          <span className="yellow computer-science">computer science.</span>
-        </p>
-      
-        <p>
-          Check out our sponsorship package{" "}
-          <span className="sponsorship-link">
-            <a href="/SponsorshipPackage.pdf" download>here.</a>
-          </span>
-        </p>
-      
-        <h2>Thank You to our Current Partners</h2>
-      
-        <div className="logos">
-          <img src={ASLogo} alt="Associated Students Logo" className="sponsor-logo"/>
-          <img src={CSEDeptLogo} alt="CSE Department Logo" className="sponsor-logo" />
-          <img src={BSLLogo} alt="Big Strategy Lab" className="sponsor-logo" /> 
-          <img src={RobloxLogo} alt="Roblox Logo" className="sponsor-logo" />
-          <img src={PersonaLogo} alt="Persona Logo" className="sponsor-logo" />
-          <img src={LovableLogo} alt="Lovable Logo" className="sponsor-logo" />
-          <img src={EyePopAILogo} alt="EyePop AI Logo" className="sponsor-logo" />
-          <img src={IGELogo} alt="IGE Logo" className="sponsor-logo" />
-          <img src={LinuxLogo} alt="Linux Foundation Logo" className="sponsor-logo" />
-          <img src={OSPOLogo} alt="OSPO Logo" className="sponsor-logo" />
-          <img src={BasementLogo} alt="Basement Logo" className="sponsor-logo" />
-        </div>
-      </div>
-    </div>
-  );
-}
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/instagram-icon.svg b/frontend/src/images/instagram-icon.svg
index fed2ecf7..f7298303 100644
--- a/frontend/src/images/instagram-icon.svg
+++ b/frontend/src/images/instagram-icon.svg
@@ -1 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M184.715 2.752h270.582C556.908 2.752 640 84.816 640 185.069v269.85c0 100.277-83.092 182.317-184.703 182.317H184.715C83.104 637.236 0 555.196 0 454.919v-269.85C0 84.816 83.103 2.752 184.715 2.752zm133.561 145.939c98.741 0 178.868 80.127 178.868 178.868 0 98.753-80.127 178.868-178.868 178.868-98.765 0-178.88-80.115-178.88-178.868 0-98.741 80.115-178.868 178.88-178.868zm0 60.414c65.387 0 118.454 53.056 118.454 118.454s-53.068 118.466-118.454 118.466c-65.41 0-118.466-53.067-118.466-118.466 0-65.398 53.056-118.454 118.466-118.454zM491.321 123.9c16.04 0 29.044 13.004 29.044 29.032 0 16.04-13.004 29.044-29.044 29.044-16.028 0-29.032-13.004-29.032-29.044 0-16.028 13.004-29.032 29.032-29.032zM206.825 54.58H433.21c85.005 0 154.526 69.178 154.526 153.712V435.81c0 84.532-69.52 153.699-154.526 153.699H206.825c-85.005 0-154.537-69.167-154.537-153.7V208.29c0-84.532 69.532-153.71 154.537-153.71z" fill="#ffffff"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47">
+<g transform="translate(-930.714 -38)">
+<path d="M966.609 48.4403C966.085 48.4403 965.661 48.0208 965.661 47.5033C965.661 46.9859 966.085 46.5664 966.609 46.5664" stroke="white" stroke-opacity="0.9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M966.609 48.4403C967.132 48.4403 967.556 48.0208 967.556 47.5033C967.556 46.9859 967.132 46.5664 966.609 46.5664" stroke="white" stroke-opacity="0.9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M930.714 47.6428C930.714 42.3173 935.078 38 940.461 38H966.455C971.839 38 976.203 42.3173 976.203 47.6428V73.3572C976.203 78.6827 971.839 83 966.455 83H940.461C935.078 83 930.714 78.6827 930.714 73.3572V47.6428Z" stroke="white" stroke-opacity="0.9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M946.628 67.2556C944.816 65.4633 943.798 63.0326 943.798 60.498C943.798 57.9634 944.816 55.5327 946.628 53.7405C948.439 51.9483 950.896 50.9414 953.459 50.9414C956.021 50.9414 958.478 51.9483 960.29 53.7405C962.101 55.5327 963.119 57.9634 963.119 60.498C963.119 63.0326 962.101 65.4633 960.29 67.2556C958.478 69.0478 956.021 70.0546 953.459 70.0546C950.896 70.0546 948.439 69.0478 946.628 67.2556Z" stroke="white" stroke-opacity="0.9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
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
diff --git a/frontend/src/images/linkedin-icon.svg b/frontend/src/images/linkedin-icon.svg
index 83444e20..83440956 100644
--- a/frontend/src/images/linkedin-icon.svg
+++ b/frontend/src/images/linkedin-icon.svg
@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="800px" height="800px" viewBox="0 0 24 24" data-name="Layer 1" transform="matrix(1, 0, 0, 1, 0, 0)"><path d="M20.47,2H3.53A1.45,1.45,0,0,0,2.06,3.43V20.57A1.45,1.45,0,0,0,3.53,22H20.47a1.45,1.45,0,0,0,1.47-1.43V3.43A1.45,1.45,0,0,0,20.47,2ZM8.09,18.74h-3v-9h3ZM6.59,8.48h0a1.56,1.56,0,1,1,0-3.12,1.57,1.57,0,1,1,0,3.12ZM18.91,18.74h-3V13.91c0-1.21-.43-2-1.52-2A1.65,1.65,0,0,0,12.85,13a2,2,0,0,0-.1.73v5h-3s0-8.18,0-9h3V11A3,3,0,0,1,15.46,9.5c2,0,3.45,1.29,3.45,4.06Z" fill="#ffffff"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 47">
+<g transform="translate(-986.167 -37.125)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M994.833 37.125C992.535 37.125 990.33 38.0205 988.705 39.6146C987.08 41.2087 986.167 43.3707 986.167 45.625V75.375C986.167 77.6293 987.08 79.7913 988.705 81.3854C990.33 82.9795 992.535 83.875 994.833 83.875H1025.17C1027.47 83.875 1029.67 82.9795 1031.29 81.3854C1032.92 79.7913 1033.83 77.6293 1033.83 75.375V45.625C1033.83 43.3707 1032.92 41.2087 1031.29 39.6146C1029.67 38.0205 1027.47 37.125 1025.17 37.125H994.833ZM997.444 51.8088C998.424 51.8088 999.364 51.427 1000.06 50.7476C1000.75 50.0681 1001.14 49.1465 1001.14 48.1856C1001.14 47.2247 1000.75 46.3032 1000.06 45.6237C999.364 44.9442 998.424 44.5625 997.444 44.5625C996.464 44.5625 995.525 44.9442 994.832 45.6237C994.139 46.3032 993.75 47.2247 993.75 48.1856C993.75 49.1465 994.139 50.0681 994.832 50.7476C995.525 51.427 996.464 51.8087 997.444 51.8088ZM1001.14 76.4375V54.7051H993.75V76.4375H1001.14H1001.14ZM1010.74 54.7051H1004.09V76.4375H1010.74V63.3263C1011.59 61.962 1013.07 60.5 1015.17 60.5C1018.12 60.5 1018.86 63.3985 1018.86 64.8477V76.4375H1026.25V64.8477C1026.25 60.9632 1024.52 54.7051 1018.12 54.7051C1014.06 54.7051 1011.8 56.1608 1010.74 57.525V54.7051H1010.74Z" fill="white"/>
+</g>
+</svg>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 92553ef4..9723b2ad 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,7 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
+
 body,
 html {
   margin: 0;
-  font-family: Inter, Chakra Petch, sans-serif;
+  font-family: 'Space Mono', monospace;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color:#020f5d;
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 70da3f2b..36028fa0 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -2,28 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
-import { GoogleOAuthProvider } from '@react-oauth/google';
-import { AuthProvider } from './context/AuthContext';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-const clientId = process.env.REACT_APP_GOOGLE_CLIENT_ID!;
-
-if(!clientId){
-  throw new Error("Client ID not found. Did you set up the enviornment files?");
-}
 
 root.render(
   <React.StrictMode>
-    <GoogleOAuthProvider clientId={clientId}>
-      <AuthProvider>
-        <App />
-      </AuthProvider>
-    </GoogleOAuthProvider>
+    <App />
   </React.StrictMode>,
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();