diff --git a/src/components/CardTabs/Users/UserElement.jsx b/src/components/CardTabs/Users/UserElement.jsx
index 2a6c2a9c..3b216623 100644
--- a/src/components/CardTabs/Users/UserElement.jsx
+++ b/src/components/CardTabs/Users/UserElement.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Box from "@mui/material/Box";
 import AddUser from "../../../assets/images/add-user.svg";
 import CheckUser from "../../../assets/images/square-check-regular.svg";
@@ -6,6 +6,31 @@ import CheckUser from "../../../assets/images/square-check-regular.svg";
 const UserElement = ({ user, index, useStyles }) => {
   const classes = useStyles();
   const [icon, setIcon] = useState(true);
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const isFollowing = await user.onClick.isUserFollower();
+        setIcon(!isFollowing);
+      } catch (error) {
+        console.error("Error fetching follower status:", error);
+      }
+    };
+    fetchData();
+  }, [icon]);
+  const handleUserClick = async event => {
+    event.preventDefault();
+    try {
+      let isFollowing = await user.onClick.isUserFollower();
+      if (isFollowing) {
+        await user.onClick.removeUserFollower();
+      } else {
+        await user.onClick.addUserFollower();
+      }
+      setIcon(isFollowing);
+    } catch (error) {
+      console.error("Error toggling follower status:", error);
+    }
+  };
   return (
     <Box
       sx={{
@@ -46,15 +71,9 @@ const UserElement = ({ user, index, useStyles }) => {
         </Box>
       </Box>
       <Box
-        onClick={() => {
-          setIcon(false);
-        }}
+        onClick={handleUserClick}
         data-testId={index == 0 ? "UserAdd" : ""}
-        sx={
-          icon && {
-            cursor: "pointer"
-          }
-        }
+        sx={icon && { cursor: "pointer" }}
       >
         <img src={icon ? AddUser : CheckUser} />
       </Box>
diff --git a/src/components/HomePage/index.jsx b/src/components/HomePage/index.jsx
index e8190e6b..0ee0ad0b 100644
--- a/src/components/HomePage/index.jsx
+++ b/src/components/HomePage/index.jsx
@@ -37,6 +37,11 @@ import {
   getTutorialFeedData,
   getTutorialFeedIdArray
 } from "../../store/actions/tutorialPageActions";
+import { addUserFollower } from "../../store/actions";
+import {
+  isUserFollower,
+  removeUserFollower
+} from "../../store/actions/profileActions";
 
 function HomePage({ background = "white", textColor = "black" }) {
   const classes = useStyles();
@@ -109,31 +114,75 @@ function HomePage({ background = "white", textColor = "black" }) {
     "Python",
     "React"
   ]);
-
+  const profileToFollowData = {
+    // displayName: "SouGatariju"
+    // email: "sougatariju13@gmail.com"
+    uid: "850pPlsLaCg6JjmrKjOu6JqRPwhb"
+  };
+  const profileData = useSelector(({ firebase: { profile } }) => profile);
+  useEffect(() => {
+    const getFeed = async () => {
+      const tutorialIdArray = await getTutorialFeedIdArray(profileData.uid)(
+        firebase,
+        firestore,
+        dispatch
+      );
+      getTutorialFeedData(tutorialIdArray)(firebase, firestore, dispatch);
+    };
+    getFeed();
+  }, []);
   const [usersToFollow, setUsersToFollow] = useState([
     {
       name: "Janvi Thakkar",
       img: [OrgUser],
       desg: "Software Engineer",
-      onClick: {}
+      onClick: {
+        addUserFollower: () =>
+          addUserFollower(profileData, profileToFollowData, firestore),
+        isUserFollower: () =>
+          isUserFollower(profileData.uid, profileToFollowData.uid, firestore),
+        removeUserFollower: () =>
+          removeUserFollower(profileData, profileToFollowData, firestore)
+      }
     },
     {
       name: "Janvi Thakkar",
       img: [OrgUser],
       desg: "Software Engineer",
-      onClick: {}
+      onClick: {
+        addUserFollower: () =>
+          addUserFollower(profileData, profileToFollowData, firestore),
+        isUserFollower: () =>
+          isUserFollower(profileData.uid, profileToFollowData.uid, firestore),
+        removeUserFollower: () =>
+          removeUserFollower(profileData, profileToFollowData, firestore)
+      }
     },
     {
       name: "Janvi Thakkar",
       img: [OrgUser],
       desg: "Software Engineer",
-      onClick: {}
+      onClick: {
+        addUserFollower: () =>
+          addUserFollower(profileData, profileToFollowData, firestore),
+        isUserFollower: () =>
+          isUserFollower(profileData.uid, profileToFollowData.uid, firestore),
+        removeUserFollower: () =>
+          removeUserFollower(profileData, profileToFollowData, firestore)
+      }
     },
     {
       name: "Janvi Thakkar",
       img: [OrgUser],
       desg: "Software Engineer",
-      onClick: {}
+      onClick: {
+        addUserFollower: () =>
+          addUserFollower(profileData, profileToFollowData, firestore),
+        isUserFollower: () =>
+          isUserFollower(profileData.uid, profileToFollowData.uid, firestore),
+        removeUserFollower: () =>
+          removeUserFollower(profileData, profileToFollowData, firestore)
+      }
     }
   ]);
 
@@ -142,40 +191,55 @@ function HomePage({ background = "white", textColor = "black" }) {
       name: "Janvi Thakkar",
       img: [OrgUser],
       desg: "Software Engineer",
-      onClick: {}
+      onClick: {
+        addUserFollower: () =>
+          addUserFollower(profileData, profileToFollowData, firestore),
+        isUserFollower: () =>
+          isUserFollower(profileData.uid, profileToFollowData.uid, firestore),
+        removeUserFollower: () =>
+          removeUserFollower(profileData, profileToFollowData, firestore)
+      }
     },
     {
       name: "Janvi Thakkar",
       img: [OrgUser],
       desg: "Software Engineer",
-      onClick: {}
+      onClick: {
+        addUserFollower: () =>
+          addUserFollower(profileData, profileToFollowData, firestore),
+        isUserFollower: () =>
+          isUserFollower(profileData.uid, profileToFollowData.uid, firestore),
+        removeUserFollower: () =>
+          removeUserFollower(profileData, profileToFollowData, firestore)
+      }
     },
     {
       name: "Janvi Thakkar",
       img: [OrgUser],
       desg: "Software Engineer",
-      onClick: {}
+      onClick: {
+        addUserFollower: () =>
+          addUserFollower(profileData, profileToFollowData, firestore),
+        isUserFollower: () =>
+          isUserFollower(profileData.uid, profileToFollowData.uid, firestore),
+        removeUserFollower: () =>
+          removeUserFollower(profileData, profileToFollowData, firestore)
+      }
     },
     {
       name: "Janvi Thakkar",
       img: [OrgUser],
       desg: "Software Engineer",
-      onClick: {}
+      onClick: {
+        addUserFollower: () =>
+          addUserFollower(profileData, profileToFollowData, firestore),
+        isUserFollower: () =>
+          isUserFollower(profileData.uid, profileToFollowData.uid, firestore),
+        removeUserFollower: () =>
+          removeUserFollower(profileData, profileToFollowData, firestore)
+      }
     }
   ]);
-
-  const profileData = useSelector(({ firebase: { profile } }) => profile);
-  useEffect(() => {
-    const getFeed = async () => {
-      const tutorialIdArray = await getTutorialFeedIdArray(profileData.uid)(
-        firebase,
-        firestore,
-        dispatch
-      );
-      getTutorialFeedData(tutorialIdArray)(firebase, firestore, dispatch);
-    };
-    getFeed();
-  }, []);
   const tutorials = useSelector(
     ({
       tutorialPage: {
diff --git a/src/store/actions/profileActions.js b/src/store/actions/profileActions.js
index c3a96c31..9f785df2 100644
--- a/src/store/actions/profileActions.js
+++ b/src/store/actions/profileActions.js
@@ -195,6 +195,7 @@ export const isUserFollower = async (followerId, followingId, firestore) => {
     .collection("user_followers")
     .doc(`${followingId}_${followerId}`)
     .get();
+    console.log("Is User follower ran!!!",followerDoc.exists)
   return followerDoc.exists;
 };
 
@@ -209,7 +210,9 @@ export const addUserFollower = async (
       profileData.uid,
       firestore
     );
+    console.log("Add User Follow ran!!!")
     if (followStatus === false) {
+      console.log("New Follower")
       await firestore
         .collection("user_followers")
         .doc(`${profileData.uid}_${currentProfileData.uid}`)
@@ -252,7 +255,9 @@ export const removeUserFollower = async (
       profileData.uid,
       firestore
     );
+    console.log("Remove User Follow ran!!!")
     if (followStatus === true) {
+      console.log("Removing the follower")
       await firestore
         .collection("user_followers")
         .doc(`${profileData.uid}_${currentProfileData.uid}`)
@@ -276,6 +281,7 @@ export const removeUserFollower = async (
             : 0
         });
     }
+    console.log("Remove User Follow ran!!!")
   } catch (e) {
     console.log(e);
   }