diff --git a/Backend/static/scripts/profile.js b/Backend/static/scripts/profile.js
index 0ed3762f..dd576161 100644
--- a/Backend/static/scripts/profile.js
+++ b/Backend/static/scripts/profile.js
@@ -1,5 +1,5 @@
 import BaseComponent from "../components/Component.js";
-import { API_URL, BASE_URL, loadPage } from "./spa.js";
+import {API_URL, assignRouting, BASE_URL, loadPage} from "./spa.js";
 import { notify } from "../components/Notification.js";
 import { request } from "./Request.js";
 import {calculateDate, escapeHTML, getActiveUserNickname} from "./utils.js";
@@ -208,10 +208,9 @@ class Friends extends BaseComponent {
                   <div class="friend-image">
                     <img src="https://picsum.photos/id/237/200/300" alt="" />
                   </div>
-                  <div class="friend-data">
-                    <h6>${friend.user.first_name.length > 0 ? escapeHTML(friend.user.first_name) : "No name is set for this user"}</h6>
+                  <pong-redirect href="/profile/${friend.nickname}/" class="friend-data">
                     <span>${friend.nickname}</span>
-                  </div>
+                  </pong-redirect>
                 </div>
                 <div class="friend-more">
                   <div><img src="/static/public/image.svg" alt="" /></div>
@@ -228,6 +227,10 @@ class Friends extends BaseComponent {
         this.state = { ...this.state, ...newState };
         this.render();
     }
+    render() {
+        super.render();
+        assignRouting();
+    }
 }
 class ProfileInfo extends BaseComponent {
     constructor(state, parentElement = null) {
@@ -355,9 +358,10 @@ class ProfileInfo extends BaseComponent {
 async function fetchProfile() {
     const pathName = window.location.pathname;
     const pathParts = pathName.split('/');
-    const nickname = pathParts[pathParts.length - 1];
+    const urlArray = pathParts.filter(Boolean);
+    const nickname = urlArray[urlArray.length - 1];
     try {
-        let data = await request(`${API_URL}/profile-with-nickname/${nickname}/`, {
+        let data = await request(`${API_URL}/profile-with-nickname/${nickname}`, {
             method: 'GET',
         });
         const profileParentElement = document.getElementById('profile-info');
diff --git a/Backend/static/scripts/spa.js b/Backend/static/scripts/spa.js
index 25ebc429..e323634e 100644
--- a/Backend/static/scripts/spa.js
+++ b/Backend/static/scripts/spa.js
@@ -189,6 +189,7 @@ const routes = new Map([
               <button class="header-wrapper" id="friends-button"><span> FRIENDS </span></button>
               <button class="header-wrapper" id="stats-button"><span>STATS</span></button>
               <button class="header-wrapper" id="blocked-users-button"><span>BLOCKED</span></button>
+              <button class="header-wrapper" id="paddle-color-button"><span>PADDLE COLOR</span></button>
             </div>
           <div id="data-wrapper">
                 <div class="friends-wrapper" style="display: none">