diff --git a/Client/index.html b/Client/index.html
index 2f1a920..e27aeef 100644
--- a/Client/index.html
+++ b/Client/index.html
@@ -19,9 +19,35 @@
   <!-- <link rel="stylesheet" href="node_modules/mdbootstrap/css/style.css">
     <link rel="stylesheet" href="node_modules/mdbootstrap/css/mdb.min.css"> -->
   <title>Tech Blog</title>
+  <style>
+    @charset "UTF-8";
+/**
+ *
+ * @authors Ted Shiu (tedshd@gmail.com)
+ * @date    2014-03-02 00:16:13
+ * @version $Id$
+ */
+
+.scroll_progress {
+    position: fixed;
+    overflow: hidden;
+}
+.scroll_progress div {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+  </style>
 </head>
 
 <body>
+  <script>
+    for (var i = 1; 100 >= i; i++) {
+        var li = document.createElement('li');
+        li.innerHTML = '<img src="" alt="img" width="90" height="90"><span>'+i+'</span>';
+        document.querySelector('ul').appendChild(li);
+    };
+</script>
   <div id="root"></div>
   <script type="module" src="/src/main.jsx"></script>
   <!-- MDB -->
@@ -38,5 +64,98 @@
 
 
 </body>
+<script>
+  /*global $, jQuery, alert, console, angular*/
+/**
+ *
+ * @authors Ted Shiu (tedshd@gmail.com)
+ * @date    2014-03-01 23:51:21
+ * @version $Id$
+ */
+
+function ScrollProgress (option) {
+    console.log('init');
+    var d4 = {
+        position: 'top',
+        thick: 5,
+        color: 'red'
+    };
+    var percent;
+    var dom = document.querySelector('body'),
+        progress = document.createElement('div'),
+        div = document.createElement('div');
+
+    option = option || {};
+    option.position = option.position || d4.position;
+    option.thick = option.thick || d4.thick;
+    option.color = option.color || d4.color;
+
+    // init position
+    switch(option.position) {
+        case 'top':
+            progress.style.top = 0;
+            progress.style.left = 0;
+            progress.style.width = '100%';
+            progress.style.height = option.thick + 'px';
+            div.style.height = '100%';
+        break;
+        case 'bottom':
+            progress.style.bottom = 0;
+            progress.style.left = 0;
+            progress.style.width = '100%';
+            progress.style.height = option.thick + 'px';
+            div.style.height = '100%';
+        break;
+        case 'left':
+            progress.style.top = 0;
+            progress.style.left = 0;
+            progress.style.width = option.thick + 'px';
+            progress.style.height = '100%';
+            div.style.width = '100%';
+        break;
+        case 'right':
+            progress.style.top = 0;
+            progress.style.right = 0;
+            progress.style.width = option.thick + 'px';
+            progress.style.height = '100%';
+            div.style.width = '100%';
+        break;
+        default:
+        return;
+    }
+
+    // detect scroll progress
+    window.addEventListener('scroll', function() {
+        if (dom.scrollTop) {
+            percent = (dom.scrollTop/(dom.scrollHeight - document.documentElement.clientHeight))*100 + '%';
+        } else {
+            percent = (window.pageYOffset/(dom.scrollHeight - document.documentElement.clientHeight))*100 + '%';
+        }
+        if (option.position === 'top' || option.position === 'bottom') {
+            div.style.width = percent;
+        }
+        if (option.position === 'left' || option.position === 'right') {
+            div.style.height = percent;
+        }
+    });
+
+    div.style.backgroundColor = option.color;
+    progress.setAttribute('class', 'scroll_progress');
+    progress.appendChild(div);
+    dom.appendChild(progress);
+}
+
+window.ScrollProgress = ScrollProgress;
+
+</script>
 
+<script>
+  var setting = {
+      position: 'left',
+      thick: 10,
+      color: '#ff8800'
+  }
+  // ScrollProgress(setting);
+  ScrollProgress();
+</script>
 </html>
\ No newline at end of file
