diff --git a/index.html b/index.html
index 175683f..1129dd5 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
   <title>{{title}}</title>
   <meta name="keywords" content="{{keywords}}">
   <meta name="description" content="{{description}}">
-  <link rel="stylesheet" href="//unpkg.yutent.top/@bytedo/wcui/dist/css/reset-basic.css">
+  <link rel="stylesheet" href="//unpkg.debianx.in/@bytedo/wcui/dist/css/reset-basic.css">
   <script async src="//esm.tool/es-module-shims.wasm.js"></script>
   <script type="importmap">{{importmap}}</script>
 </head>
diff --git a/package.json b/package.json
index 86a779a..90018a2 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "email": "yutent.io@gmail.com"
   },
   "devDependencies": {
-    "@bytedo/vue-live": "0.0.5"
+    "@bytedo/vue-live": "0.0.12"
   },
   "dependencies": {}
 }
diff --git a/src/app.vue b/src/app.vue
index adc6f3c..004bc8a 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -44,7 +44,7 @@ body {
   display: flex;
   width: 100%;
   height: 100%;
-  background: #f7f8fb;
+  background: var(--color-plain-1);
 }
 .holder {
   flex: 1;
diff --git a/src/assets/app.css b/src/assets/app.css
new file mode 100644
index 0000000..a2437e7
--- /dev/null
+++ b/src/assets/app.css
@@ -0,0 +1 @@
+body{font-size:14px;color:var(--color-dark-1)}a{color:inherit}.tab-content{flex:1;flex-shrink:0;display:flex;flex-direction:column;height:540px;padding:16px}.tab-content .field{display:flex;align-items:center;width:100%;height:36px;margin-top:12px}.tab-content .field .label{width:128px;font-weight:bold;color:var(--color-grey-3)}.tab-content .field .full{flex:1}.tab-content.configs{width:49%;margin-left:1%}.tab-content.remote wc-button,.tab-content.rules wc-button,.tab-content.proxies wc-button{width:64px;min-width:64px;margin-left:16px}.tab-content.remote .scroll,.tab-content.rules .scroll,.tab-content.proxies .scroll{overflow:hidden;flex:1;margin-top:24px}.tab-content.remote .card,.tab-content.rules .card,.tab-content.proxies .card{margin:0 auto}.tab-content.remote .list,.tab-content.rules .list,.tab-content.proxies .list{word-break:break-all}.tab-content.remote .list .item,.tab-content.rules .list .item,.tab-content.proxies .list .item{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 16px;border-bottom:1px solid var(--color-plain-1);font-family:Menlo,"Courier New",Courier,monospace;transition:background .2s linear}.tab-content.remote .list .item:hover,.tab-content.rules .list .item:hover,.tab-content.proxies .list .item:hover{background-color:var(--color-plain-1)}.tab-content.remote .list span.type,.tab-content.rules .list span.type,.tab-content.proxies .list span.type{padding:2px 3px;border-radius:2px;background-color:var(--color-blue-1);color:#fff}.card{flex:1;flex-shrink:0;display:flex;flex-direction:column;flex-wrap:wrap;width:100%;max-height:100%;padding:12px;margin:0 auto 24px;border:0;border-radius:4px;background-color:#fff;box-shadow:0 0 8px rgba(0,0,0,.075)}.card legend{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--color-blue-1);font-weight:bold}
\ No newline at end of file
diff --git a/src/assets/app.scss b/src/assets/app.scss
index 3eaa862..1debe01 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -1,3 +1,11 @@
+body {
+  font-size: 14px;
+  color: var(--color-dark-1);
+}
+a {
+  color: inherit;
+}
+
 .tab-content {
   flex: 1;
   flex-shrink: 0;
@@ -30,7 +38,8 @@
   }
 
   &.remote,
-  &.rules {
+  &.rules,
+  &.proxies {
     wc-button {
       width: 64px;
       min-width: 64px;
diff --git a/src/components/sidebar.vue b/src/components/sidebar.vue
index 8ac7358..15ccd4b 100644
--- a/src/components/sidebar.vue
+++ b/src/components/sidebar.vue
@@ -24,11 +24,11 @@ export default {
   data() {
     return {
       navs: [
-        { title: '代理', path: '/proxies' },
-        { title: '规则', path: '/rules' },
-        { title: '连接', path: '/connects' },
-        { title: '订阅', path: '/remote' },
-        { title: '设置', path: '/config' }
+        { title: '代 理', path: '/proxies' },
+        { title: '规 则', path: '/rules' },
+        { title: '连 接', path: '/connects' },
+        { title: '订 阅', path: '/remote' },
+        { title: '设 置', path: '/config' }
       ],
       tab: localStorage.getItem('tab') || '/proxies'
     }
@@ -70,13 +70,13 @@ export default {
       height: 32px;
       margin-top: 16px;
       line-height: 32px;
-      border-radius: 16px;
+      border-radius: 8px;
       text-align: center;
       cursor: pointer;
-      transition: color 0.2s linear, background 0.2s linear;
+      transition: color 0.2s linear, background 0.2s linear, box-shadow 0.2s ease-in-out;
 
       &:hover {
-        color: var(--color-blue-1);
+        box-shadow: 0 0 0 1px var(--color-blue-a);
       }
 
       &.active {
diff --git a/src/index.html b/src/index.html
deleted file mode 100644
index 6445fdb..0000000
--- a/src/index.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
-  <title>Clash Web Panel</title>
-  <link rel="favicon" href="favicon.ico">
-  <link rel="icon" type="image/x-icon" href="icons/192x192.png">
-  <link href="//unpkg.yutent.top/@bytedo/wcui/dist/css/reset-basic.css" rel="stylesheet">
-  <link href="css/app.css" rel="stylesheet">
-  <script src="js/app.js" type="module"></script>
-</head>
-<body>
-  <div class="app noselect" anot="app">
-    <aside class="aside">
-      <a class="logo"></a>
-
-      <nav class="nav-list">
-        <a 
-          class="item"
-          :for="i it in navs"
-          :class="{active: i === tab}"
-          @click="changeTab(i)"
-          :text="it">
-        </a>
-      </nav>
-
-      <span class="holder"></span>
-      <span class="version">{{version}}</span>
-    </aside>
-
-    
-
-    
-
-  </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 7d80ee8..461d4e7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,10 +8,10 @@ import { createApp } from 'vue'
 
 import '@/assets/app.scss'
 
-import '//unpkg.yutent.top/@bytedo/wcui/dist/layer/index.js'
-import '//unpkg.yutent.top/@bytedo/wcui/dist/form/switch.js'
-import '//unpkg.yutent.top/@bytedo/wcui/dist/form/radio.js'
-import '//unpkg.yutent.top/@bytedo/wcui/dist/form/button.js'
+import '//unpkg.debianx.in/@bytedo/wcui/dist/layer/index.js'
+import '//unpkg.debianx.in/@bytedo/wcui/dist/form/switch.js'
+import '//unpkg.debianx.in/@bytedo/wcui/dist/form/radio.js'
+import '//unpkg.debianx.in/@bytedo/wcui/dist/form/button.js'
 
 import App from './app.vue'
 
diff --git a/src/views/config.vue b/src/views/config.vue
index 7fdb6c5..39f6dd5 100644
--- a/src/views/config.vue
+++ b/src/views/config.vue
@@ -84,7 +84,6 @@ export default {
 
     getConfig() {
       fetch('/configs').then(r => {
-        console.log(r)
         Object.assign(this.configs, {
           proxy: r.mode,
           http: r.port,
@@ -92,7 +91,8 @@ export default {
           mixed: r['mixed-port'],
           allowLan: r['allow-lan']
         })
-        // this.version = r.version
+
+        console.log(this.configs)
       })
     }
   }
diff --git a/src/views/proxies.vue b/src/views/proxies.vue
index 2a71df9..f5ed6b9 100644
--- a/src/views/proxies.vue
+++ b/src/views/proxies.vue
@@ -1,11 +1,56 @@
 <template>
-  <main class="tab-content"></main>
+  <main class="tab-content proxies">
+    <fieldset class="card">
+      <legend>策略组</legend>
+
+      <wc-scroll class="scroll">
+        <ul class="list">
+          <li class="item" v-for="it in providers">
+            <span class="name">{{ it.name }}</span>
+            <span>{{ it.payload }}</span>
+            <span class="type">{{ it.proxy }}</span>
+          </li>
+        </ul>
+      </wc-scroll>
+    </fieldset>
+  </main>
 </template>
 
 <script>
+import fetch from '@/lib/fetch'
+
+//
 export default {
   data() {
-    return {}
+    return {
+      providers: [],
+      proxies: []
+    }
+  },
+
+  mounted() {
+    console.log('mounted...')
+    fetch('/providers/proxies').then(r => {
+      console.log(r)
+      this.providers = r.providers
+    })
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.list {
+  .name {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 108px;
+    height: 28px;
+    padding: 0 8px;
+    border: 1px solid var(--color-dark-a);
+    border-radius: 14px;
+    font-size: 12px;
+    background: var(--color-dark-a);
+  }
+}
+</style>
diff --git a/src/views/remote.vue b/src/views/remote.vue
index 8952926..096bf6a 100644
--- a/src/views/remote.vue
+++ b/src/views/remote.vue
@@ -82,7 +82,7 @@ export default {
             break
         }
 
-        names.push(info.name)
+        names.push(`"${info.name}"`)
         txt += `  - { name: ${info.name}, type: ${info.type}, server: ${info.server}, port: ${
           info.port
         }, password: ${info.password}, udp: true, ${info.type === 'ss' ? 'cipher' : 'sni'}: ${
diff --git a/vue.live.js b/vue.live.js
index 24c4d02..89e3b64 100644
--- a/vue.live.js
+++ b/vue.live.js
@@ -3,23 +3,18 @@ import { resolve } from 'path'
 // let pages =
 
 export default {
-  port: 6677,
   pages: {
     index: {
       entry: resolve('./src/main.js'),
-      title: 'blabla'
+      title: 'Clash Manager'
     }
   },
+  devServer: {
+    port: 6677
+  },
   imports: {
     vue: '//esm.tool/vue.js',
     'vue-router': '//esm.tool/vue-router.js',
-    'element-plus': '//esm.tool/elem-plus.js',
-    'element-ui': '//esm.tool/elem-plus.js',
-    fetch: '//esm.tool/fetch.js',
-    'vue-echarts': '//esm.tool/vue-echarts.js',
-    'echarts/core': 'https://unpkg.com/echarts@5.3.3/dist/echarts.esm.min.js',
-    'echarts/lib/chart/line': 'https://unpkg.com/echarts@5.3.3/dist/echarts.esm.min.js',
-    'vue-demi': 'https://unpkg.com/vue-demi@0.13.11/lib/index.mjs',
-    'resize-detector': 'https://unpkg.com/resize-detector@0.3.0/esm/index.js'
+    fetch: '//esm.tool/fetch.js'
   }
 }