diff --git a/module/tutorial/css/index.css b/module/tutorial/css/index.css
index db76743656..607645392f 100644
--- a/module/tutorial/css/index.css
+++ b/module/tutorial/css/index.css
@@ -44,9 +44,12 @@
 #task.finish.finish > .panel-heading > .pull-right {opacity: 1; transform: scale(1)}
 #task .task-nav {color: #114f8e; display: inline-block; background: #EBF2F9; padding: 1px 5px 0; transition: all .2s}
 #task .task-nav:hover {color: #fff; background: #114f8e; cursor: pointer}
-#tasksProgress {background: #ccc;}
+#tasksProgress {background: #ccc; position: relative}
 #tasksProgress > .progress-bar {background: #114f8e; height: 4px; margin-bottom: 15px; transition: background .4s, width .4s;}
 #tasksProgress.finish > .progress-bar {width: 100%!important; background: #38B03F}
+#tasksProgress .progress-text {position: absolute; right: 0; top: -25px; font-weight: bold; opacity: 0.7; color: #114f8e}
+#tasksProgress.finish .progress-text {color: #38B03F; opacity: 1}
+
 #tasks {background: #fff;}
 #tasks > li > a > .pull-right {opacity: 0; transition: opacity .4s, transform .4s; transform: scale(2.5, 2); color: #38B03F}
 #tasks > li.finish > a, #tasks > li.finish.active > a {box-shadow: inset 2px 0 0 #38B03F; border-left-color: #38B03F; color: #808080}
diff --git a/module/tutorial/view/index.html.php b/module/tutorial/view/index.html.php
index d2f8e57289..93a1728816 100644
--- a/module/tutorial/view/index.html.php
+++ b/module/tutorial/view/index.html.php
@@ -63,7 +63,8 @@
     <section id='all'>
       <h4><?php echo $lang->tutorial->allTasks ?> (<span class='task-num-finish'>2</span>/<span class='tasks-count'><?php echo count($lang->tutorial->tasks) ?></span>)</h4>
       <div class='progress' id='tasksProgress'>
-        <div class='progress-bar' style='width: 40%'>
+        <div class='progress-text'></div>
+        <div class='progress-bar' style='width: 0%'>
         </div>
       </div>
       <ul id='tasks' class='nav nav-primary nav-stacked'>
@@ -114,10 +115,10 @@ $(function()
     var $tasks        = $('#tasks'),
         $task         = $('#task'),
         $openTaskPage = $('#openTaskPage'),
-        $finish       = $('#finish'),
+        $progress     = $('#tasksProgress'),
         $modal        = $('#taskModal'),
         $modalBack    = $('#taskModalBack');
-    var totalCount    = $tasks.length, finishCount = 0;
+    var totalCount    = $tasks.children('li').length, finishCount = 0;
 
     var iWindow = window.frames['iframePage'];
     var iframe  = $('#iframePage').get(0);
@@ -413,7 +414,8 @@ $(function()
     {
         var currentTask;
 
-        finishCount = 0
+        finishCount = 0;
+        totalCount  = 0;
         $tasks.children('li').each(function(idx)
         {
             var $li      = $(this);
@@ -423,16 +425,22 @@ $(function()
             task.id      = idx + 1;
             task.finish  = finish;
             finishCount += finish ? 1 : 0;
+            totalCount++;
 
             $li.toggleClass('finish', finish);
             if(!current && !finish) current = name;
         });
 
-        $finish.toggleClass('show', finishCount >= totalCount);
         $('.task-num-finish').text(finishCount);
+        var isFinishAll = finishCount >= totalCount;
+        if(isFinishAll) current = $tasks.children('li').first().data('name');
+
+        var progress = Math.round(finishCount/totalCount);
+        $progress.toggleClass('finish', isFinishAll).find('.progress-bar').css('width', (100*finishCount/totalCount) + '%');
+        $progress.find('.progress-text').text(progress + '%');
 
-        if(finishCount >= totalCount) current = $tasks.children('li').first().data('name');
         showTask(current);
+        console.log('totalCount', totalCount, 'finishCount', finishCount);
     };
 
     updateUI();