diff --git a/skywalking-webui/src/main/webapp/pages/common/commons.ftl b/skywalking-webui/src/main/webapp/pages/common/commons.ftl
index 0f0ad92a6..7e43b0432 100644
--- a/skywalking-webui/src/main/webapp/pages/common/commons.ftl
+++ b/skywalking-webui/src/main/webapp/pages/common/commons.ftl
@@ -1,7 +1,7 @@
 <#macro importResources>
-<link href="${_base}/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
-<script src="${_base}/node_modules/jquery/dist/jquery.min.js"></script>
-<script src="${_base}/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+<link href="${_base}/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+<script src="${_base}/bower_components/jquery/dist/jquery.min.js"></script>
+<script src="${_base}/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
 </#macro>
 
 <#macro navbar>
@@ -10,14 +10,14 @@
         <div class="navbar-body">
             <div class="row">
                 <div class="col-md-2 col-xs-3 col-sm-2 col-lg-2">
-                    <img src="${_base}/node_modules/skywalking/img/logo.png" class="img-responsive center-block">
+                    <img src="${_base}/bower_components/skywalking/img/logo.png" class="img-responsive center-block">
                 </div>
                 <div class="col-md-6 col-xs-5 col-sm-6 col-lg-6">
                     <div class="input-group" style="margin-top:3%">
-                        <input type="text" class="form-control">
-              <span class="input-group-btn">
-                  <button class="btn btn-default" type="button">搜索</button>
-              </span>
+                        <input type="text" class="form-control" value="${key}" id="searchKey">
+                        <span class="input-group-btn">
+                            <button class="btn btn-default" type="button" id="searchBtn">搜索</button>
+                        </span>
                     </div>
                 </div>
                 <div class="col-md-3 col-md-offset-1 col-xs-4 col-sm-3 col-lg-3 col-xs-offset-1 col-sm-offset-1 col-lg-offset-1">
diff --git a/skywalking-webui/src/main/webapp/pages/index.ftl b/skywalking-webui/src/main/webapp/pages/index.ftl
index 1d651d747..a6044a002 100644
--- a/skywalking-webui/src/main/webapp/pages/index.ftl
+++ b/skywalking-webui/src/main/webapp/pages/index.ftl
@@ -57,7 +57,7 @@
 <div class="container-fluid">
     <div class="row">
         <div class="col-md-4 col-md-offset-4">
-            <img src="${_base}/node_modules/skywalking/img/logo.png" class="img-responsive center-block"/>
+            <img src="${_base}/bower_components/skywalking/img/logo.png" class="img-responsive center-block"/>
         </div>
         <div class="input-group col-md-6 col-md-offset-3">
             <input type="text" class="form-control">
