diff --git a/src/Agm.jsx b/src/Agm.jsx
deleted file mode 100644
index 91b11c9..0000000
--- a/src/Agm.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import './App.css'
-import './agm.css';
-
-function Agm() {
-  return (
-    <div className="content-wrapper">
-      <div className="edges" style={{ color: "#111", fontFamily: 'Montserrat' }}>
-        <div className="global-padding">
-          <h1>The 2023 Code Network AGM has now passed. Details about the 2024 AGM will be announced in September 2024.</h1>
-        </div>
-      </div >
-    </div>
-  )
-}
-
-export default Agm;
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index b13918e..11e81d3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,12 +7,13 @@ import Header from "./Header";
 import Ssp from "./ssp";
 import Coc from "./coc";
 import About from "./About";
-import Agm from "./Agm";
+import Agm from "./routes/Agm";
 import Rules from "./Rules";
 import Constitution from "./constitution";
 import SGM from "./Sgm";
 
 import HackathonPage from "@/routes/Hackathon";
+import Showcase from "@/routes/Showcase";
 
 function App() {
   return (
@@ -29,7 +30,7 @@ function App() {
           <Route path="/rules/constitution" element={<Constitution />} />
           <Route path="/agm" element={<Agm />} />
           <Route path="/sgm" element={<SGM />} />
-          <Route path="/hackathon" element={<HackathonPage />} />
+          <Route path="/hackathon" element={<Showcase />} />
         </Routes>
       </section>
     </div>
diff --git a/src/agm.css b/src/agm.css
deleted file mode 100644
index b2d2b40..0000000
--- a/src/agm.css
+++ /dev/null
@@ -1,10 +0,0 @@
-#agmLinks>a {
-    padding: 8px;
-    background-color: rgb(1, 214, 9);
-    color: white;
-    border-radius: 16px
-}
-
-#agmLinks>a:hover {
-    background-color: rgb(150, 214, 150)
-}
\ No newline at end of file
diff --git a/src/assets/agm.css b/src/assets/agm.css
new file mode 100644
index 0000000..4bfce8a
--- /dev/null
+++ b/src/assets/agm.css
@@ -0,0 +1,10 @@
+#agmLinks > a {
+  padding: 8px;
+  background-color: rgb(1, 214, 9);
+  color: white;
+  border-radius: 16px;
+}
+
+#agmLinks > a:hover {
+  background-color: rgb(150, 214, 150);
+}
diff --git a/src/component/Navbar.jsx b/src/component/Navbar.jsx
index 7d7b07c..0a16ece 100644
--- a/src/component/Navbar.jsx
+++ b/src/component/Navbar.jsx
@@ -44,6 +44,7 @@ function Navbar() {
           </div>
           <a href="/rules">Rules</a>
           <a href="/hackathon">Hackathon</a>
+          <a href="/agm">AGM</a>
 
           <button className="nav-btn nav-close-btn" onClick={showNavbar}>
             <FaTimes />
diff --git a/src/main.jsx b/src/main.jsx
index c3d1d3e..b615839 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,30 +1,32 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import { BrowserRouter } from 'react-router-dom';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import { BrowserRouter } from "react-router-dom";
 
-import Footer from './Footer';
-import { Routes, Route } from 'react-router-dom';
-import Navbar from './component/Navbar';
-import AnimatedCursor from './component/cursor';
+import Footer from "./Footer";
+import { Routes, Route } from "react-router-dom";
+import Navbar from "./component/Navbar";
+import AnimatedCursor from "./component/cursor";
 
-ReactDOM.render(
-  <BrowserRouter>
-    <div id="root">
-      <Navbar />
-      <div
-        style={{
-          paddingTop: '100px',
-        }}
-      >
-        <main>
-          <App />
-        </main>
+import { createRoot } from "react-dom/client";
+const container = document.getElementById("root");
+const root = createRoot(container);
+root.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <div id="root">
+        <Navbar />
+        <div
+          style={{
+            paddingTop: "100px",
+          }}>
+          <main>
+            <App />
+          </main>
+        </div>
+        <Footer />
       </div>
-      <Footer />
-    </div>
-  </BrowserRouter>,
-
-  document.getElementById('root'),
+    </BrowserRouter>
+  </React.StrictMode>
 );
diff --git a/src/routes/Agm.jsx b/src/routes/Agm.jsx
new file mode 100644
index 0000000..aed4026
--- /dev/null
+++ b/src/routes/Agm.jsx
@@ -0,0 +1,106 @@
+import { Close, CopyAll, LinkOutlined, OpenInNew } from "@mui/icons-material";
+import { Box, Button, Dialog, IconButton, Stack } from "@mui/material";
+import React from "react";
+import "../App.css";
+import "../assets/agm.css";
+
+function Agm() {
+  const [isDialogOpen, setIsDialogOpen] = React.useState(false);
+  return (
+    <div className="content-wrapper">
+      <div className="edges" style={{ color: "#111", fontFamily: "Montserrat" }}>
+        <div style={{ maxWidth: "80ch" }}>
+          <h1 style={{ padding: 0, margin: "0 0 0.7rem 0" }}>Annual General Meeting (AGM) 2024</h1>
+          <p style={{ padding: 0, margin: 0, fontSize: "1.4rem" }}>
+            Have your say on our 2025 executive team and nominate yourself or others to be in the 2025 Code Network Executive team.
+          </p>
+          <p>
+            The 2024 Annual General Meeting will be held on <strong>Monday, September 9th at 5pm</strong> in <strong>GP D-108</strong>.
+          </p>
+          <p>
+            I know... it sounds boring, but the AGM is arguably the most important event of the year for Code Network. This is where our
+            club reflects on the year that has been and we look forward to the new year ahead.
+          </p>
+          <p>You are invited to join us at our 2024 Annual General Meeting. This is your opportunity to:</p>
+          <ul style={{ listStyle: "none", padding: "0 0 12px" }}>
+            <li>📣 Hear about our club's achievements from this year</li>
+            <li>❔ Ask questions about our club and our achievements</li>
+            <li>📝 And most importantly, to join the 2025 Executive Team and shape the future of our club!</li>
+          </ul>
+          <p>This page may be updated with additional information in the lead up to our AGM. To learn more see:</p>
+          <Stack direction="row" spacing={1}>
+            <a href="https://docs.google.com/document/d/1uvIfpRDy4MzC7WLnbMkc7jIDxIUyDdz1n6mRW3hglUI/edit#heading=h.lmgx5rxt46zj">
+              <Button variant="contained" sx={{ background: "var(--primary)!important" }}>
+                About the Roles
+              </Button>
+            </a>
+            <a href="https://docs.google.com/forms/d/e/1FAIpQLSeVTq382wX-cfjMIZGEFmNBTkRD9a210IW1gAUzw-d3Ck_EDA/viewform">
+              <Button variant="contained" sx={{ background: "var(--primary)!important" }}>
+                Apply to Join The Team
+              </Button>
+            </a>
+            <a href="https://docs.google.com/document/d/1YdBWYmZJXsmeLzP2AO0t1cuK1NEf1uhoSXdQU6qHalE/edit#heading=h.lmgx5rxt46zj">
+              <Button variant="contained" sx={{ background: "var(--primary)!important", ":hover": { background: "" } }}>
+                Meeting Agenda
+              </Button>
+            </a>
+            <a>
+              <Button
+                variant="contained"
+                sx={{ background: "var(--primary)!important", ":hover": { background: "" } }}
+                onClick={() => setIsDialogOpen(true)}>
+                <LinkOutlined sx={{ pr: 1 }} /> Zoom Meeting Info
+              </Button>
+            </a>
+          </Stack>
+          <Dialog open={isDialogOpen} fullWidth={true} sx={{ zIndex: 10 }} onClose={() => setIsDialogOpen(false)}>
+            <IconButton sx={{ position: "absolute", right: 8, top: 8 }} onClick={() => setIsDialogOpen(false)}>
+              <Close />
+            </IconButton>
+            <Box p={4}>
+              <h2 style={{ padding: 0, margin: "0 0 0.5rem 0" }}>AGM Zoom Meeting</h2>
+              <p style={{ padding: 0, margin: "0 0 1rem 0" }}>QUT Login Only</p>
+              <Stack direction="column">
+                <Box bgcolor="#ececec" px={1} borderRadius={1}>
+                  <Stack direction="column">
+                    <Stack direction="row" alignItems="center">
+                      <strong>Meeting Link:</strong>
+                      <a href="https://qut.zoom.us/j/84965499570?pwd=obz8wIob8vdTB3YjQx5EVIpwQWkYvn.1" target="_blank">
+                        <IconButton size="12px">
+                          <OpenInNew sx={{ height: "20px" }} />
+                        </IconButton>
+                      </a>
+                    </Stack>
+                    <p style={{ padding: 0, margin: 0 }}>
+                      {" "}
+                      <a
+                        href="https://qut.zoom.us/j/84965499570?pwd=obz8wIob8vdTB3YjQx5EVIpwQWkYvn.1"
+                        target="_blank"
+                        style={{ textWrap: "wrap", wordBreak: "break-all" }}>
+                        https://qut.zoom.us/j/84965499570?pwd=obz8wIob8vdTB3YjQx5EVIpwQWkYvn.1
+                      </a>{" "}
+                    </p>
+                  </Stack>
+                  <Box display="flex" alignItems="center" gap={1} mt={1}>
+                    <strong>Meeting ID:</strong> 849 6549 9570
+                    <IconButton onClick={() => navigator.clipboard.writeText("84965499570")}>
+                      <CopyAll sx={{ height: "20px" }} />
+                    </IconButton>
+                  </Box>
+                  <Box display="flex" alignItems="center" gap={1}>
+                    <strong>Passcode:</strong> 320767
+                    <IconButton onClick={() => navigator.clipboard.writeText("320767")}>
+                      <CopyAll sx={{ height: "20px" }} />
+                    </IconButton>
+                  </Box>
+                </Box>
+              </Stack>
+            </Box>
+          </Dialog>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Agm;
diff --git a/src/routes/Showcase.jsx b/src/routes/Showcase.jsx
new file mode 100644
index 0000000..f0ddc39
--- /dev/null
+++ b/src/routes/Showcase.jsx
@@ -0,0 +1,15 @@
+import { Box, Typography } from "@mui/material";
+
+export default function Showcase() {
+  return (
+    <div className="content-wrapper">
+      <div className="edges" style={{ color: "#111", fontFamily: "Montserrat" }}>
+        <Box>
+          <h1>2024 Winter Hackathon</h1>
+          <p>This event has now ended!</p>
+          <p>Check back here later to see a showcase of projects created at our 2024 Winter Hackathon</p>
+        </Box>
+      </div>
+    </div>
+  );
+}