diff --git a/src/app/page.js b/src/app/page.js
index e34d782..8c1265f 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -17,20 +17,16 @@ export default function Home() {
           <div className="flex flex-col col-span-2 justify-center p-4">
             <h3 className="text-xl font-semibold text-center">MP</h3>
             <hr className="border-gray/70 my-2" />
-            <h4 className="text-lg text-center mb-2">First MP Name</h4>
-            <p className="text-gray/80 text-md text-center">
-              Due Sep 15th, 23:59 CST
-            </p>
+            <h4 className="text-lg text-center mb-2">Come back later!</h4>
+            <p className="text-gray/80 text-md text-center">In the future</p>
           </div>
         </div>
         <div className="border-4 border-yellow-500 rounded-lg shadow-md w-80 h-40  ml-12">
           <div className="flex flex-col col-span-2 justify-center p-4">
             <h3 className="text-xl font-semibold text-center">Lab</h3>
             <hr className="border-gray/70 my-2" />
-            <h4 className="text-lg text-center mb-2">First Lab Name</h4>
-            <p className="text-gray/80 text-md text-center">
-              Due Sep 15th, 23:59 CST
-            </p>
+            <h4 className="text-lg text-center mb-2">Come back later!</h4>
+            <p className="text-gray/80 text-md text-center">In the future</p>
           </div>
         </div>
       </div>
diff --git a/src/app/support/StaffCard.js b/src/app/support/StaffCard.js
new file mode 100644
index 0000000..8c918b8
--- /dev/null
+++ b/src/app/support/StaffCard.js
@@ -0,0 +1,56 @@
+import Image from "next/image";
+import Tooltip from "./Tooltip";
+
+import squ from "public/profile_img/squ.jpg";
+
+const StaffCard = () => {
+  return (
+    <div className="flex flex-col col-span-1  justify-center bg-white p-4 rounded-lg shadow-md w-60">
+      <div>
+        <Image
+          src={squ}
+          alt="Profile Image"
+          className="w-60 h-60 rounded-md mb-2"
+          width={60}
+          height={60}
+        />
+      </div>
+      <div>
+        <h3 className="text-lg font-semibold">Squirrel Snow</h3>
+        <h4 className="text-gray-700 text-md">She/Her</h4>
+        <hr className="border-gray-700 my-2" />
+      </div>
+      <div className="flex items-center justify-around space-x-2">
+        <Tooltip text="Loves painting">
+          <span
+            role="img"
+            aria-label="hobby1"
+            className="text-2xl cursor-pointer"
+          >
+            🎨
+          </span>
+        </Tooltip>
+        <Tooltip text="Avid reader">
+          <span
+            role="img"
+            aria-label="hobby2"
+            className="text-2xl cursor-pointer"
+          >
+            📚
+          </span>
+        </Tooltip>
+        <Tooltip text="Enjoys running">
+          <span
+            role="img"
+            aria-label="hobby3"
+            className="text-2xl cursor-pointer"
+          >
+            🏃‍♀️
+          </span>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+
+export default StaffCard;
diff --git a/src/app/support/Tooltip.js b/src/app/support/Tooltip.js
new file mode 100644
index 0000000..1c7a1b9
--- /dev/null
+++ b/src/app/support/Tooltip.js
@@ -0,0 +1,37 @@
+"use client";
+
+import { useState } from "react";
+
+const Tooltip = ({ text, children }) => {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [hoverTimeout, setHoverTimeout] = useState(null);
+
+  const handleMouseEnter = () => {
+    const timeout = setTimeout(() => {
+      setShowTooltip(true);
+    }, 1000); // 1 second
+    setHoverTimeout(timeout);
+  };
+
+  const handleMouseLeave = () => {
+    clearTimeout(hoverTimeout);
+    setShowTooltip(false);
+  };
+
+  return (
+    <div
+      className="relative inline-block"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {children}
+      {showTooltip && (
+        <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-32 bg-black text-white text-center text-sm rounded py-1 px-2 ">
+          {text}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Tooltip;
diff --git a/src/app/support/page.js b/src/app/support/page.js
index 09ec003..a52f989 100644
--- a/src/app/support/page.js
+++ b/src/app/support/page.js
@@ -2,6 +2,7 @@ import Image from "next/image";
 import React from "react";
 
 import squ from "public/profile_img/squ.jpg";
+import StaffCard from "./StaffCard";
 
 const SupportPage = () => {
   return (
@@ -72,99 +73,9 @@ const SupportPage = () => {
               Meet Staffs
             </h1>
             <div className="grid grid-cols-3 gap-4">
-              <div className="flex flex-col col-span-1  justify-center bg-white p-4 rounded-lg shadow-md w-60">
-                <div>
-                  <Image
-                    src={squ}
-                    alt="Profile Image"
-                    className="w-60 h-60 rounded-md mb-2"
-                    width={60}
-                    height={60}
-                  />
-                </div>
-                <div>
-                  <h3 className="text-lg font-semibold ">Squirrel Snow</h3>
-                  <h4 className="text-gray/70 text-md">She/Her</h4>
-                  <hr className="border-gray/70 my-2" />
-                </div>
-                <div className="flex items-center justify-around space-x-2">
-                  <span role="img" aria-label="hobby1" className="text-2xl">
-                    🎨
-                  </span>{" "}
-                  {/* Example emoji for hobby */}
-                  <span role="img" aria-label="hobby2" className="text-2xl">
-                    📚
-                  </span>{" "}
-                  {/* Example emoji for hobby */}
-                  <span role="img" aria-label="hobby3" className="text-2xl">
-                    🏃‍♀️
-                  </span>{" "}
-                  {/* Example emoji for hobby */}
-                </div>
-                {/* <div className="flex items-center justify-center"></div> */}
-              </div>
-              <div className="flex flex-col col-span-1  justify-center bg-white p-4 rounded-lg shadow-md w-60">
-                <div>
-                  <Image
-                    src={squ}
-                    alt="Profile Image"
-                    className="w-60 h-60 rounded-md mb-2"
-                    width={60}
-                    height={60}
-                  />
-                </div>
-                <div>
-                  <h3 className="text-lg font-semibold ">Squirrel Snow</h3>
-                  <h4 className="text-gray/70 text-md">She/Her</h4>
-                  <hr className="border-gray/70 my-2" />
-                </div>
-                <div className="flex items-center justify-around space-x-2">
-                  <span role="img" aria-label="hobby1" className="text-2xl">
-                    🎨
-                  </span>{" "}
-                  {/* Example emoji for hobby */}
-                  <span role="img" aria-label="hobby2" className="text-2xl">
-                    📚
-                  </span>{" "}
-                  {/* Example emoji for hobby */}
-                  <span role="img" aria-label="hobby3" className="text-2xl">
-                    🏃‍♀️
-                  </span>{" "}
-                  {/* Example emoji for hobby */}
-                </div>
-                {/* <div className="flex items-center justify-center"></div> */}
-              </div>
-              <div className="flex flex-col col-span-1  justify-center bg-white p-4 rounded-lg shadow-md w-60">
-                <div>
-                  <Image
-                    src={squ}
-                    alt="Profile Image"
-                    className="w-60 h-60 rounded-md mb-2"
-                    width={60}
-                    height={60}
-                  />
-                </div>
-                <div>
-                  <h3 className="text-lg font-semibold ">Squirrel Snow</h3>
-                  <h4 className="text-gray/70 text-md">She/Her</h4>
-                  <hr className="border-gray/70 my-2" />
-                </div>
-                <div className="flex items-center justify-around space-x-2">
-                  <span role="img" aria-label="hobby1" className="text-2xl">
-                    🎨
-                  </span>{" "}
-                  {/* Example emoji for hobby */}
-                  <span role="img" aria-label="hobby2" className="text-2xl">
-                    📚
-                  </span>{" "}
-                  {/* Example emoji for hobby */}
-                  <span role="img" aria-label="hobby3" className="text-2xl">
-                    🏃‍♀️
-                  </span>{" "}
-                  {/* Example emoji for hobby */}
-                </div>
-                {/* <div className="flex items-center justify-center"></div> */}
-              </div>
+              <StaffCard />
+              <StaffCard />
+              <StaffCard />
             </div>
           </div>
         </div>