diff --git a/site/src/site/sphinx/_include_html/arthas-tutorials.html b/site/src/site/sphinx/_include_html/arthas-tutorials.html
new file mode 100644
index 00000000..8a4c2a6c
--- /dev/null
+++ b/site/src/site/sphinx/_include_html/arthas-tutorials.html
@@ -0,0 +1,216 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
+        crossorigin="anonymous">
+
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.4/dist/vue.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/index.min.js"></script>
+
+    <title>Arthas Totorials</title>
+
+    <style>
+        /* This is all that's required */
+        .dropdown-item-checked::before {
+        position: absolute;
+        left: .4rem;
+        content: '✓';
+        font-weight: 600;
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+        crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
+        crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
+        crossorigin="anonymous"></script>
+
+    <script src="https://katacoda.com/embed.js"></script>
+
+    <div id="app">
+
+        <nav class="navbar navbar-expand navbar-light bg-light flex-column flex-md-row bd-navbar">
+            <a href="https://github.com/alibaba/arthas" target="_blank" title="" class="navbar-brand">
+                <img v-bind:src="logoUrl()" alt="Arthas" title="Welcome to Arthas web console" style="height: 25px;" class="img-responsive">
+            </a>
+
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav mr-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="https://alibaba.github.io/arthas" target="_blank">Documentation
+                            <span class="sr-only">(current)</span></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="https://github.com/alibaba/arthas" target="_blank">Github</a>
+                    </li>
+
+                    <li class="nav-item dropdown active show">
+                        <!-- <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Dropdown
+                          </button> -->
+                        <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-tutorials" data-toggle="dropdown"
+                            aria-haspopup="true" aria-expanded="true">
+                            {{currentTutorialName()}}
+                        </a>
+                        <div class="dropdown-menu" aria-labelledby="bd-tutorials">
+                            <a v-for="tutorial in tutorials" v-bind:class="{ 'dropdown-item-checked': tutorial.id === tutorialId }"
+                                class="dropdown-item" v-bind:href='currentUrl() + "?language=" + language + "&id=" + tutorial.id'>
+                                {{ tutorial.names[language] }}
+                            </a>
+                        </div>
+
+                    </li>
+                </ul>
+            </div>
+
+            <form class="form-inline my-2 my-lg-0">
+
+                <div class="col">
+                    <div class="input-group ">
+                        <div class="input-group-prepend">
+                            <span class="input-group-text" id="language-addon">Language</span>
+                        </div>
+                        <select class="form-control" v-model="language" class="custom-select" v-on:change="languageChange($event)">
+                            <option v-for="l in languages" v-bind:value="l.value">
+                                {{ l.text }}
+                            </option>
+                        </select>
+                    </div>
+            </form>
+
+        </nav>
+
+
+        <div id="kata-container" class="container-fluid px-0">
+
+            <div id="katacoda-scenario-1" v-bind:data-katacoda-id="currentKatacodaId()" data-katacoda-color="004d7f"
+                v-bind:style="{height: (calculateKataSize().height - 5) + 'px'  }">
+            </div>
+        </div>
+
+    </div>
+</body>
+
+
+<script>
+    /** get params in url **/
+    function getUrlParam(name, url) {
+        if (!url) url = window.location.href;
+        name = name.replace(/[\[\]]/g, '\\$&');
+        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
+            results = regex.exec(url);
+        if (!results) return null;
+        if (!results[2]) return '';
+        return decodeURIComponent(results[2].replace(/\+/g, ' '));
+    }
+
+    var app = new Vue({
+        el: '#app',
+        data: {
+            message: 'Hello Vue!',
+            language: 'en',
+            languages: [
+                { text: 'English', value: 'en' },
+                { text: '中文', value: 'cn' }
+            ],
+            tutorialId: "arthas-basics",
+            tutorials: [
+                {
+                    id: "arthas-basics",
+                    names: {
+                        en: "Arthas Basics",
+                        cn: "Arthas基础教程",
+                    },
+                    ids: {
+                        en: "arthas-basics-en",
+                        cn: "arthas-basics-cn",
+                    }
+                },
+                {
+                    id: "arthas-advanced",
+                    names: {
+                        en: "Arthas Advanced",
+                        cn: "Arthas进阶教程",
+                    },
+                    ids: {
+                        en: "arthas-advanced-en",
+                        cn: "arthas-advanced-cn",
+                    }
+                }
+            ],
+        },
+        methods: {
+            languageChange: function (event) {
+                // alert(event.target.value)
+                window.location = this.currentUrl() + "?language=" + this.language + "&id=" + this.tutorialId;
+            },
+            currentUrl: function () {
+                return window.location.href.split(/[?#]/)[0];
+            },
+            logoUrl: function() {
+                var url = this.currentUrl();
+                return url.substring(0, url.lastIndexOf('/')) + "/_static/logo.png";
+            },
+            currentTutorialName: function () {
+                for (index in this.tutorials) {
+                    if (this.tutorials[index].id == this.tutorialId) {
+                        return this.tutorials[index].names[this.language];
+                    }
+                }
+
+            },
+            currentKatacodaId: function () {
+                // https://katacoda.com/embed/hengyunabc/arthas-advanced-cn/?embed=true
+                for (index in this.tutorials) {
+                    if (this.tutorials[index].id == this.tutorialId) {
+                        return "hengyunabc/" + this.tutorials[index].ids[this.language];
+                    }
+                }
+            },
+            calculateKataSize: function () {
+                var e = window;
+                var a = 'inner';
+                if (!('innerWidth' in window)) {
+                    a = 'client';
+                    e = document.documentElement || document.body;
+                }
+                var terminalDiv = document.getElementById("kata-container");
+                var terminalDivRect = terminalDiv.getBoundingClientRect();
+                return {
+                    width: terminalDivRect.width,
+                    height: e[a + 'Height'] - terminalDivRect.top
+                };
+            }
+        },
+        beforeMount() {
+            var l = getUrlParam('language');
+            if (l != null) {
+                this.language = l;
+            }
+            var id = getUrlParam('id');
+            if (id != null) {
+                this.tutorialId = id;
+            }
+        }
+    })
+
+</script>
+
+
+</html>
\ No newline at end of file
diff --git a/site/src/site/sphinx/_static/logo.png b/site/src/site/sphinx/_static/logo.png
new file mode 100644
index 00000000..a58394ee
Binary files /dev/null and b/site/src/site/sphinx/_static/logo.png differ
diff --git a/site/src/site/sphinx/conf.py b/site/src/site/sphinx/conf.py
index 7457a9ed..7a004233 100644
--- a/site/src/site/sphinx/conf.py
+++ b/site/src/site/sphinx/conf.py
@@ -170,7 +170,7 @@ html_static_path = ['_static']
 # Add any extra paths that contain custom files (such as robots.txt or
 # .htaccess) here, relative to this directory. These files are copied
 # directly to the root of the documentation.
-#html_extra_path = []
+html_extra_path = ['_include_html']
 
 # If not '', a 'Last updated on:' timestamp is inserted at every page bottom,
 # using the given strftime format.
