diff --git a/main.js b/main.js
index 914a34a..15e3d55 100644
--- a/main.js
+++ b/main.js
@@ -53,6 +53,8 @@ async function createWindow() {
             reconnection: false
     
         })
+
+       
     
 
     }
@@ -96,7 +98,7 @@ async function createWindow() {
 
         } else {
             fs.rmSync( __dirname + path.sep + "settings.json")
-            win.webContents.send("connectSuccess")
+            win.webContents.send("connectFailed")
 
         }
     })
@@ -136,12 +138,20 @@ async function createWindow() {
         const settings = {}
         settings["token"] = token
 
-        fs.writeFileSync(  __dirname + path.sep + "settings.json", JSON.stringify(settings, null, 2))
-        log.client("Saving token in settings !")
-        log.client("Discord Auth : Redirection fait avec succes !")
-        win.loadFile("templates/app/app.html")
-        askUpdateState()
-        win.restore()
+       
+
+            
+            fs.writeFile(__dirname + path.sep + "settings.json", JSON.stringify(settings, null, 2), (err) => {
+
+                log.client("Saving token in settings !")
+                log.client("Discord Auth : Redirection fait avec succes !")
+                win.loadFile("templates/app/app.html")
+                askUpdateState()
+                win.restore()
+            })
+            
+    
+
     })
 
     socket.on("updateState", (data) => {
@@ -174,6 +184,13 @@ async function createWindow() {
 
     })
 
+    ipc.on("loop", () => {
+
+        const settings = require( __dirname + path.sep + "settings.json")
+        log.client("Control : Loop Requested !")
+        socket.emit("loop", settings.token)
+    })
+
     ipc.on("forward", () => {
 
         const settings = require( __dirname + path.sep + "settings.json")
@@ -225,6 +242,27 @@ async function createWindow() {
         socket.emit("listClear", settings.token)
     })
 
+    ipc.on("restart", () => {
+
+        const settings = require( __dirname + path.sep + "settings.json")
+        log.client("Control : Restart Bot Requsted !")
+        socket.emit("restart", settings.token)
+    })
+
+    ipc.on("seek", (ev, pos) => {
+
+        const settings = require( __dirname + path.sep + "settings.json")
+        log.client("Control : Seek Bot Requsted !")
+        socket.emit("seek", settings.token, pos)
+    })
+
+    ipc.on("volume", (ev, pos) => {
+
+        const settings = require( __dirname + path.sep + "settings.json")
+        log.client("Control : Volume Bot Requsted !")
+        socket.emit("volume", settings.token, pos)
+    })
+
     ipc.on("signout", () => {
 
         if(fs.statSync(__dirname + path.sep + "settings.json")) {
@@ -261,10 +299,11 @@ async function createWindow() {
     askUpdateState()
     })  
 
-    function askUpdateState() {
+    async function askUpdateState() {
 
         const settings = require( __dirname + path.sep + "settings.json")
-        socket.emit("getState", settings.token)
+        console.log(settings.token)
+        await socket.emit("getState", settings.token)
     }
 
     socket.on("disconnect", async () => {
diff --git a/package.json b/package.json
index 1af1d36..3feb2fb 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,13 @@
 {
   "name": "subsonics-manager",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Manager for subsonics",
   "main": "main.js",
   "scripts": {
     "start": "electron .",
-    "build": "electron-packager . submanager-app --platform='win32' --out='./dist/' --icon='./src/logo.ico'  --overwrite --ignore='(settings.json)'",
-    "dev": "set DEV=true& electron ."
+    "dev": "set DEV=true& electron .",
+    "build": "electron-packager . submanager-app --platform='win32' --out='./dist/' --icon='./src/logo.ico'  --overwrite --ignore='(settings.json)' && iscc 'C:\\Users\\picot\\OneDrive\\Bureau\\Developement\\SubSonics BOT\\manager\\dist\\compilescript.iss' "
+  
   },
   "repository": {
     "type": "git",
diff --git a/templates/app/app.css b/templates/app/app.css
index f5cab04..daefaee 100644
--- a/templates/app/app.css
+++ b/templates/app/app.css
@@ -20,6 +20,37 @@
 
 }
 
+.exitNotShow {
+
+    display: none;
+}
+
+.number {
+
+    
+    font-size: 11px;
+    color: black;
+    box-shadow: 1px 1px 5px white;
+    border: none;
+    border-radius: 100%;
+    text-align: center;
+    justify-content: center;
+    vertical-align: middle;
+    width: 14px;
+    height: 14px;
+    background-color: white;
+    margin: 0;
+    position: absolute; /* Position the badge within the relatively positioned button */
+    top: 0;
+    right: -2px;
+
+}
+
+.list {
+    display: inline-block;
+    position: relative;
+}
+
 .controller-box {
 
     display: flex;
@@ -60,7 +91,87 @@
     color: red;
     border: none;
     transition: all 0.2s ease 0s;
-    width: 13%;
+
+}
+
+.act {
+
+    display: flex;
+    flex-direction: row;
+}
+
+.settings {
+
+    background-color: transparent;
+    color: white;
+    border: none;
+    transition: all 0.2s ease 0s;
+    height: 30px;
+    width: 30px;
+    margin-right: 5px;
+
+}
+
+.settings:hover {
+    border-radius: 100%;
+    background-color: rgb(46, 196, 255);
+    border-color: transparent;
+    color: black;
+
+}
+
+.settings:active {
+
+    background-color: transparent;
+    color: rgb(46, 196, 255);
+    border: none;
+    transition: all 0.2s ease 0s;
+   
+}
+
+.restart {
+
+    font-family: 'Open Sans', sans-serif !important; 
+    background-color: transparent;
+    border: solid;
+    border-radius: 15px;
+    padding: 2%;
+    border-color: rgb(46, 196, 255);
+    color: white;
+    transition: all 0.2s ease 0s;
+}
+
+.restart:hover {
+
+    color: black;
+    background-color: rgb(46, 196, 255);
+    box-shadow: 2px 2px 5px rgb(46, 196, 255);
+}
+
+.restart:active {
+
+    background-color: transparent;
+    color: white;
+}
+
+.stLine {
+
+    display: flex;
+    flex-direction: row;
+    text-align: start;
+    align-items: center;
+}
+
+.stPct {
+
+   text-align: center;
+}
+
+
+.stLine p {
+
+    width: 100px;
+    margin: 0;
 }
 
 .online-light {
@@ -77,6 +188,12 @@
 
 }
 
+.numtext {
+    display: inline-block;
+    padding-top: 2px !important;
+    padding-left: 1px;
+}
+
 .thumbnail {
 
     width: 30px;
@@ -90,6 +207,11 @@
 
 }
 
+.grised {
+
+    filter : invert(50%);
+}
+
 
 .playbar {
 
@@ -110,9 +232,68 @@
     text-align: center;
     align-items: center;
     justify-content: space-between;
+    padding-bottom: 0;
 
 }
 
+.sbar {
+    width: 100%;
+    padding: 1%;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    justify-content: space-between;
+   
+}
+
+.durationText {
+
+    margin: 0;
+    margin-left: 5px;
+}
+
+input[type=range] {
+    height: 26px;
+    -webkit-appearance: none;
+    margin: 10px 0;
+    width: 100%;
+    background-color: transparent;
+    -webkit-user-select: none;
+  }
+  input[type=range]:focus {
+    outline: none;
+  }
+  input[type=range]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 8px;
+    cursor: pointer;
+    transition: 0.2s;
+    box-shadow: 1px 1px 2px #000000;
+    background: #B8B8B8;
+    border-radius: 50px;
+    border: 0px solid #000000;
+  }
+  input[type=range]::-webkit-slider-thumb {
+    box-shadow: 1px 1px 1px #000000;
+    border: 1px solid #000000;
+    height: 13px;
+    width: 13px;
+    border-radius: 50px;
+    background: #FFFFFF;
+    cursor: pointer;
+    -webkit-appearance: none;
+    margin-top: -3px;
+  }
+  input[type=range]:focus::-webkit-slider-runnable-track {
+    background: #B8B8B8;
+  }
+
+  input[type=range]:focus::-webkit-sl {
+
+
+  }
+ 
+
 .secondary {
 
     background-color: #171A21;
@@ -211,7 +392,7 @@
 
     color: rgb(31, 30, 30);
     text-align: center;
-    font-size: 13px;
+    font-size: 10px;
 
 }
 
@@ -311,4 +492,9 @@
 .finder:hover {
 
     box-shadow: 1px 1px 5px white;
+}
+
+.cp {
+
+    margin: 0;
 }
\ No newline at end of file
diff --git a/templates/app/app.html b/templates/app/app.html
index 91b4e61..ef2b557 100644
--- a/templates/app/app.html
+++ b/templates/app/app.html
@@ -18,8 +18,6 @@
     </header>
     <div class="content">
         
-       
-       
         <div class="box">
             
                 <span id="music_img"><img class="thumbnail" src="../common/Mediamodifier-Design.svg"></span>
@@ -35,8 +33,13 @@
             </div>
             <div class="bbar">
                 <button id="search" class="third"><i class="fa fa-search"></i></button>
+                <button id="loop" class="third"><i class="fa fa-retweet"></i></button>
                 <span id="exitSpan" class="exit"></span> 
-                <button id="list" class="third"><i class="fa fa-list-ol"></i></button>
+                <button id="list" class="list third"><i class="fa fa-list-ol"><p class="number" id="listNumber"></p></i></button>
+            </div>
+            <div class="sbar">
+                <input id="duration" type="range" value="0" max="100">
+                <p id="durationText" class="durationText">0:00/0:00</p>
             </div>
         </div>
         <div class="box">
@@ -44,7 +47,11 @@
                 <span id="logo"><img class="logo" src="../../src/logo.png"></span>
                 <span id="username"></span>
             </div>
-            <button id="signout" class="signout"><i class="fas fa-sign-out"></i></button>
+            <div class="act">
+                <button id="settings" class="settings"><i class="fas fa-gear"></i></button>
+                <button id="signout" class="signout"><i class="fas fa-sign-out"></i></button>
+            </div>
+            
         </div>
     </div>
     <dialog id="listDialog" class="menu">
@@ -70,10 +77,27 @@
         <div id="searchContent">
            
         </div>
+    </dialog>
+    <dialog id="stDialog" class="menu">
+        <div class="menuheader">
+            <p class="listHeader"><i style="margin-right: 3px" class="fa fa-gear"></i> Paramètres</p>
+            <button class="buttonClose" id="stClose"><i class="fas fa-times"></i></button>
+        </div>
+        <div class="stLine">
+            <p>Volume :</p>
+            <input type="range" id="volCursor">
+            <p class="stPct" id="volPct">0%</p>
+        </div>
+        <div class="stLine">
+            <p>Actions :</p>
+            <button id="restart" class="restart"><i class="fas fa-power-off"></i> Redémarrer</button>
+        </div>
+       
+        
     </dialog>
     <div class="infoVersion">
-        <p >Submanager - Version <span id="version"></span></p>
-        <p >Fait avec 💖 par Raphix</p>
+        <p class="cp">Submanager - Version <span id="version"></span></p>
+        <p style="margin: 0;">Fait avec 💖 par Raphix</p>
     </div>
     
 
diff --git a/templates/app/app.js b/templates/app/app.js
index d377c94..e526b87 100644
--- a/templates/app/app.js
+++ b/templates/app/app.js
@@ -17,6 +17,7 @@ const listDialog = document.getElementById("listDialog")
 const listClose = document.getElementById("listClose")
 const listClear = document.getElementById("listClear")
 const listcontent = document.getElementById("listContent")
+const listNumber = document.getElementById("listNumber")
 
 const search = document.getElementById("search")
 const searchBar = document.getElementById("searchBar")
@@ -24,6 +25,147 @@ const searchDialog = document.getElementById("searchDialog")
 const searchClose = document.getElementById("searchClose")
 const searchcontent = document.getElementById("searchContent")
 
+const durationBar = document.getElementById("duration")
+const durationText = document.getElementById("durationText")
+
+
+const stDialog = document.getElementById("stDialog")
+const settings = document.getElementById("settings")
+const stClose = document.getElementById("stClose")
+
+const volCursor = document.getElementById("volCursor")
+const volPct =  document.getElementById("volPct")
+const restart = document.getElementById("restart")
+
+restart.addEventListener("click", () => {
+
+    stDialog.close()
+    ipc.send("restart")
+
+})
+
+var durationAll = 0
+var durationProgress = 0
+var isPlaying = false
+var changeMusic = null
+
+
+settings.addEventListener("click", () => {
+
+    stDialog.showModal()
+
+})
+
+stClose.addEventListener("click", () => {
+
+    stDialog.close()
+})
+
+durationBar.value = 0
+listNumber.classList.add("exitNotShow")
+
+
+
+function setTime() {
+
+
+
+        durationBar.max = durationAll
+        durationProgress += 1000 
+        durationBar.value = durationProgress
+
+        
+        const maxhours = Math.floor(durationAll / 3600000);
+        const nowhours = Math.floor(durationProgress / 3600000);
+
+        
+
+        var maxmin = Math.trunc(durationAll / 60000) - (Math.floor(durationAll / 60000 / 60) * 60);
+        var maxsec = Math.floor(durationAll / 1000) - (Math.floor(durationAll / 1000 / 60) * 60);
+        var nowmin = Math.trunc(durationProgress / 60000) - (Math.floor(durationProgress / 60000 / 60) * 60);
+        var nowsec = Math.floor(durationProgress / 1000) - (Math.floor(durationProgress / 1000 / 60) * 60);
+
+        console.log(durationAll)
+        console.log(durationProgress)
+        console.log("---------------------")
+
+        var now = ""
+        var max = ""
+
+
+        if (maxmin < 10) {
+            maxmin = `0${maxmin}`;
+        }
+
+        if (nowmin < 10) {
+            nowmin = `0${nowmin}`;
+        }
+
+        if (maxsec < 10) {
+            maxsec = `0${maxsec}`;
+        }
+
+        if (nowsec < 10) {
+            nowsec = `0${nowsec}`;
+        }
+
+        if(maxhours != 0) {
+           
+            max =  maxhours + ":" + maxmin + ":" + maxsec
+        } else {
+            max =  maxmin + ":" + maxsec
+           
+        }
+
+        if(nowhours != 0) {
+           
+            now =  nowhours + ":" + nowmin + ":" + nowsec
+        } else {
+            now =  nowmin + ":" + nowsec
+           
+        }
+
+        
+
+        durationText.innerHTML = now + "/" + max
+}
+
+
+setInterval(() => {
+
+    if(isPlaying == true) {
+        setTime()
+
+    }
+    
+   
+    
+
+}, 1000)
+
+
+durationBar.addEventListener("change", () => {
+
+    ipc.send("seek", durationBar.value)
+
+})
+
+volCursor.addEventListener("change", () => {
+
+    ipc.send("volume", volCursor.value)
+
+})
+
+const loop = document.getElementById("loop")
+
+
+
+loop.addEventListener("click", () => {
+
+    ipc.send("loop")
+})
+
+
 listClear.addEventListener("click", () => {
     
     ipc.send("listClear")
@@ -38,7 +180,6 @@ searchBar.addEventListener("change", () => {
 })
 
 ipc.on("findResult", (ev, list) => {
-
  
     if(list.tracks != null) {
         const data = list.tracks
@@ -151,19 +292,55 @@ forward.addEventListener("click" ,() => {
 })
 
 ipc.on("actualize", (ev, data) => {
+
+    
+    isPlaying = false
+
+  
+
+  
     console.log(data)
     onlineNumber.innerHTML = data.onlineNumber
 
-    if(data.playing == 1) {
-        play.innerHTML = '<i style="width: 25px; height: 25px" class="fas fa-pause"></i>'
+    if(data.loop == true) {
+        loop.innerHTML = '<i class="third-join fa fa-retweet"></i>'
 
     } else {
 
+        loop.innerHTML = '<i class="fa fa-retweet"></i>'
+    }
+
+
+   
+
+   
+
+    if(data.playing == 1) {
+        play.innerHTML = '<i style="width: 25px; height: 25px" class="fas fa-pause"></i>'
+        isPlaying = true
+
+    } else {
+
+      
         play.innerHTML = '<i style="width: 25px; height: 25px" class="fas fa-play"></i>'
+        isPlaying = false
+    }
+
+    if(data.volume) {
+        volCursor.step = 1
+        volCursor.max = 100
+        volCursor.value = Math.trunc(data.volume / 10)
+        volPct.innerHTML = Math.trunc(data.volume / 10) + "%"
+
+    } else {
+
+        volPct.innerHTML = "0%"
     }
 
     if(data.isOnline == true) {
 
+        exitSpan.classList.remove("exitNotShow")
+        loop.classList.remove("exitNotShow")
         exitSpan.innerHTML = ' <button id="exit" class="third-leave"><i class="fa fa-phone-slash"></i></button>'
         
         const exit = document.getElementById("exit")
@@ -173,9 +350,24 @@ ipc.on("actualize", (ev, data) => {
             ipc.send("exitBot")
 
         })
-    } else {
 
+        volCursor.disabled = false
+        volCursor.classList.remove("grised")
+
+       
+        durationBar.disabled = false
+        durationBar.classList.remove("grised")
+    } else {
+        exitSpan.classList.add("exitNotShow")
+        loop.classList.add("exitNotShow")
         exitSpan.innerHTML = ""
+        durationBar.disabled = true
+        durationBar.classList.add("grised")
+        durationBar.value = 0
+
+        volCursor.disabled = true
+        volCursor.classList.add("grised")
+        volCursor.value = 0
     }
 
     
@@ -183,19 +375,23 @@ ipc.on("actualize", (ev, data) => {
     if(data.queue != null) {
 
         var contentToPush = new Array()
+        var queueNum = 0
 
         for(var title of data.queue) {
-            
+            queueNum += 1
+            console.log(queueNum)
             console.log(data.queue.indexOf(title) + " - " + title.title)
             contentToPush.push(' <div class="song"> <img class="thumbnail" src="' + title.thumbnail + '"><div class="titleSong"> <p class="listTitle">' + title.title + '</p></div> <button id="' + data.queue.indexOf(title) + '_delete" class="buttonClose"><i class="fa fa-trash"></i></button> </div>')
         }
 
         if(contentToPush.join("") == "") {
-
+           
+            listNumber.classList.add("exitNotShow")
             listcontent.innerHTML = '<p class="error">Aucun morceau dans la liste de lecture !</p>'
         
         } else {
-
+            listNumber.innerHTML = '<span class="numtext">' + queueNum + '</span>'
+            listNumber.classList.remove("exitNotShow")
             listcontent.innerHTML = contentToPush.join("")
         }
 
@@ -215,7 +411,7 @@ ipc.on("actualize", (ev, data) => {
     } else {
 
         listcontent.innerHTML = '<p class="error">Aucun morceau dans la liste de lecture !</p>'
-
+        listNumber.classList.add("exitNotShow")
     }
 
     if(data.current == null) {
@@ -223,10 +419,53 @@ ipc.on("actualize", (ev, data) => {
         musicURL.innerHTML = '<img class="thumbnail" src="../common/Mediamodifier-Design.svg">'
         musicTitle.innerHTML = "Aucun titre joué"
     } else {
-
+        setTime()
         musicURL.innerHTML = '<img class="thumbnail" src="' + data.current.thumbnail + '">'
         musicTitle.innerHTML = data.current.title
     }
+
+    
+    if(data.changeMusic != changeMusic && changeMusic != null) {
+
+        changeMusic = data.changeMusic
+        durationProgress = 0
+        setTime()
+    }
+
+    if(data.durationAll) {
+        isPlaying = true
+        durationBar.disabled = false
+        durationBar.classList.remove("grised")
+        setTime()
+       
+        durationAll = data.durationAll
+        durationProgress = data.durationNow
+        durationBar.value = durationProgress
+
+    } else {
+        isPlaying = false
+        durationAll = 0
+        durationProgress = 0
+        durationBar.disabled = true
+        durationBar.classList.add("grised")
+        durationBar.value = 0
+        durationText.innerHTML = "=:==/=:=="
+
+    }
+
+    
+    if(data.playing == 1) {
+        play.innerHTML = '<i style="width: 25px; height: 25px" class="fas fa-pause"></i>'
+        isPlaying = true
+
+    } else {
+
+      
+        play.innerHTML = '<i style="width: 25px; height: 25px" class="fas fa-play"></i>'
+        isPlaying = false
+    }
+
+
 })
 
 ipc.on("updateData", (ev, data) => {
diff --git a/templates/common/common.css b/templates/common/common.css
index a5b7014..51e8a91 100644
--- a/templates/common/common.css
+++ b/templates/common/common.css
@@ -18,8 +18,7 @@ body {
     -webkit-app-region: drag;
     width: 100%;
     padding: 5% !important;
-   
- 
+    padding-bottom: 0% !important;
 }
 
 
@@ -97,5 +96,6 @@ header {
 .content {
 
     padding: 5%;
+    padding-top: 0;
 
 }
\ No newline at end of file
diff --git a/templates/login/login.css b/templates/login/login.css
index 03ec695..7f37fd8 100644
--- a/templates/login/login.css
+++ b/templates/login/login.css
@@ -5,15 +5,16 @@
     border: solid;
     border-radius: 15px;
     padding: 2%;
-    border-color: #afb3f7;
+    border-color: rgb(46, 196, 255);
     color: white;
     transition: all 0.2s ease 0s;
 }
 
 .buttonTryAgain:hover {
 
-    background-color: #afb3f7;
-    box-shadow: 2px 2px 5px #afb3f7;
+    color: black;
+    background-color: rgb(46, 196, 255);
+    box-shadow: 2px 2px 5px rgb(46, 196, 255);
 }
 
 .buttonTryAgain:active {
@@ -21,6 +22,10 @@
     background-color: transparent;
 }
 
+.top-title {
+
+    padding: 5% !important;
+}
 
 .box {
 
@@ -28,11 +33,11 @@
     text-align: center;
     display: flex;
     flex-direction: column;
-    background-color: rgb(122, 147, 172);
+    background-color: rgb(38, 37, 37);
     padding: 10%;
     color: white;
     border-radius: 15px;
-    box-shadow: 2px 2px 5px rgb(122, 147, 172) ;
+    box-shadow: 2px 2px 5px rgb(38, 37, 37) ;
     -webkit-user-select: none;
     user-select: none;
    
@@ -71,6 +76,6 @@
  
 .infoSpan {
 
-    color: rgb(40, 40, 40);
+    color: white;
     font-size: 12px;
 }
\ No newline at end of file