diff --git a/src/assets/css/font/iconfont.css b/src/assets/css/font/iconfont.css
index 802d57ce..38ded4b1 100644
--- a/src/assets/css/font/iconfont.css
+++ b/src/assets/css/font/iconfont.css
@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1628479878175') format('woff2'),
-       url('iconfont.woff?t=1628479878175') format('woff'),
-       url('iconfont.ttf?t=1628479878175') format('truetype');
+  src: url('iconfont.woff2?t=1628497043863') format('woff2'),
+       url('iconfont.woff?t=1628497043863') format('woff'),
+       url('iconfont.ttf?t=1628497043863') format('truetype');
 }
 
 .cn-icon {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cn-icon-country:before {
+  content: "\e742";
+}
+
 .cn-icon-arrow-left-circle:before {
   content: "\e741";
 }
diff --git a/src/assets/css/font/iconfont.ttf b/src/assets/css/font/iconfont.ttf
index e91a454b..f42695bd 100644
Binary files a/src/assets/css/font/iconfont.ttf and b/src/assets/css/font/iconfont.ttf differ
diff --git a/src/assets/css/font/iconfont.woff b/src/assets/css/font/iconfont.woff
index ee09fe59..401da093 100644
Binary files a/src/assets/css/font/iconfont.woff and b/src/assets/css/font/iconfont.woff differ
diff --git a/src/assets/css/font/iconfont.woff2 b/src/assets/css/font/iconfont.woff2
index c8c885af..f9e594ae 100644
Binary files a/src/assets/css/font/iconfont.woff2 and b/src/assets/css/font/iconfont.woff2 differ
diff --git a/src/assets/css/theme.scss b/src/assets/css/theme.scss
index 0bad5935..b006c5ce 100644
--- a/src/assets/css/theme.scss
+++ b/src/assets/css/theme.scss
@@ -13,6 +13,8 @@ $--menu-hover-background-color: #000C18; // menu背景色
 $--menu-item-font-color: #BEBEBE; // menu字色
 $--menu-item-hover-fill: $--color-primary; // menu鼠标悬浮、激活时背景色
 
+$--tree-node-hover-background-color: #F5F7FA;
+
 $--collapse-header-height: 42px;
 $--collapse-border-color: #EFF2F5;
 
diff --git a/src/components/entities/EntityList.vue b/src/components/entities/EntityList.vue
index b6ab1d72..d72820b1 100644
--- a/src/components/entities/EntityList.vue
+++ b/src/components/entities/EntityList.vue
@@ -4,12 +4,10 @@
       <div class="cn-entity" v-for="d in listData" :key="d.id">
         <div class="cn-entity__header">
           <div class="header__icon"><i :class="iconClass"></i></div>
-          <div class="header__content">
-            <div class="content__title" :title="d.ip||d.domainName||d.appName">
-              <template v-if="entityType === 'ip'">{{d.ip || 'Unknown'}}</template>
-              <template v-else-if="entityType === 'domain'">{{d.domainName || 'Unknown'}}</template>
-              <template v-else-if="entityType === 'app'">{{d.appName || 'Unknown'}}</template>
-            </div>
+          <div class="header__content" :title="d.ip||d.domainName||d.appName">
+            <template v-if="entityType === 'ip'">{{d.ip || 'Unknown'}}</template>
+            <template v-else-if="entityType === 'domain'">{{d.domainName || 'Unknown'}}</template>
+            <template v-else-if="entityType === 'app'">{{d.appName || 'Unknown'}}</template>
           </div>
         </div>
         <div class="cn-entity__body" style="position: relative;">
diff --git a/src/components/entities/LeftFilter.vue b/src/components/entities/LeftFilter.vue
index 693ac796..5e5a934d 100644
--- a/src/components/entities/LeftFilter.vue
+++ b/src/components/entities/LeftFilter.vue
@@ -6,9 +6,11 @@
         <el-collapse-item
             v-for="(f, i) in filterData"
             :key="i"
-            :title="f.title"
             :name="`${i}`"
         >
+          <template #title>
+            <div class="collapse-header"><i :class="f.icon" class="collapse-header__icon"></i><span>{{f.title}}</span></div>
+          </template>
           <el-tree
               :data="f.data"
               :load="(node, resolve) => loadFilter(node, resolve, f)"
@@ -97,17 +99,19 @@ export default {
 .entity-left-filter {
   display: flex;
   flex-direction: column;
+  margin-top: 10px;
   width: 100%;
   height: 100%;
-  border: 1px solid $--right-box-border-color;
+  // border: 1px solid $--right-box-border-color;
   overflow: auto;
 
   .filter__header {
-    background-color: #FAFAFA;
+    background-color: #E1E6ED;
+    margin-bottom: 10px;
     padding-left: 8px;
     height: 36px;
     line-height: 36px;
-    color: #333;
+    color: #666;
     font-size: 14px;
   }
   .filter__body {
@@ -117,20 +121,41 @@ export default {
     overflow: auto;
 
     .filter__collapse {
+      .el-collapse-item {
+        margin-bottom: 10px;
+      }
       .el-collapse-item__header {
-        padding-left: 10px;
+        padding-left: 15px;
         padding-top: 8px;
-        font-weight: bold;
-
-        &.is-active {
-          border-bottom: 1px solid $--right-box-border-color;
-        }
+        color: #8FA1BE;
+        border-bottom: none !important;
+      }
+      .collapse-header {
+        display: flex;
+        width: 100%;
+        border-bottom: 1px solid $--content-right-background-color;
+      }
+      .collapse-header__icon {
+        padding-right: 6px;
+        font-size: 14px;
       }
       .el-collapse-item__wrap {
-        padding-top: 6px !important;
+        padding-top: 14px !important;
 
         .el-collapse-item__content {
           padding-bottom: 15px;
+
+          .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+            background-color: $--tree-node-hover-background-color;
+          }
+          .el-tree-node.is-expanded, .el-tree-node.is-current {
+            &>.el-tree-node__content>.filter-item {
+              font-weight: bold;
+            }
+          }
+          .el-tree-node__content {
+            height: 30px;
+          }
         }
         .filter-item {
           display: flex;
@@ -147,11 +172,11 @@ export default {
         .filter__more {
           padding-left: 24px;
           line-height: 36px;
-          color: $--color-primary;
+          color: #8FA1BE;
           cursor: pointer;
         }
         .filter__more.filter__more--disabled {
-          color: #999;
+          color: #ccc;
           cursor: default;
         }
       }
diff --git a/src/components/entities/entities.scss b/src/components/entities/entities.scss
index cfb4db94..18c87111 100644
--- a/src/components/entities/entities.scss
+++ b/src/components/entities/entities.scss
@@ -1,9 +1,9 @@
 .cn-entities {
   display: grid;
-  grid-template-rows: 32px auto;
+  grid-template-rows: 40px auto;
   grid-template-columns: 250px auto;
   grid-gap: 10px 20px;
-  padding: 20px;
+  padding: 10px;
   height: 100%;
   width: 100%;
 
@@ -24,8 +24,9 @@
       justify-content: space-between;
       border-radius: 2px;
       height: calc(100% - 67px);
-      width: 100%;
-      overflow: auto;
+      margin: 10px 0 0 10px;
+      width: calc(100% - 10px);
+      overflow: hidden auto;
 
       .cn-entity:hover{
           box-shadow:  0 0 10px #ccc;
@@ -41,22 +42,23 @@
         }
       }
       .cn-entity {
-      /* display: grid;
-        grid-template-rows: 44% 56%;*/
         box-sizing: border-box;
-        margin: 14px 13px;
+        margin-bottom: 30px;
         width: 240px;
         height: 315px;
         background: #FFFFFF;
         border-radius: 2px;
-        border: 1px solid $--right-box-border-color;
         transition: all .2s;
 
+        &:hover .cn-entity__header .header__content {
+          color: white;
+        }
         .cn-entity__header {
           position: relative;
-          background: #E1E6ED;
+          background-color: #E1E6ED;
           display: flex;
           align-items: center;
+          justify-content: center;
           padding: 20px;
           width: 240px;
           height: 96.61px;
@@ -84,40 +86,16 @@
             }
           }
           .header__content {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            padding-left: 10px;
-
-            .content__title {
-              font-family: Roboto-Medium;
-              margin-left: 24px;
-              text-align: center;
-              font-size: 20px;
-              color: #828790;
-              font-weight: 500;
-              width: 125px;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              -o-text-overflow: ellipsis;
-              white-space: nowrap;
-            }
-            .content__desc {
-              font-size: 14px;
-              color: #999999 !important;
-              padding-top: 3px;
-
-              .desc__label {
-                color: #aaa;
-                padding-right: 10px;
-
-              }
-            }
+            font-size: 20px;
+            color: #828790;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
           }
         }
         .cn-entity__body {
           overflow: hidden;
-         padding-top:65px;
+          padding-top:65px;
           font-size: 14px;
           .body__row {
             display: flex;
@@ -163,7 +141,7 @@
       display: flex;
       justify-content: center;
       align-items: flex-end;
-      height: 67px;
+      margin-top: 23px;
 
       .el-pager {
         li:last-of-type {
diff --git a/src/views/entities/EntityExplorer.vue b/src/views/entities/EntityExplorer.vue
index 8e4efdeb..0f70c285 100644
--- a/src/views/entities/EntityExplorer.vue
+++ b/src/views/entities/EntityExplorer.vue
@@ -1,17 +1,16 @@
 <template>
   <div class="outer-box" v-if="!showDetail">
+    <el-select
+        size="small"
+        v-model="filterType"
+        style="position: fixed; top: 9px; width: 130px; left:260px;"
+    >
+      <el-option v-for="(value, key) in entityType" :key="key" :label="value" :value="key"></el-option>
+    </el-select>
     <div class="cn-entities">
-      <el-select
-          size="small"
-          style="width: 100%"
-          v-model="filterType"
-      >
-        <el-option v-for="(value, key) in entityType" :key="key" :label="value" :value="key"></el-option>
-      </el-select>
       <el-input
           v-model="searchContent"
-          size="small"
-          style="width: 100%"
+          style="width: 100%; grid-area: 1 / 1 / 1 / 3;"
           type="text"
       >
         <template #prefix>
@@ -24,6 +23,7 @@
           @select="select"
           @showMore="showMore"
           @loadFilter="loadFilter"
+          style="grid-area: 2 / 1 / 3 / 2;"
       ></left-filter>
       <!-- 内容区域 -->
       <entity-list
@@ -33,6 +33,7 @@
           @showDetail="entityDetail"
           @pageSize="pageSizeRight"
           @pageNo="pageNoRight"
+          style="grid-area: 2 / 2 / 3 / 3;"
       ></entity-list>
     </div>
   </div>
@@ -146,8 +147,8 @@ export default {
         case 'ip': {
           requests.push(this.loadFilterData(n, 'country'))
           requests.push(this.loadFilterData(n, 'asn'))
-          data.push({ filterType: n, title: this.$t('entities.countryOrRegion'), key: 'country', childrenKey: 'region', type: 'country', childrenType: 'region' })
-          data.push({ filterType: n, title: this.$t('entities.asn'), key: 'asn', type: 'asn' })
+          data.push({ filterType: n, title: this.$t('entities.countryOrRegion'), icon: 'cn-icon cn-icon-country', key: 'country', childrenKey: 'region', type: 'country', childrenType: 'region' })
+          data.push({ filterType: n, title: this.$t('entities.asn'), icon: 'cn-icon cn-icon-cloud', key: 'asn', type: 'asn' })
           getEntityIpList({ ...this.pageObjRight }).then(res => {
             this.listData = res.data.result
             this.pageObjRight = { ...this.pageObjRight, total: res.statistics.result_size }
@@ -157,8 +158,8 @@ export default {
         case 'domain': {
           requests.push(this.loadFilterData(n, 'categoryGroup'))
           requests.push(this.loadFilterData(n, 'reputationLevel'))
-          data.push({ filterType: n, title: this.$t('entities.groupAndName'), key: 'categoryGroup', childrenKey: 'categoryName' })
-          data.push({ filterType: n, title: this.$t('entities.creditLevel'), key: 'reputationLevel' })
+          data.push({ filterType: n, title: this.$t('entities.groupAndName'), icon: 'cn-icon cn-icon-category', key: 'categoryGroup', childrenKey: 'categoryName' })
+          data.push({ filterType: n, title: this.$t('entities.creditLevel'), icon: 'cn-icon cn-icon-risk', key: 'reputationLevel' })
           getEntityDomainList({ ...this.pageObjRight }).then(res => {
             this.listData = res.data.result
             this.pageObjRight = { ...this.pageObjRight, total: res.statistics.result_size }
@@ -168,8 +169,8 @@ export default {
         case 'app': {
           requests.push(this.loadFilterData(n, 'appCategory'))
           requests.push(this.loadFilterData(n, 'appRisk'))
-          data.push({ filterType: n, title: this.$t('entities.categoryAndSub'), key: 'appCategory', childrenKey: 'appSubcategory' })
-          data.push({ filterType: n, title: this.$t('entities.riskLevel'), key: 'appRisk' })
+          data.push({ filterType: n, title: this.$t('entities.categoryAndSub'), icon: 'cn-icon cn-icon-category', key: 'appCategory', childrenKey: 'appSubcategory' })
+          data.push({ filterType: n, title: this.$t('entities.riskLevel'), icon: 'cn-icon cn-icon-risk', key: 'appRisk' })
           getEntityAppList({ ...this.pageObjRight }).then(res => {
             this.listData = res.data.result
             this.pageObjRight = { ...this.pageObjRight, total: res.statistics.result_size }
@@ -274,6 +275,7 @@ export default {
       title: this.$t('entities.countryOrRegion'),
       key: 'country',
       childrenKey: 'region',
+      icon: 'cn-icon cn-icon-country',
       data: country,
       hasnotMore: this.$_.isEmpty(country) || country.length < 10,
       filterType: this.filterType
@@ -282,6 +284,7 @@ export default {
       title: this.$t('entities.asn'),
       key: 'asn',
       data: asn,
+      icon: 'cn-icon cn-icon-cloud',
       hasnotMore: this.$_.isEmpty(asn) || asn.length < 10,
       filterType: this.filterType
     })