diff --git a/code/index.css b/code/index.css
index 3dd693f..77ed732 100644
--- a/code/index.css
+++ b/code/index.css
@@ -45,38 +45,6 @@
     -moz-box-shadow:inset 0px 0px 0px 5px black;
     box-shadow:inset 0px 0px 0px 5px black;
 }
-
-.slider {
-    -webkit-appearance: none;
-    width: 100%;
-    height: 15px;
-    border-radius: 5px;  
-    background: #d3d3d3;
-    outline: none;
-    opacity: 0.7;
-    -webkit-transition: .2s;
-    transition: opacity .2s;
-  }
-  
-  .slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 25px;
-    height: 25px;
-    border-radius: 50%; 
-    background: #4CAF50;
-    cursor: pointer;
-  }
-  
-  .slider::-moz-range-thumb {
-    width: 25px;
-    height: 25px;
-    border-radius: 50%;
-    background: #4CAF50;
-    cursor: pointer;
-  }
-
-
   /* The Modal (background) */
 .modal {
     display: none; /* Hidden by default */
@@ -149,6 +117,14 @@
 
   .slot {
     display: inline-block;
+    position: relative;
+  }
+
+  .gem {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
   }
 
   .texte {
diff --git a/code/index.php b/code/index.php
index c6755b9..41c5769 100644
--- a/code/index.php
+++ b/code/index.php
@@ -106,14 +106,14 @@
         </div>
         <div id="gems_picker">
             <div class="texte">Gemmes à afficher<br/></div>
-            <img id="gem1" draggable="true" ondragstart="drag(event)"/>
-            <img id="gem2" draggable="true" ondragstart="drag(event)"/>
-            <img id="gem3" draggable="true" ondragstart="drag(event)"/>
-            <img id="gem4" draggable="true" ondragstart="drag(event)"/>
-            <img id="gem5" draggable="true" ondragstart="drag(event)"/>
-            <img id="gem6" draggable="true" ondragstart="drag(event)"/>
-            <img id="gem7" draggable="true" ondragstart="drag(event)"/>
-            <img id="gem8" draggable="true" ondragstart="drag(event)"/>
+            <img id="gem1" class="gem" draggable="true" ondragstart="drag(event)"/>
+            <img id="gem2" class="gem" draggable="true" ondragstart="drag(event)"/>
+            <img id="gem3" class="gem" draggable="true" ondragstart="drag(event)"/>
+            <img id="gem4" class="gem" draggable="true" ondragstart="drag(event)"/>
+            <img id="gem5" class="gem" draggable="true" ondragstart="drag(event)"/>
+            <img id="gem6" class="gem" draggable="true" ondragstart="drag(event)"/>
+            <img id="gem7" class="gem" draggable="true" ondragstart="drag(event)"/>
+            <img id="gem8" class="gem" draggable="true" ondragstart="drag(event)"/>
             <div>
             <div id="slot1" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
             <div id="slot2" class="slot" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
diff --git a/code/options.js b/code/options.js
index 73ae3af..68d8db8 100644
--- a/code/options.js
+++ b/code/options.js
@@ -9,22 +9,22 @@ var span = document.getElementsByClassName("close")[0];
 
 // When the user clicks the button, open the modal 
 btn.onclick = function() {
-  modal.style.display = "block";
-  document.getElementById("color_pickers").style.display= (displ!="points" ? "none" : "inline");
-  document.getElementById("gems_picker").style.display= (displ=="points" ? "none" : "inline");
-  document.getElementById(getCookie("displayMode")+"_di").classList.add("selected");
+    modal.style.display = "block";
+    document.getElementById("color_pickers").style.display= (displ!="points" ? "none" : "inline");
+    document.getElementById("gems_picker").style.display= (displ=="points" ? "none" : "inline");
+    document.getElementById(getCookie("displayMode")+"_di").classList.add("selected");
 }
 
 // When the user clicks on <span> (x), close the modal
 span.onclick = function() {
-  modal.style.display = "none";
+    modal.style.display = "none";
 }
 
 // When the user clicks anywhere outside of the modal, close it
 window.onclick = function(event) {
-  if (event.target == modal) {
-    modal.style.display = "none";
-  }
+    if (event.target == modal) {
+        modal.style.display = "none";
+    }
 }
 
 
@@ -37,25 +37,25 @@ document.getElementById("-").width=size/4;
 
 function less()
 {
-  if(amount > 2)
-  {
-    amount--;
-  }
-  output.innerHTML = amount;
+    if(amount > 2)
+    {
+        amount--;
+    }
+    output.innerHTML = amount;
 }
 
 function more()
 {
-  if(amount<8)
-  {
-    amount++;
-  }
-  output.innerHTML = amount;
+    if(amount<8)
+    {
+        amount++;
+    }
+    output.innerHTML = amount;
 }
 
 document.getElementById("displays").addEventListener("click", function(){
-  document.getElementById("color_pickers").style.display= (displ!="points" ? "none" : "inline");
-  document.getElementById("gems_picker").style.display= (displ=="points" ? "none" : "inline");
+    document.getElementById("color_pickers").style.display= (displ!="points" ? "none" : "inline");
+    document.getElementById("gems_picker").style.display= (displ=="points" ? "none" : "inline");
 })
 
 function saveOptions() {
@@ -75,22 +75,42 @@ document.getElementById("both_di").style.backgroundSize=size/8+"px";
 document.getElementById("btn_confirm").width=size/4;
 
 if(getCookie("pause")!=1)
-  document.getElementById("no_pause").checked=true;
+document.getElementById("no_pause").checked=true;
 else
-  document.getElementById("yes_pause").checked=true;
+document.getElementById("yes_pause").checked=true;
 
 var displ=getCookie("displayMode");
 
 function selectDisplay(e)
 {
-  displ=e;
-  console.log(e);
-  setCookie("displayMode",e,30);
-  console.log("cookie "+getCookie("displayMode"));
-  document.getElementById("points_di").classList.remove("selected");
-  document.getElementById("gems_di").classList.remove("selected");
-  document.getElementById("both_di").classList.remove("selected");
-  document.getElementById(e+"_di").classList.add("selected");
+    displ=e;
+    setCookie("displayMode",e,30);
+    console.log("cookie "+getCookie("displayMode"));
+    document.getElementById("points_di").classList.remove("selected");
+    document.getElementById("gems_di").classList.remove("selected");
+    document.getElementById("both_di").classList.remove("selected");
+    document.getElementById(e+"_di").classList.add("selected");
+    backgroundBoth();
+}
+
+function backgroundBoth()
+{
+    
+    for(var cpt=1;cpt<9;cpt++)
+    {
+        eval("slot"+cpt+".classList."+(displ=="both" ? "add" : "remove")+"('dot')");
+        if(displ=="both")
+        {
+            eval("slot"+cpt+".style.backgroundColor='"+gemsSelected[cpt-1]+"'");
+            eval("gem"+cpt+".width=size/8");
+        }
+        else
+        {
+            eval("slot"+cpt+".style.backgroundColor=''");
+            eval("gem"+cpt+".width=size/6");
+        }
+        
+    }
 }
 
 var customColorsAvailable=["#FF0000","#ffff00","#008000","#800080","#000000","#8b4513","#00ffff","#ffa500"];
@@ -98,81 +118,81 @@ var customColorsAvailable=["#FF0000","#ffff00","#008000","#800080","#000000","#8
 
 for(var cpt=1;cpt<9;cpt++)
 {
-  eval('pickr'+cpt+` = Pickr.create({
-    el: '.col`+cpt+`',
-    theme: 'monolith',
-    default: (getCookie("color_`+cpt+`")=="" ? customColorsAvailable[cpt-1] : getCookie("color_`+cpt+`")),
-    useAsButton: true,
-
-    swatches:["red","yellow","green","purple","black","brown","cyan","orange"],
-  
-    components: {
-  
-        // Main components
-        preview: true,
-        hue: true,
-  
-        // Input / output Options
-        interaction: {
-            hex: true,
-            input: true,
-            clear: true,
-            save: true
+    eval('pickr'+cpt+` = Pickr.create({
+        el: '.col`+cpt+`',
+        theme: 'monolith',
+        default: (getCookie("color_`+cpt+`")=="" ? customColorsAvailable[cpt-1] : getCookie("color_`+cpt+`")),
+        useAsButton: true,
+        
+        swatches:["red","yellow","green","purple","black","brown","cyan","orange"],
+        
+        components: {
+            
+            // Main components
+            preview: true,
+            hue: true,
+            
+            // Input / output Options
+            interaction: {
+                hex: true,
+                input: true,
+                clear: true,
+                save: true
+            }
         }
-    }
-  });`);
-  
-  eval("pickr"+cpt+`.on('init', function() {
-    document.getElementById("col`+cpt+`").style.background=pickr`+cpt+`.getSelectedColor().toHEXA().toString();
-  }).on('save', function () {
-    document.getElementById("col`+cpt+`").style.background=pickr`+cpt+`.getColor().toHEXA().toString();
-    setCookie("color_`+cpt+`",pickr`+cpt+`.getColor().toHEXA().toString(),30);
-    pickr`+cpt+`.hide();
-});`);
-
+    });`);
+    
+    eval("pickr"+cpt+`.on('init', function() {
+        document.getElementById("col`+cpt+`").style.background=pickr`+cpt+`.getSelectedColor().toHEXA().toString();
+    }).on('save', function () {
+        document.getElementById("col`+cpt+`").style.background=pickr`+cpt+`.getColor().toHEXA().toString();
+        setCookie("color_`+cpt+`",pickr`+cpt+`.getColor().toHEXA().toString(),30);
+        pickr`+cpt+`.hide();
+    });`);
+    
 }
 
 function allowDrop(ev) {
-  ev.preventDefault();
+    ev.preventDefault();
 }
 
 function drag(ev) {
-  ev.dataTransfer.setData("text", ev.target.id);
-  dragFrom=ev.currentTarget.parentElement;
-  //console.log("je prends de "+ev.dataTransfer.getData("text") + " et "+ ev.currentTarget.parentElement.id);
+    ev.dataTransfer.setData("text", ev.target.id);
+    dragFrom=ev.currentTarget.parentElement;
+    //console.log("je prends de "+ev.dataTransfer.getData("text") + " et "+ ev.currentTarget.parentElement.id);
 }
 
 var dragFrom;
 
 function drop(ev) {
-  ev.preventDefault();
-  var data = ev.dataTransfer.getData("text");
-  var color;
-  //console.log("je lâche sur "+ev.target.id + " et "+dragFrom.hasChildNodes() + "|"+ev.currentTarget.id);
-  /*
-  if(!ev.target.hasChildNodes() && ev.target.tagName=="DIV")
-  {
-    ev.target.appendChild(document.getElementById(data));
-    //gemsSelected[ev.target.id.substring(4)-1]=document.getElementById(data)
-    
-    //console.log(data + " | " + ev.target.id + " | " + document.getElementById(data).src.substring(document.getElementById(data).src.search("/ress")+6));
-
-    color=document.getElementById(data).src.substring(document.getElementById(data).src.search("/ress")+6);
-    gemsSelected[ev.target.id.substring(4)-1]=color;
-    console.log(gemsSelected);
-  }
-  else */
-  if(dragFrom.hasChildNodes() && ev.currentTarget.hasChildNodes() && dragFrom!=ev.currentTarget)
-  {
-    [gemsSelected[dragFrom.id.substring(4)-1],gemsSelected[ev.currentTarget.id.substring(4)-1]]=[gemsSelected[ev.currentTarget.id.substring(4)-1],gemsSelected[dragFrom.id.substring(4)-1]];
-    dragFrom.appendChild(ev.currentTarget.firstChild);
-    ev.currentTarget.appendChild(dragFrom.firstChild);
-    //console.log(ev.currentTarget.firstChild.src.substring(document.getElementById(data).src.search("/ress")+6) + "|"+dragFrom.firstChild.src.substring(document.getElementById(data).src.search("/ress")+6));
-
-    setCookie("gem"+ev.currentTarget.id.substring(4),ev.currentTarget.firstChild.src.substring(document.getElementById(data).src.search("/ress")+6),30);
-    setCookie("gem"+dragFrom.id.substring(4),dragFrom.firstChild.src.substring(document.getElementById(data).src.search("/ress")+6),30);
-    //console.log(dragFrom.id.substring(4)+"/"+ev.currentTarget.id.substring(4));
-  }
+    ev.preventDefault();
+    var data = ev.dataTransfer.getData("text");
+    var color;
+    //console.log("je lâche sur "+ev.target.id + " et "+dragFrom.hasChildNodes() + "|"+ev.currentTarget.id);
+    /*
+    if(!ev.target.hasChildNodes() && ev.target.tagName=="DIV")
+    {
+        ev.target.appendChild(document.getElementById(data));
+        //gemsSelected[ev.target.id.substring(4)-1]=document.getElementById(data)
+        
+        //console.log(data + " | " + ev.target.id + " | " + document.getElementById(data).src.substring(document.getElementById(data).src.search("/ress")+6));
+        
+        color=document.getElementById(data).src.substring(document.getElementById(data).src.search("/ress")+6);
+        gemsSelected[ev.target.id.substring(4)-1]=color;
+        console.log(gemsSelected);
+    }
+    else */
+    if(dragFrom.hasChildNodes() && ev.currentTarget.hasChildNodes() && dragFrom!=ev.currentTarget)
+    {
+        [gemsSelected[dragFrom.id.substring(4)-1],gemsSelected[ev.currentTarget.id.substring(4)-1]]=[gemsSelected[ev.currentTarget.id.substring(4)-1],gemsSelected[dragFrom.id.substring(4)-1]];
+        dragFrom.appendChild(ev.currentTarget.firstChild);
+        ev.currentTarget.appendChild(dragFrom.firstChild);
+        //console.log(ev.currentTarget.firstChild.src.substring(document.getElementById(data).src.search("/ress")+6) + "|"+dragFrom.firstChild.src.substring(document.getElementById(data).src.search("/ress")+6));
+        
+        setCookie("gem"+ev.currentTarget.id.substring(4),ev.currentTarget.firstChild.src.substring(document.getElementById(data).src.search("/ress")+6),30);
+        setCookie("gem"+dragFrom.id.substring(4),dragFrom.firstChild.src.substring(document.getElementById(data).src.search("/ress")+6),30);
+        //console.log(dragFrom.id.substring(4)+"/"+ev.currentTarget.id.substring(4));
+    }
 }
 
 var gemsAvailable=["green","yellow","cyan","red","purple","orange","brown","black"];
@@ -180,20 +200,20 @@ var gemsSelected=[];
 
 for(var cpt=0;cpt<8;cpt++)
 {
-  gemsSelected[cpt]= (getCookie("gem"+(cpt+1))=="" ? gemsAvailable[cpt] : getCookie("gem"+(cpt+1)));
+    gemsSelected[cpt]= (getCookie("gem"+(cpt+1))=="" ? gemsAvailable[cpt] : getCookie("gem"+(cpt+1)));
 }
 
 for(var cpt=1;cpt<9;cpt++)
 {
-  eval("var gemIcon_"+gemsSelected[cpt-1]+"=document.getElementById('gem"+cpt+"')");
-  eval('gemIcon_'+gemsSelected[cpt-1]+'.src="ress/'+gemsSelected[cpt-1]+'"');
-  eval('gemIcon_'+gemsSelected[cpt-1]+'.width=size/6');
-
-  eval("var slot"+cpt+"=document.getElementById('slot"+cpt+"')");
-  eval("slot"+cpt+".style.width=size/6");
-  eval("slot"+cpt+".style.height=size/6");
-
-  document.getElementById("slot"+cpt).appendChild(eval("gem"+cpt));
+    eval("var gemIcon_"+gemsSelected[cpt-1]+"=document.getElementById('gem"+cpt+"')");
+    eval('gemIcon_'+gemsSelected[cpt-1]+'.src="ress/'+gemsSelected[cpt-1]+'"');
+    eval('gemIcon_'+gemsSelected[cpt-1]+'.width=size/6');
+    
+    eval("var slot"+cpt+"=document.getElementById('slot"+cpt+"')");
+    eval("slot"+cpt+".style.width=size/6");
+    eval("slot"+cpt+".style.height=size/6");
+    
+    document.getElementById("slot"+cpt).appendChild(eval("gem"+cpt));
 }
 
 //document.getElementById("resetGems").width=size/2;
@@ -201,9 +221,9 @@ document.getElementById("resetGems2").width=size/4;
 
 function resetGems()
 {
-  for(var cpt=1;cpt<9;cpt++)
-  {
-    setCookie("gem"+cpt,"",30);
-    document.getElementById("slot"+cpt).appendChild(eval("gemIcon_"+gemsAvailable[cpt-1]));
-  }
+    for(var cpt=1;cpt<9;cpt++)
+    {
+        setCookie("gem"+cpt,"",30);
+        document.getElementById("slot"+cpt).appendChild(eval("gemIcon_"+gemsAvailable[cpt-1]));
+    }
 }
\ No newline at end of file