diff --git a/skywalking-webui/src/main/webapp/pages/searchResult.ftl b/skywalking-webui/src/main/webapp/pages/searchResult.ftl
new file mode 100644
index 000000000..a7bde19a1
--- /dev/null
+++ b/skywalking-webui/src/main/webapp/pages/searchResult.ftl
@@ -0,0 +1,159 @@
+<#import "./common/commons.ftl" as common>
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+<@common.importResources />
+    <script src="${_base}/bower_components/vue/dist/vue.min.js"></script>
+    <script src="${_base}/bower_components/jquery-ui/jquery-ui.min.js"></script>
+    <link href="${_base}/bower_components/jquery-treetable/css/jquery.treetable.css" rel="stylesheet" type="text/css"/>
+    <link rel="stylesheet" href="${base}/bower_components/jquery-treetable/css/jquery.treetable.theme.default.css"/>
+    <script src="${_base}/bower_components/jquery-treetable/jquery.treetable.js"></script>
+    <link href="${_base}/bower_components/jquery-treetable/css/jquery.treetable.css" rel="stylesheet"/>
+</head>
+
+<body style="padding-top:80px">
+<@common.navbar/>
+<div class="container">
+    <p id="key" style="display: none">${key}</p>
+    <p id="searchType" style="display: none">${searchType}</p>
+    <div class="row" id="data">
+        <table id="traceTreeTable" >
+            <caption>
+            </caption>
+            <thead>
+            <tr>
+                <th style="width: 25%" >服务名</th>
+                <th style="width: 5%">类型</th>
+                <th style="width: 5%">状态</th>
+                <th style="width: 20%">服务/方法</th>
+                <th style="width: 15%">主机信息</th>
+                <th style="width: 30%">时间轴</th>
+            </tr>
+            </thead>
+            <tbody>
+            <template v-for="treeNode in traceTree.treeNodes">
+                <tr v-if="treeNode.isEntryNode" statusCodeStr="{{treeNode.statusCodeStr}}"
+                    data-tt-id='{{treeNode.colId}}'>
+                    <td><b>{{treeNode.applicationIdStr}}</b></td>
+                    <td>{{treeNode.spanTypeName}}</td>
+                    <td>{{treeNode.statusCodeName}}</td>
+                    <td>
+                        <a href="#" >{{treeNode.viewPointIdSub}}</a>
+                    </td>
+                </tr>
+                <tr v-else statusCodeStr="{{treeNode.statusCodeStr}}" data-tt-id='{{treeNode.colId}}'
+                    data-tt-parent-id='{{treeNode.parentLevel}}'>
+                    <td><b>{{treeNode.applicationIdStr}}</b></td>
+                    <td>{{treeNode.spanTypeName}}</td>
+                    <td>{{treeNode.statusCodeName}}</td>
+                    <td>
+                        <a href="#" >{{treeNode.viewPointIdSub}}</a>
+                    </td>
+                </tr>
+            </template>
+            </tbody>
+        </table>
+    </div>
+</div>
+<script>
+    new Vue({
+        el: "#data",
+        methods: {
+            changeData: function (data) {
+                this.traceTree.totalTime = data.endTime - data.beginTime;
+                var totalTime = this.traceTree.totalTime;
+                this.traceTree.startTime = data.beginTime;
+                this.traceTree.endTime = data.endTime;
+                var tmpNode;
+                for (var i = 0; i < data.nodes.length; i++) {
+                    tmpNode = data.nodes[i];
+                    if (tmpNode.colId == "0") {
+                        tmpNode.isEntryNode = true;
+                    } else {
+                        tmpNode.isEntryNode = false;
+                    }
+                    if (tmpNode.spanTypeName == "") {
+                        tmpNode.spanTypeName = "UNKNOWN";
+                    }
+                    tmpNode.statusCodeName = tmpNode.statusCodeName;
+                    if (tmpNode.statusCodeName == "") {
+                        tmpNode.statusCodeName = "MISSING";
+                    }
+
+                    if (tmpNode.timeLineList.length == 1) {
+                        tmpNode.case = 1;
+                        tmpNode.offset = tmpNode.cost;
+                        tmpNode.totalLength = (tmpNode.startTime - this.traceTree.beginTime);
+                    }
+
+                    if (tmpNode.timeLineList.length == 2) {
+                        if (tmpNode.timeLineList[1].startTime < tmpNode.timeLineList[0].startTime) {
+                            tmpNode.case = 2;
+                            tmpNode.serverLength = tmpNode.timeLineList[1].cost;
+                            tmpNode.totalLength = (tmpNode.timeLineList[1].startTime - this.traceTree.beginTime);
+                        } else if ((tmpNode.timeLineList[1].startTime >= tmpNode.timeLineList[0].startTime) &&
+                                ((tmpNode.timeLineList[1].startTime) <= (tmpNode.timeLineList[0].startTime + tmpNode.timeLineList[0].cost))) {
+                            if ((tmpNode.timeLineList[1].startTime + tmpNode.timeLineList[1].cost) <= (tmpNode.timeLineList[0].startTime + tmpNode.timeLineList[0].cost)) {
+                                tmpNode.case = 3;
+                                tmpNode.totalLength = tmpNode.timeLineList[0].startTime - this.traceTree.beginTime;
+                                tmpNode.clientOffset = (tmpNode.timeLineList[1].startTime - tmpNode.timeLineList[0].startTime);
+                                tmpNode.serverOffset = (tmpNode.timeLineList[1].startTime + tmpNode.timeLineList[1].cost - tmpNode.timeLineList[1].startTime);
+                                tmpNode.serverLength = (tmpNode.timeLineList[0].startTime + tmpNode.timeLineList[0].cost - tmpNode.timeLineList[1].startTime - tmpNode.timeLineList[1].cost);
+                            } else {
+                                tmpNode.case = 4;
+                                tmpNode.totalLength = (tmpNode.timeLineList[0].startTime - this.traceTree.startTime);
+                                tmpNode.clientOffset = tmpNode.timeLineList[1].startTime - tmpNode.timeLineList[0].startTime;
+                                tmpNode.serverLength = tmpNode.timeLineList[1].startTime + tmpNode.timeLineList[1].cost - tmpNode.timeLineList[1].startTime;
+                            }
+                        } else {
+                            tmpNode.case = 5;
+                            tmpNode.totalLength = (tmpNode.timeLineList[0].startTime - this.traceTree.startTime);
+                            tmpNode.warningOffset = tmpNode.timeLineList[0].cost;
+                            tmpNode.serverOffset = tmpNode.timeLineList[1].startTime - tmpNode.timeLineList[0].startTime;
+                            tmpNode.serverLength = tmpNode.timeLineList[1].cos;
+                        }
+                    }
+
+                    this.traceTree.treeNodes.push(tmpNode);
+                }
+            }
+        },
+        ready: function () {
+            var self = this;
+            var url = "${_base}/search/traceId/" + $("#key").text();
+            $.ajax({
+                type: 'POST',
+                url: url,
+                dataType: 'json',
+                success: function (data) {
+                    if (data.code == '200') {
+                        self.changeData(jQuery.parseJSON(data.result));
+                        self.$nextTick(function () {
+                            $("#traceTreeTable").treetable({expandable: true, indent: 10, clickableNodeNames: true});
+                        })
+                    }
+                },
+                error: function () {
+                    $("#errorMessage").text("Fatal Error, please try it again.");
+                    $("#alertMessageBox").show();
+                }
+            });
+        },
+        data: {
+            traceTree: {
+                totalTime: 0,
+                startTime: 0,
+                endTime: 0,
+                treeNodes: []
+            }
+        },
+        filter: {}
+    });
+
+
+</script>
+</body>
+</html>
diff --git a/skywalking-webui/src/main/webapp/pages/usr/applications/addapplication.ftl b/skywalking-webui/src/main/webapp/pages/usr/applications/addapplication.ftl
index 71887d182..2b82afb59 100644
--- a/skywalking-webui/src/main/webapp/pages/usr/applications/addapplication.ftl
+++ b/skywalking-webui/src/main/webapp/pages/usr/applications/addapplication.ftl
@@ -6,8 +6,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 <@common.importResources />
-    <link href="${_base}/node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
-    <script src="${_base}/node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>
+    <link href="${_base}/bower_components/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
+    <script src="${_base}/bower_components/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>
 </head>
 
 <body style="padding-top:80px">
