diff --git a/static/css/index.css b/static/css/index.css
index 2ad1a70..dfbb6a1 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -38,6 +38,13 @@ body {
     color: white;
 }
 
+.app > label {
+    color: white;
+    font-size: 24px;
+    font-weight: bold;
+    margin-top: 8px;
+}
+
 .app > h1 {
     color: yellow;
 }
@@ -56,7 +63,7 @@ body {
     resize: vertical;
 }
 
-.buttons > button {
+.app-nav > button {
     font-size: 16px;
     margin: 4px 0 4px 0;
     padding: 5px;
@@ -66,19 +73,19 @@ body {
     border-radius: 5px;
 }
 
-.buttons {
+.app-nav {
     width: 100%;
     display: grid;
     gap: 5px;
     grid-template-columns: repeat(2, 50% [col-start]);
 }
 
-.left {
+.left-button {
     grid-column-start: 1;
     grid-column-end: 2;
 }
 
-.right {
+.right-button {
     grid-column-start: 2;
     grid-column-end: 3;
 }
diff --git a/static/html/index.html b/static/html/index.html
index 61f336a..d7ec892 100644
--- a/static/html/index.html
+++ b/static/html/index.html
@@ -11,7 +11,23 @@
     <link rel="stylesheet" href="static/css/index.css">
 </head>
 <body>
-    <div id="app" class="app"></div>
+    <div id="app" class="app">
+        <h1 id="app_title">Vote +</h1>
+        <label for="player_id">Pour qui votes tu?</label>
+        <select id="player_id"></select>
+        <label for="nickname">As-tu un surnom à lui donner?</label>
+        <input type="text" id="nickname">
+        <label for="reason">Pourquoi votes-tu pour lui?</label>
+        <textarea id="reason"></textarea>
+        <div id="app-nav" class="app-nav">
+            <button id="prev" hidden="hidden" class="left-button">Précédent</button>
+            <button id="next" class="right-button">Suivant</button>
+        </div>
+    </div>
+    <div id="notification" class="notification" hidden="hidden">
+        <h1 id="title"></h1>
+        <h2 id="detail"></h2>
+    </div>
     <div id="footer" class="footer">
         <a href="/">Voter</a>
         <a href="/results">Résultats</a>
diff --git a/static/js/index.js b/static/js/index.js
index 4644b49..1159076 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -1,132 +1,71 @@
-Vote = {
-    plus_player_id: null,
-    plus_nickname: "",
-    plus_reason: "",
-    minus_player_id: null,
-    minus_nickname: "",
-    minus_reason: ""
+let vote = {
+    plusId: null,
+    plusNickname: "",
+    plusReason: "",
+    minusId: null,
+    minusNickname: "",
+    minusReason: ""
 }
 
-let _ = load_page(0)
+let current_page = 0;
 
-async function load_page(id) {
-    if (get_state()) {
-        confirm_popup();
-        return;
-    }
-    let players = await fetch("data/players").then(r => r.json());
-
-    const header = document.createElement("h1");
-    const buttons = document.createElement("div");
-    buttons.className = "buttons";
-
-    const idlbl = document.createElement("h2");
-    idlbl.textContent = "Pour qui votes-tu?"
-    const id_select = document.createElement("select");
-    const nickname = document.createElement("h2");
-    nickname.textContent = "As-tu un surnom à lui donner?";
-    const nickname_input = document.createElement("input");
-    nickname_input.inputMode = "text";
-    nickname_input.maxLength = 100;
-    const reason = document.createElement("h2");
-    reason.textContent = "Pourquoi votes-tu pour lui?";
-    const reason_input = document.createElement("textarea");
-    reason_input.maxLength = 1000;
-
-    players.forEach((player) => {
-        const player_option = document.createElement("option");
-        player_option.value = player["id"];
-        player_option.innerText = player["name"];
-        id_select.appendChild(player_option);
+async function main() {
+    let players = await fetch("/data/players").then(r => r.json());
+    let select = document.getElementById("player_id");
+    let nickname = document.getElementById("nickname");
+    let reason = document.getElementById("reason");
+    players.forEach((x) => {
+        let option = document.createElement("option");
+        option.value = x["id"];
+        option.textContent = x["name"];
+        select.append(option);
     })
-
-    if (id) {
-        id_select.value = Vote.minus_player_id;
-        nickname_input.value = Vote.minus_nickname;
-        reason_input.value = Vote.minus_reason;
-        header.textContent = "Vote -";
-        let previous = document.createElement("button");
-        previous.textContent = "Précédent";
-        previous.addEventListener("click", () => {
-            Vote.minus_player_id = id_select.value;
-            Vote.minus_nickname = nickname_input.value;
-            Vote.minus_reason = reason_input.value;
-            load_page(0)
-        });
-        let submit = document.createElement("button");
-        submit.textContent = "A Voté";
-        submit.addEventListener("click", async () => {
-	    if (Vote.plus_id === null || id_select.value === "") {
-		const popUp = document.createElement("div");
-		popUp.className = "popup";
-		const message = document.createElement("h2");
-		message.textContent = "Tu dois dire pour qui tu vote!";
-		const page = document.body;
-		popUp.append(message);
-		page.append(popUp);
-            } else {
-                Vote.minus_player_id = id_select.value;
-                Vote.minus_nickname = nickname_input.value;
-                Vote.minus_reason = reason_input.value;
-                if (await send_vote(Vote)) {
-                    confirm_popup();
-                    save_state();
-                }
-	    }
+    select.value = null;
+    let rightButton = document.getElementById("next");
+    let leftButton = document.getElementById("prev");
+    let title = document.getElementById("app_title");
+    // better to do event listeners onchange with condition currentpage
+    // such as currentpage gets changed before reassigning values
+    // should work
+    rightButton.addEventListener("click", () => {
+        if (current_page) {
+            vote.minusId = parseInt(select.value);
+            select.value = null;
+            vote.minusNickname = nickname.value;
+            nickname.value = "";
+            vote.minusReason = reason.value;
+            reason.value = "";
+            console.log(vote);
+        } else {
+            rightButton.textContent = "À voté!";
+            title.textContent = "Vote -";
+            current_page = 1;
+            vote.plusId = parseInt(select.value);
+            select.value = null;
+            vote.plusNickname = nickname.value;
+            nickname.value = "";
+            vote.plusReason = reason.value;
+            reason.value = "";
+            leftButton.hidden = false;
+            select.value = vote.minusId;
+            nickname.value = vote.minusNickname;
+            reason.value = vote.minusReason;
+        }
+    })
+    leftButton.addEventListener("click", () => {
+            if (current_page) {
+                current_page = 0;
+                title.textContent = "Vote +";
+                rightButton.textContent = "Suivant";
+                vote.minusId = parseInt(select.value);
+                vote.minusNickname = nickname.value;
+                vote.minusReason = reason.value;
+                leftButton.hidden = true;
+                select.value = vote.plusId;
+                nickname.value = vote.plusNickname;
+                reason.value = vote.plusReason;
+            }
         })
-        submit.className = "right";
-        previous.className = "left";
-        buttons.append(previous, submit);
-    } else {
-        id_select.value = Vote.plus_player_id;
-        nickname_input.value = Vote.plus_nickname;
-        reason_input.value = Vote.plus_reason;
-        header.textContent = "Vote +";
-        let next = document.createElement("button");
-        next.innerText = "Suivant";
-        next.addEventListener("click", () => {
-            Vote.plus_player_id = id_select.value;
-            Vote.plus_nickname = nickname_input.value;
-            Vote.plus_reason = reason_input.value;
-            load_page(1)
-        });
-        next.className = "right";
-        buttons.appendChild(next);
-    }
-
-
-    const div = document.getElementById("app");
-    div.innerHTML = "";
-    div.append(header, idlbl, id_select, nickname, nickname_input, reason, reason_input, buttons);
 }
 
-function confirm_popup() {
-    const div = document.getElementById("app");
-    div.innerText = "";
-    div.className = "confirm";
-    let success = document.createElement("h1");
-    success.textContent = "Merci d'avoir voté!"
-    let sub = document.createElement("h3");
-    sub.textContent = "Ton vote a bien été prit en compte!";
-    div.append(success, sub);
-}
-function save_state() {
-    // create cookie with expiration the next day.
-    let date = new Date(Date.now());
-    date.setDate(date.getDate() + 1);
-    date.setHours(0, 0, 0, 0);
-    document.cookie = "hasvoted=true; expires=" + date.toUTCString()
-}
-
-function get_state() {
-    // get the cookie if exists => already voted.
-    let cookie = document.cookie;
-    return cookie.includes("hasvoted=true");
-}
-async function send_vote(vote) { 
-    vote.plus_player_id = parseInt(vote.plus_player_id, 10);
-    vote.minus_player_id = parseInt(vote.minus_player_id, 10);
-    let body = JSON.stringify(vote);
-    let result = await fetch(window.location.href + "post", {method: "POST", body: body}).then(r => r.status);
-    return result === 200;
-}
+let _ = main();
\ No newline at end of file
