diff --git a/client/src/Pages/Profile/Profile.jsx b/client/src/Pages/Profile/Profile.jsx
index 23078c1..c7d3a1f 100644
--- a/client/src/Pages/Profile/Profile.jsx
+++ b/client/src/Pages/Profile/Profile.jsx
@@ -28,8 +28,6 @@ import Loader from "../../components/Loader/Loader.jsx";
 
 const Profile = () => {
     const dispatch = useDispatch();
-    const location = useLocation();
-    const navigate = useNavigate();
     const current_user = useSelector(state => state.auth.auth)
     const [reload, setReload] = useState(0);
     const [followReload, setFollowReload] = useState(0);
@@ -187,63 +185,93 @@ const Profile = () => {
             });
         }
     }
-
+    const [isSendingFR,setisSendingFR]=useState(false);
     const handleSendFollowRequest = async () => {
-        const data = await usePostFetch('/sendfrequest', { userId: user?._id });
-
-        if (data.data && data.data.success) {
-            setSendfr(true);
-        }
-        else if (data.data) {
-            toast.warn(data.data.error || data.data.message, {
-                position: "top-right"
-            });
-        }
-        else {
-            console.log(data);
-            toast.error(data.error, {
+        if(isSendingFR) return ;
+        try {
+            setisSendingFR(true);
+            const data = await usePostFetch('/sendfrequest', { userId: user?._id });
+    
+            if (data.data && data.data.success) {
+                setSendfr(true);
+            }
+            else if (data.data) {
+                toast.warn(data.data.error || data.data.message, {
+                    position: "top-right"
+                });
+            }
+            else {
+                console.log(data);
+                toast.error(data.error, {
+                    position: "top-right"
+                });
+            }
+    
+        } catch (error) {
+            toast.error(error.message || "Something went wrong!", {
                 position: "top-right"
             });
+        }finally{
+            setisSendingFR(false);
         }
-
     }
 
     const handleWithdrawFollowRequest = async () => {
-        const data = await usePostFetch('/withdraw-request', { userId: user?._id });
-        if (data.data && data.data.success) {
-            // console.log(data.msg); toastify
-            setSendfr(false);
-        }
-        else if (data.data) {
-            toast.warn(data.data.error || data.data.message, {
-                position: "top-right"
-            });
-        }
-        else {
-            console.log(data);
-            toast.error(data.error, {
+        if(isSendingFR) return ;
+       try {
+            setisSendingFR(true);
+         const data = await usePostFetch('/withdraw-request', { userId: user?._id });
+         if (data.data && data.data.success) {
+             // console.log(data.msg); toastify
+             setSendfr(false);
+         }
+         else if (data.data) {
+             toast.warn(data.data.error || data.data.message, {
+                 position: "top-right"
+             });
+         }
+         else {
+             console.log(data);
+             toast.error(data.error, {
+                 position: "top-right"
+             });
+         }
+       }catch (error) {
+            toast.error(error.message || "Something went wrong!", {
                 position: "top-right"
             });
-        }
+       }finally{
+            setisSendingFR(false);
+       }
     }
     const handleUnfollow = async () => {
-        const data = await usePostFetch('/unfollow', { userId: user?._id });
-
-        if (data.data && data.data.success) {
-            // console.log(data.msg); toastify
-            setReload(prev => prev + 1);
-            dispatch(setAuth(data.data.curr_user));
-        }
-        else if (data.data) {
-            toast.warn(data.data.error || data.data.message, {
-                position: "top-right"
-            });
-        }
-        else {
-            console.log(data);
-            toast.error(data.error, {
+        if(isSendingFR) return ;
+       try {
+            setisSendingFR(true);
+         const data = await usePostFetch('/unfollow', { userId: user?._id });
+ 
+         if (data.data && data.data.success) {
+             // console.log(data.msg); toastify
+             setReload(prev => prev + 1);
+             dispatch(setAuth(data.data.curr_user));
+         }
+         else if (data.data) {
+             toast.warn(data.data.error || data.data.message, {
+                 position: "top-right"
+             });
+         }
+         else {
+             console.log(data);
+             toast.error(data.error, {
+                 position: "top-right"
+             });
+         }
+       }catch (error) {
+            toast.error(error.message || "Something went wrong!", {
                 position: "top-right"
             });
+        }finally{
+            setisSendingFR(false);
         }
 
     }
@@ -355,7 +383,16 @@ const Profile = () => {
                                         <button className={`${(isFollowing || isRequested || sendfr) ? "isFollowing" : ""} btn`}
                                             onClick={(isRequested || sendfr) ? handleWithdrawFollowRequest : (isFollowing ? handleUnfollow : handleSendFollowRequest)}
                                         >
-                                            {(isRequested || sendfr) ? "Requested" : (isFollowing ? "Following" : "Follow")}
+                                         {isSendingFR ?
+                                         <>
+                                            <ClipLoader
+                                            color="#ffffff"
+                                            className="icon"
+                                            size={16}
+                                            speedMultiplier={1}
+                                            />
+                                        </>
+                                            : ((isRequested || sendfr) ? "Requested" : (isFollowing ? "Following" : "Follow"))}
                                         </button>
                                     </div>
                                 )}
diff --git a/client/src/components/Navbar/RequestBox.jsx b/client/src/components/Navbar/RequestBox.jsx
index b8bb864..4ad7579 100644
--- a/client/src/components/Navbar/RequestBox.jsx
+++ b/client/src/components/Navbar/RequestBox.jsx
@@ -9,6 +9,7 @@ import usePostFetch from "../../hooks/usePostFetch";
 import { Link } from "react-router-dom";
 import { toast } from "react-toastify";
 import ContentLoader from "react-content-loader"
+import { ClipLoader } from "react-spinners";
 
 const RequestBox = () => {
   const [reload, setReload] = useState(0);
@@ -19,94 +20,138 @@ const RequestBox = () => {
 
   const { data, loading, error } = useFetch("/get-requests", true, reload);
 
+  const [isProcessing,setisProcessing]=useState(false);
   const handleacceptFrequest = async (reqId) => {
-    const data = await usePostFetch("/acceptfrequest", { reqId });
+    if(isProcessing) return ;
 
-    if (data.data && data.data.curr_user) {
-      dispatch(setAuth(data.data.curr_user));
-      // setReload((prev) => prev + 1);
-      setAcceptFr(true);
-    } else if (data.data) {
-      toast.warn(data.data.error || data.data.message, {
-        position: "top-right"
-      });
-    } else {
-      console.log(data);
-      toast.error(data.error, {
-        position: "top-right"
+    try {
+      setisProcessing(true);
+      const data = await usePostFetch("/acceptfrequest", { reqId });
+  
+      if (data.data && data.data.curr_user) {
+        dispatch(setAuth(data.data.curr_user));
+        // setReload((prev) => prev + 1);
+        setAcceptFr(true);
+      } else if (data.data) {
+        toast.warn(data.data.error || data.data.message, {
+          position: "top-right"
+        });
+      } else {
+        console.log(data);
+        toast.error(data.error, {
+          position: "top-right"
+        });
+      }
+    }catch (error) {
+      toast.error(error.message || "Something went wrong!", {
+          position: "top-right"
       });
+    }finally{
+       setisProcessing(false);
     }
+
   };
 
   const handlerejectFrequest = async (reqId) => {
-    const data = await usePostFetch("/rejectfrequest", { reqId });
-    if (data.data && data.data.curr_user) {
-      dispatch(setAuth(data.data.curr_user));
-      setReload((prev) => prev + 1);
-    } else if (data.data) {
-      toast.warn(data.data.error || data.data.message, {
-        position: "top-right"
-      });
-    } else {
-      console.log(data);
-      toast.error(data.error, {
-        position: "top-right"
-      });
-    }
+      const data = await usePostFetch("/rejectfrequest", { reqId });
+      if (data.data && data.data.curr_user) {
+        dispatch(setAuth(data.data.curr_user));
+        setReload((prev) => prev + 1);
+      } else if (data.data) {
+        toast.warn(data.data.error || data.data.message, {
+          position: "top-right"
+        });
+      } else {
+        console.log(data);
+        toast.error(data.error, {
+          position: "top-right"
+        });
+      }
+    
   };
 
   const handleSendFollowRequest = async (userId) => {
-    const data = await usePostFetch("/sendfrequest", { userId });
-
-    if (data.data && data.data.success) {
-      setSendfr(true);
-    } else if (data.data) {
-      toast.warn(data.data.error || data.data.message, {
-        position: "top-right"
-      });
-    } else {
-      console.log(data);
-      toast.error(data.error, {
-        position: "top-right"
+    if(isProcessing) return ;
+    try {
+      setisProcessing(true);
+      const data = await usePostFetch("/sendfrequest", { userId });
+  
+      if (data.data && data.data.success) {
+        setSendfr(true);
+      } else if (data.data) {
+        toast.warn(data.data.error || data.data.message, {
+          position: "top-right"
+        });
+      } else {
+        console.log(data);
+        toast.error(data.error, {
+          position: "top-right"
+        });
+      }
+    }catch (error) {
+      toast.error(error.message || "Something went wrong!", {
+          position: "top-right"
       });
+    }finally{
+       setisProcessing(false);
     }
   };
 
   const handleWithdrawFollowRequest = async (userId) => {
-    const data = await usePostFetch("/withdraw-request", {
-      userId,
-    });
-    if (data.data && data.data.success) {
-      // console.log(data.msg); toastify
-      setSendfr(false);
-    } else if (data.data) {
-      toast.warn(data.data.error || data.data.message, {
-        position: "top-right"
+    if(isProcessing) return;
+    try {
+      setisProcessing(true);
+      const data = await usePostFetch("/withdraw-request", {
+        userId,
       });
-    } else {
-      console.log(data);
-      toast.error(data.error, {
-        position: "top-right"
+      if (data.data && data.data.success) {
+        // console.log(data.msg); toastify
+        setSendfr(false);
+      } else if (data.data) {
+        toast.warn(data.data.error || data.data.message, {
+          position: "top-right"
+        });
+      } else {
+        console.log(data);
+        toast.error(data.error, {
+          position: "top-right"
+        });
+      }
+    }catch (error) {
+      toast.error(error.message || "Something went wrong!", {
+          position: "top-right"
       });
+    }finally{
+       setisProcessing(false);
     }
   };
 
   const handleUnfollow = async (userId) => {
-    const data = await usePostFetch("/unfollow", { userId });
-
-    if (data.data && data.data.success) {
-      // console.log(data.msg); toastify
-      setFollow(false);
-      dispatch(setAuth(data.data.curr_user));
-    } else if (data.data) {
-      toast.warn(data.data.error || data.data.message, {
-        position: "top-right"
-      });
-    } else {
-      console.log(data);
-      toast.error(data.error, {
-        position: "top-right"
+    if(isProcessing) return ;
+   try {
+    setisProcessing(true);
+     const data = await usePostFetch("/unfollow", { userId });
+ 
+     if (data.data && data.data.success) {
+       // console.log(data.msg); toastify
+       setFollow(false);
+       dispatch(setAuth(data.data.curr_user));
+     } else if (data.data) {
+       toast.warn(data.data.error || data.data.message, {
+         position: "top-right"
+       });
+     } else {
+       console.log(data);
+       toast.error(data.error, {
+         position: "top-right"
+       });
+     }
+    }catch (error) {
+      toast.error(error.message || "Something went wrong!", {
+          position: "top-right"
       });
+    }finally{
+      setisProcessing(false);
     }
   };
 
@@ -119,9 +164,9 @@ const RequestBox = () => {
           <div className="skeleton">
             <ContentLoader
               speed={1}
-              width={288}
+              width={352}
               height={35}
-              viewBox="0 0 288 35"
+              viewBox="0 0 352 35"
               backgroundColor="#222222"
               foregroundColor="#333333"
             >
@@ -176,13 +221,25 @@ const RequestBox = () => {
                           : "follow_back"
                       : "accept"}
                   >
-                    {acceptfr
-                      ? (follow && f.isfollowing)
-                        ? "Following"
-                        : sendfr
-                          ? "Requested"
-                          : "Follow back"
-                      : "Accept"}
+                    {
+                      isProcessing ?
+                      <>
+                        <ClipLoader
+                          color="#ffffff"
+                          className="icon"
+                          size={16}
+                          speedMultiplier={1}
+                        />
+                      </> :
+                      (acceptfr
+                        ? (follow && f.isfollowing)
+                          ? "Following"
+                          : sendfr
+                            ? "Requested"
+                            : "Follow back"
+                        : "Accept")
+                    }
+                    
                   </div>
                   {!acceptfr && (
                     <div
@@ -191,7 +248,7 @@ const RequestBox = () => {
                       }}
                       className="reject"
                     >
-                      <RxCross2 />
+                      <RxCross2 />                      
                     </div>
                   )}
                 </div>
diff --git a/client/src/components/Navbar/RequestBox.scss b/client/src/components/Navbar/RequestBox.scss
index 81a59e2..6ec076e 100644
--- a/client/src/components/Navbar/RequestBox.scss
+++ b/client/src/components/Navbar/RequestBox.scss
@@ -15,7 +15,7 @@ $darkpurple: #814fff;
     gap: 0.7rem;
     padding: 0.5rem;
     background-color: $grey;
-    width: 18rem;
+    width: 22rem;
     max-height: 20rem;
     border-radius: 0.5rem;
 
@@ -127,7 +127,7 @@ $darkpurple: #814fff;
         padding: 0.6rem;
     }
 
-    @media (max-width:400px) {
-        right: 0;
+    @media (max-width:440px) {
+        right: -4rem;
     }
 }
\ No newline at end of file