diff --git a/client/public/build/main.bundle.js b/client/public/build/main.bundle.js
index ea9b2b3f27ac19fde2a242d9ceee658ecf5a255f..93eeb9b804da0b9a2432c09aef173ec0dedc4caa 100644
--- a/client/public/build/main.bundle.js
+++ b/client/public/build/main.bundle.js
@@ -29,34 +29,38 @@ var Player = /*#__PURE__*/function () {
   }
   _createClass(Player, [{
     key: "draw",
-    value: function draw(ctx) {
+    value: function draw(ctx, image) {
       // Dessiner le cercle
       ctx.beginPath();
+      ctx.drawImage(image, this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2);
       ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
-      ctx.fillStyle = "blue";
-      ctx.fill();
       ctx.strokeStyle = "black";
       ctx.stroke();
     }
   }, {
     key: "move",
-    value: function move(canvas) {
+    value: function move(ctx) {
       // Déplacer le cercle en fonction de la direction
       this.x += this.direction.x * this.speed;
       this.y += this.direction.y * this.speed;
-      if (this.x < this.radius) {
-        this.x = this.radius;
+      if (this.x < this.radius) this.x = this.radius;
+      if (this.y < this.radius) this.y = this.radius;
+      if (this.x > ctx.width - this.radius) {
+        this.x = ctx.width - this.radius;
       }
-      if (this.y < this.radius) {
-        this.y = this.radius;
-      }
-      if (this.x > canvas.width - this.radius) {
-        this.x = canvas.width - this.radius;
-      }
-      if (this.y > canvas.height - this.radius) {
-        this.y = canvas.height - this.radius;
+      if (this.y > ctx.height - this.radius) {
+        this.y = ctx.height - this.radius;
       }
     }
+  }, {
+    key: "moveTo",
+    value: function moveTo(x, y) {
+      var directionX = x - this.x;
+      var directionY = y - this.y;
+      var distance = Math.sqrt(Math.pow(directionX, 2) + Math.pow(directionY, 2));
+      this.direction.x = directionX / distance;
+      this.direction.y = directionY / distance;
+    }
   }]);
   return Player;
 }();
@@ -114,14 +118,22 @@ __webpack_require__.r(__webpack_exports__);
 
 var canvas = document.querySelector(".map");
 var ctx = canvas.getContext("2d");
-var backgroundImage = new Image();
-backgroundImage.src = "/images/map.png";
-backgroundImage.addEventListener("load", function (event) {
-  ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
+canvas.width = 500;
+canvas.height = 500;
+
+/*
+window.addEventListener("resize", (e) => {
+  e.preventDefault();
+  canvas.width = document.documentElement.clientWidth;
+  canvas.height = document.documentElement.clientHeight;
 });
-var player = new _Player_js__WEBPACK_IMPORTED_MODULE_0__["default"](0, 0, 60);
-player.draw(ctx);
-console.log(player);
+*/
+
+ctx.width = canvas.width;
+ctx.height = canvas.height;
+var player = new _Player_js__WEBPACK_IMPORTED_MODULE_0__["default"](canvas.width / 2, canvas.height / 2, 100);
+var image = new Image();
+image.src = "/images/goku.png";
 document.addEventListener("keydown", function (event) {
   event.preventDefault();
   // Mettre à jour la direction en fonction des touches enfoncées
@@ -174,13 +186,17 @@ document.addEventListener("keyup", function (event) {
       break;
   }
 });
+canvas.addEventListener("mousemove", function (event) {
+  var mouseX = event.offsetX;
+  var mouseY = event.offsetY;
+  player.moveTo(mouseX, mouseY);
+});
 function update() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
   // Déplacer le joueur en fonction de la direction
-  player.move(canvas);
-
+  player.move(ctx);
   // Dessiner le joueur et les autres éléments du jeu
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  player.draw(ctx);
+  player.draw(ctx, image);
   requestAnimationFrame(update);
 }
 update();
diff --git a/client/public/build/main.bundle.js.map b/client/public/build/main.bundle.js.map
index 27904c2f41b80fb8faa494ce0d8e8c1e5402cb11..8104ec2d32e8028814d8f1caadbd85f1d2f555fd 100644
--- a/client/public/build/main.bundle.js.map
+++ b/client/public/build/main.bundle.js.map
@@ -1 +1 @@
-{"version":3,"file":"main.bundle.js","mappings":"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","sources":["webpack://sae-2023-groupei-lasoa-gomis/./client/src/Player.js","webpack://sae-2023-groupei-lasoa-gomis/webpack/bootstrap","webpack://sae-2023-groupei-lasoa-gomis/webpack/runtime/make namespace object","webpack://sae-2023-groupei-lasoa-gomis/./client/src/main.js"],"sourcesContent":["class Player {\r\n  constructor(x, y, radius) {\r\n    this.x = x;\r\n    this.y = y;\r\n    this.radius = radius;\r\n    this.speed = 4;\r\n    this.direction = {\r\n      x: 0,\r\n      y: 0,\r\n    };\r\n  }\r\n\r\n  draw(ctx) {\r\n    // Dessiner le cercle\r\n    ctx.beginPath();\r\n    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);\r\n    ctx.fillStyle = \"blue\";\r\n    ctx.fill();\r\n    ctx.strokeStyle = \"black\";\r\n    ctx.stroke();\r\n  }\r\n\r\n  move(canvas) {\r\n    // Déplacer le cercle en fonction de la direction\r\n    this.x += this.direction.x * this.speed;\r\n    this.y += this.direction.y * this.speed;\r\n    if (this.x < this.radius) {\r\n      this.x = this.radius;\r\n    }\r\n    if (this.y < this.radius) {\r\n      this.y = this.radius;\r\n    }\r\n    if (this.x > canvas.width - this.radius) {\r\n      this.x = canvas.width - this.radius;\r\n    }\r\n    if (this.y > canvas.height - this.radius) {\r\n      this.y = canvas.height - this.radius;\r\n    }\r\n  }\r\n}\r\n\r\nexport default Player;\r\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import Player from \"./Player.js\";\r\n\r\nconst canvas = document.querySelector(\".map\");\r\nconst ctx = canvas.getContext(\"2d\");\r\n\r\nconst backgroundImage = new Image();\r\nbackgroundImage.src = \"/images/map.png\";\r\nbackgroundImage.addEventListener(\"load\", (event) => {\r\n  ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);\r\n});\r\n\r\nconst player = new Player(0, 0, 60);\r\nplayer.draw(ctx);\r\n\r\nconsole.log(player);\r\n\r\ndocument.addEventListener(\"keydown\", (event) => {\r\n  event.preventDefault();\r\n  // Mettre à jour la direction en fonction des touches enfoncées\r\n  switch (event.keyCode) {\r\n    case 37: // Gauche\r\n      player.direction.x = -1;\r\n      break;\r\n    case 38: // Haut\r\n      player.direction.y = -1;\r\n      break;\r\n    case 39: // Droite\r\n      player.direction.x = 1;\r\n      break;\r\n    case 40: // Bas\r\n      player.direction.y = 1;\r\n      break;\r\n  }\r\n});\r\n\r\ndocument.addEventListener(\"keyup\", (event) => {\r\n  event.preventDefault();\r\n  // Mettre à jour la direction en fonction des touches relâchées\r\n  switch (event.keyCode) {\r\n    case 37: // Gauche\r\n      if (player.direction.x < 0) {\r\n        player.direction.x = 0;\r\n      }\r\n      break;\r\n    case 38: // Haut\r\n      if (player.direction.y < 0) {\r\n        player.direction.y = 0;\r\n      }\r\n      break;\r\n    case 39: // Droite\r\n      if (player.direction.x > 0) {\r\n        player.direction.x = 0;\r\n      }\r\n      break;\r\n    case 40: // Bas\r\n      if (player.direction.y > 0) {\r\n        player.direction.y = 0;\r\n      }\r\n      break;\r\n  }\r\n});\r\n\r\nfunction update() {\r\n  // Déplacer le joueur en fonction de la direction\r\n  player.move(canvas);\r\n\r\n  // Dessiner le joueur et les autres éléments du jeu\r\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n  player.draw(ctx);\r\n\r\n  requestAnimationFrame(update);\r\n}\r\n\r\nupdate();\r\n"],"names":["Player","x","y","radius","_classCallCheck","speed","direction","_createClass","key","value","draw","ctx","beginPath","arc","Math","PI","fillStyle","fill","strokeStyle","stroke","move","canvas","width","height","document","querySelector","getContext","backgroundImage","Image","src","addEventListener","event","drawImage","player","console","log","preventDefault","keyCode","update","clearRect","requestAnimationFrame"],"sourceRoot":""}
\ No newline at end of file
+{"version":3,"file":"main.bundle.js","mappings":"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","sources":["webpack://sae-2023-groupei-lasoa-gomis/./client/src/Player.js","webpack://sae-2023-groupei-lasoa-gomis/webpack/bootstrap","webpack://sae-2023-groupei-lasoa-gomis/webpack/runtime/make namespace object","webpack://sae-2023-groupei-lasoa-gomis/./client/src/main.js"],"sourcesContent":["class Player {\r\n  constructor(x, y, radius) {\r\n    this.x = x;\r\n    this.y = y;\r\n    this.radius = radius;\r\n    this.speed = 4;\r\n    this.direction = {\r\n      x: 0,\r\n      y: 0,\r\n    };\r\n  }\r\n\r\n  draw(ctx, image) {\r\n    // Dessiner le cercle\r\n    ctx.beginPath();\r\n    ctx.drawImage(\r\n      image,\r\n      this.x - this.radius,\r\n      this.y - this.radius,\r\n      this.radius * 2,\r\n      this.radius * 2\r\n    );\r\n    ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);\r\n    ctx.strokeStyle = \"black\";\r\n    ctx.stroke();\r\n  }\r\n\r\n  move(ctx) {\r\n    // Déplacer le cercle en fonction de la direction\r\n    this.x += this.direction.x * this.speed;\r\n    this.y += this.direction.y * this.speed;\r\n    if (this.x < this.radius) this.x = this.radius;\r\n    if (this.y < this.radius) this.y = this.radius;\r\n    if (this.x > ctx.width - this.radius) {\r\n      this.x = ctx.width - this.radius;\r\n    }\r\n    if (this.y > ctx.height - this.radius) {\r\n      this.y = ctx.height - this.radius;\r\n    }\r\n  }\r\n  moveTo(x, y) {\r\n    const directionX = x - this.x;\r\n    const directionY = y - this.y;\r\n    \r\n    const distance = Math.sqrt(directionX ** 2 + directionY ** 2);\r\n    \r\n    this.direction.x = directionX / distance;\r\n    this.direction.y = directionY / distance;\r\n  }\r\n}\r\n\r\nexport default Player;\r\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import Player from \"./Player.js\";\r\n\r\nconst canvas = document.querySelector(\".map\");\r\nconst ctx = canvas.getContext(\"2d\");\r\n\r\ncanvas.width = 500;\r\ncanvas.height = 500;\r\n\r\n/*\r\nwindow.addEventListener(\"resize\", (e) => {\r\n  e.preventDefault();\r\n  canvas.width = document.documentElement.clientWidth;\r\n  canvas.height = document.documentElement.clientHeight;\r\n});\r\n*/\r\n\r\nctx.width = canvas.width;\r\nctx.height = canvas.height;\r\n\r\nconst player = new Player(canvas.width / 2, canvas.height / 2, 100);\r\n\r\nconst image = new Image();\r\nimage.src = \"/images/goku.png\";\r\n\r\ndocument.addEventListener(\"keydown\", (event) => {\r\n  event.preventDefault();\r\n  // Mettre à jour la direction en fonction des touches enfoncées\r\n  switch (event.keyCode) {\r\n    case 37: // Gauche\r\n      player.direction.x = -1;\r\n      break;\r\n    case 38: // Haut\r\n      player.direction.y = -1;\r\n      break;\r\n    case 39: // Droite\r\n      player.direction.x = 1;\r\n      break;\r\n    case 40: // Bas\r\n      player.direction.y = 1;\r\n      break;\r\n  }\r\n});\r\n\r\ndocument.addEventListener(\"keyup\", (event) => {\r\n  event.preventDefault();\r\n  // Mettre à jour la direction en fonction des touches relâchées\r\n  switch (event.keyCode) {\r\n    case 37: // Gauche\r\n      if (player.direction.x < 0) {\r\n        player.direction.x = 0;\r\n      }\r\n      break;\r\n    case 38: // Haut\r\n      if (player.direction.y < 0) {\r\n        player.direction.y = 0;\r\n      }\r\n      break;\r\n    case 39: // Droite\r\n      if (player.direction.x > 0) {\r\n        player.direction.x = 0;\r\n      }\r\n      break;\r\n    case 40: // Bas\r\n      if (player.direction.y > 0) {\r\n        player.direction.y = 0;\r\n      }\r\n      break;\r\n  }\r\n});\r\n\r\ncanvas.addEventListener(\"mousemove\", (event) => {\r\n  const mouseX = event.offsetX;\r\n  const mouseY = event.offsetY;\r\n\r\n  player.moveTo(mouseX, mouseY);\r\n});\r\n\r\nfunction update() {\r\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n  // Déplacer le joueur en fonction de la direction\r\n  player.move(ctx);\r\n  // Dessiner le joueur et les autres éléments du jeu\r\n  player.draw(ctx, image);\r\n  requestAnimationFrame(update);\r\n}\r\n\r\nupdate();\r\n"],"names":["Player","x","y","radius","_classCallCheck","speed","direction","_createClass","key","value","draw","ctx","image","beginPath","drawImage","arc","Math","PI","strokeStyle","stroke","move","width","height","moveTo","directionX","directionY","distance","sqrt","pow","canvas","document","querySelector","getContext","player","Image","src","addEventListener","event","preventDefault","keyCode","mouseX","offsetX","mouseY","offsetY","update","clearRect","requestAnimationFrame"],"sourceRoot":""}
\ No newline at end of file
diff --git a/client/public/css/style.css b/client/public/css/style.css
index 1b3ce024225b27c7f667212c6350f52327cd5796..5a5c9495008edd58adce1a717a01ef6b5135248f 100644
--- a/client/public/css/style.css
+++ b/client/public/css/style.css
@@ -1,4 +1,11 @@
 body{
+    box-sizing: border-box;
     margin: 0;
     padding: 0;
+    overflow: hidden;
 }
+.map{
+    box-sizing: border-box;
+    border: 5px solid #eb5619;
+    background-size: cover;
+}
\ No newline at end of file
diff --git a/client/public/images/goku.png b/client/public/images/goku.png
new file mode 100644
index 0000000000000000000000000000000000000000..b213912db4d276f5fd2de457fbfae87450597283
Binary files /dev/null and b/client/public/images/goku.png differ
diff --git a/client/public/images/map.jpg b/client/public/images/map.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c3ab6c057b9b5477e3ca6d6fdb99101da8855dc8
Binary files /dev/null and b/client/public/images/map.jpg differ
diff --git a/client/public/images/map.png b/client/public/images/map.png
deleted file mode 100644
index 6d75c1c8294246c8985177a6bbae6fdd91d6a2a7..0000000000000000000000000000000000000000
Binary files a/client/public/images/map.png and /dev/null differ
diff --git a/client/public/index.html b/client/public/index.html
index a9aa3cfd7fdd35df02ac4ae79bfbeccadffc7f17..de8363bb7b3bdce0f2a0bbf71f7f658b209189cb 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -4,11 +4,11 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Titre</title>
+    <title>Dragon.io</title>
     <script src="./build/main.bundle.js" defer></script>
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
-    <canvas class="map" height="1400" width="2200"></canvas>
+    <canvas class="map"></canvas>
 </body>
 </html>
\ No newline at end of file
diff --git a/client/src/Player.js b/client/src/Player.js
index 35d196352c9408dd47b52ca17c93326c92981a51..293035fa3aa53b3c9a9844fe418e7933c44caa68 100644
--- a/client/src/Player.js
+++ b/client/src/Player.js
@@ -10,33 +10,43 @@ class Player {
     };
   }
 
-  draw(ctx) {
+  draw(ctx, image) {
     // Dessiner le cercle
     ctx.beginPath();
+    ctx.drawImage(
+      image,
+      this.x - this.radius,
+      this.y - this.radius,
+      this.radius * 2,
+      this.radius * 2
+    );
     ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
-    ctx.fillStyle = "blue";
-    ctx.fill();
     ctx.strokeStyle = "black";
     ctx.stroke();
   }
 
-  move(canvas) {
+  move(ctx) {
     // Déplacer le cercle en fonction de la direction
     this.x += this.direction.x * this.speed;
     this.y += this.direction.y * this.speed;
-    if (this.x < this.radius) {
-      this.x = this.radius;
+    if (this.x < this.radius) this.x = this.radius;
+    if (this.y < this.radius) this.y = this.radius;
+    if (this.x > ctx.width - this.radius) {
+      this.x = ctx.width - this.radius;
     }
-    if (this.y < this.radius) {
-      this.y = this.radius;
-    }
-    if (this.x > canvas.width - this.radius) {
-      this.x = canvas.width - this.radius;
-    }
-    if (this.y > canvas.height - this.radius) {
-      this.y = canvas.height - this.radius;
+    if (this.y > ctx.height - this.radius) {
+      this.y = ctx.height - this.radius;
     }
   }
+  moveTo(x, y) {
+    const directionX = x - this.x;
+    const directionY = y - this.y;
+    
+    const distance = Math.sqrt(directionX ** 2 + directionY ** 2);
+    
+    this.direction.x = directionX / distance;
+    this.direction.y = directionY / distance;
+  }
 }
 
 export default Player;
diff --git a/client/src/main.js b/client/src/main.js
index 6edf065ecaa3c753d6a45ba7fb0c406bae87bd41..814c28034fda0a744f21b97551a82d034c4522bf 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -3,16 +3,24 @@ import Player from "./Player.js";
 const canvas = document.querySelector(".map");
 const ctx = canvas.getContext("2d");
 
-const backgroundImage = new Image();
-backgroundImage.src = "/images/map.png";
-backgroundImage.addEventListener("load", (event) => {
-  ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
+canvas.width = 500;
+canvas.height = 500;
+
+/*
+window.addEventListener("resize", (e) => {
+  e.preventDefault();
+  canvas.width = document.documentElement.clientWidth;
+  canvas.height = document.documentElement.clientHeight;
 });
+*/
+
+ctx.width = canvas.width;
+ctx.height = canvas.height;
 
-const player = new Player(0, 0, 60);
-player.draw(ctx);
+const player = new Player(canvas.width / 2, canvas.height / 2, 100);
 
-console.log(player);
+const image = new Image();
+image.src = "/images/goku.png";
 
 document.addEventListener("keydown", (event) => {
   event.preventDefault();
@@ -60,14 +68,19 @@ document.addEventListener("keyup", (event) => {
   }
 });
 
+canvas.addEventListener("mousemove", (event) => {
+  const mouseX = event.offsetX;
+  const mouseY = event.offsetY;
+
+  player.moveTo(mouseX, mouseY);
+});
+
 function update() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
   // Déplacer le joueur en fonction de la direction
-  player.move(canvas);
-
+  player.move(ctx);
   // Dessiner le joueur et les autres éléments du jeu
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  player.draw(ctx);
-
+  player.draw(ctx, image);
   requestAnimationFrame(update);
 }