diff --git a/site/vue/css/style.css b/site/vue/css/style.css
index 48d3ad7..3fc846f 100644
--- a/site/vue/css/style.css
+++ b/site/vue/css/style.css
@@ -19,7 +19,9 @@
 body {
     font-family: main;
     background-color: #D7CCC8;
-    height: 91%;
+    height: 90%;
+    margin: 0;
+    padding: 0;
 }
 
 html {
@@ -39,17 +41,61 @@ html {
     height: 100%;
 }
 
+.buttonLevel {
+    height: 100px;
+    width: 300px;
+    font-size: large;
+    transition: .5s;
+    margin-bottom: 2%;
+}
+
+.buttonLevel:hover {
+    cursor: pointer;
+}
+
+#PersoSetupPage {
+    display: none;
+    height: 100%;
+}
+
+#levelSelectionPage {
+    display: none;
+    height: 100%;
+}
+
+#selectionContainer {
+    height: 95%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+}
+
+#perso-setupContainer {
+    height: 95%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: start
+}
+
 #menu-selection {
     position: absolute;
     left: 0;
     right: 0;
-    bottom: 0;
     margin: 25vh auto;
     text-align: center;
 }
 
 .fa-play-circle {
     font-size: 15vh;
+    transition: font-size 0.5s, color 0.5s, transform 0.5s;
+}
+
+.fa-play-circle:hover {
+    font-size: 18vh;
+    color: var(--cool-color);
+    transform: rotate(-15deg);
 }
 
 .message {
diff --git a/site/vue/index.html b/site/vue/index.html
index 06e9820..cb23fd7 100644
--- a/site/vue/index.html
+++ b/site/vue/index.html
@@ -14,6 +14,58 @@
     <div id="waitingPage" class="background">
         <p>Loading Stage</p>
     </div>
+    <!--Mode selection-->
+    <div id="levelSelectionPage" class="background">
+        <div id="header_selection" align=center>
+            <h1 class="dys" id="title_selection">Mode Selection</h1>
+        </div>
+        <hr id="hr">
+        <div id="selectionContainer">
+            <button class="border dys background color buttonLevel" id="button_mode4">Tuto</button>
+            <button class="border dys background color buttonLevel" id="button_mode"
+                onclick="playNormal()">Normal</button>
+            <button class="border dys background color buttonLevel" id="button_mode2"
+                onclick="modePerso()">Personnaliser</button>
+            <button class="border dys background color buttonLevel" id="button_mode3">Cameleon</button>
+        </div>
+    </div>
+    <!--Mode Personnalisé-->
+    <div id="PersoSetupPage" class="background">
+        <div id="header_perso_setup" align=center>
+            <h1 class="dys" id="title_perso_setup">Mode Perso</h1>
+        </div>
+        <hr id="hr">
+        <div id="perso-setupContainer" class="dys">
+            <div>
+                <p>Fonctions Logiques : </p>
+                <div>
+                    <input type="checkbox" id="etLogique" name="etLogique" checked>
+                    <label for="etLogique">ET</label>
+                </div>
+                <div>
+                    <input type="checkbox" id="etLogique" name="etLogique">
+                    <label for="etLogique">OU</label>
+                </div>
+                <div>
+                    <input type="checkbox" id="etLogique" name="etLogique">
+                    <label for="etLogique">NON</label>
+                </div>
+                <div>
+                    <input type="checkbox" id="etLogique" name="etLogique">
+                    <label for="etLogique">NON-ET</label>
+                </div>
+                <div>
+                    <input type="checkbox" id="etLogique" name="etLogique">
+                    <label for="etLogique">NON-OU</label>
+                </div>
+            </div><br><br><br>
+
+            <div>
+                <input type="number" id="colonne_number_setup" oninput="colonne_check_setup(this.value)">
+                <label>Nombre de colonnes</label>
+            </div><br><br>
+        </div>
+    </div>
     <!--Play Page-->
     <div id="playPage">
         <div id="success" class="modal">
@@ -22,10 +74,12 @@
                     <span class="close" onclick="closeModal('success');nextLevel();">&times;</span>
                     <h1 class="txt dys" id="successTitle"></h1>
                     <hr id="hr">
-                    <p class="dys"><a class="txt" id="successInfo"></a><a id="click_number"></a><a> click(s)</a></p>
+                    <p class="dys"><a class="txt" id="successInfo"></a><a id="click_number"></a><a> click(s)</a>
+                    </p>
                     <div id="show_stage" class="border"></div><br>
                     <button class="border dys background color" id="button_next_level" onmouseover="hoverButton()"
-                        onclick="closeModal('success');nextLevel();">Niveau suivant</button><br><br>
+                        onclick="closeModal('success');nextLevel();">Niveau
+                        suivant</button><br><br>
                     <p class="dys info_check" align=right>Toujours afficher ce panneau <input type="checkbox"
                             id="success_check_input" onclick="successCheck();" checked></p>
                 </div>
@@ -164,20 +218,7 @@
             <p id="titleGame" class="title dys">M<a class="secret" onclick="flip()">a</a>ke It True</p>
         </div>
         <div class="btn_play" id="menu-selection">
-            <ul>
-                <li>
-                    <div class="message">
-                        <a class="txt dys" id="playSelection"></a>
-                        <select id="jeu-select" class="background">
-                            <option value="aleatoire" class="txt background dys" id="mode1"></option>
-                            <option value="perso" class="txt background dys" id="mode2"></option>
-                        </select>
-                    </div>
-                </li>
-                <li>
-                    <a onclick="play();"><i class="far fa-play-circle"></i></a>
-                </li>
-            </ul>
+            <a onclick="play();"><i class="far fa-play-circle"></i></a>
         </div>
         <a onclick="openModal('myModal')"><i class="fa fa-cog" id="setting" aria-hidden="true"></i></a>
         <a onclick="openModal('scoreModal')"><i class="fa fa-trophy" id="setting" aria-hidden="true"></i></a>
@@ -189,14 +230,14 @@
 
                 <div id="setting_int" class="modal-body border background" align=center>
                     <span class="close" onclick="closeModal('myModal')">&times;</span>
-                    <h1 class="txt dys" id="settingTitle">Parametres</h1>
+                    <h1 class="txt dys" id="settingTitle"></h1>
                     <hr id="hr">
                     <br>
                     <p>
-                        <a class="txt dys" id="themeDark">Theme dark</a>
+                        <a class="txt dys" id="themeDark"></a>
                         <input id="darkcheck" type="checkbox" onclick="darkMode()" checked></p>
                     <p>
-                        <a class="txt dys" id="dysfont">DYSLEXIE</a>
+                        <a class="txt dys" id="dysfont"></a>
                         <input id="dyscheckbox" type="checkbox" onclick="dysFont()" checked></p>
                     <br>
                     <br><img onclick="setLang('fr')" class="img_france" src="img/france.png" />
@@ -319,58 +360,83 @@
                     <span class="close" onclick="closeModal('infoModal')">&times;</span>
                     <h1 class="txt dys" id="infoTitle">Tableau des scores</h1>
                     <hr id="hr">
-                    <p class="dys">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et malesuada lectus.
+                    <p class="dys">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et malesuada
+                        lectus.
                         Morbi
-                        imperdiet fringilla maximus. Integer ac aliquet ex. Quisque vestibulum elit ac velit feugiat
-                        facilisis. Nam in pharetra nisl, sed dignissim nibh. Donec ultricies sem quis turpis eleifend
+                        imperdiet fringilla maximus. Integer ac aliquet ex. Quisque vestibulum elit ac velit
+                        feugiat
+                        facilisis. Nam in pharetra nisl, sed dignissim nibh. Donec ultricies sem quis turpis
+                        eleifend
                         porta.
-                        Sed in risus hendrerit, tincidunt ante id, cursus tellus. Mauris et nisl neque. Fusce id dictum
+                        Sed in risus hendrerit, tincidunt ante id, cursus tellus. Mauris et nisl neque. Fusce id
+                        dictum
                         sapien.
 
-                        Vivamus ornare porta egestas. Cras id sem et turpis imperdiet mollis nec in turpis. Cras semper
+                        Vivamus ornare porta egestas. Cras id sem et turpis imperdiet mollis nec in turpis. Cras
+                        semper
                         urna
-                        sit amet neque pharetra vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et
+                        sit amet neque pharetra vulputate. Vestibulum ante ipsum primis in faucibus orci luctus
+                        et
                         ultrices
-                        posuere cubilia curae; In congue lorem at tellus ornare malesuada. Sed vel volutpat tortor.
+                        posuere cubilia curae; In congue lorem at tellus ornare malesuada. Sed vel volutpat
+                        tortor.
                         Aenean
                         imperdiet hendrerit arcu, vel faucibus mauris porttitor quis.
 
-                        Suspendisse potenti. Suspendisse tincidunt arcu nec nisi vulputate, a tempus est sagittis. Donec
-                        laoreet pulvinar sem, eu condimentum turpis feugiat quis. Morbi varius erat a iaculis lacinia.
+                        Suspendisse potenti. Suspendisse tincidunt arcu nec nisi vulputate, a tempus est
+                        sagittis. Donec
+                        laoreet pulvinar sem, eu condimentum turpis feugiat quis. Morbi varius erat a iaculis
+                        lacinia.
                         Sed
-                        sed nibh iaculis, pulvinar risus sed, fermentum justo. Aenean id libero maximus risus ornare
-                        elementum. Aenean nec ex porta, efficitur quam sed, dignissim arcu. Vivamus pharetra sapien a
+                        sed nibh iaculis, pulvinar risus sed, fermentum justo. Aenean id libero maximus risus
+                        ornare
+                        elementum. Aenean nec ex porta, efficitur quam sed, dignissim arcu. Vivamus pharetra
+                        sapien a
                         augue
-                        aliquam consectetur. Morbi dictum lobortis elit, a faucibus ligula ultricies ac. Nullam suscipit
+                        aliquam consectetur. Morbi dictum lobortis elit, a faucibus ligula ultricies ac. Nullam
+                        suscipit
                         at
-                        risus ut fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus ex nec
+                        risus ut fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis luctus
+                        ex nec
                         finibus semper. Pellentesque quam magna, gravida sed semper bibendum, gravida nec augue.
                         Interdum et
-                        malesuada fames ac ante ipsum primis in faucibus. Nulla imperdiet ex ut sapien facilisis auctor.
+                        malesuada fames ac ante ipsum primis in faucibus. Nulla imperdiet ex ut sapien facilisis
+                        auctor.
 
-                        Vivamus vestibulum fermentum odio vel viverra. Donec nec nisi ex. Curabitur tempor venenatis
-                        porttitor. Ut eget vehicula turpis. Curabitur vel pellentesque dui, a rhoncus purus. Maecenas et
+                        Vivamus vestibulum fermentum odio vel viverra. Donec nec nisi ex. Curabitur tempor
+                        venenatis
+                        porttitor. Ut eget vehicula turpis. Curabitur vel pellentesque dui, a rhoncus purus.
+                        Maecenas et
                         leo
                         ultricies, sodales sapien ac, venenatis risus. Vestibulum elementum, felis ac malesuada
                         tincidunt,
-                        sem arcu suscipit mi, quis malesuada mauris nibh in diam. Mauris erat diam, bibendum sed viverra
-                        vel, eleifend sed lorem. Morbi cursus tincidunt eros eu tincidunt. Aliquam eget viverra leo.
+                        sem arcu suscipit mi, quis malesuada mauris nibh in diam. Mauris erat diam, bibendum sed
+                        viverra
+                        vel, eleifend sed lorem. Morbi cursus tincidunt eros eu tincidunt. Aliquam eget viverra
+                        leo.
                         Aenean
-                        quis odio in elit dictum faucibus. Vivamus tristique, lectus at pretium lobortis, neque odio
+                        quis odio in elit dictum faucibus. Vivamus tristique, lectus at pretium lobortis, neque
+                        odio
                         efficitur leo, aliquam rutrum nunc massa in diam. Sed mattis, tellus convallis ultricies
                         lobortis,
-                        odio justo maximus nisi, at efficitur dui nulla at eros. Mauris eleifend felis non est molestie
+                        odio justo maximus nisi, at efficitur dui nulla at eros. Mauris eleifend felis non est
+                        molestie
                         sollicitudin.
 
-                        Vivamus neque felis, interdum eu egestas eget, imperdiet vel orci. Etiam finibus venenatis
+                        Vivamus neque felis, interdum eu egestas eget, imperdiet vel orci. Etiam finibus
+                        venenatis
                         tortor,
-                        vitae feugiat dolor malesuada eget. Nulla erat sem, venenatis ac tincidunt eget, condimentum et
+                        vitae feugiat dolor malesuada eget. Nulla erat sem, venenatis ac tincidunt eget,
+                        condimentum et
                         est.
-                        Nam a pharetra ligula. Nullam quis convallis turpis. Duis quis nibh ut mi commodo euismod. Ut
-                        iaculis vestibulum elit vitae scelerisque. Sed sollicitudin, leo id cursus placerat, erat ipsum
+                        Nam a pharetra ligula. Nullam quis convallis turpis. Duis quis nibh ut mi commodo
+                        euismod. Ut
+                        iaculis vestibulum elit vitae scelerisque. Sed sollicitudin, leo id cursus placerat,
+                        erat ipsum
                         varius dolor, non egestas erat nibh sed nisl. Vestibulum sit amet purus sed nulla mattis
                         malesuada
-                        eget vitae ligula. Vivamus iaculis, felis vel dapibus lacinia, nisl felis tincidunt sem, vel
+                        eget vitae ligula. Vivamus iaculis, felis vel dapibus lacinia, nisl felis tincidunt sem,
+                        vel
                         finibus
                         mauris elit maximus lorem. Donec non viverra leo. Vestibulum iaculis ipsum et mi aliquam
                         aliquam.
diff --git a/site/vue/js/func.js b/site/vue/js/func.js
index da02de8..9098141 100644
--- a/site/vue/js/func.js
+++ b/site/vue/js/func.js
@@ -77,17 +77,25 @@ function setColor(color) {
     document.querySelector(".secret").style.color = "#fe8a71";
 }
 
-document.querySelector("#button_next_level").onmouseover = function () { mouseOver() };
-document.querySelector("#button_next_level").onmouseout = function () { mouseOut() };
+document.querySelector("#button_next_level").onmouseover = function () { mouseOver(document.querySelector("#button_next_level")) };
+document.querySelector("#button_next_level").onmouseout = function () { mouseOut(document.querySelector("#button_next_level")) };
+document.querySelector("#button_mode").onmouseover = function () { mouseOver(document.querySelector("#button_mode")) };
+document.querySelector("#button_mode").onmouseout = function () { mouseOut(document.querySelector("#button_mode")) };
+document.querySelector("#button_mode2").onmouseover = function () { mouseOver(document.querySelector("#button_mode2")) };
+document.querySelector("#button_mode2").onmouseout = function () { mouseOut(document.querySelector("#button_mode2")) };
+document.querySelector("#button_mode3").onmouseover = function () { mouseOver(document.querySelector("#button_mode3")) };
+document.querySelector("#button_mode3").onmouseout = function () { mouseOut(document.querySelector("#button_mode3")) };
+document.querySelector("#button_mode4").onmouseover = function () { mouseOver(document.querySelector("#button_mode4")) };
+document.querySelector("#button_mode4").onmouseout = function () { mouseOut(document.querySelector("#button_mode4")) };
 
-function mouseOver() {
-    document.querySelector("#button_next_level").style.backgroundColor = document.querySelector(".modal-body").style.borderColor;
-    document.querySelector("#button_next_level").style.color = document.querySelector(".modal-body").style.backgroundColor;
+function mouseOver(button) {
+    button.style.backgroundColor = document.querySelector(".modal-body").style.borderColor;
+    button.style.color = document.querySelector(".modal-body").style.backgroundColor;
 }
 
-function mouseOut() {
-    document.querySelector("#button_next_level").style.backgroundColor = document.querySelector(".modal-body").style.backgroundColor;
-    document.querySelector("#button_next_level").style.color = document.querySelector(".modal-body").style.borderColor;
+function mouseOut(button) {
+    button.style.backgroundColor = document.querySelector(".modal-body").style.backgroundColor;
+    button.style.color = document.querySelector(".modal-body").style.borderColor;
 }
 
 function setLang(newLang) {
@@ -546,14 +554,41 @@ function changeAllLineColorInActive(color) {
 }
 
 function play() {
-    niveauActuel = 1;
-    timeTot = 0;
     document.querySelector("#mainPage").style.display = 'none';
+    document.querySelector("#levelSelectionPage").style.display = 'block';
+
+}
+function modePerso() {
+    document.querySelector("#levelSelectionPage").style.display = 'none';
+    document.querySelector("#PersoSetupPage").style.display = 'block';
+}
+function playNormal() {
+    document.querySelector("#levelSelectionPage").style.display = 'none';
     document.querySelector("#playPage").style.display = 'block';
+    niveauActuel = 1;
+    timeTot = 0;
     launchGameOne();
+}
 
-
-
+function colonne_check_setup(value) {
+    if (value != "" || value != null || value != undefined) {
+        document.querySelectorAll(".colonne_selection").forEach(function (element) {
+            console.log("e");
+            element.remove();
+        });
+        for (let i = 0; i < value; i++) {
+            var div = document.createElement("div");
+            var input = document.createElement("input");
+            var label = document.createElement("label");
+            let colonne_number = i + 1;
+            input.type = "number";
+            div.classList.add("colonne_selection");
+            label.innerHTML = "Nombre de fonctions dans la colonne " + colonne_number;
+            div.appendChild(input);
+            div.appendChild(label);
+            document.querySelector('#perso-setupContainer').appendChild(div);
+        }
+    }
 }
 
 function launchGameOne() {