diff --git a/src/front/static/ts/views/Friends.ts b/src/front/static/ts/views/Friends.ts
index 2908abf..054ea3f 100644
--- a/src/front/static/ts/views/Friends.ts
+++ b/src/front/static/ts/views/Friends.ts
@@ -23,6 +23,14 @@ export default class extends Aview {
 			</div>
 
 			<div class="bg-neutral-200 dark:bg-neutral-800 text-center pb-10 pt-5 px-10 space-y-4 reverse-border">
+
+			<form method="dialog" class="bg-neutral-200 dark:bg-neutral-800 text-center pb-10 pt-5 px-10 space-y-4 reverse-border">
+				<input type="text" id="new-friend" placeholder="new friend" class="bg-white text-neutral-900 px-4 py-2 input-border" required></input>
+				<button id="add-friends-button" type="submit" class="default-button w-full">add friend</button>
+				<button id="rm-friends-button" class="default-button w-full">remove friend</button>
+				<p id="add-friend-err" class="hidden text-red-700 dark:text-red-500"></p>
+				<p id="add-friend-msg" class="hidden text-gray-900 dark:text-white text-lg"></p>
+			</form>
 			  <p id="friends_n" class="hidden text-gray-900 dark:text-white text-lg"></p>
 			  <p id="friends-error-message" class="hidden text-red-700 dark:text-red-500"></p>
 			  <ul id="friends_list" class="hidden text-gray-900 dark:text-white text-lg">
@@ -34,6 +42,97 @@ export default class extends Aview {
 
 	async run() {
 		let uuid: String;
+		uuid = document.cookie.match(new RegExp('(^| )' + "uuid" + '=([^;]+)'))[2];
+
+		const list_friends = async () => {
+			const data_req = await fetch("http://localhost:3002/users/" + uuid + "/friends/count", {
+				method: "GET",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				credentials: "include",
+			});
+			let data = await data_req.json();
+
+			if (data.n_friends > 0) {
+				const list_req = await fetch("http://localhost:3002/users/" + uuid + "/friends?iStart=0&iEnd=20", {
+					method: "GET",
+					headers: {
+						"Content-Type": "application/json",
+					},
+					credentials: "include",
+				});
+				if (list_req.status === 200) {
+					while (friends_list.firstChild) {
+						friends_list.removeChild(friends_list.firstChild);
+					}
+					friends_list.classList.remove("hidden")
+
+					let list = (await list_req.json()).friends as JSON;
+
+					for (let i = 0; i < data.n_friends; i++) {
+						let new_friends = document.createElement('li')
+						new_friends.innerHTML = "- " + list[i].friendName;
+						friends_list.appendChild(new_friends);
+					}
+				} else {
+					n_friends.classList.add("hidden");
+					friends_error_message.innerHTML = (await list_req.json()).error;
+					friends_error_message.classList.remove("hidden");
+				}
+			} else {
+				friends_error_message.innerHTML = "failed to fetch friends";
+				friends_error_message.classList.remove("hidden");
+			}
+		}
+
+		const add_friend = async () => {
+			const new_friend = (document.getElementById("new-friend") as HTMLInputElement);
+			const add_friend_err = (document.getElementById("add-friend-err") as HTMLParagraphElement);
+			const add_friend_msg = (document.getElementById("add-friend-msg") as HTMLParagraphElement);
+
+			const data_req = await fetch("http://localhost:3002/users/" + uuid + "/friends/" + new_friend.value, {
+				method: "POST",
+				credentials: "include",
+			});
+			let data = await data_req.json()
+			if (data_req.status === 200) {
+				add_friend_msg.innerHTML = data.msg;
+				add_friend_msg.classList.remove("hidden");
+				if (!add_friend_err.classList.contains("hidden"))
+					add_friend_err.classList.add("hidden")
+			} else {
+				add_friend_err.innerHTML = data.error;
+				add_friend_err.classList.remove("hidden");
+				if (!add_friend_msg.classList.contains("hidden"))
+					add_friend_msg.classList.add("hidden")
+			}
+			list_friends()
+		}
+
+		const rm_friend = async () => {
+			const new_friend = (document.getElementById("new-friend") as HTMLInputElement);
+			const add_friend_err = (document.getElementById("add-friend-err") as HTMLParagraphElement);
+			const add_friend_msg = (document.getElementById("add-friend-msg") as HTMLParagraphElement);
+
+			const data_req = await fetch("http://localhost:3002/users/" + uuid + "/friends/" + new_friend.value, {
+				method: "DELETE",
+				credentials: "include",
+			});
+			let data = await data_req.json()
+			if (data_req.status === 200) {
+				add_friend_msg.innerHTML = data.msg;
+				add_friend_msg.classList.remove("hidden");
+				if (!add_friend_err.classList.contains("hidden"))
+					add_friend_err.classList.add("hidden")
+			} else {
+				add_friend_err.innerHTML = data.error;
+				add_friend_err.classList.remove("hidden");
+				if (!add_friend_msg.classList.contains("hidden"))
+					add_friend_msg.classList.add("hidden")
+			}
+			list_friends()
+		}
 
 		dragElement(document.getElementById("window"));
 		const n_friends = (document.getElementById("friends_n") as HTMLParagraphElement);
@@ -41,7 +140,6 @@ export default class extends Aview {
 		const friends_list = (document.getElementById("friends_list") as HTMLUListElement);
 
 		try {
-			uuid = document.cookie.match(new RegExp('(^| )' + "uuid" + '=([^;]+)'))[2];
 			const data_req = await fetch("http://localhost:3002/users/" + uuid + "/friends/count", {
 				method: "GET",
 				headers: {
@@ -54,37 +152,14 @@ export default class extends Aview {
 				n_friends.innerHTML = ":D friends count : " + data.n_friends;
 				n_friends.classList.remove("hidden");
 
-				if (data.n_friends > 0) {
-					const list_req = await fetch("http://localhost:3002/users/" + uuid + "/friends?iStart=0&iEnd=20", {
-						method: "GET",
-						headers: {
-							"Content-Type": "application/json",
-						},
-						credentials: "include",
-					});
-					if (list_req.status === 200) {
-						friends_list.classList.remove("hidden")
-
-						let list = (await list_req.json()).friends as JSON;
-
-						for (let i = 0; i < data.n_friends; i++) {
-							let new_friends = document.createElement('li')
-							new_friends.innerHTML = list[i].friendName;
-							friends_list.appendChild(new_friends);
-						}
-					} else {
-						n_friends.classList.add("hidden");
-						friends_error_message.innerHTML = (await list_req.json()).error;
-						friends_error_message.classList.remove("hidden");
-					}
-				} else {
-					friends_error_message.innerHTML = "failed to fetch friends";
-					friends_error_message.classList.remove("hidden");
-				}
+				list_friends()
 			}
 		} catch (error) {
 			friends_error_message.innerHTML = "failed to fetch friends";
 			friends_error_message.classList.remove("hidden");
 		}
+		document.getElementById("add-friends-button")?.addEventListener("click", add_friend);
+		document.getElementById("rm-friends-button")?.addEventListener("click", rm_friend);
 	}
+
 }