diff --git a/frontend/src/app/Conditional.tsx b/frontend/src/app/Conditional.tsx
index 750e6dc..f6b96a9 100644
--- a/frontend/src/app/Conditional.tsx
+++ b/frontend/src/app/Conditional.tsx
@@ -1,16 +1,14 @@
 import { ReactNode } from 'react';
 
-interface ConditionalProps 
-{
+interface ConditionalProps {
     Condition: boolean;
 
     children: ReactNode;
 }
 
-export default function Conditional({Condition, children} : ConditionalProps): JSX.Element 
-{
+export default function Conditional({ Condition, children }: ConditionalProps): JSX.Element {
     if (Condition)
         return (<>{children}</>);
-    
+
     return <></>;
 }  
diff --git a/frontend/src/app/EventsOnHomePage/Carosel.tsx b/frontend/src/app/EventsOnHomePage/Carosel.tsx
index 2be07ed..af98d36 100644
--- a/frontend/src/app/EventsOnHomePage/Carosel.tsx
+++ b/frontend/src/app/EventsOnHomePage/Carosel.tsx
@@ -14,9 +14,9 @@ import { experimental_useEffectEvent, useEffect, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../hooks/hooks";
 import { SetCurrentPage } from "../slices/pageSlice";
 
-import { fetchEventsAsync } from "../thunks/EventThunks";
+// import { fetchEventsAsync } from "../thunks/EventThunks";
 import { AppDispatch } from "../stores/store";
-import { CalendarEvent, DefaultCalendarEvent, SetCalendarEvents, SetCurrentEvent, SetFetchIntervalStarted, selectEvent } from "../slices/eventSlice";
+// import { CalendarEvent, DefaultCalendarEvent, SetCalendarEvents, SetCurrentEvent, SetFetchIntervalStarted, selectEvent } from "../slices/eventSlice";
 import { Timer } from "../hacks/Timer";
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuItem, DropdownMenuContent } from "@/components/ui/dropdown-menu";
 import Conditional from "../Conditional";
@@ -27,11 +27,9 @@ import { Button } from "@/components/ui/button";
 import { Select, SelectItem, SelectTrigger, SelectContent } from "@/components/ui/select";
 import EventInstance from "./EventForCarousel"
 
-interface EventsProps {
-  Events: CalendarEvent[];
-
-
-}
+// interface EventsProps {
+//   // Events: CalendarEvent[];
+// }
 
 export class Range {
   Start: number;
@@ -58,29 +56,29 @@ export function CarouselMy() {
   const router = useRouter();
   const mainDispatch = useAppDispatch();
 
-  const event = useAppSelector(selectEvent);
+  // const event = useAppSelector(selectEvent);
 
   mainDispatch(SetCurrentPage("/events"));
 
   const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
 
-  const [loading, setLoading] = useState(event.Events.length < 1);
+  // const [loading, setLoading] = useState(event.Events.length < 1);
 
   const [currentEvent, setCurrentEvent] = useState("");
 
 
 
-  useEffect(() => {
-    (async () => {
-      console.log("Fetching events.");
-      if (event.Events.length < 1) {
-        const fetchedEvents: CalendarEvent[] = (await mainDispatch(fetchEventsAsync() as AppDispatch)) as unknown as CalendarEvent[];
+  // useEffect(() => {
+  //   (async () => {
+  //     console.log("Fetching events.");
+  //     if (event.Events.length < 1) {
+  //       const fetchedEvents: CalendarEvent[] = (await mainDispatch(fetchEventsAsync() as AppDispatch)) as unknown as CalendarEvent[];
 
-        mainDispatch(SetCalendarEvents(fetchedEvents));
-        setLoading(false);
-      }
-    })();
-  });
+  //       mainDispatch(SetCalendarEvents(fetchedEvents));
+  //       setLoading(false);
+  //     }
+  //   })();
+  // });
 
 
 
@@ -139,26 +137,26 @@ export function CarouselMy() {
 
 
 
-      <Conditional Condition={!loading}>
+      {/* <Conditional Condition={!loading}>
         <Conditional Condition={loading}>Loading</Conditional>
         <Carousel setApi={setApi} className="w-full max-w-xs" >
-          <CarouselContent>
+          <CarouselContent> */}
 
             {/* <Events Events={[...event.Events].filter(event => event.Start.getFullYear() == currentYear)} /> */}
 
             {
-              [...event.Events]
-                .filter(event => event.Start.getFullYear() == currentYear)
-                .sort((a, b) => b.Start.getTime() - a.Start.getTime())
-                .slice(0, 4)
-                .map((event, index) => (
-                  <CarouselItem key={index}>
-                    <EventInstance key={event.Title} Event={event} />
-                  </CarouselItem>
-                ))
+              // [...event.Events]
+              //   .filter(event => event.Start.getFullYear() == currentYear)
+              //   .sort((a, b) => b.Start.getTime() - a.Start.getTime())
+              //   .slice(0, 4)
+              //   .map((event, index) => (
+              //     <CarouselItem key={index}>
+              //       <EventInstance key={event.Title} Event={event} />
+              //     </CarouselItem>
+              //   ))
             }
 
-
+{/* 
           </CarouselContent>
           <div className="py-2 text-center text-sm text-muted-foreground">
             <a className={"text-xl font-bold hover:text-lang-orange max-[600px]:text-lg select-none"} href="./events">More Events Here</a>
@@ -167,7 +165,7 @@ export function CarouselMy() {
           <CarouselPrevious />
           <CarouselNext />
         </Carousel>
-      </Conditional>
+      </Conditional> */}
 
     </>
 
diff --git a/frontend/src/app/EventsOnHomePage/Decision.tsx b/frontend/src/app/EventsOnHomePage/Decision.tsx
index 6bb94c3..6c6c829 100644
--- a/frontend/src/app/EventsOnHomePage/Decision.tsx
+++ b/frontend/src/app/EventsOnHomePage/Decision.tsx
@@ -19,16 +19,18 @@ function Decision() {
   return (
     <div className=' bg-body-gray'>
       {isWideScreen ? (
-        
+
         <EventsSection />
-        
-        
+
+
       ) : (
 
         <div className='flex w-full items-center justify-center h-96 '>
+          {/* carouselMy might be broken */}
           <CarouselMy />
+
         </div>
-       
+
       )}
     </div>
   );
diff --git a/frontend/src/app/EventsOnHomePage/EventeSection.tsx b/frontend/src/app/EventsOnHomePage/EventeSection.tsx
index b85422f..0644752 100644
--- a/frontend/src/app/EventsOnHomePage/EventeSection.tsx
+++ b/frontend/src/app/EventsOnHomePage/EventeSection.tsx
@@ -1,28 +1,6 @@
-import { experimental_useEffectEvent, useEffect, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../hooks/hooks";
 import { SetCurrentPage } from "../slices/pageSlice";
-import Events from "./Events";
-import { fetchEventsAsync } from "../thunks/EventThunks";
-import { AppDispatch } from "../stores/store";
-import { CalendarEvent, DefaultCalendarEvent, SetCalendarEvents, SetCurrentEvent, SetFetchIntervalStarted, selectEvent } from "../slices/eventSlice";
-import { Timer } from "../hacks/Timer";
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuItem, DropdownMenuContent } from "@/components/ui/dropdown-menu";
-import Conditional from "../Conditional";
-import IconLabel from "../IconLabel";
 import { useRouter } from "next/navigation";
-import Image from "next/image"
-import { Button } from "@/components/ui/button";
-import { Select, SelectItem, SelectTrigger, SelectContent } from "@/components/ui/select";
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger,
-} from "@/components/ui/dialog";
-
 
 export class Range {
     Start: number;
@@ -48,26 +26,15 @@ export default function EventsSection() {
     const router = useRouter();
     const mainDispatch = useAppDispatch();
 
-    const event = useAppSelector(selectEvent);
-
     mainDispatch(SetCurrentPage("/events"));
 
-    const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
-
-    const [loading, setLoading] = useState(event.Events.length < 1);
-
-    useEffect(() => {
-        (async () => {
-            console.log("Fetching events.");
-            if (event.Events.length < 1) {
-                const fetchedEvents: CalendarEvent[] = (await mainDispatch(fetchEventsAsync() as AppDispatch)) as unknown as CalendarEvent[];
-
-                mainDispatch(SetCalendarEvents(fetchedEvents));
-                setLoading(false);
-            }
-        })();
-    });
-
+    const iframeStyle = {
+        border: '1px solid black',
+        borderRadius: '4px',
+        boxShadow: '0px 0px 3px 1px black ',
+        height: `760px`,
+        width: '500px'
+    };
 
     const getYearsSince = (year: number) => {
         return new Range(year, new Date().getFullYear() + 1).ToArray();
@@ -94,26 +61,43 @@ export default function EventsSection() {
 
             <div className="bg-body-gray h-[60vh] max-[600px]:h-[80vh]">
                 <div className={"flex flex-row bg-body-gray w-screen"}>
-                    <div className="mt-1 flex flex-col gap-1">
 
 
-                    </div>
-                    
                     <div className=" flex flex-col justify-center items-center w-full ">
-                        
-                        <div className=" flex flex-row justify-center w-full items-baseline gap-72">
-                            <Conditional Condition={!loading}>
-
-                               
-                                    <div className={"text-[36px] font-bold"}>Events</div>
-                                    <a href="../events" className={"text-xl font-bold hover:text-lang-orange max-[600px]:text-lg select-none"}>See more events</a>
-                              
-                            </Conditional>
+                        <div className={"text-[48px] font-bold"}>Events</div>
+                        {/* add Luma Event Iframes here */}
+                        <div className="flex flex-row justify-center w-full items-baseline gap-5 mb-5" >
+                            <iframe
+                                src="https://lu.ma/embed/event/evt-CcEhJ9sUgoWfRZL/simple"
+                                style={iframeStyle}
+                                allowFullScreen
+                                aria-hidden="false"
+                                tabIndex={0}
+                            />
+                            <iframe
+                                src="https://lhacks.langaracs.ca/"
+                                style={iframeStyle}
+                                allowFullScreen
+                                aria-hidden="false"
+                                tabIndex={0}
+                            />
+                            <iframe
+                                src="https://lu.ma/embed/event/evt-ADFRul3ebIYu65p/simple"
+                                style={iframeStyle}
+                                allowFullScreen
+                                aria-hidden="false"
+                                tabIndex={0}
+                            />
+
+
                         </div>
-                        <div className="mt-1 flex flex-row gap-1 items-center content-center h-96 w-full">
-                            <Conditional Condition={loading}>Loading</Conditional>
-                            <Events Events={[...event.Events].filter(event => event.Start.getFullYear() == currentYear)} />
+                        <div className=" flex flex-row justify-center w-full items-baseline">
+
+                            <a href="../events" className={"text-xl font-bold hover:text-lang-orange max-[600px]:text-lg select-none"}>See more events</a>
+
                         </div>
+                        <div className={"text-xl font-bold max-[600px]:text-lg select-none"}>or </div>
+                        <div><a href="https://lhacks.langaracs.ca/" className={"text-xl font-bold hover:text-lang-orange max-[600px]:text-lg select-none"}>Check out the hackthon website</a></div>
                     </div>
                 </div>
             </div>
diff --git a/frontend/src/app/Footer.tsx b/frontend/src/app/Footer.tsx
index 90a8507..f3472a8 100644
--- a/frontend/src/app/Footer.tsx
+++ b/frontend/src/app/Footer.tsx
@@ -4,38 +4,36 @@ import React, { useEffect, useMemo, useState } from "react";
 import SocialIcons from "./SocialIcons";
 import { setServers } from "dns";
 
-export default function Footer()
-{
+export default function Footer() {
     const forms = {
         feedback: "https://forms.gle/jaYbdo6KWbGFvJJG8",
-        register: "https://forms.gle/gPdqMB5ijafDMRAY8"
+        register: "https://lu.ma/g2q0djtw"
     };
 
     const resourcesMap = new Map<string, string>([
-        ["Course Planner", "https://planner.langaracs.ca/" ],
+        ["Course Planner", "https://planner.langaracs.ca/"],
         ["Transfer Resources", "https://langaracs.notion.site/Transfer-Information-a0548da4b3084681868381310c604c34"],
         ["Course Resources", "https://langaracs.notion.site/Langara-CS-Resources-12b750af5ecc4eeb86315d3d9fd8f1ce?pvs=4"],
         ["Feedback", forms.feedback]
     ]);
-    
+
     const linksMap = new Map<string, string>([
-        ["Home", "/" ],
+        ["Home", "/"],
         ["About", "/about"],
-        ["Events", "/events"], 
+        ["Events", "/events"],
         ["Rules", "https://langaracs.notion.site/LCSC-Rules-393da1457d784fa19c98d1d3c32ae829?pvs=4"]
     ]);
-    
+
     const [resources, setResources] = useState<React.ReactNode[]>([]);
-    
+
     const [links, setLinks] = useState<React.ReactNode[]>([]);
 
-    const router = useRouter(); 
-  
+    const router = useRouter();
+
     const resourcesMemo = useMemo(() => {
         const resourcesTemp: Array<React.ReactNode> = [];
-        
-        if (resources.length < 1)
-        {
+
+        if (resources.length < 1) {
             resourcesMap.forEach((value: string, key: string) => {
                 resourcesTemp.push(<>
                     <a href={value} className="hover:text-lang-orange">{key}</a>
@@ -48,7 +46,7 @@ export default function Footer()
 
     const linksMemo = useMemo(() => {
         const linksTemp: Array<React.ReactNode> = [];
-        
+
         if (links.length < 1)
             linksMap.forEach((value: string, key: string) => {
                 linksTemp.push(<>
@@ -58,51 +56,53 @@ export default function Footer()
 
         return linksTemp;
     }, [linksMap]);
-        
+
     return (
-    <>
-        <div className="grid grid-cols-1 md:grid-cols-2 bg-[#1E1E1E] p-5">
-            <div className="flex flex-row mt-3 ml-3 justify-evenly md:justify-normal">
-                <div className="flex flex-col ">
-                    <div className="flex flex-col">
-                        <div className={"font-bold text-3xl"}>Resources</div>
-                        <div className={"flex flex-col text-sm gap-3 mt-3"}>
-                            {resourcesMemo}
+        <>
+            <footer className="bg-[#1E1E1E] mt-auto">
+                <div className="grid grid-cols-1 md:grid-cols-2 bg-[#1E1E1E] p-5">
+                    <div className="flex flex-row mt-3 ml-3 justify-evenly md:justify-normal">
+                        <div className="flex flex-col ">
+                            <div className="flex flex-col">
+                                <div className={"font-bold text-3xl"}>Resources</div>
+                                <div className={"flex flex-col text-sm gap-3 mt-3"}>
+                                    {resourcesMemo}
+                                </div>
+                                <div className="opacity-0 md:opacity-100 mt-10 text-xs">Copyright © {new Date(Date.now()).getFullYear()} Langara Computer Science Club</div>
+                            </div>
                         </div>
-                        <div className="opacity-0 md:opacity-100 mt-10 text-xs">Copyright © {new Date(Date.now()).getFullYear()} Langara Computer Science Club</div>
-                    </div>
-                </div>
-                <div className="flex flex-row">
-                    <div className="flex flex-col">
-                        <div className={"font-bold text-3xl"}>Links</div>
-                        <div className={"flex flex-col text-sm gap-3 mt-3"}>
-                            {linksMemo}
+                        <div className="flex flex-row">
+                            <div className="flex flex-col">
+                                <div className={"font-bold text-3xl"}>Links</div>
+                                <div className={"flex flex-col text-sm gap-3 mt-3"}>
+                                    {linksMemo}
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
-            </div>
-            <div className="flex flex-row md:flex-col justify-evenly">
-                <div className={"flex flex-col gap-2 items-center md:items-end md:mt-3 md:mr-3"}>
-                    <div className={"font-bold flex flex-row gap-3 items-center"}>
-                        <div className="font-bold text-3xl">
-                            Join Us
-                        </div>
+                    <div className="flex flex-row md:flex-col justify-evenly">
+                        <div className={"flex flex-col gap-2 items-center md:items-end md:mt-3 md:mr-3"}>
+                            <div className={"font-bold flex flex-row gap-3 items-center"}>
+                                <div className="font-bold text-3xl">
+                                    Join Us
+                                </div>
 
-                        <Button onClick={() => router.push(forms.register) } className="bg-lang-orange hover:bg-lang-orange rounded text-white h-10 font-bold">Register</Button>
-                    </div>
-                    <div className={"font-bold flex flex-row gap-3 items-center text-2xl"}>
-                        <div>
-                            Contacts
-                        </div> 
-                        
-                        <SocialIcons height={25} width={25} gap={2}/>
+                                <Button onClick={() => router.push(forms.register)} className="bg-lang-orange hover:bg-lang-orange rounded text-white h-10 font-bold">Register</Button>
+                            </div>
+                            <div className={"font-bold flex flex-row gap-3 items-center text-2xl"}>
+                                <div>
+                                    Contacts
+                                </div>
+
+                                <SocialIcons height={25} width={25} gap={2} />
+                            </div>
+                            <div className="underline text-xl">
+                                <a href="#top">Go to top of the website</a>
+                            </div>
+                        </div>
+                        <div className="alignment_div opacity-0">I am not here</div>
                     </div>
-                    <div className="underline text-xl">
-                        <a href="#top">Go to top of the website</a>
-                    </div> 
                 </div>
-                <div className="alignment_div opacity-0">I am not here</div>
-            </div>
-        </div>
-    </>);
+            </footer>
+        </>);
 }
diff --git a/frontend/src/app/HomePage.tsx b/frontend/src/app/HomePage.tsx
index 7a74129..60615f5 100644
--- a/frontend/src/app/HomePage.tsx
+++ b/frontend/src/app/HomePage.tsx
@@ -1,15 +1,13 @@
 "use client";
 
-import {Component, useEffect} from "react";
-import {Global, Vector2D} from "@/app/Global";
+import { Component, useEffect } from "react";
+import { Global, Vector2D } from "@/app/Global";
 import SocialIcons from "@/app/SocialIcons";
 import { useAppDispatch, useAppSelector } from "./hooks/hooks";
 import { AddExecProfile, ExecProfileObject, selectProfile } from "./slices/execProfileSlice";
 import { AppDispatch, RootState } from "./stores/store";
 import { loadProfilesAsync } from "./thunks/ProfileThunks";
 import { UnknownAction } from "@reduxjs/toolkit";
-import { CalendarEvent, SetCalendarEvents, selectEvent } from "./slices/eventSlice";
-import { fetchEventsAsync } from "./thunks/EventThunks";
 import { SetCurrentPage } from "./slices/pageSlice";
 import Footer from "./Footer";
 import Image from "next/image"
@@ -20,83 +18,69 @@ import AboutUsSection from "./aboutus";
 
 let InstanceCount: number = 0;
 
-interface HomePageProps
-{
+interface HomePageProps {
 }
 
-export default function HomePage({} : HomePageProps) 
-{
+export default function HomePage({ }: HomePageProps) {
     const execProfiles = useAppSelector(selectProfile);
-    const event = useAppSelector(selectEvent);
     const mainDispatch = useAppDispatch();
-   
+
     mainDispatch(SetCurrentPage("/"));
 
     useEffect(() => {
         (async () => {
-            if (execProfiles.length < 1)
-            {
+            if (execProfiles.length < 1) {
                 const promise: UnknownAction = (mainDispatch(loadProfilesAsync() as AppDispatch));
 
                 ((await promise) as unknown as ExecProfileObject[]).forEach((element: ExecProfileObject) => {
-                    mainDispatch(AddExecProfile(element)); 
+                    mainDispatch(AddExecProfile(element));
                 });
             }
         })();
     });
 
-    useEffect(() => {
-        (async () => {
-            if (event.Events.length < 1) 
-            {
-                const fetchedEvents: CalendarEvent[] = (await mainDispatch(fetchEventsAsync() as AppDispatch)) as unknown as CalendarEvent[];
-
-                mainDispatch(SetCalendarEvents(fetchedEvents));
-            }
-        })();
-    });
-
     let css: string = "", flexContainer: string = "flex flex-row max-[600px]:justify-center max-[600px]:mx-0 ml-[10%]";
     let size: number = 5;
-    
+
     <div className={"text-3xl"}></div>;
     <div className={"text-2xl"}></div>;
     <div className={"flex-col-reverse"}></div>;
-        
+
     return (
         <>
-        <div className={"flex flex-row max-[600px]:flex-col bg-body-gray w-full h-full"}>
-            <div className={"grid grid-rows-[15%_60%_20%] max-[600px]:grid-rows-1 w-full h-full gap-3 max-[600px]: gap-1 max-[900px]:basis-1/3"}>
+            <div className={"flex flex-row max-[600px]:flex-col bg-body-gray w-full h-full"}>
+                <div className={"grid grid-rows-[15%_60%_20%] max-[600px]:grid-rows-1 w-full h-full gap-3 max-[600px]: gap-1 max-[900px]:basis-1/3"}>
+
+                    <div className={"flex row-start-2 flex-col row-span-1 text-7xl max-[900px]:text-5xl max-[600px]:text-3xl text-white-900 justify-center"}>
+                        <div className={flexContainer}>
+                            <span className="shrink text-lang-orange">Langara</span>
+                        </div>
+
+                        <div className={flexContainer}>
+                            <span className="shrink">Computer</span>
+                        </div>
+
+                        <div className={flexContainer}>
+                            <span className="shrink">Science Club</span>
+                        </div>
 
-                <div className={"flex row-start-2 flex-col row-span-1 text-7xl max-[900px]:text-5xl max-[600px]:text-3xl text-white-900 justify-center"}>
-                    <div className={flexContainer}>   
-                        <span className="shrink text-lang-orange">Langara</span> 
-                    </div>
-                    
-                    <div className={flexContainer}>
-                        <span className="shrink">Computer</span>
-                    </div>
-                    
-                    <div className = {flexContainer}>
-                        <span className="shrink">Science Club</span>
                     </div>
                 </div>
-            </div>
 
-            <div className="grid grid-rows-[20%_60%_20%] max-[600px]:grid-rows-1 w-full h-full">
-                <div className="flex flex-row row-start-2 row-span-1 justify-center max-[600px]:mt-0">
-                    
-                    <img className="max-[600px]:h-auto max-[600px]:w-[100%] shrink-0" src="code_snippet.png"/>
-                    
+                <div className="grid grid-rows-[20%_60%_20%] max-[600px]:grid-rows-1 w-full h-full">
+                    <div className="flex flex-row row-start-2 row-span-1 justify-center max-[600px]:mt-0">
+
+                        <img className="max-[600px]:h-auto max-[600px]:w-[100%] shrink-0" src="code_snippet.png" />
+
+                    </div>
                 </div>
-            </div>
 
 
-        </div>
-        <Decision />
+            </div>
+            <Decision />
 
-        <AboutUsSection/>
-    </>
-);
+            <AboutUsSection />
+        </>
+    );
 }
- 
+
diff --git a/frontend/src/app/NavBar.tsx b/frontend/src/app/NavBar.tsx
index 6e93c77..33367f1 100644
--- a/frontend/src/app/NavBar.tsx
+++ b/frontend/src/app/NavBar.tsx
@@ -2,7 +2,7 @@
 
 import React, { Component, useContext, useState } from "react";
 import NavButton from "./NavButton";
-import {Global, Vector2D} from "@/app/Global";
+import { Global, Vector2D } from "@/app/Global";
 import { useRouter } from "next/navigation";
 import { useAppDispatch } from "./hooks/hooks";
 import { SetCurrentPage, selectCurrentPage } from "./slices/pageSlice";
@@ -15,19 +15,16 @@ import SocialIcons from "./SocialIcons";
 import Menu from "./Menu";
 
 
-interface NavBarProps
-{
-    Pages: Map<string, string>;  
+interface NavBarProps {
+    Pages: Map<string, string>;
 }
 
-interface NavBarState
-{
+interface NavBarState {
     ButtonGap?: number;
     TopMargin?: number;
 }
 
-export default function NavBar({ Pages } : NavBarProps) 
-{
+export default function NavBar({ Pages }: NavBarProps) {
     <div className={"gap-x-2"}></div>;
     <div className={"gap-x-3"}></div>;
     <div className={"gap-x-5"}></div>;
@@ -41,26 +38,26 @@ export default function NavBar({ Pages } : NavBarProps)
     const currentPage = useSelector(selectCurrentPage);
     const [page, setPage] = useState(currentPage);
 
-    const formURL = "https://forms.gle/gPdqMB5ijafDMRAY8";
+    const formURL = "https://lu.ma/g2q0djtw";
 
     const onClickHandler = (url: string) => {
-        router.push(url);    
+        router.push(url);
         mainDispatch(SetCurrentPage(url));
         setPage(currentPage);
     };
 
     const navButtons: Array<JSX.Element> = new Array<JSX.Element>();
-    
+
     Pages.forEach((value, key, pageMap) => {
-        navButtons.push(<NavButton Label={key} key={key} Activated={currentPage == value} EndPoint={value} OnClick={onClickHandler}/>);
-    }); 
+        navButtons.push(<NavButton Label={key} key={key} Activated={currentPage == value} EndPoint={value} OnClick={onClickHandler} />);
+    });
 
     return (
         <div>
             <nav className="navbar w-full bg-black fixed top-0 left-0 right-0 z-20">
                 <div className="flex flex-row justify-between items-center mx-auto px-4 md:px-10">
                     <div className="flex flex-row items-center justify-start">
-                        <img src="LCS.png" alt="club-logo" className="shrink-0 grow-0 w-32 h-auto select-none" onClick={() => router.push("/")}/>
+                        <img src="LCS.png" alt="club-logo" className="shrink-0 grow-0 w-32 h-auto select-none" onClick={() => router.push("/")} />
                         <div className="justify-center items-start lg:justify-start lg:flex hidden">
                             {navButtons}
                         </div>
@@ -77,12 +74,12 @@ export default function NavBar({ Pages } : NavBarProps)
                         </div>
                     </div>
                     <div className="dropdown lg:hidden">
-                        <Menu Buttons={navButtons}/>
+                        <Menu Buttons={navButtons} />
                     </div>
 
                 </div>
             </nav>
         </div>
     );
-   
+
 }
diff --git a/frontend/src/app/aboutus.tsx b/frontend/src/app/aboutus.tsx
index cd1420a..5552a31 100644
--- a/frontend/src/app/aboutus.tsx
+++ b/frontend/src/app/aboutus.tsx
@@ -2,23 +2,21 @@
 
 
 
-const AboutUsSection = function(){
+const AboutUsSection = function () {
 
-    return(
-       
+    return (
 
-        <div className="flex flex-col w-screen h-52 bg-body-gray items-center justify-center gap-8 mt-32" >
+
+        <div className="flex flex-col w-screen h-52 bg-body-gray items-center justify-center gap-8 mt-96" >
             <div className="w-4/5 h-fit  flex flex-row justify-between align-baseline">
                 <h1 className="w-fit text-3xl font-bold">About Us</h1>
-                <a className="w-fit h-fit hover:text-lang-orange" href="./about">learn more about us</a>
+                <a className="w-fit h-fit hover:text-lang-orange" href="./about">Meet our team</a>
+            </div>
+            <div className="w-4/5"><p className="break-normal">The Langara Computer Science Club is a student-led club dedicated to providing a space for students interested in computer science. We provide a space to learn, create, network, and to have fun! We hold workshops, programming competitions, socials, and other meetups.</p>
+
             </div>
-            <div className="w-4/5"><p className="break-normal">The Langara Computer Science Club is a student-led club dedicated to providing a space for students interested in computer science. We provide a space to learn, create, network, and to have fun! We hold workshops, programming competitions, and other meetups</p></div>
         </div>
-        
-        
-        
-        
-      
+
     )
 
 }
diff --git a/frontend/src/app/events/EventsLuma.tsx b/frontend/src/app/events/EventsLuma.tsx
new file mode 100644
index 0000000..b39617c
--- /dev/null
+++ b/frontend/src/app/events/EventsLuma.tsx
@@ -0,0 +1,98 @@
+import { useAppDispatch, useAppSelector } from "../hooks/hooks";
+import { SetCurrentPage } from "../slices/pageSlice";
+import { useRouter } from "next/navigation";
+
+export default function EventsSection() {
+    const router = useRouter();
+    const mainDispatch = useAppDispatch();
+
+    mainDispatch(SetCurrentPage("/events"));
+
+    const iframeStyle = {
+        border: '1px solid black',
+        borderRadius: '4px',
+        boxShadow: '0px 0px 3px 1px black ',
+        height: `760px`,
+        width: '500px',
+        overflow: 'hidden',
+
+    };
+    return (
+        <>
+            <section className="flex-grow flex flex-col min-h-screen overflow-scroll hide-scrollbar">
+                <div className="bg-body-gray h-[60vh] max-[600px]:h-[80vh]">
+                    <div className={"flex flex-row bg-body-gray w-screen"}>
+                        <div className=" flex flex-wrap justify-center items-center w-full mb-96 gap-5">
+                            {/* welcome week */}
+                            <iframe
+                                src="https://lu.ma/embed/event/evt-fviAj6YzWGRFvr5/simple"
+                                style={iframeStyle}
+                                allowFullScreen
+                                aria-hidden="false"
+                                tabIndex={0}
+                            />
+                            {/* figma workshop */}
+                            <iframe
+                                src="https://lu.ma/embed/event/evt-CcEhJ9sUgoWfRZL/simple"
+                                style={iframeStyle}
+                                allowFullScreen
+                                aria-hidden="false"
+                                tabIndex={0}
+                            />
+                            {/* intro to hackthons */}
+                            <iframe
+                                src="https://lu.ma/embed/event/evt-ADFRul3ebIYu65p/simple"
+                                style={iframeStyle}
+                                allowFullScreen
+                                aria-hidden="false"
+                                tabIndex={0}
+                            />
+                            {/* webdev workshop */}
+                            <iframe
+                                src="https://lu.ma/embed/event/evt-nR3BYNtOOkGb8Pu/simple"
+                                style={iframeStyle}
+                                allowFullScreen
+                                aria-hidden="false"
+                                tabIndex={0}
+                            />
+                            {/* ai workshop */}
+                            <iframe
+                                src="https://lu.ma/embed/event/evt-jJuIjLffphwyhFU/simple"
+                                style={iframeStyle}
+                                allowFullScreen
+                                aria-hidden="false"
+                                tabIndex={0}
+                            />
+                            {/* react workshop */}
+                            <iframe
+                                src="https://lu.ma/embed/event/evt-Jd8m4YxzsV9zgU9/simple"
+                                style={iframeStyle}
+                                allowFullScreen
+                                aria-hidden="false"
+                                tabIndex={0}
+                            />
+                            {/* defang workshop */}
+                            <iframe
+                                src="https://lu.ma/embed/event/evt-ZOk3j2eugS1TVfk/simple"
+                                style={iframeStyle}
+                                allowFullScreen
+                                aria-hidden="false"
+                                tabIndex={0}
+                            />
+                            {/* ai workshop*/}
+                            <iframe
+                                src="https://lu.ma/embed/event/evt-RNlCFhtA9NLNxvW/simple"
+                                style={iframeStyle}
+                                allowFullScreen
+                                aria-hidden="false"
+                                tabIndex={0}
+                            />
+
+
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+} 
diff --git a/frontend/src/app/events/EventsPage.tsx b/frontend/src/app/events/EventsPage.tsx
index 1f49890..4eb843a 100644
--- a/frontend/src/app/events/EventsPage.tsx
+++ b/frontend/src/app/events/EventsPage.tsx
@@ -2,68 +2,65 @@ import { experimental_useEffectEvent, useEffect, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../hooks/hooks";
 import { SetCurrentPage } from "../slices/pageSlice";
 import Events from "./Events";
-import { fetchEventsAsync } from "../thunks/EventThunks";
+// import { fetchEventsAsync } from "../thunks/EventThunks";
 import { AppDispatch } from "../stores/store";
-import { CalendarEvent, DefaultCalendarEvent, SetCalendarEvents, SetCurrentEvent, SetFetchIntervalStarted, selectEvent } from "../slices/eventSlice";
+// import { CalendarEvent, DefaultCalendarEvent, SetCalendarEvents, SetCurrentEvent, SetFetchIntervalStarted, selectEvent } from "../slices/eventSlice";
 import Conditional from "../Conditional";
 import { useRouter } from "next/navigation";
 import { Select, SelectItem, SelectTrigger, SelectContent } from "@/components/ui/select";
+import EventsLuma from './EventsLuma';
 
-export class Range 
-{
+export class Range {
     Start: number;
-    
+
     End: number;
 
-    ToArray(): number[] 
-    {
+    ToArray(): number[] {
         const array: number[] = new Array<number>();
 
         for (let x = this.Start; x < this.End; x++)
-            array.push(x); 
+            array.push(x);
 
         return array;
     }
 
-    constructor(start: number, end: number)
-    {
-        this.Start = start; 
+    constructor(start: number, end: number) {
+        this.Start = start;
         this.End = end;
-    }    
-} 
+    }
+}
 
-export default function EventsPage()
-{
+export default function EventsPage() {
     const router = useRouter();
     const mainDispatch = useAppDispatch();
 
-    const event = useAppSelector(selectEvent); 
+    //const event = useAppSelector(selectEvent); 
 
     mainDispatch(SetCurrentPage("/events"));
 
-    const [currentYear, setCurrentYear] = useState(new Date().getFullYear());  
+    const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
 
-    const [loading, setLoading] = useState(event.Events.length < 1);
+    // const [loading, setLoading] = useState(event.Events.length < 1);
 
     const [currentEvent, setCurrentEvent] = useState("");
 
-    useEffect(() => {
-        (async () => {
-            if (event.Events.length < 1) 
-            {
-                const fetchedEvents: CalendarEvent[] = (await mainDispatch(fetchEventsAsync() as AppDispatch)) as unknown as CalendarEvent[];
-                
-                mainDispatch(SetCalendarEvents(fetchedEvents));
-                setLoading(false); 
-            }
-        })();
-    });
-    
+    // useEffect(() => {
+    //     (async () => {
+    //         if (event.Events.length < 1) 
+    //         {
+    //             const fetchedEvents: CalendarEvent[] = (await mainDispatch(fetchEventsAsync() as AppDispatch)) as unknown as CalendarEvent[];
+
+    //             mainDispatch(SetCalendarEvents(fetchedEvents));
+    //             setLoading(false); 
+    //         }
+    //     })();
+    // });
+
     const getYearsSince = (year: number) => {
-        return new Range(year, new Date().getFullYear() + 1).ToArray();  
+        return new Range(year, new Date().getFullYear() + 1).ToArray();
     }
-    
-    const getTimeStamp = (time: Date) => { 
+
+    const getTimeStamp = (time: Date) => {
         const split = time.toTimeString().split(' ')[0];
 
         let [hour, minute] = split.substring(0, split.length - 3).split(":");
@@ -71,48 +68,29 @@ export default function EventsPage()
         let hourInt: number;
         let postFix: string = "AM";
 
-        if ((hourInt = Number.parseInt(hour)) > 12)
-        {
+        if ((hourInt = Number.parseInt(hour)) > 12) {
             hour = (hourInt - 12).toString();
             postFix = "PM";
         }
 
-        return `${hour}:${minute} ${postFix}`; 
+        return `${hour}:${minute} ${postFix}`;
     }
-//Use this for extra info on module
+    //Use this for extra info on module
     return (
         <>
             <div className="bg-body-gray h-[90vh] max-[600px]:h-[80vh]">
                 <div className={"flex flex-col bg-body-gray items-center"}>
                     <div className="flex flex-col mt-10">
-                        <div className={"text-[36px] font-bold"}>EVENTS</div>
+                        <div className={"text-[36px] font-bold m-5"}>EVENTS</div>
                     </div>
+                    <div className="mb-auto">
+                        <EventsLuma />
 
-                    <div className="mt-1 flex flex-col gap-1">
-                        <div className="mt-1 flex flex-col gap-1">
-                            <Conditional Condition={!loading}>
-                                <div className="flex flex-col mt-1 self-start">
-                                    <Select onValueChange = {(key: string) => {setCurrentYear(Number.parseInt(key))}}>
-                                        <SelectTrigger className="bg-[#272626] text-white border-0">{currentYear}</SelectTrigger>
-                                        <SelectContent className="bg-[#272626] text-white" color="dark">
-                                            {
-                                                getYearsSince(2022).reverse().map(year => <SelectItem className="dark bg-[#272626] text-white" value={year.toString()} key={year}>{year}</SelectItem>) 
-                                            }
-                                        </SelectContent>
-                                    </Select>
-                                </div>
-                            </Conditional>
-                        </div>
-                        <div className="mt-1 flex flex-col gap-1 overflow-y-auto max-h-screen h-[70vh] max-[600px]:h-[60vh]">
-                            <Conditional Condition={loading}>Loading</Conditional>
-                            <Events Events={[...event.Events].filter(event => event.Start.getFullYear() == currentYear)}/>
-                        </div>
                     </div>
                 </div>
             </div>
         </>
     );
-} 
+}
 
 
- 
\ No newline at end of file
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index effbb4d..6e05855 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -35,7 +35,7 @@ const buttonVariants = cva(
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+  VariantProps<typeof buttonVariants> {
   asChild?: boolean
 }