diff --git a/client/src/components/molecules/btn-date-filter/component.tsx b/client/src/components/molecules/btn-date-filter/component.tsx
index 53b67f4..693d713 100644
--- a/client/src/components/molecules/btn-date-filter/component.tsx
+++ b/client/src/components/molecules/btn-date-filter/component.tsx
@@ -3,16 +3,18 @@ import { Tabs, TabsList, TabsTrigger } from "../../../components/ui/tabs";
 export type EventCardProps = {
   tab1: string;
   tab2: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  fcn: any;
 };
 
-export const BtnDateFilter: React.FC<EventCardProps> = ({ tab1, tab2 }) => {
+export const BtnDateFilter: React.FC<EventCardProps> = ({ tab1, tab2, fcn }) => {
   return (
     <Tabs className="w-[35%] md:w-[20%] text-center">
       <TabsList className="grid w-full grid-cols-2">
-        <TabsTrigger value="account" className="text-xs">
+        <TabsTrigger value="account" className="text-xs" onClick={() => fcn("upcoming")}>
           {tab1}
         </TabsTrigger>
-        <TabsTrigger value="password" className="text-xs">
+        <TabsTrigger value="password" className="text-xs" onClick={() => fcn("past")}>
           {tab2}
         </TabsTrigger>
       </TabsList>
diff --git a/client/src/pages/events/Events.tsx b/client/src/pages/events/Events.tsx
index 8dcbceb..4c35c8e 100644
--- a/client/src/pages/events/Events.tsx
+++ b/client/src/pages/events/Events.tsx
@@ -18,6 +18,7 @@ interface Event {
 
 const CalendarPage = () => {
   const [events, setEvents] = useState<Event[]>([]);
+  const [dateFilter, setDateFilter] = useState("all");
 
   function formatDate(date: string) {
     const dateObj = new Date(date);
@@ -34,7 +35,7 @@ const CalendarPage = () => {
     return `${formattedHour}:${minutes} ${ampm}`;
   }
   useEffect(() => {
-    fetch("http://localhost/api/v1/events", {
+    fetch(`http://localhost/api/v1/events?timeframe=${dateFilter}`, {
       method: "GET",
       headers: {
         "Content-Type": "application/json",
@@ -45,7 +46,7 @@ const CalendarPage = () => {
         console.log(data);
         setEvents(data.foundEvents);
       });
-  }, []);
+  }, [dateFilter]);
   return (
     <>
       <div className="about text-text my-10 px-[15%]">
@@ -60,7 +61,7 @@ const CalendarPage = () => {
             These events are accessible to all those who are interested,
             irrespective of their major or prior experience.
           </p>
-          <BtnDateFilter tab1="Upcoming" tab2="Past" />
+          <BtnDateFilter tab1="Future" tab2="Past" fcn={setDateFilter} />
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-8">