diff --git a/nextcloud_backup/rootfs/opt/nextcloud_backup/routes/api.js b/nextcloud_backup/rootfs/opt/nextcloud_backup/routes/api.js
index 99647ba..e553b34 100644
--- a/nextcloud_backup/rootfs/opt/nextcloud_backup/routes/api.js
+++ b/nextcloud_backup/rootfs/opt/nextcloud_backup/routes/api.js
@@ -45,41 +45,48 @@ router.get('/formated-remote-manual', function(req, res, next) {
 });
 
 
-router.post('/nextcloud-settings', function(req, res, next){
+router.post('/nextcloud-settings', function(req, res, next) {
     let settings = req.body;
-    if(settings.ssl != null && settings.host != null && settings.host != "" && settings.username != null && settings.password != null){
+    if (settings.ssl != null && settings.host != null && settings.host != "" && settings.username != null && settings.password != null) {
         webdav.setConf(settings);
-        webdav.confIsValid().then(()=>{
+        webdav.confIsValid().then(() => {
             res.status(201);
             res.send();
-        }).catch((err)=>{
+        }).catch((err) => {
             res.status(406);
-            res.json({message: err});
+            res.json({ message: err });
         });
-        
+
     }
-    else{
+    else {
         res.status(400);
         res.send();
     }
 });
 
-router.get('/nextcloud-settings', function(req, res, next){
+router.get('/nextcloud-settings', function(req, res, next) {
     let conf = webdav.getConf();
-    if(conf == null){
+    if (conf == null) {
         res.status(404);
         res.send();
     }
-    else{
+    else {
         res.json(conf);
     }
 });
 
 
 
-router.post('/manual-backup', function(req, res, next){
-    hassioApiTools.downloadSnapshot('e058caf6');
-    res.send(200);
+router.post('/manual-backup', function(req, res, next) {
+    let id = req.query.id;
+    hassioApiTools.downloadSnapshot(id)
+        .then(() => {
+            res.send(200);
+        })
+        .catch(() => {
+            res.send(500);
+        })
+
 });
 
 module.exports = router;
\ No newline at end of file
diff --git a/nextcloud_backup/rootfs/opt/nextcloud_backup/tools/hassioApiTools.js b/nextcloud_backup/rootfs/opt/nextcloud_backup/tools/hassioApiTools.js
index d181f93..c1bb568 100644
--- a/nextcloud_backup/rootfs/opt/nextcloud_backup/tools/hassioApiTools.js
+++ b/nextcloud_backup/rootfs/opt/nextcloud_backup/tools/hassioApiTools.js
@@ -19,7 +19,7 @@ function getSnapshots() {
         let option = {
             url: "http://hassio/snapshots",
             headers: { 'X-HASSIO-KEY': token },
-            json : true
+            json: true
         }
         request(option, (error, response, body) => {
             if (!error && response.statusCode == 200) {
@@ -54,28 +54,63 @@ function downloadSnapshot(id) {
             token = fallbackToken
         }
         let status = statusTools.getStatus();
-        status.status = "download";
-        status.progress = 0;
-        statusTools.setStatus(status);
-        let option = {
-            url: 'http://hassio/snapshots/' + id + '/download',
-            headers: { 'X-HASSIO-KEY': token },
+        checkSnap(id).then(() => {
+            status.status = "download";
+            status.progress = 0;
+            statusTools.setStatus(status);
+            let option = {
+                url: 'http://hassio/snapshots/' + id + '/download',
+                headers: { 'X-HASSIO-KEY': token },
+            }
+            progress(request(option))
+                .on('progress', (state) => {
+                    status.progress = state.percent;
+                    statusTools.setStatus(status);
+                })
+                .on('error', (error) => {
+                    status.status = "error";
+                    status.message = "Fail to downloadw Hassio snapshot (" + error + ")";
+                    status.error_code = 4;
+                    statusTools.setStatus(status);
+                    reject(error);
+                })
+                .on('end', () => {
+                    console.log('end')
+                    status.progress = 1;
+                    statusTools.setStatus(status);
+                })
+                .pipe(stream);
+        }).catch(() => {
+            status.status = "error";
+            status.message = "Fail to downloadw Hassio snapshot";
+            status.error_code = 4;
+            statusTools.setStatus(status);
+            reject();
+        });
+
+    });
+}
+
+
+function checkSnap(id) {
+    return new Promise((resolve, reject) => {
+        let token = process.env.HASSIO_TOKEN;
+        if (token == null) {
+            token = fallbackToken
         }
-        progress(request(option))
-        .on('progress', (state) => {
-            status.progress = state.percent;
-            statusTools.setStatus(status);
+        let option = {
+            url: 'http://hassio/snapshots/' + id + '/info',
+            headers: { 'X-HASSIO-KEY': token },
+            json: true
+        }
+        request(option, (error, response, body) => {
+            if (error  || response.statusCode != 200)
+                reject();
+            else
+                resolve();
         })
-        .on('error', (error)=>{
-            console.log("error")
-        })
-        .on('end', ()=>{
-            console.log('end')
-            status.progress = 1;
-            statusTools.setStatus(status);
-        })
-        .pipe(stream);
-    })
+    });
+
 }
 
 exports.getSnapshots = getSnapshots;
diff --git a/nextcloud_backup/rootfs/opt/nextcloud_backup/views/index.ejs b/nextcloud_backup/rootfs/opt/nextcloud_backup/views/index.ejs
index 3d8dd21..735ce97 100644
--- a/nextcloud_backup/rootfs/opt/nextcloud_backup/views/index.ejs
+++ b/nextcloud_backup/rootfs/opt/nextcloud_backup/views/index.ejs
@@ -98,8 +98,11 @@
           <div class="card-content">
             <span class="card-title white-text" style="font-weight: bold;">Status </span>
             <div class="divider"></div>
-            <h5 id="status" class="white-text"></h5>
+            <h6 id="status" class="white-text"></h6>
             <div id="status-second-line" class="truncate tooltipped" data-position="bottom" data-tooltip=""></div>
+            <div class="progress hide" id="progress">
+              <div class="determinate  light-green darken-2" style="width: 0%"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -204,7 +207,7 @@
 
 
   <div id="modal-loading" class="modal blue-grey darken-4 white-text">
-    <div class="modal-content " >
+    <div class="modal-content ">
       <div class="row">
         <div class="col s12 center">
           <h4>Loading</h4>
@@ -305,6 +308,11 @@
         console.log(id);
       });
 
+      $('.manual-back-list').click(function(){
+        let id = this.getAttribute('data-id');
+        manualBackup(id);
+      })
+
     });
   }
 
@@ -320,7 +328,7 @@
             printStatus('Idle', "Waiting for next backup.");
             break;
           case "download":
-            printStatus('DL Snap...', data.progress);
+            printStatusWithBar('Downloading Snapshot', data.progress);
         }
       }
 
@@ -333,8 +341,33 @@
     $('#status').empty();
     $('#status').html(status);
     $('#status-second-line').empty();
+    $('#status-second-line').removeClass('center');
     $('#status-second-line').html(secondLine);
     $('#status-second-line').attr('data-tooltip', secondLine)
+    $('#progress').addClass("hide");
+  }
+
+  function printStatusWithBar(status, progress){
+    $('#status').empty();
+    $('#status').html(status);
+    let secondLine = $('#status-second-line')
+    secondLine.empty();
+    secondLine.html(progress == -1 ? "Waiting..." : (Math.round(progress*100) + "%"));
+    secondLine.addClass("center");
+    secondLine.attr('data-tooltip', Math.round(progress*100) + "%");
+
+    let progressDiv = $('#progress');
+    progressDiv.removeClass("hide");
+    if(progress == -1){
+      progressDiv.children().removeClass('determinate');
+      progressDiv.children().addClass('indeterminate');
+    }
+    else{
+      progressDiv.children().removeClass('indeterminate');
+      progressDiv.children().addClass('determinate');
+      progressDiv.children().css('width', (progress*100) + "%");
+    }
+    
   }
 
   function listeners() {
@@ -375,6 +408,11 @@
       })
   }
 
+  function manualBackup(id){
+    $.post('./api/manual-backup?id=' + id);
+
+  }
+
 
   function getNextcloudSettings() {
     loadingModal.open();
diff --git a/nextcloud_backup/rootfs/opt/nextcloud_backup/views/localSnaps.ejs b/nextcloud_backup/rootfs/opt/nextcloud_backup/views/localSnaps.ejs
index efe6312..9b4e8ec 100644
--- a/nextcloud_backup/rootfs/opt/nextcloud_backup/views/localSnaps.ejs
+++ b/nextcloud_backup/rootfs/opt/nextcloud_backup/views/localSnaps.ejs
@@ -46,7 +46,7 @@
             </div>
         </div>
         <div class="modal-footer blue-grey darken-4">
-            <a href="#!" class="waves-effect waves-green btn light-blue accent-4">Backup now</a>
+            <a href="#!" class="waves-effect waves-green btn light-blue accent-4 manual-back-list modal-close" data-id="<%=snaps[index].slug%>">Backup now</a>
             <a href="#!" class="modal-close waves-effect waves-green btn red">Close</a>
 
         </div>