diff --git a/site/vue/css/style.css b/site/vue/css/style.css
index 3fc846f..b3e3979 100644
--- a/site/vue/css/style.css
+++ b/site/vue/css/style.css
@@ -12,9 +12,6 @@
     --cool-color: #fe8a71;
 }
 
-* {
-    transition: .01s;
-}
 
 body {
     font-family: main;
@@ -71,6 +68,49 @@ html {
     justify-content: center;
 }
 
+#generate_button_perso {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100px;
+    width: 300px;
+    font-size: x-large;
+    transition: .5s;
+    margin-top: 25px;
+    padding: 0 25px 0 25px;
+}
+
+@keyframes loopiloop {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.fa-arrow-right {
+    margin-left: 25px;
+}
+
+.fa-spinner {
+    animation: loopiloop 2s infinite;
+    margin-left: 25px;
+}
+
+#generate_button_perso:hover {
+    cursor: pointer;
+}
+
+.more_perso:hover {
+    cursor: pointer;
+}
+
+#colonne_number_ask {
+    display: none;
+}
+
 #perso-setupContainer {
     height: 95%;
     display: flex;
diff --git a/site/vue/img/more.png b/site/vue/img/more.png
new file mode 100644
index 0000000..451a702
Binary files /dev/null and b/site/vue/img/more.png differ
diff --git a/site/vue/index.html b/site/vue/index.html
index cb23fd7..74f22ea 100644
--- a/site/vue/index.html
+++ b/site/vue/index.html
@@ -39,33 +39,45 @@
             <div>
                 <p>Fonctions Logiques : </p>
                 <div>
-                    <input type="checkbox" id="etLogique" name="etLogique" checked>
-                    <label for="etLogique">ET</label>
+                    <input type="checkbox" id="logique1" name="logique1" checked>
+                    <label for="logique1">ET</label>
                 </div>
                 <div>
-                    <input type="checkbox" id="etLogique" name="etLogique">
-                    <label for="etLogique">OU</label>
+                    <input type="checkbox" id="logique2" name="logique2">
+                    <label for="logique2">OU</label>
                 </div>
                 <div>
-                    <input type="checkbox" id="etLogique" name="etLogique">
-                    <label for="etLogique">NON</label>
+                    <input type="checkbox" id="logique3" name="logique3">
+                    <label for="logique3">NON</label>
                 </div>
                 <div>
-                    <input type="checkbox" id="etLogique" name="etLogique">
-                    <label for="etLogique">NON-ET</label>
+                    <input type="checkbox" id="logique4" name="logique4">
+                    <label for="logique4">NON-ET</label>
                 </div>
                 <div>
-                    <input type="checkbox" id="etLogique" name="etLogique">
-                    <label for="etLogique">NON-OU</label>
+                    <input type="checkbox" id="logique5" name="logique5">
+                    <label for="logique5">NON-OU</label>
                 </div>
-            </div><br><br><br>
-
+            </div><br>
             <div>
-                <input type="number" id="colonne_number_setup" oninput="colonne_check_setup(this.value)">
-                <label>Nombre de colonnes</label>
-            </div><br><br>
+                <label>Nombres de portes logiques : </label>
+                <input type="number" id="colonne_number_setup_global" value="4">
+            </div><br>
+            <div onclick="show_more_perso(this)">
+                <label class="more_perso">Plus de personnalisation </label>
+                <i class="fa fa-arrow-down" aria-hidden="true"></i>
+            </div><br>
+            <div id="colonne_number_ask">
+                <input type=" number" id="colonne_number_setup" oninput="colonne_check_setup(this.value)" value="0">
+                <label>Nombre de colonnes</label><br><br>
+            </div>
+            <div class="border background dys" id="generate_button_perso" onclick="buttonSpin()">
+                <a>Générer le niveau</a>
+                <i class="fa fa-arrow-right" aria-hidden="true"></i>
+            </div>
         </div>
     </div>
+    </div>
     <!--Play Page-->
     <div id="playPage">
         <div id="success" class="modal">
