diff --git a/pages/profile/[address].vue b/pages/profile/[address].vue
index 00ed711..1d1bd7d 100644
--- a/pages/profile/[address].vue
+++ b/pages/profile/[address].vue
@@ -15,7 +15,9 @@
           <h3>Followers: {{ userProfile.followerCount }}</h3>
           <h3>Following: {{ userProfile.followingCount }}</h3>
         </div>
-        <button v-if="!myProfile" class="follow-button" @click="followUser">Follow</button>
+        <button v-if="!myProfile" class="follow-button" @click="toggleFollow">
+          {{ userProfile.isFollowed ? 'Unfollow' : 'Follow' }}
+        </button>
       </div>
     </div>
     <hr class="mt-6 border-t border-gray-500" />
@@ -60,6 +62,26 @@ const fetchUserProfile = async () => {
   }
 };
 
+const toggleFollow = async () => {
+  if (userProfile.value.isFollowed) {
+    userProfile.value.isFollowed = false;
+    await unfollowUser();
+  } else {
+    userProfile.value.isFollowed = true;
+    await followUser();
+  }
+};
+
+const unfollowUser = async () => {
+  await $fetch(`/api/user/${route.params.address}/following`, {
+    method: 'DELETE',
+    headers: {
+      Authorization: `Bearer ${accountStore.accessToken}`,
+    },
+  });
+  fetchUserProfile(); // Re-fetch or adjust local state to show updated follower count
+};
+
 const followUser = async () => {
   await $fetch(`/api/user/${route.params.address}/following`, {
     method: 'POST',