diff --git a/src/components/events/EventsFilter.tsx b/src/components/events/EventsFilter.tsx
new file mode 100644
index 0000000..36d95ec
--- /dev/null
+++ b/src/components/events/EventsFilter.tsx
@@ -0,0 +1,22 @@
+export default function EventsFilter() {
+  return (
+    <div className="relative px-2 sm:px-4 md:px-6 py-2 sm:py-4 flex justify-left w-full bg-[#13384E]">
+      <div className="px-2 sm:px-4 py-2 bg-[#E6E1DE] rounded-2xl w-full">
+        <div className="flex flex-row gap-2 sm:gap-4 md:gap-6 items-center overflow-x-auto w-full no-scrollbar">
+          <p className="font-bold text-lg sm:text-xl md:text-2xl px-1 sm:px-2 whitespace-nowrap flex-shrink-0">
+            Filter Events by:{' '}
+          </p>
+          <button className="font-bold text-base sm:text-lg md:text-2xl text-[#13384E] border-2 rounded-xl px-2 py-1 cursor-pointer bg-[#FFF8F3] border-[#13384E] whitespace-nowrap flex-shrink-0">
+            Workshop
+          </button>
+          <button className="font-bold text-base sm:text-lg md:text-2xl text-[#13384E] border-2 rounded-xl px-2 py-1 cursor-pointer bg-[#FFF8F3] border-[#13384E] whitespace-nowrap flex-shrink-0">
+            Exhibition
+          </button>
+          <button className="font-bold text-base sm:text-lg md:text-2xl text-[#13384E] border-2 rounded-xl px-2 py-1 cursor-pointer bg-[#FFF8F3] border-[#13384E] whitespace-nowrap flex-shrink-0">
+            Social
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/events/PastEventsFilter.tsx b/src/components/events/PastEventsFilter.tsx
new file mode 100644
index 0000000..34c44d6
--- /dev/null
+++ b/src/components/events/PastEventsFilter.tsx
@@ -0,0 +1,22 @@
+export default function PastEventsFilter() {
+  return (
+    <div className="relative px-2 sm:px-4 md:px-6 py-2 sm:py-4 flex justify-left w-full bg-[#E6E1DE]">
+      <div className="px-2 sm:px-4 py-2 bg-[#13384E] rounded-2xl w-full">
+        <div className="flex flex-row gap-2 sm:gap-4 md:gap-6 items-center overflow-x-auto w-full no-scrollbar">
+          <p className="font-bold text-lg sm:text-xl md:text-2xl px-1 sm:px-2 whitespace-nowrap flex-shrink-0 text-[#E6E1DE]">
+            Filter Events by:{' '}
+          </p>
+          <button className="font-bold text-base sm:text-lg md:text-2xl text-[#13384E] border-2 rounded-xl px-2 py-1 cursor-pointer bg-[#E6E1DE] border-[#FFF8F3] whitespace-nowrap flex-shrink-0">
+            Workshop
+          </button>
+          <button className="font-bold text-base sm:text-lg md:text-2xl text-[#13384E] border-2 rounded-xl px-2 py-1 cursor-pointer bg-[#E6E1DE] border-[#FFF8F3] whitespace-nowrap flex-shrink-0">
+            Exhibition
+          </button>
+          <button className="font-bold text-base sm:text-lg md:text-2xl text-[#13384E] border-2 rounded-xl px-2 py-1 cursor-pointer bg-[#E6E1DE] border-[#FFF8F3] whitespace-nowrap flex-shrink-0">
+            Social
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/events/PastEventsSection.tsx b/src/components/events/PastEventsSection.tsx
index bf4dabf..efdb5e1 100644
--- a/src/components/events/PastEventsSection.tsx
+++ b/src/components/events/PastEventsSection.tsx
@@ -1,4 +1,5 @@
 import YearFilter from '@/components/events/YearFilter'
+import PastEventsFilter from '@/components/events/PastEventsFilter'
 import PastEvents from '@/components/events/PastEventsGrid'
 import Image from 'next/image'
 import BlueKoru from '@/assets/blue_koru.png'
@@ -10,13 +11,13 @@ export default function PastEventsSection() {
         src={BlueKoru}
         alt="Blue Koru decoration"
         width={256}
-        className="absolute -right-10 top-20 rotate-180
-          "
+        className="absolute right-0 top-20 rotate-180 z-10"
       />
       <h3 className="bg-[#E6E1DE] inline text-5xl px-20 py-5 border-none rounded-t-xl font-bold">
         PREVIOUS EVENTS
       </h3>
-      <div className="bg-[#E6E1DE] flex flex-col items-center gap-y-10 py-10">
+      <PastEventsFilter />
+      <div className="bg-[#E6E1DE] flex flex-col items-center gap-y-10 pt-2 pb-10"> 
         <YearFilter />
         <PastEvents />
       </div>
diff --git a/src/components/events/RecentEvents.tsx b/src/components/events/RecentEvents.tsx
index 07b3dc0..c49c345 100644
--- a/src/components/events/RecentEvents.tsx
+++ b/src/components/events/RecentEvents.tsx
@@ -2,7 +2,7 @@
 import { useState } from 'react'
 import Image from 'next/image'
 import SignUpModal from '@/components/common/SignUpModal'
-
+import EventsFilter from '@/components/events/EventsFilter'
 import Koru from '@/assets/recent_events_koru.png'
 import PlaceholderImg from '@/assets/placeholder_img.png'
 import KiwiBird from '@/assets/kiwiBird.svg'
@@ -34,6 +34,8 @@ export default function RecentEvents() {
         </h2>
       </div>
 
+      <EventsFilter />
+
       {/* Main Content */}
       <section
         className="relative w-full bg-[#13384E] px-6 pt-0 pb-12 overflow-x-hidden"
diff --git a/src/components/events/YearFilter.tsx b/src/components/events/YearFilter.tsx
index 8d37bcc..6dcafef 100644
--- a/src/components/events/YearFilter.tsx
+++ b/src/components/events/YearFilter.tsx
@@ -1,8 +1,8 @@
 export default function YearFilter() {
   return (
-    <div className="flex flex-row gap-10">
+    <div className="px-12 w-full justify-left flex flex-row gap-10">
       <p className="font-bold text-2xl">YEAR</p>
-      <div className="flex flex-row overflow-x-auto w-200 no-scrollbar gap-5">
+      <div className="flex flex-row overflow-x-auto max-w-[80-vw] no-scrollbar gap-5">
         <button className="font-bold text-2xl text-[#13384E] border-2 rounded-2xl gap px-2 cursor-pointer bg-[#FFF8F3] border-[#13384E]">
           2025
         </button>