diff --git a/src/components/index.ts b/src/components/index.ts
index c91ba52..412fea7 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -10,9 +10,10 @@
 import RkEmpty from './rk-empty.vue';
 import RkPage from './rk-page.vue';
 import RkDrawer from './rk-drawer.vue';
+import RkSelect from './rk-select.vue';
 
 const components: Object = {
-  RkDrawer, RkEmpty, RkPanel, RkHeader, RkNav, RkBoard, RkDate, RkProgress, RkSidebox, RkEcharts, RkToolbar, RkPage,
+  RkDrawer, RkSelect, RkEmpty, RkPanel, RkHeader, RkNav, RkBoard, RkDate, RkProgress, RkSidebox, RkEcharts, RkToolbar, RkPage,
 };
 const componentsName: string[] = Object.keys(components);
 
diff --git a/src/components/rk-board.vue b/src/components/rk-board.vue
index d479390..5fee120 100644
--- a/src/components/rk-board.vue
+++ b/src/components/rk-board.vue
@@ -8,13 +8,17 @@
       <RkToolDashboard :stateOptions="stateOptions" :show.sync="show"/>
     </div>
     <Icon type="ios-arrow-forward" :size="18" class="grey mr10"/>
-    <select v-if='stateOptions.currentEndpoint' :value="stateOptions.currentEndpoint.key" @change="endpointChange($event)" class="mr15" style="color:#fafafa;background: 0; border: 0; outline: none;">
+    <rk-select v-if='stateOptions.currentEndpoint' :value="stateOptions.currentEndpoint.key" @input="endpointChange" :data="stateOptions.endpoints">
+    </rk-select>
+    <!-- <select v-if='stateOptions.currentEndpoint' :value="stateOptions.currentEndpoint.key" @change="endpointChange($event)" class="mr15" style="color:#fafafa;background: 0; border: 0; outline: none;">
       <option style="background-color: #2f333c;" v-for="i in stateOptions.endpoints" :key="i.key" :value="i.key">{{i.label}}</option>
-    </select>
+    </select> -->
     <span class="grey mr10">|</span>
-    <select  v-if='stateOptions.currentServer' :value="stateOptions.currentServer.key" @change="serverChange($event)" class="grey mr15" style="background: 0; border: 0; outline: none;">
+    <rk-select v-if='stateOptions.currentServer' :value="stateOptions.currentServer.key" @input="serverChange" :data="stateOptions.servers">
+    </rk-select>
+    <!-- <select  v-if='stateOptions.currentServer' :value="stateOptions.currentServer.key" @change="serverChange($event)" class="grey mr15" style="background: 0; border: 0; outline: none;">
       <option style="background-color: #2f333c;" v-for="i in stateOptions.servers" :key="i.key" :value="i.key">{{i.name}}</option>
-    </select>
+    </select> -->
     <button class="rk-board-inspector" @click="$emit('showServer')">inspector</button>
   </div>
 </template>
@@ -33,10 +37,12 @@
   @Prop() stateOptions: State;
   show:Boolean = false;
   endpointChange(e) {
-    endpointChange(this.stateOptions.endpoints[e.target.selectedIndex]);
+    this.show = this.show;
+    endpointChange(e);
   }
   serverChange(e) {
-    serverChange(this.stateOptions.servers[e.target.selectedIndex]);
+    this.show = this.show;
+    serverChange(e);
   }
 }
 </script>
diff --git a/src/components/rk-select.vue b/src/components/rk-select.vue
index 37d6f52..3f92880 100644
--- a/src/components/rk-select.vue
+++ b/src/components/rk-select.vue
@@ -1,64 +1,78 @@
 <template>
-  <Dropdown trigger="click" style="margin-left: 20px">
-    <a href="javascript:void(0)">
-      click 触发
-      <Icon type="arrow-down-b"></Icon>
-    </a>
+  <Dropdown @on-clickoutside="handleClose" placement="bottom-start" trigger="custom" :visible="visible" class="mr15">
+    <div @click="handleOpen">
+        <div class="flex-c">
+          <span class="mr5">{{this.data.filter(i => i.key == this.value).length?this.data.filter(i => i.key == this.value)[0].label || this.data.filter(i => i.key == this.value)[0].name : ''}}</span><Icon type="md-arrow-dropdown" />
+        </div>
+    </div>
     <DropdownMenu slot="list">
-        <DropdownItem v-for="i in data" :key="i.label">{{i.label}}</DropdownItem>
+      <div class="rk-select-search">
+        <input class="rk-select-search-input" v-model="search">
+      </div>
+      <div class="rk-select-wrapper">
+        <li class="ivu-dropdown-item" @click="handleSelect(i)" v-for="(i, index) in filterData" :key="index">{{i.label || i.name}}</li>
+      </div>
     </DropdownMenu>
   </Dropdown>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import { Prop, Model } from 'vue-property-decorator';
