diff --git a/front/volume/src/components/Pong/MapCustomization.svelte b/front/volume/src/components/Pong/MapCustomization.svelte
index 550734b..2e4b441 100644
--- a/front/volume/src/components/Pong/MapCustomization.svelte
+++ b/front/volume/src/components/Pong/MapCustomization.svelte
@@ -5,11 +5,14 @@
   import { DEFAULT_BALL_SIZE, DEFAULT_MAP_SIZE } from "./constants";
 
   export let map: Map;
+
   let canvas: HTMLCanvasElement;
   let context: CanvasRenderingContext2D;
   let wallWidth = 20;
   let wallHeight = 80;
 
+  const MAX_WALLS = 5;
+
   onMount(() => {
     if (canvas) {
       canvas.width = map.size.x;
@@ -52,7 +55,7 @@
       new Point(map.size.x / 2, map.size.y / 2),
       new Point(DEFAULT_BALL_SIZE.x * 5, DEFAULT_BALL_SIZE.y * 5)
     );
-    if (map.walls.length < 5 && !wall.collides(ballSpawnArea))
+    if (map.walls.length < MAX_WALLS && !wall.collides(ballSpawnArea))
       map.walls.push(wall);
   }
 
@@ -62,32 +65,11 @@
     const index = map.walls.findIndex((w) => w.collides(click));
     if (index != -1) map.walls.splice(index, 1);
   }
-
-  function sizeChange() {
-    map.walls = [];
-  }
 </script>
 
 <div>
   <h1>Map Customization:</h1>
-  <div>
-    Width:
-    <input
-      type="range"
-      min={DEFAULT_MAP_SIZE.x}
-      max="1000"
-      bind:value={map.size.x}
-      on:input={sizeChange}
-    />
-    Height:
-    <input
-      type="range"
-      min={DEFAULT_MAP_SIZE.y}
-      max="800"
-      bind:value={map.size.y}
-      on:input={sizeChange}
-    />
-  </div>
+  Right click to add walls, left click to remove walls. (Max {MAX_WALLS} walls)
   <canvas
     bind:this={canvas}
     on:click={(e) => click(e, false)}