diff --git a/src/assets/css/theme.scss b/src/assets/css/theme.scss
index b1dbd0d1..0bad5935 100644
--- a/src/assets/css/theme.scss
+++ b/src/assets/css/theme.scss
@@ -21,24 +21,24 @@ $--collapse-border-color: #EFF2F5;
   /* 自适应变量 */
   @media only screen  and (min-width : 10px) {
     --chart-height-unit: 25px;  // chart的单元高度
-    --entity-width: calc(50% - 5px);  // entity列表每个entity框的宽度
-    --entity-height: 190px;  // entity列表每个entity框的高度
+/*    --entity-width: calc(50% - 5px);  // entity列表每个entity框的宽度
+    --entity-height: 190px;  // entity列表每个entity框的高度*/
   }
   @media only screen  and (min-width : 1224px) {
     --chart-height-unit: 30px;
   }
-  @media only screen  and (min-width : 1560px) {
+/*  @media only screen  and (min-width : 1560px) {
     --entity-width: calc(33.3% - 7px);
-  }
+  }*/
   @media only screen  and (min-width : 1824px) {
     --chart-height-unit: 40px;
-    --entity-width: calc(33.3% - 7px);
-    --entity-height: 210px;
+   /* --entity-width: calc(33.3% - 7px);
+    --entity-height: 210px;*/
   }
   @media only screen  and (min-width : 2424px) {
     --chart-height-unit: 55px;
-    --entity-width: calc(25% - 8px);
-    --entity-height: 240px;
+  /*  --entity-width: calc(25% - 8px);
+    --entity-height: 240px;*/
   }
 }
 
diff --git a/src/components/entities/EntityList.vue b/src/components/entities/EntityList.vue
index a4042376..2f91e171 100644
--- a/src/components/entities/EntityList.vue
+++ b/src/components/entities/EntityList.vue
@@ -3,9 +3,9 @@
     <div class="entity-list__content">
       <div class="cn-entity" v-for="d in listData" :key="d.id">
         <div class="cn-entity__header">
-          <div class="header__icon" :style="{backgroundColor: circleColor}"><i :class="iconClass"></i></div>
+          <div class="header__icon"><i :class="iconClass"></i></div>
           <div class="header__content">
-            <div class="content__title">
+            <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>
@@ -32,11 +32,11 @@
               <span class="body__row-label">{{$t('overall.region')}}:</span>
               <div class="body__row-value" :title="d.region">{{d.region || '-'}}</div>
             </div>
-            <div class="body__row">
+            <div class="body__row Select">
               <span class="body__row-label">{{$t('entities.asn')}}:</span>
               <div class="body__row-value" :title="d.asn">{{d.asn || '-'}}</div>
             </div>
-            <div class="body__detail" @click="entityDetail">{{$t('overall.detail')}}</div>
+            <div class="body__detail" @click="entityDetail">{{$t('overall.detail')}}></div>
           </template>
           <template v-else-if="entityType === 'domain'">
             <div class="body__row">
@@ -47,11 +47,11 @@
               <span class="body__row-label">{{$t('entities.categoryName')}}:</span>
               <div class="body__row-value" :title="d.categoryName">{{d.categoryName || '-'}}</div>
             </div>
-            <div class="body__row">
+            <div class="body__row Select">
               <span class="body__row-label">{{$t('entities.creditScore')}}:</span>
               <div class="body__row-value" :title="d.reputationScore">{{d.reputationScore || '-'}}</div>
             </div>
-            <div class="body__detail" @click="entityDetail({domain: d.domainName})">{{$t('overall.detail')}}</div>
+            <div class="body__detail" @click="entityDetail({domain: d.domainName})">{{$t('overall.detail')}}></div>
           </template>
           <template v-else-if="entityType === 'app'">
             <div class="body__row">
@@ -62,11 +62,11 @@
               <span class="body__row-label">{{$t('entities.category')}}:</span>
               <div class="body__row-value" :title="d.appCategory">{{d.appCategory || '-'}}</div>
             </div>
-            <div class="body__row">
+            <div class="body__row Select">
               <span class="body__row-label">{{$t('entities.subcategory')}}:</span>
               <div class="body__row-value" :title="d.appSubategory">{{d.appSubategory || '-'}}</div>
             </div>
