diff --git a/backend/code/accountPickerCli.ts b/backend/code/accountPickerCli.ts
deleted file mode 100644
index ad90f7f..0000000
--- a/backend/code/accountPickerCli.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import * as figlet from 'figlet';
-import * as fs from 'fs';
-import * as readline from 'node:readline';
-(async () => {
-  const header = figlet.textSync('Account Picker', {
-    font: 'Roman',
-    horizontalLayout: 'default',
-    verticalLayout: 'default',
-  });
-
-  console.log(header);
-
-  const users = fs
-    .readFileSync('./users.txt', 'utf8')
-    .trim()
-    .split('\n')
-    .map((user) => {
-      const [email, password] = user.split(':');
-      return { email, password };
-    });
-
-  // list users to choose from
-  const userChoices = users.map((user, index) => {
-    return {
-      name: `${user.email} (${user.password})`,
-      value: index,
-    };
-  });
-
-  // list uset userChoices
-  //
-  for (const userChoice of userChoices) {
-    console.log(`${userChoice.value}: ${userChoice.name}`);
-  }
-
-  const rl = readline.createInterface({
-    input: process.stdin,
-    output: process.stdout,
-  });
-
-  const question = (query: string) =>
-    new Promise<string>((resolve) =>
-      rl.question(query, (ans) => {
-        resolve(ans);
-      }),
-    );
-
-  const userIndex = await question('User index: ');
-  const user = users[parseInt(userIndex as string, 10)];
-  console.log(`You chose: ${user.email} (${user.password})`);
-  rl.close();
-
-  const codeTemplate = `
-var myHeaders = new Headers();
-myHeaders.append("Content-Type", "application/json");
-
-var raw = JSON.stringify({
-  "email": "${user.email}",
-  "password": "${user.password}"
-});
-
-var requestOptions = {
-  method: 'POST',
-  headers: myHeaders,
-  body: raw,
-  redirect: 'follow'
-};
-
-fetch("http://localhost:3001/auth/login", requestOptions)
-  .then(response => response.text())
-  .then(result => console.log(result))
-  .catch(error => console.log('error', error));`;
-  console.log(codeTemplate);
-})();
diff --git a/backend/code/package.json b/backend/code/package.json
index c396818..a3c214d 100644
--- a/backend/code/package.json
+++ b/backend/code/package.json
@@ -10,12 +10,12 @@
   "private": true,
   "license": "UNLICENSED",
   "scripts": {
-    "build": "nest build",
+    "build": "npm run db:generate && nest build",
     "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
     "start": "nest start",
     "start:dev": "npm run db:generate && nest start --watch",
     "start:debug": "nest start --debug --watch",
-    "start:prod": "node dist/src/main",
+    "start:prod": "node dist/main",
     "db:generate": "prisma generate",
     "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
     "test": "jest",
diff --git a/backend/code/prisma/Dockerfile b/backend/code/prisma/Dockerfile
new file mode 100644
index 0000000..f7d7150
--- /dev/null
+++ b/backend/code/prisma/Dockerfile
@@ -0,0 +1,13 @@
+FROM node:18
+
+# Create app directory
+WORKDIR /app
+
+# Install prisma for the migration
+RUN npm install -g prisma --unsafe-perm
+
+# Copy schema and migration folder
+ADD ./ ./prisma/
+
+# Run migration
+CMD ["prisma", "migrate", "deploy"]
\ No newline at end of file
diff --git a/backend/code/prisma/dbml/schema.dbml b/backend/code/prisma/dbml/schema.dbml
index 6b7f374..0ffaa10 100644
--- a/backend/code/prisma/dbml/schema.dbml
+++ b/backend/code/prisma/dbml/schema.dbml
@@ -53,10 +53,14 @@ Table blocked_friends {
   createdAt DateTime [default: `now()`, not null]
   id String [pk]
   Blcoked_by users [not null]
-  blocked_by_id String [unique, not null]
+  blocked_by_id String [not null]
   Blocked users [not null]
-  blocked_id String [unique, not null]
+  blocked_id String [not null]
   dmRoomId String
+
+  indexes {
+    (blocked_by_id, blocked_id) [unique]
+  }
 }
 
 Table matches {
diff --git a/backend/code/prisma/migrations/20231116010258_fix_block_relation/migration.sql b/backend/code/prisma/migrations/20231116010258_fix_block_relation/migration.sql
new file mode 100644
index 0000000..48f9673
--- /dev/null
+++ b/backend/code/prisma/migrations/20231116010258_fix_block_relation/migration.sql
@@ -0,0 +1,14 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[blocked_by_id,blocked_id]` on the table `blocked_friends` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- DropIndex
+DROP INDEX "blocked_friends_blocked_by_id_key";
+
+-- DropIndex
+DROP INDEX "blocked_friends_blocked_id_key";
+
+-- CreateIndex
+CREATE UNIQUE INDEX "blocked_friends_blocked_by_id_blocked_id_key" ON "blocked_friends"("blocked_by_id", "blocked_id");
diff --git a/backend/code/prisma/schema.prisma b/backend/code/prisma/schema.prisma
index 9290dfb..f3e605a 100644
--- a/backend/code/prisma/schema.prisma
+++ b/backend/code/prisma/schema.prisma
@@ -71,11 +71,12 @@ model BlockedUsers {
 
   id            String  @id
   Blcoked_by    User    @relation("blocked_by", fields: [blocked_by_id], references: [userId], onDelete: Cascade)
-  blocked_by_id String  @unique
+  blocked_by_id String
   Blocked       User    @relation("blocked", fields: [blocked_id], references: [userId], onDelete: Cascade)
-  blocked_id    String  @unique
+  blocked_id    String
   dmRoomId      String?
 
+  @@unique([blocked_by_id, blocked_id], name: "unique_block")
   @@map("blocked_friends")
 }
 
diff --git a/backend/code/seeder.ts b/backend/code/seeder.ts
deleted file mode 100644
index a1148dd..0000000
--- a/backend/code/seeder.ts
+++ /dev/null
@@ -1,162 +0,0 @@
-import { PrismaClient, User } from '@prisma/client';
-import { faker } from '@faker-js/faker';
-import * as bcrypt from 'bcrypt';
-import * as fs from 'fs';
-
-class dataSeeder extends PrismaClient {
-  constructor() {
-    super({
-      datasources: {
-        db: {
-          url: process.env.DATABASE_URL,
-        },
-      },
-    });
-  }
-
-  async seed() {
-    await this.$connect();
-    const users = faker.helpers.multiple(this.createRandomUser, { count: 10 });
-    const registeredUsers = await this.registerUser(users);
-    await this.makeFriendship(registeredUsers);
-    await this.makeMatch(registeredUsers);
-    await this.createRoom(registeredUsers);
-    await this.$disconnect();
-  }
-
-  private async registerUser(users: any): Promise<User[]> {
-    if (fs.existsSync('users.txt')) {
-      console.log('users.txt exists');
-      fs.unlinkSync('users.txt');
-    }
-    const new_users: User[] = [];
-    for await (const user of users) {
-      fs.appendFile('users.txt', `${user.email}:${user.password}\n`, (err) => {
-        if (err) throw err;
-      });
-
-      const hash = await bcrypt.hash(user.password, 10);
-
-      const new_user = await this.user.create({
-        data: {
-          email: user.email,
-          password: hash,
-          Username: user.username,
-          firstName: user.firstName,
-          lastName: user.lastName,
-          avatar: user.avatar,
-          discreption: user.bio,
-          profileFinished: true,
-        },
-      });
-      new_users.push(new_user);
-    }
-    return new_users;
-  }
-
-  private async makeFriendship(users: User[]) {
-    for await (const user of users) {
-      const randomUser = users[Math.floor(Math.random() * users.length)];
-      if (randomUser.userId !== user.userId) {
-        const friendshipid = [user.userId, randomUser.userId].sort().join('-');
-        await this.friend.upsert({
-          where: {
-            id: friendshipid,
-          },
-          create: {
-            id: friendshipid,
-            from: {
-              connect: {
-                userId: user.userId,
-              },
-            },
-            to: {
-              connect: {
-                userId: randomUser.userId,
-              },
-            },
-            accepted: true,
-          },
-          update: {},
-        });
-      }
-    }
-  }
-
-  private async makeMatch(users: User[]) {
-    for await (const user of users) {
-      const randomUser = users[Math.floor(Math.random() * users.length)];
-      if (randomUser.userId !== user.userId) {
-        await this.match.create({
-          data: {
-            participant1Id: user.userId,
-            participant2Id: randomUser.userId,
-            winner_id: Math.random() > 0.5 ? user.userId : randomUser.userId,
-            score1: Math.floor(Math.random() * 10),
-            score2: Math.floor(Math.random() * 10),
-          },
-        });
-      }
-    }
-  }
-
-  private createRandomUser() {
-    return {
-      username: faker.internet.userName(),
-      email: faker.internet.email(),
-      avatar: 'v1698656518/nest-blog/clocnzgx80006q73seyj9hzx5.png',
-      password: faker.internet.password(),
-      firstName: faker.person.firstName(),
-      lastName: faker.person.lastName(),
-      bio: faker.person.bio(),
-    };
-  }
-
-  private async createRoom(users: User[]) {
-    const owner = users[Math.floor(Math.random() * users.length)];
-    const roomData = {
-      name: faker.lorem.word(),
-      ownerId: owner.userId,
-    };
-
-    // add random users to the room
-    const filtredUsers = users.filter((user) => user.userId !== owner.userId);
-    const randomUsers = filtredUsers.slice(
-      0,
-      Math.floor(Math.random() * filtredUsers.length),
-    );
-
-    const room = await this.room.create({
-      data: {
-        name: roomData.name,
-        ownerId: roomData.ownerId,
-        type: 'public',
-      },
-    });
-
-    for await (const user of randomUsers) {
-      await this.roomMember.create({
-        data: {
-          userId: user.userId,
-          roomId: room.id,
-          is_admin: Math.random() > 0.8 ? true : false,
-        },
-      });
-    }
-    await this.roomMember.create({
-      data: {
-        userId: owner.userId,
-        roomId: room.id,
-        is_admin: true,
-      },
-    });
-
-		console.log("roomid: ", room.id)
-		console.log("ownerid: ", owner.userId)
-		console.log("randomUsers: ", randomUsers)
-  }
-}
-
-(async () => {
-  await new dataSeeder().seed();
-})();
diff --git a/backend/code/src/app.controller.ts b/backend/code/src/app.controller.ts
index d27d2e6..f7f97d5 100644
--- a/backend/code/src/app.controller.ts
+++ b/backend/code/src/app.controller.ts
@@ -1,274 +1,8 @@
-import { Controller, Get } from '@nestjs/common';
+import { Controller } from '@nestjs/common';
 import { ApiExcludeController } from '@nestjs/swagger';
 
 @ApiExcludeController(true)
 @Controller()
 export class AppController {
   constructor() {}
-  @Get('/login')
-  logIn() {
-    // send the login page
-    return `<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title></title>
-		<meta charset="UTF-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<link href="css/style.css" rel="stylesheet">
-	</head>
-	<body>
-		<a href="/auth/login/42">login frm here</a>	
-	</body>
-</html>
-`;
-  }
-
-  //  @Post('test')
-  //  test() {
-  // this.prisma.friend.upsert({})
-  // }
-
-  @Get()
-  // @UseGuards(AuthenticatedGuard)
-  home() {
-    return `
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="https://cdn.socket.io/4.4.1/socket.io.js"></script>
-  <title>Socket.io Example</title>
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-      background-color: #f4f4f4;
-      margin: 0;
-      padding: 0;
-    }
-
-    h1 {
-      text-align: center;
-      background-color: #333;
-      color: #fff;
-      padding: 10px;
-      margin: 0;
-    }
-
-    #container {
-      max-width: 800px;
-      margin: 20px auto;
-      padding: 20px;
-      background-color: #fff;
-      border-radius: 5px;
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    }
-
-    ul {
-      list-style: none;
-      padding: 0;
-    }
-
-    li {
-      margin: 10px 0;
-      padding: 10px;
-      background-color: #e6e6e6;
-      border-radius: 5px;
-      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-    }
-
-    input[type="text"], button {
-      display: block;
-      width: 100%;
-      padding: 10px;
-      margin: 5px 0;
-      border: 1px solid #ccc;
-      border-radius: 3px;
-    }
-
-    button {
-      background-color: #333;
-      color: #fff;
-      border: none;
-      cursor: pointer;
-    }
-
-    form {
-      margin-top: 20px;
-    }
-
-    label {
-      display: block;
-      margin-top: 10px;
-      font-weight: bold;
-    }
-  </style>
-  <script>
-    // Socket.io script
-    const socket = io("http://localhost:3004", {
-      transports: ['websocket'],
-      withCredentials: true,
-    });
-
-    // Functions defined here
-    function start() {
-      console.log('start');
-      socket.emit("startGame");
-    }
-
-    function streamMessage(event) {
-      if (event.key === "ArrowUp") {
-        socket.emit("move");
-      }
-    }
-
-    function displayMessage(data) {
-      const messageList = document.getElementById("messageList");
-      const messageItem = document.createElement("li");
-      messageItem.textContent = "ID: " + data.id + ", Content: " + data.content + ", Time: " + data.time;
-      messageList.appendChild(messageItem);
-    }
-
-    function banMember() {
-      const roomId = document.getElementById("roomIdInput").value;
-      const memberId = document.getElementById("memberIdInput").value;
-
-      fetch("http://localhost:3001/rooms/ban", {
-        method: "POST",
-        body: JSON.stringify({ roomId: roomId, memberId: memberId }),
-        headers: {
-          "Content-Type": "application/json",
-        },
-      })
-        .then(function(response) {
-          if (response.ok) {
-            socket.emit("roomDeparture", { roomId: roomId, memberId: memberId });
-          } else {
-            console.error("Ban request failed");
-          }
-        })
-        .catch(function(error) {
-          console.error("Error: " + error);
-        });
-    }
-
-    function sendMessageToRoom() {
-      const roomId = document.getElementById("roomIdInput").value;
-      const message = document.getElementById("newMessageInput").value;
-
-const raw = JSON.stringify({"content": message});
-
-      fetch("http://localhost:3001/messages/room/" + roomId, {
-        method: "POST",
-        body: raw,
-        headers: {
-          "Content-Type": "application/json",
-        },
-      })
-        .then(function(response) {
-          if (response.ok) {
-            console.log("Message sent to room " + roomId + ": " + message);
-          } else {
-            console.error("Message sending failed");
-          }
-        })
-        .catch(function(error) {
-          console.error("Error: " + error);
-        });
-    }
-
-    function unbanMember() {
-      const roomIdUnban = document.getElementById("roomIdUnbanInput").value;
-      const memberIdUnban = document.getElementById("memberIdUnbanInput").value;
-
-      fetch("http://localhost:3001/rooms/unban", {
-        method: "POST",
-        body: JSON.stringify({ roomId: roomIdUnban, memberId: memberIdUnban }),
-        headers: {
-          "Content-Type": "application/json",
-        },
-      })
-        .then(function(response) {
-          if (response.ok) {
-            console.log("Member unbanned successfully.");
-          } else {
-            console.error("Unban request failed");
-          }
-        })
-        .catch(function(error) {
-          console.error("Error: " + error);
-        });
-    }
-
-    // Listening for the "message" event and displaying messages
-    socket.on("message", function(data) {
-      displayMessage(data);
-    });
-
-function sendFriendRequest() {
-  const friendId = document.getElementById("friendIdInput").value;
-
-  fetch("http://localhost:3001/friends/add", {
-    method: "POST",
-    body: JSON.stringify({ friendId: friendId }),
-    headers: {
-      "Content-Type": "application/json",
-    },
-  })
-    .then(function(response) {
-      if (response.ok) {
-        console.log("Friend request sent to: " + friendId);
-      } else {
-        console.error("Friend request sending failed");
-      }
-    })
-    .catch(function(error) {
-      console.error("Error: " + error);
-    });
-}
- </script>
-</head>
-<body>
-  <h1>Socket.io Example</h1>
-
-  <div id="container">
-    <input type="text" id="messageInput" onkeydown="streamMessage(event)" placeholder="Press Arrow Up to Stream Message">
-    <button type="button" onclick="start()">Start</button>
-
-    <ul id="messageList"></ul> <!-- Container for displaying messages -->
-
-    <!-- Form to send a POST request to ban a member -->
-    <form onsubmit="banMember(event)">
-      <label for="roomId">Room ID:</label>
-      <input type="text" id="roomIdInput" name="roomId" required>
-      <label for="memberId">Member ID:</label>
-      <input type="text" id="memberIdInput" name="memberId" required>
-      <button type="button" onclick="banMember()">Ban Member</button>
-    </form>
-
-    <!-- New message area and button -->
-    <input type="text" id="newMessageInput" placeholder="Enter a Message">
-    <button type="button" onclick="sendMessageToRoom()">Send Message</button>
-
-    <!-- Unban Member button -->
-    <form onsubmit="unbanMember(event)">
-      <label for="roomIdUnban">Room ID (Unban):</label>
-      <input type="text" id="roomIdUnbanInput" name="roomIdUnban" required>
-      <label for="memberIdUnban">Member ID (Unban):</label>
-      <input type="text" id="memberIdUnbanInput" name="memberIdUnban" required>
-      <button type="button" onclick="unbanMember()">Unban Member</button>
-    </form>
-
-<!-- Form to send a POST request to send a friend request -->
-<form onsubmit="sendFriendRequest(event)">
-  <label for="friendId">Friend ID:</label>
-  <input type="text" id="friendIdInput" name="friendId" required>
-  <button type="button" onclick="sendFriendRequest()">Send Friend Request</button>
-</form>
-  </div>
-</body>
-</html>
-`;
-  }
 }
diff --git a/backend/code/src/auth/stratgies/ft.strategy.ts b/backend/code/src/auth/stratgies/ft.strategy.ts
index 2aeb8ca..a128046 100644
--- a/backend/code/src/auth/stratgies/ft.strategy.ts
+++ b/backend/code/src/auth/stratgies/ft.strategy.ts
@@ -48,7 +48,7 @@ export class FtStrategy extends PassportStrategy(Strategy, '42') {
         user.userId,
         tokens.refresh_token,
       );
-      console.log(tokens);
+
       res.cookie('X-Access-Token', tokens.access_token, { httpOnly: true });
       res.cookie('X-Refresh-Token', tokens.refresh_token, {
         httpOnly: true,
diff --git a/backend/code/src/auth/utils/jwt_utils/jwt_utils.ts b/backend/code/src/auth/utils/jwt_utils/jwt_utils.ts
index 596d6b6..2ac1115 100644
--- a/backend/code/src/auth/utils/jwt_utils/jwt_utils.ts
+++ b/backend/code/src/auth/utils/jwt_utils/jwt_utils.ts
@@ -17,7 +17,7 @@ export class JwtUtils {
         { username, sub: userId },
         {
           secret: JwtConsts.at_secret,
-          expiresIn: '15m',
+          expiresIn: '2h',
         },
       ),
       this.jwtService.signAsync(
diff --git a/backend/code/src/friends/friends.service.ts b/backend/code/src/friends/friends.service.ts
index 3b7b38e..2868801 100644
--- a/backend/code/src/friends/friends.service.ts
+++ b/backend/code/src/friends/friends.service.ts
@@ -38,7 +38,6 @@ export class FriendsService {
       },
       update: {},
     });
-    // this.evenEmitter.emit('addFriendNotif', notifData);  TODO: emit an event with the correct data
     this.evenEmitter.emit('sendNotification', {
       receiverId: friendId,
       actorId: userId,
diff --git a/backend/code/src/game/game.controller.ts b/backend/code/src/game/game.controller.ts
index 657ebf8..1935229 100644
--- a/backend/code/src/game/game.controller.ts
+++ b/backend/code/src/game/game.controller.ts
@@ -1,4 +1,4 @@
-import { Controller, Get, Post, Query, UseGuards, Param } from '@nestjs/common';
+import { Controller, Get, Query, UseGuards, Param } from '@nestjs/common';
 import { GameService } from './game.service';
 import { AtGuard } from 'src/auth/guards/at.guard';
 import { GetCurrentUser } from 'src/auth/decorator/get_current_user.decorator';
@@ -10,11 +10,6 @@ import { ApiTags } from '@nestjs/swagger';
 export class GameController {
   constructor(private readonly gameService: GameService) {}
 
-  @Post('start')
-  startGame() {
-    // return this.gameService.startGame();
-  }
-
   @Get('history')
   @UseGuards(AtGuard)
   getHistory(
diff --git a/backend/code/src/game/game.service.ts b/backend/code/src/game/game.service.ts
index 9b50781..62e2346 100644
--- a/backend/code/src/game/game.service.ts
+++ b/backend/code/src/game/game.service.ts
@@ -38,7 +38,6 @@ export class GameService {
         this.classicwaitingPlayers.push({ socket: client, userData: userData });
       else if (gameMode === 'extra')
         this.extraWaitingPlayers.push({ socket: client, userData: userData });
-      console.log('client subscribed to the queue');
     } else if (data.mode === 'unregister') {
       const client = data.client;
       const gameMode = data.gameMode;
@@ -57,25 +56,13 @@ export class GameService {
   //NOTE: add game modes here
   private launchGame() {
     setInterval(() => {
-      // console.log('waitingPlayers', this.classicwaitingPlayers.length);
-      console.log('waitingPlayers classic', this.classicwaitingPlayers.length);
-      console.log('waitingPlayers extra', this.extraWaitingPlayers.length);
-
       if (this.classicwaitingPlayers.length >= 2) {
-        console.log('Game launched!');
         const two_players = this.classicwaitingPlayers.splice(0, 2);
         this.eventEmitter.emit('game.launched', two_players, 'classic');
-        console.log(two_players);
-        // const user = await this.getUser(two_players[0].data.user.sub)
-        // console.log(user)
       }
       if (this.extraWaitingPlayers.length >= 2) {
-        console.log('Game launched!');
         const two_players = this.extraWaitingPlayers.splice(0, 2);
         this.eventEmitter.emit('game.launched', two_players, 'extra');
-        console.log(two_players);
-        // const user = await this.getUser(two_players[0].data.user.sub)
-        // console.log(user)
       }
     }, 5027);
   }
diff --git a/backend/code/src/game/game.ts b/backend/code/src/game/game.ts
index 5d64a2c..12e8637 100644
--- a/backend/code/src/game/game.ts
+++ b/backend/code/src/game/game.ts
@@ -43,8 +43,6 @@ export class Game {
     const scale2 = player2.h / this.h;
 
     const newPos = this.p1PaddleY * scale2;
-    // let scale_y = player2.h / this.h;
-    // let center = this.paddleHeight * scale_y;
 
     if (p2PaddleY - player2.h / 6 / 6 < 0) {
       p2PaddleY = 0;
@@ -72,9 +70,6 @@ export class Game {
     const scale2 = player1.h / this.h;
 
     const newPos = this.p2PaddleY * scale2;
-    // let scale_y = player1.h / this.h;
-
-    // let center = this.paddleHeight * scale_y;
 
     if (p1PaddleY - player1.h / 6 / 6 < 0) {
       p1PaddleY = 0;
@@ -114,13 +109,7 @@ export class Game {
 
   private async loop() {
     if (this.closeGame) return;
-    console.log('loop');
 
-    // if (
-    //   this.x + this.dx + this.ballSize / 2 >= this.w ||
-    //   this.x + this.dx - this.ballSize / 2 <= 0
-    // )
-    //   this.dx *= -1;
     if (
       this.y + this.dy + this.ballSize / 2 >= this.h ||
       this.y + this.dy - this.ballSize / 2 <= 0
@@ -151,7 +140,6 @@ export class Game {
         this.y > this.p2PaddleY + this.paddleHeight) &&
       this.x + this.ballSize / 2 >= this.w
     ) {
-      console.log(`${this.p1PaddleY} ${this.x} ${this.y} ${this.ballSize}`);
       this.p1Score += 1;
       this.init();
       this.checkForWinner();
@@ -162,33 +150,15 @@ export class Game {
         this.y > this.p1PaddleY + this.paddleHeight) &&
       this.x - this.ballSize / 2 <= 0
     ) {
-      console.log(`${this.p1PaddleY} ${this.x} ${this.y} ${this.ballSize}`);
       this.p2Score += 1;
       this.init();
       this.checkForWinner();
       await new Promise((resolve) => setTimeout(resolve, 1000));
     }
 
-    console.log(this.x);
-    console.log(this.y);
-
-    // const forwardx = this.x + this.dx;
-    // const forwardy = this.y + this.dy
-    // if (forwardx > this.) {
-    // }
     this.x += this.dx;
     this.y += this.dy;
 
-    // if (
-    //   parseFloat((this.p1Res.w / this.p1Res.h).toFixed(1)) !== 1.8 &&
-    //   parseFloat((this.p2Res.w / this.p2Res.h).toFixed(1)) !== 1.9
-    // ) {
-    //   this.p1socket.emit('screen Error');
-
-    //   this.emitGameEnd('p1Leave');
-    //   this.p1socket.emit('lose', 'trying cheat');
-    //   this.p2socket.emit('win', 'you win other player try to cheat');
-    // } else {
     this.p1socket.emit(
       'ball',
       this.screenAdapter(this.p1Res, this.x, this.y, this.ballSize),
@@ -203,18 +173,7 @@ export class Game {
         true,
       ),
     );
-    // }
-
-    // if (
-    //   parseFloat((this.p2Res.w / this.p2Res.h).toFixed(1)) !== 1.8 &&
-    //   parseFloat((this.p2Res.w / this.p2Res.h).toFixed(1)) !== 1.9
-    // ) {
-    //   this.p1socket.emit('screen Error');
-
-    //   this.emitGameEnd('p2Leave');
-    //   this.p1socket.emit('win', 'you win other player try to cheat');
-    //   this.p2socket.emit('lose', 'trying cheat');
-    // } else {
+
     this.p2socket.emit(
       'ball',
       this.screenAdapter(this.p2Res, this.x, this.y, this.ballSize),
@@ -229,7 +188,6 @@ export class Game {
         true,
       ),
     );
-    // }
 
     await this.sleep(this.frames);
 
@@ -247,10 +205,8 @@ export class Game {
     }
   }
   async start(ngameid: string) {
-    console.log('game started', ngameid);
     this.gameid = ngameid;
     await this.sleepCounter();
-    // await this.setplayerScokets(this.p1socket, this.p2socket ,)
     this.loop();
   }
 
@@ -264,10 +220,7 @@ export class Game {
     this.p2socket = p2socket;
     this.p1Data = p1Data;
     this.p2Data = p2Data;
-    console.log(p1Data);
-    console.log(p2Data);
     this.server.emit('players', [p1Data, p2Data]);
-    console.log('newfunc');
 
     if (this.mode === 'extra') {
       let l = 1;
@@ -323,53 +276,50 @@ export class Game {
     this.p2socket.on('screen', (data) => {
       this.p2Res = data;
     });
-    this.p1socket.on('disconnect', () => {
-      this.emitGameEnd('p1Leave');
-      this.p2socket.emit('win', 'you win other player leave the game');
-      this.p1socket.emit('lose', 'you win other player leave the game');
-    });
-    this.p2socket.on('disconnect', () => {
-      this.emitGameEnd('p2Leave');
-      this.p1socket.emit('win', 'you win other player leave the game');
-      this.p2socket.emit('lose', 'you lost other player leave the game');
-    });
-    this.p1socket.on('leave', () => {
-      this.emitGameEnd('p1Leave');
-      this.p2socket.emit('win', 'you win other player leave the game');
-      this.p1socket.emit('lose', 'you win other player leave the game');
-    });
-    this.p2socket.on('leave', () => {
-      this.emitGameEnd('p2Leave');
-      this.p1socket.emit('win', 'you win other player leave the game');
-      this.p2socket.emit('lose', 'you lost other player leave the game');
-    });
+    this.p1socket.once('disconnect', this.handleP1Disconnect);
+    this.p2socket.once('disconnect', this.handleP2Disconnect);
+    this.p1socket.once('leave', this.handleP1Disconnect);
+    this.p2socket.once('leave', this.handleP2Disconnect);
   }
   private checkForWinner() {
     if (this.p1Score >= 5) {
-      this.p1socket.emit('win', 'you win');
-      this.p2socket.emit('lose', 'you lose');
+      this.p1socket.emit('win', 'you won');
+      this.p2socket.emit('lose', 'you lost');
       this.emitGameEnd('end');
     }
     if (this.p2Score >= 5) {
-      this.p2socket.emit('win', 'you win');
-      this.p1socket.emit('lose', 'you lose');
+      this.p2socket.emit('win', 'you won');
+      this.p1socket.emit('lose', 'you lost');
       this.emitGameEnd('end');
     }
   }
 
+  private handleP1Disconnect = () => {
+    this.p2socket.emit('win', 'you won, the other player left the game');
+    this.p1socket.emit('lose', 'you lost');
+    this.emitGameEnd('p1Leave');
+  };
+
+  private handleP2Disconnect = () => {
+    this.p1socket.emit('win', 'you won, the other player left the game');
+    this.p2socket.emit('lose', 'you lost');
+    this.emitGameEnd('p2Leave');
+  };
+
   private removeListeners(socket: Socket) {
-    socket.removeAllListeners('disconnect');
-    socket.removeAllListeners('leave');
     socket.removeAllListeners('screen');
     socket.removeAllListeners('mouse');
     socket.removeAllListeners('up');
     socket.removeAllListeners('down');
   }
   private emitGameEnd(message: string) {
-    console.log`asdaqwe Game end`;
     this.closeGame = true;
     this.removeListeners(this.p1socket);
+    this.p1socket.off('leave', this.handleP1Disconnect);
+    this.p1socket.off('disconnect', this.handleP1Disconnect);
     this.removeListeners(this.p2socket);
+    this.p2socket.off('leave', this.handleP2Disconnect);
+    this.p2socket.off('disconnect', this.handleP2Disconnect);
 
     if (message === 'p1Leave') {
       this.eventEmitter.emit('game.end', {
diff --git a/backend/code/src/gateways/gateways.gateway.ts b/backend/code/src/gateways/gateways.gateway.ts
index 74d92af..7be7aa1 100644
--- a/backend/code/src/gateways/gateways.gateway.ts
+++ b/backend/code/src/gateways/gateways.gateway.ts
@@ -26,7 +26,7 @@ interface GameInvite {
 
 @WebSocketGateway(3004, {
   cors: {
-    origin: ['http://localhost:3001'],
+    origin: process.env.WS_CORS_ORIGIN?.split(',') || ['http://localhost:3001'],
   },
   transports: ['websocket'],
 })
@@ -75,12 +75,39 @@ export class Gateways implements OnGatewayConnection, OnGatewayDisconnect {
     const userId = client.data.user.sub;
 
     this.server.emit('friendOffline', userId);
+    this.eventEmitter.emit('game.start', {
+      client,
+      gameMode: 'cassic',
+      mode: 'unregister',
+    });
+    this.eventEmitter.emit('game.start', {
+      client,
+      gameMode: 'extra',
+      mode: 'unregister',
+    });
   }
 
   @OnEvent('sendMessages')
-  sendMessage(message: MessageFormatDto) {
+  async sendMessage(
+    message: MessageFormatDto,
+    blockedRoomMembersIds?: string[],
+  ) {
     const chanellname: string = `Room:${message.roomId}`;
-    this.server.to(chanellname).emit('message', message);
+    if (!blockedRoomMembersIds) {
+      this.server.to(chanellname).emit('message', message);
+    } else {
+      const sockets = await this.server.in(chanellname).fetchSockets();
+      for await (const socket of sockets) {
+        if (!blockedRoomMembersIds.includes(socket.data.user.sub)) {
+          socket.emit('message', message);
+        } else {
+          socket.emit('message', {
+            ...message,
+            content: '[REDACTED]',
+          });
+        }
+      }
+    }
   }
 
   private async createNotification(notif: Partial<Notification>) {
@@ -113,7 +140,10 @@ export class Gateways implements OnGatewayConnection, OnGatewayDisconnect {
   }
 
   @OnEvent('sendNotification')
-  async sendNotification(notif: Partial<Notification>) {
+  async sendNotification(
+    notif: Partial<Notification>,
+    blockedRoomMembersIds?: string[],
+  ) {
     // create the notification on the database
     switch (notif.type) {
       case $Enums.NotifType.acceptFriend:
@@ -165,6 +195,10 @@ export class Gateways implements OnGatewayConnection, OnGatewayDisconnect {
           .in(`Room:${message.roomId}`)
           .fetchSockets();
         for await (const member of roomMembers) {
+          if (blockedRoomMembersIds?.includes(member.userId)) {
+            continue;
+          }
+
           let found = false;
           for await (const clientSocket of clientsSockets) {
             if (clientSocket.data.user.sub === member.userId) {
@@ -193,7 +227,6 @@ export class Gateways implements OnGatewayConnection, OnGatewayDisconnect {
 
   @SubscribeMessage('status')
   async handleStatusEvent(@MessageBody() data: any) {
-    console.log('status event', data);
     const userId = data.userId;
     const status = this.server.sockets.adapter.rooms.get(`User:${userId}`)?.size
       ? 'online'
@@ -230,10 +263,6 @@ export class Gateways implements OnGatewayConnection, OnGatewayDisconnect {
     });
   }
 
-  // @SubscribeMessage('getPlayers')
-  // getPlayers() {
-  //   this.server.emit("players",[this.p1Data ,this.p2Data])
-  // }
   private async checkIfCanInvite(userId: string) {
     const opententSockets = await this.server
       .in(`User:${userId}`)
@@ -291,10 +320,6 @@ export class Gateways implements OnGatewayConnection, OnGatewayDisconnect {
     const game_invite = Array.from(this.game_invites).find(
       (invite) => invite.gameId === data.gameId,
     );
-    //TODO: check if user is already in queue
-    // check if already has an active invite from anyone
-    // check if he is already on game || save if user is in game by saving it in the data of socket
-    // check if user is offline
     if (!game_invite) {
       client.emit('game.declined', {
         gameId: data.gameId,
@@ -340,13 +365,11 @@ export class Gateways implements OnGatewayConnection, OnGatewayDisconnect {
     this.game_invites.delete(game_invite);
 
     if (game_invite.inviter === client.data.user.sub) {
-      console.log('declined by inviter');
       this.server.to(`User:${game_invite.opponentId}`).emit('game.declined', {
         decliner: client.data.user.sub,
         gameId: data.gameId,
       });
     } else {
-      console.log('decliner is the opponent');
       this.server.to(`User:${game_invite.inviter}`).emit('game.declined', {
         decliner: client.data.user.sub,
         gameId: data.gameId,
@@ -357,7 +380,7 @@ export class Gateways implements OnGatewayConnection, OnGatewayDisconnect {
   @OnEvent('game.launched')
   async handleGameLaunchedEvent(clients: any, mode: string) {
     const game_channel = crypto.randomBytes(16).toString('hex');
-    // console.log(game_channel);
+
     clients.forEach((client: any) => {
       client.socket.join(game_channel);
       client.socket.data.user.inGame = true;
@@ -379,11 +402,9 @@ export class Gateways implements OnGatewayConnection, OnGatewayDisconnect {
   @OnEvent('game.end')
   async handleGameEndEvent(data: any) {
     this.games_map.delete(data.gameid);
-    console.log('game ended');
-    console.log(data);
+
     const sockets = await this.server.in(data.gameid).fetchSockets();
     this.server.to(data.gameid).emit('game.end', data);
-    console.log(data);
 
     for await (const socket of sockets) {
       socket.data.user.inGame = false;
diff --git a/backend/code/src/main.ts b/backend/code/src/main.ts
index 9175e0a..b7726c6 100644
--- a/backend/code/src/main.ts
+++ b/backend/code/src/main.ts
@@ -14,8 +14,7 @@ import { GatewayAdapter } from './gateways/gateway-adapter';
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
   const corsOptions = {
-    origin: [
-      'http://localhost:9000',
+    origin: process.env.CORS_ORIGIN?.split(',') || [
       'http://localhost:8000',
       'http://localhost:3000',
       'http://142.93.161.63',
diff --git a/backend/code/src/messages/dto/message-format.dto.ts b/backend/code/src/messages/dto/message-format.dto.ts
index da9266a..0acee39 100644
--- a/backend/code/src/messages/dto/message-format.dto.ts
+++ b/backend/code/src/messages/dto/message-format.dto.ts
@@ -9,7 +9,7 @@ export class MessageFormatDto {
       author: Partial<User>;
       room?: { type: $Enums.RoomType };
     },
-    clientMessageId?: string
+    clientMessageId?: string,
   ) {
     this.id = messageData.id;
     this.content = messageData.content;
diff --git a/backend/code/src/messages/messages.service.ts b/backend/code/src/messages/messages.service.ts
index dd3a549..806e2f4 100644
--- a/backend/code/src/messages/messages.service.ts
+++ b/backend/code/src/messages/messages.service.ts
@@ -12,9 +12,10 @@ export class MessagesService {
   ) {}
 
   async sendMessages(userId: string, channelId: string, messageDto: any) {
-    console.log(messageDto);
     if (messageDto.content.length > 1000) {
       throw new HttpException('Message is too long', HttpStatus.BAD_REQUEST);
+    } else if (messageDto.content === '[REDACTED]') {
+      throw new HttpException('Message is not allowed', HttpStatus.BAD_REQUEST);
     }
 
     const room = await this.prisma.room.findUnique({
@@ -40,8 +41,8 @@ export class MessagesService {
       });
       if (blocked) {
         throw new HttpException(
-          'You are blocked from this dm',
-          HttpStatus.UNAUTHORIZED,
+          'You are blocked from sending messages to this user',
+          HttpStatus.FORBIDDEN,
         );
       }
     }
@@ -50,22 +51,27 @@ export class MessagesService {
 
     if (!roomMember) {
       throw new HttpException(
-        'User is not in channel',
-        HttpStatus.UNAUTHORIZED,
+        'You are not in this channel',
+        HttpStatus.FORBIDDEN,
       );
     }
 
     if (roomMember.is_banned) {
       throw new HttpException(
-        'you are banned from this channel',
-        HttpStatus.UNAUTHORIZED,
+        'You are banned from this channel',
+        HttpStatus.FORBIDDEN,
       );
     }
 
     if (roomMember.is_mueted) {
       const now = new Date();
       if (now < roomMember.mute_expires) {
-        throw new HttpException('User is muted', HttpStatus.UNAUTHORIZED);
+        throw new HttpException(
+          `You are muted for ${Math.round(
+            (roomMember.mute_expires.valueOf() - now.valueOf()) / 1000,
+          )} seconds`,
+          HttpStatus.FORBIDDEN,
+        );
       }
       await this.prisma.roomMember.update({
         where: {
@@ -99,14 +105,45 @@ export class MessagesService {
       },
     });
 
-    const responseMessage: MessageFormatDto = new MessageFormatDto(messageData, messageDto.clientMessageId);
-    this.eventEmitter.emit('sendNotification', {
-      actorId: userId,
-      type: $Enums.NotifType.message,
-      entityId: messageData.id,
-      entity_type: 'message',
+    const roomMembersIds = await this.prisma.roomMember.findMany({
+      where: { roomId: channelId, NOT: { userId } },
+      select: { userId: true },
     });
-    this.eventEmitter.emit('sendMessages', responseMessage);
+    const blockedUsersIds = await this.prisma.blockedUsers.findMany({
+      where: { OR: [{ blocked_by_id: userId }, { blocked_id: userId }] },
+      select: { blocked_by_id: true, blocked_id: true },
+    });
+
+    const blockedRoomMembersIds = roomMembersIds
+      .filter((member) => {
+        return blockedUsersIds.some((blocked) => {
+          return (
+            blocked.blocked_by_id === member.userId ||
+            blocked.blocked_id === member.userId
+          );
+        });
+      })
+      .map((member) => member.userId);
+
+    const responseMessage: MessageFormatDto = new MessageFormatDto(
+      messageData,
+      messageDto.clientMessageId,
+    );
+    this.eventEmitter.emit(
+      'sendNotification',
+      {
+        actorId: userId,
+        type: $Enums.NotifType.message,
+        entityId: messageData.id,
+        entity_type: 'message',
+      },
+      blockedRoomMembersIds.length ? blockedRoomMembersIds : undefined,
+    );
+    this.eventEmitter.emit(
+      'sendMessages',
+      responseMessage,
+      blockedRoomMembersIds.length ? blockedRoomMembersIds : undefined,
+    );
     return responseMessage;
   }
 
@@ -125,8 +162,8 @@ export class MessagesService {
 
     if (!roomMember) {
       throw new HttpException(
-        'User is not in channel',
-        HttpStatus.UNAUTHORIZED,
+        'You are not in this channel',
+        HttpStatus.FORBIDDEN,
       );
     }
     const messages = await this.prisma.message.findMany({
@@ -156,7 +193,7 @@ export class MessagesService {
       take: limit,
     });
 
-    // get rppm type of room
+    // get room type of room
     const room = await this.prisma.room.findUnique({
       where: {
         id: channelId,
@@ -175,7 +212,7 @@ export class MessagesService {
       if (blocked) {
         messages.forEach((message) => {
           if (message.authorId !== userId) {
-            message.content = '[REDUCTED]';
+            message.content = '[REDACTED]';
           }
         });
       }
@@ -200,7 +237,7 @@ export class MessagesService {
       );
       messages.forEach((message) => {
         if (blockedUsersIds.includes(message.authorId)) {
-          message.content = '[REDUCTED]';
+          message.content = '[REDACTED]';
         }
       });
     }
diff --git a/backend/code/src/profile/dto/update-profile.dto.ts b/backend/code/src/profile/dto/update-profile.dto.ts
index fe6276c..b6dabaf 100644
--- a/backend/code/src/profile/dto/update-profile.dto.ts
+++ b/backend/code/src/profile/dto/update-profile.dto.ts
@@ -6,7 +6,7 @@ import {
   IsNotEmpty,
   IsOptional,
   IsString,
-  MinLength,
+  Length,
 } from 'class-validator';
 
 export class UpdateProfileDto {
@@ -28,20 +28,21 @@ export class UpdateProfileDto {
   @IsOptional()
   @IsString()
   @IsNotEmpty()
-  @MinLength(4)
+  @Length(4, 50)
   firstName?: string;
 
   @ApiProperty({ required: false })
   @IsOptional()
   @IsString()
   @IsNotEmpty()
-  @MinLength(4)
+  @Length(4, 50)
   lastName?: string;
 
   @ApiProperty({ required: false })
   @IsOptional()
   @IsString()
   @IsNotEmpty()
+  @Length(4, 50)
   discreption?: string;
 
   @ApiProperty({ required: true })
@@ -53,5 +54,6 @@ export class UpdateProfileDto {
   @IsOptional()
   @IsString()
   @IsNotEmpty()
+  @Length(4, 50)
   Username: string;
 }
diff --git a/backend/code/src/rooms/dto/create-room.dto.ts b/backend/code/src/rooms/dto/create-room.dto.ts
index 906524f..13b94c5 100644
--- a/backend/code/src/rooms/dto/create-room.dto.ts
+++ b/backend/code/src/rooms/dto/create-room.dto.ts
@@ -10,10 +10,10 @@ import {
 } from 'class-validator';
 
 export class CreateRoomDto {
-  // @IgnoreName('type', { message: 'room name is not required on type dm' })
   @ApiProperty({ description: 'name of the room required if type is not dm' })
   @IsString()
   @IsNotEmpty()
+  @Length(4, 20)
   @ValidateIf((o) => o.type !== 'dm')
   name: string;
 
diff --git a/backend/code/src/rooms/rooms.service.ts b/backend/code/src/rooms/rooms.service.ts
index 9b68ff1..bda0473 100644
--- a/backend/code/src/rooms/rooms.service.ts
+++ b/backend/code/src/rooms/rooms.service.ts
@@ -1,8 +1,8 @@
 import {
+  BadRequestException,
   HttpException,
   HttpStatus,
   Injectable,
-  UnauthorizedException,
 } from '@nestjs/common';
 import { CreateRoomDto } from './dto/create-room.dto';
 import { PrismaService } from 'src/prisma/prisma.service';
@@ -150,7 +150,7 @@ export class RoomsService {
         room.password,
       );
       if (!isPasswordCorrect) {
-        throw new UnauthorizedException('wrong password');
+        throw new BadRequestException('wrong password');
       }
     }
     await this.prisma.roomMember.create({
@@ -185,7 +185,7 @@ export class RoomsService {
       },
     });
     if (ownerId === userId && !newOwner)
-      throw new UnauthorizedException(
+      throw new BadRequestException(
         'You cannot leave this room because you are the only admin in it',
       );
 
@@ -213,7 +213,7 @@ export class RoomsService {
     });
     if (!room) throw new HttpException('room not found', HttpStatus.NOT_FOUND);
     if (room.ownerId !== userId) {
-      throw new UnauthorizedException('you are not the owner of this room');
+      throw new BadRequestException('You are not the owner of this room');
     }
     await this.prisma.room.delete({ where: { id: roomData.roomId } });
     return { message: 'deleted room successfully' };
@@ -236,7 +236,7 @@ export class RoomsService {
     if (!room) throw new HttpException('room not found', HttpStatus.NOT_FOUND);
 
     if (room.ownerId !== userId) {
-      throw new UnauthorizedException('you are not the owner of this room');
+      throw new BadRequestException('You are not the owner of this room');
     }
 
     if (roomData.type == 'protected' && !roomData.password) {
@@ -284,9 +284,9 @@ export class RoomsService {
       select: { id: true },
     });
     if (room.ownerId !== userId)
-      throw new UnauthorizedException('You are not the owner of this room');
+      throw new BadRequestException('You are not the owner of this room');
     if (!member)
-      throw new UnauthorizedException('user is not a member of this room');
+      throw new BadRequestException('user is not a member of this room');
     await this.prisma.room.update({
       where: { id: roomData.roomId },
       data: { owner: { connect: { userId: roomData.memberId } } },
@@ -314,11 +314,11 @@ export class RoomsService {
     });
     if (!room) throw new HttpException('room not found', HttpStatus.NOT_FOUND);
     if (room.ownerId !== userId)
-      throw new UnauthorizedException('You are not the owner of this room');
+      throw new BadRequestException('You are not the owner of this room');
     if (!user)
-      throw new UnauthorizedException('user is not a member of this room');
+      throw new BadRequestException('User is not a member of this room');
     if (user.is_admin || room.ownerId === roomData.memberId)
-      throw new UnauthorizedException(
+      throw new BadRequestException(
         'new admin is already an admin of this room',
       );
     return await this.prisma.roomMember.update({
@@ -352,13 +352,11 @@ export class RoomsService {
     if (!member)
       throw new HttpException('member not found', HttpStatus.NOT_FOUND);
     if (!user.is_admin || user.is_banned)
-      throw new UnauthorizedException('You are not admin of this room');
+      throw new BadRequestException('You are not admin of this room');
     if (member.userId === room.ownerId)
-      throw new UnauthorizedException(
-        'You can not kick the owner of this room',
-      );
+      throw new BadRequestException('You can not kick the owner of this room');
     if (member.userId === userId)
-      throw new UnauthorizedException('You can not kick yourself');
+      throw new BadRequestException('You can not kick yourself');
     return await this.prisma.roomMember.delete({
       where: {
         unique_user_room: {
@@ -409,13 +407,13 @@ export class RoomsService {
     if (!member)
       throw new HttpException('member not found', HttpStatus.NOT_FOUND);
     if (!user.is_admin || user.is_banned)
-      throw new UnauthorizedException('You are not admin of this room');
+      throw new BadRequestException('You are not admin of this room');
     if (member.is_mueted)
-      throw new UnauthorizedException('member is already muted');
+      throw new BadRequestException('Member is already muted');
     if (member.room.ownerId === roomData.memberId)
-      throw new UnauthorizedException('You cannot mute the owner');
+      throw new BadRequestException('You cannot mute the owner');
     if (member.userId === userId)
-      throw new UnauthorizedException('You can not mute yourself');
+      throw new BadRequestException('You can not mute yourself');
     const afterFiveMin = new Date(Date.now() + 5 * 60 * 1000);
     await this.prisma.roomMember.update({
       where: {
@@ -455,7 +453,7 @@ export class RoomsService {
       where: { unique_user_room: { userId: userId, roomId: roomId } },
     });
     if (!user)
-      throw new UnauthorizedException('You are not a member of this room');
+      throw new BadRequestException('You are not a member of this room');
     const members = await this.prisma.roomMember.findMany({
       skip: offset,
       take: limit,
@@ -507,11 +505,11 @@ export class RoomsService {
     });
 
     if (!user || !user.is_admin || user.is_banned)
-      throw new UnauthorizedException('You are not the admin of this Room');
+      throw new BadRequestException('You are not the admin of this Room');
     if (userId == memberData.memberId)
-      throw new UnauthorizedException('You cannot ban yourself');
+      throw new BadRequestException('You cannot ban yourself');
     if (ownerId == memberData.memberId)
-      throw new UnauthorizedException('You cannot ban the Owner of this Room');
+      throw new BadRequestException('You cannot ban the Owner of this Room');
     await this.prisma.roomMember.update({
       where: {
         unique_user_room: {
@@ -546,7 +544,7 @@ export class RoomsService {
     if (!member.is_banned)
       throw new HttpException('member is not banned', HttpStatus.BAD_REQUEST);
     if (!user.is_admin)
-      throw new UnauthorizedException('You are not admin of this room');
+      throw new BadRequestException('You are not admin of this room');
     await this.prisma.roomMember.update({
       where: {
         unique_user_room: {
@@ -589,8 +587,8 @@ export class RoomsService {
     if (count._count.userId >= 20)
       throw new HttpException('Room is full', HttpStatus.BAD_REQUEST);
     if (!user || !user.is_admin || user.is_banned)
-      throw new UnauthorizedException('You are not the admin of this Room');
-    if (member) throw new UnauthorizedException('User already Exist');
+      throw new BadRequestException('You are not the admin of this Room');
+    if (member) throw new BadRequestException('User already Exist');
     await this.prisma.roomMember.create({
       data: {
         user: {
@@ -618,7 +616,10 @@ export class RoomsService {
           members: { some: { userId: userId } },
           NOT: { type: 'dm' },
         }),
-        ...(!joined && { OR: [{ type: 'public' }, { type: 'protected' }] }),
+        ...(!joined && {
+          NOT: { members: { some: { userId } } },
+          OR: [{ type: 'public' }, { type: 'protected' }],
+        }),
       },
       select: {
         id: true,
@@ -665,11 +666,13 @@ export class RoomsService {
             authorId: true,
           },
         });
-        const blocked = await this.prisma.blockedUsers.findFirst({
-          where: {
-            id: [userId, last_message.authorId].sort().join('-'),
-          },
-        });
+        const blocked = last_message
+          ? await this.prisma.blockedUsers.findFirst({
+              where: {
+                id: [userId, last_message.authorId].sort().join('-'),
+              },
+            })
+          : null;
 
         const is_owner = room.ownerId === userId;
         return {
@@ -786,7 +789,7 @@ export class RoomsService {
     if (!room) throw new HttpException('room not found', HttpStatus.NOT_FOUND);
     const member = room.members.find((member) => member.user.userId === userId);
     if (!member)
-      throw new UnauthorizedException('you are not a member of this room');
+      throw new BadRequestException('You are not a member of this room');
     const secondMember = room.members.find(
       (member) => member.user.userId !== userId,
     );
diff --git a/backend/code/src/users/dto/update-user.dto.ts b/backend/code/src/users/dto/update-user.dto.ts
index e8eaa17..f04ceaf 100644
--- a/backend/code/src/users/dto/update-user.dto.ts
+++ b/backend/code/src/users/dto/update-user.dto.ts
@@ -56,4 +56,6 @@ export class UpdateUserDto {
   discreption?: string;
 
   tfaToken?: string;
+
+  Username?: string;
 }
diff --git a/backend/code/src/users/users.service.ts b/backend/code/src/users/users.service.ts
index 9b389db..f1b71d5 100644
--- a/backend/code/src/users/users.service.ts
+++ b/backend/code/src/users/users.service.ts
@@ -154,14 +154,11 @@ export class UsersService {
     }
 
     if (dataDto.action === TwoFactorAction.ENABLE && !user.tfaEnabled) {
-      console.log(dataDto);
       // generate a top with the same secret
-      console.log(authenticator.generate(dataDto.secret));
       const isValid = authenticator.verify({
         token: dataDto.otp,
         secret: dataDto.secret,
       });
-      console.log(authenticator.keyuri('test', 'test', dataDto.secret));
 
       if (!isValid) {
         throw new HttpException('Invalid OTP', 400);
diff --git a/backend/code/test/app.e2e-spec.ts b/backend/code/test/app.e2e-spec.ts
index f4a316f..fc3acfe 100644
--- a/backend/code/test/app.e2e-spec.ts
+++ b/backend/code/test/app.e2e-spec.ts
@@ -23,20 +23,4 @@ describe('AppController (e2e)', () => {
   });
 });
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 //kslsl
diff --git a/docker-compose.yaml b/docker-compose.yaml
index a24d0ac..3e59164 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -10,15 +10,7 @@ services :
     networks:
       - pongnet
     init: true
-  database:
-    image: postgres
-    restart: always
-    environment:
-      POSTGRES_PASSWORD: test
-    volumes:
-      - database:/var/lib/postgresql/data
-    networks:
-      - pongnet
+
   backend:
     build:
       context: ./backend
@@ -28,11 +20,11 @@ services :
       - pongnet
     depends_on: 
       - database
-    restart: always
     ports:
       - 3001:3001
       - 3004:3004
     init : true
+    restart: always
     
   nginx :
     build:
@@ -49,10 +41,33 @@ services :
       - 8000:80
     init: true
     restart: always
+
+  database:
+    image: postgres
+    restart: always
+    env_file:
+      - ./.env
+    volumes:
+      - database:/var/lib/postgresql/data
+    networks:
+      - pongnet
+
+  migration:
+    build:
+      context: ./backend/code/prisma
+      dockerfile: Dockerfile
+    image: prisma_migration:local
+    env_file:
+      - ./.env
+    networks:
+      - pongnet
+    depends_on:
+      - database
    
 volumes: 
   front:
   database:
+
 networks:
   pongnet:
   
diff --git a/frontend/code/package-lock.json b/frontend/code/package-lock.json
index 9471470..72affdb 100644
--- a/frontend/code/package-lock.json
+++ b/frontend/code/package-lock.json
@@ -9,15 +9,10 @@
       "version": "0.1.0",
       "dependencies": {
         "@react-spring/web": "^9.7.3",
-        "@testing-library/jest-dom": "^5.17.0",
-        "@testing-library/react": "^13.4.0",
-        "@testing-library/user-event": "^13.5.0",
-        "@types/jest": "^27.5.2",
         "@types/node": "^16.18.38",
         "@types/react": "^18.2.15",
         "@types/react-dom": "^18.2.7",
         "axios": "^1.6.0",
-        "framer-motion": "^10.16.4",
         "preline": "^1.9.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -29,7 +24,6 @@
         "react-konva": "^18.2.10",
         "react-qr-code": "^2.0.12",
         "react-scripts": "^5.0.1",
-        "react-virtuoso": "^4.6.2",
         "socket.io-client": "^4.7.2",
         "tailwind-merge": "^2.0.0",
         "typescript": "^4.9.5",
@@ -50,11 +44,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/@adobe/css-tools": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.1.tgz",
-      "integrity": "sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg=="
-    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -3456,108 +3445,6 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
-    "node_modules/@testing-library/dom": {
-      "version": "9.3.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz",
-      "integrity": "sha512-0DGPd9AR3+iDTjGoMpxIkAsUihHZ3Ai6CneU6bRRrffXMgzCdlNk43jTrD2/5LT6CBb3MWTP8v510JzYtahD2w==",
-      "peer": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.1.3",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/@testing-library/jest-dom": {
-      "version": "5.17.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
-      "integrity": "sha512-ynmNeT7asXyH3aSVv4vvX4Rb+0qjOhdNHnO/3vuZNqPmhDpV/+rCSGwQ7bLcmU2cJ4dvoheIO85LQj0IbJHEtg==",
-      "dependencies": {
-        "@adobe/css-tools": "^4.0.1",
-        "@babel/runtime": "^7.9.2",
-        "@types/testing-library__jest-dom": "^5.9.1",
-        "aria-query": "^5.0.0",
-        "chalk": "^3.0.0",
-        "css.escape": "^1.5.1",
-        "dom-accessibility-api": "^0.5.6",
-        "lodash": "^4.17.15",
-        "redent": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=6",
-        "yarn": ">=1"
-      }
-    },
-    "node_modules/@testing-library/jest-dom/node_modules/chalk": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@testing-library/react": {
-      "version": "13.4.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.4.0.tgz",
-      "integrity": "sha512-sXOGON+WNTh3MLE9rve97ftaZukN3oNf2KjDy7YTx6hcTO2uuLHuCGynMDhFwGw/jYf4OJ2Qk0i4i79qMNNkyw==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@testing-library/dom": "^8.5.0",
-        "@types/react-dom": "^18.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "peerDependencies": {
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0"
-      }
-    },
-    "node_modules/@testing-library/react/node_modules/@testing-library/dom": {
-      "version": "8.20.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.1.tgz",
-      "integrity": "sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==",
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.1.3",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@testing-library/user-event": {
-      "version": "13.5.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz",
-      "integrity": "sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5"
-      },
-      "engines": {
-        "node": ">=10",
-        "npm": ">=6"
-      },
-      "peerDependencies": {
-        "@testing-library/dom": ">=7.21.4"
-      }
-    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -3574,11 +3461,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/@types/aria-query": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz",
-      "integrity": "sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q=="
-    },
     "node_modules/@types/babel__core": {
       "version": "7.20.1",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.1.tgz",
@@ -3742,15 +3624,6 @@
         "@types/istanbul-lib-report": "*"
       }
     },
-    "node_modules/@types/jest": {
-      "version": "27.5.2",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-27.5.2.tgz",
-      "integrity": "sha512-mpT8LJJ4CMeeahobofYWIjFo0xonRS/HfxnVEPMPFSQdGUt1uHCnoPT7Zhb+sjDU2wz0oKV0OLUR0WzrHNgfeA==",
-      "dependencies": {
-        "jest-matcher-utils": "^27.0.0",
-        "pretty-format": "^27.0.0"
-      }
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.12",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz",
@@ -3890,14 +3763,6 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
-    "node_modules/@types/testing-library__jest-dom": {
-      "version": "5.14.9",
-      "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz",
-      "integrity": "sha512-FSYhIjFlfOpGSRyVoMBMuS3ws5ehFQODymf3vlI7U1K8c7PHwWwFY7VREfmsuzHSOnoKs/9/Y983ayOs7eRzqw==",
-      "dependencies": {
-        "@types/jest": "*"
-      }
-    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz",
@@ -5979,11 +5844,6 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
-    "node_modules/css.escape": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="
-    },
     "node_modules/cssdb": {
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.7.2.tgz",
@@ -6415,11 +6275,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/dom-accessibility-api": {
-      "version": "0.5.16",
-      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
-      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="
-    },
     "node_modules/dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -7937,44 +7792,6 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
-    "node_modules/framer-motion": {
-      "version": "10.16.4",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.4.tgz",
-      "integrity": "sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==",
-      "dependencies": {
-        "tslib": "^2.4.0"
-      },
-      "optionalDependencies": {
-        "@emotion/is-prop-valid": "^0.8.2"
-      },
-      "peerDependencies": {
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "react": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/framer-motion/node_modules/@emotion/is-prop-valid": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
-      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-      "optional": true,
-      "dependencies": {
-        "@emotion/memoize": "0.7.4"
-      }
-    },
-    "node_modules/framer-motion/node_modules/@emotion/memoize": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-      "optional": true
-    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -8704,14 +8521,6 @@
         "node": ">=0.8.19"
       }
     },
-    "node_modules/indent-string": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -10543,14 +10352,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/lz-string": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
-      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
-      "bin": {
-        "lz-string": "bin/bin.js"
-      }
-    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -10689,14 +10490,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/min-indent": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
-      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/mini-css-extract-plugin": {
       "version": "2.7.6",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz",
@@ -13241,18 +13034,6 @@
         }
       }
     },
-    "node_modules/react-virtuoso": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.6.2.tgz",
-      "integrity": "sha512-vvlqvzPif+MvBrJ09+hJJrVY0xJK9yran+A+/1iwY78k0YCVKsyoNPqoLxOxzYPggspNBNXqUXEcvckN29OxyQ==",
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "react": ">=16 || >=17 || >= 18",
-        "react-dom": ">=16 || >=17 || >= 18"
-      }
-    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -13296,18 +13077,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/redent": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
-      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
-      "dependencies": {
-        "indent-string": "^4.0.0",
-        "strip-indent": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz",
@@ -14460,17 +14229,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/strip-indent": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
-      "dependencies": {
-        "min-indent": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
diff --git a/frontend/code/package.json b/frontend/code/package.json
index 2ff1164..6c6f8e0 100644
--- a/frontend/code/package.json
+++ b/frontend/code/package.json
@@ -4,15 +4,10 @@
   "private": true,
   "dependencies": {
     "@react-spring/web": "^9.7.3",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
     "@types/node": "^16.18.38",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "axios": "^1.6.0",
-    "framer-motion": "^10.16.4",
     "preline": "^1.9.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -24,7 +19,6 @@
     "react-konva": "^18.2.10",
     "react-qr-code": "^2.0.12",
     "react-scripts": "^5.0.1",
-    "react-virtuoso": "^4.6.2",
     "socket.io-client": "^4.7.2",
     "tailwind-merge": "^2.0.0",
     "typescript": "^4.9.5",
@@ -34,14 +28,15 @@
   "scripts": {
     "start": "FORK_TS_CHECKER=false react-scripts start",
     "build": "FORK_TS_CHECKER=false react-scripts build",
-    "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+      "react-app"
+    ],
+    "rules": {
+      "jsx-a11y/anchor-is-valid": "off"
+    }
   },
   "browserslist": {
     "production": [
diff --git a/frontend/code/src/Api/base.tsx b/frontend/code/src/Api/base.tsx
index 4003abd..5203412 100644
--- a/frontend/code/src/Api/base.tsx
+++ b/frontend/code/src/Api/base.tsx
@@ -1,10 +1,4 @@
 import axios from "axios";
-// import { useNavigate } from 'react-router-dom';
-// import { useUserStore } from "../Stores/stores";
-// const useNavigateCustom = () => {
-//   const navigate = useNavigate();
-//   return navigate;
-// };
 
 const apiWithoutManager = axios.create({
   baseURL: `${process.env.REACT_APP_API_ENDPOINT}`,
@@ -17,8 +11,8 @@ const apiWithoutManager = axios.create({
 });
 
 const ConcurrencyManager = (axios: any, MAX_CONCURRENT = 10) => {
-  if (MAX_CONCURRENT < 1){
-      //eslint-disable-next-line
+  if (MAX_CONCURRENT < 1) {
+    //eslint-disable-next-line
     throw "Concurrency Manager Error: minimun concurrent requests is 1";
   }
   let instance = {
@@ -44,7 +38,7 @@ const ConcurrencyManager = (axios: any, MAX_CONCURRENT = 10) => {
     },
     // Use as interceptor. Queue outgoing requests
     requestHandler: (req: any) => {
-      return new Promise(resolve => {
+      return new Promise((resolve) => {
         instance.push({ request: req, resolver: resolve });
       });
     },
@@ -57,31 +51,34 @@ const ConcurrencyManager = (axios: any, MAX_CONCURRENT = 10) => {
     responseErrorHandler: async (error: any) => {
       if (error?.response?.status === 401) {
         try {
-          const refreshError = await apiWithoutManager.get("auth/refresh").then(() => null).catch((err: any) => err);
-          if (refreshError && window.location.pathname !== '/') {
+          const refreshError = await apiWithoutManager
+            .get("auth/refresh")
+            .then(() => null)
+            .catch((err: any) => err);
+          if (refreshError && window.location.pathname !== "/") {
             instance.queue = [];
             instance.running = [];
-            window.location.href = '/';
+            window.location.href = "/";
             return;
           }
           const res = await apiWithoutManager.request(error.config);
           return instance.responseHandler(res);
-        } catch (refreshError) { }
+        } catch (refreshError) {}
       }
       return Promise.reject(instance.responseHandler(error));
     },
     interceptors: {
       request: null,
-      response: null
+      response: null,
     },
     detach: () => {
       axios.interceptors.request.eject(instance.interceptors.request);
       axios.interceptors.response.eject(instance.interceptors.response);
-    }
+    },
   };
   // queue concurrent requests
   instance.interceptors.request = axios.interceptors.request.use(
-    instance.requestHandler
+    instance.requestHandler,
   );
   instance.interceptors.response = axios.interceptors.response.use(
     instance.responseHandler,
@@ -103,18 +100,4 @@ const api = axios.create({
 // init your manager.
 ConcurrencyManager(api, 1);
 
-// const errorHandler = async (error: any) => {
-//   if (error?.response?.status === 401) {
-//     try {
-//       await api.get("auth/refresh");
-//       return api.request(error.config);
-//     } catch (refreshError) {}
-//   }
-//   return Promise.reject(error);
-// };
-// api.interceptors.response.use(
-//   (response) => response,
-//   (error) => errorHandler(error)
-// );
-
 export default api;
diff --git a/frontend/code/src/Components/Chat/Components/Conversation.tsx b/frontend/code/src/Components/Chat/Components/Conversation.tsx
index 0c3aaab..84c22cd 100644
--- a/frontend/code/src/Components/Chat/Components/Conversation.tsx
+++ b/frontend/code/src/Components/Chat/Components/Conversation.tsx
@@ -46,7 +46,13 @@ export const CurrentUserMessage = forwardRef<any, Message>((props, ref) => {
   const currentUserId = useUserStore((state) => state.id);
 
   return props.senderId === currentUserId ? (
-    <div ref={ref} className={classNames("chat chat-end p-2 pl-5", props.isPending && 'opacity-50')}>
+    <div
+      ref={ref}
+      className={classNames(
+        "chat chat-end p-2 pl-5",
+        props.isPending && "opacity-50",
+      )}
+    >
       <div className="chat-header p-1">
         <time className="text-gray-400 font-poppins text-xs font-light leading-normal">
           {formatTime(props.time)}
@@ -54,28 +60,34 @@ export const CurrentUserMessage = forwardRef<any, Message>((props, ref) => {
       </div>
       <div
         className={classNames(
-          'max-w-max chat-bubble text-white whitespace-normal break-words text-sm md:text-base w-[60%] inline-block',
-          props.isFailed === true ? "bg-red-500" : "bg-purple-500"
+          "max-w-max chat-bubble text-white whitespace-normal break-words text-sm md:text-base w-[60%] inline-block",
+          props.isFailed === true ? "bg-red-500" : "bg-purple-500",
         )}
       >
         {props.message}
       </div>
       <div
         className={classNames(
-          'chat-footer p-1 font-poppins text-xs font-light leading-normal',
-          props.isFailed ? "text-red-500" : "text-gray-400"
+          "chat-footer p-1 font-poppins text-xs font-light leading-normal",
+          props.isFailed ? "text-red-500" : "text-gray-400",
         )}
       >
-        {props.isPending ? 'Sending...' : (props.isFailed ? "Failed" : "Delivered")}
+        {props.isPending
+          ? "Sending..."
+          : props.isFailed
+            ? "Failed"
+            : "Delivered"}
       </div>
     </div>
   ) : (
     <div ref={ref} className="chat chat-start p-3 pr-5">
       <div className="chat-image avatar">
         <div className="w-10 rounded-full">
-          {props.avatar?.medium
-            ? <img src={props.avatar.medium} alt="" />
-            : <div className="w-10 h-10 bg-violet-400 rounded-full" />}
+          {props.avatar?.medium ? (
+            <img src={props.avatar.medium} alt="" />
+          ) : (
+            <div className="w-10 h-10 bg-violet-400 rounded-full" />
+          )}
         </div>
       </div>
       <div className="chat-header p-1">
@@ -126,12 +138,12 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
   useEffect(() => {
     SetOnline(false);
 
-    socketStore.socket.on("friendOffline", handleOffline);
-    socketStore.socket.on("friendOnline", handleOnline);
+    socketStore.socket?.on("friendOffline", handleOffline);
+    socketStore.socket?.on("friendOnline", handleOnline);
 
     return () => {
-      socketStore.socket.off("friendOffline", handleOffline);
-      socketStore.socket.off("friendOnline", handleOnline);
+      socketStore.socket?.off("friendOffline", handleOffline);
+      socketStore.socket?.off("friendOnline", handleOnline);
     };
     // eslint-disable-next-line
   }, [ChatState.selectedChatID]);
@@ -146,8 +158,9 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
             </button>
           </div>
 
-          <button className="pr-1"
-            onClick={async () => {
+          <button
+            className="pr-1"
+            onClick={() => {
               if (ChatState.selectedChatType === ChatType.Chat) {
                 navigate(`/profile/${currentUser.secondUserId}`);
               }
@@ -156,7 +169,11 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
             <img
               className="w-12 rounded-full"
               alt=""
-              src={selectedChatType === ChatType.Chat ? currentUser?.avatar.large : groupIcon}
+              src={
+                selectedChatType === ChatType.Chat
+                  ? currentUser?.avatar.large
+                  : groupIcon
+              }
             />
           </button>
           <div className="flex flex-col pl-2 ">
@@ -169,8 +186,9 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
             </p>
             {selectedChatType === ChatType.Chat ? (
               <p
-                className={`${isOnline ? "text-green-500" : "text-red-500"
-                  } font-poppins text-sm font-medium leading-normal`}
+                className={`${
+                  isOnline ? "text-green-500" : "text-red-500"
+                } font-poppins text-sm font-medium leading-normal`}
               >
                 {isOnline ? "online" : "offline"}
               </p>
@@ -193,13 +211,12 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
               className="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52 absolute right-full"
             >
               <li
-                onClick={async () => {
+                onClick={() => {
                   ChatState.setIsLoading(true);
-                  await blockUserCall(currentUser?.secondUserId).then((res) => {
+                  blockUserCall(currentUser?.secondUserId).then((res) => {
                     ChatState.setIsLoading(false);
                     if (res?.status === 200 || res?.status === 201) {
                       toast.success("User Blocked");
-                      // ChatState.selectNewChatID("1");
                     } else {
                       toast.error("Could Not Block User");
                     }
@@ -225,7 +242,7 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
                       }
                       user.setGameWaitingId(data.gameId);
                       inviteWaitingModalRef.current?.showModal();
-                    }
+                    },
                   );
                 }}
               >
@@ -259,37 +276,31 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
             >
               {(currentRoom?.isAdmin === true ||
                 currentRoom?.isOwner === true) && (
-                  <div className="icons-row flex flex-col">
-                    <a
-                      onClick={() => {
-                        LayoutState.setShowSettingsModal(
-                          !LayoutState.showSettingsModal
-                        );
-                      }}
-                      href="#my_modal_9"
-                      className=""
-                    >
-                      <li>
-                        <span className="hover:bg-[#7940CF]">
-                          Edit Room Settings
-                        </span>
-                      </li>
-                    </a>
-                    <a
-                      onClick={() => {
-                        LayoutState.setShowAddUsersModal(
-                          !LayoutState.showAddUsersModal
-                        );
-                      }}
-                      href="#my_modal_6"
-                      className=""
-                    >
-                      <li>
-                        <span className="hover:bg-[#7940CF]">Add Users</span>
-                      </li>
-                    </a>
-                  </div>
-                )}
+                <div className="icons-row flex flex-col">
+                  <a
+                    onClick={() => LayoutState.setShowSettingsModal(true)}
+                    href="#room-settings-modal"
+                    className=""
+                  >
+                    <li>
+                      <span className="hover:bg-[#7940CF]">
+                        Edit Room Settings
+                      </span>
+                    </li>
+                  </a>
+                  <a
+                    onClick={() => {
+                      LayoutState.setShowAddUsersModal(true);
+                    }}
+                    href="#add-users-modal"
+                    className=""
+                  >
+                    <li>
+                      <span className="hover:bg-[#7940CF]">Add Users</span>
+                    </li>
+                  </a>
+                </div>
+              )}
 
               <li
                 onClick={() => {
@@ -304,21 +315,17 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
                     : "hide Room Info"}
                 </span>
               </li>
-              {/* {currentRoom?.isOwner === false && ( */}
               <div>
                 <li
-                  onClick={async () => {
+                  onClick={() => {
                     ChatState.setIsLoading(true);
-                    await leaveRoomCall(currentRoom?.id as string).then(
-                      (res) => {
-                        ChatState.setIsLoading(false);
-                        if (res?.status === 200 || res?.status === 201) {
-                          toast.success("Room Left Successfully");
-                          // ChatState.changeChatType(ChatType.Chat);
-                          ChatState.deleteRoom(currentRoom?.id as string);
-                        }
+                    leaveRoomCall(currentRoom?.id as string).then((res) => {
+                      ChatState.setIsLoading(false);
+                      if (res?.status === 200 || res?.status === 201) {
+                        toast.success("Room Left Successfully");
+                        ChatState.deleteRoom(currentRoom?.id as string);
                       }
-                    );
+                    });
                   }}
                 >
                   <span className="hover:bg-[#7940CF]">leave The Room</span>
@@ -352,7 +359,6 @@ export const Conversation: React.FC<ConversationProps> = ({
   onRemoveUserPreview,
 }) => {
   const chatState = useChatStore();
-  const currentUserId = useUserStore((state) => state.id);
   const messageContainerRef = useRef<HTMLDivElement>(null);
   const socketStore = useSocketStore();
 
@@ -365,8 +371,6 @@ export const Conversation: React.FC<ConversationProps> = ({
     }
   };
 
-  const [inputValue, setInputValue] = useState("");
-  const [FailToSendMessage, setFail] = useState(false);
   const [IsLoading, setLoading] = useState(true);
   const currentUser = useUserStore((state) => state);
 
@@ -395,11 +399,6 @@ export const Conversation: React.FC<ConversationProps> = ({
     }
   };
 
-  const handleInputChange = (e: { target: { value: React.SetStateAction<string> } }) => {
-    setFail(false);
-    setInputValue(e.target.value);
-  };
-
   const [ref, inView] = useInView({ threshold: 0.5 });
 
   useEffect(() => {
@@ -411,21 +410,20 @@ export const Conversation: React.FC<ConversationProps> = ({
   useEffect(() => {
     if (!socketStore.socket) return;
 
-    socketStore.socket.emit("joinRoom", {
+    socketStore.socket?.emit("joinRoom", {
       memberId: currentUser.id,
       roomId: chatState.selectedChatID,
     });
-    socketStore.socket.emit("PingOnline", {
+    socketStore.socket?.emit("PingOnline", {
       friendId: chatState.currentDmUser.secondUserId,
     });
 
-    // const handle
-    socketStore.socket.on("roomDeparture", handleLeave);
-    socketStore.socket.on("message", handleMessage);
+    socketStore.socket?.on("roomDeparture", handleLeave);
+    socketStore.socket?.on("message", handleMessage);
 
     return () => {
-      socketStore.socket.off("message", handleMessage);
-      socketStore.socket.emit("roomDeparture", {
+      socketStore.socket?.off("message", handleMessage);
+      socketStore.socket?.emit("roomDeparture", {
         roomId: chatState.selectedChatID,
         memberId: currentUser.id,
         type: "out",
@@ -448,13 +446,15 @@ export const Conversation: React.FC<ConversationProps> = ({
           if (!res.data || !res.data.length) {
             setShowLoadMore(false);
           } else {
-            const messages: Message[] = res.data.map((message: APIMessageResponse) => ({
-              id: message.id,
-              avatar: message.avatar,
-              senderId: message.authorId,
-              message: message.content,
-              time: message.time,
-            }));
+            const messages: Message[] = res.data.map(
+              (message: APIMessageResponse) => ({
+                id: message.id,
+                avatar: message.avatar,
+                senderId: message.authorId,
+                message: message.content,
+                time: message.time,
+              }),
+            );
             chatState.fillCurrentMessages([...currentMessages, ...messages]);
           }
         }
@@ -464,51 +464,15 @@ export const Conversation: React.FC<ConversationProps> = ({
     // eslint-disable-next-line
   }, [chatState.selectedChatID, inView]);
 
-  const sendMessage = async () => {
-    if (inputValue.length === 0) return;
-    setInputValue("");
-    const clientMessageId = btoa(Math.random().toString(36)).substring(0, 16);
-
-    const newMessage: Message = {
-      avatar: { thumbnail: '', medium: '', large: '' },
-      senderId: currentUserId,
-      message: inputValue,
-      time: new Date().toISOString(),
-      isPending: true,
-      clientMessageId,
-    };
-    chatState.fillCurrentMessages([newMessage, ...chatState.currentMessages]);
-
-    scrollToBottom();
-
-    sendMessageCall(chatState.selectedChatID, inputValue, clientMessageId).then((res) => {
-      if (res?.status !== 200 && res?.status !== 201) {
-        setFail(true);
-        chatState.selectedChatType === ChatType.Room
-          ? toast.error("you are not authorized to send messages in this room")
-          : toast.error("you are blocked from sending messages to this user");
-        chatState.setMessageAsFailed(res?.data.id);
-        // Remove failed message
-        chatState.removeMessageFromCurrentMessages((e) => e.clientMessageId !== clientMessageId);
-      }
-    });
-  };
-
-  const handleKeyPress = async (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      await sendMessage().then(() => scrollToBottom());
-    }
-  };
-
   return (
     <div className="flex flex-col h-[99%] ">
       <ConversationHeader onRemoveUserPreview={onRemoveUserPreview} />
       <div
         className="flex-grow overflow-auto no-scrollbar relative flex flex-col-reverse flex-shrink basis-0"
-        style={{ overflowAnchor: 'none' }}
+        style={{ overflowAnchor: "none" }}
         ref={messageContainerRef}
       >
-        {(chatState.currentMessages && chatState.currentMessages.length > 0) ? (
+        {chatState.currentMessages && chatState.currentMessages.length > 0 ? (
           chatState.currentMessages.map((message) => (
             <CurrentUserMessage
               key={message.id || Math.random().toString(36)}
@@ -524,41 +488,111 @@ export const Conversation: React.FC<ConversationProps> = ({
         ) : (
           <ChatPlaceHolder message="No Messages Yet!, Send The First" />
         )}
-        {showLoadMore && chatState.currentMessages && chatState.currentMessages.length && <div ref={ref} className="w-full flex items-center justify-center p-2">
-          {IsLoading ? 'Loading...' : 'Load more'}
-        </div>}
-        {IsLoading && (!chatState.currentMessages || !chatState.currentMessages.length) && (
-          <div className="text-center justify-center flex flex-col items-center w-full h-full absolute inset-0 bg-gray-900">
-            <span className="loading loading-spinner loading-lg"></span>
-          </div>
-        )}
+        {showLoadMore &&
+          chatState.currentMessages &&
+          chatState.currentMessages.length && (
+            <div
+              ref={ref}
+              className="w-full flex items-center justify-center p-2"
+            >
+              {IsLoading ? "Loading..." : "Load more"}
+            </div>
+          )}
+        {IsLoading &&
+          (!chatState.currentMessages || !chatState.currentMessages.length) && (
+            <div className="text-center justify-center flex flex-col items-center w-full h-full absolute inset-0 bg-gray-900">
+              <span className="loading loading-spinner loading-lg"></span>
+            </div>
+          )}
       </div>
 
-      <div className="bottom-2">
-        <div className="">
-          <div className="flex flex-row  m-5 justify-evenly ">
-            <div className="flex flex-row w-full justify-center ">
-              <input
-                value={inputValue}
-                onKeyDown={handleKeyPress}
-                onChange={handleInputChange}
-                type="text"
-                placeholder="Type Message "
-                className={`input w-full ${FailToSendMessage && " border-2 border-red-400 "
-                  } shadow-md max-w-lg bg-[#1A1C26]  placeholder:text-gray-400 placeholder:text-xs md:placeholder:text-base font-poppins text-base font-normal leading-normal `}
-              />
-
-              <button
-                onClick={async () => {
-                  await sendMessage().then(() => scrollToBottom());
-                }}
-                className="btn  ml-4 btn-square  bg-[#8C67F6] hover:bg-green-600"
-              >
-                <img src={Send} alt="" />
-              </button>
-            </div>
-          </div>
-        </div>
+      <ConversationInput scrollToBottom={scrollToBottom} />
+    </div>
+  );
+};
+
+interface ConversationInputProps {
+  scrollToBottom: () => void;
+}
+
+const ConversationInput = (props: ConversationInputProps) => {
+  const [inputValue, setInputValue] = useState("");
+  const [FailToSendMessage, setFail] = useState(false);
+
+  const chatState = useChatStore();
+  const currentUserId = useUserStore((state) => state.id);
+
+  const sendMessage = () => {
+    if (inputValue.length === 0) return;
+    setInputValue("");
+    const clientMessageId = btoa(Math.random().toString(36)).substring(0, 16);
+
+    const newMessage: Message = {
+      avatar: { thumbnail: "", medium: "", large: "" },
+      senderId: currentUserId,
+      message: inputValue,
+      time: new Date().toISOString(),
+      isPending: true,
+      clientMessageId,
+    };
+    chatState.fillCurrentMessages([newMessage, ...chatState.currentMessages]);
+
+    props.scrollToBottom();
+
+    sendMessageCall(chatState.selectedChatID, inputValue, clientMessageId).then(
+      (res) => {
+        if (res?.status !== 200 && res?.status !== 201) {
+          setFail(true);
+          if (res?.data.message) {
+            toast.error(res.data.message);
+          } else {
+            toast.error("You cannot send a message at the moment");
+          }
+          chatState.setMessageAsFailed(res?.data.id);
+          // Remove failed message
+          chatState.removeMessageFromCurrentMessages(
+            (e) => e.clientMessageId !== clientMessageId,
+          );
+        }
+      },
+    );
+  };
+
+  const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      sendMessage();
+    }
+  };
+
+  const handleInputChange = (e: {
+    target: { value: React.SetStateAction<string> };
+  }) => {
+    setFail(false);
+    setInputValue(e.target.value);
+  };
+
+  return (
+    <div className="flex flex-row  m-5 justify-evenly">
+      <div className="flex flex-row w-full justify-center mb-[8vh] sm:mb-0">
+        <input
+          value={inputValue}
+          onKeyDown={handleKeyPress}
+          onChange={handleInputChange}
+          type="text"
+          placeholder="Type Message "
+          className={`input w-full ${
+            FailToSendMessage && " border-2 border-red-400 "
+          } shadow-md max-w-lg bg-[#1A1C26]  placeholder:text-gray-400 placeholder:text-xs md:placeholder:text-base font-poppins text-base font-normal leading-normal `}
+        />
+
+        <button
+          onClick={() => {
+            sendMessage();
+          }}
+          className="btn  ml-4 btn-square  bg-[#8C67F6] hover:bg-green-600"
+        >
+          <img src={Send} alt="" />
+        </button>
       </div>
     </div>
   );
diff --git a/frontend/code/src/Components/Chat/Components/RecentChat.tsx b/frontend/code/src/Components/Chat/Components/RecentChat.tsx
index 9292a22..705c3a0 100644
--- a/frontend/code/src/Components/Chat/Components/RecentChat.tsx
+++ b/frontend/code/src/Components/Chat/Components/RecentChat.tsx
@@ -12,7 +12,7 @@ import {
   check,
 } from "./tools/Assets";
 
-import { NullPlaceHolder, RoomChatPlaceHolder } from "./RoomChatHelpers";
+import { NullPlaceHolder } from "./RoomChatHelpers";
 import { useModalStore } from "../Controllers/LayoutControllers";
 import {
   createNewRoomCall,
@@ -28,7 +28,6 @@ import { useInView } from "react-intersection-observer";
 
 export const RecentConversations = () => {
   const [isLoading, setLoading] = useState(false);
-  const selectedChatType = useChatStore((state) => state.selectedChatType);
   const ChatRoomsState = useChatStore((state) => state);
 
   const [ref, inView] = useInView();
@@ -42,49 +41,53 @@ export const RecentConversations = () => {
 
     offset === 0 && setLoading(true);
 
-    fetchDmsCall(offset, 7).then((res) => {
-      if (res?.status !== 200 && res?.status !== 201) {
-      } else {
-        const rooms: DmRoom[] = [];
-        res.data.forEach(
-          (room: {
-            secondMemberId: string;
-            id: string;
-            last_message?: {
-              content?: string;
-              createdAt?: string;
-            };
-            name: string;
+    fetchDmsCall(offset, 7)
+      .then((res) => {
+        if (res?.status !== 200 && res?.status !== 201) {
+        } else {
+          const rooms: DmRoom[] = [];
+          res.data.forEach(
+            (room: {
+              secondMemberId: string;
+              id: string;
+              last_message?: {
+                content?: string;
+                createdAt?: string;
+              };
+              name: string;
 
-            avatar: {
-              thumbnail: string;
-              medium: string;
-              large: string;
-            };
-            bio: string;
-          }) => {
-            // to check if not exist
-            rooms.push({
-              secondUserId: room.secondMemberId,
-              id: room.id,
-              name: room.name,
-              avatar: room.avatar,
-              last_message: {
-                content: room.last_message?.content,
-                createdAt: room.last_message?.createdAt,
-              },
-              bio: room.bio,
-            });
-          }
-        );
+              avatar: {
+                thumbnail: string;
+                medium: string;
+                large: string;
+              };
+              bio: string;
+            }) => {
+              // to check if not exist
+              rooms.push({
+                secondUserId: room.secondMemberId,
+                id: room.id,
+                name: room.name,
+                avatar: room.avatar,
+                last_message: {
+                  content: room.last_message?.content,
+                  createdAt: room.last_message?.createdAt,
+                },
+                bio: room.bio,
+              });
+            },
+          );
 
-        if (res.data.length > 0) {
-          ChatRoomsState.fillRecentDms([...ChatRoomsState.recentDms, ...rooms]);
-        } else {
-          setEndOfFetching(true);
+          if (res.data.length > 0) {
+            ChatRoomsState.fillRecentDms([
+              ...ChatRoomsState.recentDms,
+              ...rooms,
+            ]);
+          } else {
+            setEndOfFetching(true);
+          }
         }
-      }
-    })
+      })
       .finally(() => setLoading(false));
   };
 
@@ -93,7 +96,7 @@ export const RecentConversations = () => {
     // eslint-disable-next-line
   }, [inView]);
 
-  return selectedChatType === ChatType.Chat ? (
+  return (
     <div className="h-full flex flex-col ">
       <OnlineNowUsers />
       {ChatRoomsState.recentDms.length > 0 ? (
@@ -112,20 +115,36 @@ export const RecentConversations = () => {
               userImage={friend.avatar.medium}
             />
           ))}
-          {!EndOfFetching && <div ref={ref} className="flex justify-center items-center h-2 py-5">
-            <span className="text-xs font-light font-poppins text-gray-400">
-              Loading...
-            </span>
-          </div>}
-          {EndOfFetching && <div ref={ref} className="flex justify-center items-center h-2 py-5">
-            <span className="text-xs font-light font-poppins text-gray-400">
-              No more dm... <span className="underline decoration-dashed cursor-pointer" onClick={() => {
-                setEndOfFetching(false); // Reset
-                ChatRoomsState.fillRecentDms([]); // Reset
-                setTimeout(() => fetchDms(true), 100);
-              }}>Refresh!</span>
-            </span>
-          </div>}
+          {!EndOfFetching && (
+            <div
+              ref={ref}
+              className="flex justify-center items-center h-2 py-5"
+            >
+              <span className="text-xs font-light font-poppins text-gray-400">
+                Loading...
+              </span>
+            </div>
+          )}
+          {EndOfFetching && (
+            <div
+              ref={ref}
+              className="flex justify-center items-center h-2 py-5"
+            >
+              <span className="text-xs font-light font-poppins text-gray-400">
+                No more dm...{" "}
+                <span
+                  className="underline decoration-dashed cursor-pointer"
+                  onClick={() => {
+                    setEndOfFetching(false); // Reset
+                    ChatRoomsState.fillRecentDms([]); // Reset
+                    setTimeout(() => fetchDms(true), 100);
+                  }}
+                >
+                  Refresh!
+                </span>
+              </span>
+            </div>
+          )}
         </div>
       ) : (
         <>
@@ -139,13 +158,6 @@ export const RecentConversations = () => {
         </>
       )}
     </div>
-  ) : (
-    <div className="h-full flex flex-col">
-      <OnlineNowUsers />
-      <div className="flex-grow overflow-y-auto no-scrollbar">
-        <RoomChatPlaceHolder />
-      </div>
-    </div>
   );
 };
 
@@ -181,8 +193,9 @@ export const ChatPlaceHolder = ({
           },
         });
       }}
-      className={`message-container flex   px-4 py-5  hover:bg-[#272932] items-center  ${selectedChatID === id ? "bg-[#272932]" : "bg-[#1A1C26]"
-        }`}
+      className={`message-container flex   px-4 py-5  hover:bg-[#272932] items-center  ${
+        selectedChatID === id ? "bg-[#272932]" : "bg-[#1A1C26]"
+      }`}
     >
       <div className="user-image flex-shrink-0 mr-2">
         <img
@@ -227,7 +240,7 @@ export const OnlineNowUsers = () => {
   const navigate = useNavigate();
   const [Users, setUsers] = useState<RoomMember[]>([]);
 
-  const setModalState = useModalStore((state) => state.setShowExploreModal);
+  const modalState = useModalStore();
 
   const handleListOfOnline = (ids: string[]) => {
     ids.forEach((id) => {
@@ -263,7 +276,7 @@ export const OnlineNowUsers = () => {
                 // to inject it with the real images later
                 avatar: friend.avatar,
               } as RoomMember);
-            }
+            },
           );
 
           setUsers(friends);
@@ -271,7 +284,7 @@ export const OnlineNowUsers = () => {
         }
       });
     };
-    socketStore.socket.on("onlineFriends", handleListOfOnline);
+    socketStore.socket?.on("onlineFriends", handleListOfOnline);
     fetchFriends();
     // eslint-disable-next-line
   }, [chatState.onlineFriendsIds.length]);
@@ -284,25 +297,27 @@ export const OnlineNowUsers = () => {
             Messages
           </p>
 
-          <div className="icons-row flex flex-row items-center  ">
-            <a href="#my_modal_8" className="pr-2">
+          <div className="icons-row flex flex-row items-center gap-2">
+            <a
+              href="#create-room-modal"
+              onClick={() => modalState.setShowCreateChatRoomModal(true)}
+            >
               <img className="w-[80%]" alt="" src={GroupChat} />
             </a>
-            <a href="#my_modal_5" className="">
-              <img
-                className="w-[100%]"
-                alt=""
-                onClick={() => setModalState(true)}
-                src={Explore}
-              />
+            <a
+              href="#explorer-modal"
+              onClick={() => modalState.setShowExploreModal(true)}
+            >
+              <img className="w-[100%]" alt="" src={Explore} />
             </a>
           </div>
         </div>
         <div className="Message-Type-Buttons flex flex-row pt-2 pb-2 justify-between ">
           <button
             onClick={() => changeChatType(ChatType.Chat)}
-            className={`${selectedChatType === ChatType.Chat ? "bg-[#272932]" : ""
-              } flex-1 p-2 rounded ] `}
+            className={`${
+              selectedChatType === ChatType.Chat ? "bg-[#272932]" : ""
+            } flex-1 p-2 rounded`}
           >
             <div className=" flex flex-row justify-center ">
               <p className="text-gray-300 font-poppins text-base font-medium leading-normal pr-3 hidden md:block ">
@@ -313,8 +328,9 @@ export const OnlineNowUsers = () => {
           </button>
           <button
             onClick={() => changeChatType(ChatType.Room)}
-            className={`${selectedChatType === ChatType.Room ? "bg-[#272932]" : ""
-              } flex-1 p-2 rounded  `}
+            className={`${
+              selectedChatType === ChatType.Room ? "bg-[#272932]" : ""
+            } flex-1 p-2 rounded  `}
           >
             <div className="flex flex-row justify-center">
               <p className="text-gray-300 font-poppins text-base font-medium leading-normal pr-3 hidden md:block">
@@ -354,10 +370,10 @@ export const OnlineNowUsers = () => {
                                     ?.lastname) as string,
                                 avatar: Users.find((u) => u.id === user)
                                   ?.avatar as {
-                                    thumbnail: string;
-                                    medium: string;
-                                    large: string;
-                                  },
+                                  thumbnail: string;
+                                  medium: string;
+                                  large: string;
+                                },
                                 bio: Users.find((u) => u.id === user)
                                   ?.bio as string,
                               });
@@ -365,10 +381,10 @@ export const OnlineNowUsers = () => {
                               navigate(`/Dm/${res?.data.id}`);
                             } else {
                               toast.error(
-                                "You Can't Send Message To this User For Now, try Again later"
+                                "You Can't Send Message To this User For Now, try Again later",
                               );
                             }
-                          }
+                          },
                         );
                       }}
                     >
diff --git a/frontend/code/src/Components/Chat/Components/RoomChatHelpers.tsx b/frontend/code/src/Components/Chat/Components/RoomChatHelpers.tsx
index 1e7683f..64e7d51 100644
--- a/frontend/code/src/Components/Chat/Components/RoomChatHelpers.tsx
+++ b/frontend/code/src/Components/Chat/Components/RoomChatHelpers.tsx
@@ -1,4 +1,4 @@
-import { SetStateAction, useCallback, useEffect, useState } from "react";
+import React, { SetStateAction, useCallback, useEffect, useState } from "react";
 import { ChatType, useChatStore } from "../Controllers/RoomChatControllers";
 import {
   ChatGif,
@@ -34,6 +34,7 @@ import { getBlockedCall, unblockCall } from "../Services/FriendsServices";
 import { useSocketStore } from "../Services/SocketsServices";
 import { useInView } from "react-intersection-observer";
 import { classNames } from "../../../Utils/helpers";
+import { OnlineNowUsers } from "./RecentChat";
 
 interface NullComponentProps {
   message: string;
@@ -47,6 +48,8 @@ export const RoomChatPlaceHolder = () => {
   const [ref, inView] = useInView();
   const [EndOfFetching, setEndOfFetching] = useState(false);
   const fetchRooms = useCallback(async () => {
+    setIsLoading(true);
+
     const offset = ChatRoomsState.recentRooms.length;
     offset === 0 && setIsLoading(true);
 
@@ -78,7 +81,7 @@ export const RoomChatPlaceHolder = () => {
               membersCount: room.countMembers,
               last_message: room.last_message,
             });
-          }
+          },
         );
         setIsLoading(false);
         if (res.data.length > 0) {
@@ -117,71 +120,79 @@ export const RoomChatPlaceHolder = () => {
     // eslint-disable-next-line
   }, [inView]);
 
-  return ChatRoomsState.recentRooms.length > 0 ? (
-    <div className="bg-[#1A1C26] h-full">
-      {ChatRoomsState.recentRooms.map((room) => (
-        <div
-          key={room.id}
-          onClick={() => selectNewChat(room.id)}
-          className={`message-container flex   px-4 py-5  hover:bg-[#272932] items-center  ${ChatRoomsState.selectedChatID === room.id
-              ? "bg-[#272932]"
-              : "bg-[#1A1C26]"
-            }
+  return (
+    <div className="h-full flex flex-col">
+      <OnlineNowUsers />
+      <div className="flex-grow overflow-y-auto no-scrollbar">
+        {ChatRoomsState.recentRooms.length > 0 ? (
+          <div className="bg-[#1A1C26] h-full">
+            {ChatRoomsState.recentRooms.map((room) => (
+              <div
+                key={room.id}
+                onClick={() => selectNewChat(room.id)}
+                className={`message-container flex   px-4 py-5  hover:bg-[#272932] items-center  ${
+                  ChatRoomsState.selectedChatID === room.id
+                    ? "bg-[#272932]"
+                    : "bg-[#1A1C26]"
+                }
               
                 `}
-        >
-          <div className="user-image flex-shrink-0 mr-2">
-            <img
-              className="user-image h-10 w-10 rounded-full"
-              src={groupIcon}
-              alt={`second's Profile`}
-            />
-          </div>
-          <div className="message-colum align-middle flex flex-col flex-grow">
-            <div className="message-row flex flex-row justify-between">
-              <div className="flex flex-col">
-                <p className="text-white font-poppins text-sm md:text-base font-normal leading-normal   ">
-                  {room?.name}
-                </p>
-                <p className="text-gray-400 font-poppins text-sm font-light leading-normal"></p>
-              </div>
-              <p className="text-gray-400 font-poppins text-sm font-light leading-normal hidden md:block ">
-                {room?.membersCount} Members
-              </p>
-            </div>
-            <div className=" flex flex-row justify-between pt-1 text-base">
-              <p className="text-gray-400 font-poppins text-sm font-medium leading-normal max-w-[80px] md:max-w-[180px]  truncate hidden md:block ">
-                {room.last_message?.content ?? "No Messages*"}
-              </p>
-              {room.last_message !== null && (
-                <div className="">
-                  <p className="text-gray-400 font-poppins text-xs font-light leading-normal">
-                    {formatTime(room.last_message?.createdAt ?? "")}
-                  </p>
+              >
+                <div className="user-image flex-shrink-0 mr-2">
+                  <img
+                    className="user-image h-10 w-10 rounded-full"
+                    src={groupIcon}
+                    alt={`second's Profile`}
+                  />
                 </div>
-              )}
+                <div className="message-colum align-middle flex flex-col flex-grow">
+                  <div className="message-row flex flex-row justify-between">
+                    <div className="flex flex-col">
+                      <p className="text-white font-poppins text-sm md:text-base font-normal leading-normal   ">
+                        {room?.name}
+                      </p>
+                      <p className="text-gray-400 font-poppins text-sm font-light leading-normal"></p>
+                    </div>
+                    <p className="text-gray-400 font-poppins text-sm font-light leading-normal hidden md:block ">
+                      {room?.membersCount} Members
+                    </p>
+                  </div>
+                  <div className=" flex flex-row justify-between pt-1 text-base">
+                    <p className="text-gray-400 font-poppins text-sm font-medium leading-normal max-w-[80px] md:max-w-[180px]  truncate hidden md:block ">
+                      {room.last_message?.content ?? "No Messages*"}
+                    </p>
+                    {room.last_message !== null && (
+                      <div className="">
+                        <p className="text-gray-400 font-poppins text-xs font-light leading-normal">
+                          {formatTime(room.last_message?.createdAt ?? "")}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ))}
+            <div
+              ref={ref}
+              className="flex justify-center items-center h-2 py-5 
+								"
+            >
+              <span className="text-xs font-light font-poppins text-gray-400">
+                {EndOfFetching ? "No more Rooms" : "Loading..."}
+              </span>
             </div>
           </div>
-        </div>
-      ))}
-      <div
-        ref={ref}
-        className="flex justify-center items-center h-2 py-5 
-								"
-      >
-        <span className="text-xs font-light font-poppins text-gray-400">
-          {EndOfFetching ? "No more Rooms" : "Loading..."}
-        </span>
+        ) : (
+          <div className="p-3 text-center bg-[#1A1C26] h-full">
+            {isLoading === true ? (
+              <span className="loading loading-spinner loading-lg"></span>
+            ) : (
+              <NullPlaceHolder message="You have No Rooms Yet!, Create One" />
+            )}
+          </div>
+        )}
       </div>
     </div>
-  ) : (
-    <div className="p-3 text-center bg-[#1A1C26] h-full">
-      {isLoading === true ? (
-        <span className="loading loading-spinner loading-lg"></span>
-      ) : (
-        <NullPlaceHolder message="You have No Rooms Yet!, Create One" />
-      )}
-    </div>
   );
 };
 
@@ -189,29 +200,75 @@ export const CreateNewRoomModal = () => {
   const [RoomName, setName] = useState("");
   const [RoomPassword, setPassword] = useState("");
 
-  const handlePasswordChange = (event: {
-    target: { value: SetStateAction<string> };
-  }) => {
+  const [selectedOption, setSelectedOption] = useState(RoomType.public);
+  const setIsLoading = useChatStore((state) => state.setIsLoading);
+  const chatState = useChatStore((state) => state);
+
+  const modalState = useModalStore();
+
+  const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setPassword(event.target.value);
   };
-  const handleChange = (event: {
-    target: { value: SetStateAction<string> };
-  }) => {
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setName(event.target.value);
   };
 
-  const [selectedOption, setSelectedOption] = useState(RoomType.public);
-  const setIsLoading = useChatStore((state) => state.setIsLoading);
-  const chatState = useChatStore((state) => state);
-
   const resetModalState = () => {
     setPassword("");
     setName("");
     setSelectedOption(RoomType.public);
+
+    window.history.pushState(
+      "",
+      document.title,
+      window.location.pathname + window.location.search,
+    );
+    modalState.setShowCreateChatRoomModal(false);
+  };
+
+  const handleClose = (e: React.MouseEvent) => {
+    e.preventDefault();
+    resetModalState();
+  };
+
+  const handleCreate = (e: React.MouseEvent) => {
+    e.preventDefault();
+
+    if (RoomName !== "" && RoomName.length > 3 && RoomName.length < 20) {
+      if (RoomPassword.length < 8 && selectedOption === RoomType.protected) {
+        toast.error("password must be at least 8 characters");
+        resetModalState();
+        return;
+      }
+      setIsLoading(true);
+      createNewRoomCall(
+        RoomName,
+        RoomType[selectedOption],
+        selectedOption === RoomType.protected ? RoomPassword : undefined,
+      ).then((res) => {
+        if (res?.status !== 200 && res?.status !== 201) {
+          toast.error(res?.data?.message || "something went wrong, try again");
+          resetModalState();
+        } else {
+          toast.success("Room Created Successfully");
+
+          chatState.changeChatType(ChatType.Room);
+          chatState.setOnRoomsChange(!chatState.recentRoomsOnchange);
+
+          resetModalState();
+        }
+        setIsLoading(false);
+      });
+    } else {
+      toast.error("Room name must be at least 4 characters and less than 20 ");
+      resetModalState();
+    }
   };
+
   return (
-    <div className="modal w-screen " id="my_modal_8">
-      <div className="modal-box bg-[#1A1C26]  no-scrollbar  w-[85%] md:w-[50%] ">
+    <div className="modal w-screen" id="create-room-modal">
+      <div className="modal-box bg-[#1A1C26]  no-scrollbar w-[85%] md:w-[50%]">
         <div className="flex flex-col">
           <div className="flex flex-row justify-center">
             <p className="text-purple-500 font-poppins text-lg font-medium leading-normal">
@@ -280,67 +337,21 @@ export const CreateNewRoomModal = () => {
               </div>
             </div>
           )}
-          {/*  */}
 
           <div className="modal-action ">
             <a
-              href="#/"
-              onClick={resetModalState}
+              href="#"
+              onClick={handleClose}
               className="btn hover:bg-purple-500"
             >
-              {"Close "}
+              Close
             </a>
             <a
-              href="#/"
-              onClick={async () => {
-                if (
-                  RoomName !== "" &&
-                  RoomName.length > 3 &&
-                  RoomName.length < 20
-                ) {
-                  if (
-                    RoomPassword.length < 8 &&
-                    selectedOption === RoomType.protected
-                  ) {
-                    console.log(selectedOption);
-                    toast.error("password must be at least 8 characters");
-                    resetModalState();
-                    return;
-                  }
-                  setIsLoading(true);
-                  await createNewRoomCall(
-                    RoomName,
-                    RoomType[selectedOption],
-                    selectedOption === RoomType.protected
-                      ? RoomPassword
-                      : undefined
-                  ).then((res) => {
-                    if (res?.status !== 200 && res?.status !== 201) {
-                      toast.error("something went wrong, try again");
-                      resetModalState();
-                    } else {
-                      toast.success("Room Created Successfully");
-                      // createNewRoom(RoomName, selectedOption, res.data.id);
-
-                      chatState.changeChatType(ChatType.Room);
-                      chatState.setOnRoomsChange(
-                        !chatState.recentRoomsOnchange
-                      );
-                      // chatState.fillRecentRooms([
-                      resetModalState();
-                    }
-                    setIsLoading(false);
-                  });
-                } else {
-                  toast.error(
-                    "Room name must be at least 4 characters and less than 20 "
-                  );
-                  resetModalState();
-                }
-              }}
+              href="#"
+              onClick={handleCreate}
               className="btn hover:bg-purple-500"
             >
-              {"Create "}
+              Create
             </a>
           </div>
         </div>
@@ -356,7 +367,7 @@ export const FriendTile = (props: { user: RoomMember }) => {
   const user = props.user;
 
   return (
-    <div key={user.id}>
+    <div>
       <div className="flex flex-row justify-between p-3">
         <div className="flex flex-row items-center space-x-3">
           <div className="pr-1">
@@ -374,21 +385,17 @@ export const FriendTile = (props: { user: RoomMember }) => {
 
         <div>
           <button
-            onClick={async () => {
+            onClick={() => {
               setIsAdding(true);
-              await takeActionCall(selectedChatID, user.id, "add").then(
-                (res) => {
-                  setIsAdding(false);
-                  if (res?.status === 200 || res?.status === 201) {
-                    LayoutState.setShowAddUsersModal(
-                      !LayoutState.showAddUsersModal
-                    );
-                    toast.success("User Added Successfully");
-                  }
+              takeActionCall(selectedChatID, user.id, "add").then((res) => {
+                setIsAdding(false);
+                if (res?.status === 200 || res?.status === 201) {
+                  LayoutState.setShowAddUsersModal(false);
+                  toast.success("User Added Successfully");
                 }
-              );
+              });
             }}
-            className="btn  swap swap-rotate bg-purple-500 p-3 rounded-xl text-white hover:bg-blue-400"
+            className="btn swap swap-rotate bg-purple-500 p-3 rounded-xl text-white hover:bg-blue-400"
           >
             <p className="swap-off fill-current">
               {IsAdding === true ? "ADDING..." : "ADD"}
@@ -429,14 +436,12 @@ export const BlockedFriendTile = (props: { user: RoomMember }) => {
               await unblockCall(user.id).then((res) => {
                 setIsAdding(false);
                 if (res?.status === 200 || res?.status === 201) {
-                  LayoutState.setShowBlockedList(
-                    !LayoutState.showBlockedLIstModal
-                  );
+                  LayoutState.setShowBlockedListModal(false);
                   toast.success("User Unblocked Successfully");
                 }
               });
             }}
-            className="btn  swap swap-rotate bg-purple-500 p-3 rounded-xl text-white hover:bg-blue-400"
+            className="btn swap swap-rotate bg-purple-500 p-3 rounded-xl text-white hover:bg-blue-400"
           >
             <p className="swap-off fill-current">
               {IsAdding === true ? "UNBLOCKING..." : "UNBLOCK"}
@@ -453,55 +458,62 @@ export const BlockedUsersModal = () => {
   const LayoutState = useModalStore((state) => state);
   const [IsLoading, setIsLoading] = useState(false);
 
-  const [skipCount, setSkipCount] = useState(true);
+  const resetModalState = () => {
+    window.history.pushState(
+      "",
+      document.title,
+      window.location.pathname + window.location.search,
+    );
+    LayoutState.setShowBlockedListModal(false);
+  };
 
   useEffect(() => {
-    if (skipCount) setSkipCount(false);
-    if (!skipCount) {
-      const fetchData = async () => {
-        try {
-          setIsLoading(true);
+    if (!LayoutState.showBlockedListModal) return;
 
-          await getBlockedCall(0, 20).then((res) => {
-            setIsLoading(false);
-            if (res?.status === 200 || res?.status === 201) {
-              const friends: RoomMember[] = [];
-              res.data.forEach(
-                (friend: {
-                  userId: string;
-                  firstname: string;
-                  lastname: string;
-                  avatar?: {
-                    thumbnail: string;
-                    medium: string;
-                    large: string;
-                  };
-                }) => {
-                  friends.push({
-                    id: friend.userId,
-                    firstname: friend.firstname,
-                    lastname: friend.lastname,
-                    // to inject it with the real images later
-                    avatar: friend.avatar,
-                  } as RoomMember);
-                }
-              );
+    const fetchData = async () => {
+      try {
+        setIsLoading(true);
 
-              setUsers(friends);
-            } else {
-            }
-          });
-        } catch (error) {
-          console.error("Error fetching data: ", error);
-        }
-      };
+        await getBlockedCall(0, 20).then((res) => {
+          setIsLoading(false);
+          if (res?.status === 200 || res?.status === 201) {
+            const friends: RoomMember[] = [];
+            res.data.forEach(
+              (friend: {
+                userId: string;
+                firstname: string;
+                lastname: string;
+                avatar?: {
+                  thumbnail: string;
+                  medium: string;
+                  large: string;
+                };
+              }) => {
+                friends.push({
+                  id: friend.userId,
+                  firstname: friend.firstname,
+                  lastname: friend.lastname,
+                  // to inject it with the real images later
+                  avatar: friend.avatar,
+                } as RoomMember);
+              },
+            );
 
-      fetchData();
-    }
+            setUsers(friends);
+          } else {
+          }
+        });
+      } catch (error) {
+        // Do nothing
+      }
+    };
+
+    fetchData();
     // eslint-disable-next-line
-  }, [LayoutState.showBlockedLIstModal]);
+  }, [LayoutState.showBlockedListModal]);
+
   return (
-    <div className="modal w-screen " id="my_modal_3">
+    <div className="modal w-screen " id="blocked-users-modal">
       <div className="modal-box bg-[#1A1C26]  no-scrollbar  w-[85%] md:w-[50%] ">
         <div className="flex flex-col">
           <div className="flex flex-row justify-center">
@@ -526,11 +538,15 @@ export const BlockedUsersModal = () => {
           )}
 
           <div className="modal-action ">
-            <a href="#/" className="btn hover:bg-purple-500">
-              {"Close "}
-            </a>
-            <a href="#/" className="btn hover:bg-purple-500">
-              {"Done "}
+            <a
+              href="#"
+              className="btn hover:bg-purple-500"
+              onClick={(e) => {
+                e.preventDefault();
+                resetModalState();
+              }}
+            >
+              Close
             </a>
           </div>
         </div>
@@ -549,7 +565,6 @@ export const FriendStatusTile = (props: { user: RoomMember }) => {
       "status",
       { userId: user.id },
       (data: { status: string; inGame: boolean }) => {
-        console.log(data);
         if (data.status === "online" && !data.inGame) {
           setOnlineStatus("online");
         } else if (data.status === "online" && data.inGame) {
@@ -557,7 +572,7 @@ export const FriendStatusTile = (props: { user: RoomMember }) => {
         } else {
           setOnlineStatus("offline");
         }
-      }
+      },
     );
   }, [user.id, socketStore?.socket]);
   return (
@@ -565,11 +580,13 @@ export const FriendStatusTile = (props: { user: RoomMember }) => {
       <div className="flex flex-row justify-between p-3">
         <div className="flex flex-row items-center space-x-3">
           <div className="pr-1">
-            <img
-              className="w-12 rounded-full "
-              alt=""
-              src={user?.avatar?.medium}
-            />
+            <a href={`/profile/${user?.id}`}>
+              <img
+                className="w-12 rounded-full "
+                alt=""
+                src={user?.avatar?.medium}
+              />
+            </a>
           </div>
 
           <p className="text-white font-poppins text-base font-medium leading-normal">
@@ -584,8 +601,8 @@ export const FriendStatusTile = (props: { user: RoomMember }) => {
               onlineStatus === "online"
                 ? "text-green-500 border-green-500"
                 : onlineStatus === "inGame"
-                ? "text-yellow-500 border-yellow-500"
-                : "text-red-500 border-red-500"
+                  ? "text-yellow-500 border-yellow-500"
+                  : "text-red-500 border-red-500",
             )}
           >
             {onlineStatus}
@@ -602,55 +619,62 @@ export const FriendsListModal = () => {
   const LayoutState = useModalStore((state) => state);
   const [IsLoading, setIsLoading] = useState(false);
 
-  const [skipCount, setSkipCount] = useState(true);
+  const resetModalState = () => {
+    window.history.pushState(
+      "",
+      document.title,
+      window.location.pathname + window.location.search,
+    );
+    LayoutState.setShowFriendsListModal(false);
+  };
 
   useEffect(() => {
-    if (skipCount) setSkipCount(false);
-    if (!skipCount) {
-      const fetchData = async () => {
-        try {
-          setIsLoading(true);
+    if (!LayoutState.showFriendsListModal) return;
 
-          await getFriendsCall(0, 0).then((res) => {
-            setIsLoading(false);
-            if (res?.status === 200 || res?.status === 201) {
-              const friends: RoomMember[] = [];
-              res.data.forEach(
-                (friend: {
-                  userId: string;
-                  firstname: string;
-                  lastname: string;
-                  avatar: {
-                    thumbnail: string;
-                    medium: string;
-                    large: string;
-                  };
-                }) => {
-                  friends.push({
-                    id: friend.userId,
-                    firstname: friend.firstname,
-                    lastname: friend.lastname,
-                    // to inject it with the real images later
-                    avatar: friend.avatar,
-                  } as RoomMember);
-                }
-              );
+    const fetchData = async () => {
+      try {
+        setIsLoading(true);
 
-              setUsers(friends);
-            } else {
-            }
-          });
-        } catch (error) {
-          console.error("Error fetching data: ", error);
-        }
-      };
+        await getFriendsCall(0, 0).then((res) => {
+          setIsLoading(false);
+          if (res?.status === 200 || res?.status === 201) {
+            const friends: RoomMember[] = [];
+            res.data.forEach(
+              (friend: {
+                userId: string;
+                firstname: string;
+                lastname: string;
+                avatar: {
+                  thumbnail: string;
+                  medium: string;
+                  large: string;
+                };
+              }) => {
+                friends.push({
+                  id: friend.userId,
+                  firstname: friend.firstname,
+                  lastname: friend.lastname,
+                  // to inject it with the real images later
+                  avatar: friend.avatar,
+                } as RoomMember);
+              },
+            );
+
+            setUsers(friends);
+          } else {
+          }
+        });
+      } catch (error) {
+        // Do nothing
+      }
+    };
+
+    fetchData();
 
-      fetchData();
-    }
     // eslint-disable-next-line
   }, [LayoutState.showFriendsListModal]);
   return (
-    <div className="modal w-screen " id="my_modal_1">
+    <div className="modal w-screen " id="friends-list-modal">
       <div className="modal-box bg-[#1A1C26]  no-scrollbar  w-[85%] md:w-[50%] ">
         <div className="flex flex-col">
           <div className="flex flex-row justify-center">
@@ -674,12 +698,16 @@ export const FriendsListModal = () => {
             </div>
           )}
 
-          <div className="modal-action ">
-            <a href="#/" className="btn hover:bg-purple-500">
-              {"Close "}
-            </a>
-            <a href="#/" className="btn hover:bg-purple-500">
-              {"Done "}
+          <div className="modal-action">
+            <a
+              href="#"
+              className="btn hover:bg-purple-500"
+              onClick={(e) => {
+                e.preventDefault();
+                resetModalState();
+              }}
+            >
+              Close
             </a>
           </div>
         </div>
@@ -694,70 +722,77 @@ export const AddUsersModal = () => {
   const LayoutState = useModalStore((state) => state);
   const [IsLoading, setIsLoading] = useState(false);
 
-  const [skipCount, setSkipCount] = useState(true);
   const ChatState = useChatStore((state) => state);
 
+  const resetModalState = () => {
+    window.history.pushState(
+      "",
+      document.title,
+      window.location.pathname + window.location.search,
+    );
+    LayoutState.setShowAddUsersModal(false);
+  };
+
   useEffect(() => {
-    if (skipCount) setSkipCount(false);
-    if (!skipCount) {
-      const fetchData = async () => {
-        try {
-          setIsLoading(true);
-
-          await getRoomMembersCall(
-            ChatState.selectedChatID as string,
-            0,
-            20
-          ).then((res) => {
-            setIsLoading(false);
-            if (res?.status === 200 || res?.status === 201) {
-              const extractedData = res.data;
-              setRoomMembers(extractedData);
-            } else {
-              console.log("wrong");
-            }
-          });
+    if (!LayoutState.showAddUsersModal) return;
+
+    const fetchData = async () => {
+      try {
+        setIsLoading(true);
+
+        await getRoomMembersCall(
+          ChatState.selectedChatID as string,
+          0,
+          20,
+        ).then((res) => {
+          setIsLoading(false);
+          if (res?.status === 200 || res?.status === 201) {
+            const extractedData = res.data;
+            setRoomMembers(extractedData);
+          } else {
+            // Do nothing
+          }
+        });
 
-          await getFriendsCall(0, 20).then((res) => {
-            setIsLoading(false);
-            if (res?.status === 200 || res?.status === 201) {
-              const friends: RoomMember[] = [];
-              res.data.forEach(
-                (friend: {
-                  userId: string;
-                  firstname: string;
-                  lastname: string;
-                  avatar: {
-                    thumbnail: string;
-                    medium: string;
-                    large: string;
-                  };
-                }) => {
-                  friends.push({
-                    id: friend.userId,
-                    firstname: friend.firstname,
-                    lastname: friend.lastname,
-                    // to inject it with the real images later
-                    avatar: friend.avatar,
-                  } as RoomMember);
-                }
-              );
+        await getFriendsCall(0, 20).then((res) => {
+          setIsLoading(false);
+          if (res?.status === 200 || res?.status === 201) {
+            const friends: RoomMember[] = [];
+            res.data.forEach(
+              (friend: {
+                userId: string;
+                firstname: string;
+                lastname: string;
+                avatar: {
+                  thumbnail: string;
+                  medium: string;
+                  large: string;
+                };
+              }) => {
+                friends.push({
+                  id: friend.userId,
+                  firstname: friend.firstname,
+                  lastname: friend.lastname,
+                  // to inject it with the real images later
+                  avatar: friend.avatar,
+                } as RoomMember);
+              },
+            );
 
-              setUsers(friends);
-            } else {
-            }
-          });
-        } catch (error) {
-          console.error("Error fetching data: ", error);
-        }
-      };
+            setUsers(friends);
+          } else {
+          }
+        });
+      } catch (error) {
+        // Do nothing
+      }
+    };
 
-      fetchData();
-    }
+    fetchData();
     // eslint-disable-next-line
   }, [LayoutState.showAddUsersModal]);
   return (
-    <div className="modal w-screen " id="my_modal_6">
+    <div className="modal w-screen " id="add-users-modal">
       <div className="modal-box bg-[#1A1C26]  no-scrollbar  w-[85%] md:w-[50%] ">
         <div className="flex flex-col">
           <div className="flex flex-row justify-center">
@@ -774,16 +809,16 @@ export const AddUsersModal = () => {
             <div className="max-h-[300px] overflow-y-auto no-scrollbar">
               {currentFriends.filter(
                 (friend) =>
-                  !currentRoomMembers.some((member) => member.id === friend.id)
+                  !currentRoomMembers.some((member) => member.id === friend.id),
               ).length < 1 && (
-                  <NullPlaceHolder message="No Friends To Add Yet" />
-                )}
+                <NullPlaceHolder message="No Friends To Add Yet" />
+              )}
               {currentFriends
                 .filter(
                   (friend) =>
                     !currentRoomMembers.some(
-                      (member) => member.id === friend.id
-                    )
+                      (member) => member.id === friend.id,
+                    ),
                 )
                 .map((user) => (
                   <FriendTile key={user.id} user={user} />
@@ -791,12 +826,16 @@ export const AddUsersModal = () => {
             </div>
           )}
 
-          <div className="modal-action ">
-            <a href="#/" className="btn hover:bg-purple-500">
-              {"Close "}
-            </a>
-            <a href="#/" className="btn hover:bg-purple-500">
-              {"Done "}
+          <div className="modal-action">
+            <a
+              href="#"
+              className="btn hover:bg-purple-500"
+              onClick={(e) => {
+                e.preventDefault();
+                resetModalState();
+              }}
+            >
+              Close
             </a>
           </div>
         </div>
@@ -817,7 +856,6 @@ export const RoomSettingsModal = () => {
   const chatState = useChatStore((state) => state);
 
   const [currentUsers, setUsers] = useState<RoomMember[]>([]);
-  const [skipCount, setSkipCount] = useState(true);
   const [TakingAction, setTakeAction] = useState(false);
   const [RoomName, setName] = useState("");
   const [RoomPassword, setPassword] = useState("");
@@ -838,32 +876,29 @@ export const RoomSettingsModal = () => {
   };
   const [selectedOption, setSelectedOption] = useState(RoomType.public);
 
+  const fetchData = async () => {
+    try {
+      setLOading(true);
+      await getRoomMembersCall(currentRoom?.id as string, 0, 20).then((res) => {
+        setLOading(false);
+        if (res?.status === 200 || res?.status === 201) {
+          const extractedData = res.data;
+
+          setUsers(extractedData);
+        }
+      });
+    } catch (error) {
+      // Do nothing
+    }
+  };
+
   useEffect(() => {
+    if (!LayoutState.showSettingsModal) return;
+
     setSelectedOption(currentRoom?.type as RoomType);
     setName((currentRoom?.name || "") as string);
-    if (skipCount) setSkipCount(false);
-    if (!skipCount) {
-      const fetchData = async () => {
-        try {
-          setLOading(true);
-          await getRoomMembersCall(currentRoom?.id as string, 0, 20).then(
-            (res) => {
-              console.log("hna");
-              setLOading(false);
-              if (res?.status === 200 || res?.status === 201) {
-                const extractedData = res.data;
-
-                setUsers(extractedData);
-              }
-            }
-          );
-        } catch (error) {
-          console.error("Error fetching data: ", error);
-        }
-      };
-      if (chatState.selectedChatID !== "1") {
-        fetchData();
-      }
+    if (chatState.selectedChatID !== "1") {
+      fetchData();
     }
     // eslint-disable-next-line
   }, [LayoutState.showSettingsModal]);
@@ -874,14 +909,21 @@ export const RoomSettingsModal = () => {
     setSelectedOption(currentRoom?.type as RoomType);
     setName((currentRoom?.name || "") as string);
     setUsers([]);
+
+    window.history.pushState(
+      "",
+      document.title,
+      window.location.pathname + window.location.search,
+    );
+    LayoutState.setShowSettingsModal(false);
   };
 
   return (
-    <div className="modal w-screen " id="my_modal_9">
+    <div className="modal w-screen" id="room-settings-modal">
       <div className="modal-box bg-[#1A1C26] relative no-scrollbar w-[90%] md:w-[50%] ">
         <div className="flex flex-col">
           {TakingAction === true ? (
-            <div className="text-center p-2">
+            <div className="bg-black/50 absolute inset-0 w-full h-full flex flex-col items-center justify-center z-50">
               <span className="loading loading-infinity loading-lg bg-purple-500"></span>
               <p>Processing...</p>
             </div>
@@ -1011,24 +1053,24 @@ export const RoomSettingsModal = () => {
                           className="p-2  z-101 absolute right-5 bottom-44 shadow menu dropdown-content bg-base-100 rounded-box w-40"
                         >
                           <li
-                            onClick={async () => {
+                            onClick={() => {
                               if (user.isBaned) {
-                                socketStore.socket.emit("unban", {
+                                socketStore.socket?.emit("unban", {
                                   roomId: chatState.selectedChatID,
                                   memberId: user.id,
                                 });
                               } else {
-                                socketStore.socket.emit("roomDeparture", {
+                                socketStore.socket?.emit("roomDeparture", {
                                   roomId: chatState.selectedChatID,
                                   memberId: user.id,
                                 });
                               }
 
                               setTakeAction(true);
-                              await takeActionCall(
+                              takeActionCall(
                                 selectedChatID as string,
                                 user.id,
-                                user.isBaned ? "unban" : "ban"
+                                user.isBaned ? "unban" : "ban",
                               ).then((res) => {
                                 setTakeAction(false);
                                 if (
@@ -1037,9 +1079,8 @@ export const RoomSettingsModal = () => {
                                 ) {
                                   toast.success(res.data.message);
                                 }
-                                LayoutState.setShowSettingsModal(
-                                  !LayoutState.showSettingsModal
-                                );
+
+                                fetchData();
                               });
                             }}
                           >
@@ -1055,7 +1096,7 @@ export const RoomSettingsModal = () => {
                                 await takeActionCall(
                                   selectedChatID as string,
                                   user.id,
-                                  "mute"
+                                  "mute",
                                 ).then((res) => {
                                   setTakeAction(false);
                                   if (
@@ -1063,12 +1104,11 @@ export const RoomSettingsModal = () => {
                                     res?.status === 201
                                   ) {
                                     toast.success(
-                                      "User Muted For a 5 minutes Successfully"
+                                      "User Muted For a 5 minutes Successfully",
                                     );
                                   }
-                                  LayoutState.setShowSettingsModal(
-                                    !LayoutState.showSettingsModal
-                                  );
+
+                                  fetchData();
                                 });
                               }}
                             >
@@ -1082,24 +1122,21 @@ export const RoomSettingsModal = () => {
                               await takeActionCall(
                                 selectedChatID as string,
                                 user.id,
-                                "kick"
+                                "kick",
                               ).then((res) => {
                                 setTakeAction(false);
-                                LayoutState.setShowSettingsModal(
-                                  !LayoutState.showSettingsModal
-                                );
-
                                 if (
                                   res?.status === 200 ||
                                   res?.status === 201
                                 ) {
                                   toast.success("User Kicked Successfully");
-                                  socketStore.socket.emit("roomDeparture", {
+                                  socketStore.socket?.emit("roomDeparture", {
                                     roomId: chatState.selectedChatID,
                                     memberId: user.id,
                                     type: "kick",
                                   });
                                 }
+                                fetchData();
                               });
                             }}
                           >
@@ -1111,7 +1148,7 @@ export const RoomSettingsModal = () => {
                               await takeActionCall(
                                 selectedChatID as string,
                                 user.id,
-                                "setAdmin"
+                                "setAdmin",
                               ).then((res) => {
                                 setTakeAction(false);
                                 if (
@@ -1119,7 +1156,7 @@ export const RoomSettingsModal = () => {
                                   res?.status === 201
                                 ) {
                                   toast.success(
-                                    "User have been set as Admin Successfully"
+                                    "User have been set as Admin Successfully",
                                   );
                                 }
                               });
@@ -1141,48 +1178,52 @@ export const RoomSettingsModal = () => {
             <div className="">
               {currentRoom?.isOwner && (
                 <a
-                  href="#/"
-                  onClick={async () => {
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault();
+
                     setIsLoading(true);
-                    await DeleteRoomCall(selectedChatID as string).then(
-                      (res) => {
-                        setIsLoading(false);
-                        if (res?.status === 200 || res?.status === 201) {
-                          deleteRoom(selectedChatID as string);
-                          toast.success("Room Deleted Successfully");
-                          resetModalState();
-                        }
+                    DeleteRoomCall(selectedChatID as string).then((res) => {
+                      setIsLoading(false);
+                      if (res?.status === 200 || res?.status === 201) {
+                        deleteRoom(selectedChatID as string);
+                        toast.success("Room Deleted Successfully");
+                        resetModalState();
                       }
-                    );
+                    });
                   }}
                   className="btn hover:bg-red-500  "
                 >
-                  {"Delete Room "}
+                  Delete Room
                 </a>
               )}
             </div>
             <div className="modal-action">
               <a
-                href="#/"
-                onClick={resetModalState}
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  resetModalState();
+                }}
                 className="btn hover:bg-purple-500"
               >
-                {"Close "}
+                Close
               </a>
               {IsUpdated === true && (
                 <a
-                  href="#/"
-                  onClick={async () => {
-                    console.log(RoomType[selectedOption]);
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault();
+
                     if (RoomName !== "" && RoomName.length > 3) {
                       setIsLoading(true);
-                      await updateRoomCall(
+                      updateRoomCall(
                         RoomName,
                         RoomType[selectedOption],
                         currentRoom?.id!,
                         selectedOption === RoomType.protected
                           ? RoomPassword
-                          : undefined
+                          : undefined,
                       ).then((res) => {
                         if (res?.status !== 200 && res?.status !== 201) {
                           resetModalState();
@@ -1200,7 +1241,7 @@ export const RoomSettingsModal = () => {
                   }}
                   className="btn hover:bg-purple-500"
                 >
-                  {"Save "}
+                  Save
                 </a>
               )}
             </div>
@@ -1213,7 +1254,7 @@ export const RoomSettingsModal = () => {
 
 export const ExploreRoomsModal = () => {
   const [RoomPassword, setPassword] = useState("");
-  const [ChatRooms, SetChatRooms] = useState(chatRooms);
+  const [ChatRooms, SetChatRooms] = useState<ChatRoom[]>([]);
   const [selectedOption, setSelectedOption] = useState(RoomType.public);
   const [SelectedRoomID, setSelectedRoomID] = useState("0");
   const [isLoading, setIsLoading] = useState(false);
@@ -1226,16 +1267,26 @@ export const ExploreRoomsModal = () => {
     setSelectedRoomID("0");
     setEndOfFetching(false);
     SetChatRooms([]);
+
+    window.history.pushState(
+      "",
+      document.title,
+      window.location.pathname + window.location.search,
+    );
+    modalState.setShowExploreModal(false);
   };
 
   const [ref, inView] = useInView();
   const [EndOfFetching, setEndOfFetching] = useState(false);
+
   useEffect(() => {
+    if (!modalState.showExploreModal) return;
+
     const fetch = async () => {
       if (!EndOfFetching) {
         const offset = ChatRooms.length;
         offset === 0 && setIsLoading(true);
-        await fetchRoomsCall(offset, 5, false).then((res) => {
+        await fetchRoomsCall(offset, 7, false).then((res) => {
           if (res?.status !== 200 && res?.status !== 201) {
             resetModalState();
           } else {
@@ -1248,19 +1299,16 @@ export const ExploreRoomsModal = () => {
                 name: string;
                 type: string;
               }) => {
-                //eslint-disable-next-line
-                {
-                  rooms.push({
-                    id: room.id,
-                    name: room.name,
-                    type: RoomType[room.type as keyof typeof RoomType],
-                    messages: [],
-                    usersId: [],
-                    isOwner: room.is_owner,
-                    isAdmin: room.is_admin,
-                  });
-                }
-              }
+                rooms.push({
+                  id: room.id,
+                  name: room.name,
+                  type: RoomType[room.type as keyof typeof RoomType],
+                  messages: [],
+                  usersId: [],
+                  isOwner: room.is_owner,
+                  isAdmin: room.is_admin,
+                });
+              },
             );
             setIsLoading(false);
             if (res.data.length > 0) {
@@ -1278,10 +1326,10 @@ export const ExploreRoomsModal = () => {
     }
 
     // eslint-disable-next-line
-  }, [modalState, inView]);
+  }, [modalState.showExploreModal, inView]);
 
   return (
-    <div className="modal w-screen " id="my_modal_5">
+    <div className="modal w-screen " id="explorer-modal">
       <div className="modal-box bg-[#1A1C26]  no-scrollbar  w-[85%] md:w-[50%] ">
         <div className="flex flex-col">
           <div className="flex flex-row justify-center">
@@ -1300,8 +1348,8 @@ export const ExploreRoomsModal = () => {
                   {ChatRooms.filter(
                     (room) =>
                       recentRooms.recentRooms.find(
-                        (recentRoom) => recentRoom.id === room.id
-                      ) === undefined
+                        (recentRoom) => recentRoom.id === room.id,
+                      ) === undefined,
                   ).map((room) => (
                     <div
                       key={room.id}
@@ -1317,27 +1365,18 @@ export const ExploreRoomsModal = () => {
                       }}
                     >
                       <div className="flex flex-row  justify-between items-center">
-                        <a href="/#">
-                          <img className="w-[100%]" alt="" src={groupIcon} />
-                        </a>
+                        <img className="w-10" alt="" src={groupIcon} />
                         <p>{room.name}</p>
-
-                        <a href="/#">
-                          <img
-                            className=""
-                            alt=""
-                            src={
-                              room.type === RoomType.protected ? Lock : Unlock
-                            }
-                          />
-                        </a>
+                        <img
+                          alt=""
+                          src={room.type === RoomType.protected ? Lock : Unlock}
+                        />
                       </div>
                     </div>
                   ))}
                   <div
                     ref={ref}
-                    className="flex justify-center items-center h-2 py-2
-								"
+                    className="flex justify-center items-center h-2 py-2"
                   >
                     <span className="text-xs font-light font-poppins text-gray-400">
                       {EndOfFetching ? "No more Rooms" : "Loading..."}
@@ -1365,34 +1404,40 @@ export const ExploreRoomsModal = () => {
         )}
         <div className="modal-action">
           <a
-            href="#/"
-            onClick={resetModalState}
+            href="#"
+            onClick={(e) => {
+              e.preventDefault();
+              resetModalState();
+            }}
             className="btn hover:bg-purple-500"
           >
-            {"Close "}
+            Close
           </a>
           {ChatRooms.length > 0 && SelectedRoomID !== "0" && (
             <a
-              href="#/"
-              onClick={async () => {
+              href="#"
+              onClick={(e) => {
+                e.preventDefault();
+
                 recentRooms.setIsLoading(true);
 
-                await joinRoomCall(
+                joinRoomCall(
                   SelectedRoomID,
                   selectedOption === RoomType.protected
                     ? RoomPassword
-                    : undefined
+                    : undefined,
                 ).then((res) => {
                   recentRooms.setIsLoading(false);
                   if (res?.status !== 200 && res?.status !== 201) {
                     resetModalState();
                   } else {
                     toast.success("Room Joined Successfully");
+
                     recentRooms.selectNewChatID("1");
-                    // recentRooms.setOnRoomsChange(
-                    //   !recentRooms.recentRoomsOnchange
-                    // );
                     recentRooms.changeChatType(ChatType.Room);
+                    recentRooms.setOnRoomsChange(
+                      !recentRooms.recentRoomsOnchange,
+                    );
 
                     resetModalState();
                   }
@@ -1400,7 +1445,7 @@ export const ExploreRoomsModal = () => {
               }}
               className="btn hover:bg-purple-500"
             >
-              {"Join"}
+              Join
             </a>
           )}
         </div>
@@ -1448,11 +1493,7 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
 export const NullPlaceHolder: React.FC<NullComponentProps> = ({ message }) => {
   return (
     <div className="null image flex flex-col justify-center items-center h-full">
-      <img
-        alt="null"
-        className="w-[35%] bottom-2 max-w-xs"
-        src={NullImage}
-      ></img>
+      <img alt="null" className="w-[35%] bottom-2 max-w-xs" src={NullImage} />
       <p className="text-gray-500 font-montserrat text-18 font-semibold leading-28 p-3">
         {message}
       </p>
@@ -1467,7 +1508,7 @@ export const ChatPlaceHolder: React.FC<NullComponentProps> = ({ message }) => {
         alt="null"
         className="w-[35%] bottom-2 opacity-40 max-w-xs"
         src={ChatGif}
-      ></img>
+      />
       <p className="text-gray-500 font-montserrat text-18 font-semibold leading-28 p-3">
         {message}
       </p>
@@ -1482,10 +1523,7 @@ export const InitChatPlaceholder = () => {
         alt="null"
         className="w-[30%] bottom-2 opacity-30 max-w-xs"
         src={InitChat}
-      ></img>
-      {/* <p className="text-gray-300 font-montserrat text-18 font-bold leading-28 p-1">
-          Your Messages
-      </p> */}
+      />
       <p className="text-gray-500 font-montserrat text-18 font-semibold leading-28 p-3">
         Send private and Public messages to a friends or groups
       </p>
@@ -1495,16 +1533,14 @@ export const InitChatPlaceholder = () => {
 
 export const ShowLogoModal = () => {
   const isLoading = useChatStore((state) => state.isLoading);
+
   return isLoading === true ? (
-    <div
-      className={`fixed inset-0 flex items-center justify-center z-50 bg-[rgba(0,0,0,0.7)]  `}
-    >
-      <div className="modal-box bg-[#2d2f3b] rounded-lg shadow-white  p-5 border-2 border-purple-500 text-center">
+    <div className="fixed inset-0 flex items-center justify-center z-50 bg-[rgba(0,0,0,0.7)]">
+      <div className="modal-box bg-[#2d2f3b] rounded-lg shadow-white p-5 border-2 border-purple-500 text-center">
         <div>
           <div className="pl-48 p-4">
             <Logo />
           </div>
-
           <p>Loading...</p>
         </div>
       </div>
diff --git a/frontend/code/src/Components/Chat/Components/UserToUserChat.tsx b/frontend/code/src/Components/Chat/Components/UserToUserChat.tsx
index 317a2a9..da14789 100644
--- a/frontend/code/src/Components/Chat/Components/UserToUserChat.tsx
+++ b/frontend/code/src/Components/Chat/Components/UserToUserChat.tsx
@@ -9,17 +9,14 @@ import { getDM } from "../Services/ChatServices";
 export const UserToUserChat = () => {
   const params = useParams();
   const navigator = useNavigate();
-  console.log(`params : ${params.id} type ${typeof params.id}`);
 
   const ChatState = useChatStore((state) => state);
   const [showUserPreview, setShowUserPreview] = useState(true);
 
   useEffect(() => {
-    console.log("selected chat id ", ChatState.selectedChatID);
     const fetchUser = async () => {
       try {
         await getDM(params.id as string).then((res) => {
-          console.log("res", res);
           if (res?.status === 200 || res?.status === 201) {
             const extractedData = res.data;
             if (ChatState.selectedChatID !== extractedData.id) {
@@ -32,11 +29,6 @@ export const UserToUserChat = () => {
               avatar: extractedData.avatar,
               bio: extractedData.bio,
             });
-
-            console.log("extractedData", extractedData);
-          } else {
-            // navigator("/chat");
-            // toast.error("Error getting room members");
           }
         });
       } catch (error) {
@@ -68,55 +60,3 @@ export const UserToUserChat = () => {
     </>
   );
 };
-
-<div className="overflow-x-auto relative">
-  <table className="table ">
-    <tbody>
-      <tr>
-        <td>
-          <div className="flex flex-row justify-between ">
-            <div className="flex flex-row items-center space-x-3">
-              <div className="avatar">
-                <div className="mask mask-squircle w-12 h-12">
-                  <img
-                    // src={user.image}
-                    alt="Avatar Tailwind CSS Component"
-                  />
-                </div>
-              </div>
-              {/* <div className="font-bold">{user.name}</div> */}
-            </div>
-            <div className="dropdown ">
-              <label tabIndex={0} className="">
-                <summary className="list-none p-3 cursor-pointer ">
-                  {/* <img src={More} alt="More" /> */}
-                </summary>
-              </label>
-              <ul
-                tabIndex={0}
-                className="p-2 shadow menu dropdown-content z-[0] bg-base-100 rounded-box w-52   right-full absolute  "
-              >
-                <li>
-                  <span className="hover:bg-[#7940CF]">Block</span>
-                </li>
-                <li>
-                  <span className="hover:bg-[#7940CF]">
-                    invite for a Pong Game
-                  </span>
-                </li>
-                <li>
-                  <span
-                    // onClick={onRemoveUserPreview}
-                    className="hover:bg-[#7940CF]"
-                  >
-                    Show User Info
-                  </span>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>;
diff --git a/frontend/code/src/Components/Chat/Components/tools/utils.ts b/frontend/code/src/Components/Chat/Components/tools/utils.ts
index 562adbe..1e0a34a 100644
--- a/frontend/code/src/Components/Chat/Components/tools/utils.ts
+++ b/frontend/code/src/Components/Chat/Components/tools/utils.ts
@@ -2,7 +2,7 @@ export const formatTime = (backendDate: string) => {
   const currentDate = new Date();
   const date = new Date(backendDate);
   const day = date.getDate();
-  const month = date.toLocaleString('en-US', { month: 'short' });
+  const month = date.toLocaleString("en-US", { month: "short" });
   const hours = date.getHours();
   const minutes = date.getMinutes();
   const ampm = hours >= 12 ? " PM" : " AM";
@@ -14,4 +14,4 @@ export const formatTime = (backendDate: string) => {
   } else {
     return `${day} ${month} ${formattedHours}:${formattedMinutes}${ampm}`;
   }
-}
+};
diff --git a/frontend/code/src/Components/Chat/Controllers/LayoutControllers.tsx b/frontend/code/src/Components/Chat/Controllers/LayoutControllers.tsx
index ba6f065..8d4d169 100644
--- a/frontend/code/src/Components/Chat/Controllers/LayoutControllers.tsx
+++ b/frontend/code/src/Components/Chat/Controllers/LayoutControllers.tsx
@@ -5,15 +5,17 @@ export interface ModalState {
   showPreviewCard: boolean;
   showAddUsersModal: boolean;
   showSettingsModal: boolean;
-  showBlockedLIstModal: boolean;
+  showBlockedListModal: boolean;
   showFriendsListModal: boolean;
+  showCreateChatRoomModal: boolean;
 
   setShowExploreModal: (showExploreModal: boolean) => void;
-  setShowFriendsModal: (showFriendsModal: boolean) => void;
+  setShowFriendsListModal: (showFriendsListModal: boolean) => void;
   setShowPreviewCard: (showPreviewCard: boolean) => void;
   setShowAddUsersModal: (showAddUsersModal: boolean) => void;
   setShowSettingsModal: (showSettingsModal: boolean) => void;
-  setShowBlockedList: (showBlockedLIstModal: boolean) => void;
+  setShowBlockedListModal: (showBlockedListModal: boolean) => void;
+  setShowCreateChatRoomModal: (showCreateChatRoomModal: boolean) => void;
 }
 
 export const useModalStore = create<ModalState>((set) => ({
@@ -21,17 +23,13 @@ export const useModalStore = create<ModalState>((set) => ({
   showPreviewCard: false,
   showAddUsersModal: false,
   showSettingsModal: false,
-  showBlockedLIstModal: false,
+  showBlockedListModal: false,
   showFriendsListModal: false,
+  showCreateChatRoomModal: false,
 
-  setShowFriendsModal: (showFriendsModal: boolean) =>
+  setShowFriendsListModal: (showFriendsListModal: boolean) =>
     set((state) => {
-      state.showFriendsListModal = showFriendsModal;
-      return { ...state };
-    }),
-  setShowBlockedList: (showBlockedLIstModal: boolean) =>
-    set((state) => {
-      state.showBlockedLIstModal = showBlockedLIstModal;
+      state.showFriendsListModal = showFriendsListModal;
       return { ...state };
     }),
 
@@ -40,6 +38,7 @@ export const useModalStore = create<ModalState>((set) => ({
       state.showSettingsModal = showSettingsModal;
       return { ...state };
     }),
+
   setShowExploreModal: (showExploreModal: boolean) =>
     set((state) => {
       state.showExploreModal = showExploreModal;
@@ -57,4 +56,16 @@ export const useModalStore = create<ModalState>((set) => ({
       state.showAddUsersModal = showAddUsersModal;
       return { ...state };
     }),
+
+  setShowBlockedListModal: (showBlockedListModal: boolean) =>
+    set((state) => {
+      state.showBlockedListModal = showBlockedListModal;
+      return { ...state };
+    }),
+
+  setShowCreateChatRoomModal: (showCreateChatRoomModal: boolean) =>
+    set((state) => {
+      state.showCreateChatRoomModal = showCreateChatRoomModal;
+      return { ...state };
+    }),
 }));
diff --git a/frontend/code/src/Components/Chat/Controllers/RoomChatControllers.tsx b/frontend/code/src/Components/Chat/Controllers/RoomChatControllers.tsx
index 52e559d..fd0452c 100644
--- a/frontend/code/src/Components/Chat/Controllers/RoomChatControllers.tsx
+++ b/frontend/code/src/Components/Chat/Controllers/RoomChatControllers.tsx
@@ -120,7 +120,7 @@ export const useChatStore = create<ChatState>()((set) => ({
   setMessageAsFailed: (id: string) =>
     set((state) => {
       const messageIndex = state.currentMessages.findIndex(
-        (message) => message.id === id
+        (message) => message.id === id,
       );
       if (messageIndex !== -1) {
         state.currentMessages[messageIndex].isFailed = true;
@@ -144,7 +144,9 @@ export const useChatStore = create<ChatState>()((set) => ({
 
   updateTransientMessage: (message: Message, clientMessageId: string) =>
     set((state) => {
-      const newCurrentMessages = state.currentMessages.filter((e) => e.clientMessageId !== clientMessageId);
+      const newCurrentMessages = state.currentMessages.filter(
+        (e) => e.clientMessageId !== clientMessageId,
+      );
       state.currentMessages = [message, ...newCurrentMessages];
 
       return { ...state };
@@ -155,7 +157,7 @@ export const useChatStore = create<ChatState>()((set) => ({
       state.currentMessages = state.currentMessages.filter(cb);
 
       return { ...state };
-    })
+    });
   },
 
   fillCurrentMessages: (messages: Message[]) =>
@@ -172,12 +174,12 @@ export const useChatStore = create<ChatState>()((set) => ({
       }
 
       state.recentRooms = [...chatRooms];
-      if (state.recentRooms.length > 0)
+      if (state.recentRooms.length > 0) {
         state.selectedChatID = state.recentRooms[0].id;
-      else state.selectedChatID = "1";
+      } else {
+        state.selectedChatID = "1";
+      }
       state.recentRoomsOnchange = !state.recentRoomsOnchange;
-      // state.selectedChatType = ChatType.Chat;
-      // state.selectNewChatID(state.recentDms[0].id ?? "1");
       state.selectNewChatID("1");
 
       return { ...state };
@@ -222,7 +224,6 @@ export const useChatStore = create<ChatState>()((set) => ({
         isOwner: true,
         isAdmin: true,
       };
-      // state.selectedChatID = id;
 
       chatRooms.push(newRoom);
       state.recentRooms = [...chatRooms];
diff --git a/frontend/code/src/Components/Chat/Services/ChatServices.ts b/frontend/code/src/Components/Chat/Services/ChatServices.ts
index a801920..14ae68d 100644
--- a/frontend/code/src/Components/Chat/Services/ChatServices.ts
+++ b/frontend/code/src/Components/Chat/Services/ChatServices.ts
@@ -5,108 +5,74 @@ export const createNewRoomCall = async (
   name: string,
   type: string,
   password?: string,
-  secondMember? : string,
+  secondMember?: string,
 ) => {
   try {
-
     const response = await api.post("/rooms/create", {
       name: name,
       type: type,
       password: password,
       secondMember: secondMember,
     });
-    console.log(response.data);
-    console.log(response.status);
     return response;
   } catch (e: any) {
-    console.log(e.response.data.message);
+    return e?.response;
   }
 };
 
-
-
-
 export const updateRoomCall = async (
   name: string,
   type: string,
   roomId: string,
   password?: string,
-
 ) => {
   try {
-
     const response = await api.post("/rooms/update", {
       name: name,
       type: type,
       roomId: roomId,
       password: password,
     });
-    console.log(response.data);
-    console.log(response.status);
     return response;
   } catch (e: any) {
     toast.error(e.response.data.message);
-    console.log(e.response.data.message);
   }
-
 };
 
-
 export const fetchRoomsCall = async (
   offset: number,
   limit: number,
   joined: boolean,
-
 ) => {
-
   try {
-    const response = await api.get(`/rooms`,
-      { params: { offset: offset, limit: limit, joined: joined } });
-    joined === true ? console.log("resent :") : console.log("Public :");
-    console.log(response.status);
-    console.log(response.data);
+    const response = await api.get(`/rooms`, {
+      params: { offset: offset, limit: limit, joined: joined },
+    });
     return response;
   } catch (e: any) {
-    console.log(e.response.data.message as string);
+    // Do nothing
   }
+};
 
-}
-
-export const fetchDmsCall = async (
-  offset: number,
-  limit: number,
-
-) => {
+export const fetchDmsCall = async (offset: number, limit: number) => {
   try {
-    const response = await api.get(`/rooms/dms`,
-      { params: { offset: offset, limit: limit} });
-     console.log("dms :");
-    console.log(response.status);
-    console.log(response.data);
+    const response = await api.get(`/rooms/dms`, {
+      params: { offset: offset, limit: limit },
+    });
     return response;
   } catch (e: any) {
-    
+    // Do nothing
   }
+};
 
-}
-
-
-export const getDM = async (
-  id: string
-) => {
+export const getDM = async (id: string) => {
   try {
-    const response = await api.get(`/rooms/dm/${id}`,
-      );
-     console.log("dm :");
-    console.log(response.status);
-    console.log(response.data);
+    const response = await api.get(`/rooms/dm/${id}`);
     return response;
   } catch (e: any) {
-    console.log(e.response.data.message);
+    // Do nothing
   }
-
-}
-
+};
 
 export const getRoomMembersCall = async (
   id: string,
@@ -114,63 +80,37 @@ export const getRoomMembersCall = async (
   limit: number,
 ) => {
   try {
-    const response = await api.get(`/rooms/${id}/members`,
-      { params: { offset: offset, limit: limit } });
-    console.log("room members :");
-    console.log(response.status);
-    console.log(response.data);
+    const response = await api.get(`/rooms/${id}/members`, {
+      params: { offset: offset, limit: limit },
+    });
     return response;
   } catch (e: any) {
-    console.log(e.response.data.message);
+    // Do nothing
   }
+};
 
-}
-
-
-export const joinRoomCall = async (
-  roomId: string,
-  password?: string,
-
-) => {
+export const joinRoomCall = async (roomId: string, password?: string) => {
   try {
-
     const response = await api.post("/rooms/join", {
       roomId: roomId,
       password: password,
     });
-    console.log("join room")
-    console.log(response.status);
-    console.log(response.data);
     return response;
   } catch (e: any) {
-
-    console.log(e.response.data.message);
     toast.error(e.response.data.message);
   }
-}
-
-
-export const leaveRoomCall = async (
-  roomId: string,
+};
 
-) => {
+export const leaveRoomCall = async (roomId: string) => {
   try {
-
     const response = await api.post("/rooms/leave", {
       roomId: roomId,
-
     });
-    console.log("leave result :")
-    console.log(response.status);
-    console.log(response.data);
     return response;
   } catch (e: any) {
-
-    console.log(e.response.data.message);
     toast.error(e.response.data.message);
   }
-
-}
+};
 
 export const takeActionCall = async (
   roomId: string,
@@ -181,62 +121,31 @@ export const takeActionCall = async (
     const response = await api.post(`/rooms/${action}`, {
       roomId: roomId,
       memberId: memberId,
-
     });
-    console.log(`${action} result :`)
-    console.log(response.status);
-    console.log(response.data);
     return response;
   } catch (e: any) {
-
-    console.log(e.response.data.message);
     toast.error(e.response.data.message);
   }
+};
 
-}
-
-export const DeleteRoomCall = async (
-  roomId: string,
-
-) => {
+export const DeleteRoomCall = async (roomId: string) => {
   try {
-
     const response = await api.post("/rooms/delete", {
       roomId: roomId,
-
     });
-    console.log("delete result :")
-    console.log(response.status);
-    console.log(response.data);
     return response;
   } catch (e: any) {
-
-    console.log(e.response.data.message);
     toast.error(e.response.data.message);
   }
-}
-
-// unused
-export const getFriendsCall = async (
-  offset: number,
-  limit: number,
-
-
-) => {
+};
 
+export const getFriendsCall = async (offset: number, limit: number) => {
   try {
-    const response = await api.get(`/friends/list`,
-      { params: { offset: offset, limit: limit } });
-    console.log("friends list response");
-    console.log(response.status);
-    console.log(response.data);
+    const response = await api.get(`/friends/list`, {
+      params: { offset: offset, limit: limit },
+    });
     return response;
   } catch (e: any) {
-    console.log(e.response.data.message);
+    // Do nothing
   }
-
-}
-
-
-
-
+};
diff --git a/frontend/code/src/Components/Chat/Services/FriendsServices.ts b/frontend/code/src/Components/Chat/Services/FriendsServices.ts
index 5f52b2f..a3b4179 100644
--- a/frontend/code/src/Components/Chat/Services/FriendsServices.ts
+++ b/frontend/code/src/Components/Chat/Services/FriendsServices.ts
@@ -1,56 +1,34 @@
 import api from "../../../Api/base";
 
-export const getBlockedCall = async (
-    offset: number,
-    limit: number,
-  
-  
-  ) => {
-  
-    try {
-      const response = await api.get(`/friends/blocklist`,
-        { params: { offset: offset, limit: limit } });
-      console.log("blocked list response");
-      console.log(response.status);
-      console.log(response.data);
-      return response;
-    } catch (e: any) {
-      console.log(e.response.data.message);
-    }
-  
+export const getBlockedCall = async (offset: number, limit: number) => {
+  try {
+    const response = await api.get(`/friends/blocklist`, {
+      params: { offset: offset, limit: limit },
+    });
+    return response;
+  } catch (e: any) {
+    // Do nothing
   }
+};
 
-  export const unblockCall = async (
-    friendId : string
-  ) => {
-    try {
-  
-      const response = await api.post("/friends/unblock", {
-        friendId :friendId
-      });
-      console.log(response.data);
-      console.log(response.status);
-      return response;
-    } catch (e: any) {
-      console.log(e.response.data.message);
-    }
-  };
-
-  export const blockUserCall  = async (
-    friendId : string
-  ) => {
-    try {
-      const response = await api.post("/friends/block", {
-        friendId :friendId
-      });
-      console.log(response.data);
-      console.log(response.status);
-      return response;
-      
-    } catch (e : any) {
-      console.log(e.response.data.message);
-      
-    }
+export const unblockCall = async (friendId: string) => {
+  try {
+    const response = await api.post("/friends/unblock", {
+      friendId: friendId,
+    });
+    return response;
+  } catch (e: any) {
+    // Do nothing
+  }
+};
 
+export const blockUserCall = async (friendId: string) => {
+  try {
+    const response = await api.post("/friends/block", {
+      friendId: friendId,
+    });
+    return response;
+  } catch (e: any) {
+    // Do nothing
   }
-  
+};
diff --git a/frontend/code/src/Components/Chat/Services/MessagesServices.ts b/frontend/code/src/Components/Chat/Services/MessagesServices.ts
index f583200..f5c068a 100644
--- a/frontend/code/src/Components/Chat/Services/MessagesServices.ts
+++ b/frontend/code/src/Components/Chat/Services/MessagesServices.ts
@@ -1,45 +1,33 @@
-
 import api from "../../../Api/base";
 
-
-
-
 export const getRoomMessagesCall = async (
-    id: string,
-    offset: number,
-    limit: number,
+  id: string,
+  offset: number,
+  limit: number,
 ) => {
-    try {
-        const response = await api.get(`/messages/room/${id}/`,
-            { params: { offset: offset, limit: limit } });
-        console.log("room messages :");
-        console.log(response.status);
-        console.log(response.data);
-        return response;
-    } catch (e: any) {
-        console.log(e.response.data.message);
-    }
-
-}
-
-
+  try {
+    const response = await api.get(`/messages/room/${id}/`, {
+      params: { offset: offset, limit: limit },
+    });
+    return response;
+  } catch (e: any) {
+    return e.response;
+  }
+};
 
 export const sendMessageCall = async (
-    id: string,
-    content: string,
-    clientMessageId?: string
+  id: string,
+  content: string,
+  clientMessageId?: string,
 ) => {
-    try {
-        const response = await api.post(`messages/room/${id}`,
-            { content, clientMessageId }, { params: { id: id } }
-        );
-        console.log("send messages :");
-        console.log(response.status);
-        console.log(response.data);
-        return response;
-    } catch (e: any) {
-
-        console.log(e.response.data.message);
-    }
-
-}
\ No newline at end of file
+  try {
+    const response = await api.post(
+      `messages/room/${id}`,
+      { content, clientMessageId },
+      { params: { id: id } },
+    );
+    return response;
+  } catch (e: any) {
+    return e.response;
+  }
+};
diff --git a/frontend/code/src/Components/Chat/Services/SocketsServices.ts b/frontend/code/src/Components/Chat/Services/SocketsServices.ts
index 1ce5a74..312434c 100644
--- a/frontend/code/src/Components/Chat/Services/SocketsServices.ts
+++ b/frontend/code/src/Components/Chat/Services/SocketsServices.ts
@@ -1,5 +1,5 @@
-import {  io } from 'socket.io-client';
-import { create } from 'zustand'
+import { io } from "socket.io-client";
+import { create } from "zustand";
 
 interface SocketStore {
   socket: any;
@@ -8,7 +8,7 @@ interface SocketStore {
   setSocket: () => any;
 }
 
-export const useSocketStore = create<SocketStore>((set, get) => ({
+export const useSocketStore = create<SocketStore>((set) => ({
   socket: null,
   connected: false,
   setSocket: () => {
@@ -16,30 +16,34 @@ export const useSocketStore = create<SocketStore>((set, get) => ({
 
     set((state) => {
       if (state.socket === null) {
-        newSocket = io("http://localhost:3004", {
-          transports: ['websocket'],
-          'reconnection': true,
-          'reconnectionDelay': 1000,
-          'reconnectionDelayMax': 1000,
-          'reconnectionAttempts': 5
-        });
+        newSocket = io(
+          process.env.REACT_APP_SOCKET_ENDPOINT || "http://localhost:3004",
+          {
+            transports: ["websocket"],
+            reconnection: true,
+            reconnectionDelay: 1000,
+            reconnectionDelayMax: 1000,
+            reconnectionAttempts: 5,
+          },
+        );
 
         // Set socket
         set({ ...state, socket: newSocket });
 
-        newSocket.on('connect', () => {
-          console.log('Connected!');
+        newSocket.on("connect", () => {
           // Set connected state
           set({ ...state, connected: true });
         });
 
-        newSocket.on('connect_error', async () => {
-          await new Promise((resolve) => setTimeout(() => {
-            // Set connected state
-            set({ ...state, connected: false });
-            newSocket.connect();
-            resolve(newSocket);
-          }, 1000))
+        newSocket.on("connect_error", async () => {
+          await new Promise((resolve) =>
+            setTimeout(() => {
+              // Set connected state
+              set({ ...state, connected: false });
+              newSocket.connect();
+              resolve(newSocket);
+            }, 1000),
+          );
         });
 
         return { ...state, socket: newSocket };
@@ -49,6 +53,5 @@ export const useSocketStore = create<SocketStore>((set, get) => ({
     });
 
     return newSocket;
-  }
-}))
-
+  },
+}));
diff --git a/frontend/code/src/Components/Chat/index.tsx b/frontend/code/src/Components/Chat/index.tsx
index 8666d10..6a60473 100644
--- a/frontend/code/src/Components/Chat/index.tsx
+++ b/frontend/code/src/Components/Chat/index.tsx
@@ -20,6 +20,7 @@ import {
   CreateNewRoomModal,
   ExploreRoomsModal,
   InitChatPlaceholder,
+  RoomChatPlaceHolder,
   RoomSettingsModal,
 } from "./Components/RoomChatHelpers";
 
@@ -38,9 +39,13 @@ export const Chat = () => {
   const [showUserPreview, setShowUserPreview] = useState(false);
   const ChatState = useChatStore((state) => state);
 
+  const modalState = useModalStore();
+
   const showChatRooms = useChatStore((state) => state.showChatRooms);
   const toggleChatRooms = useChatStore((state) => state.toggleChatRooms);
 
+  const selectedChatType = useChatStore((state) => state.selectedChatType);
+
   const handleRemoveUserPreview = () => {
     setShowUserPreview(!showUserPreview);
   };
@@ -49,10 +54,10 @@ export const Chat = () => {
     <>
       <div className="flex h-full bg-[#1A1C26] relative">
         <div>
-          <ExploreRoomsModal />
-          <RoomSettingsModal />
-          <AddUsersModal />
-          <CreateNewRoomModal />
+          {modalState.showExploreModal && <ExploreRoomsModal />}
+          {modalState.showSettingsModal && <RoomSettingsModal />}
+          {modalState.showAddUsersModal && <AddUsersModal />}
+          {modalState.showCreateChatRoomModal && <CreateNewRoomModal />}
         </div>
         <div
           className={classNames(
@@ -60,11 +65,12 @@ export const Chat = () => {
               ? "w-4/5 lg:w-4/12 max-w-lg "
               : "w-4/5 lg:w-4/12  max-w-lg  ",
             "absolute lg:relative h-full min-w-[360px] lg:border-r-2 border-base-200",
-            "z-20 transition-transform transform data-[mobile-show=true]:translate-x-0 data-[mobile-show=false]:-translate-x-[1000px] lg:!transform-none lg:!transition-none duration-300"
+            "z-20 transition-transform transform data-[mobile-show=true]:translate-x-0 data-[mobile-show=false]:-translate-x-[1000px] lg:!transform-none lg:!transition-none duration-300",
           )}
           data-mobile-show={showChatRooms}
         >
-          <RecentConversations />
+          {selectedChatType === ChatType.Chat && <RecentConversations />}
+          {selectedChatType === ChatType.Room && <RoomChatPlaceHolder />}
         </div>
         {showChatRooms && (
           <div
@@ -111,7 +117,6 @@ export const UserPreviewCard: React.FC<ConversationProps> = ({
   useEffect(() => {
     const fetchData = async () => {
       try {
-        console.log("selected chat type", selectedChatType);
         if (SelectedChat === "1" && selectedChatType !== ChatType.Room) {
           onRemoveUserPreview();
         } else {
@@ -121,14 +126,13 @@ export const UserPreviewCard: React.FC<ConversationProps> = ({
               if (res?.status === 200 || res?.status === 201) {
                 const extractedData = res.data;
                 setIsLoading(false);
-
                 setUsers(extractedData);
               }
-            }
+            },
           );
         }
       } catch (error) {
-        console.error("Error fetching data: ", error);
+        // Do nothing
       }
     };
 
@@ -196,7 +200,6 @@ export const UserPreviewCard: React.FC<ConversationProps> = ({
         <div className="pt-4">
           <div className="flex flex-row  text-gray-400 font-poppins font-medium text-base ">
             <img alt="" src={RoomsIcon} />
-            {}
             <p className="pl-2 ">{currentRoom?.name}'s Members</p>
           </div>
           <div className="h-[350px] overflow-scroll no-scrollbar ">
@@ -208,9 +211,7 @@ export const UserPreviewCard: React.FC<ConversationProps> = ({
                       <div className="avatar">
                         <div className="mask mask-squircle w-11 h-11">
                           <button
-                            onClick={async () => {
-                              navigate(`/profile/${user.id}`);
-                            }}
+                            onClick={() => navigate(`/profile/${user.id}`)}
                           >
                             <img
                               className="w-12 rounded-full "
@@ -218,10 +219,6 @@ export const UserPreviewCard: React.FC<ConversationProps> = ({
                               src={user?.avatar?.medium ?? NullUser}
                             />
                           </button>
-                          {/* <img
-                            src={user?.avatar?.medium ?? NullUser}
-                            alt="Avatar Tailwind CSS Component"
-                          /> */}
                         </div>
                       </div>
                       <div>
diff --git a/frontend/code/src/Components/Error/Assets/Font.tsx b/frontend/code/src/Components/Error/Assets/Font.tsx
index 9c5322c..dfba0b7 100644
--- a/frontend/code/src/Components/Error/Assets/Font.tsx
+++ b/frontend/code/src/Components/Error/Assets/Font.tsx
@@ -1,13 +1,38 @@
-
-
 export const Font = () => {
-    return (
-        <svg className="absolute flex z-20 items-center top-[28%] left-[32%]  h-2/6 w-2/6 justify-center auth-container " width="720" height="371" viewBox="0 0 720 371" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M124.814 296.8V110.113L159.501 109.519L54.8469 230.317L49.8069 212.509H215.83V252.874H33.7975L14.2305 215.18L128.668 87.2593H173.435V296.8H124.814ZM612.254 296.8V110.113L646.941 109.519L542.287 230.317L537.247 212.509H703.271V252.874H521.238L501.671 215.18L616.108 87.2593H660.875V296.8H612.254Z" fill="white"/>
-            <circle cx="383.751" cy="169.917" r="61.2982" transform="rotate(-179.609 383.751 169.917)" fill="white"/>
-            <rect x="306.516" y="297.18" width="17.5138" height="81.6719" transform="rotate(-145.593 306.516 297.18)" fill="white"/>
-            <path d="M440.706 192.467C454.351 192.467 465.412 181.393 465.412 167.733C465.412 154.073 454.351 143 440.706 143C427.061 143 416 154.073 416 167.733C416 181.393 427.061 192.467 440.706 192.467Z" fill="white" stroke="black" strokeWidth="9"/>
-        </svg>
-
-    )
-}
\ No newline at end of file
+  return (
+    <svg
+      className="absolute flex z-20 items-center top-[28%] left-[32%]  h-2/6 w-2/6 justify-center auth-container "
+      width="720"
+      height="371"
+      viewBox="0 0 720 371"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M124.814 296.8V110.113L159.501 109.519L54.8469 230.317L49.8069 212.509H215.83V252.874H33.7975L14.2305 215.18L128.668 87.2593H173.435V296.8H124.814ZM612.254 296.8V110.113L646.941 109.519L542.287 230.317L537.247 212.509H703.271V252.874H521.238L501.671 215.18L616.108 87.2593H660.875V296.8H612.254Z"
+        fill="white"
+      />
+      <circle
+        cx="383.751"
+        cy="169.917"
+        r="61.2982"
+        transform="rotate(-179.609 383.751 169.917)"
+        fill="white"
+      />
+      <rect
+        x="306.516"
+        y="297.18"
+        width="17.5138"
+        height="81.6719"
+        transform="rotate(-145.593 306.516 297.18)"
+        fill="white"
+      />
+      <path
+        d="M440.706 192.467C454.351 192.467 465.412 181.393 465.412 167.733C465.412 154.073 454.351 143 440.706 143C427.061 143 416 154.073 416 167.733C416 181.393 427.061 192.467 440.706 192.467Z"
+        fill="white"
+        stroke="black"
+        strokeWidth="9"
+      />
+    </svg>
+  );
+};
diff --git a/frontend/code/src/Components/Error/index.tsx b/frontend/code/src/Components/Error/index.tsx
index d9dd299..7f10f30 100644
--- a/frontend/code/src/Components/Error/index.tsx
+++ b/frontend/code/src/Components/Error/index.tsx
@@ -1,12 +1,13 @@
-import { Font } from './Assets/Font'
+import { Font } from "./Assets/Font";
 
-export const Error = () =>
-{
-    return (
-        <div className=" flex flex-col bg-black h-screen z-0 w-screen relative ">
-            <Font/>
-            <div className=" absolute flex z-10 items-center top-0 left-0 bg-contain h-screen w-screen max-w-full justify-center overflow-hidden bg-gif-error bg-no-repeat bg-center"></div>
-            <h1 className='relative flex items-center pt-44 sm:pt-56 justify-center text-white text-[3.5vw] z-30 h-full font-lexend '>Page Not Found</h1>
-        </div>
-    )
-}
\ No newline at end of file
+export const Error = () => {
+  return (
+    <div className=" flex flex-col bg-black h-screen z-0 w-screen relative ">
+      <Font />
+      <div className=" absolute flex z-10 items-center top-0 left-0 bg-contain h-screen w-screen max-w-full justify-center overflow-hidden bg-gif-error bg-no-repeat bg-center"></div>
+      <h1 className="relative flex items-center pt-44 sm:pt-56 justify-center text-white text-[3.5vw] z-30 h-full font-lexend ">
+        Page Not Found
+      </h1>
+    </div>
+  );
+};
diff --git a/frontend/code/src/Components/FirstLogin/UploadAvatar.tsx b/frontend/code/src/Components/FirstLogin/UploadAvatar.tsx
index 1a558ec..7aa5813 100644
--- a/frontend/code/src/Components/FirstLogin/UploadAvatar.tsx
+++ b/frontend/code/src/Components/FirstLogin/UploadAvatar.tsx
@@ -10,6 +10,7 @@ type Inputs = {
   lastName: string;
   discreption: string;
   email: string;
+  Username: string;
 };
 const ERROR_MESSAGES = [
   "Field is required",
@@ -20,10 +21,18 @@ const payload_objects = [
   "firstName",
   "lastName",
   "email",
+  "Username",
   "phone",
   "discreption",
 ];
-const data_names = ["First name", "Last name", "Email", "Phone", "Bio"];
+const data_names = [
+  "First name",
+  "Last name",
+  "Email",
+  "Username",
+  "Phone",
+  "Bio",
+];
 export const UploadAvatar = () => {
   const userStore = useUserStore();
   const navigate = useNavigate();
@@ -40,7 +49,7 @@ export const UploadAvatar = () => {
     } catch (e) {}
   };
   const handleError = (errors: any) => {
-    //eslint-disable-next-line
+    // eslint-disable-next-line
     payload_objects.map((item: any, index: number) => {
       if (errors[`${item}`]?.type === "required")
         toast.error(`${data_names[index]} ${ERROR_MESSAGES[0]} `);
@@ -48,6 +57,8 @@ export const UploadAvatar = () => {
         toast.error(`${data_names[index]} ${ERROR_MESSAGES[1]} 4`);
       if (errors[`${item}`]?.type === "maxLength")
         toast.error(`${data_names[index]} ${ERROR_MESSAGES[2]} 50 `);
+      if (errors[`${item}`]?.type === "pattern")
+        toast.error(`${errors[`${item}`]?.message}`);
     });
   };
 
@@ -91,6 +102,17 @@ export const UploadAvatar = () => {
           defaultValue={userStore.bio}
           className="input input-bordered input-primary w-full"
         />
+        <input
+          type="text"
+          placeholder="Username"
+          {...register("Username", {
+            required: true,
+            maxLength: 50,
+            minLength: 4,
+          })}
+          defaultValue={userStore.username}
+          className="input input-bordered input-primary w-full"
+        />
         <input
           type="text"
           placeholder="Email "
diff --git a/frontend/code/src/Components/FirstLogin/UploadLogic.tsx b/frontend/code/src/Components/FirstLogin/UploadLogic.tsx
index 75cd826..f471a6a 100644
--- a/frontend/code/src/Components/FirstLogin/UploadLogic.tsx
+++ b/frontend/code/src/Components/FirstLogin/UploadLogic.tsx
@@ -45,7 +45,7 @@ export const UploadLogic = () => {
               success: "New Avatar Saved",
               error: "Error On Uploading image",
             },
-            { position: "top-center", className: "h-20", duration: 2000 }
+            { position: "top-center", className: "h-20", duration: 2000 },
           );
         }}
         ref={inputRef}
diff --git a/frontend/code/src/Components/Game/States/GameState.ts b/frontend/code/src/Components/Game/States/GameState.ts
index a5c9f11..e9c0805 100644
--- a/frontend/code/src/Components/Game/States/GameState.ts
+++ b/frontend/code/src/Components/Game/States/GameState.ts
@@ -1,59 +1,58 @@
-import { create } from 'zustand'
+import { create } from "zustand";
 
 type GameStateType = {
-  width:number;
-  height:number;
-  mobile:boolean;
-  ball:{
-    x:number,
-    y:number,
-    size:number,
-    p1Score:number,
-    p2Score:number,
+  width: number;
+  height: number;
+  mobile: boolean;
+  ball: {
+    x: number;
+    y: number;
+    size: number;
+    p1Score: number;
+    p2Score: number;
   };
-  lPaddle:number;
-  rPaddle:number;
-  ballOwner:number;
-  p1:any;
-  p2:any;
-  side:boolean;
-  end:boolean;
-}
+  lPaddle: number;
+  rPaddle: number;
+  ballOwner: number;
+  p1: any;
+  p2: any;
+  side: boolean;
+  end: boolean;
+};
 
 type GameActions = {
-  setHeight  : (h: GameStateType['height']) => void;
-  setWidth   : (w : GameStateType['width']) => void;
-  setLPaddle : (lp : GameStateType['lPaddle']) => void;
-  setRPaddle : (rp : GameStateType['rPaddle']) => void;
-  setBall    : (pos : GameStateType['ball']) => void;
-  setMobile  : (isMobile : GameStateType['mobile']) => void;
-  setP1 : (p1 : GameStateType['p1']) => void;
-  setP2 : (p2 : GameStateType['p2']) => void;
-  setSide : (side : GameStateType['side']) => void;
-  setEnd : (end : GameStateType['end']) => void;
-}
+  setHeight: (h: GameStateType["height"]) => void;
+  setWidth: (w: GameStateType["width"]) => void;
+  setLPaddle: (lp: GameStateType["lPaddle"]) => void;
+  setRPaddle: (rp: GameStateType["rPaddle"]) => void;
+  setBall: (pos: GameStateType["ball"]) => void;
+  setMobile: (isMobile: GameStateType["mobile"]) => void;
+  setP1: (p1: GameStateType["p1"]) => void;
+  setP2: (p2: GameStateType["p2"]) => void;
+  setSide: (side: GameStateType["side"]) => void;
+  setEnd: (end: GameStateType["end"]) => void;
+};
 
-export const useGameState = create<GameStateType & GameActions>((set)=> ({
-  width : 0,
-  height : 0,
-  mobile : false,
-  ball : {x: 0,y:0,size:0,p1Score:0,p2Score:0},
-  lPaddle : 0,
-  rPaddle : 0,
-  ballOwner:-1,
-  p1:null,
-  p2:null,
-  side:false,
-  end:true,
-  setHeight : (h) => set(() => ({height : h})),
-  setWidth : (w) => set(() => ({width : w})),
-  setLPaddle : (lp) => set(() => ({lPaddle : lp})),
-  setRPaddle : (rp) => set(() => ({rPaddle : rp})),
-  setMobile : (isMobile ) => set(() => ({mobile:isMobile})),
-  setBall : (pos) => set(() => ({ball:pos})),
-  setP1 : (p1) => set(() => ({p1:p1})),
-  setP2 : (p2) => set(() => ({p2:p2})),
-  setSide : (side) => set(() => ({side:side})), 
-  setEnd : (end) => set(() => ({end:end})),
-
-}))
\ No newline at end of file
+export const useGameState = create<GameStateType & GameActions>((set) => ({
+  width: 0,
+  height: 0,
+  mobile: false,
+  ball: { x: 0, y: 0, size: 0, p1Score: 0, p2Score: 0 },
+  lPaddle: 0,
+  rPaddle: 0,
+  ballOwner: -1,
+  p1: null,
+  p2: null,
+  side: false,
+  end: true,
+  setHeight: (h) => set(() => ({ height: h })),
+  setWidth: (w) => set(() => ({ width: w })),
+  setLPaddle: (lp) => set(() => ({ lPaddle: lp })),
+  setRPaddle: (rp) => set(() => ({ rPaddle: rp })),
+  setMobile: (isMobile) => set(() => ({ mobile: isMobile })),
+  setBall: (pos) => set(() => ({ ball: pos })),
+  setP1: (p1) => set(() => ({ p1: p1 })),
+  setP2: (p2) => set(() => ({ p2: p2 })),
+  setSide: (side) => set(() => ({ side: side })),
+  setEnd: (end) => set(() => ({ end: end })),
+}));
diff --git a/frontend/code/src/Components/Game/index.tsx b/frontend/code/src/Components/Game/index.tsx
index e57ca62..4b5ab1f 100644
--- a/frontend/code/src/Components/Game/index.tsx
+++ b/frontend/code/src/Components/Game/index.tsx
@@ -1,196 +1,262 @@
-import { useCallback, useEffect, useState } from "react"
-import { Rect, Stage , Layer , Circle, Line} from "react-konva"
-import { BsFillArrowRightCircleFill, BsFillArrowLeftCircleFill} from "react-icons/bs";
+import { useCallback, useEffect, useState } from "react";
+import { Rect, Stage, Layer, Circle, Line } from "react-konva";
+import {
+  BsFillArrowRightCircleFill,
+  BsFillArrowLeftCircleFill,
+} from "react-icons/bs";
 import { useGameState } from "./States/GameState";
 import { useSocketStore } from "../Chat/Services/SocketsServices";
 import { useNavigate } from "react-router-dom";
 
-
-
-
-
 const DURATION = 20;
 type Cords = {
-  x:number;
-  y:number;
-  ballsize:number;
-  p1Score:number;
-  p2Score:number;
-}
+  x: number;
+  y: number;
+  ballsize: number;
+  p1Score: number;
+  p2Score: number;
+};
 
-const throttle = (function() {
-  let timeout:any = undefined;
-  return function throttle(callback:any) {
+const throttle = (function () {
+  let timeout: any = undefined;
+  return function throttle(callback: any) {
     if (timeout === undefined) {
       callback();
       timeout = setTimeout(() => {
         timeout = undefined;
       }, DURATION);
     }
-  }
+  };
 })();
 
-
-function throttlify(callback : any) {
-  return function throttlified(event :any) {
+function throttlify(callback: any) {
+  return function throttlified(event: any) {
     throttle(() => {
       callback(event);
     });
-  }
+  };
 }
 
 export const Game = () => {
-    const gameState = useGameState();
-    const socketStore = useSocketStore();
-    const [level , setLevel] = useState(1);
-    const [t , setT ] = useState(0);
-    const navigate = useNavigate()
+  const gameState = useGameState();
+  const socketStore = useSocketStore();
+  const [level, setLevel] = useState(1);
+  const [t, setT] = useState(0);
+  const navigate = useNavigate();
 
-    const leave = useCallback(() => {
-      socketStore.socket.emit("leave")
-      gameState.setEnd(true);
-      // eslint-disable-next-line
-    },[])
-  
-    const handleMove = throttlify((e :any) => {
-        socketStore.socket.emit("mouse",e.evt.layerY);
-    })
-    const ArrowUp = () => {
-      socketStore.socket.emit("up");
-      socketStore.socket.off("up");
-    }
-    const ArrowDown = () => {
-      socketStore.socket.emit("down")
-      socketStore.socket.off("down");
-    }
-    useEffect(() => {
-      socketStore.socket.on("level", (l:number) => {setLevel(l)})
-      socketStore.socket.on("t", (t:number) => {setT(t)})
-      socketStore.socket.on("game.end", () =>{
-        gameState.setEnd(true)
-      })
-      document.addEventListener('keydown', (event) =>{
-        if (event.key === "ArrowUp")
-          socketStore.socket.emit("up");
-        if (event.key === "ArrowDown")
-            socketStore.socket.emit("down")
-      })
-        socketStore.socket.on("ball", (cord:Cords) => {
-          gameState.setBall({x:cord.x,y:cord.y,size:cord.ballsize,p1Score:cord.p1Score,p2Score:cord.p2Score})
-        })
-        socketStore.socket.on("paddle", (paddles:any) => {
-          gameState.setLPaddle(paddles.p1PaddleY);
-          gameState.setRPaddle(paddles.p2PaddleY);
-          if (gameState?.side !== paddles.side)
-            gameState.setSide(paddles.side);
-        })
-        socketStore.socket.on("screen Error", () =>{
-          console.log("you lose")
-          navigate("/home")
-        })
-        socketStore.socket.on("players", (players:any) => {
-          gameState.setP1(players[0]);
-          gameState.setP2(players[1]);
-        })
-        return () => {
-          socketStore.socket.off("ball");
-          socketStore.socket.off("mouse");
-          socketStore.socket.off("down");
-          socketStore.socket.off("up");
-          socketStore.socket.off("leave")
-          socketStore.socket.off("level")
-          socketStore.socket.off("t")
-          socketStore.socket.off("game.end")
+  const leave = useCallback(() => {
+    socketStore.socket?.emit("leave");
+    gameState.setEnd(true);
+    // eslint-disable-next-line
+  }, []);
 
-          window.removeEventListener("keydown",()=>{});
+  const handleMove = throttlify((e: any) => {
+    socketStore.socket?.emit("mouse", e.evt.layerY);
+  });
+  const ArrowUp = () => {
+    socketStore.socket?.emit("up");
+    socketStore.socket?.off("up");
+  };
+  const ArrowDown = () => {
+    socketStore.socket?.emit("down");
+    socketStore.socket?.off("down");
+  };
+  useEffect(() => {
+    socketStore.socket?.on("level", (l: number) => {
+      setLevel(l);
+    });
+    socketStore.socket?.on("t", (t: number) => {
+      setT(t);
+    });
+    socketStore.socket?.on("game.end", () => {
+      gameState.setEnd(true);
+    });
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "ArrowUp") socketStore.socket?.emit("up");
+      if (event.key === "ArrowDown") socketStore.socket?.emit("down");
+    });
+    socketStore.socket?.on("ball", (cord: Cords) => {
+      gameState.setBall({
+        x: cord.x,
+        y: cord.y,
+        size: cord.ballsize,
+        p1Score: cord.p1Score,
+        p2Score: cord.p2Score,
+      });
+    });
+    socketStore.socket?.on("paddle", (paddles: any) => {
+      gameState.setLPaddle(paddles.p1PaddleY);
+      gameState.setRPaddle(paddles.p2PaddleY);
+      if (gameState?.side !== paddles.side) gameState.setSide(paddles.side);
+    });
+    socketStore.socket?.on("screen Error", () => {
+      navigate("/home");
+    });
+    socketStore.socket?.on("players", (players: any) => {
+      gameState.setP1(players[0]);
+      gameState.setP2(players[1]);
+    });
+    return () => {
+      socketStore.socket?.off("ball");
+      socketStore.socket?.off("mouse");
+      socketStore.socket?.off("down");
+      socketStore.socket?.off("up");
+      socketStore.socket?.off("leave");
+      socketStore.socket?.off("level");
+      socketStore.socket?.off("t");
+      socketStore.socket?.off("game.end");
 
-         }
-         // eslint-disable-next-line
-    },[])
-    /* eslint-disable */
-    useEffect(() => {
-      if (!gameState.p1)
-        navigate("/home")
-      const divh = document.getElementById('Game')?.offsetHeight
-      const divw = document.getElementById('Game')?.offsetWidth
-      socketStore.socket.emit("screen",{h:divh,w:divw})
+      window.removeEventListener("keydown", () => {});
+    };
+    // eslint-disable-next-line
+  }, []);
+  /* eslint-disable */
+  useEffect(() => {
+    if (!gameState.p1) navigate("/home");
+    const divh = document.getElementById("Game")?.offsetHeight;
+    const divw = document.getElementById("Game")?.offsetWidth;
+    socketStore.socket?.emit("screen", { h: divh, w: divw });
+    gameState.setEnd(false);
+    if (divw) {
+      divw <= 742 ? gameState.setMobile(true) : gameState.setMobile(false);
+    }
+    window.addEventListener("resize", () => {
       gameState.setEnd(false);
-      if (divw) {divw <= 742 ? gameState.setMobile(true) : gameState.setMobile(false)}
-        window.addEventListener('resize', () => {
-          gameState.setEnd(false);
-            const divh = document.getElementById('Game')?.offsetHeight
-            const divw = document.getElementById('Game')?.offsetWidth
-            const aspectRatio = 16 / 9;
-            const newWidth = divw ?? 0 ;
-            const newHeight = newWidth / aspectRatio;
-            socketStore.socket.emit("screen",{h:newHeight,w:newWidth})
-            if (divh) gameState.setHeight(newHeight);
-            if (divw) {gameState.setWidth(divw);divw <= 742 ? gameState.setMobile(true) : gameState.setMobile(false);}
-        });
-
-       return () => {
-        socketStore.socket.off("screen");
-        window.removeEventListener("resize",()=>{});
+      const divh = document.getElementById("Game")?.offsetHeight;
+      const divw = document.getElementById("Game")?.offsetWidth;
+      const aspectRatio = 16 / 9;
+      const newWidth = divw ?? 0;
+      const newHeight = newWidth / aspectRatio;
+      socketStore.socket?.emit("screen", { h: newHeight, w: newWidth });
+      if (divh) gameState.setHeight(newHeight);
+      if (divw) {
+        gameState.setWidth(divw);
+        divw <= 742 ? gameState.setMobile(true) : gameState.setMobile(false);
+      }
+    });
 
-       }
+    return () => {
+      socketStore.socket?.off("screen");
+      window.removeEventListener("resize", () => {});
+    };
 
-        // disable eslit next line
-    },[])
+    // disable eslit next line
+  }, []);
 
-    useEffect(() => {
-        const divh = document.getElementById('Game')?.offsetHeight
-        const divw = document.getElementById('Game')?.offsetWidth
-        console.log(divh)
-        console.log(divw)
-        const aspectRatio = 16 / 9;
-        const newWidth = divw ?? 0 ;
-        const newHeight = newWidth / aspectRatio;
-        if (divh) gameState.setHeight(newHeight);
-        if (divw) gameState.setWidth(divw);
-    
-    },[gameState.width , gameState.height])
+  useEffect(() => {
+    const divh = document.getElementById("Game")?.offsetHeight;
+    const divw = document.getElementById("Game")?.offsetWidth;
 
-    return ( 
-    <div className="flex flex-col gap-10 justify-start md:justify-center md:items-center items-center pt-12 md:pt-0  h-full w-full" >
-        <div className="flex items-center justify-center gap-x10 w-full xl:pt-4">
-            <div className="flex items-center justify-center w-1/4 gap-6">
-                <img alt="" className="rounded-full w-auto h-auto max-w-[10vw] md:max-w-[20vw]" src={`https://res.cloudinary.com/trandandan/image/upload/c_thumb,h_72,w_72/${gameState?.p1?.avatar}`} />
-                <span className="font-lexend font-extrabold text-[4vw] xl:text-[2vw] text-current">{gameState.ball.p1Score}</span>
-            </div>
-            <div className="flex items-center justify-center w-1/4 gap-6">
-                <span className="font-lexend font-extrabold text-[4vw] xl:text-[2vw] text-current">{gameState?.ball.p2Score}</span>
-                <img alt="" className="rounded-full w-auto h-auto max-w-[10vw] md:max-w-[20vw]" src={`https://res.cloudinary.com/trandandan/image/upload/c_thumb,h_72,w_72/${gameState?.p2?.avatar}`} />
-                
-            </div>
-            <button className="btn" onClick={leave}>Leave</button>
+    const aspectRatio = 16 / 9;
+    const newWidth = divw ?? 0;
+    const newHeight = newWidth / aspectRatio;
+    if (divh) gameState.setHeight(newHeight);
+    if (divw) gameState.setWidth(divw);
+  }, [gameState.width, gameState.height]);
 
+  return (
+    <div className="flex flex-col gap-10 justify-start md:justify-center md:items-center items-center pt-12 md:pt-0  h-full w-full">
+      <div className="flex items-center justify-center gap-x10 w-full xl:pt-4">
+        <div className="flex items-center justify-center w-1/4 gap-6">
+          <img
+            alt=""
+            className="rounded-full w-auto h-auto max-w-[10vw] md:max-w-[20vw]"
+            src={`https://res.cloudinary.com/trandandan/image/upload/c_thumb,h_72,w_72/${gameState?.p1?.avatar}`}
+          />
+          <span className="font-lexend font-extrabold text-[4vw] xl:text-[2vw] text-current">
+            {gameState.ball.p1Score}
+          </span>
         </div>
-          <div className="flex justify-center items-center flex-col">
-              <div className="font-poppins text-neutral font-medium">{t > 0 ?  (`next level start after ${t}`) : (`level ${level}`)}</div>
-
-          </div>
-        <div className="flex items-center justify-center min-h-16 max-h-[80%] max-w-[800px] 3xl:max-w-[1150px] min-w-92 w-[95%] rounded-xl aspect-video border-primary border-4" id="Game">
-            <Stage onMouseMove={handleMove}  width={gameState.width } height={gameState.height } style={{borderWidth:"4px",borderColor:"#7940CF",borderRadius:"4px"}} >
-                <Layer >
-                    <Rect height={gameState.height} width={gameState.width} fill="#151B26" x={0} y={0} />
-                    <Line points={[0, gameState.height , 0 , 0]} dash={[gameState.height / 30 , 10]} strokeWidth={2} stroke={"white"} height={gameState.height} width={20} fill="white" x={gameState.width / 2} y={0}  />
-                    <Rect cornerRadius={12} height={gameState.height / 6} width={gameState.width / 70} x={gameState.width / 100} y={gameState.lPaddle} fill="white" />
-                    <Rect cornerRadius={12} height={gameState.height / 6} width={gameState.width / 70} x={gameState.width - (gameState.width / 100) - (gameState.width / 70)} y={gameState.rPaddle}  fill="white" />
-                    <Circle fill="white" height={gameState.ball.size} width={gameState.ball.size} x={gameState.ball.x} y={gameState.ball.y} />
-                </Layer>
-
-            </Stage>
-            
+        <div className="flex items-center justify-center w-1/4 gap-6">
+          <span className="font-lexend font-extrabold text-[4vw] xl:text-[2vw] text-current">
+            {gameState?.ball.p2Score}
+          </span>
+          <img
+            alt=""
+            className="rounded-full w-auto h-auto max-w-[10vw] md:max-w-[20vw]"
+            src={`https://res.cloudinary.com/trandandan/image/upload/c_thumb,h_72,w_72/${gameState?.p2?.avatar}`}
+          />
+        </div>
+        <button className="btn" onClick={leave}>
+          Leave
+        </button>
+      </div>
+      <div className="flex justify-center items-center flex-col">
+        <div className="font-poppins text-neutral font-medium">
+          {t > 0 ? `next level start after ${t}` : `level ${level}`}
         </div>
-        {gameState.mobile && (
+      </div>
+      <div
+        className="flex items-center justify-center min-h-16 max-h-[80%] max-w-[800px] 3xl:max-w-[1150px] min-w-92 w-[95%] rounded-xl aspect-video border-primary border-4"
+        id="Game"
+      >
+        <Stage
+          onMouseMove={handleMove}
+          width={gameState.width}
+          height={gameState.height}
+          style={{
+            borderWidth: "4px",
+            borderColor: "#7940CF",
+            borderRadius: "4px",
+          }}
+        >
+          <Layer>
+            <Rect
+              height={gameState.height}
+              width={gameState.width}
+              fill="#151B26"
+              x={0}
+              y={0}
+            />
+            <Line
+              points={[0, gameState.height, 0, 0]}
+              dash={[gameState.height / 30, 10]}
+              strokeWidth={2}
+              stroke={"white"}
+              height={gameState.height}
+              width={20}
+              fill="white"
+              x={gameState.width / 2}
+              y={0}
+            />
+            <Rect
+              cornerRadius={12}
+              height={gameState.height / 6}
+              width={gameState.width / 70}
+              x={gameState.width / 100}
+              y={gameState.lPaddle}
+              fill="white"
+            />
+            <Rect
+              cornerRadius={12}
+              height={gameState.height / 6}
+              width={gameState.width / 70}
+              x={gameState.width - gameState.width / 100 - gameState.width / 70}
+              y={gameState.rPaddle}
+              fill="white"
+            />
+            <Circle
+              fill="white"
+              height={gameState.ball.size}
+              width={gameState.ball.size}
+              x={gameState.ball.x}
+              y={gameState.ball.y}
+            />
+          </Layer>
+        </Stage>
+      </div>
+      {gameState.mobile && (
         <div className="flex justify-around items-center w-full gap-20">
-            <BsFillArrowLeftCircleFill onClick={ArrowUp} className="w-14 h-14 hover:cursor-pointer hover:fill-secondary hover:transition-colors delay-100 "/>
-            <BsFillArrowRightCircleFill onClick={ArrowDown} className="w-14 h-14 hover:cursor-pointer hover:fill-secondary hover:transition-colors delay-100"/>
+          <BsFillArrowLeftCircleFill
+            onClick={ArrowUp}
+            className="w-14 h-14 hover:cursor-pointer hover:fill-secondary hover:transition-colors delay-100 "
+          />
+          <BsFillArrowRightCircleFill
+            onClick={ArrowDown}
+            className="w-14 h-14 hover:cursor-pointer hover:fill-secondary hover:transition-colors delay-100"
+          />
         </div>
-    )
-        
-        }
+      )}
     </div>
-
-    )
-} 
+  );
+};
diff --git a/frontend/code/src/Components/Home/LeaderBoard.tsx b/frontend/code/src/Components/Home/LeaderBoard.tsx
index 089ede0..ecec368 100644
--- a/frontend/code/src/Components/Home/LeaderBoard.tsx
+++ b/frontend/code/src/Components/Home/LeaderBoard.tsx
@@ -3,7 +3,7 @@ import InfiniteScroll from "react-infinite-scroll-component";
 import { Link } from "react-router-dom";
 import toast from "react-hot-toast";
 
-import { Chart } from './assets/Chart';
+import { Chart } from "./assets/Chart";
 import { Trophy } from "./assets/Trophy";
 import { Daimond } from "./assets/Daimond";
 import { Logo } from "../Layout/Assets/Logo";
@@ -13,141 +13,143 @@ import { NullPlaceHolder } from "../Chat/Components/RoomChatHelpers";
 import api from "../../Api/base";
 
 export const LeaderBoard = () => {
-    const [users, setUsers] = useState<any[]>([]);
-    const [loading, setLoading] = useState<boolean>(true);
+  const [users, setUsers] = useState<any[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
 
-    const page = useRef(0);
-    const hasMoreItems = useRef(true);
-    const [fetching, setFetching] = useState(false);
-    const [nextPageUrl, setNextPageUrl] = useState<string | null>("/leaderboard?offset=0&limit=20");
+  const page = useRef(0);
+  const hasMoreItems = useRef(true);
+  const [fetching, setFetching] = useState(false);
+  const [nextPageUrl, setNextPageUrl] = useState<string | null>(
+    "/leaderboard?offset=0&limit=20",
+  );
 
-    const fetchItems = useCallback(async () => {
-        if (!nextPageUrl) return;
-        if (fetching) return;
+  const fetchItems = useCallback(async () => {
+    if (!nextPageUrl) return;
+    if (fetching) return;
 
-        setFetching(true);
+    setFetching(true);
 
-        try {
-            const newdata = await api.get(nextPageUrl);
-            // End of pagination
-            if (!newdata.data || newdata.data.length < 20) {
-                newdata.data && setUsers([...users, ...newdata.data]);
-                setNextPageUrl(null);
-                // Update hasMoreItems state
-                hasMoreItems.current = false;
-                return;
-            }
-            // Prepare next page
-            setUsers([...users, ...newdata.data]);
-            setNextPageUrl(`/leaderboard?offset=${page.current}&limit=20`);
-            page.current += 20;
-            // Update hasMoreItems state
-            hasMoreItems.current = true;
-        } catch (e) {
-            toast.error("Can't get leadeboard");
-        } finally {
-            setLoading(false);
-            setFetching(false);
-        }
-    }, [users, fetching, nextPageUrl]);
+    try {
+      const newdata = await api.get(nextPageUrl);
+      // End of pagination
+      if (!newdata.data || newdata.data.length < 20) {
+        newdata.data && setUsers([...users, ...newdata.data]);
+        setNextPageUrl(null);
+        // Update hasMoreItems state
+        hasMoreItems.current = false;
+        return;
+      }
+      // Prepare next page
+      setUsers([...users, ...newdata.data]);
+      setNextPageUrl(`/leaderboard?offset=${page.current}&limit=20`);
+      page.current += 20;
+      // Update hasMoreItems state
+      hasMoreItems.current = true;
+    } catch (e) {
+      toast.error("Can't get leadeboard");
+    } finally {
+      setLoading(false);
+      setFetching(false);
+    }
+  }, [users, fetching, nextPageUrl]);
 
-    useEffect(() => {
-        fetchItems();
-        page.current += 20;
-        //eslint-disable-next-line
-    }, []);
+  useEffect(() => {
+    fetchItems();
+    page.current += 20;
+    // eslint-disable-next-line
+  }, []);
 
-    return (
-        <div className='flex flex-col rounded-2xl justify-start items-start mt-6 sm:h-full h-full w-full bg-base-200'>
-            <div className="flex justify-start items-start gap-x-4 p-4 pb-0 md:p-8 md:pb-0">
-                <Chart /> <span className='font-montserrat'>Leader Board</span>
-            </div>
+  return (
+    <div className="flex flex-col rounded-2xl justify-start items-start mt-6 sm:h-full h-full w-full bg-base-200">
+      <div className="flex justify-start items-start gap-x-4 p-4 pb-0 md:p-8 md:pb-0">
+        <Chart /> <span className="font-montserrat">Leader Board</span>
+      </div>
 
-            {(users.length > 0) || loading ? (
-                <div className="w-full h-full p-4 md:p-8">
-                    <InfiniteScroll
-                        dataLength={users.length}
-                        next={fetchItems}
-                        loader={
-                            <div className="flex items-center justify-center w-full ">
-                                <Logo className="sm:w-12 w-12" />
-                            </div>
-                        }
-                        endMessage={
-                            <div className="p-4 flex justify-center items-center font-montserrat text-neutral">
-                                No more results!
-                            </div>
-                        }
-                        hasMore={hasMoreItems.current}
-                        scrollableTarget="scrollTarget"
-                        style={{ overflow: "auto", height: "100%" }}
+      {users.length > 0 || loading ? (
+        <div className="w-full h-full p-4 md:p-8">
+          <InfiniteScroll
+            dataLength={users.length}
+            next={fetchItems}
+            loader={
+              <div className="flex items-center justify-center w-full ">
+                <Logo className="sm:w-12 w-12" />
+              </div>
+            }
+            endMessage={
+              <div className="p-4 flex justify-center items-center font-montserrat text-neutral">
+                No more results!
+              </div>
+            }
+            hasMore={hasMoreItems.current}
+            scrollableTarget="scrollTarget"
+            style={{ overflow: "auto", height: "100%" }}
+          >
+            <table className="table w-full border-separate border-spacing-x-0 border-spacing-y-2">
+              <thead>
+                <tr className="w-full px-10">
+                  <th>
+                    <div className="flex justify-center items-center w-18">
+                      Place
+                    </div>
+                  </th>
+                  <th>
+                    <div className="flex justify-center items-center w-full">
+                      User
+                    </div>
+                  </th>
+                  <th>
+                    <div className="flex justify-center items-center w-18">
+                      Score
+                    </div>
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="no-scrollbar">
+                {!loading &&
+                  users.map((x: any, index: number) => (
+                    <tr
+                      key={index}
+                      className="border-base-200 rounded-xl w-full px-4 h-16 sm:px-10 mb-2"
                     >
-                        <table className="table w-full border-separate border-spacing-x-0 border-spacing-y-2">
-                            <thead>
-                                <tr className="w-full px-10">
-                                    <th>
-                                        <div className="flex justify-center items-center w-18">
-                                            Place
-                                        </div>
-                                    </th>
-                                    <th>
-                                        <div className="flex justify-center items-center w-full">
-                                            User
-                                        </div>
-                                    </th>
-                                    <th>
-                                        <div className="flex justify-center items-center w-18">
-                                            Score
-                                        </div>
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody className="no-scrollbar">
-                                {!loading &&
-                                    users.map((x: any, index: number) => (
-                                        <tr
-                                            key={index}
-                                            className="border-base-200 rounded-xl w-full px-4 h-16 sm:px-10 mb-2"
-                                        >
-                                            <td className="bg-accent rounded-l-xl">
-                                                <div className="flex justify-center items-center gap-x-2 w-18">
-                                                    <Trophy className="w-5 h-5" /> {index + 1}
-                                                </div>
-                                            </td>
-                                            <td className="bg-accent">
-                                                <div className="flex justify-center items-center gap-x-2 hover:cursor-pointer">
-                                                    <Link to={`/Profile/${x.userId}`}>
-                                                        <div className="flex justify-start items-center gap-4 hover:cursor-pointer w-52">
-                                                            <img
-                                                                className="w-8 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2"
-                                                                src={`https://res.cloudinary.com/trandandan/image/upload/c_thumb,h_72,w_72/${x?.avatar}`}
-                                                                alt={x?.Username}
-                                                            />
-                                                            <div className="flex font-montserrat text-neutral font-semibold">
-                                                                <span className="truncate w-40">
-                                                                    {x?.Username}
-                                                                </span>
-                                                            </div>
-                                                        </div>
-                                                    </Link>
-                                                </div>
-                                            </td>
-                                            <td className="bg-accent rounded-r-xl">
-                                                <div className="flex justify-center items-center gap-x-2 w-18">
-                                                    <Daimond className="w-5 h-5" /> {x?.wins}
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    ))}
-                            </tbody>
-                        </table>
-                    </InfiniteScroll>
-                </div>
-            ) : (
-                <div className="h-full w-full flex items-center justify-center">
-                    <NullPlaceHolder message="No leaderboard available" />
-                </div>
-            )}
+                      <td className="bg-accent rounded-l-xl">
+                        <div className="flex justify-center items-center gap-x-2 w-18">
+                          <Trophy className="w-5 h-5" /> {index + 1}
+                        </div>
+                      </td>
+                      <td className="bg-accent">
+                        <div className="flex justify-center items-center gap-x-2 hover:cursor-pointer">
+                          <Link to={`/Profile/${x.userId}`}>
+                            <div className="flex justify-start items-center gap-4 hover:cursor-pointer w-52">
+                              <img
+                                className="w-8 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2"
+                                src={`https://res.cloudinary.com/trandandan/image/upload/c_thumb,h_72,w_72/${x?.avatar}`}
+                                alt={x?.Username}
+                              />
+                              <div className="flex font-montserrat text-neutral font-semibold">
+                                <span className="truncate w-40">
+                                  {x?.Username}
+                                </span>
+                              </div>
+                            </div>
+                          </Link>
+                        </div>
+                      </td>
+                      <td className="bg-accent rounded-r-xl">
+                        <div className="flex justify-center items-center gap-x-2 w-18">
+                          <Daimond className="w-5 h-5" /> {x?.wins}
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+              </tbody>
+            </table>
+          </InfiniteScroll>
+        </div>
+      ) : (
+        <div className="h-full w-full flex items-center justify-center">
+          <NullPlaceHolder message="No leaderboard available" />
         </div>
-    )
-}
+      )}
+    </div>
+  );
+};
diff --git a/frontend/code/src/Components/Home/assets/Chart.tsx b/frontend/code/src/Components/Home/assets/Chart.tsx
index 404dcd2..e9a5cd2 100644
--- a/frontend/code/src/Components/Home/assets/Chart.tsx
+++ b/frontend/code/src/Components/Home/assets/Chart.tsx
@@ -1,9 +1,16 @@
 export const Chart = () => {
-    return (
-        
-        <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M16.8694 0C20.7805 0 22.9885 2.21835 23 6.1295V16.8705C23 20.7805 20.7805 23 16.8694 23H6.1295C2.21835 23 0 20.7805 0 16.8705V6.1295C0 2.21835 2.21835 0 6.1295 0H16.8694ZM12.075 4.7495C11.7519 4.554 11.3609 4.554 11.0515 4.7495C10.7399 4.94385 10.5685 5.3015 10.6019 5.658V17.3765C10.6605 17.871 11.0734 18.239 11.5564 18.239C12.052 18.239 12.4649 17.871 12.5109 17.3765V5.658C12.5569 5.3015 12.3855 4.94385 12.075 4.7495ZM6.7045 8.5215C6.394 8.326 6.00185 8.326 5.6925 8.5215C5.38085 8.717 5.2095 9.07235 5.244 9.43V17.3765C5.28885 17.871 5.70285 18.239 6.19735 18.239C6.693 18.239 7.10585 17.871 7.15185 17.3765V9.43C7.1875 9.07235 7.01385 8.717 6.7045 8.5215ZM17.3524 12.696C17.043 12.5005 16.652 12.5005 16.33 12.696C16.0184 12.8915 15.847 13.2354 15.893 13.6045V17.3765C15.939 17.871 16.3519 18.239 16.8475 18.239C17.3305 18.239 17.7434 17.871 17.802 17.3765V13.6045C17.8354 13.2354 17.664 12.8915 17.3524 12.696Z" fill="white"/>
-        </svg>
-
-    )
-}
+  return (
+    <svg
+      width="23"
+      height="23"
+      viewBox="0 0 23 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16.8694 0C20.7805 0 22.9885 2.21835 23 6.1295V16.8705C23 20.7805 20.7805 23 16.8694 23H6.1295C2.21835 23 0 20.7805 0 16.8705V6.1295C0 2.21835 2.21835 0 6.1295 0H16.8694ZM12.075 4.7495C11.7519 4.554 11.3609 4.554 11.0515 4.7495C10.7399 4.94385 10.5685 5.3015 10.6019 5.658V17.3765C10.6605 17.871 11.0734 18.239 11.5564 18.239C12.052 18.239 12.4649 17.871 12.5109 17.3765V5.658C12.5569 5.3015 12.3855 4.94385 12.075 4.7495ZM6.7045 8.5215C6.394 8.326 6.00185 8.326 5.6925 8.5215C5.38085 8.717 5.2095 9.07235 5.244 9.43V17.3765C5.28885 17.871 5.70285 18.239 6.19735 18.239C6.693 18.239 7.10585 17.871 7.15185 17.3765V9.43C7.1875 9.07235 7.01385 8.717 6.7045 8.5215ZM17.3524 12.696C17.043 12.5005 16.652 12.5005 16.33 12.696C16.0184 12.8915 15.847 13.2354 15.893 13.6045V17.3765C15.939 17.871 16.3519 18.239 16.8475 18.239C17.3305 18.239 17.7434 17.871 17.802 17.3765V13.6045C17.8354 13.2354 17.664 12.8915 17.3524 12.696Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
diff --git a/frontend/code/src/Components/Home/assets/Daimond.tsx b/frontend/code/src/Components/Home/assets/Daimond.tsx
index f3c9d09..f802dc7 100644
--- a/frontend/code/src/Components/Home/assets/Daimond.tsx
+++ b/frontend/code/src/Components/Home/assets/Daimond.tsx
@@ -1,11 +1,22 @@
-import type { HTMLAttributes } from "react"
+import type { HTMLAttributes } from "react";
 
 type DiamondProps = HTMLAttributes<HTMLOrSVGElement>;
 
 export const Daimond = (props: DiamondProps) => {
-    return (
-        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-            <path d="M9 17L1.6797 7.84963C1.34718 7.43398 1.18092 7.22615 1.13625 6.9757C1.09159 6.72524 1.17575 6.47276 1.34407 5.96778L2.0883 3.73509C2.52832 2.41505 2.74832 1.75503 3.2721 1.37752C3.79587 1 4.49159 1 5.88304 1H12.117C13.5084 1 14.2041 1 14.7279 1.37752C15.2517 1.75503 15.4717 2.41505 15.9117 3.73509L16.6559 5.96778C16.8243 6.47276 16.9084 6.72524 16.8637 6.9757C16.8191 7.22615 16.6528 7.43398 16.3203 7.84963L9 17ZM9 17L12.5 6M9 17L5.5 6M16.5 7L12.5 6M12.5 6L11 2M12.5 6H5.5M7 2L5.5 6M5.5 6L1.5 7" stroke="#F2F2F2" strokeLinecap="round" />
-        </svg>
-    )
-}
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M9 17L1.6797 7.84963C1.34718 7.43398 1.18092 7.22615 1.13625 6.9757C1.09159 6.72524 1.17575 6.47276 1.34407 5.96778L2.0883 3.73509C2.52832 2.41505 2.74832 1.75503 3.2721 1.37752C3.79587 1 4.49159 1 5.88304 1H12.117C13.5084 1 14.2041 1 14.7279 1.37752C15.2517 1.75503 15.4717 2.41505 15.9117 3.73509L16.6559 5.96778C16.8243 6.47276 16.9084 6.72524 16.8637 6.9757C16.8191 7.22615 16.6528 7.43398 16.3203 7.84963L9 17ZM9 17L12.5 6M9 17L5.5 6M16.5 7L12.5 6M12.5 6L11 2M12.5 6H5.5M7 2L5.5 6M5.5 6L1.5 7"
+        stroke="#F2F2F2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};
diff --git a/frontend/code/src/Components/Home/assets/Trophy.tsx b/frontend/code/src/Components/Home/assets/Trophy.tsx
index 7d9e5ba..3237080 100644
--- a/frontend/code/src/Components/Home/assets/Trophy.tsx
+++ b/frontend/code/src/Components/Home/assets/Trophy.tsx
@@ -1,11 +1,21 @@
-import type { HTMLAttributes } from "react"
+import type { HTMLAttributes } from "react";
 
 type TrophyProps = HTMLAttributes<HTMLOrSVGElement>;
 
 export const Trophy = (props: TrophyProps) => {
-    return (
-        <svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-            <path d="M25.0906 2.90323C25.1875 1.93548 25.1875 1.06452 25.1875 0H5.8125C5.8125 1.06452 5.8125 1.93548 5.90938 2.90323H0V3.87097C0 12.4839 10.9469 18.5806 13.5625 19.9355V23.2258C13.5625 24.871 12.3031 26.129 10.6563 26.129H8.71875V30H22.2812V26.129H20.3438C18.6969 26.129 17.4375 24.871 17.4375 23.2258V19.9355C20.0531 18.5806 31 12.4839 31 3.87097V2.90323H25.0906ZM2.03438 4.83871H6.10313C6.49063 9.19355 7.55625 12.2903 8.71875 14.5161C5.61875 12.0968 2.42188 8.70968 2.03438 4.83871ZM22.3781 14.5161C23.5406 12.2903 24.6063 9.19355 24.9938 4.83871H29.0625C28.5781 8.70968 25.3813 12.0968 22.3781 14.5161Z" fill="#7138CE" />
-        </svg>
-    )
-}
+  return (
+    <svg
+      width="31"
+      height="30"
+      viewBox="0 0 31 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M25.0906 2.90323C25.1875 1.93548 25.1875 1.06452 25.1875 0H5.8125C5.8125 1.06452 5.8125 1.93548 5.90938 2.90323H0V3.87097C0 12.4839 10.9469 18.5806 13.5625 19.9355V23.2258C13.5625 24.871 12.3031 26.129 10.6563 26.129H8.71875V30H22.2812V26.129H20.3438C18.6969 26.129 17.4375 24.871 17.4375 23.2258V19.9355C20.0531 18.5806 31 12.4839 31 3.87097V2.90323H25.0906ZM2.03438 4.83871H6.10313C6.49063 9.19355 7.55625 12.2903 8.71875 14.5161C5.61875 12.0968 2.42188 8.70968 2.03438 4.83871ZM22.3781 14.5161C23.5406 12.2903 24.6063 9.19355 24.9938 4.83871H29.0625C28.5781 8.70968 25.3813 12.0968 22.3781 14.5161Z"
+        fill="#7138CE"
+      />
+    </svg>
+  );
+};
diff --git a/frontend/code/src/Components/Home/index.tsx b/frontend/code/src/Components/Home/index.tsx
index 7c8c943..2f4f5a7 100644
--- a/frontend/code/src/Components/Home/index.tsx
+++ b/frontend/code/src/Components/Home/index.tsx
@@ -19,8 +19,13 @@ export const Home = (): JSX.Element => {
             READY TO PLAY A GAME?
           </div>
 
-          <Link to={"/Play"} className="transition-all duration-500 hover:scale-110 ease-in-out flex justify-center items-center px-4 sm:px-8 py-2 sm:py-4 rounded-lg bg-gradient-to-t from-violet-800 to-violet-500">
-            <span className="text-white font-montserrat text-xs xl:text-[0.99vw]">PLAY NOW</span>
+          <Link
+            to={"/Play"}
+            className="transition-all duration-500 hover:scale-110 ease-in-out flex justify-center items-center px-4 sm:px-8 py-2 sm:py-4 rounded-lg bg-gradient-to-t from-violet-800 to-violet-500"
+          >
+            <span className="text-white font-montserrat text-xs xl:text-[0.99vw]">
+              PLAY NOW
+            </span>
           </Link>
         </div>
       </div>
diff --git a/frontend/code/src/Components/Layout/Assets/Alert.tsx b/frontend/code/src/Components/Layout/Assets/Alert.tsx
index fcdf0ae..ca45e1b 100644
--- a/frontend/code/src/Components/Layout/Assets/Alert.tsx
+++ b/frontend/code/src/Components/Layout/Assets/Alert.tsx
@@ -32,54 +32,53 @@ export const Alert = () => {
   }, [user?.notifications]);
 
   useEffect(() => {
-    socketStore.socket.on("notification", (notification: any) => {
+    socketStore.socket?.on("notification", (notification: any) => {
       if (
         notification.actorId === user.id ||
         notification.entity_type === "message"
       ) {
-        console.log(notification);
         if (notification.entity.authorId !== user.id) {
           toast.custom(
-            (t) => (
-              // eslint-disable-next-line
-              (t.duration = 450),
+            (t) =>
               (
-                <div
-                  className={`${
-                    t.visible ? "animate-enter" : "animate-leave"
-                  } max-w-sm w-full transition-opacity ease-in  bg-purple-500 rounded-xl  flex flex-col  relative top-[6vh] p-4`}
-                >
-                  <div className="flex flex-row justify-between  ">
-                    <div className="  flex flex-row ">
-                      <img
-                        alt="avatar"
-                        className="w-10 h-10 rounded-full"
-                        src={notification.entity.avatar.medium}
-                      />
-                      <div className=" pl-3 flex flex-col items-baseline">
-                        <p className=" text-white  font-poppins text-base font-semibold leading-5 capitalize">
-                          message Received
-                        </p>
-                        <p className="text-[#2F3F53] font-poppins text-base font-normal text-center max-w-[150px] truncate">
-                          {notification.entity.content}
-                        </p>
+                // eslint-disable-next-line
+                (t.duration = 450),
+                (
+                  <div
+                    className={`${
+                      t.visible ? "animate-enter" : "animate-leave"
+                    } max-w-sm w-full transition-opacity ease-in  bg-purple-500 rounded-xl  flex flex-col  relative top-[6vh] p-4`}
+                  >
+                    <div className="flex flex-row justify-between  ">
+                      <div className="  flex flex-row ">
+                        <img
+                          alt="avatar"
+                          className="w-10 h-10 rounded-full"
+                          src={notification.entity.avatar.medium}
+                        />
+                        <div className=" pl-3 flex flex-col items-baseline">
+                          <p className=" text-white  font-poppins text-base font-semibold leading-5 capitalize">
+                            message Received
+                          </p>
+                          <p className="text-[#2F3F53] font-poppins text-base font-normal text-center max-w-[150px] truncate">
+                            {notification.entity.content}
+                          </p>
+                        </div>
                       </div>
-                    </div>
 
-                    <div>
-                      <img
-                        alt="avatar"
-                        className=" pb-1 w-6 h-6"
-                        src={closeWhite}
-                      />
+                      <div>
+                        <img
+                          alt="avatar"
+                          className=" pb-1 w-6 h-6"
+                          src={closeWhite}
+                        />
+                      </div>
                     </div>
                   </div>
-                </div>
-              )
-            )
+                )
+              ),
           );
         }
-        // }
 
         return;
       }
@@ -87,9 +86,9 @@ export const Alert = () => {
     });
 
     return () => {
-      socketStore.socket.off("notification");
+      socketStore.socket?.off("notification");
     };
-    //eslint-disable-next-line
+    // eslint-disable-next-line
   }, [socketStore]);
 
   useEffect(() => {
@@ -194,8 +193,7 @@ export const Alert = () => {
                 ))}
                 <div
                   ref={ref}
-                  className="flex justify-center items-center h-2 py-5 border-t border-gray-700
-								"
+                  className="flex justify-center items-center h-2 py-5 border-t border-gray-700"
                 >
                   <span className="text-xs text-gray-400">
                     {notificationDone ? "No more notifications" : "Loading..."}
diff --git a/frontend/code/src/Components/Layout/Assets/Dash.tsx b/frontend/code/src/Components/Layout/Assets/Dash.tsx
index 1f4f091..0524839 100644
--- a/frontend/code/src/Components/Layout/Assets/Dash.tsx
+++ b/frontend/code/src/Components/Layout/Assets/Dash.tsx
@@ -12,7 +12,7 @@ export const Dash = ({ selected, className, ...props }: DashProps) => {
         className={classNames(
           "h-10 w-10 hover:bg-secondary p-1 rounded-xl flex justify-center items-center hover:cursor-pointer",
           selected && "bg-secondary",
-          className
+          className,
         )}
         {...props}
       >
diff --git a/frontend/code/src/Components/Layout/Assets/Game.tsx b/frontend/code/src/Components/Layout/Assets/Game.tsx
index 47c1d05..c10a497 100644
--- a/frontend/code/src/Components/Layout/Assets/Game.tsx
+++ b/frontend/code/src/Components/Layout/Assets/Game.tsx
@@ -12,7 +12,7 @@ export const Game = ({ selected, className, ...props }: GameProps) => {
         className={classNames(
           "h-10 w-10 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer",
           selected && "bg-secondary",
-          className
+          className,
         )}
         {...props}
       >
diff --git a/frontend/code/src/Components/Layout/Assets/Invitationacceptance.tsx b/frontend/code/src/Components/Layout/Assets/Invitationacceptance.tsx
index 85b8273..4a8ce3b 100644
--- a/frontend/code/src/Components/Layout/Assets/Invitationacceptance.tsx
+++ b/frontend/code/src/Components/Layout/Assets/Invitationacceptance.tsx
@@ -13,25 +13,25 @@ export const InvitationWaiting = forwardRef<HTMLDialogElement, any>(
     useEffect(() => {
       if (!userStore.gameId)
         return () => {
-          socketStore.socket.off("game.declined");
-          socketStore.socket.off("game.accepted");
+          socketStore.socket?.off("game.declined");
+          socketStore.socket?.off("game.accepted");
         };
 
-      socketStore.socket.on("game.declined", () => {
+      socketStore.socket?.on("game.declined", () => {
         toast.error("Game declined");
         userStore.setGameWaitingId("");
         (ref as RefObject<HTMLDialogElement>).current?.close();
       });
-      socketStore.socket.on("game.accepted", () => {
+      socketStore.socket?.on("game.accepted", () => {
         toast.success("Game accepted");
         userStore.setGameWaitingId("");
         (ref as RefObject<HTMLDialogElement>).current?.close();
       });
       return () => {
-        socketStore.socket.off("game.declined");
-        socketStore.socket.off("game.accepted");
+        socketStore.socket?.off("game.declined");
+        socketStore.socket?.off("game.accepted");
       };
-	//eslint-disable-next-line
+      // eslint-disable-next-line
     }, [userStore.gameId, socketStore.socket, ref]);
 
     return (
diff --git a/frontend/code/src/Components/Layout/Assets/Invitationmodale.tsx b/frontend/code/src/Components/Layout/Assets/Invitationmodale.tsx
index 6da0dbf..f4ac303 100644
--- a/frontend/code/src/Components/Layout/Assets/Invitationmodale.tsx
+++ b/frontend/code/src/Components/Layout/Assets/Invitationmodale.tsx
@@ -26,18 +26,18 @@ export const InvitationGame = forwardRef<HTMLDialogElement, any>((_, ref) => {
   useEffect(() => {
     if (!userStore.inviterId)
       return () => {
-        socketStore.socket.off("game.declined");
+        socketStore.socket?.off("game.declined");
       };
 
-    socketStore.socket.on("game.declined", () => {
+    socketStore.socket?.on("game.declined", () => {
       toast.error("Game declined");
       userStore.updateGameInvitationId("");
       (ref as RefObject<HTMLDialogElement>).current?.close();
     });
     return () => {
-      socketStore.socket.off("game.declined");
+      socketStore.socket?.off("game.declined");
     };
-    //eslint-disable-next-line
+    // eslint-disable-next-line
   }, [userStore.inviterId, socketStore, ref]);
 
   return (
diff --git a/frontend/code/src/Components/Layout/Assets/Message.tsx b/frontend/code/src/Components/Layout/Assets/Message.tsx
index 1fecb84..3341d03 100644
--- a/frontend/code/src/Components/Layout/Assets/Message.tsx
+++ b/frontend/code/src/Components/Layout/Assets/Message.tsx
@@ -12,7 +12,7 @@ export const Message = ({ selected, className, ...props }: MessageProps) => {
         className={classNames(
           "h-10 w-10 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer",
           selected && "bg-secondary",
-          className
+          className,
         )}
         {...props}
       >
diff --git a/frontend/code/src/Components/Layout/Assets/Modal.tsx b/frontend/code/src/Components/Layout/Assets/Modal.tsx
index e38cdb9..e476a7e 100644
--- a/frontend/code/src/Components/Layout/Assets/Modal.tsx
+++ b/frontend/code/src/Components/Layout/Assets/Modal.tsx
@@ -1,98 +1,98 @@
-import { useSocketStore } from "../../Chat/Services/SocketsServices"
+import { useSocketStore } from "../../Chat/Services/SocketsServices";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useGameState } from "../../Game/States/GameState";
 export const Modal = () => {
-    const gameState = useGameState();
-    const [opacity , setOpacity] = useState("");
-    const [resOpacity , setResOpacity] = useState("");
-    const [result , setResutl] = useState<undefined | string>(undefined);
-    const [status , setStatus] = useState<undefined | string>(undefined);
-    const [timer , setTimer] = useState<undefined | number>(undefined);
-    const [gameid , setGameId] = useState<undefined | string>(undefined);
-    const socketStore = useSocketStore();
-    const navigate = useNavigate();
-    useEffect(() => {
-    if (socketStore.socket !== null){
-        socketStore.socket.on("game.launched" , (GameId:any) => {
-            setGameId(GameId.slice(5))
-        })
-        socketStore.socket.on("timer",(msg:any) => {
-            msg !== 0 && setOpacity("opacity-100")
-            msg === 0 && setOpacity("opacity-0")
-            setTimer(msg / 1000)
-            if (timer === 5){
-                navigate(`/Game/${gameid}`)
-                }
-        })
-        socketStore.socket.on("players", (players:any) => {
-            gameState.setP1(players[0]);
-            gameState.setP2(players[1]);
-            console.log(players)
-            console.log("sda")
-          })
-        socketStore.socket.on("win" , (msg:string) => {
-            setResutl(msg)
-            setStatus("win");
-            setResOpacity("opacity-100");
-            let count = 2;
-            setTimer(count);
-            const inter = setInterval(() => {
-                setTimer(count);
-                --count;
-                if (count === -1){
-                    setResOpacity("opacity-0")
-                    clearInterval(inter);
-                    navigate("/home")
-                }
-            },1000)
-          
-        })
-        socketStore.socket.on("lose" , (msg:string) => {
-            setResutl(msg)
-            setStatus("lose");
-            setResOpacity("opacity-100");
-            let count = 2;
-            setTimer(count);
-            const inter = setInterval(() => {
-                setTimer(count);
-                --count;
-                if (count === -1){
-                    setResOpacity("opacity-0")
-                    clearInterval(inter);
-                    navigate("/home")
-                }
-            },1000)
-          
-        })
+  const gameState = useGameState();
+  const [opacity, setOpacity] = useState("");
+  const [resOpacity, setResOpacity] = useState("");
+  const [result, setResutl] = useState<undefined | string>(undefined);
+  const [status, setStatus] = useState<undefined | string>(undefined);
+  const [timer, setTimer] = useState<undefined | number>(undefined);
+  const [gameid, setGameId] = useState<undefined | string>(undefined);
+  const socketStore = useSocketStore();
+  const navigate = useNavigate();
+  useEffect(() => {
+    if (socketStore.socket !== null) {
+      socketStore.socket?.on("game.launched", (GameId: any) => {
+        setGameId(GameId.slice(5));
+      });
+      socketStore.socket?.on("timer", (msg: any) => {
+        msg !== 0 && setOpacity("opacity-100");
+        msg === 0 && setOpacity("opacity-0");
+        setTimer(msg / 1000);
+        if (timer === 5) {
+          navigate(`/Game/${gameid}`);
+        }
+      });
+      socketStore.socket?.on("players", (players: any) => {
+        gameState.setP1(players[0]);
+        gameState.setP2(players[1]);
+      });
+      socketStore.socket?.on("win", (msg: string) => {
+        setResutl(msg);
+        setStatus("win");
+        setResOpacity("opacity-100");
+        let count = 2;
+        setTimer(count);
+        const inter = setInterval(() => {
+          setTimer(count);
+          --count;
+          if (count === -1) {
+            setResOpacity("opacity-0");
+            clearInterval(inter);
+            navigate("/home");
+          }
+        }, 1000);
+      });
+      socketStore.socket?.on("lose", (msg: string) => {
+        setResutl(msg);
+        setStatus("lose");
+        setResOpacity("opacity-100");
+        let count = 2;
+        setTimer(count);
+        const inter = setInterval(() => {
+          setTimer(count);
+          --count;
+          if (count === -1) {
+            setResOpacity("opacity-0");
+            clearInterval(inter);
+            navigate("/home");
+          }
+        }, 1000);
+      });
     }
     return () => {
-        socketStore.socket.off("lose")
-        socketStore.socket.off("win")
-        socketStore.socket.off("timer")
-        socketStore.socket.off("game.launched")
-        socketStore.socket.off("players")
-    }
-// eslint-disable-next-line
-},[timer])
-        
-    return (
-
-          <>
-            <div className={`modal ${opacity}`}>
-            <div className="modal-box">
-                <h3 className="text-lg font-bold">Game Starting .... </h3>
-                <p className="py-4 flex items-center justify-center text-xl font-poppins font-bold">Game Start In {timer}</p>
-            </div>
-            </div>
-            <div className={`modal ${resOpacity}`}>
-            <div className="modal-box">
-                <h3 className="text-lg font-bold">You {status}</h3>
-                <p className="py-4 flex items-center justify-center text-xl font-poppins font-bold">{result} </p>
-                <p className="py-4 flex items-center justify-center text-xl font-poppins font-bold">this window will be dismiss in {timer} </p>
+      socketStore.socket?.off("lose");
+      socketStore.socket?.off("win");
+      socketStore.socket?.off("timer");
+      socketStore.socket?.off("game.launched");
+      socketStore.socket?.off("players");
+    };
+    // eslint-disable-next-line
+  }, [timer]);
 
-            </div>
-            </div>
-          </>
-        )
-}
\ No newline at end of file
+  return (
+    <>
+      <div className={`modal ${opacity}`}>
+        <div className="modal-box">
+          <h3 className="text-lg font-bold">Game Starting .... </h3>
+          <p className="py-4 flex items-center justify-center text-xl font-poppins font-bold">
+            Game Start In {timer}
+          </p>
+        </div>
+      </div>
+      <div className={`modal ${resOpacity}`}>
+        <div className="modal-box">
+          <h3 className="text-lg font-bold">You {status}</h3>
+          <p className="py-4 flex items-center justify-center text-xl font-poppins font-bold">
+            {result}{" "}
+          </p>
+          <p className="py-4 flex items-center justify-center text-xl font-poppins font-bold">
+            this window will be dismiss in {timer}{" "}
+          </p>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/frontend/code/src/Components/Layout/Assets/Out.tsx b/frontend/code/src/Components/Layout/Assets/Out.tsx
index ca221ea..3448807 100644
--- a/frontend/code/src/Components/Layout/Assets/Out.tsx
+++ b/frontend/code/src/Components/Layout/Assets/Out.tsx
@@ -2,31 +2,43 @@ import { classNames } from "../../../Utils/helpers";
 import { useUserStore } from "../../../Stores/stores";
 import { Link } from "react-router-dom";
 
-
 type OutProps = React.HTMLAttributes<HTMLDivElement> & {
-    selected?: boolean;
-  };
-export const Out = ({ selected, className, ...props} : OutProps) => {
+  selected?: boolean;
+};
+export const Out = ({ selected, className, ...props }: OutProps) => {
   const user = useUserStore();
-    return (
-      <>
-      { process.env?.REACT_APP_LOGOUT &&
+  return (
+    <>
+      {process.env?.REACT_APP_LOGOUT && (
         <Link onClick={() => user.logout()} to={process.env.REACT_APP_LOGOUT}>
-      <div
-        className={classNames(
-            "h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer",
-            selected && "bg-secondary",
-            className
-          )}
-          {...props}>
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M7 7.13193V6.61204C7 4.46614 7 3.3932 7.6896 2.79511C8.37919 2.19703 9.44136 2.34877 11.5657 2.65224L15.8485 3.26408C18.3047 3.61495 19.5327 3.79039 20.2664 4.63628C21 5.48217 21 6.72271 21 9.20377V14.7962C21 17.2773 21 18.5178 20.2664 19.3637C19.5327 20.2096 18.3047 20.385 15.8485 20.7359L11.5657 21.3478C9.44136 21.6512 8.37919 21.803 7.6896 21.2049C7 20.6068 7 19.5339 7 17.388V17.066" stroke="#BDBDBD" strokeWidth="2"/>
-            <path d="M16 12L16.7809 11.3753L17.2806 12L16.7809 12.6247L16 12ZM4 13C3.44771 13 3 12.5523 3 12C3 11.4477 3.44771 11 4 11V13ZM12.7809 6.3753L16.7809 11.3753L15.2191 12.6247L11.2191 7.6247L12.7809 6.3753ZM16.7809 12.6247L12.7809 17.6247L11.2191 16.3753L15.2191 11.3753L16.7809 12.6247ZM16 13H4V11H16V13Z" fill="#BDBDBD"/>
+          <div
+            className={classNames(
+              "h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer",
+              selected && "bg-secondary",
+              className,
+            )}
+            {...props}
+          >
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M7 7.13193V6.61204C7 4.46614 7 3.3932 7.6896 2.79511C8.37919 2.19703 9.44136 2.34877 11.5657 2.65224L15.8485 3.26408C18.3047 3.61495 19.5327 3.79039 20.2664 4.63628C21 5.48217 21 6.72271 21 9.20377V14.7962C21 17.2773 21 18.5178 20.2664 19.3637C19.5327 20.2096 18.3047 20.385 15.8485 20.7359L11.5657 21.3478C9.44136 21.6512 8.37919 21.803 7.6896 21.2049C7 20.6068 7 19.5339 7 17.388V17.066"
+                stroke="#BDBDBD"
+                strokeWidth="2"
+              />
+              <path
+                d="M16 12L16.7809 11.3753L17.2806 12L16.7809 12.6247L16 12ZM4 13C3.44771 13 3 12.5523 3 12C3 11.4477 3.44771 11 4 11V13ZM12.7809 6.3753L16.7809 11.3753L15.2191 12.6247L11.2191 7.6247L12.7809 6.3753ZM16.7809 12.6247L12.7809 17.6247L11.2191 16.3753L15.2191 11.3753L16.7809 12.6247ZM16 13H4V11H16V13Z"
+                fill="#BDBDBD"
+              />
             </svg>
-        </div>
+          </div>
         </Link>
-      }
-      </>
-       
-    )
-}
+      )}
+    </>
+  );
+};
diff --git a/frontend/code/src/Components/Layout/Assets/Profile.tsx b/frontend/code/src/Components/Layout/Assets/Profile.tsx
index 8528270..2ad189e 100644
--- a/frontend/code/src/Components/Layout/Assets/Profile.tsx
+++ b/frontend/code/src/Components/Layout/Assets/Profile.tsx
@@ -1,5 +1,5 @@
-import {Link} from 'react-router-dom'
-import { useUserStore } from '../../../Stores/stores'
+import { Link } from "react-router-dom";
+import { useUserStore } from "../../../Stores/stores";
 import { classNames } from "../../../Utils/helpers";
 
 type ProfileProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -7,22 +7,34 @@ type ProfileProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 
 export const Profile = ({ selected, className, ...props }: ProfileProps) => {
-    const userStore = useUserStore();
-    return (
-      
+  const userStore = useUserStore();
+  return (
     <Link to={`Profile/${userStore?.id}`}>
       <div
         className={classNames(
           "h-10 w-10 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer",
           selected && "bg-secondary",
-          className
+          className,
         )}
         {...props}
       >
-        <div className={`h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer ${selected && 'bg-secondary'}`}>
-            <svg width="19" height="24" viewBox="0 0 19 24" fill="#BDBDBD" xmlns="http://www.w3.org/2000/svg">
-            <path d="M9.3615 15.416C14.4385 15.416 18.723 16.241 18.723 19.4239C18.723 22.608 14.4104 23.4037 9.3615 23.4037C4.28566 23.4037 0 22.5788 0 19.3958C0 16.2117 4.31259 15.416 9.3615 15.416ZM9.3615 0C12.8008 0 15.5565 2.75465 15.5565 6.19152C15.5565 9.6284 12.8008 12.3842 9.3615 12.3842C5.92337 12.3842 3.16654 9.6284 3.16654 6.19152C3.16654 2.75465 5.92337 0 9.3615 0Z" fill="#BDBDBD"/>
-            </svg>
+        <div
+          className={`h-9 w-9 hover:bg-secondary rounded-xl flex justify-center items-center hover:cursor-pointer ${
+            selected && "bg-secondary"
+          }`}
+        >
+          <svg
+            width="19"
+            height="24"
+            viewBox="0 0 19 24"
+            fill="#BDBDBD"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.3615 15.416C14.4385 15.416 18.723 16.241 18.723 19.4239C18.723 22.608 14.4104 23.4037 9.3615 23.4037C4.28566 23.4037 0 22.5788 0 19.3958C0 16.2117 4.31259 15.416 9.3615 15.416ZM9.3615 0C12.8008 0 15.5565 2.75465 15.5565 6.19152C15.5565 9.6284 12.8008 12.3842 9.3615 12.3842C5.92337 12.3842 3.16654 9.6284 3.16654 6.19152C3.16654 2.75465 5.92337 0 9.3615 0Z"
+              fill="#BDBDBD"
+            />
+          </svg>
         </div>
       </div>
     </Link>
diff --git a/frontend/code/src/Components/Layout/Assets/Search.tsx b/frontend/code/src/Components/Layout/Assets/Search.tsx
index 2482b2b..84b51dc 100644
--- a/frontend/code/src/Components/Layout/Assets/Search.tsx
+++ b/frontend/code/src/Components/Layout/Assets/Search.tsx
@@ -1,74 +1,87 @@
-import {useState , ChangeEvent , useEffect} from 'react'
-import {BiSearch} from 'react-icons/bi'
-import { Link } from 'react-router-dom'
-import api from '../../../Api/base'
-import toast from 'react-hot-toast'
+import { useState, ChangeEvent, useEffect } from "react";
+import { BiSearch } from "react-icons/bi";
+import { Link } from "react-router-dom";
+import api from "../../../Api/base";
+import toast from "react-hot-toast";
 function useDebounce<T>(value: T, delay?: number): T {
-    const [debouncedValue, setDebouncedValue] = useState<T>(value)
-  
-    useEffect(() => {
-      const timer = setTimeout(() => setDebouncedValue(value), delay || 500)
-  
-      return () => {
-        clearTimeout(timer)
-      }
-    }, [value, delay])
-  
-    return debouncedValue
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
 }
 
 export const Search = () => {
   const [searchText, setSearchText] = useState("");
   const DebounceValue = useDebounce(searchText);
   const [hidden, setHidden] = useState("hidden");
-  const onSearchTextChange = (e: ChangeEvent<HTMLInputElement>) => setSearchText(e.target.value);
-  const [result , setResult] = useState([]);
-    useEffect(() => 
-    {
-        const search = async() => {
-            try {
-                const res = await api.get("/users/search",{params:{q:DebounceValue}})
-                setResult(res.data)
-                console.log(res.data)
-                res.data.length ? setHidden("") : setHidden("hidden")
-            } catch (error) {
-              toast.error("can't find anyone")
-            }
-        }
-        DebounceValue && search()
-    },[DebounceValue])
-    const clear = () => {
-     setHidden("hidden");setSearchText("");setResult([]);
-    }
-    return (
-        
-        <div className='dropdown hover:cursor-pointer hidden  sm:flex sm:items-center absolute w-80 right-52'>
-          
-            <input tabIndex={0} type="text" placeholder="Search" className={`input w-80 h-8 sm:w-full mr-4 sm:h-12`} onChange={onSearchTextChange}  value={searchText}/>
-    
-            <div className='relative right-14 top-0 w-12 '><BiSearch size="1.4em" /></div>
-             <ul tabIndex={0} className={`dropdown-content z-[9999] menu p-2 shadow bg-base-100 rounded-box w-full top-12 ${hidden}`}>
-             <div className="flex flex-col w-full h-full bg-base-100 z-50">
-         { result.map((item : any , index : number) => {
+  const onSearchTextChange = (e: ChangeEvent<HTMLInputElement>) =>
+    setSearchText(e.target.value);
+  const [result, setResult] = useState([]);
+  useEffect(() => {
+    const search = async () => {
+      try {
+        const res = await api.get("/users/search", {
+          params: { q: DebounceValue },
+        });
+        setResult(res.data);
+        res.data.length ? setHidden("") : setHidden("hidden");
+      } catch (error) {
+        toast.error("can't find anyone");
+      }
+    };
+    DebounceValue && search();
+  }, [DebounceValue]);
+  const clear = () => {
+    setHidden("hidden");
+    setSearchText("");
+    setResult([]);
+  };
+  return (
+    <div className="dropdown hover:cursor-pointer hidden  sm:flex sm:items-center absolute w-80 right-52">
+      <input
+        tabIndex={0}
+        type="text"
+        placeholder="Search"
+        className={`input w-80 h-8 sm:w-full mr-4 sm:h-12`}
+        onChange={onSearchTextChange}
+        value={searchText}
+      />
+
+      <div className="relative right-14 top-0 w-12 ">
+        <BiSearch size="1.4em" />
+      </div>
+      <ul
+        tabIndex={0}
+        className={`dropdown-content z-[9999] menu p-2 shadow bg-base-100 rounded-box w-full top-12 ${hidden}`}
+      >
+        <div className="flex flex-col w-full h-full bg-base-100 z-50">
+          {result.map((item: any, index: number) => {
             return (
-                <Link key={index} to={`Profile/${item.id}`} onClick={clear}>
-                    <li className="hover:bg-primary hover:rounded-xl transform duration-500 h-full w-full z-[10000]">
-                        <div className="flex items-center gap-2">
-                        <div className="avatar">
-                            <div className="w-auto rounded-full gap-4 ring ring-primary ring-offset-base-100 ring-offset-2">
-                                <img alt="" src={item.avatar.thumbnail} />
-                            </div>
-                            </div>
-                            <span >{item.name.first} {item.name.last}</span>
-                        </div>
-                    </li>
-                </Link>
-            )
-            }) 
-         }
-        
+              <Link key={index} to={`Profile/${item.id}`} onClick={clear}>
+                <li className="hover:bg-primary hover:rounded-xl transform duration-500 h-full w-full z-[10000]">
+                  <div className="flex items-center gap-2">
+                    <div className="avatar">
+                      <div className="w-auto rounded-full gap-4 ring ring-primary ring-offset-base-100 ring-offset-2">
+                        <img alt="" src={item.avatar.thumbnail} />
+                      </div>
+                    </div>
+                    <span>
+                      {item.name.first} {item.name.last}
+                    </span>
+                  </div>
+                </li>
+              </Link>
+            );
+          })}
         </div>
-            </ul>
-        </div> 
-    )
-}
\ No newline at end of file
+      </ul>
+    </div>
+  );
+};
diff --git a/frontend/code/src/Components/Layout/Assets/Settings.tsx b/frontend/code/src/Components/Layout/Assets/Settings.tsx
index 27f414d..2283c35 100644
--- a/frontend/code/src/Components/Layout/Assets/Settings.tsx
+++ b/frontend/code/src/Components/Layout/Assets/Settings.tsx
@@ -11,7 +11,7 @@ export const Settings = ({ selected, className, ...props }: SettingsProps) => {
         className={classNames(
           "h-10 w-10 hover:bg-secondary rounded-xl flex justify-center text-center items-center hover:cursor-pointer",
           selected && "bg-secondary",
-          className
+          className,
         )}
         {...props}
       >
diff --git a/frontend/code/src/Components/Layout/index.tsx b/frontend/code/src/Components/Layout/index.tsx
index a4eeb79..eef3cc6 100644
--- a/frontend/code/src/Components/Layout/index.tsx
+++ b/frontend/code/src/Components/Layout/index.tsx
@@ -8,7 +8,13 @@ import { Message } from "./Assets/Message";
 import { Profile } from "./Assets/Profile";
 import { Settings } from "./Assets/Settings";
 import { Out } from "./Assets/Out";
-import { FC, PropsWithChildren, useEffect, useLayoutEffect, useRef } from "react";
+import {
+  FC,
+  PropsWithChildren,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+} from "react";
 import { Outlet } from "react-router";
 import { matchRoutes, useLocation } from "react-router-dom";
 import { useUserStore } from "../../Stores/stores";
@@ -24,6 +30,7 @@ import { Modal } from "./Assets/Modal";
 
 import { InvitationGame } from "./Assets/Invitationmodale";
 import { useGameState } from "../Game/States/GameState";
+import { useModalStore } from "../Chat/Controllers/LayoutControllers";
 const routes = [
   { path: "Profile/:id" },
   { path: "Dm/:id" },
@@ -41,9 +48,6 @@ const useCurrentPath = () => {
   return route.path;
 };
 
-function onConnect() {
-  console.log("hello");
-}
 export const Layout: FC<PropsWithChildren> = (): JSX.Element => {
   const gameStore = useGameState();
   const user = useUserStore();
@@ -51,20 +55,30 @@ export const Layout: FC<PropsWithChildren> = (): JSX.Element => {
   const socketStore = useSocketStore();
   const invitationGameRef = useRef<HTMLDialogElement>(null);
   const path: string = useCurrentPath();
+
+  const modalState = useModalStore();
+
   useEffect(() => {
-    console.log(gameStore)
-    console.log(`path is saads ${path}`)
-    if (gameStore.end === false && path !== "Game/:id")
-    {
-        socketStore.socket.emit("leave");
-        gameStore.setEnd(true)
+    if (gameStore.end === false && path !== "Game/:id") {
+      socketStore.socket?.emit("leave");
+      gameStore.setEnd(true);
     }
     return () => {
-      socketStore.socket.off("leave");
-    }
-     // eslint-disable-next-line
-  },[path])
+      socketStore.socket?.off("leave");
+    };
+    // eslint-disable-next-line
+  }, [path]);
   useLayoutEffect(() => {
+    // Prevent ESC key
+    const preventEsc = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      }
+    };
+    document.addEventListener("keydown", preventEsc, false);
+
     const log = async () => {
       try {
         await user.login();
@@ -80,113 +94,19 @@ export const Layout: FC<PropsWithChildren> = (): JSX.Element => {
     };
 
     socketStore.socket = socketStore.setSocket();
-    socketStore.socket.on("connect", onConnect);
-
-    // socketStore.socket.on("message", (msg: any) => {
-    //   toast.custom(
-    //     (t) =>
-    //       (
-    //         // eslint-disable-next-line
-    //         (t.duration = 450),
-    //         (
-    //           <div
-    //             className={`${
-    //               t.visible ? "animate-enter" : "animate-leave"
-    //             } max-w-sm w-full transition-opacity ease-in  bg-purple-500 rounded-xl  flex flex-col  relative top-[6vh] p-4`}
-    //           >
-    //             <div className="flex flex-row justify-between  ">
-    //               <div className="  flex flex-row ">
-    //                 <img
-    //                   alt="avatar"
-    //                   className="w-10 h-10 rounded-full"
-    //                   src={msg.avatar.medium}
-    //                 />
-    //                 <div className=" pl-3 flex flex-col items-baseline">
-    //                   <p className=" text-white  font-poppins text-base font-semibold leading-5 capitalize">
-    //                     message Received
-    //                   </p>
-    //                   <p className="text-[#2F3F53] font-poppins text-base font-normal text-center max-w-[150px] truncate">
-    //                     {msg.content}
-    //                   </p>
-    //                 </div>
-    //               </div>
-
-    //               <div>
-    //                 <img
-    //                   alt="avatar"
-    //                   className=" pb-1 w-6 h-6"
-    //                   src={closeWhite}
-    //                 />
-    //               </div>
-    //             </div>
-    //           </div>
-    //         )
-    //       ),
-    //   );
-    // });
-    // socketStore.socket.on("notification", (msg: any) => {
-    //   console.log("chat id", chatState.currentDmUser.id);
-    //   console.log("chat id", chatState.selectedChatID);
-
-    //   console.log("room id", msg.roomId);
-    //   if (msg.authorId !== user.id) {
-    //     toast.custom(
-    //       (t) => (
-    //         // eslint-disable-next-line
-    //         (t.duration = 450),
-    //         (
-    //           <div
-    //             className={`${
-    //               t.visible ? "animate-enter" : "animate-leave"
-    //             } max-w-sm w-full transition-opacity ease-in  bg-purple-500 rounded-xl  flex flex-col  relative top-[6vh] p-4`}
-    //           >
-    //             <div className="flex flex-row justify-between  ">
-    //               <div className="  flex flex-row ">
-    //                 <img
-    //                   alt="avatar"
-    //                   className="w-10 h-10 rounded-full"
-    //                   src={msg.avatar.medium}
-    //                 />
-    //                 <div className=" pl-3 flex flex-col items-baseline">
-    //                   <p className=" text-white  font-poppins text-base font-semibold leading-5 capitalize">
-    //                     message Received
-    //                   </p>
-    //                   <p className="text-[#2F3F53] font-poppins text-base font-normal text-center max-w-[150px] truncate">
-    //                     {msg.content}
-    //                   </p>
-    //                 </div>
-    //               </div>
-
-    //               <div>
-    //                 <img
-    //                   alt="avatar"
-    //                   className=" pb-1 w-6 h-6"
-    //                   src={closeWhite}
-    //                 />
-    //               </div>
-    //             </div>
-    //           </div>
-    //         )
-    //       )
-    //     );
-    //   }
-    // });
 
     log();
-    socketStore.socket.on("invitedToGame", (data: any) => {
-      console.log("invitedToGame", data);
+    socketStore.socket?.on("invitedToGame", (data: any) => {
       user.setGameInvitation(data);
       invitationGameRef.current?.showModal();
     });
     return () => {
-      socketStore.socket.off("connect");
-      socketStore.socket.off("invitedToGame");
+      document.removeEventListener("keydown", preventEsc, false);
+      socketStore.socket?.off("invitedToGame");
     };
-    //eslint-disable-next-line
+    // eslint-disable-next-line
   }, []);
 
- 
-
   return (
     <>
       {user.profileComplet === false && user.isLogged ? (
@@ -194,14 +114,16 @@ export const Layout: FC<PropsWithChildren> = (): JSX.Element => {
       ) : (
         <div
           data-theme="mytheme"
-          className={`h-screen max-h-screen ${!user.profileComplet ? "blur-lg" : ""}`}
+          className={`h-screen max-h-screen ${
+            !user.profileComplet ? "blur-lg" : ""
+          }`}
         >
           <Modal />
           <div className="flex flex-row w-full h-16 min-h-16 bg-base-200">
             <div className="flex justify-start items-center z-50 h-full w-full">
               <ShowLogoModal />
-              <BlockedUsersModal />
-              <FriendsListModal />
+              {modalState.showBlockedListModal && <BlockedUsersModal />}
+              {modalState.showFriendsListModal && <FriendsListModal />}
               <Logo className="sm:w-30 w-20" />
             </div>
             <div className="flex items-center  justify-end pr-6 gap-6 h-full w-full">
diff --git a/frontend/code/src/Components/Login/Assets/Button.tsx b/frontend/code/src/Components/Login/Assets/Button.tsx
index cf940de..d464ae1 100644
--- a/frontend/code/src/Components/Login/Assets/Button.tsx
+++ b/frontend/code/src/Components/Login/Assets/Button.tsx
@@ -1,20 +1,40 @@
-export const Button = () =>{
-    return (
-        <svg className="w-80 hover:fill-slate-500 transition duration-500 hover:-translate-y-1 hover:scale-110 ease-in-out" width="330" height="81" viewBox="0 0 330 81" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <rect className="" width="330" height="81" rx="13" fill="#8C67F6"/>
-        <g clipPath="url(#clip0_1_36)">
-        <path d="M63 51.9565H85.1076V63H96.1395V43.0435H74.0756L96.1395 21H85.1076L63 43.0435V51.9565Z" fill="white"/>
-        <path d="M100.892 32.0435L111.924 21H100.892V32.0435Z" fill="white"/>
-        <path d="M111.924 32.0435L100.892 43.0435V54.0435H111.924V43.0435L123 32.0435V21H111.924V32.0435Z" fill="white"/>
-        <path d="M123 43.0435L111.924 54.0435H123V43.0435Z" fill="white"/>
-        </g>
-        <path d="M153.828 48.15H162.369V54H146.184V26.505H153.828V48.15ZM178.523 54.273C175.949 54.273 173.583 53.675 171.425 52.479C169.267 51.257 167.551 49.58 166.277 47.448C165.029 45.29 164.405 42.859 164.405 40.155C164.405 37.451 165.029 35.033 166.277 32.901C167.551 30.743 169.267 29.066 171.425 27.87C173.583 26.674 175.949 26.076 178.523 26.076C181.123 26.076 183.489 26.674 185.621 27.87C187.779 29.066 189.482 30.743 190.73 32.901C191.978 35.033 192.602 37.451 192.602 40.155C192.602 42.859 191.978 45.29 190.73 47.448C189.482 49.58 187.779 51.257 185.621 52.479C183.463 53.675 181.097 54.273 178.523 54.273ZM178.523 47.175C180.473 47.175 182.007 46.538 183.125 45.264C184.269 43.99 184.841 42.287 184.841 40.155C184.841 37.971 184.269 36.255 183.125 35.007C182.007 33.733 180.473 33.096 178.523 33.096C176.547 33.096 175 33.733 173.882 35.007C172.764 36.255 172.205 37.971 172.205 40.155C172.205 42.313 172.764 44.029 173.882 45.303C175 46.551 176.547 47.175 178.523 47.175ZM213.588 35.553C213.146 34.825 212.535 34.266 211.755 33.876C211.001 33.486 210.104 33.291 209.064 33.291C207.14 33.291 205.619 33.915 204.501 35.163C203.409 36.411 202.863 38.088 202.863 40.194C202.863 42.56 203.448 44.367 204.618 45.615C205.814 46.837 207.543 47.448 209.805 47.448C212.483 47.448 214.394 46.239 215.538 43.821H207.855V38.322H222.129V45.732C221.531 47.188 220.647 48.553 219.477 49.827C218.333 51.101 216.877 52.154 215.109 52.986C213.341 53.792 211.326 54.195 209.064 54.195C206.308 54.195 203.864 53.61 201.732 52.44C199.626 51.244 197.988 49.593 196.818 47.487C195.674 45.355 195.102 42.924 195.102 40.194C195.102 37.49 195.674 35.085 196.818 32.979C197.988 30.847 199.626 29.196 201.732 28.026C203.838 26.83 206.269 26.232 209.025 26.232C212.483 26.232 215.343 27.064 217.605 28.728C219.867 30.392 221.271 32.667 221.817 35.553H213.588ZM233.199 26.505V54H225.555V26.505H233.199ZM263.019 54H255.375L245.196 38.634V54H237.552V26.505H245.196L255.375 42.066V26.505H263.019V54Z" fill="white"/>
-        <defs>
+export const Button = () => {
+  return (
+    <svg
+      className="w-80 hover:fill-slate-500 transition duration-500 hover:-translate-y-1 hover:scale-110 ease-in-out"
+      width="330"
+      height="81"
+      viewBox="0 0 330 81"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect className="" width="330" height="81" rx="13" fill="#8C67F6" />
+      <g clipPath="url(#clip0_1_36)">
+        <path
+          d="M63 51.9565H85.1076V63H96.1395V43.0435H74.0756L96.1395 21H85.1076L63 43.0435V51.9565Z"
+          fill="white"
+        />
+        <path d="M100.892 32.0435L111.924 21H100.892V32.0435Z" fill="white" />
+        <path
+          d="M111.924 32.0435L100.892 43.0435V54.0435H111.924V43.0435L123 32.0435V21H111.924V32.0435Z"
+          fill="white"
+        />
+        <path d="M123 43.0435L111.924 54.0435H123V43.0435Z" fill="white" />
+      </g>
+      <path
+        d="M153.828 48.15H162.369V54H146.184V26.505H153.828V48.15ZM178.523 54.273C175.949 54.273 173.583 53.675 171.425 52.479C169.267 51.257 167.551 49.58 166.277 47.448C165.029 45.29 164.405 42.859 164.405 40.155C164.405 37.451 165.029 35.033 166.277 32.901C167.551 30.743 169.267 29.066 171.425 27.87C173.583 26.674 175.949 26.076 178.523 26.076C181.123 26.076 183.489 26.674 185.621 27.87C187.779 29.066 189.482 30.743 190.73 32.901C191.978 35.033 192.602 37.451 192.602 40.155C192.602 42.859 191.978 45.29 190.73 47.448C189.482 49.58 187.779 51.257 185.621 52.479C183.463 53.675 181.097 54.273 178.523 54.273ZM178.523 47.175C180.473 47.175 182.007 46.538 183.125 45.264C184.269 43.99 184.841 42.287 184.841 40.155C184.841 37.971 184.269 36.255 183.125 35.007C182.007 33.733 180.473 33.096 178.523 33.096C176.547 33.096 175 33.733 173.882 35.007C172.764 36.255 172.205 37.971 172.205 40.155C172.205 42.313 172.764 44.029 173.882 45.303C175 46.551 176.547 47.175 178.523 47.175ZM213.588 35.553C213.146 34.825 212.535 34.266 211.755 33.876C211.001 33.486 210.104 33.291 209.064 33.291C207.14 33.291 205.619 33.915 204.501 35.163C203.409 36.411 202.863 38.088 202.863 40.194C202.863 42.56 203.448 44.367 204.618 45.615C205.814 46.837 207.543 47.448 209.805 47.448C212.483 47.448 214.394 46.239 215.538 43.821H207.855V38.322H222.129V45.732C221.531 47.188 220.647 48.553 219.477 49.827C218.333 51.101 216.877 52.154 215.109 52.986C213.341 53.792 211.326 54.195 209.064 54.195C206.308 54.195 203.864 53.61 201.732 52.44C199.626 51.244 197.988 49.593 196.818 47.487C195.674 45.355 195.102 42.924 195.102 40.194C195.102 37.49 195.674 35.085 196.818 32.979C197.988 30.847 199.626 29.196 201.732 28.026C203.838 26.83 206.269 26.232 209.025 26.232C212.483 26.232 215.343 27.064 217.605 28.728C219.867 30.392 221.271 32.667 221.817 35.553H213.588ZM233.199 26.505V54H225.555V26.505H233.199ZM263.019 54H255.375L245.196 38.634V54H237.552V26.505H245.196L255.375 42.066V26.505H263.019V54Z"
+        fill="white"
+      />
+      <defs>
         <clipPath id="clip0_1_36">
-        <rect width="60" height="42" fill="white" transform="translate(63 21)"/>
+          <rect
+            width="60"
+            height="42"
+            fill="white"
+            transform="translate(63 21)"
+          />
         </clipPath>
-        </defs>
-        </svg>
-
-    )
-}
\ No newline at end of file
+      </defs>
+    </svg>
+  );
+};
diff --git a/frontend/code/src/Components/Login/index.tsx b/frontend/code/src/Components/Login/index.tsx
index 4df614e..ed4f714 100644
--- a/frontend/code/src/Components/Login/index.tsx
+++ b/frontend/code/src/Components/Login/index.tsx
@@ -1,57 +1,46 @@
-import {  Link } from "react-router-dom";
-import pingpong from '../images/pingpong.svg'
-import {Button} from './Assets/Button'
+import { Link } from "react-router-dom";
+import pingpong from "../images/pingpong.svg";
+import { Button } from "./Assets/Button";
 import { useUserStore } from "../../Stores/stores";
 import { useNavigate } from "react-router-dom";
 import { useLayoutEffect } from "react";
-// import { PageLoading } from '../Loading';
-// const FallBackLoading = () => {
-//   return (
-//     <div className="flex justify-center items-center h-screen w-screen">
-//           <PageLoading/>
-//       </div>
-//   )
-// }
-export const Login =  () =>
-{
-    const userStore = useUserStore();
-    const navigate = useNavigate();
-    useLayoutEffect(() => {
-        const check = async() => {
-        try {
-            const loggedin = await userStore.login();
-            if (loggedin)
-                navigate("/home")
-        } catch (error:any) {
-            if (error.response && error.response.status === 401) {
-                // This is a 401 error; you can choose to handle it silently
-                console.log("hit")
-              } else {
-                // Handle other errors
-                // console.error(error);
-              }
+
+export const Login = () => {
+  const userStore = useUserStore();
+  const navigate = useNavigate();
+  useLayoutEffect(() => {
+    const check = async () => {
+      try {
+        const loggedin = await userStore.login();
+        if (loggedin) navigate("/home");
+      } catch (error: any) {
+        if (error.response && error.response.status === 401) {
+          // This is a 401 error; you can choose to handle it silently
+        } else {
+          // Handle other errors
         }
-    }
-    check()
+      }
+    };
+    check();
     // eslint-disable-next-line
-    },[])
-    return (
-        <>
-            <div className={`overflow-hidden  flex flex-col items-center justify-center h-screen bg-login bg-luxury bg-no-repeat bg-cover bg-center ${false}`}>
-                <div className="absolute h-full w-full bg-black opacity-40 z-10"></div>
-                <div className="absolute top-[25%] sm:top-[30%] xl:top-[35%] z-50 flex flex-col items-center gap-y-20">
-                    <div className=" flex flex-col justify-center">
-                        <img  src={pingpong}  alt="Logo" />
-                    </div>
-                    {
-                        process.env.REACT_APP_AUTH_PATH && 
-                        <Link to={process.env.REACT_APP_AUTH_PATH}>
-                            <Button/>
-                        </Link>
-                    }
-                </div>
-            </div>
-           
-       </>
-    );
-}
+  }, []);
+  return (
+    <>
+      <div
+        className={`overflow-hidden  flex flex-col items-center justify-center h-screen bg-login bg-luxury bg-no-repeat bg-cover bg-center ${false}`}
+      >
+        <div className="absolute h-full w-full bg-black opacity-40 z-10"></div>
+        <div className="absolute top-[25%] sm:top-[30%] xl:top-[35%] z-50 flex flex-col items-center gap-y-20">
+          <div className=" flex flex-col justify-center">
+            <img src={pingpong} alt="Logo" />
+          </div>
+          {process.env.REACT_APP_AUTH_PATH && (
+            <Link to={process.env.REACT_APP_AUTH_PATH}>
+              <Button />
+            </Link>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/frontend/code/src/Components/Play/assets/Watch.tsx b/frontend/code/src/Components/Play/assets/Watch.tsx
deleted file mode 100644
index 0b9d626..0000000
--- a/frontend/code/src/Components/Play/assets/Watch.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-export const Watch = () => {
-    return (
-        <svg className="h-auto w-auto" viewBox="0 0 513 288" fill="none" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
-        <rect y="4" width="513" height="280" rx="9" fill="url(#pattern0)"/>
-        <rect opacity="0.8" x="2" y="2" width="509" height="284" rx="6" fill="#151B26" stroke="#F53838" strokeWidth="4"/>
-        <rect x="9" y="14" width="9" height="78" rx="2" fill="#E6DCCF"/>
-        <rect x="495" y="188" width="9" height="78" rx="2" fill="#E6DCCF"/>
-        <circle cx="306" cy="72" r="7" fill="#F53838"/>
-        <path d="M257 4V284" stroke="#E6DCCF" strokeWidth="3" strokeDasharray="14 14"/>
-        <rect  className="transition duration-500  hover:fill-primary hover:cursor-pointer" x="152" y="118" width="214.625" height="51" rx="12" fill="#E04545"/>
-        <path d="M225.538 151L221.376 136.455H224.736L227.143 146.561H227.264L229.92 136.455H232.797L235.446 146.582H235.574L237.982 136.455H241.341L237.179 151H234.182L231.412 141.49H231.298L228.536 151H225.538ZM244.029 151H240.734L245.755 136.455H249.718L254.732 151H251.437L247.793 139.778H247.68L244.029 151ZM243.823 145.283H251.607V147.683H243.823V145.283ZM254.152 138.99V136.455H266.098V138.99H261.645V151H258.605V138.99H254.152ZM280.235 141.547H277.124C277.067 141.144 276.951 140.787 276.776 140.474C276.601 140.157 276.376 139.887 276.101 139.665C275.827 139.442 275.509 139.272 275.15 139.153C274.794 139.035 274.408 138.976 273.992 138.976C273.239 138.976 272.583 139.163 272.025 139.537C271.466 139.906 271.033 140.446 270.725 141.156C270.417 141.862 270.263 142.719 270.263 143.727C270.263 144.764 270.417 145.635 270.725 146.341C271.037 147.046 271.473 147.579 272.032 147.939C272.59 148.299 273.237 148.479 273.971 148.479C274.382 148.479 274.764 148.424 275.114 148.315C275.469 148.206 275.784 148.048 276.059 147.839C276.333 147.626 276.56 147.368 276.74 147.065C276.925 146.762 277.053 146.417 277.124 146.028L280.235 146.043C280.154 146.71 279.953 147.354 279.631 147.974C279.314 148.59 278.885 149.142 278.346 149.629C277.81 150.112 277.171 150.496 276.428 150.78C275.689 151.059 274.854 151.199 273.921 151.199C272.623 151.199 271.463 150.905 270.441 150.318C269.423 149.731 268.618 148.881 268.026 147.768C267.439 146.656 267.145 145.309 267.145 143.727C267.145 142.141 267.444 140.792 268.04 139.679C268.637 138.566 269.446 137.719 270.469 137.136C271.492 136.549 272.642 136.256 273.921 136.256C274.764 136.256 275.545 136.374 276.265 136.611C276.989 136.848 277.631 137.193 278.189 137.648C278.748 138.098 279.203 138.649 279.553 139.303C279.908 139.956 280.135 140.704 280.235 141.547ZM282.44 151V136.455H285.515V142.456H291.758V136.455H294.826V151H291.758V144.991H285.515V151H282.44Z" fill="white"/>
-        <defs>
-        <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
-        <use xlinkHref="#image0_395_5312" transform="matrix(0.001 0 0 0.00183214 0.0701754 -0.177834)"/>
-        </pattern>
-        </defs>
-        </svg>
-        
-
-    )
-}
\ No newline at end of file
diff --git a/frontend/code/src/Components/Play/assets/queuemodal.tsx b/frontend/code/src/Components/Play/assets/queuemodal.tsx
index e42ca67..61f17de 100644
--- a/frontend/code/src/Components/Play/assets/queuemodal.tsx
+++ b/frontend/code/src/Components/Play/assets/queuemodal.tsx
@@ -17,7 +17,7 @@ export const QueueWaitModal = forwardRef<HTMLDialogElement, any>(
                 <button
                   className="btn"
                   onClick={() => {
-                    socketStore.socket.emit("quitQueue", {
+                    socketStore.socket?.emit("quitQueue", {
                       gameMode: props.gameMode,
                     });
                     props.setGameMode("");
diff --git a/frontend/code/src/Components/Play/index.tsx b/frontend/code/src/Components/Play/index.tsx
index c42bc2f..aaa355e 100644
--- a/frontend/code/src/Components/Play/index.tsx
+++ b/frontend/code/src/Components/Play/index.tsx
@@ -9,9 +9,8 @@ export const Play = () => {
   const [gameMode, setGameMode] = useState("");
   const queueModalRef = useRef<HTMLDialogElement>(null);
   const subscribeToGame = async () => {
-    // socketStore.socket.emit
     try {
-      socketStore.socket.emit("startGame", { gameMode: "cassic" });
+      socketStore.socket?.emit("startGame", { gameMode: "cassic" });
       setGameMode("cassic");
       queueModalRef.current?.showModal();
       toast.success(
@@ -25,9 +24,8 @@ export const Play = () => {
     }
   };
   const subscribeToGameExtra = async () => {
-    // socketStore.socket.emit
     try {
-      socketStore.socket.emit("startGame", { gameMode: "extra" });
+      socketStore.socket?.emit("startGame", { gameMode: "extra" });
       setGameMode("extra");
       queueModalRef.current?.showModal();
       toast.success(
@@ -42,20 +40,19 @@ export const Play = () => {
   };
   return (
     <>
-      <div className="flex flex-col md:flex-row justify-center items-center gap-8 sm:gap-2  sm:justify-center sm:items-start p-10 gap-x-20">
-        <div
+      <div className="grid md:grid-cols-2 gap-4 p-10 container-lg mx-auto">
+        <img
+          src={vsUser}
+          alt="Classic Gamemode"
+          className="mx-auto"
           onClick={subscribeToGame}
-          className="max-w-[55vw] max-h-[55vh]  w-[100%]"
-        >
-          <img src={vsUser} alt="" />
-        </div>
-
-        <div
+        />
+        <img
+          src={VsBot}
+          alt="Extra Gamemode"
+          className="mx-auto"
           onClick={subscribeToGameExtra}
-          className="max-w-[55vw] max-h-[55vh]  w-[100%]"
-        >
-          <img src={VsBot} alt="" />
-        </div>
+        />
       </div>
       <QueueWaitModal
         gameMode={gameMode}
diff --git a/frontend/code/src/Components/Profile/History.tsx b/frontend/code/src/Components/Profile/History.tsx
index 5c39112..3a979e8 100644
--- a/frontend/code/src/Components/Profile/History.tsx
+++ b/frontend/code/src/Components/Profile/History.tsx
@@ -1,13 +1,12 @@
-import { Chart } from './assets/Chart'
-import { Table } from './assets/Table'
-export const History = (props:any) => {
-    return (
-        <div className='flex flex-col rounded-2xl justify-start items-start mt-6 sm:h-full h-full w-full bg-base-200' >
-           <div className="flex justify-start items-start pl-2 pt-2 sm:pl-12 sm:pt-12 gap-x-4 py-4">
-               <Chart/> <span className='font-montserrat'>Matches History</span>
-
-           </div>
-            <Table props={props}/>
-        </div>
-    )
-}
\ No newline at end of file
+import { Chart } from "./assets/Chart";
+import { Table } from "./assets/Table";
+export const History = (props: any) => {
+  return (
+    <div className="flex flex-col rounded-2xl justify-start items-start mt-6 sm:h-full h-full w-full bg-base-200">
+      <div className="flex justify-start items-start pl-2 pt-2 sm:pl-12 sm:pt-12 gap-x-4 py-4">
+        <Chart /> <span className="font-montserrat">Matches History</span>
+      </div>
+      <Table props={props} />
+    </div>
+  );
+};
diff --git a/frontend/code/src/Components/Profile/assets/Chart.tsx b/frontend/code/src/Components/Profile/assets/Chart.tsx
index 404dcd2..e9a5cd2 100644
--- a/frontend/code/src/Components/Profile/assets/Chart.tsx
+++ b/frontend/code/src/Components/Profile/assets/Chart.tsx
@@ -1,9 +1,16 @@
 export const Chart = () => {
-    return (
-        
-        <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M16.8694 0C20.7805 0 22.9885 2.21835 23 6.1295V16.8705C23 20.7805 20.7805 23 16.8694 23H6.1295C2.21835 23 0 20.7805 0 16.8705V6.1295C0 2.21835 2.21835 0 6.1295 0H16.8694ZM12.075 4.7495C11.7519 4.554 11.3609 4.554 11.0515 4.7495C10.7399 4.94385 10.5685 5.3015 10.6019 5.658V17.3765C10.6605 17.871 11.0734 18.239 11.5564 18.239C12.052 18.239 12.4649 17.871 12.5109 17.3765V5.658C12.5569 5.3015 12.3855 4.94385 12.075 4.7495ZM6.7045 8.5215C6.394 8.326 6.00185 8.326 5.6925 8.5215C5.38085 8.717 5.2095 9.07235 5.244 9.43V17.3765C5.28885 17.871 5.70285 18.239 6.19735 18.239C6.693 18.239 7.10585 17.871 7.15185 17.3765V9.43C7.1875 9.07235 7.01385 8.717 6.7045 8.5215ZM17.3524 12.696C17.043 12.5005 16.652 12.5005 16.33 12.696C16.0184 12.8915 15.847 13.2354 15.893 13.6045V17.3765C15.939 17.871 16.3519 18.239 16.8475 18.239C17.3305 18.239 17.7434 17.871 17.802 17.3765V13.6045C17.8354 13.2354 17.664 12.8915 17.3524 12.696Z" fill="white"/>
-        </svg>
-
-    )
-}
+  return (
+    <svg
+      width="23"
+      height="23"
+      viewBox="0 0 23 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16.8694 0C20.7805 0 22.9885 2.21835 23 6.1295V16.8705C23 20.7805 20.7805 23 16.8694 23H6.1295C2.21835 23 0 20.7805 0 16.8705V6.1295C0 2.21835 2.21835 0 6.1295 0H16.8694ZM12.075 4.7495C11.7519 4.554 11.3609 4.554 11.0515 4.7495C10.7399 4.94385 10.5685 5.3015 10.6019 5.658V17.3765C10.6605 17.871 11.0734 18.239 11.5564 18.239C12.052 18.239 12.4649 17.871 12.5109 17.3765V5.658C12.5569 5.3015 12.3855 4.94385 12.075 4.7495ZM6.7045 8.5215C6.394 8.326 6.00185 8.326 5.6925 8.5215C5.38085 8.717 5.2095 9.07235 5.244 9.43V17.3765C5.28885 17.871 5.70285 18.239 6.19735 18.239C6.693 18.239 7.10585 17.871 7.15185 17.3765V9.43C7.1875 9.07235 7.01385 8.717 6.7045 8.5215ZM17.3524 12.696C17.043 12.5005 16.652 12.5005 16.33 12.696C16.0184 12.8915 15.847 13.2354 15.893 13.6045V17.3765C15.939 17.871 16.3519 18.239 16.8475 18.239C17.3305 18.239 17.7434 17.871 17.802 17.3765V13.6045C17.8354 13.2354 17.664 12.8915 17.3524 12.696Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
diff --git a/frontend/code/src/Components/Profile/assets/Edit.tsx b/frontend/code/src/Components/Profile/assets/Edit.tsx
index 8d206cc..9ec88f9 100644
--- a/frontend/code/src/Components/Profile/assets/Edit.tsx
+++ b/frontend/code/src/Components/Profile/assets/Edit.tsx
@@ -1,16 +1,35 @@
 export const Edit = () => {
-
-    return (
-        <svg width="147" height="40" viewBox="0 0 147 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <rect width="147" height="40" rx="6" fill="url(#paint0_linear_299_5560)"/>
-        <path d="M20.996 18.274H25.868V19.772H20.996V18.274ZM21.136 22.474H26.666V24H19.316V14.2H26.47V15.726H21.136V22.474ZM31.6225 24.098C30.9039 24.098 30.2552 23.9393 29.6765 23.622C29.1072 23.2953 28.6592 22.8473 28.3325 22.278C28.0059 21.7087 27.8425 21.0367 27.8425 20.262C27.8425 19.4873 28.0059 18.8153 28.3325 18.246C28.6592 17.6767 29.1072 17.2333 29.6765 16.916C30.2552 16.5987 30.9039 16.44 31.6225 16.44C32.2479 16.44 32.8079 16.58 33.3025 16.86C33.7972 17.1307 34.1892 17.546 34.4785 18.106C34.7679 18.666 34.9125 19.3847 34.9125 20.262C34.9125 21.13 34.7725 21.8487 34.4925 22.418C34.2125 22.978 33.8252 23.398 33.3305 23.678C32.8359 23.958 32.2665 24.098 31.6225 24.098ZM31.8325 22.6C32.2525 22.6 32.6259 22.5067 32.9525 22.32C33.2885 22.1333 33.5545 21.8627 33.7505 21.508C33.9559 21.1533 34.0585 20.738 34.0585 20.262C34.0585 19.7767 33.9559 19.3613 33.7505 19.016C33.5545 18.6613 33.2885 18.3907 32.9525 18.204C32.6259 18.0173 32.2525 17.924 31.8325 17.924C31.4125 17.924 31.0345 18.0173 30.6985 18.204C30.3719 18.3907 30.1059 18.6613 29.9005 19.016C29.7045 19.3613 29.6065 19.7767 29.6065 20.262C29.6065 20.738 29.7045 21.1533 29.9005 21.508C30.1059 21.8627 30.3719 22.1333 30.6985 22.32C31.0345 22.5067 31.4125 22.6 31.8325 22.6ZM34.1005 24V22.236L34.1705 20.248L34.0305 18.26V13.612H35.7665V24H34.1005ZM38.0699 24V16.524H39.8199V24H38.0699ZM38.9519 15.292C38.6252 15.292 38.3545 15.1893 38.1399 14.984C37.9345 14.7787 37.8319 14.5313 37.8319 14.242C37.8319 13.9433 37.9345 13.696 38.1399 13.5C38.3545 13.2947 38.6252 13.192 38.9519 13.192C39.2785 13.192 39.5445 13.29 39.7499 13.486C39.9645 13.6727 40.0719 13.9107 40.0719 14.2C40.0719 14.508 39.9692 14.7693 39.7639 14.984C39.5585 15.1893 39.2879 15.292 38.9519 15.292ZM44.9308 24.098C44.1094 24.098 43.4748 23.888 43.0267 23.468C42.5788 23.0387 42.3548 22.4087 42.3548 21.578V14.872H44.1048V21.536C44.1048 21.8907 44.1934 22.166 44.3708 22.362C44.5574 22.558 44.8141 22.656 45.1408 22.656C45.5328 22.656 45.8594 22.5533 46.1208 22.348L46.6108 23.594C46.4054 23.762 46.1534 23.888 45.8548 23.972C45.5561 24.056 45.2481 24.098 44.9308 24.098ZM41.1228 17.98V16.58H46.1068V17.98H41.1228ZM61.3555 16.44C61.9528 16.44 62.4802 16.5567 62.9375 16.79C63.4042 17.0233 63.7682 17.3827 64.0295 17.868C64.2908 18.344 64.4215 18.96 64.4215 19.716V24H62.6715V19.94C62.6715 19.2773 62.5268 18.7827 62.2375 18.456C61.9482 18.1293 61.5328 17.966 60.9915 17.966C60.6088 17.966 60.2682 18.05 59.9695 18.218C59.6802 18.386 59.4515 18.6333 59.2835 18.96C59.1248 19.2867 59.0455 19.702 59.0455 20.206V24H57.2955V19.94C57.2955 19.2773 57.1508 18.7827 56.8615 18.456C56.5722 18.1293 56.1568 17.966 55.6155 17.966C55.2328 17.966 54.8922 18.05 54.5935 18.218C54.3042 18.386 54.0755 18.6333 53.9075 18.96C53.7488 19.2867 53.6695 19.702 53.6695 20.206V24H51.9195V16.524H53.5855V18.512L53.2915 17.924C53.5435 17.4387 53.9075 17.07 54.3835 16.818C54.8688 16.566 55.4195 16.44 56.0355 16.44C56.7355 16.44 57.3422 16.6127 57.8555 16.958C58.3782 17.3033 58.7235 17.826 58.8915 18.526L58.2055 18.288C58.4482 17.728 58.8495 17.28 59.4095 16.944C59.9695 16.608 60.6182 16.44 61.3555 16.44ZM67.137 26.814C66.773 26.814 66.409 26.7533 66.045 26.632C65.681 26.5107 65.3777 26.3427 65.135 26.128L65.835 24.84C66.0124 24.9987 66.213 25.1247 66.437 25.218C66.661 25.3113 66.8897 25.358 67.123 25.358C67.4404 25.358 67.697 25.2787 67.893 25.12C68.089 24.9613 68.271 24.6953 68.439 24.322L68.873 23.342L69.013 23.132L71.841 16.524H73.521L70.021 24.602C69.7877 25.162 69.5264 25.6053 69.237 25.932C68.957 26.2587 68.6397 26.4873 68.285 26.618C67.9397 26.7487 67.557 26.814 67.137 26.814ZM68.677 24.266L65.303 16.524H67.123L69.867 22.978L68.677 24.266ZM78.6519 24V14.2H82.6839C83.5519 14.2 84.2939 14.34 84.9099 14.62C85.5353 14.9 86.0159 15.3013 86.3519 15.824C86.6879 16.3467 86.8559 16.9673 86.8559 17.686C86.8559 18.4047 86.6879 19.0253 86.3519 19.548C86.0159 20.0707 85.5353 20.472 84.9099 20.752C84.2939 21.032 83.5519 21.172 82.6839 21.172H79.6599L80.4719 20.318V24H78.6519ZM80.4719 20.514L79.6599 19.632H82.5999C83.4026 19.632 84.0046 19.464 84.4059 19.128C84.8166 18.7827 85.0219 18.302 85.0219 17.686C85.0219 17.0607 84.8166 16.58 84.4059 16.244C84.0046 15.908 83.4026 15.74 82.5999 15.74H79.6599L80.4719 14.844V20.514ZM88.4371 24V16.524H90.1031V18.582L89.9071 17.98C90.1311 17.476 90.4811 17.0933 90.9571 16.832C91.4424 16.5707 92.0444 16.44 92.7631 16.44V18.106C92.6884 18.0873 92.6184 18.078 92.5531 18.078C92.4877 18.0687 92.4224 18.064 92.3571 18.064C91.6944 18.064 91.1671 18.26 90.7751 18.652C90.3831 19.0347 90.1871 19.6087 90.1871 20.374V24H88.4371ZM97.5393 24.098C96.7739 24.098 96.0926 23.9347 95.4953 23.608C94.8979 23.272 94.4266 22.8147 94.0813 22.236C93.7359 21.6573 93.5633 20.9993 93.5633 20.262C93.5633 19.5153 93.7359 18.8573 94.0813 18.288C94.4266 17.7093 94.8979 17.2567 95.4953 16.93C96.0926 16.6033 96.7739 16.44 97.5393 16.44C98.3139 16.44 98.9999 16.6033 99.5973 16.93C100.204 17.2567 100.675 17.7047 101.011 18.274C101.357 18.8433 101.529 19.506 101.529 20.262C101.529 20.9993 101.357 21.6573 101.011 22.236C100.675 22.8147 100.204 23.272 99.5973 23.608C98.9999 23.9347 98.3139 24.098 97.5393 24.098ZM97.5393 22.6C97.9686 22.6 98.3513 22.5067 98.6873 22.32C99.0233 22.1333 99.2846 21.8627 99.4713 21.508C99.6673 21.1533 99.7653 20.738 99.7653 20.262C99.7653 19.7767 99.6673 19.3613 99.4713 19.016C99.2846 18.6613 99.0233 18.3907 98.6873 18.204C98.3513 18.0173 97.9733 17.924 97.5533 17.924C97.1239 17.924 96.7413 18.0173 96.4053 18.204C96.0786 18.3907 95.8173 18.6613 95.6213 19.016C95.4253 19.3613 95.3273 19.7767 95.3273 20.262C95.3273 20.738 95.4253 21.1533 95.6213 21.508C95.8173 21.8627 96.0786 22.1333 96.4053 22.32C96.7413 22.5067 97.1193 22.6 97.5393 22.6ZM103.441 24V16.104C103.441 15.32 103.669 14.6947 104.127 14.228C104.593 13.752 105.256 13.514 106.115 13.514C106.423 13.514 106.712 13.5467 106.983 13.612C107.263 13.6773 107.496 13.78 107.683 13.92L107.207 15.236C107.076 15.1333 106.927 15.0587 106.759 15.012C106.591 14.956 106.418 14.928 106.241 14.928C105.877 14.928 105.601 15.0307 105.415 15.236C105.228 15.432 105.135 15.7307 105.135 16.132V16.972L105.191 17.756V24H103.441ZM102.209 17.98V16.58H107.193V17.98H102.209ZM108.425 24V16.524H110.175V24H108.425ZM109.307 15.292C108.98 15.292 108.709 15.1893 108.495 14.984C108.289 14.7787 108.187 14.5313 108.187 14.242C108.187 13.9433 108.289 13.696 108.495 13.5C108.709 13.2947 108.98 13.192 109.307 13.192C109.633 13.192 109.899 13.29 110.105 13.486C110.319 13.6727 110.427 13.9107 110.427 14.2C110.427 14.508 110.324 14.7693 110.119 14.984C109.913 15.1893 109.643 15.292 109.307 15.292ZM112.472 24V13.612H114.222V24H112.472ZM120.033 24.098C119.202 24.098 118.474 23.9347 117.849 23.608C117.233 23.272 116.752 22.8147 116.407 22.236C116.071 21.6573 115.903 20.9993 115.903 20.262C115.903 19.5153 116.066 18.8573 116.393 18.288C116.729 17.7093 117.186 17.2567 117.765 16.93C118.353 16.6033 119.02 16.44 119.767 16.44C120.495 16.44 121.144 16.5987 121.713 16.916C122.282 17.2333 122.73 17.6813 123.057 18.26C123.384 18.8387 123.547 19.52 123.547 20.304C123.547 20.3787 123.542 20.4627 123.533 20.556C123.533 20.6493 123.528 20.738 123.519 20.822H117.289V19.66H122.595L121.909 20.024C121.918 19.5947 121.83 19.2167 121.643 18.89C121.456 18.5633 121.2 18.3067 120.873 18.12C120.556 17.9333 120.187 17.84 119.767 17.84C119.338 17.84 118.96 17.9333 118.633 18.12C118.316 18.3067 118.064 18.568 117.877 18.904C117.7 19.2307 117.611 19.618 117.611 20.066V20.346C117.611 20.794 117.714 21.1907 117.919 21.536C118.124 21.8813 118.414 22.1473 118.787 22.334C119.16 22.5207 119.59 22.614 120.075 22.614C120.495 22.614 120.873 22.5487 121.209 22.418C121.545 22.2873 121.844 22.082 122.105 21.802L123.043 22.88C122.707 23.272 122.282 23.5753 121.769 23.79C121.265 23.9953 120.686 24.098 120.033 24.098Z" fill="white"/>
-        <defs>
-        <linearGradient id="paint0_linear_299_5560" x1="73.5" y1="0" x2="73.5" y2="40" gradientUnits="userSpaceOnUse">
-        <stop stopColor="#7940CF"/>
-        <stop offset="1" stopColor="#5921CB"/>
+  return (
+    <svg
+      width="147"
+      height="40"
+      viewBox="0 0 147 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        width="147"
+        height="40"
+        rx="6"
+        fill="url(#paint0_linear_299_5560)"
+      />
+      <path
+        d="M20.996 18.274H25.868V19.772H20.996V18.274ZM21.136 22.474H26.666V24H19.316V14.2H26.47V15.726H21.136V22.474ZM31.6225 24.098C30.9039 24.098 30.2552 23.9393 29.6765 23.622C29.1072 23.2953 28.6592 22.8473 28.3325 22.278C28.0059 21.7087 27.8425 21.0367 27.8425 20.262C27.8425 19.4873 28.0059 18.8153 28.3325 18.246C28.6592 17.6767 29.1072 17.2333 29.6765 16.916C30.2552 16.5987 30.9039 16.44 31.6225 16.44C32.2479 16.44 32.8079 16.58 33.3025 16.86C33.7972 17.1307 34.1892 17.546 34.4785 18.106C34.7679 18.666 34.9125 19.3847 34.9125 20.262C34.9125 21.13 34.7725 21.8487 34.4925 22.418C34.2125 22.978 33.8252 23.398 33.3305 23.678C32.8359 23.958 32.2665 24.098 31.6225 24.098ZM31.8325 22.6C32.2525 22.6 32.6259 22.5067 32.9525 22.32C33.2885 22.1333 33.5545 21.8627 33.7505 21.508C33.9559 21.1533 34.0585 20.738 34.0585 20.262C34.0585 19.7767 33.9559 19.3613 33.7505 19.016C33.5545 18.6613 33.2885 18.3907 32.9525 18.204C32.6259 18.0173 32.2525 17.924 31.8325 17.924C31.4125 17.924 31.0345 18.0173 30.6985 18.204C30.3719 18.3907 30.1059 18.6613 29.9005 19.016C29.7045 19.3613 29.6065 19.7767 29.6065 20.262C29.6065 20.738 29.7045 21.1533 29.9005 21.508C30.1059 21.8627 30.3719 22.1333 30.6985 22.32C31.0345 22.5067 31.4125 22.6 31.8325 22.6ZM34.1005 24V22.236L34.1705 20.248L34.0305 18.26V13.612H35.7665V24H34.1005ZM38.0699 24V16.524H39.8199V24H38.0699ZM38.9519 15.292C38.6252 15.292 38.3545 15.1893 38.1399 14.984C37.9345 14.7787 37.8319 14.5313 37.8319 14.242C37.8319 13.9433 37.9345 13.696 38.1399 13.5C38.3545 13.2947 38.6252 13.192 38.9519 13.192C39.2785 13.192 39.5445 13.29 39.7499 13.486C39.9645 13.6727 40.0719 13.9107 40.0719 14.2C40.0719 14.508 39.9692 14.7693 39.7639 14.984C39.5585 15.1893 39.2879 15.292 38.9519 15.292ZM44.9308 24.098C44.1094 24.098 43.4748 23.888 43.0267 23.468C42.5788 23.0387 42.3548 22.4087 42.3548 21.578V14.872H44.1048V21.536C44.1048 21.8907 44.1934 22.166 44.3708 22.362C44.5574 22.558 44.8141 22.656 45.1408 22.656C45.5328 22.656 45.8594 22.5533 46.1208 22.348L46.6108 23.594C46.4054 23.762 46.1534 23.888 45.8548 23.972C45.5561 24.056 45.2481 24.098 44.9308 24.098ZM41.1228 17.98V16.58H46.1068V17.98H41.1228ZM61.3555 16.44C61.9528 16.44 62.4802 16.5567 62.9375 16.79C63.4042 17.0233 63.7682 17.3827 64.0295 17.868C64.2908 18.344 64.4215 18.96 64.4215 19.716V24H62.6715V19.94C62.6715 19.2773 62.5268 18.7827 62.2375 18.456C61.9482 18.1293 61.5328 17.966 60.9915 17.966C60.6088 17.966 60.2682 18.05 59.9695 18.218C59.6802 18.386 59.4515 18.6333 59.2835 18.96C59.1248 19.2867 59.0455 19.702 59.0455 20.206V24H57.2955V19.94C57.2955 19.2773 57.1508 18.7827 56.8615 18.456C56.5722 18.1293 56.1568 17.966 55.6155 17.966C55.2328 17.966 54.8922 18.05 54.5935 18.218C54.3042 18.386 54.0755 18.6333 53.9075 18.96C53.7488 19.2867 53.6695 19.702 53.6695 20.206V24H51.9195V16.524H53.5855V18.512L53.2915 17.924C53.5435 17.4387 53.9075 17.07 54.3835 16.818C54.8688 16.566 55.4195 16.44 56.0355 16.44C56.7355 16.44 57.3422 16.6127 57.8555 16.958C58.3782 17.3033 58.7235 17.826 58.8915 18.526L58.2055 18.288C58.4482 17.728 58.8495 17.28 59.4095 16.944C59.9695 16.608 60.6182 16.44 61.3555 16.44ZM67.137 26.814C66.773 26.814 66.409 26.7533 66.045 26.632C65.681 26.5107 65.3777 26.3427 65.135 26.128L65.835 24.84C66.0124 24.9987 66.213 25.1247 66.437 25.218C66.661 25.3113 66.8897 25.358 67.123 25.358C67.4404 25.358 67.697 25.2787 67.893 25.12C68.089 24.9613 68.271 24.6953 68.439 24.322L68.873 23.342L69.013 23.132L71.841 16.524H73.521L70.021 24.602C69.7877 25.162 69.5264 25.6053 69.237 25.932C68.957 26.2587 68.6397 26.4873 68.285 26.618C67.9397 26.7487 67.557 26.814 67.137 26.814ZM68.677 24.266L65.303 16.524H67.123L69.867 22.978L68.677 24.266ZM78.6519 24V14.2H82.6839C83.5519 14.2 84.2939 14.34 84.9099 14.62C85.5353 14.9 86.0159 15.3013 86.3519 15.824C86.6879 16.3467 86.8559 16.9673 86.8559 17.686C86.8559 18.4047 86.6879 19.0253 86.3519 19.548C86.0159 20.0707 85.5353 20.472 84.9099 20.752C84.2939 21.032 83.5519 21.172 82.6839 21.172H79.6599L80.4719 20.318V24H78.6519ZM80.4719 20.514L79.6599 19.632H82.5999C83.4026 19.632 84.0046 19.464 84.4059 19.128C84.8166 18.7827 85.0219 18.302 85.0219 17.686C85.0219 17.0607 84.8166 16.58 84.4059 16.244C84.0046 15.908 83.4026 15.74 82.5999 15.74H79.6599L80.4719 14.844V20.514ZM88.4371 24V16.524H90.1031V18.582L89.9071 17.98C90.1311 17.476 90.4811 17.0933 90.9571 16.832C91.4424 16.5707 92.0444 16.44 92.7631 16.44V18.106C92.6884 18.0873 92.6184 18.078 92.5531 18.078C92.4877 18.0687 92.4224 18.064 92.3571 18.064C91.6944 18.064 91.1671 18.26 90.7751 18.652C90.3831 19.0347 90.1871 19.6087 90.1871 20.374V24H88.4371ZM97.5393 24.098C96.7739 24.098 96.0926 23.9347 95.4953 23.608C94.8979 23.272 94.4266 22.8147 94.0813 22.236C93.7359 21.6573 93.5633 20.9993 93.5633 20.262C93.5633 19.5153 93.7359 18.8573 94.0813 18.288C94.4266 17.7093 94.8979 17.2567 95.4953 16.93C96.0926 16.6033 96.7739 16.44 97.5393 16.44C98.3139 16.44 98.9999 16.6033 99.5973 16.93C100.204 17.2567 100.675 17.7047 101.011 18.274C101.357 18.8433 101.529 19.506 101.529 20.262C101.529 20.9993 101.357 21.6573 101.011 22.236C100.675 22.8147 100.204 23.272 99.5973 23.608C98.9999 23.9347 98.3139 24.098 97.5393 24.098ZM97.5393 22.6C97.9686 22.6 98.3513 22.5067 98.6873 22.32C99.0233 22.1333 99.2846 21.8627 99.4713 21.508C99.6673 21.1533 99.7653 20.738 99.7653 20.262C99.7653 19.7767 99.6673 19.3613 99.4713 19.016C99.2846 18.6613 99.0233 18.3907 98.6873 18.204C98.3513 18.0173 97.9733 17.924 97.5533 17.924C97.1239 17.924 96.7413 18.0173 96.4053 18.204C96.0786 18.3907 95.8173 18.6613 95.6213 19.016C95.4253 19.3613 95.3273 19.7767 95.3273 20.262C95.3273 20.738 95.4253 21.1533 95.6213 21.508C95.8173 21.8627 96.0786 22.1333 96.4053 22.32C96.7413 22.5067 97.1193 22.6 97.5393 22.6ZM103.441 24V16.104C103.441 15.32 103.669 14.6947 104.127 14.228C104.593 13.752 105.256 13.514 106.115 13.514C106.423 13.514 106.712 13.5467 106.983 13.612C107.263 13.6773 107.496 13.78 107.683 13.92L107.207 15.236C107.076 15.1333 106.927 15.0587 106.759 15.012C106.591 14.956 106.418 14.928 106.241 14.928C105.877 14.928 105.601 15.0307 105.415 15.236C105.228 15.432 105.135 15.7307 105.135 16.132V16.972L105.191 17.756V24H103.441ZM102.209 17.98V16.58H107.193V17.98H102.209ZM108.425 24V16.524H110.175V24H108.425ZM109.307 15.292C108.98 15.292 108.709 15.1893 108.495 14.984C108.289 14.7787 108.187 14.5313 108.187 14.242C108.187 13.9433 108.289 13.696 108.495 13.5C108.709 13.2947 108.98 13.192 109.307 13.192C109.633 13.192 109.899 13.29 110.105 13.486C110.319 13.6727 110.427 13.9107 110.427 14.2C110.427 14.508 110.324 14.7693 110.119 14.984C109.913 15.1893 109.643 15.292 109.307 15.292ZM112.472 24V13.612H114.222V24H112.472ZM120.033 24.098C119.202 24.098 118.474 23.9347 117.849 23.608C117.233 23.272 116.752 22.8147 116.407 22.236C116.071 21.6573 115.903 20.9993 115.903 20.262C115.903 19.5153 116.066 18.8573 116.393 18.288C116.729 17.7093 117.186 17.2567 117.765 16.93C118.353 16.6033 119.02 16.44 119.767 16.44C120.495 16.44 121.144 16.5987 121.713 16.916C122.282 17.2333 122.73 17.6813 123.057 18.26C123.384 18.8387 123.547 19.52 123.547 20.304C123.547 20.3787 123.542 20.4627 123.533 20.556C123.533 20.6493 123.528 20.738 123.519 20.822H117.289V19.66H122.595L121.909 20.024C121.918 19.5947 121.83 19.2167 121.643 18.89C121.456 18.5633 121.2 18.3067 120.873 18.12C120.556 17.9333 120.187 17.84 119.767 17.84C119.338 17.84 118.96 17.9333 118.633 18.12C118.316 18.3067 118.064 18.568 117.877 18.904C117.7 19.2307 117.611 19.618 117.611 20.066V20.346C117.611 20.794 117.714 21.1907 117.919 21.536C118.124 21.8813 118.414 22.1473 118.787 22.334C119.16 22.5207 119.59 22.614 120.075 22.614C120.495 22.614 120.873 22.5487 121.209 22.418C121.545 22.2873 121.844 22.082 122.105 21.802L123.043 22.88C122.707 23.272 122.282 23.5753 121.769 23.79C121.265 23.9953 120.686 24.098 120.033 24.098Z"
+        fill="white"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_299_5560"
+          x1="73.5"
+          y1="0"
+          x2="73.5"
+          y2="40"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#7940CF" />
+          <stop offset="1" stopColor="#5921CB" />
         </linearGradient>
-        </defs>
-        </svg>
-        
-    )
-}
+      </defs>
+    </svg>
+  );
+};
diff --git a/frontend/code/src/Components/Profile/assets/File.tsx b/frontend/code/src/Components/Profile/assets/File.tsx
index ff07fa7..b2486db 100644
--- a/frontend/code/src/Components/Profile/assets/File.tsx
+++ b/frontend/code/src/Components/Profile/assets/File.tsx
@@ -1,11 +1,34 @@
 export const File = () => {
-    return (
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M13.1716 3H9C7.11438 3 6.17157 3 5.58579 3.58579C5 4.17157 5 5.11438 5 7V17C5 18.8856 5 19.8284 5.58579 20.4142C6.17157 21 7.11438 21 9 21H15C16.8856 21 17.8284 21 18.4142 20.4142C19 19.8284 19 18.8856 19 17V8.82843C19 8.41968 19 8.2153 18.9239 8.03153C18.8478 7.84776 18.7032 7.70324 18.4142 7.41421L14.5858 3.58579C14.2968 3.29676 14.1522 3.15224 13.9685 3.07612C13.7847 3 13.5803 3 13.1716 3Z" stroke="#BDBDBD" strokeWidth="2"/>
-        <path d="M9 13L15 13" stroke="#BDBDBD" strokeWidth="2" strokeLinecap="round"/>
-        <path d="M9 17L13 17" stroke="#BDBDBD" strokeWidth="2" strokeLinecap="round"/>
-        <path d="M13 3V7C13 7.94281 13 8.41421 13.2929 8.70711C13.5858 9 14.0572 9 15 9H19" stroke="#BDBDBD" strokeWidth="2"/>
-        </svg>
-
-    )
-}
\ No newline at end of file
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13.1716 3H9C7.11438 3 6.17157 3 5.58579 3.58579C5 4.17157 5 5.11438 5 7V17C5 18.8856 5 19.8284 5.58579 20.4142C6.17157 21 7.11438 21 9 21H15C16.8856 21 17.8284 21 18.4142 20.4142C19 19.8284 19 18.8856 19 17V8.82843C19 8.41968 19 8.2153 18.9239 8.03153C18.8478 7.84776 18.7032 7.70324 18.4142 7.41421L14.5858 3.58579C14.2968 3.29676 14.1522 3.15224 13.9685 3.07612C13.7847 3 13.5803 3 13.1716 3Z"
+        stroke="#BDBDBD"
+        strokeWidth="2"
+      />
+      <path
+        d="M9 13L15 13"
+        stroke="#BDBDBD"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      <path
+        d="M9 17L13 17"
+        stroke="#BDBDBD"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      <path
+        d="M13 3V7C13 7.94281 13 8.41421 13.2929 8.70711C13.5858 9 14.0572 9 15 9H19"
+        stroke="#BDBDBD"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};
diff --git a/frontend/code/src/Components/Profile/assets/MessageB.tsx b/frontend/code/src/Components/Profile/assets/MessageB.tsx
index 04b910d..8df962e 100644
--- a/frontend/code/src/Components/Profile/assets/MessageB.tsx
+++ b/frontend/code/src/Components/Profile/assets/MessageB.tsx
@@ -1,22 +1,48 @@
-import { toast } from "react-hot-toast"
-import api from "../../../Api/base"
-export const Message = (props:any) => {
-    const handleSendReq = async() => {
-        toast.promise(api.post("friends/add",{friendId:props.profile.id}),{loading:`Sending friend request`,success:`request sent to ${props.profile.name.first}`,error:"could not send friend request"})
-    }
-  
-    return (
-        // <Link to={`/chat/${id}`}>
-            <svg onClick={handleSendReq} className="w-20 sm:w-40 hover:cursor-pointer" width="105" height="40" viewBox="0 0 105 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect width="104.865" height="40" rx="6" fill="url(#paint0_linear_299_5155)"/>
-            <path d="M19.316 24V14.2H20.814L25.098 21.354H24.314L28.528 14.2H30.026L30.04 24H28.318L28.304 16.902H28.668L25.084 22.88H24.272L20.632 16.902H21.052V24H19.316ZM36.0331 24.098C35.2024 24.098 34.4744 23.9347 33.8491 23.608C33.2331 23.272 32.7524 22.8147 32.4071 22.236C32.0711 21.6573 31.9031 20.9993 31.9031 20.262C31.9031 19.5153 32.0664 18.8573 32.3931 18.288C32.7291 17.7093 33.1864 17.2567 33.7651 16.93C34.3531 16.6033 35.0204 16.44 35.7671 16.44C36.4951 16.44 37.1438 16.5987 37.7131 16.916C38.2824 17.2333 38.7304 17.6813 39.0571 18.26C39.3838 18.8387 39.5471 19.52 39.5471 20.304C39.5471 20.3787 39.5424 20.4627 39.5331 20.556C39.5331 20.6493 39.5284 20.738 39.5191 20.822H33.2891V19.66H38.5951L37.9091 20.024C37.9184 19.5947 37.8298 19.2167 37.6431 18.89C37.4564 18.5633 37.1998 18.3067 36.8731 18.12C36.5558 17.9333 36.1871 17.84 35.7671 17.84C35.3378 17.84 34.9598 17.9333 34.6331 18.12C34.3158 18.3067 34.0638 18.568 33.8771 18.904C33.6998 19.2307 33.6111 19.618 33.6111 20.066V20.346C33.6111 20.794 33.7138 21.1907 33.9191 21.536C34.1244 21.8813 34.4138 22.1473 34.7871 22.334C35.1604 22.5207 35.5898 22.614 36.0751 22.614C36.4951 22.614 36.8731 22.5487 37.2091 22.418C37.5451 22.2873 37.8438 22.082 38.1051 21.802L39.0431 22.88C38.7071 23.272 38.2824 23.5753 37.7691 23.79C37.2651 23.9953 36.6864 24.098 36.0331 24.098ZM43.5381 24.098C42.9127 24.098 42.3107 24.0187 41.7321 23.86C41.1627 23.692 40.7101 23.4913 40.3741 23.258L41.0461 21.928C41.3821 22.1427 41.7834 22.32 42.2501 22.46C42.7167 22.6 43.1834 22.67 43.6501 22.67C44.2007 22.67 44.5974 22.5953 44.8401 22.446C45.0921 22.2967 45.2181 22.096 45.2181 21.844C45.2181 21.6387 45.1341 21.4847 44.9661 21.382C44.7981 21.27 44.5787 21.186 44.3081 21.13C44.0374 21.074 43.7341 21.0227 43.3981 20.976C43.0714 20.9293 42.7401 20.8687 42.4041 20.794C42.0774 20.71 41.7787 20.5933 41.5081 20.444C41.2374 20.2853 41.0181 20.0753 40.8501 19.814C40.6821 19.5527 40.5981 19.2073 40.5981 18.778C40.5981 18.302 40.7334 17.8913 41.0041 17.546C41.2747 17.1913 41.6527 16.9207 42.1381 16.734C42.6327 16.538 43.2161 16.44 43.8881 16.44C44.3921 16.44 44.9007 16.496 45.4141 16.608C45.9274 16.72 46.3521 16.8787 46.6881 17.084L46.0161 18.414C45.6614 18.1993 45.3021 18.0547 44.9381 17.98C44.5834 17.896 44.2287 17.854 43.8741 17.854C43.3421 17.854 42.9454 17.9333 42.6841 18.092C42.4321 18.2507 42.3061 18.4513 42.3061 18.694C42.3061 18.918 42.3901 19.086 42.5581 19.198C42.7261 19.31 42.9454 19.3987 43.2161 19.464C43.4867 19.5293 43.7854 19.5853 44.1121 19.632C44.4481 19.6693 44.7794 19.73 45.1061 19.814C45.4327 19.898 45.7314 20.0147 46.0021 20.164C46.2821 20.304 46.5061 20.5047 46.6741 20.766C46.8421 21.0273 46.9261 21.368 46.9261 21.788C46.9261 22.2547 46.7861 22.6607 46.5061 23.006C46.2354 23.3513 45.8481 23.622 45.3441 23.818C44.8401 24.0047 44.2381 24.098 43.5381 24.098ZM50.7432 24.098C50.1178 24.098 49.5158 24.0187 48.9372 23.86C48.3678 23.692 47.9152 23.4913 47.5792 23.258L48.2512 21.928C48.5872 22.1427 48.9885 22.32 49.4552 22.46C49.9218 22.6 50.3885 22.67 50.8552 22.67C51.4058 22.67 51.8025 22.5953 52.0452 22.446C52.2972 22.2967 52.4232 22.096 52.4232 21.844C52.4232 21.6387 52.3392 21.4847 52.1712 21.382C52.0032 21.27 51.7838 21.186 51.5132 21.13C51.2425 21.074 50.9392 21.0227 50.6032 20.976C50.2765 20.9293 49.9452 20.8687 49.6092 20.794C49.2825 20.71 48.9838 20.5933 48.7132 20.444C48.4425 20.2853 48.2232 20.0753 48.0552 19.814C47.8872 19.5527 47.8032 19.2073 47.8032 18.778C47.8032 18.302 47.9385 17.8913 48.2092 17.546C48.4798 17.1913 48.8578 16.9207 49.3432 16.734C49.8378 16.538 50.4212 16.44 51.0932 16.44C51.5972 16.44 52.1058 16.496 52.6192 16.608C53.1325 16.72 53.5572 16.8787 53.8932 17.084L53.2212 18.414C52.8665 18.1993 52.5072 18.0547 52.1432 17.98C51.7885 17.896 51.4338 17.854 51.0792 17.854C50.5472 17.854 50.1505 17.9333 49.8892 18.092C49.6372 18.2507 49.5112 18.4513 49.5112 18.694C49.5112 18.918 49.5952 19.086 49.7632 19.198C49.9312 19.31 50.1505 19.3987 50.4212 19.464C50.6918 19.5293 50.9905 19.5853 51.3172 19.632C51.6532 19.6693 51.9845 19.73 52.3112 19.814C52.6378 19.898 52.9365 20.0147 53.2072 20.164C53.4872 20.304 53.7112 20.5047 53.8792 20.766C54.0472 21.0273 54.1312 21.368 54.1312 21.788C54.1312 22.2547 53.9912 22.6607 53.7112 23.006C53.4405 23.3513 53.0532 23.622 52.5492 23.818C52.0452 24.0047 51.4432 24.098 50.7432 24.098ZM60.2442 24V22.488L60.1462 22.166V19.52C60.1462 19.0067 59.9922 18.61 59.6842 18.33C59.3762 18.0407 58.9096 17.896 58.2842 17.896C57.8642 17.896 57.4489 17.9613 57.0382 18.092C56.6369 18.2227 56.2962 18.4047 56.0162 18.638L55.3302 17.364C55.7316 17.056 56.2076 16.8273 56.7582 16.678C57.3182 16.5193 57.8969 16.44 58.4942 16.44C59.5769 16.44 60.4122 16.7013 61.0002 17.224C61.5976 17.7373 61.8962 18.5353 61.8962 19.618V24H60.2442ZM57.8922 24.098C57.3322 24.098 56.8422 24.0047 56.4222 23.818C56.0022 23.622 55.6756 23.356 55.4422 23.02C55.2182 22.6747 55.1062 22.2873 55.1062 21.858C55.1062 21.438 55.2042 21.06 55.4002 20.724C55.6056 20.388 55.9369 20.122 56.3942 19.926C56.8516 19.73 57.4582 19.632 58.2142 19.632H60.3842V20.794H58.3402C57.7429 20.794 57.3416 20.892 57.1362 21.088C56.9309 21.2747 56.8282 21.508 56.8282 21.788C56.8282 22.1053 56.9542 22.3573 57.2062 22.544C57.4582 22.7307 57.8082 22.824 58.2562 22.824C58.6856 22.824 59.0682 22.726 59.4042 22.53C59.7496 22.334 59.9969 22.0447 60.1462 21.662L60.4402 22.712C60.2722 23.1507 59.9689 23.4913 59.5302 23.734C59.1009 23.9767 58.5549 24.098 57.8922 24.098ZM67.5438 26.814C66.8531 26.814 66.1765 26.7207 65.5138 26.534C64.8605 26.3567 64.3238 26.0953 63.9038 25.75L64.6878 24.434C65.0145 24.7047 65.4251 24.9193 65.9198 25.078C66.4238 25.246 66.9325 25.33 67.4458 25.33C68.2671 25.33 68.8691 25.1387 69.2518 24.756C69.6345 24.3827 69.8258 23.818 69.8258 23.062V21.732L69.9658 20.038L69.9098 18.344V16.524H71.5758V22.866C71.5758 24.2193 71.2305 25.2133 70.5398 25.848C69.8491 26.492 68.8505 26.814 67.5438 26.814ZM67.3198 23.664C66.6105 23.664 65.9665 23.5147 65.3878 23.216C64.8185 22.908 64.3658 22.4833 64.0298 21.942C63.7031 21.4007 63.5398 20.766 63.5398 20.038C63.5398 19.3193 63.7031 18.6893 64.0298 18.148C64.3658 17.6067 64.8185 17.1867 65.3878 16.888C65.9665 16.5893 66.6105 16.44 67.3198 16.44C67.9545 16.44 68.5238 16.566 69.0278 16.818C69.5318 17.07 69.9331 17.462 70.2318 17.994C70.5398 18.526 70.6938 19.2073 70.6938 20.038C70.6938 20.8687 70.5398 21.5547 70.2318 22.096C69.9331 22.628 69.5318 23.0247 69.0278 23.286C68.5238 23.538 67.9545 23.664 67.3198 23.664ZM67.5858 22.18C68.0245 22.18 68.4165 22.0913 68.7618 21.914C69.1071 21.7273 69.3731 21.4753 69.5598 21.158C69.7558 20.8313 69.8538 20.458 69.8538 20.038C69.8538 19.618 69.7558 19.2493 69.5598 18.932C69.3731 18.6053 69.1071 18.358 68.7618 18.19C68.4165 18.0127 68.0245 17.924 67.5858 17.924C67.1471 17.924 66.7505 18.0127 66.3958 18.19C66.0505 18.358 65.7798 18.6053 65.5838 18.932C65.3971 19.2493 65.3038 19.618 65.3038 20.038C65.3038 20.458 65.3971 20.8313 65.5838 21.158C65.7798 21.4753 66.0505 21.7273 66.3958 21.914C66.7505 22.0913 67.1471 22.18 67.5858 22.18ZM77.3905 24.098C76.5598 24.098 75.8318 23.9347 75.2065 23.608C74.5905 23.272 74.1098 22.8147 73.7645 22.236C73.4285 21.6573 73.2605 20.9993 73.2605 20.262C73.2605 19.5153 73.4238 18.8573 73.7505 18.288C74.0865 17.7093 74.5438 17.2567 75.1225 16.93C75.7105 16.6033 76.3778 16.44 77.1245 16.44C77.8525 16.44 78.5012 16.5987 79.0705 16.916C79.6398 17.2333 80.0878 17.6813 80.4145 18.26C80.7412 18.8387 80.9045 19.52 80.9045 20.304C80.9045 20.3787 80.8998 20.4627 80.8905 20.556C80.8905 20.6493 80.8858 20.738 80.8765 20.822H74.6465V19.66H79.9525L79.2665 20.024C79.2758 19.5947 79.1872 19.2167 79.0005 18.89C78.8138 18.5633 78.5572 18.3067 78.2305 18.12C77.9132 17.9333 77.5445 17.84 77.1245 17.84C76.6952 17.84 76.3172 17.9333 75.9905 18.12C75.6732 18.3067 75.4212 18.568 75.2345 18.904C75.0572 19.2307 74.9685 19.618 74.9685 20.066V20.346C74.9685 20.794 75.0712 21.1907 75.2765 21.536C75.4818 21.8813 75.7712 22.1473 76.1445 22.334C76.5178 22.5207 76.9472 22.614 77.4325 22.614C77.8525 22.614 78.2305 22.5487 78.5665 22.418C78.9025 22.2873 79.2012 22.082 79.4625 21.802L80.4005 22.88C80.0645 23.272 79.6398 23.5753 79.1265 23.79C78.6225 23.9953 78.0438 24.098 77.3905 24.098Z" fill="white"/>
-            <defs>
-            <linearGradient id="paint0_linear_299_5155" x1="52.4324" y1="0" x2="52.4324" y2="40" gradientUnits="userSpaceOnUse">
-            <stop stopColor="#7940CF"/>
-            <stop offset="1" stopColor="#5921CB"/>
-            </linearGradient>
-            </defs>
-            </svg>
-        // </Link>
-    )
-} 
\ No newline at end of file
+import { toast } from "react-hot-toast";
+import api from "../../../Api/base";
+
+export const Message = (props: any) => {
+  const handleSendReq = async () => {
+    toast.promise(api.post("friends/add", { friendId: props.profile.id }), {
+      loading: `Sending friend request`,
+      success: `request sent to ${props.profile.name.first}`,
+      error: "could not send friend request",
+    });
+  };
+
+  return (
+    <svg
+      onClick={handleSendReq}
+      className="w-20 sm:w-40 hover:cursor-pointer"
+      width="105"
+      height="40"
+      viewBox="0 0 105 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        width="104.865"
+        height="40"
+        rx="6"
+        fill="url(#paint0_linear_299_5155)"
+      />
+      <path
+        d="M19.316 24V14.2H20.814L25.098 21.354H24.314L28.528 14.2H30.026L30.04 24H28.318L28.304 16.902H28.668L25.084 22.88H24.272L20.632 16.902H21.052V24H19.316ZM36.0331 24.098C35.2024 24.098 34.4744 23.9347 33.8491 23.608C33.2331 23.272 32.7524 22.8147 32.4071 22.236C32.0711 21.6573 31.9031 20.9993 31.9031 20.262C31.9031 19.5153 32.0664 18.8573 32.3931 18.288C32.7291 17.7093 33.1864 17.2567 33.7651 16.93C34.3531 16.6033 35.0204 16.44 35.7671 16.44C36.4951 16.44 37.1438 16.5987 37.7131 16.916C38.2824 17.2333 38.7304 17.6813 39.0571 18.26C39.3838 18.8387 39.5471 19.52 39.5471 20.304C39.5471 20.3787 39.5424 20.4627 39.5331 20.556C39.5331 20.6493 39.5284 20.738 39.5191 20.822H33.2891V19.66H38.5951L37.9091 20.024C37.9184 19.5947 37.8298 19.2167 37.6431 18.89C37.4564 18.5633 37.1998 18.3067 36.8731 18.12C36.5558 17.9333 36.1871 17.84 35.7671 17.84C35.3378 17.84 34.9598 17.9333 34.6331 18.12C34.3158 18.3067 34.0638 18.568 33.8771 18.904C33.6998 19.2307 33.6111 19.618 33.6111 20.066V20.346C33.6111 20.794 33.7138 21.1907 33.9191 21.536C34.1244 21.8813 34.4138 22.1473 34.7871 22.334C35.1604 22.5207 35.5898 22.614 36.0751 22.614C36.4951 22.614 36.8731 22.5487 37.2091 22.418C37.5451 22.2873 37.8438 22.082 38.1051 21.802L39.0431 22.88C38.7071 23.272 38.2824 23.5753 37.7691 23.79C37.2651 23.9953 36.6864 24.098 36.0331 24.098ZM43.5381 24.098C42.9127 24.098 42.3107 24.0187 41.7321 23.86C41.1627 23.692 40.7101 23.4913 40.3741 23.258L41.0461 21.928C41.3821 22.1427 41.7834 22.32 42.2501 22.46C42.7167 22.6 43.1834 22.67 43.6501 22.67C44.2007 22.67 44.5974 22.5953 44.8401 22.446C45.0921 22.2967 45.2181 22.096 45.2181 21.844C45.2181 21.6387 45.1341 21.4847 44.9661 21.382C44.7981 21.27 44.5787 21.186 44.3081 21.13C44.0374 21.074 43.7341 21.0227 43.3981 20.976C43.0714 20.9293 42.7401 20.8687 42.4041 20.794C42.0774 20.71 41.7787 20.5933 41.5081 20.444C41.2374 20.2853 41.0181 20.0753 40.8501 19.814C40.6821 19.5527 40.5981 19.2073 40.5981 18.778C40.5981 18.302 40.7334 17.8913 41.0041 17.546C41.2747 17.1913 41.6527 16.9207 42.1381 16.734C42.6327 16.538 43.2161 16.44 43.8881 16.44C44.3921 16.44 44.9007 16.496 45.4141 16.608C45.9274 16.72 46.3521 16.8787 46.6881 17.084L46.0161 18.414C45.6614 18.1993 45.3021 18.0547 44.9381 17.98C44.5834 17.896 44.2287 17.854 43.8741 17.854C43.3421 17.854 42.9454 17.9333 42.6841 18.092C42.4321 18.2507 42.3061 18.4513 42.3061 18.694C42.3061 18.918 42.3901 19.086 42.5581 19.198C42.7261 19.31 42.9454 19.3987 43.2161 19.464C43.4867 19.5293 43.7854 19.5853 44.1121 19.632C44.4481 19.6693 44.7794 19.73 45.1061 19.814C45.4327 19.898 45.7314 20.0147 46.0021 20.164C46.2821 20.304 46.5061 20.5047 46.6741 20.766C46.8421 21.0273 46.9261 21.368 46.9261 21.788C46.9261 22.2547 46.7861 22.6607 46.5061 23.006C46.2354 23.3513 45.8481 23.622 45.3441 23.818C44.8401 24.0047 44.2381 24.098 43.5381 24.098ZM50.7432 24.098C50.1178 24.098 49.5158 24.0187 48.9372 23.86C48.3678 23.692 47.9152 23.4913 47.5792 23.258L48.2512 21.928C48.5872 22.1427 48.9885 22.32 49.4552 22.46C49.9218 22.6 50.3885 22.67 50.8552 22.67C51.4058 22.67 51.8025 22.5953 52.0452 22.446C52.2972 22.2967 52.4232 22.096 52.4232 21.844C52.4232 21.6387 52.3392 21.4847 52.1712 21.382C52.0032 21.27 51.7838 21.186 51.5132 21.13C51.2425 21.074 50.9392 21.0227 50.6032 20.976C50.2765 20.9293 49.9452 20.8687 49.6092 20.794C49.2825 20.71 48.9838 20.5933 48.7132 20.444C48.4425 20.2853 48.2232 20.0753 48.0552 19.814C47.8872 19.5527 47.8032 19.2073 47.8032 18.778C47.8032 18.302 47.9385 17.8913 48.2092 17.546C48.4798 17.1913 48.8578 16.9207 49.3432 16.734C49.8378 16.538 50.4212 16.44 51.0932 16.44C51.5972 16.44 52.1058 16.496 52.6192 16.608C53.1325 16.72 53.5572 16.8787 53.8932 17.084L53.2212 18.414C52.8665 18.1993 52.5072 18.0547 52.1432 17.98C51.7885 17.896 51.4338 17.854 51.0792 17.854C50.5472 17.854 50.1505 17.9333 49.8892 18.092C49.6372 18.2507 49.5112 18.4513 49.5112 18.694C49.5112 18.918 49.5952 19.086 49.7632 19.198C49.9312 19.31 50.1505 19.3987 50.4212 19.464C50.6918 19.5293 50.9905 19.5853 51.3172 19.632C51.6532 19.6693 51.9845 19.73 52.3112 19.814C52.6378 19.898 52.9365 20.0147 53.2072 20.164C53.4872 20.304 53.7112 20.5047 53.8792 20.766C54.0472 21.0273 54.1312 21.368 54.1312 21.788C54.1312 22.2547 53.9912 22.6607 53.7112 23.006C53.4405 23.3513 53.0532 23.622 52.5492 23.818C52.0452 24.0047 51.4432 24.098 50.7432 24.098ZM60.2442 24V22.488L60.1462 22.166V19.52C60.1462 19.0067 59.9922 18.61 59.6842 18.33C59.3762 18.0407 58.9096 17.896 58.2842 17.896C57.8642 17.896 57.4489 17.9613 57.0382 18.092C56.6369 18.2227 56.2962 18.4047 56.0162 18.638L55.3302 17.364C55.7316 17.056 56.2076 16.8273 56.7582 16.678C57.3182 16.5193 57.8969 16.44 58.4942 16.44C59.5769 16.44 60.4122 16.7013 61.0002 17.224C61.5976 17.7373 61.8962 18.5353 61.8962 19.618V24H60.2442ZM57.8922 24.098C57.3322 24.098 56.8422 24.0047 56.4222 23.818C56.0022 23.622 55.6756 23.356 55.4422 23.02C55.2182 22.6747 55.1062 22.2873 55.1062 21.858C55.1062 21.438 55.2042 21.06 55.4002 20.724C55.6056 20.388 55.9369 20.122 56.3942 19.926C56.8516 19.73 57.4582 19.632 58.2142 19.632H60.3842V20.794H58.3402C57.7429 20.794 57.3416 20.892 57.1362 21.088C56.9309 21.2747 56.8282 21.508 56.8282 21.788C56.8282 22.1053 56.9542 22.3573 57.2062 22.544C57.4582 22.7307 57.8082 22.824 58.2562 22.824C58.6856 22.824 59.0682 22.726 59.4042 22.53C59.7496 22.334 59.9969 22.0447 60.1462 21.662L60.4402 22.712C60.2722 23.1507 59.9689 23.4913 59.5302 23.734C59.1009 23.9767 58.5549 24.098 57.8922 24.098ZM67.5438 26.814C66.8531 26.814 66.1765 26.7207 65.5138 26.534C64.8605 26.3567 64.3238 26.0953 63.9038 25.75L64.6878 24.434C65.0145 24.7047 65.4251 24.9193 65.9198 25.078C66.4238 25.246 66.9325 25.33 67.4458 25.33C68.2671 25.33 68.8691 25.1387 69.2518 24.756C69.6345 24.3827 69.8258 23.818 69.8258 23.062V21.732L69.9658 20.038L69.9098 18.344V16.524H71.5758V22.866C71.5758 24.2193 71.2305 25.2133 70.5398 25.848C69.8491 26.492 68.8505 26.814 67.5438 26.814ZM67.3198 23.664C66.6105 23.664 65.9665 23.5147 65.3878 23.216C64.8185 22.908 64.3658 22.4833 64.0298 21.942C63.7031 21.4007 63.5398 20.766 63.5398 20.038C63.5398 19.3193 63.7031 18.6893 64.0298 18.148C64.3658 17.6067 64.8185 17.1867 65.3878 16.888C65.9665 16.5893 66.6105 16.44 67.3198 16.44C67.9545 16.44 68.5238 16.566 69.0278 16.818C69.5318 17.07 69.9331 17.462 70.2318 17.994C70.5398 18.526 70.6938 19.2073 70.6938 20.038C70.6938 20.8687 70.5398 21.5547 70.2318 22.096C69.9331 22.628 69.5318 23.0247 69.0278 23.286C68.5238 23.538 67.9545 23.664 67.3198 23.664ZM67.5858 22.18C68.0245 22.18 68.4165 22.0913 68.7618 21.914C69.1071 21.7273 69.3731 21.4753 69.5598 21.158C69.7558 20.8313 69.8538 20.458 69.8538 20.038C69.8538 19.618 69.7558 19.2493 69.5598 18.932C69.3731 18.6053 69.1071 18.358 68.7618 18.19C68.4165 18.0127 68.0245 17.924 67.5858 17.924C67.1471 17.924 66.7505 18.0127 66.3958 18.19C66.0505 18.358 65.7798 18.6053 65.5838 18.932C65.3971 19.2493 65.3038 19.618 65.3038 20.038C65.3038 20.458 65.3971 20.8313 65.5838 21.158C65.7798 21.4753 66.0505 21.7273 66.3958 21.914C66.7505 22.0913 67.1471 22.18 67.5858 22.18ZM77.3905 24.098C76.5598 24.098 75.8318 23.9347 75.2065 23.608C74.5905 23.272 74.1098 22.8147 73.7645 22.236C73.4285 21.6573 73.2605 20.9993 73.2605 20.262C73.2605 19.5153 73.4238 18.8573 73.7505 18.288C74.0865 17.7093 74.5438 17.2567 75.1225 16.93C75.7105 16.6033 76.3778 16.44 77.1245 16.44C77.8525 16.44 78.5012 16.5987 79.0705 16.916C79.6398 17.2333 80.0878 17.6813 80.4145 18.26C80.7412 18.8387 80.9045 19.52 80.9045 20.304C80.9045 20.3787 80.8998 20.4627 80.8905 20.556C80.8905 20.6493 80.8858 20.738 80.8765 20.822H74.6465V19.66H79.9525L79.2665 20.024C79.2758 19.5947 79.1872 19.2167 79.0005 18.89C78.8138 18.5633 78.5572 18.3067 78.2305 18.12C77.9132 17.9333 77.5445 17.84 77.1245 17.84C76.6952 17.84 76.3172 17.9333 75.9905 18.12C75.6732 18.3067 75.4212 18.568 75.2345 18.904C75.0572 19.2307 74.9685 19.618 74.9685 20.066V20.346C74.9685 20.794 75.0712 21.1907 75.2765 21.536C75.4818 21.8813 75.7712 22.1473 76.1445 22.334C76.5178 22.5207 76.9472 22.614 77.4325 22.614C77.8525 22.614 78.2305 22.5487 78.5665 22.418C78.9025 22.2873 79.2012 22.082 79.4625 21.802L80.4005 22.88C80.0645 23.272 79.6398 23.5753 79.1265 23.79C78.6225 23.9953 78.0438 24.098 77.3905 24.098Z"
+        fill="white"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_299_5155"
+          x1="52.4324"
+          y1="0"
+          x2="52.4324"
+          y2="40"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#7940CF" />
+          <stop offset="1" stopColor="#5921CB" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
diff --git a/frontend/code/src/Components/Profile/assets/Pong.tsx b/frontend/code/src/Components/Profile/assets/Pong.tsx
index 25e3155..66c3337 100644
--- a/frontend/code/src/Components/Profile/assets/Pong.tsx
+++ b/frontend/code/src/Components/Profile/assets/Pong.tsx
@@ -1,13 +1,38 @@
-import './css/style.css'
+import "./css/style.css";
 
 export const Pong = () => {
-    return (
-    <svg className="absolute sm:top-0 top-1/2 md:top-1/3 xl:top-[10%] w-[15vw] sm:w-[20vw] 3xl:w-[15vw]   left-[40%] z-20"  viewBox="0 0 340 183" fill="none" xmlns="http://www.w3.org/2000/svg">
-       <path d="M14.28 102.48V39.312H27.132L27.636 49.392L25.116 48.636C25.508 46.9 26.628 45.276 28.476 43.764C30.38 42.252 32.788 41.02 35.7 40.068C38.612 39.06 41.804 38.556 45.276 38.556C50.036 38.556 54.208 39.536 57.792 41.496C61.432 43.456 64.232 46.172 66.192 49.644C68.208 53.06 69.216 57.064 69.216 61.656C69.216 66.192 68.208 70.196 66.192 73.668C64.176 77.14 61.348 79.856 57.708 81.816C54.068 83.776 49.868 84.756 45.108 84.756C41.636 84.756 38.444 84.252 35.532 83.244C32.62 82.18 30.212 80.836 28.308 79.212C26.404 77.532 25.228 75.852 24.78 74.172L27.888 72.996V102.48H14.28ZM41.832 73.416C44.688 73.416 47.18 72.94 49.308 71.988C51.436 70.98 53.088 69.608 54.264 67.872C55.44 66.08 56.028 64.008 56.028 61.656C56.028 59.304 55.44 57.26 54.264 55.524C53.144 53.732 51.492 52.36 49.308 51.408C47.18 50.4 44.688 49.896 41.832 49.896C38.92 49.896 36.372 50.4 34.188 51.408C32.06 52.416 30.408 53.816 29.232 55.608C28.056 57.344 27.468 59.36 27.468 61.656C27.468 64.008 28.056 66.08 29.232 67.872C30.408 69.608 32.06 70.98 34.188 71.988C36.372 72.94 38.92 73.416 41.832 73.416ZM165.021 84V39.396H177.789L178.293 50.904L174.681 51.744C175.577 49.392 176.921 47.236 178.713 45.276C180.561 43.26 182.885 41.636 185.685 40.404C188.485 39.116 191.593 38.472 195.009 38.472C199.209 38.472 202.737 39.284 205.593 40.908C208.449 42.532 210.605 44.772 212.061 47.628C213.573 50.484 214.329 53.732 214.329 57.372V84H200.889V59.892C200.889 57.876 200.441 56.112 199.545 54.6C198.649 53.032 197.417 51.856 195.849 51.072C194.281 50.232 192.461 49.812 190.389 49.812C188.485 49.812 186.805 50.148 185.349 50.82C183.893 51.436 182.633 52.276 181.569 53.34C180.561 54.348 179.805 55.44 179.301 56.616C178.797 57.792 178.545 58.968 178.545 60.144V84H171.825C169.753 84 168.129 84 166.953 84C165.833 84 165.189 84 165.021 84ZM283.2 103.32C278.16 103.32 273.652 102.76 269.676 101.64C265.7 100.52 262.48 99.176 260.016 97.608L264.636 87.864C265.868 88.424 267.296 89.04 268.92 89.712C270.6 90.384 272.476 90.944 274.548 91.392C276.62 91.896 278.916 92.148 281.436 92.148C284.404 92.148 286.952 91.616 289.08 90.552C291.208 89.488 292.832 87.92 293.952 85.848C295.128 83.832 295.716 81.284 295.716 78.204V73.164L298.32 73.584C297.872 75.376 296.64 77.056 294.624 78.624C292.664 80.136 290.144 81.368 287.064 82.32C284.04 83.216 280.764 83.664 277.236 83.664C272.588 83.664 268.472 82.74 264.888 80.892C261.304 79.044 258.504 76.44 256.488 73.08C254.528 69.72 253.548 65.856 253.548 61.488C253.548 56.952 254.584 52.976 256.656 49.56C258.784 46.088 261.696 43.372 265.392 41.412C269.088 39.452 273.316 38.472 278.076 38.472C279.476 38.472 281.044 38.64 282.78 38.976C284.572 39.256 286.364 39.704 288.156 40.32C290.004 40.88 291.712 41.58 293.28 42.42C294.848 43.204 296.108 44.156 297.06 45.276C298.068 46.396 298.628 47.572 298.74 48.804L295.968 49.476L296.472 39.396H309.24V77.952C309.24 82.152 308.54 85.848 307.14 89.04C305.796 92.232 303.92 94.892 301.512 97.02C299.16 99.148 296.416 100.716 293.28 101.724C290.144 102.788 286.784 103.32 283.2 103.32ZM281.856 73.248C284.824 73.248 287.344 72.772 289.416 71.82C291.544 70.812 293.196 69.44 294.372 67.704C295.548 65.912 296.136 63.868 296.136 61.572C296.136 59.22 295.548 57.176 294.372 55.44C293.196 53.704 291.544 52.332 289.416 51.324C287.344 50.316 284.824 49.812 281.856 49.812C278.888 49.812 276.256 50.316 273.96 51.324C271.72 52.332 269.984 53.704 268.752 55.44C267.52 57.176 266.904 59.22 266.904 61.572C266.904 63.868 267.52 65.912 268.752 67.704C269.984 69.44 271.72 70.812 273.96 71.82C276.256 72.772 278.888 73.248 281.856 73.248Z" fill="white"/>
-        <path d="M14.28 180.48V117.312H27.132L27.636 127.392L25.116 126.636C25.508 124.9 26.628 123.276 28.476 121.764C30.38 120.252 32.788 119.02 35.7 118.068C38.612 117.06 41.804 116.556 45.276 116.556C50.036 116.556 54.208 117.536 57.792 119.496C61.432 121.456 64.232 124.172 66.192 127.644C68.208 131.06 69.216 135.064 69.216 139.656C69.216 144.192 68.208 148.196 66.192 151.668C64.176 155.14 61.348 157.856 57.708 159.816C54.068 161.776 49.868 162.756 45.108 162.756C41.636 162.756 38.444 162.252 35.532 161.244C32.62 160.18 30.212 158.836 28.308 157.212C26.404 155.532 25.228 153.852 24.78 152.172L27.888 150.996V180.48H14.28ZM41.832 151.416C44.688 151.416 47.18 150.94 49.308 149.988C51.436 148.98 53.088 147.608 54.264 145.872C55.44 144.08 56.028 142.008 56.028 139.656C56.028 137.304 55.44 135.26 54.264 133.524C53.144 131.732 51.492 130.36 49.308 129.408C47.18 128.4 44.688 127.896 41.832 127.896C38.92 127.896 36.372 128.4 34.188 129.408C32.06 130.416 30.408 131.816 29.232 133.608C28.056 135.344 27.468 137.36 27.468 139.656C27.468 142.008 28.056 144.08 29.232 145.872C30.408 147.608 32.06 148.98 34.188 149.988C36.372 150.94 38.92 151.416 41.832 151.416ZM165.021 162V117.396H177.789L178.293 128.904L174.681 129.744C175.577 127.392 176.921 125.236 178.713 123.276C180.561 121.26 182.885 119.636 185.685 118.404C188.485 117.116 191.593 116.472 195.009 116.472C199.209 116.472 202.737 117.284 205.593 118.908C208.449 120.532 210.605 122.772 212.061 125.628C213.573 128.484 214.329 131.732 214.329 135.372V162H200.889V137.892C200.889 135.876 200.441 134.112 199.545 132.6C198.649 131.032 197.417 129.856 195.849 129.072C194.281 128.232 192.461 127.812 190.389 127.812C188.485 127.812 186.805 128.148 185.349 128.82C183.893 129.436 182.633 130.276 181.569 131.34C180.561 132.348 179.805 133.44 179.301 134.616C178.797 135.792 178.545 136.968 178.545 138.144V162H171.825C169.753 162 168.129 162 166.953 162C165.833 162 165.189 162 165.021 162ZM283.2 181.32C278.16 181.32 273.652 180.76 269.676 179.64C265.7 178.52 262.48 177.176 260.016 175.608L264.636 165.864C265.868 166.424 267.296 167.04 268.92 167.712C270.6 168.384 272.476 168.944 274.548 169.392C276.62 169.896 278.916 170.148 281.436 170.148C284.404 170.148 286.952 169.616 289.08 168.552C291.208 167.488 292.832 165.92 293.952 163.848C295.128 161.832 295.716 159.284 295.716 156.204V151.164L298.32 151.584C297.872 153.376 296.64 155.056 294.624 156.624C292.664 158.136 290.144 159.368 287.064 160.32C284.04 161.216 280.764 161.664 277.236 161.664C272.588 161.664 268.472 160.74 264.888 158.892C261.304 157.044 258.504 154.44 256.488 151.08C254.528 147.72 253.548 143.856 253.548 139.488C253.548 134.952 254.584 130.976 256.656 127.56C258.784 124.088 261.696 121.372 265.392 119.412C269.088 117.452 273.316 116.472 278.076 116.472C279.476 116.472 281.044 116.64 282.78 116.976C284.572 117.256 286.364 117.704 288.156 118.32C290.004 118.88 291.712 119.58 293.28 120.42C294.848 121.204 296.108 122.156 297.06 123.276C298.068 124.396 298.628 125.572 298.74 126.804L295.968 127.476L296.472 117.396H309.24V155.952C309.24 160.152 308.54 163.848 307.14 167.04C305.796 170.232 303.92 172.892 301.512 175.02C299.16 177.148 296.416 178.716 293.28 179.724C290.144 180.788 286.784 181.32 283.2 181.32ZM281.856 151.248C284.824 151.248 287.344 150.772 289.416 149.82C291.544 148.812 293.196 147.44 294.372 145.704C295.548 143.912 296.136 141.868 296.136 139.572C296.136 137.22 295.548 135.176 294.372 133.44C293.196 131.704 291.544 130.332 289.416 129.324C287.344 128.316 284.824 127.812 281.856 127.812C278.888 127.812 276.256 128.316 273.96 129.324C271.72 130.332 269.984 131.704 268.752 133.44C267.52 135.176 266.904 137.22 266.904 139.572C266.904 141.868 267.52 143.912 268.752 145.704C269.984 147.44 271.72 148.812 273.96 149.82C276.256 150.772 278.888 151.248 281.856 151.248Z" fill="white"/>
-        <circle className=" " cx="115" cy="59" r="12" fill="white"/>
-        <circle className="" cx="114.678" cy="135.727" r="22.5" transform="rotate(-179.609 114.678 135.727)" fill="white"/>
-        <rect x="86.3284" y="182.44" width="6.42857" height="29.9783" transform="rotate(-145.593 86.3284 182.44)" fill="white"/>
+  return (
+    <svg
+      className="absolute sm:top-0 top-1/2 md:top-1/3 xl:top-[10%] w-[15vw] sm:w-[20vw] 3xl:w-[15vw]   left-[40%] z-20"
+      viewBox="0 0 340 183"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.28 102.48V39.312H27.132L27.636 49.392L25.116 48.636C25.508 46.9 26.628 45.276 28.476 43.764C30.38 42.252 32.788 41.02 35.7 40.068C38.612 39.06 41.804 38.556 45.276 38.556C50.036 38.556 54.208 39.536 57.792 41.496C61.432 43.456 64.232 46.172 66.192 49.644C68.208 53.06 69.216 57.064 69.216 61.656C69.216 66.192 68.208 70.196 66.192 73.668C64.176 77.14 61.348 79.856 57.708 81.816C54.068 83.776 49.868 84.756 45.108 84.756C41.636 84.756 38.444 84.252 35.532 83.244C32.62 82.18 30.212 80.836 28.308 79.212C26.404 77.532 25.228 75.852 24.78 74.172L27.888 72.996V102.48H14.28ZM41.832 73.416C44.688 73.416 47.18 72.94 49.308 71.988C51.436 70.98 53.088 69.608 54.264 67.872C55.44 66.08 56.028 64.008 56.028 61.656C56.028 59.304 55.44 57.26 54.264 55.524C53.144 53.732 51.492 52.36 49.308 51.408C47.18 50.4 44.688 49.896 41.832 49.896C38.92 49.896 36.372 50.4 34.188 51.408C32.06 52.416 30.408 53.816 29.232 55.608C28.056 57.344 27.468 59.36 27.468 61.656C27.468 64.008 28.056 66.08 29.232 67.872C30.408 69.608 32.06 70.98 34.188 71.988C36.372 72.94 38.92 73.416 41.832 73.416ZM165.021 84V39.396H177.789L178.293 50.904L174.681 51.744C175.577 49.392 176.921 47.236 178.713 45.276C180.561 43.26 182.885 41.636 185.685 40.404C188.485 39.116 191.593 38.472 195.009 38.472C199.209 38.472 202.737 39.284 205.593 40.908C208.449 42.532 210.605 44.772 212.061 47.628C213.573 50.484 214.329 53.732 214.329 57.372V84H200.889V59.892C200.889 57.876 200.441 56.112 199.545 54.6C198.649 53.032 197.417 51.856 195.849 51.072C194.281 50.232 192.461 49.812 190.389 49.812C188.485 49.812 186.805 50.148 185.349 50.82C183.893 51.436 182.633 52.276 181.569 53.34C180.561 54.348 179.805 55.44 179.301 56.616C178.797 57.792 178.545 58.968 178.545 60.144V84H171.825C169.753 84 168.129 84 166.953 84C165.833 84 165.189 84 165.021 84ZM283.2 103.32C278.16 103.32 273.652 102.76 269.676 101.64C265.7 100.52 262.48 99.176 260.016 97.608L264.636 87.864C265.868 88.424 267.296 89.04 268.92 89.712C270.6 90.384 272.476 90.944 274.548 91.392C276.62 91.896 278.916 92.148 281.436 92.148C284.404 92.148 286.952 91.616 289.08 90.552C291.208 89.488 292.832 87.92 293.952 85.848C295.128 83.832 295.716 81.284 295.716 78.204V73.164L298.32 73.584C297.872 75.376 296.64 77.056 294.624 78.624C292.664 80.136 290.144 81.368 287.064 82.32C284.04 83.216 280.764 83.664 277.236 83.664C272.588 83.664 268.472 82.74 264.888 80.892C261.304 79.044 258.504 76.44 256.488 73.08C254.528 69.72 253.548 65.856 253.548 61.488C253.548 56.952 254.584 52.976 256.656 49.56C258.784 46.088 261.696 43.372 265.392 41.412C269.088 39.452 273.316 38.472 278.076 38.472C279.476 38.472 281.044 38.64 282.78 38.976C284.572 39.256 286.364 39.704 288.156 40.32C290.004 40.88 291.712 41.58 293.28 42.42C294.848 43.204 296.108 44.156 297.06 45.276C298.068 46.396 298.628 47.572 298.74 48.804L295.968 49.476L296.472 39.396H309.24V77.952C309.24 82.152 308.54 85.848 307.14 89.04C305.796 92.232 303.92 94.892 301.512 97.02C299.16 99.148 296.416 100.716 293.28 101.724C290.144 102.788 286.784 103.32 283.2 103.32ZM281.856 73.248C284.824 73.248 287.344 72.772 289.416 71.82C291.544 70.812 293.196 69.44 294.372 67.704C295.548 65.912 296.136 63.868 296.136 61.572C296.136 59.22 295.548 57.176 294.372 55.44C293.196 53.704 291.544 52.332 289.416 51.324C287.344 50.316 284.824 49.812 281.856 49.812C278.888 49.812 276.256 50.316 273.96 51.324C271.72 52.332 269.984 53.704 268.752 55.44C267.52 57.176 266.904 59.22 266.904 61.572C266.904 63.868 267.52 65.912 268.752 67.704C269.984 69.44 271.72 70.812 273.96 71.82C276.256 72.772 278.888 73.248 281.856 73.248Z"
+        fill="white"
+      />
+      <path
+        d="M14.28 180.48V117.312H27.132L27.636 127.392L25.116 126.636C25.508 124.9 26.628 123.276 28.476 121.764C30.38 120.252 32.788 119.02 35.7 118.068C38.612 117.06 41.804 116.556 45.276 116.556C50.036 116.556 54.208 117.536 57.792 119.496C61.432 121.456 64.232 124.172 66.192 127.644C68.208 131.06 69.216 135.064 69.216 139.656C69.216 144.192 68.208 148.196 66.192 151.668C64.176 155.14 61.348 157.856 57.708 159.816C54.068 161.776 49.868 162.756 45.108 162.756C41.636 162.756 38.444 162.252 35.532 161.244C32.62 160.18 30.212 158.836 28.308 157.212C26.404 155.532 25.228 153.852 24.78 152.172L27.888 150.996V180.48H14.28ZM41.832 151.416C44.688 151.416 47.18 150.94 49.308 149.988C51.436 148.98 53.088 147.608 54.264 145.872C55.44 144.08 56.028 142.008 56.028 139.656C56.028 137.304 55.44 135.26 54.264 133.524C53.144 131.732 51.492 130.36 49.308 129.408C47.18 128.4 44.688 127.896 41.832 127.896C38.92 127.896 36.372 128.4 34.188 129.408C32.06 130.416 30.408 131.816 29.232 133.608C28.056 135.344 27.468 137.36 27.468 139.656C27.468 142.008 28.056 144.08 29.232 145.872C30.408 147.608 32.06 148.98 34.188 149.988C36.372 150.94 38.92 151.416 41.832 151.416ZM165.021 162V117.396H177.789L178.293 128.904L174.681 129.744C175.577 127.392 176.921 125.236 178.713 123.276C180.561 121.26 182.885 119.636 185.685 118.404C188.485 117.116 191.593 116.472 195.009 116.472C199.209 116.472 202.737 117.284 205.593 118.908C208.449 120.532 210.605 122.772 212.061 125.628C213.573 128.484 214.329 131.732 214.329 135.372V162H200.889V137.892C200.889 135.876 200.441 134.112 199.545 132.6C198.649 131.032 197.417 129.856 195.849 129.072C194.281 128.232 192.461 127.812 190.389 127.812C188.485 127.812 186.805 128.148 185.349 128.82C183.893 129.436 182.633 130.276 181.569 131.34C180.561 132.348 179.805 133.44 179.301 134.616C178.797 135.792 178.545 136.968 178.545 138.144V162H171.825C169.753 162 168.129 162 166.953 162C165.833 162 165.189 162 165.021 162ZM283.2 181.32C278.16 181.32 273.652 180.76 269.676 179.64C265.7 178.52 262.48 177.176 260.016 175.608L264.636 165.864C265.868 166.424 267.296 167.04 268.92 167.712C270.6 168.384 272.476 168.944 274.548 169.392C276.62 169.896 278.916 170.148 281.436 170.148C284.404 170.148 286.952 169.616 289.08 168.552C291.208 167.488 292.832 165.92 293.952 163.848C295.128 161.832 295.716 159.284 295.716 156.204V151.164L298.32 151.584C297.872 153.376 296.64 155.056 294.624 156.624C292.664 158.136 290.144 159.368 287.064 160.32C284.04 161.216 280.764 161.664 277.236 161.664C272.588 161.664 268.472 160.74 264.888 158.892C261.304 157.044 258.504 154.44 256.488 151.08C254.528 147.72 253.548 143.856 253.548 139.488C253.548 134.952 254.584 130.976 256.656 127.56C258.784 124.088 261.696 121.372 265.392 119.412C269.088 117.452 273.316 116.472 278.076 116.472C279.476 116.472 281.044 116.64 282.78 116.976C284.572 117.256 286.364 117.704 288.156 118.32C290.004 118.88 291.712 119.58 293.28 120.42C294.848 121.204 296.108 122.156 297.06 123.276C298.068 124.396 298.628 125.572 298.74 126.804L295.968 127.476L296.472 117.396H309.24V155.952C309.24 160.152 308.54 163.848 307.14 167.04C305.796 170.232 303.92 172.892 301.512 175.02C299.16 177.148 296.416 178.716 293.28 179.724C290.144 180.788 286.784 181.32 283.2 181.32ZM281.856 151.248C284.824 151.248 287.344 150.772 289.416 149.82C291.544 148.812 293.196 147.44 294.372 145.704C295.548 143.912 296.136 141.868 296.136 139.572C296.136 137.22 295.548 135.176 294.372 133.44C293.196 131.704 291.544 130.332 289.416 129.324C287.344 128.316 284.824 127.812 281.856 127.812C278.888 127.812 276.256 128.316 273.96 129.324C271.72 130.332 269.984 131.704 268.752 133.44C267.52 135.176 266.904 137.22 266.904 139.572C266.904 141.868 267.52 143.912 268.752 145.704C269.984 147.44 271.72 148.812 273.96 149.82C276.256 150.772 278.888 151.248 281.856 151.248Z"
+        fill="white"
+      />
+      <circle className=" " cx="115" cy="59" r="12" fill="white" />
+      <circle
+        className=""
+        cx="114.678"
+        cy="135.727"
+        r="22.5"
+        transform="rotate(-179.609 114.678 135.727)"
+        fill="white"
+      />
+      <rect
+        x="86.3284"
+        y="182.44"
+        width="6.42857"
+        height="29.9783"
+        transform="rotate(-145.593 86.3284 182.44)"
+        fill="white"
+      />
     </svg>
-    )
-}
+  );
+};
diff --git a/frontend/code/src/Components/Profile/assets/ShareB.tsx b/frontend/code/src/Components/Profile/assets/ShareB.tsx
index 54a76e4..bc64c5a 100644
--- a/frontend/code/src/Components/Profile/assets/ShareB.tsx
+++ b/frontend/code/src/Components/Profile/assets/ShareB.tsx
@@ -1,12 +1,25 @@
 export const Share = () => {
-    return (
-
-    <svg  className="w-32 sm:w-60 hover:cursor-pointer" width="187" height="40" viewBox="0 0 187 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect width="187" height="40" rx="5" fill="white"/>
-    <path d="M57.472 26.126C56.632 26.126 55.876 25.982 55.204 25.694C54.532 25.394 54.004 24.974 53.62 24.434C53.236 23.894 53.044 23.264 53.044 22.544H55.24C55.288 23.084 55.498 23.528 55.87 23.876C56.254 24.224 56.788 24.398 57.472 24.398C58.18 24.398 58.732 24.23 59.128 23.894C59.524 23.546 59.722 23.102 59.722 22.562C59.722 22.142 59.596 21.8 59.344 21.536C59.104 21.272 58.798 21.068 58.426 20.924C58.066 20.78 57.562 20.624 56.914 20.456C56.098 20.24 55.432 20.024 54.916 19.808C54.412 19.58 53.98 19.232 53.62 18.764C53.26 18.296 53.08 17.672 53.08 16.892C53.08 16.172 53.26 15.542 53.62 15.002C53.98 14.462 54.484 14.048 55.132 13.76C55.78 13.472 56.53 13.328 57.382 13.328C58.594 13.328 59.584 13.634 60.352 14.246C61.132 14.846 61.564 15.674 61.648 16.73H59.38C59.344 16.274 59.128 15.884 58.732 15.56C58.336 15.236 57.814 15.074 57.166 15.074C56.578 15.074 56.098 15.224 55.726 15.524C55.354 15.824 55.168 16.256 55.168 16.82C55.168 17.204 55.282 17.522 55.51 17.774C55.75 18.014 56.05 18.206 56.41 18.35C56.77 18.494 57.262 18.65 57.886 18.818C58.714 19.046 59.386 19.274 59.902 19.502C60.43 19.73 60.874 20.084 61.234 20.564C61.606 21.032 61.792 21.662 61.792 22.454C61.792 23.09 61.618 23.69 61.27 24.254C60.934 24.818 60.436 25.274 59.776 25.622C59.128 25.958 58.36 26.126 57.472 26.126ZM69.3433 15.92C70.0993 15.92 70.7713 16.082 71.3593 16.406C71.9593 16.73 72.4273 17.21 72.7633 17.846C73.1113 18.482 73.2853 19.25 73.2853 20.15V26H71.2513V20.456C71.2513 19.568 71.0293 18.89 70.5853 18.422C70.1413 17.942 69.5353 17.702 68.7673 17.702C67.9993 17.702 67.3873 17.942 66.9313 18.422C66.4873 18.89 66.2653 19.568 66.2653 20.456V26H64.2133V12.68H66.2653V17.234C66.6133 16.814 67.0513 16.49 67.5793 16.262C68.1193 16.034 68.7073 15.92 69.3433 15.92ZM75.2187 20.996C75.2187 20 75.4227 19.118 75.8307 18.35C76.2507 17.582 76.8147 16.988 77.5227 16.568C78.2427 16.136 79.0347 15.92 79.8987 15.92C80.6787 15.92 81.3567 16.076 81.9327 16.388C82.5207 16.688 82.9887 17.066 83.3367 17.522V16.082H85.4067V26H83.3367V24.524C82.9887 24.992 82.5147 25.382 81.9147 25.694C81.3147 26.006 80.6307 26.162 79.8627 26.162C79.0107 26.162 78.2307 25.946 77.5227 25.514C76.8147 25.07 76.2507 24.458 75.8307 23.678C75.4227 22.886 75.2187 21.992 75.2187 20.996ZM83.3367 21.032C83.3367 20.348 83.1927 19.754 82.9047 19.25C82.6287 18.746 82.2627 18.362 81.8067 18.098C81.3507 17.834 80.8587 17.702 80.3307 17.702C79.8027 17.702 79.3107 17.834 78.8547 18.098C78.3987 18.35 78.0267 18.728 77.7387 19.232C77.4627 19.724 77.3247 20.312 77.3247 20.996C77.3247 21.68 77.4627 22.28 77.7387 22.796C78.0267 23.312 78.3987 23.708 78.8547 23.984C79.3227 24.248 79.8147 24.38 80.3307 24.38C80.8587 24.38 81.3507 24.248 81.8067 23.984C82.2627 23.72 82.6287 23.336 82.9047 22.832C83.1927 22.316 83.3367 21.716 83.3367 21.032ZM90.154 17.522C90.454 17.018 90.85 16.628 91.342 16.352C91.846 16.064 92.44 15.92 93.124 15.92V18.044H92.602C91.798 18.044 91.186 18.248 90.766 18.656C90.358 19.064 90.154 19.772 90.154 20.78V26H88.102V16.082H90.154V17.522ZM104.1 20.798C104.1 21.17 104.076 21.506 104.028 21.806H96.4502C96.5102 22.598 96.8042 23.234 97.3322 23.714C97.8602 24.194 98.5082 24.434 99.2762 24.434C100.38 24.434 101.16 23.972 101.616 23.048H103.83C103.53 23.96 102.984 24.71 102.192 25.298C101.412 25.874 100.44 26.162 99.2762 26.162C98.3282 26.162 97.4762 25.952 96.7202 25.532C95.9762 25.1 95.3882 24.5 94.9562 23.732C94.5362 22.952 94.3262 22.052 94.3262 21.032C94.3262 20.012 94.5302 19.118 94.9382 18.35C95.3582 17.57 95.9402 16.97 96.6842 16.55C97.4402 16.13 98.3042 15.92 99.2762 15.92C100.212 15.92 101.046 16.124 101.778 16.532C102.51 16.94 103.08 17.516 103.488 18.26C103.896 18.992 104.1 19.838 104.1 20.798ZM101.958 20.15C101.946 19.394 101.676 18.788 101.148 18.332C100.62 17.876 99.9662 17.648 99.1862 17.648C98.4782 17.648 97.8722 17.876 97.3682 18.332C96.8642 18.776 96.5642 19.382 96.4682 20.15H101.958ZM119.543 17.216C119.543 17.852 119.393 18.452 119.093 19.016C118.793 19.58 118.313 20.042 117.653 20.402C116.993 20.75 116.147 20.924 115.115 20.924H112.847V26H110.795V13.49H115.115C116.075 13.49 116.885 13.658 117.545 13.994C118.217 14.318 118.715 14.762 119.039 15.326C119.375 15.89 119.543 16.52 119.543 17.216ZM115.115 19.25C115.895 19.25 116.477 19.076 116.861 18.728C117.245 18.368 117.437 17.864 117.437 17.216C117.437 15.848 116.663 15.164 115.115 15.164H112.847V19.25H115.115ZM123.552 17.522C123.852 17.018 124.248 16.628 124.74 16.352C125.244 16.064 125.838 15.92 126.522 15.92V18.044H126C125.196 18.044 124.584 18.248 124.164 18.656C123.756 19.064 123.552 19.772 123.552 20.78V26H121.5V16.082H123.552V17.522ZM132.711 26.162C131.775 26.162 130.929 25.952 130.173 25.532C129.417 25.1 128.823 24.5 128.391 23.732C127.959 22.952 127.743 22.052 127.743 21.032C127.743 20.024 127.965 19.13 128.409 18.35C128.853 17.57 129.459 16.97 130.227 16.55C130.995 16.13 131.853 15.92 132.801 15.92C133.749 15.92 134.607 16.13 135.375 16.55C136.143 16.97 136.749 17.57 137.193 18.35C137.637 19.13 137.859 20.024 137.859 21.032C137.859 22.04 137.631 22.934 137.175 23.714C136.719 24.494 136.095 25.1 135.303 25.532C134.523 25.952 133.659 26.162 132.711 26.162ZM132.711 24.38C133.239 24.38 133.731 24.254 134.187 24.002C134.655 23.75 135.033 23.372 135.321 22.868C135.609 22.364 135.753 21.752 135.753 21.032C135.753 20.312 135.615 19.706 135.339 19.214C135.063 18.71 134.697 18.332 134.241 18.08C133.785 17.828 133.293 17.702 132.765 17.702C132.237 17.702 131.745 17.828 131.289 18.08C130.845 18.332 130.491 18.71 130.227 19.214C129.963 19.706 129.831 20.312 129.831 21.032C129.831 22.1 130.101 22.928 130.641 23.516C131.193 24.092 131.883 24.38 132.711 24.38ZM144.045 17.756H142.209V26H140.139V17.756H138.969V16.082H140.139V15.38C140.139 14.24 140.439 13.412 141.039 12.896C141.651 12.368 142.605 12.104 143.901 12.104V13.814C143.277 13.814 142.839 13.934 142.587 14.174C142.335 14.402 142.209 14.804 142.209 15.38V16.082H144.045V17.756ZM146.908 14.768C146.536 14.768 146.224 14.642 145.972 14.39C145.72 14.138 145.594 13.826 145.594 13.454C145.594 13.082 145.72 12.77 145.972 12.518C146.224 12.266 146.536 12.14 146.908 12.14C147.268 12.14 147.574 12.266 147.826 12.518C148.078 12.77 148.204 13.082 148.204 13.454C148.204 13.826 148.078 14.138 147.826 14.39C147.574 14.642 147.268 14.768 146.908 14.768ZM147.916 16.082V26H145.864V16.082H147.916ZM152.662 12.68V26H150.61V12.68H152.662ZM164.446 20.798C164.446 21.17 164.422 21.506 164.374 21.806H156.796C156.856 22.598 157.15 23.234 157.678 23.714C158.206 24.194 158.854 24.434 159.622 24.434C160.726 24.434 161.506 23.972 161.962 23.048H164.176C163.876 23.96 163.33 24.71 162.538 25.298C161.758 25.874 160.786 26.162 159.622 26.162C158.674 26.162 157.822 25.952 157.066 25.532C156.322 25.1 155.734 24.5 155.302 23.732C154.882 22.952 154.672 22.052 154.672 21.032C154.672 20.012 154.876 19.118 155.284 18.35C155.704 17.57 156.286 16.97 157.03 16.55C157.786 16.13 158.65 15.92 159.622 15.92C160.558 15.92 161.392 16.124 162.124 16.532C162.856 16.94 163.426 17.516 163.834 18.26C164.242 18.992 164.446 19.838 164.446 20.798ZM162.304 20.15C162.292 19.394 162.022 18.788 161.494 18.332C160.966 17.876 160.312 17.648 159.532 17.648C158.824 17.648 158.218 17.876 157.714 18.332C157.21 18.776 156.91 19.382 156.814 20.15H162.304Z" fill="#272932"/>
-    <path d="M26 20L30 24L26 28" stroke="#272932" strokeWidth="2"/>
-    <path d="M36 21.5V18C36 16.8954 35.1046 16 34 16H22C20.8954 16 20 16.8954 20 18V22C20 23.1046 20.8954 24 22 24H29" stroke="#272932" strokeWidth="2" strokeLinecap="round"/>
+  return (
+    <svg
+      className="w-32 sm:w-60 hover:cursor-pointer"
+      width="187"
+      height="40"
+      viewBox="0 0 187 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="187" height="40" rx="5" fill="white" />
+      <path
+        d="M57.472 26.126C56.632 26.126 55.876 25.982 55.204 25.694C54.532 25.394 54.004 24.974 53.62 24.434C53.236 23.894 53.044 23.264 53.044 22.544H55.24C55.288 23.084 55.498 23.528 55.87 23.876C56.254 24.224 56.788 24.398 57.472 24.398C58.18 24.398 58.732 24.23 59.128 23.894C59.524 23.546 59.722 23.102 59.722 22.562C59.722 22.142 59.596 21.8 59.344 21.536C59.104 21.272 58.798 21.068 58.426 20.924C58.066 20.78 57.562 20.624 56.914 20.456C56.098 20.24 55.432 20.024 54.916 19.808C54.412 19.58 53.98 19.232 53.62 18.764C53.26 18.296 53.08 17.672 53.08 16.892C53.08 16.172 53.26 15.542 53.62 15.002C53.98 14.462 54.484 14.048 55.132 13.76C55.78 13.472 56.53 13.328 57.382 13.328C58.594 13.328 59.584 13.634 60.352 14.246C61.132 14.846 61.564 15.674 61.648 16.73H59.38C59.344 16.274 59.128 15.884 58.732 15.56C58.336 15.236 57.814 15.074 57.166 15.074C56.578 15.074 56.098 15.224 55.726 15.524C55.354 15.824 55.168 16.256 55.168 16.82C55.168 17.204 55.282 17.522 55.51 17.774C55.75 18.014 56.05 18.206 56.41 18.35C56.77 18.494 57.262 18.65 57.886 18.818C58.714 19.046 59.386 19.274 59.902 19.502C60.43 19.73 60.874 20.084 61.234 20.564C61.606 21.032 61.792 21.662 61.792 22.454C61.792 23.09 61.618 23.69 61.27 24.254C60.934 24.818 60.436 25.274 59.776 25.622C59.128 25.958 58.36 26.126 57.472 26.126ZM69.3433 15.92C70.0993 15.92 70.7713 16.082 71.3593 16.406C71.9593 16.73 72.4273 17.21 72.7633 17.846C73.1113 18.482 73.2853 19.25 73.2853 20.15V26H71.2513V20.456C71.2513 19.568 71.0293 18.89 70.5853 18.422C70.1413 17.942 69.5353 17.702 68.7673 17.702C67.9993 17.702 67.3873 17.942 66.9313 18.422C66.4873 18.89 66.2653 19.568 66.2653 20.456V26H64.2133V12.68H66.2653V17.234C66.6133 16.814 67.0513 16.49 67.5793 16.262C68.1193 16.034 68.7073 15.92 69.3433 15.92ZM75.2187 20.996C75.2187 20 75.4227 19.118 75.8307 18.35C76.2507 17.582 76.8147 16.988 77.5227 16.568C78.2427 16.136 79.0347 15.92 79.8987 15.92C80.6787 15.92 81.3567 16.076 81.9327 16.388C82.5207 16.688 82.9887 17.066 83.3367 17.522V16.082H85.4067V26H83.3367V24.524C82.9887 24.992 82.5147 25.382 81.9147 25.694C81.3147 26.006 80.6307 26.162 79.8627 26.162C79.0107 26.162 78.2307 25.946 77.5227 25.514C76.8147 25.07 76.2507 24.458 75.8307 23.678C75.4227 22.886 75.2187 21.992 75.2187 20.996ZM83.3367 21.032C83.3367 20.348 83.1927 19.754 82.9047 19.25C82.6287 18.746 82.2627 18.362 81.8067 18.098C81.3507 17.834 80.8587 17.702 80.3307 17.702C79.8027 17.702 79.3107 17.834 78.8547 18.098C78.3987 18.35 78.0267 18.728 77.7387 19.232C77.4627 19.724 77.3247 20.312 77.3247 20.996C77.3247 21.68 77.4627 22.28 77.7387 22.796C78.0267 23.312 78.3987 23.708 78.8547 23.984C79.3227 24.248 79.8147 24.38 80.3307 24.38C80.8587 24.38 81.3507 24.248 81.8067 23.984C82.2627 23.72 82.6287 23.336 82.9047 22.832C83.1927 22.316 83.3367 21.716 83.3367 21.032ZM90.154 17.522C90.454 17.018 90.85 16.628 91.342 16.352C91.846 16.064 92.44 15.92 93.124 15.92V18.044H92.602C91.798 18.044 91.186 18.248 90.766 18.656C90.358 19.064 90.154 19.772 90.154 20.78V26H88.102V16.082H90.154V17.522ZM104.1 20.798C104.1 21.17 104.076 21.506 104.028 21.806H96.4502C96.5102 22.598 96.8042 23.234 97.3322 23.714C97.8602 24.194 98.5082 24.434 99.2762 24.434C100.38 24.434 101.16 23.972 101.616 23.048H103.83C103.53 23.96 102.984 24.71 102.192 25.298C101.412 25.874 100.44 26.162 99.2762 26.162C98.3282 26.162 97.4762 25.952 96.7202 25.532C95.9762 25.1 95.3882 24.5 94.9562 23.732C94.5362 22.952 94.3262 22.052 94.3262 21.032C94.3262 20.012 94.5302 19.118 94.9382 18.35C95.3582 17.57 95.9402 16.97 96.6842 16.55C97.4402 16.13 98.3042 15.92 99.2762 15.92C100.212 15.92 101.046 16.124 101.778 16.532C102.51 16.94 103.08 17.516 103.488 18.26C103.896 18.992 104.1 19.838 104.1 20.798ZM101.958 20.15C101.946 19.394 101.676 18.788 101.148 18.332C100.62 17.876 99.9662 17.648 99.1862 17.648C98.4782 17.648 97.8722 17.876 97.3682 18.332C96.8642 18.776 96.5642 19.382 96.4682 20.15H101.958ZM119.543 17.216C119.543 17.852 119.393 18.452 119.093 19.016C118.793 19.58 118.313 20.042 117.653 20.402C116.993 20.75 116.147 20.924 115.115 20.924H112.847V26H110.795V13.49H115.115C116.075 13.49 116.885 13.658 117.545 13.994C118.217 14.318 118.715 14.762 119.039 15.326C119.375 15.89 119.543 16.52 119.543 17.216ZM115.115 19.25C115.895 19.25 116.477 19.076 116.861 18.728C117.245 18.368 117.437 17.864 117.437 17.216C117.437 15.848 116.663 15.164 115.115 15.164H112.847V19.25H115.115ZM123.552 17.522C123.852 17.018 124.248 16.628 124.74 16.352C125.244 16.064 125.838 15.92 126.522 15.92V18.044H126C125.196 18.044 124.584 18.248 124.164 18.656C123.756 19.064 123.552 19.772 123.552 20.78V26H121.5V16.082H123.552V17.522ZM132.711 26.162C131.775 26.162 130.929 25.952 130.173 25.532C129.417 25.1 128.823 24.5 128.391 23.732C127.959 22.952 127.743 22.052 127.743 21.032C127.743 20.024 127.965 19.13 128.409 18.35C128.853 17.57 129.459 16.97 130.227 16.55C130.995 16.13 131.853 15.92 132.801 15.92C133.749 15.92 134.607 16.13 135.375 16.55C136.143 16.97 136.749 17.57 137.193 18.35C137.637 19.13 137.859 20.024 137.859 21.032C137.859 22.04 137.631 22.934 137.175 23.714C136.719 24.494 136.095 25.1 135.303 25.532C134.523 25.952 133.659 26.162 132.711 26.162ZM132.711 24.38C133.239 24.38 133.731 24.254 134.187 24.002C134.655 23.75 135.033 23.372 135.321 22.868C135.609 22.364 135.753 21.752 135.753 21.032C135.753 20.312 135.615 19.706 135.339 19.214C135.063 18.71 134.697 18.332 134.241 18.08C133.785 17.828 133.293 17.702 132.765 17.702C132.237 17.702 131.745 17.828 131.289 18.08C130.845 18.332 130.491 18.71 130.227 19.214C129.963 19.706 129.831 20.312 129.831 21.032C129.831 22.1 130.101 22.928 130.641 23.516C131.193 24.092 131.883 24.38 132.711 24.38ZM144.045 17.756H142.209V26H140.139V17.756H138.969V16.082H140.139V15.38C140.139 14.24 140.439 13.412 141.039 12.896C141.651 12.368 142.605 12.104 143.901 12.104V13.814C143.277 13.814 142.839 13.934 142.587 14.174C142.335 14.402 142.209 14.804 142.209 15.38V16.082H144.045V17.756ZM146.908 14.768C146.536 14.768 146.224 14.642 145.972 14.39C145.72 14.138 145.594 13.826 145.594 13.454C145.594 13.082 145.72 12.77 145.972 12.518C146.224 12.266 146.536 12.14 146.908 12.14C147.268 12.14 147.574 12.266 147.826 12.518C148.078 12.77 148.204 13.082 148.204 13.454C148.204 13.826 148.078 14.138 147.826 14.39C147.574 14.642 147.268 14.768 146.908 14.768ZM147.916 16.082V26H145.864V16.082H147.916ZM152.662 12.68V26H150.61V12.68H152.662ZM164.446 20.798C164.446 21.17 164.422 21.506 164.374 21.806H156.796C156.856 22.598 157.15 23.234 157.678 23.714C158.206 24.194 158.854 24.434 159.622 24.434C160.726 24.434 161.506 23.972 161.962 23.048H164.176C163.876 23.96 163.33 24.71 162.538 25.298C161.758 25.874 160.786 26.162 159.622 26.162C158.674 26.162 157.822 25.952 157.066 25.532C156.322 25.1 155.734 24.5 155.302 23.732C154.882 22.952 154.672 22.052 154.672 21.032C154.672 20.012 154.876 19.118 155.284 18.35C155.704 17.57 156.286 16.97 157.03 16.55C157.786 16.13 158.65 15.92 159.622 15.92C160.558 15.92 161.392 16.124 162.124 16.532C162.856 16.94 163.426 17.516 163.834 18.26C164.242 18.992 164.446 19.838 164.446 20.798ZM162.304 20.15C162.292 19.394 162.022 18.788 161.494 18.332C160.966 17.876 160.312 17.648 159.532 17.648C158.824 17.648 158.218 17.876 157.714 18.332C157.21 18.776 156.91 19.382 156.814 20.15H162.304Z"
+        fill="#272932"
+      />
+      <path d="M26 20L30 24L26 28" stroke="#272932" strokeWidth="2" />
+      <path
+        d="M36 21.5V18C36 16.8954 35.1046 16 34 16H22C20.8954 16 20 16.8954 20 18V22C20 23.1046 20.8954 24 22 24H29"
+        stroke="#272932"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
     </svg>
-
-    )
-}
\ No newline at end of file
+  );
+};
diff --git a/frontend/code/src/Components/Profile/assets/Table.tsx b/frontend/code/src/Components/Profile/assets/Table.tsx
index 6f29715..a697528 100644
--- a/frontend/code/src/Components/Profile/assets/Table.tsx
+++ b/frontend/code/src/Components/Profile/assets/Table.tsx
@@ -8,7 +8,7 @@ import api from "../../../Api/base";
 import toast from "react-hot-toast";
 import { formatTime } from "../../Chat/Components/tools/utils";
 import { useParams } from "react-router-dom";
-const getColor = (v1: any, v2: any , id:string ) => {
+const getColor = (v1: any, v2: any, id: string) => {
   if (v1.score > v2.score && id === v1.id) return "text-lime-400";
   if (v1.score < v2.score && id === v2.id) return "text-lime-400";
   if (v1.score > v2.score && id !== v1.id) return "text-red-400";
@@ -16,34 +16,38 @@ const getColor = (v1: any, v2: any , id:string ) => {
   return "text-gray-400";
 };
 
-const scoreHandler = (x:any, id:string) => {
-  if(x.match.Player1.score > x.match.Player2.score && x.match.Player1.id === id) 
-  {
-    return " +1 "
+const scoreHandler = (x: any, id: string) => {
+  if (
+    x.match.Player1.score > x.match.Player2.score &&
+    x.match.Player1.id === id
+  ) {
+    return " +1 ";
+  } else if (
+    x.match.Player2.score > x.match.Player1.score &&
+    x.match.Player2.id === id
+  ) {
+    return " +1 ";
+  } else if (
+    x.match.Player1.score > x.match.Player2.score &&
+    x.match.Player1.id !== id
+  ) {
+    return " -1 ";
+  } else if (
+    x.match.Player2.score > x.match.Player1.score &&
+    x.match.Player2.id !== id
+  ) {
+    return " -1 ";
+  } else {
+    return " 0 ";
   }
-  else if (x.match.Player2.score > x.match.Player1.score && x.match.Player2.id === id)
-  {
-    return " +1 "
-  }
-  else if(x.match.Player1.score > x.match.Player2.score && x.match.Player1.id !== id) 
-  {
-    return " -1 "
-  }
-  else if (x.match.Player2.score > x.match.Player1.score && x.match.Player2.id !== id)
-  {
-    return " -1 "
-  }
-  else {
-    return " 0 "
-  }
-}
+};
 
 export const Table = (props: any) => {
   const [history, setHistory] = useState<any | undefined>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [hasMore, setHasMore] = useState(true);
   const offset = useRef(0);
-  const {id} :any = useParams();
+  const { id }: any = useParams();
   const fetchData = async () => {
     try {
       const history: any = await api.get(`/game/history/${props.props.props}`, {
@@ -67,7 +71,7 @@ export const Table = (props: any) => {
     offset.current += 20;
     // eslint-disable-next-line
   }, [props.props.props]);
-  console.log(props);
+
   return history.length > 0 || loading === true ? (
     <div className="w-full h-full overflow-auto">
       <InfiniteScroll
@@ -155,11 +159,11 @@ export const Table = (props: any) => {
                       className={`w-18 ${getColor(
                         x.match.Player1,
                         x.match.Player2,
-                        id
+                        id,
                       )}`}
                     >
                       {" "}
-                      {scoreHandler(x,id)}
+                      {scoreHandler(x, id)}
                     </div>
                   </td>
                 </tr>
diff --git a/frontend/code/src/Components/Profile/index.tsx b/frontend/code/src/Components/Profile/index.tsx
index 2d212b5..dced71e 100644
--- a/frontend/code/src/Components/Profile/index.tsx
+++ b/frontend/code/src/Components/Profile/index.tsx
@@ -38,7 +38,6 @@ export const Profile = () => {
   const navigate = useNavigate();
   const [status, setStatus] = useState<FRIENDSHIP>(undefined);
   const [disabled, setDisabled] = useState("");
-  console.log(`params : ${params.id} type ${typeof params.id}`);
   const [profile, setProfile] = useState<null | any>(undefined);
   const ChatState = useChatStore();
   const LayoutState = useModalStore();
@@ -65,14 +64,17 @@ export const Profile = () => {
           setStatus("recive");
       } catch (error) {
         if (error instanceof AxiosError) {
-          if (error?.response?.status !== 401) navigate("/NotFound");
+          if (error?.response?.status !== 401) {
+            toast.error("The user does not exist or has blocked you");
+            navigate("/home", { replace: true });
+          }
         }
       }
     };
     if (params.id !== user.id || params.id !== "me") fetchUser();
     else setProfile(user);
 
-    //eslint-disable-next-line
+    // eslint-disable-next-line
   }, [params, user]);
 
   useEffect(() => {
@@ -83,7 +85,6 @@ export const Profile = () => {
       "status",
       { userId: params.id },
       (data: { status: string; inGame: boolean }) => {
-        console.log(data);
         if (data.status === "online" && !data.inGame) {
           setOnlineStatus("online");
         } else if (data.status === "online" && data.inGame) {
@@ -91,11 +92,10 @@ export const Profile = () => {
         } else {
           setOnlineStatus("offline");
         }
-      }
+      },
     );
   }, [params.id, socketStore?.socket, user.id]);
 
-  console.log(status);
   const sendRequest = async () => {
     setDisabled("btn-disabled");
     const fetchFunc = async () => {
@@ -108,7 +108,6 @@ export const Profile = () => {
       success: `request sent to ${profile.name.first}`,
       error: "could not send friend request",
     });
-    // setDisbaled("")
   };
   const cancelRequest = async () => {
     setDisabled("btn-disabled");
@@ -196,8 +195,8 @@ export const Profile = () => {
                       onlineStatus === "online"
                         ? "text-green-500 border-green-500"
                         : onlineStatus === "inGame"
-                        ? "text-yellow-500 border-yellow-500"
-                        : "text-red-500 border-red-500"
+                          ? "text-yellow-500 border-yellow-500"
+                          : "text-red-500 border-red-500",
                     )}
                   >
                     {onlineStatus}
@@ -211,37 +210,6 @@ export const Profile = () => {
             </div>
 
             <div className="flex flex-col gap-y-0 items-center h-full sm:flex-row sm:gap-x-4 justify-center sm:justify-start sm:items-end pb-4 sm:w-[25vw]">
-              {/* for debug */}
-              <button
-                className={`btn btn-primary text-neutral ${disabled}`}
-                onClick={async () => {
-                  ChatState.setIsLoading(true);
-                  await createNewRoomCall("", "dm", undefined, params.id).then(
-                    (res) => {
-                      ChatState.setIsLoading(false);
-                      if (res?.status === 200 || res?.status === 201) {
-                        ChatState.changeChatType(ChatType.Chat);
-                        ChatState.selectNewChatID(res?.data?.id);
-                        ChatState.setCurrentDmUser({
-                          secondUserId: profile.id,
-                          id: profile.id,
-                          name: `${profile.name.first} `,
-                          avatar: profile?.picture,
-                          bio: profile?.bio,
-                        });
-                        navigate(`/Dm/${res?.data.id}`);
-                      } else {
-                        toast.error(
-                          "You Can't Send Message To this User For Now, try Again later"
-                        );
-                      }
-                    }
-                  );
-                }}
-              >
-                <VscComment />
-                Message
-              </button>
               {params.id !== "me" &&
                 params.id !== user.id &&
                 status === "none" && (
@@ -265,16 +233,16 @@ export const Profile = () => {
                       >
                         <span className="hover:bg-[#7940CF] hover:rounded">
                           <li
-                            onClick={async () => {
+                            onClick={() => {
                               ChatState.setIsLoading(true);
-                              await blockUserCall(profile.id).then((res) => {
+                              blockUserCall(profile.id).then((res) => {
                                 ChatState.setIsLoading(false);
                                 if (
                                   res?.status === 200 ||
                                   res?.status === 201
                                 ) {
                                   toast.success("User Blocked");
-                                  navigate("/chat");
+                                  navigate("/chat", { replace: true });
                                 } else {
                                   toast.error("Could Not Block User");
                                 }
@@ -333,7 +301,7 @@ export const Profile = () => {
                           "",
                           "dm",
                           undefined,
-                          params.id
+                          params.id,
                         ).then((res) => {
                           ChatState.setIsLoading(false);
                           if (res?.status === 200 || res?.status === 201) {
@@ -349,7 +317,7 @@ export const Profile = () => {
                             navigate(`/Dm/${res?.data.id}`);
                           } else {
                             toast.error(
-                              "You Can't Send Message To this User For Now, try Again later"
+                              "You Can't Send Message To this User For Now, try Again later",
                             );
                           }
                         });
@@ -388,7 +356,7 @@ export const Profile = () => {
                                 }
                                 user.setGameWaitingId(data.gameId);
                                 inviteWaitingModalRef.current?.showModal();
-                              }
+                              },
                             );
                           }}
                         >
@@ -414,7 +382,7 @@ export const Profile = () => {
                                 }
                                 user.setGameWaitingId(data.gameId);
                                 inviteWaitingModalRef.current?.showModal();
-                              }
+                              },
                             );
                           }}
                         >
@@ -431,7 +399,7 @@ export const Profile = () => {
                                   res?.status === 201
                                 ) {
                                   toast.success("User Blocked");
-                                  navigate("/chat");
+                                  navigate("/chat", { replace: true });
                                 } else {
                                   toast.error("Could Not Block User");
                                 }
@@ -458,8 +426,7 @@ export const Profile = () => {
                 <div className=" flex items-center w-[60%] gap-x-5 h-20">
                   <Link to={"/Settings"}>
                     <button
-                      className={`btn btn-primary text-neutral ${disabled}`}
-                      //  onClick={cancelRequest}
+                      className={`btn btn-primary text-neutral ${disabled} flex-row flex-nowrap whitespace-nowrap`}
                     >
                       <VscEdit />
                       Edit Profile
@@ -476,27 +443,23 @@ export const Profile = () => {
                       className="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52 absolute bottom-16  "
                     >
                       <li
-                        onClick={() => {
-                          LayoutState.setShowFriendsModal(
-                            !LayoutState.showFriendsListModal
-                          );
-                        }}
+                        onClick={() =>
+                          LayoutState.setShowFriendsListModal(true)
+                        }
                       >
                         <span className="hover:bg-[#7940CF]">
-                          <a href="#my_modal_1" className="pr-2">
+                          <a href="#friends-list-modal" className="pr-2">
                             <div>See Friends List</div>
                           </a>
                         </span>
                       </li>
                       <li
-                        onClick={() => {
-                          LayoutState.setShowBlockedList(
-                            !LayoutState.showBlockedLIstModal
-                          );
-                        }}
+                        onClick={() =>
+                          LayoutState.setShowBlockedListModal(true)
+                        }
                       >
                         <span className="hover:bg-[#7940CF]">
-                          <a href="#my_modal_3" className="pr-2">
+                          <a href="#blocked-users-modal" className="pr-2">
                             <div>See Blocked List</div>
                           </a>
                         </span>
diff --git a/frontend/code/src/Components/Settings/assets/Edit.tsx b/frontend/code/src/Components/Settings/assets/Edit.tsx
index 721515a..c15ae6a 100644
--- a/frontend/code/src/Components/Settings/assets/Edit.tsx
+++ b/frontend/code/src/Components/Settings/assets/Edit.tsx
@@ -1,11 +1,24 @@
 export const Edit = () => {
-    return (
-        <svg className="hover:cursor-pointer hover:fill-primary-content h-8 w-8 sm:w-10 sm:h-10" width="39" height="38" viewBox="0 0 39 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <ellipse cx="19.7264" cy="19" rx="19.1812" ry="19" fill="#7139CE"/>
-        <path d="M21.2409 14.5L14.6066 21.0716L14.6066 21.0716C14.3919 21.2842 14.2846 21.3905 14.214 21.5215C14.1433 21.6525 14.1134 21.8005 14.0536 22.0967L13.313 25.7648C13.2459 26.0973 13.2123 26.2636 13.3067 26.3583C13.4012 26.4531 13.5675 26.4202 13.9003 26.3542L17.6214 25.6171C17.9147 25.559 18.0613 25.5299 18.1914 25.4608C18.3215 25.3917 18.4278 25.2865 18.6402 25.0761L18.6402 25.0761L25.279 18.5L21.2409 14.5Z" fill="white"/>
-        <path d="M21.9348 13.9679L14.652 21.182C14.64 21.1938 14.6281 21.2055 14.6163 21.2173C14.4551 21.3764 14.3002 21.5294 14.1907 21.7214C14.0811 21.9134 14.0281 22.1246 13.973 22.3442C13.9689 22.3604 13.9649 22.3766 13.9607 22.3929L13.2914 25.0452C13.2889 25.0548 13.2865 25.0645 13.284 25.0743C13.245 25.2283 13.201 25.4025 13.1861 25.5507C13.1696 25.7158 13.1704 26.015 13.4112 26.2569L13.8364 25.8336L13.4112 26.2569C13.6519 26.4987 13.9512 26.5008 14.1163 26.4851C14.2646 26.4709 14.439 26.4276 14.5931 26.3893C14.603 26.3869 14.6127 26.3845 14.6223 26.3821L17.3165 25.7149C17.3326 25.7109 17.3487 25.707 17.3647 25.703C17.5826 25.6494 17.792 25.5979 17.9829 25.4906C18.1738 25.3834 18.3268 25.2314 18.486 25.0733C18.4977 25.0617 18.5094 25.05 18.5212 25.0383L25.781 17.8472L25.8081 17.8203C26.1227 17.5088 26.4005 17.2336 26.5943 16.9818C26.8043 16.709 26.9722 16.3938 26.9722 16C26.9722 15.6062 26.8043 15.291 26.5943 15.0182C26.4005 14.7664 26.1227 14.4912 25.8081 14.1797L25.781 14.1528L25.5943 13.9679L25.5675 13.9414C25.2585 13.6352 24.9852 13.3645 24.7355 13.1757C24.4647 12.9708 24.1528 12.8075 23.7646 12.8075C23.3763 12.8075 23.0645 12.9708 22.7936 13.1757C22.5439 13.3645 22.2706 13.6352 21.9616 13.9414L21.9348 13.9679Z" stroke="white" strokeWidth="1.2"/>
-        <path d="M21.2407 14.5L25.2789 18.5" stroke="white" strokeWidth="1.2"/>
-        </svg>
-
-    )
-}
\ No newline at end of file
+  return (
+    <svg
+      className="hover:cursor-pointer hover:fill-primary-content h-8 w-8 sm:w-10 sm:h-10"
+      width="39"
+      height="38"
+      viewBox="0 0 39 38"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <ellipse cx="19.7264" cy="19" rx="19.1812" ry="19" fill="#7139CE" />
+      <path
+        d="M21.2409 14.5L14.6066 21.0716L14.6066 21.0716C14.3919 21.2842 14.2846 21.3905 14.214 21.5215C14.1433 21.6525 14.1134 21.8005 14.0536 22.0967L13.313 25.7648C13.2459 26.0973 13.2123 26.2636 13.3067 26.3583C13.4012 26.4531 13.5675 26.4202 13.9003 26.3542L17.6214 25.6171C17.9147 25.559 18.0613 25.5299 18.1914 25.4608C18.3215 25.3917 18.4278 25.2865 18.6402 25.0761L18.6402 25.0761L25.279 18.5L21.2409 14.5Z"
+        fill="white"
+      />
+      <path
+        d="M21.9348 13.9679L14.652 21.182C14.64 21.1938 14.6281 21.2055 14.6163 21.2173C14.4551 21.3764 14.3002 21.5294 14.1907 21.7214C14.0811 21.9134 14.0281 22.1246 13.973 22.3442C13.9689 22.3604 13.9649 22.3766 13.9607 22.3929L13.2914 25.0452C13.2889 25.0548 13.2865 25.0645 13.284 25.0743C13.245 25.2283 13.201 25.4025 13.1861 25.5507C13.1696 25.7158 13.1704 26.015 13.4112 26.2569L13.8364 25.8336L13.4112 26.2569C13.6519 26.4987 13.9512 26.5008 14.1163 26.4851C14.2646 26.4709 14.439 26.4276 14.5931 26.3893C14.603 26.3869 14.6127 26.3845 14.6223 26.3821L17.3165 25.7149C17.3326 25.7109 17.3487 25.707 17.3647 25.703C17.5826 25.6494 17.792 25.5979 17.9829 25.4906C18.1738 25.3834 18.3268 25.2314 18.486 25.0733C18.4977 25.0617 18.5094 25.05 18.5212 25.0383L25.781 17.8472L25.8081 17.8203C26.1227 17.5088 26.4005 17.2336 26.5943 16.9818C26.8043 16.709 26.9722 16.3938 26.9722 16C26.9722 15.6062 26.8043 15.291 26.5943 15.0182C26.4005 14.7664 26.1227 14.4912 25.8081 14.1797L25.781 14.1528L25.5943 13.9679L25.5675 13.9414C25.2585 13.6352 24.9852 13.3645 24.7355 13.1757C24.4647 12.9708 24.1528 12.8075 23.7646 12.8075C23.3763 12.8075 23.0645 12.9708 22.7936 13.1757C22.5439 13.3645 22.2706 13.6352 21.9616 13.9414L21.9348 13.9679Z"
+        stroke="white"
+        strokeWidth="1.2"
+      />
+      <path d="M21.2407 14.5L25.2789 18.5" stroke="white" strokeWidth="1.2" />
+    </svg>
+  );
+};
diff --git a/frontend/code/src/Components/Settings/assets/Inputs.tsx b/frontend/code/src/Components/Settings/assets/Inputs.tsx
index e568778..59374ff 100644
--- a/frontend/code/src/Components/Settings/assets/Inputs.tsx
+++ b/frontend/code/src/Components/Settings/assets/Inputs.tsx
@@ -40,33 +40,44 @@ export const Inputs = (props: InputsProps) => {
       {
         loading: "Saving...",
         success: <b>{props.name} saved</b>,
-        error: <b>could not save {this}</b>,
+        error: <b>could not save field</b>,
       },
       {
         className:
           "font-poppins font-bold relative top-[6vh] bg-base-100 text-white",
-      }
+      },
     );
     // Update field locally after a successful request
-    toastPromise.then(() => {
-      switch (props.name) {
-        case "First name":
-          user.updateFirstName(data[`${props.payload}`]);
-          break;
-        case "Last name":
-          user.updateLastName(data[`${props.payload}`]);
-          break;
-        case "Email":
-          user.updateEmail(data[`${props.payload}`]);
-          break;
-        case "Phone":
-          user.updatePhone(data[`${props.payload}`]);
-          break;
-        case "Bio":
-          user.updateBio(data[`${props.payload}`]);
-          break;
-      }
-    });
+    toastPromise
+      .then(() => {
+        switch (props.name) {
+          case "First name":
+            user.updateFirstName(data[`${props.payload}`]);
+            break;
+          case "Last name":
+            user.updateLastName(data[`${props.payload}`]);
+            break;
+          case "Email":
+            user.updateEmail(data[`${props.payload}`]);
+            break;
+          case "Phone":
+            user.updatePhone(data[`${props.payload}`]);
+            break;
+          case "Bio":
+            user.updateBio(data[`${props.payload}`]);
+            break;
+          case "Username":
+            user.updateUsername(data[`${props.payload}`]);
+            break;
+        }
+      })
+      .catch((error) => {
+        if ((error as any)?.response.data.message) {
+          toast.error((error as any)?.response.data.message);
+        } else {
+          toast.error("Invalid field");
+        }
+      });
   };
 
   const handleError = useCallback((errors: FieldErrors<FieldValues>) => {
@@ -113,7 +124,7 @@ export const Inputs = (props: InputsProps) => {
         <form
           className={classNames(
             "gap-y-2 p-2 flex justify-center items-center w-full",
-            props.className
+            props.className,
           )}
         >
           <div className="flex gap-x-2 w-full">
@@ -122,7 +133,7 @@ export const Inputs = (props: InputsProps) => {
                 type="email"
                 className={classNames(
                   "h-12 w-full rounded-3xl text-center",
-                  props.className
+                  props.className,
                 )}
                 defaultValue={props.data}
                 placeholder={props.payload}
@@ -142,7 +153,7 @@ export const Inputs = (props: InputsProps) => {
                 type="text"
                 className={classNames(
                   "h-12 w-full rounded-3xl text-center",
-                  props.className
+                  props.className,
                 )}
                 defaultValue={props.data}
                 placeholder={props.payload}
diff --git a/frontend/code/src/Components/Settings/index.tsx b/frontend/code/src/Components/Settings/index.tsx
index 7f7fc8e..c77a430 100644
--- a/frontend/code/src/Components/Settings/index.tsx
+++ b/frontend/code/src/Components/Settings/index.tsx
@@ -16,8 +16,14 @@ import googleAuthenticatorIcon from "../images/google-authenticator.svg";
 
 export const Setting = () => {
   const TOTPSecretKey = useMemo(
-    () => btoa(Math.random().toString(36)).substring(0, 16),
-    []
+    () =>
+      btoa(Math.random().toString(36) + Math.random().toString(36))
+        .toUpperCase()
+        .replace(/\+/g, "")
+        .replace(/\//g, "")
+        .replace(/=/g, "")
+        .substring(0, 16),
+    [],
   );
 
   const [TOTPCode, setTOTPCode] = useState("");
@@ -29,9 +35,21 @@ export const Setting = () => {
 
   const user = useUserStore();
   const [myuser, setMyuser] = useState(user);
-  const data_names = ["First name", "Last name", "Email", "Bio"];
-  const payload_objects = ["firstName", "lastName", "email", "discreption"];
-  const data_content = [user.name.first, user.name.last, user.email, user.bio];
+  const data_names = ["First name", "Last name", "Email", "Username", "Bio"];
+  const payload_objects = [
+    "firstName",
+    "lastName",
+    "email",
+    "Username",
+    "discreption",
+  ];
+  const data_content = [
+    user.name.first,
+    user.name.last,
+    user.email,
+    user.username,
+    user.bio,
+  ];
 
   useEffect(() => {
     setMyuser(user);
@@ -70,17 +88,29 @@ export const Setting = () => {
                   }}
                 ></div>
                 <img
-                  className={`h-[9vh] md:h-[12vh] xl:h-[14vh] ${myuser?.achievement !== null && myuser?.achievement >= 0   ? "":"opacity-30"}`}
+                  className={`h-[9vh] md:h-[12vh] xl:h-[14vh] ${
+                    myuser?.achievement !== null && myuser?.achievement >= 0
+                      ? ""
+                      : "opacity-30"
+                  }`}
                   src={Newbie}
                   alt="newbie badge"
                 />
                 <img
-                  className={`h-[9vh] md:h-[12vh] xl:h-[14vh] ${myuser?.achievement !== null && myuser?.achievement >= 1   ? "":"opacity-30"}`}
+                  className={`h-[9vh] md:h-[12vh] xl:h-[14vh] ${
+                    myuser?.achievement !== null && myuser?.achievement >= 1
+                      ? ""
+                      : "opacity-30"
+                  }`}
                   src={Master}
                   alt="Master badge"
                 />
                 <img
-                  className={`h-[9vh] md:h-[12vh] xl:h-[14vh] ${myuser?.achievement !== null && myuser?.achievement >= 2   ? "":"opacity-30"}`}
+                  className={`h-[9vh] md:h-[12vh] xl:h-[14vh] ${
+                    myuser?.achievement !== null && myuser?.achievement >= 2
+                      ? ""
+                      : "opacity-30"
+                  }`}
                   src={Ultimate}
                   alt="Ultimate badge"
                 />
@@ -134,7 +164,7 @@ export const Setting = () => {
                             <img
                               alt="no"
                               src={playStoreIcon}
-                              className="w-auto h-8 object-contains" 
+                              className="w-auto h-8 object-contains"
                             />
                           </div>
                         </div>
@@ -189,13 +219,12 @@ export const Setting = () => {
                                     otp: TOTPCode,
                                     secret: TOTPSecretKey,
                                     action: "enable",
-                                  }
+                                  },
                                 );
                                 user.toggleTfa();
                                 toast.success(response.data.message);
                               } catch (e: any) {
                                 toast.error(e.response.data.message);
-                                console.log(e.response.data.message);
                               }
                             }}
                           >
@@ -248,13 +277,12 @@ export const Setting = () => {
                                   {
                                     otp: TOTPCode,
                                     action: "disable",
-                                  }
+                                  },
                                 );
                                 user.toggleTfa();
                                 toast.success(response.data.message);
                               } catch (e: any) {
                                 toast.error(e.response.data.message);
-                                console.log(e.response.data.message);
                               }
                             }}
                           >
diff --git a/frontend/code/src/Components/Validate2Fa/index.tsx b/frontend/code/src/Components/Validate2Fa/index.tsx
index 9c4bccd..c4f4ce5 100644
--- a/frontend/code/src/Components/Validate2Fa/index.tsx
+++ b/frontend/code/src/Components/Validate2Fa/index.tsx
@@ -10,7 +10,6 @@ export const Validate2Fa = () => {
   const [TOTPCode, setTOTPCode] = useState("");
   const navigate = useNavigate();
 
-  console.log(`params : ${params.token} type ${typeof params.token}`);
   useEffect(() => {
     api
       .get(`/auth/validatToken/${params.token}`)
@@ -19,10 +18,11 @@ export const Validate2Fa = () => {
           navigate("/");
         } else setIsLoading(false);
       })
-      .catch((Err) => console.log(Err));
+      .catch(() => {});
 
-    //eslint-disable-next-line
+    // eslint-disable-next-line
   }, []);
+
   return (
     <div
       className={classNames(
@@ -70,7 +70,6 @@ export const Validate2Fa = () => {
                   navigate("/Home");
                 } catch (e: any) {
                   toast.error(e.response.data.message);
-                  console.log(e.response.data.message);
                 }
               }}
             >
diff --git a/frontend/code/src/Routes/index.tsx b/frontend/code/src/Routes/index.tsx
index f2debdd..b1d6800 100644
--- a/frontend/code/src/Routes/index.tsx
+++ b/frontend/code/src/Routes/index.tsx
@@ -16,7 +16,6 @@ const router = createBrowserRouter([
     children: [
       {
         path: "Home",
-        // loader : async () => { return await dataLoader()}, it was expermintal it's good for multi compononet fetching but not good for only one because in case of multi  fetch it launches fetch paraller and not waiting  each compononet to laod
         lazy: async () => {
           let { Home } = await import("../Components/Home");
           return { Component: Home };
@@ -37,7 +36,7 @@ const router = createBrowserRouter([
           return { Component: Setting };
         },
       },
-      
+
       {
         path: "Profile/:id",
         lazy: async () => {
@@ -55,17 +54,19 @@ const router = createBrowserRouter([
       {
         path: "Dm/:id",
         lazy: async () => {
-          let { UserToUserChat } = await import("../Components/Chat/Components/UserToUserChat");
+          let { UserToUserChat } = await import(
+            "../Components/Chat/Components/UserToUserChat"
+          );
           return { Component: UserToUserChat };
         },
       },
       {
         path: "Game/:id",
         lazy: async () => {
-          let { Game } = await import("../Components/Game")
-          return { Component: Game};
+          let { Game } = await import("../Components/Game");
+          return { Component: Game };
         },
-      }
+      },
     ],
   },
   {
diff --git a/frontend/code/src/Stores/stores.ts b/frontend/code/src/Stores/stores.ts
index 31dddfb..7d39696 100644
--- a/frontend/code/src/Stores/stores.ts
+++ b/frontend/code/src/Stores/stores.ts
@@ -7,6 +7,7 @@ export type State = {
   id: string;
   bio: string;
   phone: string;
+  username: string;
   name: {
     first: string;
     last: string;
@@ -63,6 +64,7 @@ type Action = {
   updateEmail: (email: State["email"]) => void;
   updatePhone: (phone: State["phone"]) => void;
   updateBio: (bio: State["bio"]) => void;
+  updateUsername: (username: State["username"]) => void;
   setAvatar: (picture: State["picture"]) => void;
   updateNotificationRead: (notificationId: string) => void;
   addNotification: (notification: any) => void;
@@ -80,6 +82,7 @@ export const useUserStore = createWithEqualityFn<State & Action>()(
       id: "",
       bio: "",
       phone: "",
+      username: "",
       name: {
         first: "",
         last: "",
@@ -172,20 +175,22 @@ export const useUserStore = createWithEqualityFn<State & Action>()(
       },
       updatePhone: (phone: State["phone"]) => set(() => ({ phone: phone })),
       updateBio: (bio: State["bio"]) => set(() => ({ bio: bio })),
+      updateUsername: (username: State["username"]) =>
+        set(() => ({ username: username })),
       setAvatar: (picture: State["picture"]) =>
         set(() => ({ picture: picture })),
       login: async () => {
         const res = await api.get("/profile/me");
         var user_data = res.data;
-        // user_data.picture= null
+
         const check = user_data.picture.large.split`/`;
         if (check[check.length - 1] === "null") user_data.picture = null;
         const userInitialValue: State = {
           isLogged: true,
           id: user_data.id,
           bio: user_data?.bio ?? "default bio",
-
           phone: user_data.cell,
+          username: user_data.username,
           name: {
             first: user_data.name.first,
             last: user_data.name.last,
@@ -201,7 +206,6 @@ export const useUserStore = createWithEqualityFn<State & Action>()(
               user_data?.picture?.large ??
               `https://ui-avatars.com/api/?name=${user_data.name.first}-${user_data.name.last}&background=7940CF&color=fff`,
           },
-
           email: user_data.email,
           tfa: user_data.tfa,
           friendListIds: [],
@@ -220,11 +224,7 @@ export const useUserStore = createWithEqualityFn<State & Action>()(
             gameId: "",
           },
         };
-        // console.log(userInitialValue)
-        const state = get();
-        const notifications = await state.fetchNotifications(0, 20);
-        console.log("notifications:", notifications);
-        set({ ...userInitialValue, notifications });
+        set({ ...userInitialValue });
         return userInitialValue.isLogged;
       },
       logout: () => {
@@ -234,6 +234,7 @@ export const useUserStore = createWithEqualityFn<State & Action>()(
             id: "",
             bio: "",
             phone: "",
+            username: "",
             name: {
               first: "",
               last: "",
@@ -264,9 +265,7 @@ export const useUserStore = createWithEqualityFn<State & Action>()(
 
       fetchNotifications: async (offset: number, limit: number) => {
         const response = await api
-          .get(`/profile/notifications/?offset=${offset}&limit=${limit}`, {
-            params: { offset, limit },
-          })
+          .get(`/profile/notifications?offset=${offset}&limit=${limit}`)
           .catch(() => ({ data: [] }));
 
         return response.data;
diff --git a/frontend/code/src/index.tsx b/frontend/code/src/index.tsx
index e86aa1f..6f37e59 100644
--- a/frontend/code/src/index.tsx
+++ b/frontend/code/src/index.tsx
@@ -4,11 +4,8 @@ import reportWebVitals from "./reportWebVitals";
 import { Toaster } from "react-hot-toast";
 import { AllRouters } from "./Routes";
 
-// console.log = () => {}
-// console.error = () => {}
-
 const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
+  document.getElementById("root") as HTMLElement,
 );
 
 root.render(
@@ -26,7 +23,7 @@ root.render(
       }}
     />
     <AllRouters />
-  </>
+  </>,
 );
 
 reportWebVitals();
diff --git a/frontend/code/src/reportWebVitals.ts b/frontend/code/src/reportWebVitals.ts
index 49a2a16..5fa3583 100644
--- a/frontend/code/src/reportWebVitals.ts
+++ b/frontend/code/src/reportWebVitals.ts
@@ -1,8 +1,8 @@
-import { ReportHandler } from 'web-vitals';
+import { ReportHandler } from "web-vitals";
 
 const reportWebVitals = (onPerfEntry?: ReportHandler) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);
       getFID(onPerfEntry);
       getFCP(onPerfEntry);
diff --git a/frontend/code/src/setupTests.ts b/frontend/code/src/setupTests.ts
deleted file mode 100644
index 8f2609b..0000000
--- a/frontend/code/src/setupTests.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
diff --git a/frontend/code/tailwind.config.js b/frontend/code/tailwind.config.js
index 2d033ba..84375cd 100644
--- a/frontend/code/tailwind.config.js
+++ b/frontend/code/tailwind.config.js
@@ -4,42 +4,35 @@ module.exports = {
     "./src/**/*.{js,jsx,ts,tsx}",
     "./src/**/**/*.{js,jsx,ts,tsx}",
     "./src/**/**/**/*.{js,jsx,ts,tsx}",
-
   ],
   theme: {
     extend: {
       animation: {
-        border: 'background ease infinite',
+        border: "background ease infinite",
       },
       keyframes: {
         background: {
-          '0%, 100%': { backgroundPosition: '0% 50%' },
-          '50%': { backgroundPosition: '100% 50%' },
+          "0%, 100%": { backgroundPosition: "0% 50%" },
+          "50%": { backgroundPosition: "100% 50%" },
         },
       },
       screens: {
-        '3xl': '1700px',
+        "3xl": "1700px",
       },
       fontFamily: {
-        poppins: ['Poppins', 'sans-serif'],
-        lexend: ['Lexend Peta', 'sans-serif'],
-        montserrat: ['Montserrat', 'sans-serif']
-
+        poppins: ["Poppins", "sans-serif"],
+        lexend: ["Lexend Peta", "sans-serif"],
+        montserrat: ["Montserrat", "sans-serif"],
       },
 
       backgroundImage: {
-        'login': "url('./Components/Login/Assets/bg.gif')",
-        'gif-error': "url('./Components/Error/Assets/Error.gif')",
-
+        login: "url('./Components/Login/Assets/bg.gif')",
+        "gif-error": "url('./Components/Error/Assets/Error.gif')",
       },
-
     },
   },
 
-  plugins: [
-    require("daisyui"),
-    require('preline/plugin'),
-  ],
+  plugins: [require("daisyui"), require("preline/plugin")],
   daisyui: {
     themes: [
       {
@@ -48,48 +41,45 @@ module.exports = {
 
           "base-200": "#272932",
 
-          "primary": "#7940CF",
+          primary: "#7940CF",
 
           "primary-content": "#5921CB",
 
-          "secondary": "#6A4CFC",
+          secondary: "#6A4CFC",
 
           "secondary-content": "#1A1C26",
 
-          "accent": "#1A1C26",
+          accent: "#1A1C26",
 
-          "neutral": "#FFFFFF",
+          neutral: "#FFFFFF",
 
-          "info": "#3e9cea",
+          info: "#3e9cea",
 
-          "success": "#1ba177",
+          success: "#1ba177",
 
-          "warning": "#99670f",
+          warning: "#99670f",
 
-          "error": "#e93f6f",
+          error: "#e93f6f",
         },
         secondtheme: {
-
-
           "base-100": "#2b2d50",
 
           "base-200": "#1d252f",
 
-          "primary": "#fcecb3",
+          primary: "#fcecb3",
 
           "primary-content": "#be8f04",
 
-          "secondary": "#4c95c9",
+          secondary: "#4c95c9",
 
           "secondary-content": "#79f289",
 
-          "accent": "#66ebd9",
+          accent: "#66ebd9",
 
-          "neutral": "#FFFFFF",
+          neutral: "#FFFFFF",
 
-          "error": "#e93535",
+          error: "#e93535",
         },
-
       },
       "light",
       "dark",
@@ -103,6 +93,6 @@ module.exports = {
     prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
     tailwindcss: {},
     autoprefixer: {},
-    cssnano: {}
+    cssnano: {},
   },
-}
\ No newline at end of file
+};
diff --git a/nginx/default.conf b/nginx/default.conf
index 17b3ab5..836eb5c 100644
--- a/nginx/default.conf
+++ b/nginx/default.conf
@@ -1,7 +1,7 @@
 server {
-  listen       80;
-  listen  [::]:80;
-  server_name  localhost;
+  listen 80;
+  listen [::]:80;
+
   gzip on;
   gzip_proxied any;
   gzip_comp_level 6;
@@ -10,42 +10,42 @@ server {
   gzip_types text/css application/javascript application/json application/font-woff application/font-tff image/gif image/png image/svg+xml application/octet-stream;
 
   location / {
-      try_files $uri /index.html;
+    try_files $uri /index.html;
 
-      root   /var/www/html/;
-      index  index.html index.htm;
+    root /var/www/html/;
+    index index.html index.htm;
   }
 
 }
+
 server {
-    listen      3001;
+  listen 3001;
+  listen [::]:3001;
 
-    server_name  localhost;
+  location / {
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header Host $host;
 
-    gzip on;
-  gzip_proxied any;
-  gzip_comp_level 6;
-  gzip_buffers 16 8k;
-  gzip_http_version 1.1;
-  gzip_types text/css application/javascript application/json application/font-woff application/font-tff image/gif image/png image/svg+xml application/octet-stream;
+    proxy_pass http://backend:3001;
 
-    location / {
-            
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header Host $host;
-            proxy_pass http://backend:3001/;
-            proxy_http_version 1.1;
-            proxy_set_header Upgrade $http_upgrade;
-            proxy_set_header Connection "upgrade";
-    }
-       location /socket.io/ {
-      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-      proxy_set_header Host $host;
-
-      proxy_pass http://backend:3004;
-
-      proxy_http_version 1.1;
-      proxy_set_header Upgrade $http_upgrade;
-      proxy_set_header Connection "upgrade";
-    }
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+  }
+}
+
+server {
+  listen 3004;
+  listen [::]:3004;
+
+  location / {
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header Host $host;
+
+    proxy_pass http://backend:3004;
+
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+  }
 }