-
-export default class Nav extends Vue {
-  @Prop({
-    type: Array,
-    default: () => [],
-  }) data;
-  @Model('input', { type: String }) test: String;
-  changed(ev) {
-    this.$emit('input', ev.target.value);
+import { Vue, Component, Prop } from 'vue-property-decorator';
+@Component
+export default class RkSelect extends Vue {
+  @Prop() data: any;
+  @Prop() value: any;
+  @Prop({ default: '' }) callValue: string;
+  search: string = '';
+  visible: boolean = false;
+  get filterData() {
+    return this.data.filter((i: any) => i.toString().indexOf(this.search) !== -1);
   }
-
-  @Prop({
-    type: String,
-    default: 'OK',
-  }) name: String;
-
-  message: String = 'Name';
-
-  say(): String {
-    return this.message;
+  handleOpen() {
+    this.visible = true;
+  }
+  handleClose() {
+    this.visible = false;
+  }
+  handleSelect(i: any) {
+    const temp = this.callValue ? i[this.callValue] : i;
+    this.$emit('input', temp);
+    this.visible = false;
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.rk-nav{
-  border-bottom:1px solid rgba(0,0,0,.05);
-  height: 40px;
-  background-color: #f6f7fb;
-  padding: 0 30px;
-}
-.rk-nav-i{
-  display: inline-block;
-  height: 41px;
-  margin-right: 20px;
-  line-height: 39px;
-  font-weight: 600;
-  border-bottom: 2px;
-  border-bottom-style: solid;
-  color: rgba(61, 68, 79, .6);
-  border-color: rgba(0, 0, 0, 0);
-  will-change: border-color,color;
-  transition: border-color .3s, color .3s;
-  &:hover, &.active{
-    border-color: #3880ff;
-    color: #3880ff;
+.rk-select-wrapper{
+    overflow: auto;
+    max-height: 200px;
   }
+.rk-select-search {
+  padding: 8px;
+  position: relative;
+  background-color: #eaeef1;
+  top: -5px;
+  border-bottom: 1px solid #ddd;
+  border-radius: 4px 4px 0 0;
+ &:before{
+    width: 16px;
+    height: 16px;
+    display: block;
+    content: '';
+    position: absolute;
+    top: 14px;
+    left: 13px;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTQ1MTQxNTU5NDY5IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIwNDMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTkzOC4yIDgzMi42TDcyMy44IDYxOC4xYy0yLjUtMi41LTUuMy00LjQtNy45LTYuNCAzNi4yLTU1LjYgNTcuMy0xMjEuOCA1Ny4zLTE5My4xQzc3My4zIDIyMi44IDYxNC42IDY0IDQxOC43IDY0UzY0IDIyMi44IDY0IDQxOC42YzAgMTk1LjkgMTU4LjggMzU0LjYgMzU0LjYgMzU0LjYgNzEuMyAwIDEzNy41LTIxLjIgMTkzLjItNTcuNCAyIDIuNyAzLjkgNS40IDYuMyA3LjhMODMyLjUgOTM4YzE0LjYgMTQuNiAzMy43IDIxLjkgNTIuOCAyMS45IDE5LjEgMCAzOC4yLTcuMyA1Mi44LTIxLjggMjkuMi0yOS4xIDI5LjItNzYuNCAwLjEtMTA1LjVNNDE4LjcgNjYxLjNDMjg0LjkgNjYxLjMgMTc2IDU1Mi40IDE3NiA0MTguNiAxNzYgMjg0LjkgMjg0LjkgMTc2IDQxOC43IDE3NmMxMzMuOCAwIDI0Mi42IDEwOC45IDI0Mi42IDI0Mi43IDAgMTMzLjctMTA4LjkgMjQyLjYtMjQyLjYgMjQyLjYiIHAtaWQ9IjIwNDQiIGZpbGw9IiNhZmFmYmYiPjwvcGF0aD48L3N2Zz4=);
+  }
+
+  .rk-select-search-input {
+  border: 1px solid #ddd;
+  padding: 3px 10px 3px 25px;
+  outline: 0;
+  width: 100%;
+  border-radius: 4px;
+
 }
+}
+
 </style>
diff --git a/src/views/components/trace/search-box.vue b/src/views/components/trace/search-box.vue
index 8827297..f160a2e 100644
--- a/src/views/components/trace/search-box.vue
+++ b/src/views/components/trace/search-box.vue
@@ -3,10 +3,12 @@
   <div class="rk-trace-search-box container">
     <div class="item">
       <div class="mb5 label">Service</div>
-      <select class="app" style="color:#fff;background: 0; border: 0; outline: none;" v-model="option.data.applicationId">
+      <rk-select v-model="option.data.applicationId" callValue="key" :data="[{key: 'ALL',label: 'All'},...stateOptions.applications]">
+      </rk-select>
+      <!-- <select class="app" style="color:#fff;background: 0; border: 0; outline: none;" v-model="option.data.applicationId">
         <option style="background-color: #25292f;" value="ALL">All</option>
         <option style="background-color: #25292f;" :value="i.key" v-for="i in stateOptions.applications" :key="i.key">{{i.label}}</option>
-      </select>
+      </select> -->
     </div>
     <div class="item">
       <div class="mb5 label">Endpoint</div>