-            <div class="body__detail" @click="entityDetail({appId: d.appId})">{{$t('overall.detail')}}</div>
+            <div class="body__detail" @click="entityDetail({appId: d.appId})">{{$t('overall.detail')}}></div>
           </template>
         </div>
       </div>
diff --git a/src/components/entities/entities.scss b/src/components/entities/entities.scss
index 0bb674c8..c181fac6 100644
--- a/src/components/entities/entities.scss
+++ b/src/components/entities/entities.scss
@@ -6,7 +6,7 @@
   padding: 20px;
   height: 100%;
   width: 100%;
-  background-color: #fff;
+  background-color: #EBEEF1;
 
   .entity-list {
     height: 100%;
@@ -14,36 +14,68 @@
     overflow: hidden;
 
     .entity-list__content {
-      display: grid;
+    /*  display: grid;
       grid-template-columns: repeat(auto-fill, var(--entity-width));
       grid-auto-flow: row;
-      grid-auto-rows: var(--entity-height);
-      grid-gap: 10px;
+      grid-auto-rows: var(--entity-height);*/
+     /* grid-gap: 10px;*/
+      display: flex;
+      flex-wrap: wrap;
+      display: -webkit-flex;
+      justify-content: space-between;
+      border-radius: 2px;
       height: calc(100% - 67px);
       width: 100%;
       overflow: auto;
 
+      .cn-entity:hover{
+          box-shadow: inset 0 0 10px #ccc;
+        .cn-entity__header{
+          background: #8FA1BE;
+        }
+        .header__icon{
+          background: #8FA1BE;
+          border: 2px solid #FFFFFF;
+        }
+      }
       .cn-entity {
-        display: grid;
-        grid-template-rows: 44% 56%;
+      /* display: grid;
+        grid-template-rows: 44% 56%;*/
+        box-sizing: border-box;
+        margin: 14px 13px;
+        width: 240px;
+        height: 290px;
+        background: #FFFFFF;
+        border-radius: 2px;
         border: 1px solid $--right-box-border-color;
 
         .cn-entity__header {
+          position: relative;
+          background: #E1E6ED;
           display: flex;
           align-items: center;
           padding: 20px;
+          width: 240px;
+          height: 96.61px;
+          box-sizing: border-box;
 
           .header__icon {
+            overflow: hidden;
+            position: absolute;
+            bottom: -26px;
+            right: 102px;
             display: flex;
             justify-content: center;
             justify-items: center;
             align-items: center;
-            width: 52px;
-            height: 52px;
+            width: 44px;
+            height: 44px;
             border-radius: 50%;
+            background: #B8C1D1;
 
             i {
               font-size: 20px;
+              color: #ffffff;
             }
           }
           .header__content {
@@ -53,9 +85,16 @@
             padding-left: 10px;
 
             .content__title {
-              font-size: 22px;
-              color: #333333;
-              font-weight: bold;
+              font-family: Roboto-Medium;
+              margin-left: 24px;
+              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;
@@ -71,25 +110,38 @@
         }
         .cn-entity__body {
           overflow: hidden;
+         padding-top: 34px;
+          font-size: 14px;
 
           .body__row {
             display: flex;
-            padding: 0 0 0 20px;
+            width:200px;
+            margin:5px auto;
             color: #666;
+            overflow-y: scroll;
+            border-bottom: 1px solid #EFF2F5;
 
             .body__row-label {
               padding-right: 15px;
             }
             .body__row-value {
-              width: calc(100% - 150px);
+              width: calc(100% - 69px);
+              height:31px;
               overflow: hidden;
               text-overflow: ellipsis;
+              overflow-y: scroll;
+            }
+            .body__row-value::-webkit-scrollbar{
+              display: none;
             }
           }
           .body__detail {
-            padding: 10px 0 0 20px;
-            color: $--color-primary;
+            padding: 1px 0 0 156px;
             cursor: pointer;
+            font-family: Roboto-Regular;
+            font-size: 14px;
+            color: #8FA1BE;
+            font-weight: 400;
 
           }
         }
@@ -112,3 +164,8 @@
 .app-orange {
   color: #FFA200;
 }
+.Select{
+  border-bottom: 0px !important;
+ }
+
+