diff --git a/components/ArchiveItem.tsx b/components/ArchiveItem.tsx
deleted file mode 100644
index 8338082..0000000
--- a/components/ArchiveItem.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import styles from "../styles/Archiveitem.module.scss";
-
-import Image from "next/image";
-
-import Tag from "./Tag";
-
-import tn from "../public/images/archive.svg";
-
-interface prop {
-  name: string;
-  events: {
-    name: string;
-    date: Date;
-    description: string;
-    recording: string;
-    slides: string;
-    tags: string[];
-    graphicPath: string;
-  }[];
-}
-
-export default function ArchiveItem(props: prop) {
-  return (
-    <div className={styles.main}>
-      <h3>{props.name}</h3>
-      <div>
-        {props.events.map((ele) => (
-          <button className={styles.listItem}>
-            <div className={styles.section}>
-              <img
-                className={styles.graphic}
-                src={ele.graphicPath}
-                alt="Placeholder Image"
-              />
-
-              <div className={styles.title}>{ele.name}</div>
-
-              <div className={styles.date}>{ele.date.toDateString()}</div>
-
-              <div className={styles.links}>
-                <a href={ele.recording} className={styles.link}>
-                  <img className={styles.icon} src="/images/utube.svg"></img>
-                </a>
-                <a href={ele.slides} className={styles.link}>
-                  <img className={styles.icon} src="/images/slides.svg"></img>
-                </a>
-              </div>
-            </div>
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/components/ArchiveSection.tsx b/components/ArchiveSection.tsx
deleted file mode 100644
index 86339db..0000000
--- a/components/ArchiveSection.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import styles from "@/styles/ArchiveSection.module.scss";
-
-import ArchiveItem from "./ArchiveItem";
-
-interface prop {
-  series: {
-    seriesName: string;
-    events: {
-      name: string;
-      date: Date;
-      description: string;
-      recording: string;
-      slides: string;
-      tags: string[];
-      graphicPath: string;
-    }[];
-  }[];
-  time: string;
-}
-
-export default function ArchiveSection(props: prop) {
-  return (
-    <div className={styles.main}>
-      <h2>{props.time} </h2>
-      <div className={styles.series}>
-        {props.series.map((ele) => (
-          <ArchiveItem name={ele.seriesName} events={ele.events} />
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 7aabc77..d845e4f 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -41,9 +41,9 @@ export default function Navbar() {
         <Link className={styles.hoverable} href="/blog">
           <li>Blog</li>
         </Link>
-        {/* <Link className={styles.hoverable} href="/archive">
+        <Link className={styles.hoverable} href="/archive">
           <li>Archive</li>
-        </Link> */}
+        </Link>
       </ul>
     </nav>
   );
diff --git a/data/archive.ts b/data/archive.ts
index 37c3dad..6634be2 100644
--- a/data/archive.ts
+++ b/data/archive.ts
@@ -1,8 +1,6 @@
-export interface ArchivedEvent {
+export interface EventArchive {
   name: string;
-  type: string;
   date: Date;
-  time: string;
   location?: string;
   description: string;
   recording: string;
@@ -12,8 +10,8 @@ export interface ArchivedEvent {
 }
 
 export interface SeriesArchive {
-  seriesName: string;
-  events: ArchivedEvent[];
+  name: string;
+  events: EventArchive[];
 }
 
 export interface QuarterArchive {
@@ -21,26 +19,29 @@ export interface QuarterArchive {
   series: SeriesArchive[];
 }
 
-const archive = [
+const archive: QuarterArchive[] = [
+  /*WINTER2023*/
   {
     name: "Winter 2023",
     series: [
       {
-        seriesName: "Cyber Academy: Web Hacking",
+        name: "Cyber Academy: Web Hacking",
         events: [
           {
             name: "Week 6: SQL Injection",
             date: new Date('5/9/24'),
+            location: "Math Sciences 5200",
             description:
-              "Event description Event descriptionEvent description Event description",
+              "Event description event description event description event description event description",
             recording: "https://youtube.com/<link_here>",
             slides: "https://docs.google.com/",
             tags: ["web", "sql", "hacking"],
             graphicPath: "/images/archive.svg",
           },
           {
-            name: "XSS",
+            name: "Week 5: XSS",
             date: new Date('5/9/24'),
+            location: "Math Sciences 5200",
             description: "Event description",
             recording: "https://youtube.com/<link_here>",
             slides: "https://docs.google.com/",
@@ -48,54 +49,64 @@ const archive = [
             graphicPath: "/images/archive.svg",
           },
           {
-            name: "XSS",
+            name: "Example 3",
             date: new Date('5/9/24'),
             description: "Event description",
             recording: "https://youtube.com/<link_here>",
             slides: "https://docs.google.com/",
-            tags: ["web", "xss", "hacking"],
-            graphicPath: "/images/archive.svg",
+            tags: ["test3"],
+            graphicPath: "/images/cyber-symposium.png",
           },
           {
-            name: "XSS",
+            name: "Example 2",
             date: new Date('5/9/24'),
+            location: "Math Sciences 5200",
             description: "Event description",
             recording: "https://youtube.com/<link_here>",
             slides: "https://docs.google.com/",
-            tags: ["web", "xss", "hacking"],
-            graphicPath: "/images/archive.svg",
+            tags: ["test2"],
+            graphicPath: "/images/cyber-symposium.png",
           },
           {
-            name: "XSS",
+            name: "Example 1",
             date: new Date('5/9/24'),
+            location: "Math Sciences 5200",
             description: "Event description",
             recording: "https://youtube.com/<link_here>",
             slides: "https://docs.google.com/",
-            tags: ["web", "xss", "hacking"],
+            tags: ["test1"],
             graphicPath: "/images/archive.svg",
           },
         ],
       },
+      
+      {
+        name: "Special Topics",
+        events: [],
+      },
     ],
   },
+
+  /*FALL2022*/
   {
-    name: "Fall 2023",
+    name: "Fall 2022",
     series: [
       {
-        seriesName: "Cyber Academy: Forensics",
+        name: "Cyber Academy: Forensics",
         events: [
           {
-            name: "Binwalk",
+            name: "Example 2",
             date: new Date('5/9/24'),
             description: "Event description",
             recording: "https://youtube.com/<link_here>",
             slides: "https://docs.google.com/",
-            tags: ["web", "binwalk", "hacking"],
+            tags: ["test2"],
             graphicPath: "/images/cyber-symposium.png",
           },
           {
-            name: "IDK",
+            name: "Example 1",
             date: new Date('5/9/24'),
+            location: "Math Sciences 5200",
             description: "Event description",
             recording: "https://youtube.com/<link_here>",
             slides: "https://docs.google.com/",
@@ -106,12 +117,12 @@ const archive = [
       },
     ],
   },
+  
+  /*Spring2022*/
+  {
+    name: "Spring 2022",
+    series: [],
+  },
 ];
 
-/* 
-    quarter {
-
-    }
-*/
-
 export default archive;
diff --git a/pages/archive.tsx b/pages/archive.tsx
index f5bdc05..71c586a 100644
--- a/pages/archive.tsx
+++ b/pages/archive.tsx
@@ -1,29 +1,144 @@
-import { NextSeo } from "next-seo";
-
-import ArchiveSection from "@/components/ArchiveSection";
-
 import styles from "@/styles/Archive.module.scss";
-
+import popUpStyle from "@/styles/Events.module.scss";
 import CyberSeo from "@/components/CyberSeo";
-import archive from "@/data/archive";
+import archive, { QuarterArchive, SeriesArchive, EventArchive } from "@/data/archive";
+import {useState, useEffect} from "react"
+import Tag from "@/components/Tag"
+
+export default function() {
+  const [popUp, setPopUp] = useState(null as EventArchive | null);
+  function showPopUp(disp : EventArchive) {
+    popUp === null 
+      ? setPopUp(disp) 
+      : setPopUp(null)
+  }
 
-export default function Archive() {
   return (
     <>
       <CyberSeo
         title="Archive"
         description="Some past events run by ACM Cyber at UCLA!"
       />
+
       <div className="page">
-        <h1>Archive</h1>
-        <div className={"content"}>
-          <div className={styles.description}>
-            {archive.map((ele) => (
-              <ArchiveSection time={ele["name"]} series={ele["series"]} />
-            ))}
-          </div>
+        {popUp !== null && (
+            <PopUp event={popUp} close={() => setPopUp(null)} />
+        )}
+        <div className="content">
+          {Archive(showPopUp)}
         </div>
       </div>
     </>
   );
 }
+const Archive = (showPopUp:any) => {
+  return (
+    <>
+      <h1>Archive</h1>
+      <div className={styles.archive}>
+        {archive.length === 0
+          ? "No archive items available."
+          : archive.map(Quarter(showPopUp))}
+      </div>
+    </>
+  );
+}
+
+const Quarter = (showPopUp:any) => (props: QuarterArchive) => {
+  return (
+  <>
+    <h2>{props.name} </h2>
+    <div className={styles.quarter}>
+      {props.series.length === 0
+        ? "No series available."
+        : props.series.map(Series(showPopUp))}
+    </div>
+  </>
+  );
+}
+
+const Series = (showPopUp:any) => (props: SeriesArchive) => {
+  return (
+    <>
+      <h3>{props.name}</h3>
+      <div className={styles.series}>
+        {props.events.length === 0
+        ? "No events available."
+        : props.events.map(Event(showPopUp))}
+      </div>
+    </>
+  );
+}
+
+const Event = (showPopUp:any) => (props: EventArchive) => {
+  return (
+    <button className={styles.event} onClick={() => showPopUp(props)}>
+        <div className={styles.eventContent}>
+          <img className={styles.graphic}
+              src={props.graphicPath}
+              alt="Placeholder Image"
+          />
+
+          <div className={styles.title}>{props.name}</div>
+
+          <div className={styles.date}>{props.date.toDateString()}</div>
+
+          <div className={styles.links}>
+            <a href={props.recording} className={styles.link}>
+              <img className={styles.icon} src="/images/utube.svg"></img>
+            </a>
+            <a href={props.slides} className={styles.link}>
+              <img className={styles.icon} src="/images/slides.svg"></img>
+            </a>
+          </div>
+        </div>
+      </button>
+  );
+}
+
+type PopupProps = {
+  event: EventArchive;
+  close: () => void;
+};
+
+const PopUp = ({ event, close }: PopupProps) => {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  return (
+    <div
+      className={`${popUpStyle["popup-container"]} ${
+        mounted ? popUpStyle["mounted"] : null
+      }`}
+      onClick={close}
+    >
+      <div className={popUpStyle["popup"]}>
+        <div className={popUpStyle["top-bar"]}>
+          <div className={popUpStyle["x-button"]} onClick={close} />
+        </div>
+
+        <img className={styles.graphic}
+          src={event.graphicPath} alt="Placeholder Image" />
+
+        <div className={popUpStyle["content"]}>
+          <h3>{event.name}</h3>
+          <div className={popUpStyle["date"]}>{event.date.toDateString()}</div>
+          <div className={popUpStyle["location"]}>{event.location}</div>
+          <div className={popUpStyle["description"]}>{event.description}</div>
+
+          <div>{"Recording: "}
+            <a href={event.recording} className={styles.hyperlink}>{event.recording}</a>
+          </div>
+          <div>{"Slides: "}
+            <a href={event.slides} className={styles.hyperlink}>{event.slides}</a>
+          </div>
+
+          <div className={styles.section}>
+              {event.tags.map((e) => (
+                <Tag name={e} />
+              ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/styles/Archive.module.scss b/styles/Archive.module.scss
index 414c91c..d734d57 100644
--- a/styles/Archive.module.scss
+++ b/styles/Archive.module.scss
@@ -1,9 +1,86 @@
-.description {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
+.archive {
+  padding-bottom: 3.5rem;
 }
 
-// .description li {
-//   list-style-type: none;
-// }
+.quarter {
+  padding-bottom: 0.5rem;
+}
+
+.series {
+  padding: 0.5rem;
+}
+
+.event {
+  display: inline-flex; /* keep the inline nature of buttons */
+  align-items: flex-start; /* this is default */
+  background-color: var(--cyber-black);
+  margin: 1rem;
+  border: var(--cyber-gold) 2px solid;
+  border-radius: 2rem;
+  width: 20rem;
+  height: 12rem;
+  text-align: left;
+
+  &:hover {
+    cursor: pointer;
+    box-shadow: 0 0 10px var(--cyber-gold);
+  }
+}
+
+.eventContent {
+  display: block;
+  width: 100%;
+}
+
+.graphic {
+  vertical-align: top;
+  border-top-left-radius: 2rem;
+  border-top-right-radius: 2rem;
+  width: 100%;
+  height: 5rem;
+  object-fit: cover;
+}
+
+.title {
+  vertical-align: top;
+  font-size: 1.25rem;
+  font-weight: bold;
+  color: var(--cyber-gold);
+  margin: 0.7rem 1rem 0.5rem 1rem;
+}
+
+.date {
+  vertical-align: top;
+  font-size: 1rem;
+  color: var(--organic-oranges);
+  margin: 0rem 1rem 0.7rem 1rem;
+}
+
+.link {
+  margin: 0rem 0rem 0rem 1.5rem;
+}
+
+.icon {
+  width: 1.125rem;
+  height: 1.125rem;
+  &:hover {
+    cursor: pointer;
+    opacity: 0.5;
+  }
+}
+
+.hyperlink {
+  text-decoration: underline;
+  color: var(--cyber-gold);
+  overflow-wrap: break-word;
+  &:hover {
+    cursor: pointer;
+    color: var(--flag-pink);
+  }
+}
+
+.section {
+  margin: 0.75rem 0rem;
+  display: flex;
+  flex-wrap: wrap;
+}
\ No newline at end of file
diff --git a/styles/ArchiveSection.module.scss b/styles/ArchiveSection.module.scss
deleted file mode 100644
index a6413f4..0000000
--- a/styles/ArchiveSection.module.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.main {
-  margin-top: 1rem;
-
-  text-align: left;
-}
diff --git a/styles/Archiveitem.module.scss b/styles/Archiveitem.module.scss
deleted file mode 100644
index d762ee7..0000000
--- a/styles/Archiveitem.module.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-.main {
-  font-size: large;
-  margin: auto;
-  display: grid;
-
-  &:hover {
-    box-shadow: var(--card-border-expanded);
-  }
-}
-
-.listItem {
-  display: inline-flex; /* keep the inline nature of buttons */
-  align-items: flex-start; /* this is default */
-  background-color: var(--cyber-black);
-  margin: 1.5rem 1rem;
-  border: var(--cyber-gold) 2px solid;
-  border-radius: 2rem;
-  transition: box-shadow 0.2s;
-  width: 20rem;
-  height: 12rem;
-  font-family: "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  text-align: left;
-
-  &:hover {
-    cursor: pointer;
-    box-shadow: 0 0 10px var(--cyber-gold);
-  }
-}
-
-.section {
-  display: block;
-  width: 100%;
-}
-
-.graphic {
-  vertical-align: top;
-  border-top-left-radius: 2rem;
-  border-top-right-radius: 2rem;
-  width: 100%;
-  height: 5rem;
-  object-fit: cover;
-}
-.title {
-  vertical-align: top;
-  font-size: 1.25rem;
-  font-weight: bold;
-  color: var(--cyber-gold);
-  margin: 0.7rem 1rem 0.5rem 1rem;
-}
-.date {
-  vertical-align: top;
-  font-size: 1rem;
-  color: var(--organic-oranges);
-  margin: 0rem 1rem 0.7rem 1rem;
-}
-
-.link {
-  margin: 0rem 0rem 0rem 1.5rem;
-}
-.icon {
-  width: 1.125rem;
-  height: 1.125rem;
-}
-.icon:hover {
-  opacity: 0.5;
-}
diff --git a/styles/Events.module.scss b/styles/Events.module.scss
index efbaf5f..3ad8d75 100644
--- a/styles/Events.module.scss
+++ b/styles/Events.module.scss
@@ -198,3 +198,7 @@
     transform: rotate(360deg);
   }
 }
+
+.date {
+  color: var(--organic-oranges);
+}
\ No newline at end of file
diff --git a/styles/Tag.module.scss b/styles/Tag.module.scss
index 4262863..d30e975 100644
--- a/styles/Tag.module.scss
+++ b/styles/Tag.module.scss
@@ -1,5 +1,5 @@
 .main {
-  border-radius: 5px;
+  border-radius: 5px !important;
   font-size: 0.8rem;
   padding: 0.5rem;
   margin: 0rem 0.6rem 0rem 0rem;