diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index f622af5..5ae62e3 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -4,28 +4,26 @@ import Home from "@/public/frame/404homeframe.svg";
 
 const NotFound = () => {
   return (
-    <div className="flex w-full">
-      <div className="flex w-auto flex-col items-center">
-        <div className="flex flex-col items-center gap-y-5 from-sw-gold-100 via-sw-white to-sw-gold-200 px-[22%] font-nunito font-bold text-transparent sm:text-3xl md:text-4xl lg:text-6xl">
-          <div className="bg-gradient-to-b bg-clip-text">404</div>
-          <div className="flex h-[5px] w-1/5 rounded-lg bg-gradient-to-r" />
-          <div className="bg-gradient-to-b bg-clip-text">PAGE NOT FOUND</div>
-          <p className="text-center font-normal text-white sm:text-sm md:text-base lg:text-3xl">
-            It seems you've ventured into uncharted space. The page you're
-            seeking is hidden in the outer rim or lost in hyperspace. But fear
-            not, young Padawan! Use the Force (or the navigation menu) to find
-            your way back to the galaxy you know and love. May the Force be with
-            you on your journey!
-          </p>
-        </div>
-        <Link href="/" className="flex w-[35%] place-content-center pt-[3%]">
-          <Image
-            src={Home}
-            alt="Back To Home"
-            className="duration-150 hover:scale-105"
-          />
-        </Link>
+    <div className="flex h-screen w-full flex-col items-center justify-center">
+      <div className="flex flex-col items-center gap-y-5 from-sw-gold-100 via-sw-white to-sw-gold-200 px-[22%] font-nunito font-bold text-transparent sm:text-3xl md:text-4xl lg:text-6xl">
+        <div className="bg-gradient-to-b bg-clip-text">404</div>
+        <div className="flex h-[5px] w-1/5 rounded-lg bg-gradient-to-r" />
+        <div className="bg-gradient-to-b bg-clip-text">PAGE NOT FOUND</div>
+        <p className="text-center font-normal text-white sm:text-sm md:text-base lg:text-3xl">
+          It seems you've ventured into uncharted space. The page you're seeking
+          is hidden in the outer rim or lost in hyperspace. But fear not, young
+          Padawan! Use the Force (or the navigation menu) to find your way back
+          to the galaxy you know and love. May the Force be with you on your
+          journey!
+        </p>
       </div>
+      <Link href="/" className="flex w-[35%] place-content-center pt-[3%]">
+        <Image
+          src={Home}
+          alt="Back To Home"
+          className="duration-150 hover:scale-105"
+        />
+      </Link>
     </div>
   );
 };
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index e40f559..ca07112 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,11 +1,16 @@
 import Link from "next/link";
