diff --git a/src/components/Selector.vue b/src/components/Selector.vue
index 5812c701..b46cc47a 100644
--- a/src/components/Selector.vue
+++ b/src/components/Selector.vue
@@ -14,10 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <el-select
-    size="small"
+    :size="size"
     v-model="selected"
     :placeholder="placeholder"
-    class="selectors"
     @change="changeSelected"
   >
     <el-option
@@ -49,8 +48,10 @@ const props = defineProps({
   placeholder: { type: String, default: "Select a option" },
 });
 const selected = ref<string>("");
-function changeSelected(val: string) {
-  const optionSele = props.options.filter((d: Option) => d.value === val);
+function changeSelected() {
+  const optionSele = props.options.filter(
+    (d: Option) => d.value === selected.value
+  )[0];
   emit("change", optionSele);
 }
 </script>
diff --git a/src/views/dashboard/New.vue b/src/views/dashboard/New.vue
index 2598faf0..1104d7fb 100644
--- a/src/views/dashboard/New.vue
+++ b/src/views/dashboard/New.vue
@@ -19,7 +19,7 @@ limitations under the License. -->
       <div class="label">{{ t("name") }}</div>
       <el-input
         size="small"
-        v-model="state.name"
+        v-model="states.name"
         placeholder="Please input name"
       />
     </div>
@@ -30,6 +30,7 @@ limitations under the License. -->
         size="small"
         placeholder="Select a layer"
         @change="changeLayer"
+        class="selectors"
       />
     </div>
     <div class="item">
@@ -39,6 +40,7 @@ limitations under the License. -->
         size="small"
         placeholder="Select a entity"
         @change="changeEntity"
+        class="selectors"
       />
     </div>
     <div class="btn">
@@ -59,22 +61,22 @@ import uuid from "@/utils/uuid";
 
 const { t } = useI18n();
 const selectorStore = useSelectorStore();
-const state = reactive({
+const states = reactive({
   name: "",
   layer: "",
   entity: EntityType[0].value,
 });
 const onCreate = () => {
   const id = uuid();
-  const path = `/dashboard/edit/${state.layer}/${state.entity}/${id}`;
+  const path = `/dashboard/edit/${states.layer}/${states.entity}/${id}`;
   router.push(path);
 };
 selectorStore.fetchServices("general");
-function changeLayer(val: { label: string; value: string }) {
-  state.layer = val.value;
+function changeLayer(opt: { label: string; value: string }) {
+  states.layer = opt.value;
 }
-function changeEntity(val: { label: string; value: string }) {
-  state.entity = val.value;
+function changeEntity(opt: { label: string; value: string }) {
+  states.entity = opt.value;
 }
 </script>
 <style lang="scss" scoped>
@@ -93,8 +95,7 @@ function changeEntity(val: { label: string; value: string }) {
 }
 
 .new-dashboard,
-.selectors,
-.el-cascader-menu {
+.selectors {
   width: 600px;
 }
 
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index 397cb1ac..dfdbfa27 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -19,8 +19,16 @@ export const EntityType = [
   { value: "all", label: "All" },
   { value: "endpoint", label: "Service Endpoint" },
   { value: "serviceInstance", label: "Service Instance" },
-  { value: "serviceRelation", label: "Service Relation" },
-  { value: "serviceInstanceRelation", label: "Service Instance Relation" },
+  { value: "serviceRelationClient", label: "Service Relation(client)" },
+  { value: "serviceRelationServer", label: "Service Relation(server)" },
+  {
+    value: "serviceInstanceRelationClient",
+    label: "Service Instance Relation(client)",
+  },
+  {
+    value: "serviceInstanceRelationServer",
+    label: "Service Instance Relation(server)",
+  },
   { value: "endpointRelation", label: "Endpoint Relation" },
 ];
 export const Options = [