diff --git a/.vscode/launch.json b/.vscode/launch.json
index 5c15c955679a00814ba5e523888d8a65bfc3f289..1ba564c1e4ef35957b96a20aa16cacce802183db 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -9,8 +9,10 @@
             "type": "node",
             "request": "launch",
             "cwd": "${workspaceFolder}",
-            "runtimeExecutable": "npm",
-            "runtimeArgs": ["run-script", "dev"],
+            "program": "./server/src/index.ts",
+			"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/nodemon",
+			"args": ["--ignore","./client"],
+			"restart": true,
 			"env": {
 				"PORT": "8000"
 			},
diff --git a/.vscode/settings.json b/.vscode/settings.json
index a3e66dc4ad04be7ab98a6dd44e6f129490022680..8d01ca46bffe1545ce3bd4b1606569f8e266433e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,6 +7,7 @@
 	"[typescript]": {
 		"editor.formatOnSave": true,
 		"editor.defaultFormatter": "esbenp.prettier-vscode",
+		"javascript.preferences.importModuleSpecifierEnding": "minimal",
 	}
 	
 }
\ No newline at end of file
diff --git a/client/src/Router.ts b/client/src/Router.ts
index 4de46e7134362f4b1f1b99ebcf0668663146242f..e8ed3d39d030758ab7a75175c958256faf56433b 100644
--- a/client/src/Router.ts
+++ b/client/src/Router.ts
@@ -1,16 +1,21 @@
+interface Route {
+  path: string;
+  page: string;
+}
 export default class Router {
-  routes: Object[];
-  actualRoute: Text;
+  routes: Route[];
+  actualRoute: string;
   constructor(routes) {
     this.routes = routes;
     this.actualRoute = routes[0].page;
   }
   ChangePages(path) {
     for (let i = 0; i < this.routes.length; i++) {
-      if (this.routes[i].path === path) {
-        document.querySelector(`.${this.actualRoute}`).style.display = "none";
+      let actual = document.querySelector(`.${this.actualRoute}`);
+      if (this.routes[i].path === path && actual) {
+        actual.setAttribute("style", "display:none");
         this.actualRoute = this.routes[i].page;
-        document.querySelector(`.${this.actualRoute}`).style.display = "flex";
+        actual.setAttribute("style", "display:flex");
       }
     }
   }
diff --git a/client/src/index.js b/client/src/index.js
deleted file mode 100644
index c81550acb95c08e13da5c0335973e670020992c4..0000000000000000000000000000000000000000
--- a/client/src/index.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import Main from "./main.js";
-import Router from "./Router.js";
-
-/* Navigation */
-
-const routes = [
-  { path: "/", page: "home" },
-  { path: "/play", page: "play" },
-  { path: "/map", page: "map" },
-];
-let router = new Router(routes);
-
-const links = document.querySelectorAll("a");
-for (let i = 0; i < links.length; i++) {
-  links[i].addEventListener("click", (e) => {
-    e.preventDefault();
-    router.ChangePages(e.currentTarget.getAttribute("href"));
-  });
-}
-
-const inputName = document.querySelector(".name");
-const slides = document.querySelectorAll(".slide");
-
-let playerCharacter = "goku";
-let playerName = "";
-
-inputName.addEventListener("input", (e) => {
-  e.preventDefault();
-  playerName = e.currentTarget.value;
-});
-
-for (let i = 0; i < slides.length; i++) {
-  slides[i].addEventListener("click", (e) => {
-    playerCharacter = e.currentTarget.getAttribute("name");
-    console.log(playerCharacter);
-  });
-}
-
-const startButton = document.querySelector(".start-button");
-
-startButton.addEventListener("click", (e) => {
-  e.preventDefault();
-  if (playerName.length > 0) {
-    router.ChangePages("/map");
-    Main(playerName, playerCharacter);
-  }
-});
diff --git a/client/src/index.ts b/client/src/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8bb5b8f45c43288946db9b86bea5828a4caf62ee
--- /dev/null
+++ b/client/src/index.ts
@@ -0,0 +1,54 @@
+import Main from "./main";
+import Router from "./Router";
+
+/* Navigation */
+
+const routes = [
+  { path: "/", page: "home" },
+  { path: "/play", page: "play" },
+  { path: "/map", page: "map" },
+];
+let router = new Router(routes);
+
+const links = document.querySelectorAll("a");
+for (let i = 0; i < links.length; i++) {
+  links[i].addEventListener("click", (e) => {
+    e.preventDefault();
+    let target = e.currentTarget as HTMLElement;
+    if (target) {
+      router.ChangePages(target.getAttribute("href"));
+    }
+  });
+}
+
+const inputName = document.querySelector(".name");
+const slides = document.querySelectorAll(".slide");
+
+let playerCharacter: string | null = "goku";
+let playerName = "";
+
+if (inputName)
+  inputName.addEventListener("input", (e) => {
+    e.preventDefault();
+    const target = e.currentTarget as HTMLInputElement;
+    playerName = target.value;
+  });
+
+for (let i = 0; i < slides.length; i++) {
+  slides[i].addEventListener("click", (e) => {
+    let player = e.currentTarget as HTMLElement;
+    playerCharacter = player.getAttribute("name");
+    console.log(playerCharacter);
+  });
+}
+
+const startButton = document.querySelector(".start-button");
+
+if (startButton)
+  startButton.addEventListener("click", (e) => {
+    e.preventDefault();
+    if (playerName.length > 0) {
+      router.ChangePages("/map");
+      Main(playerName, playerCharacter);
+    }
+  });
diff --git a/client/src/main.ts b/client/src/main.ts
index b15e9cffb1c3b6536ec3a112cbe972b6b5519972..5e41021bf9f176f6805a8b72066ee3508cc1cbd2 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -1,6 +1,6 @@
-import Player from "./Player.js";
-import Router from "./Router.js";
-import { Sushi } from "./Ressources.js";
+import Player from "./Player";
+import Router from "./Router";
+import { Sushi } from "./Ressources";
 import { io } from "socket.io-client";
 
 const Main = (playerName, playerCharacter) => {
@@ -9,21 +9,21 @@ const Main = (playerName, playerCharacter) => {
 
   canvas.width = document.documentElement.clientWidth;
   canvas.height = document.documentElement.clientHeight;
-  ctx.width = 6000;
-  ctx.height = 3340;
+  const ctxWidth: number = 6000;
+  const ctxHeight: number = 3340;
   let xStart = canvas.width / 2;
-  let xEnd = ctx.width - canvas.width / 2;
+  let xEnd = ctxWidth - canvas.width / 2;
   let yStart = canvas.height / 2;
-  let yEnd = ctx.height - canvas.height / 2;
+  let yEnd = ctxHeight - canvas.height / 2;
 
   window.addEventListener("resize", (e) => {
     e.preventDefault();
     canvas.width = document.documentElement.clientWidth;
     canvas.height = document.documentElement.clientHeight;
     xStart = canvas.width / 2;
-    xEnd = ctx.width - canvas.width / 2;
+    xEnd = ctxWidth - canvas.width / 2;
     yStart = canvas.height / 2;
-    yEnd = ctx.height - canvas.height / 2;
+    yEnd = ctxHeight - canvas.height / 2;
   });
 
   const backgroundImage = new Image();
@@ -161,7 +161,7 @@ const Main = (playerName, playerCharacter) => {
 
   const socket = io();
 
-  let sushis = [];
+  let sushis: Sushi[] = [];
   socket.on("sushis", (data) => {
     for (let i = 0; i < data?.length; i++) {
       const sushi = new Sushi(
@@ -199,7 +199,7 @@ const Main = (playerName, playerCharacter) => {
       );
 
       socket.emit("newUser", player);
-      let allUsers = [];
+      let allUsers: Player[] = [];
       socket.on("allUsers", (data) => {
         allUsers = data.users;
         if (player) {
@@ -240,12 +240,12 @@ const Main = (playerName, playerCharacter) => {
 
       function update() {
         ctx.save();
-        ctx.clearRect(0, 0, ctx.width, ctx.height);
+        ctx.clearRect(0, 0, ctxWidth, ctxHeight);
         ctx.beginPath();
         const cameraX = canvas.width / 2 - player.x;
         const cameraY = canvas.height / 2 - player.y;
         ctx.translate(cameraX, cameraY);
-        ctx.drawImage(backgroundImage, 0, 0, ctx.width, ctx.height);
+        ctx.drawImage(backgroundImage, 0, 0, ctxWidth, ctxHeight);
 
         sushis.forEach((sushi) => {
           sushi.draw(ctx);
diff --git a/package-lock.json b/package-lock.json
index 2816f7d114ef3dd43bbd8b65083a946d75e9417b..3d0c8537704b90823db52b080b6140b577e4cb00 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
                 "nodemon": "^2.0.22",
                 "prettier": "^2.8.3",
                 "ts-jest": "^29.1.0",
+                "ts-loader": "^9.4.2",
                 "ts-node": "^10.9.1",
                 "typescript": "^5.0.4",
                 "webpack": "^5.78.0",
@@ -9021,6 +9022,128 @@
             "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
             "dev": true
         },
+        "node_modules/ts-loader": {
+            "version": "9.4.2",
+            "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.4.2.tgz",
+            "integrity": "sha512-OmlC4WVmFv5I0PpaxYb+qGeGOdm5giHU7HwDDUjw59emP2UYMHy9fFSDcYgSNoH8sXcj4hGCSEhlDZ9ULeDraA==",
+            "dev": true,
+            "dependencies": {
+                "chalk": "^4.1.0",
+                "enhanced-resolve": "^5.0.0",
+                "micromatch": "^4.0.0",
+                "semver": "^7.3.4"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "peerDependencies": {
+                "typescript": "*",
+                "webpack": "^5.0.0"
+            }
+        },
+        "node_modules/ts-loader/node_modules/ansi-styles": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+            "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+            "dev": true,
+            "dependencies": {
+                "color-convert": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/ts-loader/node_modules/chalk": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+            "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+            "dev": true,
+            "dependencies": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/chalk?sponsor=1"
+            }
+        },
+        "node_modules/ts-loader/node_modules/color-convert": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+            "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+            "dev": true,
+            "dependencies": {
+                "color-name": "~1.1.4"
+            },
+            "engines": {
+                "node": ">=7.0.0"
+            }
+        },
+        "node_modules/ts-loader/node_modules/color-name": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+            "dev": true
+        },
+        "node_modules/ts-loader/node_modules/has-flag": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+            "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/ts-loader/node_modules/lru-cache": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+            "dev": true,
+            "dependencies": {
+                "yallist": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/ts-loader/node_modules/semver": {
+            "version": "7.4.0",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.4.0.tgz",
+            "integrity": "sha512-RgOxM8Mw+7Zus0+zcLEUn8+JfoLpj/huFTItQy2hsM4khuC1HYRDp0cU482Ewn/Fcy6bCjufD8vAj7voC66KQw==",
+            "dev": true,
+            "dependencies": {
+                "lru-cache": "^6.0.0"
+            },
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/ts-loader/node_modules/supports-color": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+            "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+            "dev": true,
+            "dependencies": {
+                "has-flag": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/ts-loader/node_modules/yallist": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+            "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+            "dev": true
+        },
         "node_modules/ts-node": {
             "version": "10.9.1",
             "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
diff --git a/package.json b/package.json
index fc0fea2ae2e4fe3a68178f401fcc7afd0bdbd7ca..705f1beee4efedbfb23efea1bcb8fd55e86a4699 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,9 @@
     "main": "server/index.js",
     "type": "module",
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1",
         "build": "webpack --mode=production",
         "build:server": "tsc",
+        "watch:server": "tsc --watch",
         "watch": "webpack --mode=development --watch",
         "start": "node .",
         "dev": "nodemon server/index.js",
@@ -28,6 +28,7 @@
         "nodemon": "^2.0.22",
         "prettier": "^2.8.3",
         "ts-jest": "^29.1.0",
+        "ts-loader": "^9.4.2",
         "ts-node": "^10.9.1",
         "typescript": "^5.0.4",
         "webpack": "^5.78.0",
diff --git a/tsconfig.client.json b/tsconfig.client.json
new file mode 100644
index 0000000000000000000000000000000000000000..083b9e2b6899f7b3ce1ce3d86e13563839d9381a
--- /dev/null
+++ b/tsconfig.client.json
@@ -0,0 +1,12 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"rootDir": "client/src",
+		"outDir": "client/public/build/",
+		"target": "ES5",
+		"module": "ES2022",
+		"sourceMap": false,
+		"noEmitOnError": false,
+	},
+	"exclude": ["./node_modules", "./server", "./client/public/build", "webpack.config.js", "jest.config.cjs"],
+}
diff --git a/webpack.config.js b/webpack.config.js
index 406671449465d4e65e72d1f6e0e9259608dd8bfe..b13bef5296fc2dee540b05affde29e141e373500 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,8 +3,8 @@ import path from "path";
 export default {
   // Fichier d'entrée :
   entry: {
-    index: "./client/src/index.js",
-    main: "./client/src/main.js",
+    index: "./client/src/index.ts",
+    main: "./client/src/main.ts",
   },
   // Fichier de sortie :
   output: {
@@ -18,11 +18,14 @@ export default {
   module: {
     rules: [
       {
-        test: /.js$/, // tous les fichiers js ...
+        test: /\.(ts|js)$/, // tous les fichiers js ou ts ...
         exclude: /node_modules/, // ... sauf le dossier node_modules ...
         use: {
-          // ... seront compilés par babel !
-          loader: "babel-loader",
+          // ... seront compilés par tsc !
+          loader: "ts-loader",
+          options: {
+            configFile: "tsconfig.client.json",
+          },
         },
       },
     ],