diff --git a/frontend/src/components/Input/FollowButton.tsx b/frontend/src/components/Input/FollowButton.tsx
index 7f75c62..1f92b3e 100644
--- a/frontend/src/components/Input/FollowButton.tsx
+++ b/frontend/src/components/Input/FollowButton.tsx
@@ -16,6 +16,8 @@ const FollowButton: React.FC<FollowButtonProps> = ({ category }) => {
     const [isFollowing, setIsFollowing] = useState<boolean | null>(category.isFollowing);
     const [isLoading, setIsLoading] = useState(false);
     const { followCategory, unfollowCategory } = useCategoryFollow();
+    const [showTip, setTip] = useState(false);
+
 
     useEffect(() => {
         setIsFollowing(category.isFollowing);
@@ -30,7 +32,7 @@ const FollowButton: React.FC<FollowButtonProps> = ({ category }) => {
             setMode((prevMode) => {
                 if (prevMode === "pencil") return "minus";
                 if (prevMode === "minus") return "plus";
-                return "minus"; 
+                return "minus";
             });
         } catch (error) {
             console.error("Error toggling state:", error);
@@ -52,21 +54,44 @@ const FollowButton: React.FC<FollowButtonProps> = ({ category }) => {
     };
 
     return (
-        <button
-            className="absolute top-2 right-2 bg-black bg-opacity-50 p-2 rounded-full hover:bg-opacity-75 transition z-[1]"
-            onClick={handleClick}
-            disabled={isLoading}
-        >
-                       {isLoading ? (
-                <span className="text-white w-5 h-5">⏳</span>
-            ) : mode === "pencil" ? (
-                <Pencil className="text-white w-5 h-5" />
-            ) : mode === "minus" ? (
-                <CircleMinus className="text-white w-5 h-5" />
-            ) : (
-                <CirclePlus className="text-white w-5 h-5" />
+        <div>
+            <button
+                className="absolute top-2 right-2 bg-black bg-opacity-50 p-2 rounded-full hover:bg-opacity-75 transition z-[1]"
+                onClick={handleClick}
+                disabled={isLoading}
+                onMouseEnter={() => setTip(true)}
+                onMouseLeave={() => setTip(false)}
+            >
+                {isLoading ? (
+                    <span className="text-white w-5 h-5">⏳</span>
+                ) : mode === "pencil" ? (
+                    <Pencil className="text-white w-5 h-5" />
+                ) : mode === "minus" ? (
+                    <CircleMinus className="text-white w-5 h-5" />
+                ) : (
+                    <CirclePlus className="text-white w-5 h-5" />
+                )}
+            </button>
+
+            {/* Tooltip */}
+            {showTip && mode === "pencil" && (
+                <div className="absolute top-10 right-0 bg-gray-900 text-white text-xs px-2 py-1 rounded shadow-md">
+                    Edit category
+                </div>
             )}
-        </button>
+
+            {showTip && mode === "minus" && (
+                <div className="absolute top-10 right-0 bg-gray-900 text-white text-xs px-2 py-1 rounded shadow-md">
+                    Unfollow Category
+                </div>
+            )}
+
+            {showTip && mode === "plus" && (
+                <div className="absolute top-10 right-0 bg-gray-900 text-white text-xs px-2 py-1 rounded shadow-md">
+                    Follow Category
+                </div>
+            )}
+        </div>
     );
 };
 export default FollowButton;