-
+import frame from "@/public/frame/learnframe.svg";
+import Image from "next/image";
 const Button = ({ title, link }: { title: string; link: string }) => {
   return (
-    <Link href={link}>
+    <Link href={link} className="w-full">
       <div className="relative mx-4 inline-block bg-black">
-        <img src="/frame/learnframe.svg" alt="button frame" />
-        <span className="absolute inset-0 flex items-center justify-center font-nunito text-2xl text-white">
+        <Image
+          src={frame}
+          alt="button frame"
+          className="w-[200px] scale-150 md:scale-100"
+        />
+        <span className="absolute inset-0 flex items-center justify-center whitespace-nowrap font-nunito text-base font-medium text-white md:text-2xl">
           {title}
         </span>
       </div>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 3616cec..cde5a6a 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -7,9 +7,9 @@ import Logo from "@/public/swIcon.svg";
 const Footer = () => {
   return (
     <div className="flex w-full flex-row bg-black">
-      <div className="flex w-auto items-center">
+      <Link href={""} className="flex w-auto items-center">
         <Image src={Logo} alt="Logo" className="ml-[10%] w-1/2" />
-      </div>
+      </Link>
       <div className="ml-auto flex w-auto px-[2.5%]">
         <div className="flex gap-x-2">
           {socialMedia.map((link, index) => (
diff --git a/src/components/Join.tsx b/src/components/Join.tsx
index e3c83df..3bb9f4c 100644
--- a/src/components/Join.tsx
+++ b/src/components/Join.tsx
@@ -96,7 +96,7 @@ const Join = () => {
                     whileTap={{ scale: 0.9 }}
                     transition={{ type: "spring", stiffness: 400, damping: 10 }}
                   >
-                    <Link href={item.href}>
+                    <Link href={item.href} target="_blank">
                       <Image
                         src={item.icon}
                         alt="icon"
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index f885831..3ecd087 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -87,6 +87,7 @@ const Navigation = () => {
             href="/join"
             className="flex items-center justify-center"
             onClick={() => setIsOpen(false)}
+            target="_blank"
           >
             <Image src={navjoinframe} alt="navframe" className="w-3/6" />
             <p className="absolute mt-2 bg-gradient-to-b from-sw-gold-100 via-sw-white to-sw-gold-200 bg-clip-text text-transparent">
diff --git a/src/components/What.tsx b/src/components/What.tsx
index e09da93..0cf78e9 100644
--- a/src/components/What.tsx
+++ b/src/components/What.tsx
@@ -32,22 +32,22 @@ const fadeIn = {
   },
 };
 
-const whatAnimation = {
-  hidden: {
-    opacity: 0,
-    scale: 0,
-    x: -500,
-  },
-  visible: {
-    opacity: 1,
-    scale: 1,
-    x: 0,
-  },
-};
+// const whatAnimation = {
+//   hidden: {
+//     opacity: 0,
+//     scale: 0,
+//     x: -500,
+//   },
+//   visible: {
+//     opacity: 1,
+//     scale: 1,
+//     x: 0,
+//   },
+// };
 
 const What = () => {
   return (
-    <div className="relative flex w-full flex-col md:flex-row">
+    <div className="relative flex w-full flex-col-reverse md:flex-row">
       <motion.div
         variants={delayedPopup}
         initial="hidden"
@@ -88,13 +88,13 @@ const What = () => {
 
       <div className="flex w-full items-center justify-center px-4 py-6 md:w-1/2 md:items-end md:justify-start">
         <motion.div
-          className="flex w-full flex-col items-center justify-center text-center text-4xl md:text-left lg:text-8xl"
-          variants={whatAnimation}
-          initial="hidden"
-          whileInView="visible"
-          transition={{ ease: "easeOut", duration: 1 }}
+          className="flex flex-col-reverse items-center justify-center md:flex-col"
+          // variants={whatAnimation}
+          // initial="hidden"
+          // whileInView="visible"
+          // transition={{ ease: "easeOut", duration: 1 }}
         >
-          <Image src={planet} alt="planet" className="w-4/5" />
+          <Image src={planet} alt="planet" className="w-fit md:w-4/5" />
           <Header title="What We Do" />
         </motion.div>
       </div>
diff --git a/src/components/about/About.tsx b/src/components/about/About.tsx
index 7d1f140..a832419 100644
--- a/src/components/about/About.tsx
+++ b/src/components/about/About.tsx
@@ -34,7 +34,7 @@ const About = ({ title }: { title: string }) => {
       />
       <motion.div
         variants={animateAbout}
-        className="absolute bottom-12 top-0 flex items-center justify-center"
+        className="absolute bottom-2 top-0 flex items-center justify-center"
       >
         <motion.div
           animate={{ rotate: 360 }}
diff --git a/src/components/calendar/Event.tsx b/src/components/calendar/Event.tsx
index a84b9ee..80de896 100644
--- a/src/components/calendar/Event.tsx
+++ b/src/components/calendar/Event.tsx
@@ -1,13 +1,25 @@
 "use client";
+import { useState } from "react";
 import EventCard from "./EventCard";
-import Wrapped from "./WrappedEvents";
 import { useQuery } from "@tanstack/react-query";
 import { fetchEvents } from "@/data/actions";
 import logo1 from "@/public/eventsIcon/eventslogo1.svg";
 import logo2 from "@/public/eventsIcon/eventslogo2.svg";
 import logo3 from "@/public/eventsIcon/eventslogo3.svg";
+import Filter from "./Filter";
+import { FILTERS } from "@/data/filters";
+
+type items = {
+  id: string;
+  summary: string;
+  start: {
+    dateTime: string;
+  };
+  location: string;
+};
 
 const Events = () => {
+  const [filterId, setFilterId] = useState("upcoming");
   const { isFetching, isError, data, error } = useQuery({
     queryKey: ["Events"],
     queryFn: fetchEvents,
@@ -20,38 +32,46 @@ const Events = () => {
     return <span>Error: {error.message}</span>;
   }
 
-  type items = {
-    id: string;
-    summary: string;
-    start: {
-      dateTime: string;
-    };
-    location: string;
-  };
-
   const logo = [logo1, logo2, logo3];
 
+  const filteredEvents = data.items.filter((event: items) => {
+    const eventDate = new Date(event.start.dateTime);
+    const now = new Date();
+
+    return filterId === "upcoming" ? eventDate >= now : eventDate < now;
+  });
+
+  const handleFilterChange = (id: string) => {
+    setFilterId(id);
+  };
   return (
-    <div className="flex w-full flex-col gap-5">
-      <Wrapped />
-      <div className="flex w-full flex-wrap gap-0">
-        {data.items.slice(0, 6).map((element: items, index: number) => (
-          <div key={element.id} className="sm:w-1/2 lg:w-1/3">
-            <EventCard
-              name={element.summary}
-              date={new Date(element.start.dateTime).toLocaleDateString(
-                "en-US",
-                { year: "numeric", month: "long", day: "numeric" },
-              )}
-              time={new Date(element.start.dateTime).toLocaleTimeString(
-                "en-US",
-                { timeZone: "UTC" },
-              )}
-              location={element.location}
-              logo={logo[index % logo.length]}
-            />
+    <div className="my-10 flex h-full w-full flex-col gap-5">
+      <Filter filters={FILTERS} onChange={handleFilterChange} />
+      <div className="flex w-full flex-wrap justify-center gap-10 md:gap-0">
+        {filteredEvents.length > 0 ? (
+          filteredEvents.slice(0, 6).map((element: items, index: number) => (
+            <div key={element.id} className="sm:w-1/2 lg:w-1/3">
+              <EventCard
+                name={element.summary}
+                date={new Date(element.start.dateTime).toLocaleDateString(
+                  "en-US",
+                  { year: "numeric", month: "long", day: "numeric" },
+                )}
+                time={new Date(element.start.dateTime).toLocaleTimeString(
+                  "en-US",
+                  { timeZone: "UTC" },
+                )}
+                location={element.location}
+                logo={logo[index % logo.length]}
+              />
+            </div>
+          ))
+        ) : (
+          <div className="h-screen w-full text-center text-lg font-medium text-white md:text-2xl">
+            No {filterId === "upcoming" ? "upcoming" : "past"} events available.
+            Check back later!
           </div>
-        ))}
+        )}
       </div>
     </div>
   );
diff --git a/src/components/calendar/EventCard.tsx b/src/components/calendar/EventCard.tsx
index ca95964..2f90854 100644
--- a/src/components/calendar/EventCard.tsx
+++ b/src/components/calendar/EventCard.tsx
@@ -14,7 +14,7 @@ const EventCard = ({
   logo: string;
 }) => {
   return (
-    <div className="m-10 flex flex-col border-2 border-white">
+    <div className="m-0 flex flex-col border-2 border-white md:m-10">
       <div className="flex justify-center bg-sw-gold-100 bg-gradient-to-r from-sw-gold-100 via-sw-white to-sw-gold-200">
         <span className="my-[5%] font-semibold text-white sm:text-base md:text-xl lg:text-3xl">
           {name}
@@ -24,7 +24,7 @@ const EventCard = ({
         <Image
           src={logo}
           alt="Logo"
-          className="absolute -bottom-6 left-2 bg-black"
+          className="absolute -bottom-6 left-0 w-2/12 bg-black md:left-2 md:w-fit"
         />
         <div>{date}</div>
         <div>{time}</div>
diff --git a/src/components/calendar/Filter.tsx b/src/components/calendar/Filter.tsx
index 239fc5c..8361378 100644
--- a/src/components/calendar/Filter.tsx
+++ b/src/components/calendar/Filter.tsx
@@ -9,11 +9,11 @@ const Filter = ({
   onChange,
 }: {
   filters: Array<Background>;
-  onChange: (filter: Background) => void;
+  onChange: (filter: string) => void;
 }) => {
   const [selectedFilter, setSelectedFilter] = useState(filters[0]);
   const handleClick = (filter: Background) => {
-    onChange(filter);
+    onChange(filter.id);
     setSelectedFilter(filter);
     if (filter == filters[1]) {
       if (filter.Image == frame) {
diff --git a/src/components/calendar/FilterCard.tsx b/src/components/calendar/FilterCard.tsx
index adc318e..571de20 100644
--- a/src/components/calendar/FilterCard.tsx
+++ b/src/components/calendar/FilterCard.tsx
@@ -10,8 +10,12 @@ const FilterCard = ({
 }) => {
   return (
     <div className="image-item w-4/ relative mx-4 inline-block flex-wrap">
-      <Image src={frame} alt={`Image ${0 + 1}`} />
-      <span className="absolute inset-0 flex items-center justify-center font-nunito text-2xl">
+      <Image
+        src={frame}
+        alt={`Image ${0 + 1}`}
+        className="w-full scale-150 md:scale-100"
+      />
+      <span className="absolute inset-0 flex items-center justify-center whitespace-nowrap font-nunito text-sm md:text-2xl">
         {Message}
       </span>
     </div>
diff --git a/src/components/calendar/WrappedEvents.tsx b/src/components/calendar/WrappedEvents.tsx
index df17a26..f1316bb 100644
--- a/src/components/calendar/WrappedEvents.tsx
+++ b/src/components/calendar/WrappedEvents.tsx
@@ -1,25 +1,25 @@
-"use client";
-//import { Component } from "Component, useState";
-//import Event from "./Event"
-import { useState } from "react";
-import Filter from "./Filter";
-import { FILTERS } from "@/data/filters";
-import { Background } from "@/data/Background";
+// "use client";
+// //import { Component } from "Component, useState";
+// //import Event from "./Event"
+// import { useState } from "react";
+// import Filter from "./Filter";
+// import { FILTERS } from "@/data/filters";
+// import { Background } from "@/data/Background";
 
-const Wrapped = () => {
-  const [component, setComponent] = useState<Background>(FILTERS[0]);
+// const Wrapped = () => {
+//   const [component, setComponent] = useState<Background>(FILTERS[0]);
 
-  const handleFilterChange = (component: Background) => {
-    setComponent(component);
-  };
+//   const handleFilterChange = (component: Background) => {
+//     setComponent(component);
+//   };
 
-  return (
-    <div>
-      <Filter filters={FILTERS} onChange={handleFilterChange} />
-      {component === FILTERS[0] && "no upcoming events" /*<Event />*/}
-      {component === FILTERS[1] && "no past events" /*<Event />*/}
-    </div>
-  );
-};
+//   return (
+//     <div>
+//       <Filter filters={FILTERS} onChange={handleFilterChange} />
+//       {component === FILTERS[0] && "no upcoming events" /*<Event />*/}
+//       {component === FILTERS[1] && "no past events" /*<Event />*/}
+//     </div>
+//   );
+// };
 
-export default Wrapped;
+// export default Wrapped;
diff --git a/src/data/Background.ts b/src/data/Background.ts
index b637343..75347b3 100644
--- a/src/data/Background.ts
+++ b/src/data/Background.ts
@@ -1,6 +1,7 @@
 import { StaticImageData } from "next/image";
 
-export interface Background {
+export type Background = {
+  id: string;
   Image: StaticImageData;
   Message: string;
-}
+};
diff --git a/src/data/filters.ts b/src/data/filters.ts
index bfaa429..985267a 100644
--- a/src/data/filters.ts
+++ b/src/data/filters.ts
@@ -1,12 +1,21 @@
 import frame from "@/public/frame/pastevents1.svg";
 import frame2 from "@/public/frame/upcomingevents.svg";
+import { StaticImageData } from "next/image";
 
-export const FILTERS = [
+export type Background = {
+  id: string;
+  Image: StaticImageData;
+  Message: string;
+};
+
+export const FILTERS: Background[] = [
   {
+    id: "upcoming",
     Image: frame2,
     Message: "UPCOMING EVENTS",
   },
   {
+    id: "past",
     Image: frame,
     Message: "PAST EVENTS",
   },