@@ -464,7 +476,7 @@
 <script src="js/creator.js"></script>
 <script src="js/timer.js"></script>
 <script src="js/db.js"></script>
-
+<script src="js/generateGame.js"></script>
 <script>
     initAll();
 </script>
diff --git a/site/vue/js/const.js b/site/vue/js/const.js
index b81ddba..6dee878 100644
--- a/site/vue/js/const.js
+++ b/site/vue/js/const.js
@@ -60,4 +60,6 @@ var double = false;
 
 var click = 0;
 
-var successPanel = true;
\ No newline at end of file
+var successPanel = true;
+
+var arrayPorte = [];
\ No newline at end of file
diff --git a/site/vue/js/createElement.js b/site/vue/js/createElement.js
index d153b8b..bef7982 100644
--- a/site/vue/js/createElement.js
+++ b/site/vue/js/createElement.js
@@ -368,7 +368,5 @@ function createStage(container) {
       });
     }
   }
-
   stage.draw();
-
 }
\ No newline at end of file
diff --git a/site/vue/js/func.js b/site/vue/js/func.js
index 9098141..303d308 100644
--- a/site/vue/js/func.js
+++ b/site/vue/js/func.js
@@ -87,6 +87,8 @@ document.querySelector("#button_mode3").onmouseover = function () { mouseOver(do
 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")) };
+document.querySelector("#generate_button_perso").onmouseover = function () { mouseOver(document.querySelector("#generate_button_perso")) };
+document.querySelector("#generate_button_perso").onmouseout = function () { mouseOut(document.querySelector("#generate_button_perso")) };
 
 function mouseOver(button) {
     button.style.backgroundColor = document.querySelector(".modal-body").style.borderColor;
@@ -573,7 +575,6 @@ function playNormal() {
 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++) {
@@ -582,14 +583,41 @@ function colonne_check_setup(value) {
             var label = document.createElement("label");
             let colonne_number = i + 1;
             input.type = "number";
+            input.value = 1;
+            input.oninput = refresh_input;
+            input.id = i;
+            input.classList = "input_refresh";
             div.classList.add("colonne_selection");
-            label.innerHTML = "Nombre de fonctions dans la colonne " + colonne_number;
+            label.innerHTML = " Nombre de fonctions dans la colonne " + colonne_number;
             div.appendChild(input);
             div.appendChild(label);
-            document.querySelector('#perso-setupContainer').appendChild(div);
+            div.appendChild(document.createElement("br"));
+            document.querySelector('#colonne_number_ask').appendChild(div);
         }
     }
 }
+function refresh_input(e) {
+    if (document.querySelector("#colonne_number_setup_global").value == "" || document.querySelector("#colonne_number_setup_global").value == undefined || document.querySelector("#colonne_number_setup_global").value == null)
+        document.querySelector("#colonne_number_setup_global").value = "0";
+    document.querySelector("#colonne_number_setup_global").value = parseInt(document.querySelector("#colonne_number_setup_global").value) + parseInt(e.target.value);
+}
+
+function show_more_perso(div) {
+    if (div.childNodes[3].className === "fa fa-arrow-down") {
+        div.childNodes[3].className = "fa fa-arrow-up";
+        document.querySelector("#colonne_number_ask").style.display = "block";
+        document.querySelector("#colonne_number_setup_global").disabled = true;
+        document.querySelector("#colonne_number_setup_global").value = 1;
+    } else {
+        div.childNodes[3].className = "fa fa-arrow-down";
+        document.querySelector("#colonne_number_ask").style.display = "none";
+        document.querySelector("#colonne_number_setup").value = "0";
+        document.querySelectorAll(".colonne_selection").forEach(function (element) {
+            element.remove();
+        });
+        document.querySelector("#colonne_number_setup_global").disabled = false;
+    }
+}
 
 function launchGameOne() {
     document.querySelector(".niveau").innerHTML = niveauActuel;
diff --git a/site/vue/js/generateGame.js b/site/vue/js/generateGame.js
new file mode 100644
index 0000000..f45ab57
--- /dev/null
+++ b/site/vue/js/generateGame.js
@@ -0,0 +1,227 @@
+const isTrue = (currentValue) => currentValue[0] == true;
+
+
+
+function generate_perso_level() {
+
+    var isEtNonAllowed = false;
+    var isOuNonAllowed = false;
+    var isNotAllowed = false;
+    var isOuAllowed = false;
+    timeEnd = 25;
+    double = false;
+    isTuto = false;
+
+    createStage("play_container");
+    stage.add(layer);
+    var logiqueCount = 0;
+    for (let i = 0; i < colonneTot; i++) {
+        liveColonneNumber.push([]);
+    }
+    for (let i = 0; i < colonneTot; i++) {
+        for (let j = 0; j < numberPerColonne[i]; j++) {
+            logiqueCount++;
+            let numberRandom = getRandomArbitrary(0, arrayPorte.length);
+            insertLogiqueColonne("logique" + logiqueCount, arrayPorte[numberRandom][1], i);
+        }
+    }
+
+
+    logiques.forEach(function (element) {
+        createLinkAuto(element.name);
+    });
+    initEndGame();
+    timer.stop();
+}
+
+
+
+function loadPerso() {
+
+    arrayPorte = [[document.querySelector("#logique1").checked, "et"], [document.querySelector("#logique2").checked, "ou"], [document.querySelector("#logique3").checked, "inv"], [document.querySelector("#logique4").checked, "etnon"], [document.querySelector("#logique5").checked, "nonou"]];
+    document.querySelector("#PersoSetupPage").style.display = 'none';
+    document.querySelector("#playPage").style.display = 'block';
+    resetAllTabs(false);
+    niveauActuel = 1;
+    timeTot = 0;
+    windowWidth = window.innerWidth;
+    windowHeight = window.innerHeight;
+    if (document.querySelector("#colonne_number_setup").value == 0) {
+        var porteTotal = parseInt(document.querySelector("#colonne_number_setup_global").value);
+        colonneTot = 0;
+        while (porteTotal > 2) {
+            porteTotal = porteTotal / 2;
+            numberPerColonne.push(porteTotal);
+            colonneTot++;
+        }
+        numberPerColonne.push(porteTotal);
+        colonneTot++;
+
+    } else {
+        colonneTot = parseInt(document.querySelector("#colonne_number_setup").value);
+        document.querySelectorAll(".input_refresh").forEach(function (element) {
+            numberPerColonne.push(parseInt(element.value));
+        });
+    }
+    arrayPorte = arrayPorte.filter(function (e) { if (e[0] === true) return e; })
+    generate_perso_level();
+    click = 0;
+    while (checkIfEnd() || isLineCollapsing()) {
+        resetAllTabs(false);
+        generate_perso_level();
+    }
+}
+
+function buttonSpin() {
+    document.querySelector("#generate_button_perso").childNodes[3].classList = "fa fa-spinner";
+    setTimeout(loadPerso, 10);
+}
+
+function createGameOne(niveau) {
+    windowWidth = window.innerWidth;
+    windowHeight = window.innerHeight;
+    var numberColonne1 = 2;
+    var numberColonne2 = 1;
+    var isEtNonAllowed = false;
+    var isOuNonAllowed = false;
+    var isNotAllowed = false;
+    var isOuAllowed = false;
+    double = false;
+    var firstTime = [];
+    switch (niveauActuel) {
+        case 1:
+            firstTime.push("et");
+            break;
+        case 2:
+            numberColonne1 = 2;
+            numberColonne2 = 0;
+            timeEnd = 15;
+            break;
+        case 3:
+            numberColonne1 = 2;
+            numberColonne2 = 1;
+            timeEnd = 15;
+            break;
+        case 4:
+            numberColonne1 = 3;
+            numberColonne2 = 1;
+            timeEnd = 20;
+            break;
+        //Fin premiere serie
+        case 5:
+            firstTime.push("inv");
+            isNotAllowed = true;
+            timeEnd = 20;
+            break;
+        case 6:
+            numberColonne1 = 2;
+            numberColonne2 = 0;
+            isNotAllowed = true;
+            timeEnd = 20;
+            break;
+        case 7:
+            numberColonne1 = 2;
+            numberColonne2 = 1;
+            isNotAllowed = true;
+            timeEnd = 20;
+            break;
+        case 8:
+            numberColonne1 = 3;
+            numberColonne2 = 1;
+            isNotAllowed = true;
+            timeEnd = 20;
+            break;
+        case 9:
+            numberColonne1 = 7;
+            numberColonne2 = 10;
+            isNotAllowed = true;
+            isOuAllowed = true;
+            double = true;
+            timeEnd = 5000;
+            break;
+        case 10:
+            firstTime.push("ou");
+            break;
+        case 11:
+            isNotAllowed = true;
+            isOuAllowed = true;
+            numberColonne1 = 3;
+            numberColonne2 = 1;
+            timeEnd = 20;
+            break;
+        case 12:
+        case 13:
+        case 14:
+            isNotAllowed = true;
+            isOuAllowed = true;
+            numberColonne1 = 3;
+            numberColonne2 = 1;
+            timeEnd = 20;
+            break;
+        default:
+            isEtNonAllowed = true;
+            isOuNonAllowed = true;
+            timeEnd = 20;
+            numberColonne1 = 4;
+            numberColonne2 = 4;
+            break;
+    }
+    isTuto = false;
+    createStage("play_container");
+    stage.add(layer);
+    colonneTot = 3;
+    numberPerColonne = [numberColonne1, numberColonne2, 2];
+    var logiqueCount = 0;
+
+    if (firstTime.length > 0) {
+        numberColonne1 = 1;
+        numberColonne2 = 0;
+        numberPerColonne = [numberColonne1, numberColonne2];
+        liveColonneNumber.push([]);
+        timeEnd = 20;
+        insertLogiqueColonne("logique" + logiqueCount, firstTime[0], 0);
+        if (allowedInfoPorte) {
+            openModal('firstTime' + firstTime[0]);
+            timer.pause();
+        }
+    } else {
+        for (let i = 0; i < colonneTot; i++) {
+            liveColonneNumber.push([]);
+        }
+        for (let i = 0; i < colonneTot; i++) {
+            for (let j = 0; j < numberPerColonne[i]; j++) {
+                logiqueCount++;
+                let type = null;
+                let x = 1;
+                if (isOuAllowed) x++;
+                if (isEtNonAllowed) x++;
+                if (isOuNonAllowed) x++;
+                if (isNotAllowed) x++;
+                let numberRandom = getRandomArbitrary(0, x);
+                switch (numberRandom) {
+                    case 0:
+                        type = "et";
+                        break;
+                    case 1:
+                        type = "inv";
+                        break;
+                    case 2:
+                        type = "ou";
+                        break;
+                    case 3:
+                        type = "etnon";
+                        break;
+                    case 4:
+                        type = "nonou";
+                        break;
+                }
+                insertLogiqueColonne("logique" + logiqueCount, type, i);
+            }
+        }
+    }
+
+    logiques.forEach(function (element) {
+        createLinkAuto(element.name);
+    });
+    initEndGame();
+}
diff --git a/site/vue/js/main.js b/site/vue/js/main.js
index 67bda6a..dd09382 100644
--- a/site/vue/js/main.js
+++ b/site/vue/js/main.js
@@ -83,154 +83,6 @@ function gameOne() {
     //checkAllSortieLogique();
 }
 
-function createGameOne(niveau) {
-    windowWidth = window.innerWidth;
-    windowHeight = window.innerHeight;
-    var numberColonne1 = 2;
-    var numberColonne2 = 1;
-    var isEtNonAllowed = false;
-    var isOuNonAllowed = false;
-    var isNotAllowed = false;
-    var isOuAllowed = false;
-    double = false;
-    var firstTime = [];
-    switch (9) {
-        case 1:
-            firstTime.push("et");
-            break;
-        case 2:
-            numberColonne1 = 2;
-            numberColonne2 = 0;
-            timeEnd = 15;
-            break;
-        case 3:
-            numberColonne1 = 2;
-            numberColonne2 = 1;
-            timeEnd = 15;
-            break;
-        case 4:
-            numberColonne1 = 3;
-            numberColonne2 = 1;
-            timeEnd = 20;
-            break;
-        //Fin premiere serie
-        case 5:
-            firstTime.push("inv");
-            isNotAllowed = true;
-            timeEnd = 20;
-            break;
-        case 6:
-            numberColonne1 = 2;
-            numberColonne2 = 0;
-            isNotAllowed = true;
-            timeEnd = 20;
-            break;
-        case 7:
-            numberColonne1 = 2;
-            numberColonne2 = 1;
-            isNotAllowed = true;
-            timeEnd = 20;
-            break;
-        case 8:
-            numberColonne1 = 3;
-            numberColonne2 = 1;
-            isNotAllowed = true;
-            timeEnd = 20;
-            break;
-        case 9:
-            numberColonne1 = 7;
-            numberColonne2 = 4;
-            isNotAllowed = true;
-            isOuAllowed = true;
-            double = true;
-            timeEnd = 5000;
-            break;
-        case 10:
-            firstTime.push("ou");
-            break;
-        case 11:
-            isNotAllowed = true;
-            isOuAllowed = true;
-            numberColonne1 = 3;
-            numberColonne2 = 1;
-            timeEnd = 20;
-            break;
-        case 12:
-        case 13:
-        case 14:
-            isNotAllowed = true;
-            isOuAllowed = true;
-            numberColonne1 = 3;
-            numberColonne2 = 1;
-            timeEnd = 20;
-            break;
-        default:
-            isEtNonAllowed = true;
-            isOuNonAllowed = true;
-            timeEnd = 20;
-            numberColonne1 = 4;
-            numberColonne2 = 4;
-            break;
-    }
-    isTuto = false;
-    createStage("play_container");
-    stage.add(layer);
-    colonneTot = 3;
-    numberPerColonne = [numberColonne1, numberColonne2, 2];
-    var logiqueCount = 0;
-
-    if (firstTime.length > 0) {
-        numberColonne1 = 1;
-        numberColonne2 = 0;
-        numberPerColonne = [numberColonne1, numberColonne2];
-        liveColonneNumber.push([]);
-        timeEnd = 20;
-        insertLogiqueColonne("logique" + logiqueCount, firstTime[0], 0);
-        if (allowedInfoPorte) {
-            openModal('firstTime' + firstTime[0]);
-            timer.pause();
-        }
-    } else {
-        for (let i = 0; i < colonneTot; i++) {
-            liveColonneNumber.push([]);
-        }
-        for (let i = 0; i < colonneTot; i++) {
-            for (let j = 0; j < numberPerColonne[i]; j++) {
-                logiqueCount++;
-                let type = null;
-                let x = 1;
-                if (isOuAllowed) x++;
-                if (isEtNonAllowed) x++;
-                if (isOuNonAllowed) x++;
-                if (isNotAllowed) x++;
-                let numberRandom = getRandomArbitrary(0, x);
-                switch (numberRandom) {
-                    case 0:
-                        type = "et";
-                        break;
-                    case 1:
-                        type = "inv";
-                        break;
-                    case 2:
-                        type = "ou";
-                        break;
-                    case 3:
-                        type = "etnon";
-                        break;
-                    case 4:
-                        type = "nonou";
-                        break;
-                }
-                insertLogiqueColonne("logique" + logiqueCount, type, i);
-            }
-        }
-    }
-
-    logiques.forEach(function (element) {
-        createLinkAuto(element.name);
-    });
-    initEndGame();
-}
 
 function initEndGame() {