diff --git a/debugger/babel.config.js b/debugger/babel.config.js
index ba179669..de91a370 100644
--- a/debugger/babel.config.js
+++ b/debugger/babel.config.js
@@ -1,5 +1,14 @@
 module.exports = {
-  presets: [
-    '@vue/app'
+  "presets": [
+    "@vue/app"
+  ],
+  "plugins": [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ]
   ]
-}
+}
\ No newline at end of file
diff --git a/debugger/package-lock.json b/debugger/package-lock.json
index f5c825ec..a85738aa 100644
--- a/debugger/package-lock.json
+++ b/debugger/package-lock.json
@@ -1931,6 +1931,14 @@
       "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
@@ -2100,6 +2108,11 @@
         }
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "babel-loader": {
       "version": "8.0.6",
       "resolved": "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.0.6.tgz",
@@ -2112,6 +2125,38 @@
         "pify": "^4.0.1"
       }
     },
+    "babel-plugin-component": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npm.taobao.org/babel-plugin-component/download/babel-plugin-component-1.1.1.tgz",
+      "integrity": "sha1-mwI6I/9cmq4P1WxaGLnKuMTUXuo=",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "7.0.0-beta.35"
+      },
+      "dependencies": {
+        "@babel/helper-module-imports": {
+          "version": "7.0.0-beta.35",
+          "resolved": "https://registry.npm.taobao.org/@babel/helper-module-imports/download/@babel/helper-module-imports-7.0.0-beta.35.tgz",
+          "integrity": "sha1-MI41DnMXUs200PBY3x1wSSXGTgo=",
+          "dev": true,
+          "requires": {
+            "@babel/types": "7.0.0-beta.35",
+            "lodash": "^4.2.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.0.0-beta.35",
+          "resolved": "https://registry.npm.taobao.org/@babel/types/download/@babel/types-7.0.0-beta.35.tgz",
+          "integrity": "sha1-z5M6mpo4SEynJLM1uI2Dcm1auWA=",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2",
+            "lodash": "^4.2.0",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
     "babel-plugin-dynamic-import-node": {
       "version": "2.3.0",
       "resolved": "https://registry.npm.taobao.org/babel-plugin-dynamic-import-node/download/babel-plugin-dynamic-import-node-2.3.0.tgz",
@@ -2134,6 +2179,22 @@
         "resolve": "^1.4.0"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
@@ -3648,8 +3709,7 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
-      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
-      "dev": true
+      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
     },
     "default-gateway": {
       "version": "5.0.2",
@@ -3978,6 +4038,19 @@
       "integrity": "sha1-QhpYrI0ZMcjfQA1Vx/b9YhcQ2hA=",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.11.1.tgz",
+      "integrity": "sha512-PACNMHPWqm+/Wc2f/q93pLNzbNyVbpMCXCrYe81czengSWj7IBku7F3zccybkxtWn5qdCmMDBCpG5BzGJL4rKA==",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "elliptic": {
       "version": "6.5.0",
       "resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.0.tgz",
@@ -7556,6 +7629,11 @@
       "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz",
@@ -9208,6 +9286,11 @@
       "integrity": "sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.12.0",
       "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.12.0.tgz?cache=0&sync_timestamp=1564641434608&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fresolve%2Fdownload%2Fresolve-1.12.0.tgz",
@@ -10364,6 +10447,11 @@
         "neo-async": "^2.6.0"
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz",
@@ -10896,6 +10984,12 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz",
       "integrity": "sha1-pysaQqTYKnIepDjRtr9V5mGVxjc="
     },
+    "vue-cli-plugin-element": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/vue-cli-plugin-element/download/vue-cli-plugin-element-1.0.1.tgz",
+      "integrity": "sha1-NOWPtls2z1mvrxT1AyiOXleLFVQ=",
+      "dev": true
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz",
diff --git a/debugger/package.json b/debugger/package.json
index d9b2e2c8..d3a6e809 100644
--- a/debugger/package.json
+++ b/debugger/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^0.19.0",
     "core-js": "^2.6.5",
+    "element-ui": "^2.11.1",
     "vue": "^2.6.10",
     "vue-router": "^3.1.2"
   },
@@ -18,8 +19,10 @@
     "@vue/cli-plugin-eslint": "^3.10.0",
     "@vue/cli-service": "^3.10.0",
     "babel-eslint": "^10.0.1",
+    "babel-plugin-component": "^1.1.1",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "vue-cli-plugin-element": "^1.0.1",
     "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {
diff --git a/debugger/src/App.vue b/debugger/src/App.vue
index 1d13abee..e86d8c34 100644
--- a/debugger/src/App.vue
+++ b/debugger/src/App.vue
@@ -17,6 +17,5 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
 }
 </style>
diff --git a/debugger/src/components/Context.vue b/debugger/src/components/Context.vue
index efb8537c..1c764a2a 100644
--- a/debugger/src/components/Context.vue
+++ b/debugger/src/components/Context.vue
@@ -1,25 +1,31 @@
 <template>
-  <div class="hello">
-    <h1>Context</h1>
-    <p>
-      Dev tools for doric.
-      <br />
-      <a href="https://github.com/penfeizhou/doric" target="_blank" rel="noopener">Doric</a>.
-    </p>
-    <h3>Running Contexts</h3>
+  <div class="context">
+    <el-page-header @back="goBack" v-bind:content="'Context: '+$route.params.id"></el-page-header>
+    <el-container>
+      <el-aside>
+        <h3>Context info</h3>
+        <p>ID:{{$route.params.id}}</p>
+        <p>Source:{{$route.params.id}}</p>
+      </el-aside>
+    </el-container>
   </div>
 </template>
 
 <script>
 export default {
-  name: "Debug"
+  name: "Context",
+  methods: {
+    goBack() {
+      this.$router.go(-1);
+    }
+  }
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 h3 {
-  margin: 40px 0 0;
+  /* margin: 40px 0 0; */
 }
 ul {
   list-style-type: none;
diff --git a/debugger/src/components/Home.vue b/debugger/src/components/Home.vue
index 744709c8..76062cf0 100644
--- a/debugger/src/components/Home.vue
+++ b/debugger/src/components/Home.vue
@@ -1,17 +1,16 @@
 <template>
-  <div class="hello">
+  <div class="home">
     <img alt="Vue logo" width="200px" src="../assets/doric.svg" />
     <h1>{{ title }}</h1>
     <p>
       Dev tools for doric.
       <br />
-      <a href="https://github.com/penfeizhou/doric" target="_blank" rel="noopener">Doric</a>.
+      <el-link href="https://github.com/penfeizhou/doric" type="primary">Doric</el-link>
     </p>
     <h3>Running Contexts</h3>
     <ul>
       <li v-for="item in runningContexts" :key="item.id">
-        <!-- <a v-bind:href="'#context/'+item.source">source: {{item.source}} id: {{item.id}}</a> -->
-        <router-link v-bind:to="'/context/' + item.id">{{item.source}}</router-link>
+        <el-link type="success" v-bind:href="'#/context/' + item.id">{{item.source}}</el-link>
       </li>
     </ul>
   </div>
diff --git a/debugger/src/main.js b/debugger/src/main.js
index 9f220c09..082337df 100644
--- a/debugger/src/main.js
+++ b/debugger/src/main.js
@@ -2,8 +2,10 @@ import Vue from 'vue'
 import App from './App.vue'
 import VueRouter from 'vue-router'
 import routes from './routes'
-
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(VueRouter)
+Vue.use(ElementUI)
 new Vue({
   router: new VueRouter({
     routes