diff --git a/skywalking-webui/src/main/webapp/pages/usr/applications/applicationsconfig.ftl b/skywalking-webui/src/main/webapp/pages/usr/applications/applicationsconfig.ftl
index 2f4c5cf11..a9bf3c879 100644
--- a/skywalking-webui/src/main/webapp/pages/usr/applications/applicationsconfig.ftl
+++ b/skywalking-webui/src/main/webapp/pages/usr/applications/applicationsconfig.ftl
@@ -6,12 +6,24 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 <@common.importResources />
-    <script src="${_base}/node_modules/vue/dist/vue.min.js"></script>
+    <script src="${_base}/bower_components/vue/dist/vue.min.js"></script>
 </head>
 
 <body style="padding-top:80px">
 <@common.navbar/>
 <div class="container">
+    <div class="row" style="display: none;" id="errorMessageAlert">
+        <div class="col-md-8">
+            <div class="row">
+                <div class="alert alert-warning alert-dismissible" role="alert">
+                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
+                            aria-hidden="true">&times;</span></button>
+                    <strong>Warning!</strong>&nbsp;<p id="errormessage"></p>
+                    </a>.
+                </div>
+            </div>
+        </div>
+    </div>
     <div class="row">
         <div class="col-md-8">
             <div class="row">
@@ -36,7 +48,9 @@
                                href="${_base}/usr/applications/modify/{{application.appId}}">Update</a>
                             <a class="btn btn-danger btn-xs" href="javascript:void(0)"
                                onclick="del('{{application.appId}}')">Delete</a>
-                            <a class="btn btn-info btn-xs" href="${_base}/usr/applications/authfile/todownload/{{application.appCode}}">Download auth File</a>
+                            <a class="btn btn-info btn-xs"
+                               href="${_base}/usr/applications/authfile/todownload/{{application.appCode}}">Download
+                                auth File</a>
                         </td>
                     </tr>
                     </tbody>
@@ -64,12 +78,12 @@
                     loadData();
                 } else {
                     $("#errormessage").text(data.message);
-                    $("#errorMessageAlter").show();
+                    $("#errorMessageAlert").show();
                 }
             },
             error: function () {
                 $("#errormessage").text("Fatal error");
-                $("#errorMessageAlter").show();
+                $("#errorMessageAlert").show();
             }
         });
     }
