diff --git a/components/profile/FriendRequestModal.vue b/components/profile/FriendRequestModal.vue
index 0874a3a..ec79a2a 100644
--- a/components/profile/FriendRequestModal.vue
+++ b/components/profile/FriendRequestModal.vue
@@ -1,15 +1,4 @@
 <script setup lang="ts">
-import { FriendshipAction, FriendshipStatus } from '@/types/api/user.friends';
-import type { GetUserResponse } from '@/types/api/users';
-import { UserViewType } from '@/types/components/users.view';
-
-
-const props = defineProps({
-    name: {
-        type: String,
-        default: 'User'
-    },
-});
 
 const emit = defineEmits(['close-modal', 'refresh']);
 
@@ -39,10 +28,11 @@ const addFriend = async () => {
 <template>
     <div class="modal-overlay">
         <div class="modal">
-            <!--NuxtImg :src="profilePicture" class="rounded-full h-32 w-32 mb-3" /-->
+            <p class="text-3xl font-bold">New friend</p>
+            <p class="mb-3">Enter your friends name:</p>
             <input v-model="newFriend" class="rounded-3xl pl-2 border border-black">
             <p v-if="newFriendError" class="error-message">{{ newFriendError }}</p>
-            <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-2" @click="addFriend">Add Friend</button>
+            <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-4" @click="addFriend">Add Friend</button>
             <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="$emit('close-modal')">Close</button>
         </div>
     </div>
@@ -70,7 +60,6 @@ const addFriend = async () => {
     height: 500px;
     width: 500px;
     margin-top: 10%;
-    padding: 60px 0;
     border-radius: 20px;
 }
 
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 7835034..3273810 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -8,13 +8,12 @@ const sentRequests: Ref<GetFriendsResponse[]> = useState("outgoing_friendships",
 
 const session = useSupabaseSession()
 
-const newFriend = ref('')
-const newFriendError = ref('')
+const showModal = ref(false);
 
 onMounted(async () => {
   if (session.value) {
     await getFriendships()
-    //friends.value.push(friends.value[0]) unexpected behavior on initial page load
+    //  friends.value.push() // unexpected behavior on initial page load
   }
 })
 
@@ -26,46 +25,29 @@ async function getFriendships() {
       sentRequests.value = data.filter((item) => item.request_type == FriendshipType.OUTGOING && item.status === FriendshipStatus.PENDING)
     });
 }
-
-const addFriend = async () => {
-  try {
-    const data = await $fetch('/api/v1/user/friends', {
-      method: 'POST',
-      body: JSON.stringify({ receiver_name: newFriend.value }),
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    });
-    console.log('Friend request sent successfully:', data);
-    newFriendError.value = '';
-    newFriend.value = ''
-    await getFriendships();
-  } catch (err) {
-    if (err.response) {
-      newFriendError.value = "Please check your input."
-      console.error('Error response:', err.response);
-      console.error('Error data:', err.response.data);
-    } else {
-      // Something else happened while setting up the request
-      console.error('Error message:', err.message);
-    }
-  }
-};
 </script>
 
 <template>
-  <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends" @refresh="getFriendships"/>
-  <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests" @refresh="getFriendships"/>
-  <UsersView v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests" @refresh="getFriendships"/>
-
-  <div class="mt-3">
-    <input v-model="newFriend" class="rounded-3xl pl-2">
-    <button class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="addFriend">Add Friend</button>
-
-    <p v-if="newFriendError" class="error-message">{{ newFriendError }}</p>
+  <div class="flex flex-col">
+    <!-- Buttons Section -->
+    <div class="flex justify-center mb-3">
+      <button class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="showModal = true">Add new Friends</button>
+      <ProfileFriendRequestModal v-show="showModal" @close-modal="showModal = false" @refresh="getFriendships" />
+    </div>
+
+    <!-- Responsive Size Content Section -->
+    <div class="overflow-y-auto" style="max-height: 43vh;">
+      <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends"
+        @refresh="getFriendships" />
+      <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"
+        @refresh="getFriendships" />
+      <UsersView v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests"
+        @refresh="getFriendships" />
+    </div>
   </div>
 </template>
 
+
 <style scoped>
 .error-message {
   color: red;
diff --git a/components/profile/ProfileOverview.vue b/components/profile/ProfileOverview.vue
index f8e09f9..4d881aa 100644
--- a/components/profile/ProfileOverview.vue
+++ b/components/profile/ProfileOverview.vue
@@ -7,7 +7,7 @@ import Friendlist from './Friendlist.vue';
 <template>
     <div>
         <div class="p-3">
-            <ProfileInformation class="py-8"/>
+            <ProfileInformation class="py-5"/>
             <Friendlist/>
         </div>
     </div>