diff --git a/src/components/react/OfficerCard.jsx b/src/components/react/OfficerCard.jsx
index a6a53f0..b3c3c26 100644
--- a/src/components/react/OfficerCard.jsx
+++ b/src/components/react/OfficerCard.jsx
@@ -1,23 +1,38 @@
 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>
+const OfficerCard = ({
+    picture,
+    name,
+    position,
+    email,
+    onMustahsinClicked,
+}) => {
+    const handleImageClick = () => {
+        if (name === "Mustahsin Zarif") {
+            onMustahsinClicked(); // This function is to be provided by the parent component
+        }
+    };
+
+    return (
+        <div className={`flex flex-col items-center w-64 rounded-lg`}>
+            <img
+                className="w-26 h-auto sm:h-64 object-cover rounded-3xl cursor-pointer"
+                src={picture}
+                alt={`Picture of ${name}`}
+                onClick={handleImageClick}
+            />
+            <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>
-    </div>
-);
+    );
+};
 
 export default OfficerCard;
diff --git a/src/components/react/OfficerTabs.jsx b/src/components/react/OfficerTabs.jsx
index 4f1138d..8e4fede 100644
--- a/src/components/react/OfficerTabs.jsx
+++ b/src/components/react/OfficerTabs.jsx
@@ -4,6 +4,8 @@ import { AnimatePresence } from "framer-motion";
 
 const OfficerTabs = ({ officers }) => {
     const [selectedType, setSelectedType] = useState("All");
+    const [mustahsinClickCount, setMustahsinClickCount] = useState(0);
+    const [useMustahsinImage, setUseMustahsinImage] = useState(false);
 
     const uniqueTypes = [
         "All",
@@ -17,6 +19,15 @@ const OfficerTabs = ({ officers }) => {
                   officer.type?.includes(selectedType)
               );
 
+    const handleMustahsinClicked = () => {
+        const newCount = mustahsinClickCount + 1;
+        setMustahsinClickCount(newCount);
+
+        if (newCount >= 5) {
+            setUseMustahsinImage(true);
+        }
+    };
+
     return (
         <div>
             <div className="tabs flex justify-center items-center">
@@ -40,7 +51,16 @@ const OfficerTabs = ({ officers }) => {
                 className="officers flex-row flex flex-wrap items-center justify-center space-x-16 p-12"
             >
                 {filteredOfficers.map((officer) => (
-                    <OfficerCard key={officer.email} {...officer} />
+                    <OfficerCard
+                        key={officer.email}
+                        {...officer}
+                        picture={
+                            useMustahsinImage
+                                ? "/officers/mustahsin.jpg"
+                                : officer.picture
+                        }
+                        onMustahsinClicked={handleMustahsinClicked}
+                    />
                 ))}
             </div>
         </div>