diff --git a/API/Apps/Profile/api/Serializers.py b/API/Apps/Profile/api/Serializers.py
index 54e31581..4596c257 100644
--- a/API/Apps/Profile/api/Serializers.py
+++ b/API/Apps/Profile/api/Serializers.py
@@ -27,7 +27,7 @@ class ProfileFriendsSerializer(serializers.ModelSerializer):
 
     class Meta:
         model = Profile
-        fields = ['friends', 'nickname', 'user', 'profile_picture']
+        fields = ['friends', 'nickname', 'user', 'profile_picture', "id"]
 
 
 class ProfileStatsSerializer(serializers.ModelSerializer):
diff --git a/API/Apps/Profile/api/views.py b/API/Apps/Profile/api/views.py
index c8bdf47f..e49ea7b3 100644
--- a/API/Apps/Profile/api/views.py
+++ b/API/Apps/Profile/api/views.py
@@ -165,8 +165,6 @@ def post(self, request):
 class ProfileBlockedUsersView(APIView):
     def get(self, request):
         profile = request.user.profile
-        if not profile:
-            return Response({"error": "Profile not found"}, status=404)
         serializer = ProfileFriendsSerializer(profile.blocked_users, many=True)
         return Response(serializer.data, status=200)
 
diff --git a/API/static/scripts/profile.js b/API/static/scripts/profile.js
index c55315a9..7c198e32 100644
--- a/API/static/scripts/profile.js
+++ b/API/static/scripts/profile.js
@@ -4,7 +4,6 @@ import { notify } from "../components/Notification.js";
 import { request } from "./Request.js";
 import {calculateDate, escapeHTML, getActiveUserNickname} from "./utils.js";
 
-
 class History extends BaseComponent {
     constructor(state, parentElement = null) {
         super(state, parentElement);
@@ -46,27 +45,54 @@ class BlockedUsers extends BaseComponent {
         super(state, parentElement);
         this.html = this.handleHTML();
     }
+
+    async removeBlockedUser(id, index) {
+        try {
+            let data = await request('profile/block-users/', {
+                method: "POST",
+                body: JSON.stringify({
+                    profile_id: id
+                })
+            });
+            let wrapper = document.getElementById(`${index}-blocked-user-wrapper`)
+
+            wrapper.remove()
+            return data;
+        } catch (error) {
+            console.error('Error:', error);
+            notify('Error fetching friends', 3, 'error');
+        }
+    }
+
     handleHTML() {
         return `
         <div class="blocked-users-wrapper">
-        ${this.state.blockedUsers.map(user => `
-            <div class="blocked-user-wrapper">
-                <div class="blocked-user-info">
-                  <div class="blocked-user-image">
-                    <img src="${user.profile_picture}" alt="" />
-                  </div>
-                  <div class="blocked-user-data">
-                    <h6>${user.nickname}</h6>
-                    </div>
+            ${this.state.blockedUsers.map((user, index) => `
+                <div id="${index}-blocked-user-wrapper" class="blocked-user-wrapper">
+                    <div class="blocked-user-info">
+                        <div class="blocked-user-image">
+                            <img src="${user.profile_picture}" alt="" />
+                        </div>
+                        <div class="blocked-user-data">
+                            <h6>${user.nickname}</h6>
+                        </div>
                     </div>
-                    <button class="unblock-button">Unblock</button>
-            </div>
-        `).join('')}
+                    <button id="${index}-button" class="unblock-button" >Unblock</button>
+                </div>
+            `).join('')}
         </div>
-        `
+        `;
     }
+
     render() {
         this.parentElement.innerHTML = this.html;
+        for (let i = 0; this.state.blockedUsers.length > i; i++) {
+            console.log(this.state.blockedUsers[i].id)
+            document.getElementById(`${i}-button`).addEventListener("click", () =>
+                this.removeBlockedUser(this.state.blockedUsers[i].id, i)
+            )
+        }
+
     }
 }
 
@@ -77,7 +103,6 @@ class PaddleColor extends BaseComponent {
     }
 
     handleHTML() {
-        
         return `
         <form>
     <div class="paddle-color-wrapper">
@@ -407,17 +432,6 @@ async function assignDataRouting() {
     });
 }
 
-async function fetchBlockedUsers() {
-    const users = [
-        { nickname: "user1", profile_picture: "https://example.com/user1.jpg" },
-        { nickname: "user2", profile_picture: "https://example.com/user2.jpg" },
-        { nickname: "user3", profile_picture: "https://example.com/user3.jpg" },
-        { nickname: "user4", profile_picture: "https://example.com/user4.jpg" },
-        { nickname: "user5", profile_picture: "https://example.com/user5.jpg" }
-    ];
-    return users;
-}
-
 async function fetchPaddleColor() {
     const colors = [
         { color: "red", hex: "#FF0000" },
@@ -453,6 +467,20 @@ async function fetchFriends() {
         notify('Error fetching friends', 3, 'error')
     }
 }
+
+async function fetchBlockedUsers() {
+    try {
+        let data = await request('profile/block-users/', {
+            method: "GET"
+        })
+        console.log(data)
+        return data
+    } catch (error) {
+        console.error('Error:', error);
+        notify('Error fetching friends', 3, 'error')
+    }
+}
+
 async function fetchHistory()
 {
     try
@@ -476,6 +504,7 @@ async function fetchHistory()
     return []
         }
 }
+
 async function handleRouting() {
     const hash = location.hash;
     const parentElement = document.getElementById('data-wrapper');