diff --git a/frontend/src/chat/chat.ts b/frontend/src/chat/chat.ts
index e0db9f5..f3e2aa2 100644
--- a/frontend/src/chat/chat.ts
+++ b/frontend/src/chat/chat.ts
@@ -29,6 +29,7 @@ import { windowStateVisable } from "./chatHelperFunctions/windowStateVisable";
 import { cmdList } from "./chatHelperFunctions/cmdList";
 import { actionBtnTTTGames } from "./chatHelperFunctions/actionBtnTTTGames";
 import { showError } from "@app/toast";
+import { actionBtnFriend } from "./chatHelperFunctions/actionBtnFriend";
 
 const MAX_SYSTEM_MESSAGES = 10;
 let inviteMsgFlag: boolean = false;
@@ -256,6 +257,7 @@ function initChatSocket() {
 		actionBtnPopUpBlock(profil, socket);
 		actionBtnPongGames(profil, socket);
 		actionBtnTTTGames(profil, socket);
+		actionBtnFriend(profil, socket);
 	});
 
 	socket.on("blockUser", (blocked: ClientProfil) => {
diff --git a/frontend/src/chat/chatHelperFunctions/actionBtnFriend.ts b/frontend/src/chat/chatHelperFunctions/actionBtnFriend.ts
new file mode 100644
index 0000000..c804154
--- /dev/null
+++ b/frontend/src/chat/chatHelperFunctions/actionBtnFriend.ts
@@ -0,0 +1,27 @@
+import type { ClientProfil } from "../types_front";
+import { Socket } from "socket.io-client";
+
+/**
+ * function listens for a click on the TTT game History button 
+ * @param profile - Clients target profil
+ * @param senderSocket - socket from the sender
+**/
+
+export function actionBtnFriend(profile: ClientProfil, senderSocket: Socket) {
+		setTimeout(() => {
+			const friend = document.querySelector("#btn-friend");
+			friend?.addEventListener("click", () => {
+
+                if (friend.textContent = "friend") {
+                    friend.textContent = "not-friend"
+                    console.log('friend');
+                } 
+                else {
+                    friend.textContent = "not-friend"
+                    console.log('Not a friend');
+
+                } 
+
+            });
+    	}, 0)
+};
\ No newline at end of file