diff --git a/assets/sprites/topDownSprite/void/MainCharacter.png b/assets/sprites/topDownSprite/void/MainCharacter.png
new file mode 100644
index 0000000..4cc1219
Binary files /dev/null and b/assets/sprites/topDownSprite/void/MainCharacter.png differ
diff --git a/index.html b/index.html
index f0c3e65..97fc8af 100644
--- a/index.html
+++ b/index.html
@@ -36,7 +36,7 @@
   <script src = "src/assetsLoading.js"></script>
   <script src = "src/langManager.js"></script>
 
-  <script src = "src/uiToolManager.js"></script>
+  <script src = "src/uiUtils.js"></script>
 
   <script src = "src/sceneManager/transitionEngineManager.js"></script>
   <script src = "src/tutorialManager.js"></script>
diff --git a/json/engineOne/sprites.json b/json/engineOne/sprites.json
index 77d53bc..2984bc8 100644
--- a/json/engineOne/sprites.json
+++ b/json/engineOne/sprites.json
@@ -4,7 +4,51 @@
         {
             "id" : "0",
             "name" : "Void",
-            "path" : "assets/sprites/topDownSprite/testsprite/MainCharacter.png",
+            "path" : "assets/sprites/topDownSprite/void/MainCharacter.png",
+            "nb" : "1",
+            "image" : "null"
+        },
+        {
+            "id" : "1",
+            "name" : "Bob",
+            "path" : "assets/sprites/topDownSprite/bob/BobSpriteSheet.png",
+            "nb" : "1",
+            "image" : "null"
+        },
+        {
+            "id" : "2",
+            "name" : "DarkWoaf",
+            "path" : "assets/sprites/topDownSprite/darkWoaf/darkWoafSpriteSheet.png",
+            "nb" : "1",
+            "image" : "null"
+        },{
+            "id" : "3",
+            "name" : "Salatonion",
+            "path" : "assets/sprites/topDownSprite/salatonion/salatonionSprite.png",
+            "nb" : "1",
+            "image" : "null"
+        },{
+            "id" : "4",
+            "name" : "MainAi",
+            "path" : "assets/sprites/topDownSprite/ai/MainAi.png",
+            "nb" : "1",
+            "image" : "null"
+        },{
+            "id" : "5",
+            "name" : "FightAi",
+            "path" : "assets/sprites/topDownSprite/ai/MainAiFight.png",
+            "nb" : "1",
+            "image" : "null"
+        },{
+            "id" : "6",
+            "name" : "RedWoaf",
+            "path" : "assets/sprites/topDownSprite/redwoafsprite/redWoaf.png",
+            "nb" : "1",
+            "image" : "null"
+        },{
+            "id" : "7",
+            "name" : "BabyBob",
+            "path" : "assets/sprites/topDownSprite/babyBob/babyBob.png",
             "nb" : "1",
             "image" : "null"
         },
diff --git a/src/uiUtils.js b/src/uiUtils.js
new file mode 100644
index 0000000..3500543
--- /dev/null
+++ b/src/uiUtils.js
@@ -0,0 +1,86 @@
+/**
+ * 
+ * @param {int} xStartButton 
+ * @param {int} yStartButton 
+ * @param {int} sizeXButton 
+ * @param {int} sizeYButton 
+ * @param {function} callbackFunction automatically set to errorCallbackFunctionButton who just send a specific error for that case
+ */
+const createInputButtonWithCallback = (xStartButton, yStartButton, sizeXButton, sizeYButton, callbackFunction = errorCallbackFunctionButton) => { // callback function is naturally an error !
+    /**
+     * * To make it works, i use mouseReleased lied to the canvas, with that i can easily do 
+     * * a onMouseUp isntead of a onMouseDown and it takes much less codes!
+     */
+    
+    if( mouseIsHover(xStartButton, yStartButton, sizeXButton, sizeYButton) )
+    {
+        cursor('pointer') // Changing the cursor into a pointer if pointer is in the button
+    }
+    
+    if( mouseIsHover(xStartButton, yStartButton, sizeXButton, sizeYButton) && mouseIsPressed === true )
+    {
+        canvas.mouseReleased(callbackFunction)
+    }
+}
+
+
+
+// ! This function is used nowhere and i don't think i will use it
+const createShowTextOnHover = (xStartButton, yStartButton, sizeXButton, sizeYButton, textToShow = "Hovered", fontSize = 16) => { // callback function is naturally an error !
+    if( mouseIsHover(xStartButton, yStartButton, sizeXButton, sizeYButton) )
+    {
+        fill(255,255,255)
+
+        textSize(fontSize)
+        textAlign(CENTER,CENTER);
+
+        drawingContext.shadowBlur = 10;
+        drawingContext.shadowColor = 'black';
+
+        text(textToShow, mouseX, mouseY-10)
+
+        drawingContext.shadowBlur = 0;
+
+    }
+}
+
+
+
+/**
+ * @param {int} xStartButton 
+ * @param {int} yStartButton 
+ * @param {float} sizeXButton 
+ * @param {float} sizeYButton 
+ * @param {int} red tint of red in rgb
+ * @param {int} green tint of green in rgb
+ * @param {int} blue tint of blue in rgb
+ */
+const changeFillOnHover = (xStartButton, yStartButton, sizeXButton, sizeYButton, red = 255, green = 255, blue = 255) => {
+    if( mouseIsHover(xStartButton, yStartButton, sizeXButton, sizeYButton) )
+    {
+        /**
+         * * Just set the color on hover a button
+         */
+        fill(red,green,blue)
+    }
+}
+
+
+
+/**
+ * 
+ * @param {*} xStartButton 
+ * @param {*} yStartButton 
+ * @param {*} sizeXButton 
+ * @param {*} sizeYButton 
+ * @returns {boolean} if the player is hover or not the position and the size
+ */
+const mouseIsHover = (xStartButton, yStartButton, sizeXButton, sizeYButton) => mouseX > xStartButton && mouseY > yStartButton && mouseX < xStartButton + sizeXButton && mouseY < yStartButton + sizeYButton
+
+
+const errorCallbackFunctionButton = () => {
+    /**
+     * * Default callback when we createInputButtonWithCallback
+     */
+    throw new Error("This Button doesn't have a Function! (uiManagerEngineOne.js --> const createInputButtonWithCallback) Don't forget createInputButtonWithWallback takes 5 parameters")
+}
\ No newline at end of file