diff --git a/src/components/Gameboard/Map/Map.jsx b/src/components/Gameboard/Map/Map.jsx
index 8f008b2..fdfd211 100644
--- a/src/components/Gameboard/Map/Map.jsx
+++ b/src/components/Gameboard/Map/Map.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState, useContext } from 'react';
 import { PlayerDataContext, SocketContext } from '../../../App';
 
 import mapImage from '../../../images/map.jpg';
-import positions from '../positions';
+import positionMapCoords from '../positions';
 import pawnImages from '../../../constants/pawnImages';
 import canPawnMove from './canPawnMove';
 import getPositionAfterMove from './getPositionAfterMove';
@@ -14,63 +14,56 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
 
     const [hintPawn, setHintPawn] = useState();
 
-    const paintPawn = (context, x, y, color) => {
+    const paintPawn = (context, pawn) => {
+        const { x, y } = positionMapCoords[pawn.position];
         const touchableArea = new Path2D();
         touchableArea.arc(x, y, 12, 0, 2 * Math.PI);
         const image = new Image();
-        image.src = pawnImages[color];
-        // image.onload = function () {
-        context.drawImage(image, x - 17, y - 14, 35, 30);
+        image.src = pawnImages[pawn.color];
+        image.onload = function () {
+            context.drawImage(image, x - 17, y - 15, 35, 30);
+        };
         return touchableArea;
     };
 
     const handleCanvasClick = event => {
-        if (hintPawn) {
-            const canvas = canvasRef.current;
-            const ctx = canvas.getContext('2d');
-            const rect = canvas.getBoundingClientRect(),
-                cursorX = event.clientX - rect.left,
-                cursorY = event.clientY - rect.top;
-            for (const pawn of pawns) {
-                if (ctx.isPointInPath(pawn.touchableArea, cursorX, cursorY)) {
-                    socket.emit('game:move', pawn._id);
-                }
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext('2d');
+        const rect = canvas.getBoundingClientRect(),
+            cursorX = event.clientX - rect.left,
+            cursorY = event.clientY - rect.top;
+        for (const pawn of pawns) {
+            if (ctx.isPointInPath(pawn.touchableArea, cursorX, cursorY)) {
+                if (canPawnMove(pawn, rolledNumber)) socket.emit('game:move', pawn._id);
             }
-            setHintPawn(null);
         }
+        setHintPawn(null);
     };
 
     const handleMouseMove = event => {
-        if (nowMoving && rolledNumber) {
-            const canvas = canvasRef.current;
-            const ctx = canvas.getContext('2d');
-            const rect = canvas.getBoundingClientRect(),
-                x = event.clientX - rect.left,
-                y = event.clientY - rect.top;
-            canvas.style.cursor = 'default';
-            for (const pawn of pawns) {
-                if (pawn.touchableArea) {
-                    if (
-                        ctx.isPointInPath(pawn.touchableArea, x, y) &&
-                        player.color === pawn.color &&
-                        canPawnMove(pawn, rolledNumber)
-                    ) {
-                        const pawnPosition = getPositionAfterMove(pawn, rolledNumber);
-                        if (pawnPosition) {
-                            canvas.style.cursor = 'pointer';
-                            setHintPawn({ id: pawn._id, position: pawnPosition, color: 'grey' });
-                            break;
-                        }
-                    } else {
-                        setHintPawn(null);
-                    }
-                } else {
-                    setHintPawn(null);
+        if (!nowMoving || !rolledNumber) return;
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext('2d');
+        const rect = canvas.getBoundingClientRect(),
+            x = event.clientX - rect.left,
+            y = event.clientY - rect.top;
+        canvas.style.cursor = 'default';
+        for (const pawn of pawns) {
+            if (
+                ctx.isPointInPath(pawn.touchableArea, x, y) &&
+                player.color === pawn.color &&
+                canPawnMove(pawn, rolledNumber)
+            ) {
+                const pawnPosition = getPositionAfterMove(pawn, rolledNumber);
+                if (pawnPosition) {
+                    canvas.style.cursor = 'pointer';
+                    if (hintPawn && hintPawn.id === pawn._id) return;
+                    setHintPawn({ id: pawn._id, position: pawnPosition, color: 'grey' });
+                    return;
                 }
             }
-        } else {
-            setHintPawn(null);
         }
+        setHintPawn(null);
     };
 
     useEffect(() => {
@@ -82,15 +75,10 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
             image.onload = function () {
                 ctx.drawImage(image, 0, 0);
                 pawns.forEach((pawn, index) => {
-                    pawns[index].touchableArea = paintPawn(
-                        ctx,
-                        positions[pawn.position].x,
-                        positions[pawn.position].y,
-                        pawn.color
-                    );
+                    pawns[index].touchableArea = paintPawn(ctx, pawn);
                 });
                 if (hintPawn) {
-                    paintPawn(ctx, positions[hintPawn.position].x, positions[hintPawn.position].y, hintPawn.color);
+                    paintPawn(ctx, hintPawn);
                 }
             };
         };
diff --git a/src/constants/positions.js b/src/constants/positions.js
index c437f9f..c5d848a 100644
--- a/src/constants/positions.js
+++ b/src/constants/positions.js
@@ -1,4 +1,4 @@
-const positions = [
+const positionMapCoords = [
     // Red base
     { x: 67, y: 67 }, // 0
     { x: 67, y: 116 },
@@ -114,4 +114,4 @@ const positions = [
     { x: 230, y: 200 }, // 91
 ];
 
-export default positions;
+export default positionMapCoords;