diff --git a/backend/code/src/game/game.service.ts b/backend/code/src/game/game.service.ts
index c024947..70fe8ee 100644
--- a/backend/code/src/game/game.service.ts
+++ b/backend/code/src/game/game.service.ts
@@ -37,11 +37,21 @@ 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);
+        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)
diff --git a/backend/code/src/game/game.ts b/backend/code/src/game/game.ts
index 2b70461..3e2e50a 100644
--- a/backend/code/src/game/game.ts
+++ b/backend/code/src/game/game.ts
@@ -5,6 +5,8 @@ export class Game {
   constructor(
     private readonly eventEmitter: EventEmitter2,
     private readonly server: Server,
+    private readonly mode: string,
+
   ) {}
 
   private screenAdapter(player, x: number, y: number, ballsize: number) {
@@ -45,10 +47,12 @@ export class Game {
     // let scale_y = player2.h / this.h;
     // let center = this.paddleHeight * scale_y;
 
-    if (p2PaddleY - player2.h / 6 / 6 < 0) {
+    if (p2PaddleY - ((player2.h / 6) / 6) < 0) {
       p2PaddleY = 0;
-    } else if (p2PaddleY + player2.h / 6 > player2.h) {
-      p2PaddleY = player2.h - player2.h / 6;
+      this.p2PaddleY = 0;
+    } else if (p2PaddleY + (player2.h / 6) > player2.h) {
+      p2PaddleY = player2.h - (player2.h / 6);
+      this.p2PaddleY = this.h - (this.paddleHeight);
     }
     return { p1PaddleY: newPos, p2PaddleY: p2PaddleY, side: side };
   }
@@ -61,8 +65,8 @@ export class Game {
   ) {
     const scale = this.h / player2.h;
     if (
-      p2PaddleY * scale - this.paddleHeight / 6 >= 0 &&
-      p2PaddleY * scale + this.paddleHeight <= this.h
+      (p2PaddleY * scale) - (this.paddleHeight / 6) >= 0 &&
+     ( p2PaddleY * scale) + this.paddleHeight <= this.h
     )
       this.p2PaddleY = p2PaddleY * scale;
 
@@ -73,36 +77,38 @@ export class Game {
 
     // let center = this.paddleHeight * scale_y;
 
-    if (p1PaddleY - player1.h / 6 / 6 < 0) {
+    if (p1PaddleY - ((player1.h / 6) / 6) < 0) {
       p1PaddleY = 0;
-    } else if (p1PaddleY + player1.h / 6 > player1.h) {
-      p1PaddleY = player1.h - player1.h / 6;
+      this.p1PaddleY = 0;
+    } else if (p1PaddleY + (player1.h / 6) > player1.h) {
+      p1PaddleY = player1.h - (player1.h / 6);
+      this.p1PaddleY = this.h - this.paddleHeight;
     }
     return { p1PaddleY: p1PaddleY, p2PaddleY: newPos, side: side };
   }
   private up1() {
-    this.eventp1Paddle -= this.p1Res.h / 6 / 6;
-    if (this.eventp1Paddle - this.p1Res.h / 6 / 6 < 0) {
+    this.eventp1Paddle -=( (this.p1Res.h / 6) / 6);
+    if (this.eventp1Paddle - ((this.p1Res.h / 6) / 6) < 0) {
       this.eventp1Paddle = 0;
     }
   }
 
   private down1() {
-    this.eventp1Paddle += this.p1Res.h / 6 / 6;
+    this.eventp1Paddle += ((this.p1Res.h / 6 )/ 6);
     if (this.eventp1Paddle + this.p1Res.h / 6 > this.p1Res.h) {
-      this.eventp1Paddle = this.p1Res.h - this.p1Res.h / 6;
+      this.eventp1Paddle = this.p1Res.h - (this.p1Res.h / 6);
     }
   }
   private up2() {
-    this.eventp2Paddle -= this.p2Res.h / 6 / 6;
-    if (this.eventp2Paddle - this.p2Res.h / 6 / 6 < 0) {
+    this.eventp2Paddle -= ((this.p2Res.h / 6) / 6);
+    if (this.eventp2Paddle - ((this.p2Res.h / 6) / 6) < 0) {
       this.eventp2Paddle = 0;
     }
   }
 
   private down2() {
-    this.eventp2Paddle += this.p2Res.h / 6 / 6;
-    if (this.eventp2Paddle - this.p2Res.h / 6 / 6 < 0) {
+    this.eventp2Paddle += (this.p2Res.h / 6) / 6;
+    if (this.eventp2Paddle - (this.p2Res.h / 6) / 6 < 0) {
       this.eventp2Paddle = 0;
     }
   }
@@ -111,11 +117,11 @@ export class Game {
     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.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
@@ -129,20 +135,24 @@ export class Game {
     ) {
       this.dx *= -1;
       this.dy = Math.random() * (4 - 1.5) + 1.5;
+      if (Math.random() >= .5)
+        this.dy *= -1;  
     }
 
     if (
-      this.y > this.p1PaddleY &&
-      this.y < this.p1PaddleY + this.paddleHeight &&
-      this.x >= this.w - (this.paddleWidth + this.gap + this.ballSize / 2)
+      this.y > this.p2PaddleY &&
+      this.y < this.p2PaddleY + this.paddleHeight &&
+      this.x >= this.w - (this.gap + (this.ballSize / 2) + this.paddleWidth)
     ) {
       this.dx *= -1;
       this.dy = Math.random() * (4 - 1.5) + 1.5;
+      if (Math.random() >= .5)
+        this.dy *= -1;        
     }
     if (
       (this.y < this.p2PaddleY ||
         this.y > this.p2PaddleY + this.paddleHeight) &&
-      this.x + this.ballSize / 2 >= this.w - (this.paddleWidth + this.gap)
+      this.x + this.ballSize / 2 >= this.w 
     ) {
       console.log(`${this.p1PaddleY} ${this.x} ${this.y} ${this.ballSize}`);
       this.p1Score += 1;
@@ -153,7 +163,7 @@ export class Game {
     if (
       (this.y < this.p1PaddleY ||
         this.y > this.p1PaddleY + this.paddleHeight) &&
-      this.x - this.ballSize / 2 <= this.paddleWidth + this.gap
+      this.x - this.ballSize / 2 <= 0
     ) {
       console.log(`${this.p1PaddleY} ${this.x} ${this.y} ${this.ballSize}`);
       this.p2Score += 1;
@@ -261,10 +271,48 @@ export class Game {
     console.log(p2Data);
     this.server.emit('players', [p1Data, p2Data]);
     console.log('newfunc');
+  
+    if (this.mode === "extra")
+    {
+      let l = 1;
+      const custom = setInterval(() => {
+        let i = 0;
+        const inter = setInterval(() => {i++; if (i > 5) 
+        {
+          this.server.to(this.gameid).emit("t",(10 - i))
+          if (i === 10)
+            clearInterval(inter);
+          if (this.closeGame)
+            clearInterval(inter)
+        }
+      },1000)
+        this.server.to(this.gameid).emit("level",l)
+        l++;
+        if (this.closeGame)
+          clearInterval(custom)
+      },10000)
+      const inter = setInterval(() => {
+        if (this.closeGame)
+          clearInterval(inter)
+        if (this.ballSize -1 > 3)
+          this.ballSize -= 2;
+        else
+          clearInterval(inter);
+      }, 10000);
+      const speed = setInterval(() => {
+        if (this.closeGame)
+          clearInterval(speed)
+        if (this.frames >= 6)
+          this.frames -= 2;
+        else
+          clearInterval(speed)
+      }, 10000);
+    }
 
-    setInterval(() => {
-      this.frames -= 1;
-    }, 2000);
+    else {
+      this.frames = 16;
+    }
+ 
     this.p1socket.on('up', () => {
       this.up1();
     });
@@ -325,6 +373,9 @@ export class Game {
   private emitGameEnd(message: string) {
     console.log('game end');
     this.closeGame = true;
+    this.p1socket.removeAllListeners()
+    this.p2socket.removeAllListeners()
+
     if (message === 'p1Leave') {
       this.eventEmitter.emit('game.end', {
         resign: 1,
@@ -373,7 +424,10 @@ export class Game {
     this.dy = Math.random() > 0.5 ? this.w / 220 : (this.w / 220) * -1;
     this.p1PaddleY = this.h / 2;
     this.p2PaddleY = this.h / 2;
-    this.frames = 25;
+    if (this.m === "classic")
+      this.frames = 16;
+    else
+      this.frames = 25;
   }
   private gameid: string;
   private p1socket: Socket;
@@ -387,7 +441,7 @@ export class Game {
   private y: number = this.h / 2;
   private gap: number = this.w / 100;
   private ballSize: number = this.w / 42;
-
+  private m: string = "classic"
   private dx: number = Math.random() > 0.5 ? this.w / 220 : (this.w / 220) * -1;
   private dy: number = Math.random() > 0.5 ? this.w / 220 : (this.w / 220) * -1;
   private p1PaddleY: number = this.h / 2;
diff --git a/backend/code/src/gateways/gateways.gateway.ts b/backend/code/src/gateways/gateways.gateway.ts
index 9d5f394..6dab9cd 100644
--- a/backend/code/src/gateways/gateways.gateway.ts
+++ b/backend/code/src/gateways/gateways.gateway.ts
@@ -338,14 +338,14 @@ export class Gateways implements OnGatewayConnection, OnGatewayDisconnect {
   }
 
   @OnEvent('game.launched')
-  async handleGameLaunchedEvent(clients: any) {
+  async handleGameLaunchedEvent(clients: any , mode:string) {
     const game_channel = crypto.randomBytes(16).toString('hex');
-    console.log(game_channel);
+    // console.log(game_channel);
     clients.forEach((client: any) => {
       client.socket.join(game_channel);
       client.socket.data.user.inGame = true;
     });
-    const new_game = new Game(this.eventEmitter, this.server);
+    const new_game = new Game(this.eventEmitter, this.server , mode);
 
     new_game.setplayerScokets(
       clients[0].socket,
@@ -360,12 +360,13 @@ 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);
-    const sockets = await this.server.in(data.gameid).fetchSockets();
-
+    
     for await (const socket of sockets) {
       socket.data.user.inGame = false;
     }
@@ -404,7 +405,6 @@ export class Gateways implements OnGatewayConnection, OnGatewayDisconnect {
       });
     }
 
-    this.games_map.delete(data.gameid);
   }
 
   @SubscribeMessage('joinRoom')
diff --git a/backend/code/src/main.ts b/backend/code/src/main.ts
index cda0fda..9175e0a 100644
--- a/backend/code/src/main.ts
+++ b/backend/code/src/main.ts
@@ -16,6 +16,7 @@ async function bootstrap() {
   const corsOptions = {
     origin: [
       'http://localhost:9000',
+      'http://localhost:8000',
       'http://localhost:3000',
       'http://142.93.161.63',
       'http://164.92.243.105',
diff --git a/docker-compose.yaml b/docker-compose.yaml
index db2a003..a24d0ac 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -46,7 +46,7 @@ services :
     depends_on:
       - backend
     ports:
-      - 80:80
+      - 8000:80
     init: true
     restart: always
    
diff --git a/frontend/code/src/Components/Game/index.tsx b/frontend/code/src/Components/Game/index.tsx
index 8f48096..fdfa3d0 100644
--- a/frontend/code/src/Components/Game/index.tsx
+++ b/frontend/code/src/Components/Game/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "react"
+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";
@@ -38,6 +38,8 @@ function throttlify(callback : any) {
 export const Game = () => {
     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")
@@ -55,6 +57,9 @@ export const Game = () => {
       socketStore.socket.off("down");
     }
     useEffect(() => {
+      socketStore.socket.on("level", (l:number) => {setLevel(l)})
+      socketStore.socket.on("t", (t:number) => {setT(t)})
+
       document.addEventListener('keydown', (event) =>{
         if (event.key === "ArrowUp")
           socketStore.socket.emit("up");
@@ -72,7 +77,7 @@ export const Game = () => {
         })
         socketStore.socket.on("screen Error", () =>{
           console.log("you lose")
-          navigate("/home", { replace: true })
+          navigate("/home")
         })
         socketStore.socket.on("players", (players:any) => {
           gameState.setP1(players[0]);
@@ -84,6 +89,9 @@ export const Game = () => {
           socketStore.socket.off("down");
           socketStore.socket.off("up");
           socketStore.socket.off("leave")
+          socketStore.socket.off("level")
+          socketStore.socket.off("t")
+
           window.removeEventListener("keydown",()=>{});
 
          }
@@ -92,7 +100,7 @@ export const Game = () => {
     /* eslint-disable */
     useEffect(() => {
       if (!gameState.p1)
-        navigate("/home", { replace: true })
+        navigate("/home")
       const divh = document.getElementById('Game')?.offsetHeight
       const divw = document.getElementById('Game')?.offsetWidth
       socketStore.socket.emit("screen",{h:divh,w:divw})
@@ -146,6 +154,10 @@ export const Game = () => {
             <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>
+
+          </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 >
diff --git a/frontend/code/src/Components/Play/index.tsx b/frontend/code/src/Components/Play/index.tsx
index e79ee4e..96fd1c1 100644
--- a/frontend/code/src/Components/Play/index.tsx
+++ b/frontend/code/src/Components/Play/index.tsx
@@ -7,7 +7,19 @@ export const Play = () => {
     const subscribeToGame = async() => {
         // socketStore.socket.emit
         try {
-            socketStore.socket.emit("startGame");
+            socketStore.socket.emit("startGame",{gameMode:"cassic"});
+            toast.success("Match making in Progress you can move until find opponent"
+            ,{
+                duration:5000
+            })
+        } catch (error) {
+            toast.error("can not start game")          
+        }
+    }
+    const subscribeToGameExtra = async() => {
+        // socketStore.socket.emit
+        try {
+            socketStore.socket.emit("startGame",{gameMode:"extra"});
             toast.success("Match making in Progress you can move until find opponent"
             ,{
                 duration:5000
@@ -21,7 +33,7 @@ export const Play = () => {
             <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 onClick={subscribeToGame} className='max-w-[55vw] max-h-[55vh]  w-[100%]'><img src={vsUser} alt="" /></div>
            
-            <div onClick={subscribeToGame} className='max-w-[55vw] max-h-[55vh]  w-[100%]'><img src={VsBot} alt="" /></div>
+            <div onClick={subscribeToGameExtra} className='max-w-[55vw] max-h-[55vh]  w-[100%]'><img src={VsBot} alt="" /></div>
            </div>
         </>
     )
diff --git a/frontend/code/src/Components/Profile/assets/Table.tsx b/frontend/code/src/Components/Profile/assets/Table.tsx
index d73ac6d..6f29715 100644
--- a/frontend/code/src/Components/Profile/assets/Table.tsx
+++ b/frontend/code/src/Components/Profile/assets/Table.tsx
@@ -7,20 +7,43 @@ import { NullPlaceHolder } from "../../Chat/Components/RoomChatHelpers";
 import api from "../../../Api/base";
 import toast from "react-hot-toast";
 import { formatTime } from "../../Chat/Components/tools/utils";
-const getColor = (v1: number, v2: number) => {
-  if (v1 > v2) return "text-lime-400";
-  if (v1 < v2) return "text-red-400";
+import { useParams } from "react-router-dom";
+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";
+  if (v1.score < v2.score && id !== v2.id) return "text-red-400";
   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 "
+  }
+  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 fetchData = async () => {
     try {
       const history: any = await api.get(`/game/history/${props.props.props}`, {
@@ -130,15 +153,13 @@ export const Table = (props: any) => {
                   <td className="flex px-1 grow-0 justify-end items-center gap-x-1  w-auto pr-1">
                     <div
                       className={`w-18 ${getColor(
-                        x.match.Player1.score,
-                        x.match.Player2.score
+                        x.match.Player1,
+                        x.match.Player2,
+                        id
                       )}`}
                     >
                       {" "}
-                      {x.match.Player1.score > x.match.Player2.score &&
-                        "+ 1"}{" "}
-                      {x.match.Player1.score < x.match.Player2.score && "- 1"}
-                      {x.match.Player1.score === x.match.Player2.score && "0"}
+                      {scoreHandler(x,id)}
                     </div>
                   </td>
                 </tr>
diff --git a/frontend/code/src/Routes/index.tsx b/frontend/code/src/Routes/index.tsx
index b0059a3..f2debdd 100644
--- a/frontend/code/src/Routes/index.tsx
+++ b/frontend/code/src/Routes/index.tsx
@@ -37,13 +37,7 @@ const router = createBrowserRouter([
           return { Component: Setting };
         },
       },
-      {
-        path: "FirstLogin",
-        lazy: async () => {
-          let { FirstLogin } = await import("../Components/FirstLogin");
-          return { Component: FirstLogin };
-        },
-      },
+      
       {
         path: "Profile/:id",
         lazy: async () => {