diff --git a/content/_index.html b/content/_index.html
index 0ba1a00..d10e9d1 100644
--- a/content/_index.html
+++ b/content/_index.html
@@ -11,7 +11,29 @@
 	<a class="btn btn-lg btn-secondary mr-3 mb-4" href="https://github.com/apache/skywalking">
 	GitHub<i class="fab fa-github ml-2 "></i>
 	</a>
-	<p class="lead mt-5">Application performance monitor tool for distributed systems, especially designed for microservices, cloud native and container-based (Docker, Kubernetes, Mesos) architectures.</p>
+    <div class="btn-group">
+        <a class="btn btn-lg btn-primary mr-3 mb-4 btn-demo dropdown-toggle"
+           data-toggle="dropdown"
+           aria-haspopup="true" aria-expanded="false"
+           href="javascript:;">
+            Live Demo<i class="fas fa-chart-line ml-2"></i>
+        </a>
+        <div class="dropdown-menu demo-box">
+            <span class="icon-copy fa fa-copy" title="copy"></span>
+            <h6 class="dropdown-header">User: skywalking</h6>
+            <h6 class="dropdown-header">Password: skywalking</h6>
+            <div class="dropdown-item">
+                <span class="line"></span>
+                <a class="btn demo-link" target="_blank" href="http://demo.skywalking.apache.org/">
+                    Go
+                </a>
+            </div>
+        </div>
+    </div>
+	<p class="lead mt-5">
+        Application performance monitor tool for distributed systems, especially designed for microservices, cloud native and container-based (Docker, Kubernetes, Mesos) architectures.
+    </p>
+
 </div>
 {{< /blocks/cover >}}
 
diff --git a/themes/docsy/assets/js/base.js b/themes/docsy/assets/js/base.js
index 49f27d0..91c5af9 100644
--- a/themes/docsy/assets/js/base.js
+++ b/themes/docsy/assets/js/base.js
@@ -61,5 +61,23 @@
         });
     });
 
+    $(function () {
+        if (!$('.icon-copy').length) {
+            return
+        }
+        $('.icon-copy').on('click', function () {
+            const input = document.createElement('input');
+            document.body.appendChild(input);
+            input.setAttribute('value', 'skywalking');
+            input.setAttribute('style', 'opacity:0');
+            input.select();
+            if (document.execCommand('copy')) {
+                document.execCommand('copy');
+                alert('copied');
+                window.open('http://demo.skywalking.apache.org/')
+            }
+            document.body.removeChild(input);
+        })
+    })
 
 }(jQuery));
diff --git a/themes/docsy/assets/scss/_styles_project.scss b/themes/docsy/assets/scss/_styles_project.scss
index 0a1337f..d9c53d3 100644
--- a/themes/docsy/assets/scss/_styles_project.scss
+++ b/themes/docsy/assets/scss/_styles_project.scss
@@ -132,6 +132,46 @@
 
 // home page
 .td-home {
+  .btn-demo{
+    background: #151f35 linear-gradient(180deg, #485671, #152235) repeat-x;
+  }
+  .demo-link{
+    padding:0 1em;
+    display: block;
+    text-align: center;
+    margin: 0 auto;
+    font-size: 1.3rem;
+    font-weight: 500;
+    &:hover{
+     color: #0091ff
+    }
+  }
+  .demo-box{
+    text-align: center;
+    position: relative;
+    .dropdown-item{
+      position: relative;
+      background: #f8f9fa linear-gradient(180deg, #f9fafb, #f8f9fa) repeat-x;
+    }
+    .icon-copy{
+      font-size: 14px;
+      color: #ccc;
+      position: absolute;
+      right: 4px;
+      top: 4px;
+      &:hover{
+        cursor: pointer;
+      }
+    }
+  }
+  .show > .btn-primary.dropdown-toggle {
+    color: #fff;
+    background-color: #2e3a50;
+    background-image: none;
+    border-color: #030407;
+  }
+
+
   h2.section-head {
     font-family: Lato, sans-serif;
     text-shadow: 4px 6px 0 rgba(0, 0, 0, .07);