@@ -89,12 +103,13 @@
                         }
                     });
                 } else {
-
+                    $("#errormessage").text(data.message);
+                    $("#errorMessageAlert").show();
                 }
             },
             error: function () {
                 $("#errormessage").text("Fatal error");
-                $("#errorMessageAlter").show();
+                $("#errorMessageAlert").show();
             }
         });
     }
diff --git a/skywalking-webui/src/main/webapp/pages/usr/applications/createglobalconfig.ftl b/skywalking-webui/src/main/webapp/pages/usr/applications/createglobalconfig.ftl
index 5d7cd4a21..c8ea02eb7 100644
--- a/skywalking-webui/src/main/webapp/pages/usr/applications/createglobalconfig.ftl
+++ b/skywalking-webui/src/main/webapp/pages/usr/applications/createglobalconfig.ftl
@@ -6,8 +6,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 <@common.importResources />
-    <link href="${_base}/node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
-    <script src="${_base}/node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>
+    <link href="${_base}/bower_components/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
+    <script src="${_base}/bower_components/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>
 </head>
 
 <body style="padding-top:80px">
diff --git a/skywalking-webui/src/main/webapp/pages/usr/applications/modifyapplication.ftl b/skywalking-webui/src/main/webapp/pages/usr/applications/modifyapplication.ftl
index 463f9cbd4..50fcdb238 100644
--- a/skywalking-webui/src/main/webapp/pages/usr/applications/modifyapplication.ftl
+++ b/skywalking-webui/src/main/webapp/pages/usr/applications/modifyapplication.ftl
@@ -6,8 +6,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 <@common.importResources />
-    <link href="${_base}/node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
-    <script src="${_base}/node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>
+    <link href="${_base}/bower_components/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
+    <script src="${_base}/bower_components/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>
 </head>
 
 <body style="padding-top:80px">
diff --git a/skywalking-webui/src/main/webapp/pages/usr/login.ftl b/skywalking-webui/src/main/webapp/pages/usr/login.ftl
index 6bc16e890..40fc80e2b 100644
--- a/skywalking-webui/src/main/webapp/pages/usr/login.ftl
+++ b/skywalking-webui/src/main/webapp/pages/usr/login.ftl
@@ -5,13 +5,13 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 <@common.importResources />
-    <script src="${_base}/node_modules/skywalking/js/jquery-md5.js"></script>
+    <script src="${_base}/bower_components/skywalking/js/jquery-md5.js"></script>
 </head>
 <body>
 <div class="container-fluid">
     <div clas="row">
         <div class="col-md-4 col-md-offset-4">
-            <img src="${_base}/node_modules/skywalking/img/logo.png" class="img-responsive center-block"/>
+            <img src="${_base}/bower_components/skywalking/img/logo.png" class="img-responsive center-block"/>
         </div>
     </div>
     <div class="row">
diff --git a/skywalking-webui/src/main/webapp/pages/usr/register.ftl b/skywalking-webui/src/main/webapp/pages/usr/register.ftl
index d36b0184e..bfa13ec71 100644
--- a/skywalking-webui/src/main/webapp/pages/usr/register.ftl
+++ b/skywalking-webui/src/main/webapp/pages/usr/register.ftl
@@ -5,13 +5,13 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 <@common.importResources />
-    <script src="${_base}/node_modules/skywalking/js/jquery-md5.js"></script>
+    <script src="${_base}/bower_components/skywalking/js/jquery-md5.js"></script>
 </head>
 <body>
 <div class="container-fluid">
     <div clas="row">
         <div class="col-md-4 col-md-offset-4">
-            <img src="${_base}/node_modules/skywalking/img/logo.png" class="img-responsive center-block"/>
+            <img src="${_base}/bower_components/skywalking/img/logo.png" class="img-responsive center-block"/>
         </div>
     </div>
     <div class="row">

服务名	类型	状态	服务/方法	主机信息	时间轴
{{treeNode.applicationIdStr}}	{{treeNode.spanTypeName}}	{{treeNode.statusCodeName}}	+ {{treeNode.viewPointIdSub}} +
{{treeNode.applicationIdStr}}	{{treeNode.spanTypeName}}	{{treeNode.statusCodeName}}	+ {{treeNode.viewPointIdSub}} +