diff --git a/src/components/react/OfficerCard.jsx b/src/components/react/OfficerCard.jsx
new file mode 100644
index 0000000..a6a53f0
--- /dev/null
+++ b/src/components/react/OfficerCard.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+const OfficerCard = ({ picture, name, position, email }) => (
+    <div className={`flex flex-col items-center w-64 rounded-lg  `}>
+        <img
+            className="w-26 h-auto sm:h-64 object-cover rounded-3xl"
+            src={picture}
+            alt={`Picture of ${name}`}
+        />
+        <div className="p-4">
+            <h3 className="text-lg font-bold text-center">{name}</h3>
+            <p className="text-center text-sm text-gray-600">{position}</p>
+            <a
+                href={`mailto:${email}`}
+                className="block text-center mt-2 text-sm text-blue-500 hover:underline"
+            >
+                {email}
+            </a>
+        </div>
+    </div>
+);
+
+export default OfficerCard;
diff --git a/src/components/react/OfficerTabs.jsx b/src/components/react/OfficerTabs.jsx
new file mode 100644
index 0000000..4f1138d
--- /dev/null
+++ b/src/components/react/OfficerTabs.jsx
@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import OfficerCard from "./OfficerCard.jsx";
+import { AnimatePresence } from "framer-motion";
+
+const OfficerTabs = ({ officers }) => {
+    const [selectedType, setSelectedType] = useState("All");
+
+    const uniqueTypes = [
+        "All",
+        ...new Set(officers.flatMap((officer) => officer.type || [])),
+    ];
+
+    const filteredOfficers =
+        selectedType === "All"
+            ? officers
+            : officers.filter((officer) =>
+                  officer.type?.includes(selectedType)
+              );
+
+    return (
+        <div>
+            <div className="tabs flex justify-center items-center">
+                {uniqueTypes.map((type) => (
+                    <button
+                        key={type}
+                        onClick={() => setSelectedType(type)}
+                        className={`px-5 py-1 border-b-2 ${
+                            selectedType === type
+                                ? "border-ieee"
+                                : "hover:border-ieee"
+                        }`}
+                    >
+                        {type}
+                    </button>
+                ))}
+            </div>
+
+            <div
+                key={selectedType}
+                className="officers flex-row flex flex-wrap items-center justify-center space-x-16 p-12"
+            >
+                {filteredOfficers.map((officer) => (
+                    <OfficerCard key={officer.email} {...officer} />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default OfficerTabs;