diff --git a/src/app/(public)/alumni/page.tsx b/src/app/(public)/alumni/page.tsx
index f96c309..a114e43 100644
--- a/src/app/(public)/alumni/page.tsx
+++ b/src/app/(public)/alumni/page.tsx
@@ -1,26 +1,10 @@
 "use client";
 
-import React, { useState, useEffect, Suspense } from "react";
+import React, { useEffect, Suspense } from "react";
 import Alumni from "@/components/pages/Alumni";
-import { useSearchParams } from "next/navigation";
 
 function AlumniWrapper() {
-  const searchParams = useSearchParams();
-  const departmentParam = searchParams.get("department");
-  const [currentDepartment, setCurrentDepartment] = useState(departmentParam || "Full-Stack");
-
-  // Optional: if URL changes during client-side navigation, update state
-  useEffect(() => {
-    const dept = searchParams.get("department");
-    setCurrentDepartment(dept || "Full-Stack");
-  }, [searchParams]);
-
-  return (
-    <Alumni
-      currentDepartment={currentDepartment}
-      setCurrentDepartment={setCurrentDepartment}
-    />
-  );
+  return <Alumni />;
 }
 
 export default function AlumniPage() {
diff --git a/src/components/pages/Alumni.tsx b/src/components/pages/Alumni.tsx
index 5861033..928f20f 100644
--- a/src/components/pages/Alumni.tsx
+++ b/src/components/pages/Alumni.tsx
@@ -1,22 +1,10 @@
 import React from "react";
 import { AlumniMeetTheTeamSection } from "../sections/AlumniMeetTheTeamSection";
 
-export interface AlumniPageProps {
-  currentDepartment: string;
-  setCurrentDepartment: React.Dispatch<React.SetStateAction<string>>;
-}
-
-const Alumni: React.FC<AlumniPageProps> = ({
-  currentDepartment,
-  setCurrentDepartment,
-}) => {
+const Alumni = ({}) => {
   return (
     <div>
-      <AlumniMeetTheTeamSection
-        currentDepartment={currentDepartment}
-        setCurrentDepartment={setCurrentDepartment}
-      />
-      {/* <ApplyCard/> */}
+      <AlumniMeetTheTeamSection />
     </div>
   );
 };
diff --git a/src/components/sections/AlumniMeetTheTeamSection.tsx b/src/components/sections/AlumniMeetTheTeamSection.tsx
index 21d40f9..41ce4c6 100644
--- a/src/components/sections/AlumniMeetTheTeamSection.tsx
+++ b/src/components/sections/AlumniMeetTheTeamSection.tsx
@@ -1,326 +1,128 @@
 "use client";
-import { RawMember } from "@/lib/features/members/types/members";
-import { MemberCard } from "../ui/MemberCard";
-import MembersFilter from "../ui/MembersFilter";
-import React, { useEffect } from "react";
-import { useRouter } from "next/navigation";
-import { departmentCards, DepartmentCard } from "../ui/DepartmentCard";
+import alumni from "@/data/alumni.json";
 
-// Placeholder alumni data
-const placeholderAlumni: Record<string, RawMember[]> = {
-  "Full-Stack": [
-    {
-      id: 1,
-      name: "John Doe",
-      email: "john.doe@alumni.addu.edu.ph",
-      photo: "/images/alumni-placeholder.jpg",
-      roles: [
-        {
-          roles: {
-            id: 2,
-            name: "Full-Stack",
-            modifiedAt: "",
-            createdAt: "",
-            deletedAt: null,
-          },
-        },
-      ],
-    },
-    {
-      id: 2,
-      name: "Jane Smith",
-      email: "jane.smith@alumni.addu.edu.ph",
-      photo: "/images/alumni-placeholder.jpg",
-      roles: [
-        {
-          roles: {
-            id: 2,
-            name: "Full-Stack",
-            modifiedAt: "",
-            createdAt: "",
-            deletedAt: null,
-          },
-        },
-      ],
-    },
-  ],
-  "Front-End": [
-    {
-      id: 3,
-      name: "Alice Johnson",
-      email: "alice.johnson@alumni.addu.edu.ph",
-      photo: "/images/alumni-placeholder.jpg",
-      roles: [
-        {
-          roles: {
-            id: 5,
-            name: "Front-End",
-            modifiedAt: "",
-            createdAt: "",
-            deletedAt: null,
-          },
-        },
-      ],
-    },
-  ],
-  "Back-End": [
-    {
-      id: 4,
-      name: "Bob Wilson",
-      email: "bob.wilson@alumni.addu.edu.ph",
-      photo: "/images/alumni-placeholder.jpg",
-      roles: [
-        {
-          roles: {
-            id: 7,
-            name: "Back-End",
-            modifiedAt: "",
-            createdAt: "",
-            deletedAt: null,
-          },
-        },
-      ],
-    },
-  ],
-  QA: [
-    {
-      id: 5,
-      name: "Carol Brown",
-      email: "carol.brown@alumni.addu.edu.ph",
-      photo: "/images/alumni-placeholder.jpg",
-      roles: [
-        {
-          roles: {
-            id: 9,
-            name: "QA",
-            modifiedAt: "",
-            createdAt: "",
-            deletedAt: null,
-          },
-        },
-      ],
-    },
-  ],
-  DevOps: [
-    {
-      id: 6,
-      name: "David Lee",
-      email: "david.lee@alumni.addu.edu.ph",
-      photo: "/images/alumni-placeholder.jpg",
-      roles: [
-        {
-          roles: {
-            id: 1,
-            name: "DevOps",
-            modifiedAt: "",
-            createdAt: "",
-            deletedAt: null,
-          },
-        },
-      ],
-    },
-  ],
-  "Project Manager": [
-    {
-      id: 7,
-      name: "Eva Garcia",
-      email: "eva.garcia@alumni.addu.edu.ph",
-      photo: "/images/alumni-placeholder.jpg",
-      roles: [
-        {
-          roles: {
-            id: 4,
-            name: "Project Manager",
-            modifiedAt: "",
-            createdAt: "",
-            deletedAt: null,
-          },
-        },
-      ],
-    },
-  ],
-  "UI/UX": [
-    {
-      id: 8,
-      name: "Frank Miller",
-      email: "frank.miller@alumni.addu.edu.ph",
-      photo: "/images/alumni-placeholder.jpg",
-      roles: [
-        {
-          roles: {
-            id: 3,
-            name: "UI/UX",
-            modifiedAt: "",
-            createdAt: "",
-            deletedAt: null,
-          },
-        },
-      ],
-    },
-  ],
-  Creatives: [
-    {
-      id: 9,
-      name: "Grace Davis",
-      email: "grace.davis@alumni.addu.edu.ph",
-      photo: "/images/alumni-placeholder.jpg",
-      roles: [
-        {
-          roles: {
-            id: 6,
-            name: "Creatives",
-            modifiedAt: "",
-            createdAt: "",
-            deletedAt: null,
-          },
-        },
-      ],
-    },
-  ],
-};
-
-export interface AlumniMeetTheTeamSectionProps {
-  currentDepartment: string;
-  setCurrentDepartment: React.Dispatch<React.SetStateAction<string>>;
+interface Person {
+  firstName: string;
+  lastName: string;
+  role?: string;
 }
 
-export const AlumniMeetTheTeamSection: React.FC<
-  AlumniMeetTheTeamSectionProps
-> = ({ currentDepartment, setCurrentDepartment }) => {
-  const router = useRouter();
-  const [members, setMembers] = React.useState<RawMember[]>([]);
-
-  // const officerRoles = [
-  //   "Director",
-  //   "Deputy Director",
-  //   "Secretary General",
-  //   "Treasurer",
-  //   "Auditor",
-  //   "External Affairs Head",
-  //   "Frontend Head",
-  //   "Backend Head",
-  //   "UI/UX Head",
-  //   "Creatives Head",
-  //   "Public Relations Officer",
-  // ];
-
-  // function extractMembers(res: unknown): RawMember[] {
-  //   if (
-  //     res &&
-  //     typeof res === "object" &&
-  //     "data" in res &&
-  //     Array.isArray((res as { data?: unknown }).data)
-  //   ) {
-  //     return (res as { data: RawMember[] }).data;
-  //   }
-  //   if (Array.isArray(res)) {
-  //     return res as RawMember[];
-  //   }
-  //   return [];
-  // }
+interface RoleSectionProps {
+  role: string;
+  members: Person[];
+}
 
-  useEffect(() => {
-    window.history.replaceState(
-      null,
-      "",
-      `/alumni?department=${encodeURIComponent(currentDepartment)}`,
-    );
-  }, [currentDepartment]);
+const AlumniCard: React.FC<Person> = ({ firstName, lastName, role }) => {
+  return (
+    <div className="flex flex-col items-center justify-between text-center">
+      <p className="font-semibold  text-[14px] sm:text-[15px] md:text-[17px] text-blue3">
+        {firstName} {lastName}
+      </p>
+
+      {role && (
+        <span className="mt-1 px-3 py-1 text-[10px] sm:text-[11px] md:text-[13px] bg-blue3 text-yellow4 rounded-full w-34 md:w-40 lg:w-48">
+          {role}
+        </span>
+      )}
+    </div>
+  );
+};
 
-  useEffect(() => {
-    // async function fetchData() {
-    //       let res;
-    //       switch (currentDepartment) {
-    //         case "Full-Stack":
-    //           res = await GetMembers(2);
-    //           break;
-    //         case "Front-End":
-    //           res = await GetMembers(5);
-    //           break;
-    //         case "Back-End":
-    //           res = await GetMembers(7);
-    //           break;
-    //         case "QA":
-    //           res = await GetMembers(9);
-    //           break;
-    //         case "DevOps":
-    //           res = await GetMembers(1);
-    //           break;
-    //         case "Project Manager":
-    //           res = await GetMembers(4);
-    //           break;
-    //         case "UI/UX":
-    //           res = await GetMembers(3);
-    //           break;
-    //         case "Creatives":
-    //           res = await GetMembers(6);
-    //           break;
-    //         default:
-    //           res = await GetMembers();
-    //       }
+interface OfficersSectionProps {
+  officers: Person[];
+}
 
-    //       const membersArray: RawMember[] = extractMembers(res);
+const OfficersSection: React.FC<OfficersSectionProps> = ({ officers }) => {
+  const top = officers.slice(0, 2);
+  const middle = officers.slice(2, 6);
+  const bottom = officers.slice(6, 10);
 
-    //       // ✅ Filter out officers
-    //       const filteredMembers = membersArray.filter(
-    //         (member) =>
-    //           !member.roles.some((r) => officerRoles.includes(r.roles.name))
-    //       );
+  return (
+    <div className="flex flex-col items-center gap-10 mt-6 w-full">
+      {/* Top (2 centered) */}
+      <div className="flex flex-col items-center gap-6">
+        {top.map((p, i) => (
+          <AlumniCard key={i} {...p} />
+        ))}
+      </div>
 
-    //       setMembers(filteredMembers);
-    //     }
+      {/* Middle row */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-10 w-full place-items-center">
+        {middle.map((p, i) => (
+          <AlumniCard key={i} {...p} />
+        ))}
+      </div>
 
-    // Placeholder alumni data
-    const alumniData = placeholderAlumni[currentDepartment] || [];
+      {/* Bottom row */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-10 w-full place-items-center">
+        {bottom.map((p, i) => (
+          <AlumniCard key={i} {...p} />
+        ))}
+      </div>
+    </div>
+  );
+};
 
-    setMembers(alumniData);
-    // fetchData();
-  }, [currentDepartment]);
+const RoleSection: React.FC<RoleSectionProps> = ({ role, members }) => {
+  return (
+    <div className="flex flex-col items-center mt-10 w-full">
+      <div className="bg-yellow4 text-blue3 font-bold px-6 py-2 rounded-full text-lg md:text-2xl w-full text-center">
+        {role}
+      </div>
 
-  useEffect(() => {
-    router.push(`/alumni?department=${encodeURIComponent(currentDepartment)}`);
-  }, [currentDepartment, router]);
+      <div className="mt-4 text-center space-y-1">
+        {members.map((m, i) => (
+          <p
+            key={i}
+            className=" text-[14px] sm:text-[15px] md:text-[17px] text-blue3 font-bold"
+          >
+            {m.firstName} {m.lastName}
+          </p>
+        ))}
+      </div>
+    </div>
+  );
+};
 
+export const AlumniMeetTheTeamSection = () => {
   return (
-    <section className=" font-inter w-full flex flex-col items-center pb-4 sm:pb-7">
-      <div className="relative flex flex-col items-center text-whtie text-center gap-2.5 w-full pt-20 pb-16 bg-blue3">
-        <div className="absolute bg-gradient-to-b from-black/50 z-10 inset-0"></div>
+    <section className="font-inter w-full flex flex-col items-center pb-10 overflow-hidden">
+      {/* HEADER */}
+      <div className="relative flex flex-col items-center text-white text-center w-full pt-20 pb-16 bg-blue3">
+        <div className="absolute bg-gradient-to-b from-black/50 inset-0"></div>
+
         <div className="z-10">
           <h1 className="font-bold text-3xl sm:text-4xl">Meet the Alumni</h1>
-          <p className="text-sm md:text-lg mt-1 mb-2 text-yellow4">
+
+          <p className="text-sm md:text-lg mt-1 text-yellow4">
             (A.Y. &apos;23 - &apos;24)
           </p>
-          <p className="text-base sm:text-lg">
-            The alumni of SYSDEV &#8212; former builders of solutions for a
-            better AdDU.
+
+          <p className="text-base sm:text-lg mt-2">
+            The alumni of SYSDEV — former builders of solutions for a better
+            AdDU.
           </p>
         </div>
       </div>
 
-      <div className="mt-10 w-full">
-        <MembersFilter
-          currentDepartment={currentDepartment}
-          setCurrentDepartment={setCurrentDepartment}
-        />
-      </div>
+      {/* OFFICERS */}
+      <div className="mt-12 text-center">
+        <h2 className="text-xl md:text-3xl font-bold text-blue3">
+          Officers (A.Y. &apos;23 - &apos;24)
+        </h2>
 
-      {/* Department Card */}
-      {departmentCards[currentDepartment as keyof typeof departmentCards] && (
-        <DepartmentCard
-          {...departmentCards[
-            currentDepartment as keyof typeof departmentCards
-          ]}
-        />
-      )}
+        <OfficersSection officers={alumni.officers} />
+      </div>
 
-      <div className="flex flex-col items-center mt-12 sm:mt-16 gap-y-3 sm:gap-y-9 lg:gap-y-10 w-full sm:w-auto">
-        <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-8 sm:gap-10 w-full max-w-6xl">
-          {members.map((member, idx) => (
-            <li key={idx} className="flex justify-center">
-              <MemberCard member={member} />
-            </li>
-          ))}
-        </ul>
+      {/* ROLES */}
+      <div className="w-full max-w-2xl mt-12">
+        {alumni.data.map((section, i) => (
+          <RoleSection
+            key={i}
+            role={section.role.replace(/([A-Z])/g, " $1").trim()}
+            members={section.members}
+          />
+        ))}
       </div>
     </section>
   );
diff --git a/src/data/alumni.json b/src/data/alumni.json
new file mode 100644
index 0000000..bd1b5c1
--- /dev/null
+++ b/src/data/alumni.json
@@ -0,0 +1,107 @@
+{
+  "title": "Alumni (2024–2025)",
+  "batchYear": "2024–2025",
+  "officers": [
+    { "firstName": "Jiyo Seth", "lastName": "Valmoria", "role": "Director" },
+    {
+      "firstName": "Arabella Grace",
+      "lastName": "Mejorada",
+      "role": "Deputy Director"
+    },
+    {
+      "firstName": "Jan Patrick",
+      "lastName": "Matayabas",
+      "role": "External Affairs Head"
+    },
+    {
+      "firstName": "Mariel",
+      "lastName": "Mabano",
+      "role": "Secretary-General"
+    },
+    {
+      "firstName": "Isabelle Faith",
+      "lastName": "Labuguen",
+      "role": "Auditor"
+    },
+    { "firstName": "Aaron Justin", "lastName": "Macias", "role": "Treasurer" },
+    {
+      "firstName": "Paolo Luis",
+      "lastName": "Ramirez",
+      "role": "Front End Head"
+    },
+    {
+      "firstName": "Ivan Sam",
+      "lastName": "Wabina",
+      "role": "Back End Head"
+    },
+    {
+      "firstName": "Maverick",
+      "lastName": "Pigao",
+      "role": "UI/UX Design Head"
+    },
+    { "firstName": "Mark Lyod", "lastName": "Carin", "role": "Creatives Head" }
+  ],
+  "data": [
+    {
+      "role": "Front-End Developer",
+      "members": [
+        { "firstName": "Kervi Kent", "lastName": "Asombrado" },
+        { "firstName": "Peter Andre", "lastName": "Casiano" },
+        { "firstName": "Sean Elijah", "lastName": "Chavez" },
+        { "firstName": "Anya Patricia", "lastName": "Kuan" },
+        { "firstName": "Mariel", "lastName": "Mabano" },
+        { "firstName": "Paolo Luis", "lastName": "Ramirez" },
+        { "firstName": "Yassir", "lastName": "Utara" }
+      ]
+    },
+    {
+      "role": "Back-End Developer",
+      "members": [
+        { "firstName": "Adrianne Mykhel", "lastName": "Bulao" },
+        { "firstName": "Mark Cyryl", "lastName": "Clarde" },
+        { "firstName": "Isabelle Faith", "lastName": "Labuguen" },
+        { "firstName": "Janriz Christian", "lastName": "Prado" },
+        { "firstName": "Ivan Sam", "lastName": "Wabina" },
+        { "firstName": "Anthony Dexter", "lastName": "Yap" }
+      ]
+    },
+    {
+      "role": "FullStack Developer",
+      "members": [
+        { "firstName": "Ron Joshua", "lastName": "Bersabal" },
+        { "firstName": "Marvin Paul", "lastName": "Eloja" },
+        { "firstName": "Derick Lance", "lastName": "Eroy" },
+        { "firstName": "Aaron Justin", "lastName": "Macias" },
+        { "firstName": "Jan Patrick", "lastName": "Matayabas" },
+        { "firstName": "Marjhealou Nina Anne", "lastName": "Paraiso" },
+        { "firstName": "Jiyo Seth", "lastName": "Valmoria" }
+      ]
+    },
+    {
+      "role": "UI/UX Designer",
+      "members": [
+        { "firstName": "Dominic Miguel", "lastName": "Almonte" },
+        { "firstName": "Martina Aaron", "lastName": "Angeles" },
+        { "firstName": "Clyde Cedrick", "lastName": "Macabangon" },
+        { "firstName": "Maverick Jasper", "lastName": "Pigao" }
+      ]
+    },
+    {
+      "role": "Creatives",
+      "members": [{ "firstName": "Josh Elizalde", "lastName": "Banggud" }]
+    },
+    {
+      "role": "Project Manager",
+      "members": [
+        { "firstName": "Martina Aaron", "lastName": "Angeles" },
+        { "firstName": "Isabelle Faith", "lastName": "Labuguen" },
+        { "firstName": "Jan Patrick", "lastName": "Matayabas" },
+        { "firstName": "Jiyo Seth", "lastName": "Valmoria" }
+      ]
+    },
+    {
+      "role": "Quality Assurance Specialist",
+      "members": [{ "firstName": "Jiyo Seth", "lastName": "Valmoria" }]
+    }
+  ]
+}