diff --git a/model/abyss.js b/model/abyss.js
index d93b537..8854631 100644
--- a/model/abyss.js
+++ b/model/abyss.js
@@ -101,6 +101,7 @@ export class ChallengeAvatar {
     this.level = data.level;
     this.rarity = data.rarity;
     this.element_type = data.element_type;
+    this.rank = data.rank;
   }
 
   async get_assets() {
diff --git a/resources/abyss/index.css b/resources/abyss/index.css
index ea62248..a43217d 100644
--- a/resources/abyss/index.css
+++ b/resources/abyss/index.css
@@ -208,6 +208,28 @@
   display: flex;
   text-align: center;
 }
+.card .item-card .team .list .item .c-info .ranks {
+  background: rgb(117, 117, 117);
+  padding: 0 0.2em;
+}
+.card .item-card .team .list .item .c-info .ranks.r1 {
+  background: rgb(58, 116, 43);
+}
+.card .item-card .team .list .item .c-info .ranks.r2 {
+  background: rgb(61, 132, 214);
+}
+.card .item-card .team .list .item .c-info .ranks.r3 {
+  background: rgb(223, 118, 118);
+}
+.card .item-card .team .list .item .c-info .ranks.r4 {
+  background: rgb(51, 54, 161);
+}
+.card .item-card .team .list .item .c-info .ranks.r5 {
+  background: rgb(102, 127, 19);
+}
+.card .item-card .team .list .item .c-info .ranks.r6 {
+  background: rgb(218, 48, 32);
+}
 .card .item-card .team .list .item .c-info .level {
   flex-grow: 1;
   flex-shrink: 1;
diff --git a/resources/abyss/index.html b/resources/abyss/index.html
index d83897a..e0d18d0 100644
--- a/resources/abyss/index.html
+++ b/resources/abyss/index.html
@@ -61,14 +61,16 @@
         <div class="list">
           <% for(let i=0 ; i < 3 ; i++) { %>
             {{if floor.node_1.avatars?.[i]}}
-            <div class="item char rank{{floor.node_1.avatars[i].rarity}}">
-              <div class="rank rank-icon {{floor.node_1.avatars[i].rarity}}"></div>
-              <div class="property {{floor.node_1.avatars[i].element}}"></div>
+            {{set char = floor.node_1.avatars[i]}}
+            <div class="item char rank{{char.rarity}}">
+              <div class="rank rank-icon {{char.rarity}}"></div>
+              <div class="property {{char.element}}"></div>
               <div class="image">
-                <img src="{{floor.node_1.avatars[i].square_icon}}" alt="">
+                <img src="{{char.square_icon}}" alt="">
               </div>
               <div class="c-info">
-                <div class="level">等级{{floor.node_1.avatars[i].level}}</div>
+                <div class="ranks r{{char.rank}}">{{char.rank}}影</div>
+                <div class="level">等级{{char.level}}</div>
               </div>
             </div>
             {{else}}
@@ -106,14 +108,16 @@
         <div class="list">
           <% for(let i=0 ; i < 3 ; i++) { %>
             {{if floor.node_2.avatars?.[i]}}
-            <div class="item char rank{{floor.node_2.avatars[i].rarity}}">
-              <div class="rank rank-icon {{floor.node_2.avatars[i].rarity}}"></div>
-              <div class="property {{floor.node_2.avatars[i].element}}"></div>
+            {{set char = floor.node_2.avatars[i]}}
+            <div class="item char rank{{char.rarity}}">
+              <div class="rank rank-icon {{char.rarity}}"></div>
+              <div class="property {{char.element}}"></div>
               <div class="image">
-                <img src="{{floor.node_2.avatars[i].square_icon}}" alt="">
+                <img src="{{char.square_icon}}" alt="">
               </div>
               <div class="c-info">
-                <div class="level">等级{{floor.node_2.avatars[i].level}}</div>
+                <div class="ranks r{{char.rank}}">{{char.rank}}影</div>
+                <div class="level">等级{{char.level}}</div>
               </div>
             </div>
             {{else}}
diff --git a/resources/abyss/index.scss b/resources/abyss/index.scss
index 6283ea4..ba250b9 100644
--- a/resources/abyss/index.scss
+++ b/resources/abyss/index.scss
@@ -209,6 +209,28 @@
             color: white;
             display: flex;
             text-align: center;
+            .ranks {
+              background: rgb(117, 117, 117);
+              padding: 0 0.2em;
+              &.r1 {
+                background: rgb(58, 116, 43);
+              }
+              &.r2 {
+                background: rgb(61, 132, 214);
+              }
+              &.r3 {
+                background: rgb(223, 118, 118);
+              }
+              &.r4 {
+                background: rgb(51, 54, 161);
+              }
+              &.r5 {
+                background: rgb(102, 127, 19);
+              }
+              &.r6 {
+                background: rgb(218, 48, 32);
+              }
+            }
             .level {
               flex-grow: 1;
               flex-shrink: 1;
diff --git a/resources/card/index.css b/resources/card/index.css
index 280e549..4e76e96 100644
--- a/resources/card/index.css
+++ b/resources/card/index.css
@@ -94,7 +94,7 @@
 }
 .card .list .item .c-info .ranks {
   background: rgb(117, 117, 117);
-  padding: 0 0.4em;
+  padding: 0 0.2em;
 }
 .card .list .item .c-info .ranks.r1 {
   background: rgb(58, 116, 43);
diff --git a/resources/card/index.html b/resources/card/index.html
index b89862e..e11eb13 100644
--- a/resources/card/index.html
+++ b/resources/card/index.html
@@ -35,7 +35,7 @@
           <img src="{{char.square_icon}}" alt="">
         </div>
         <div class="c-info">
-          <div class="ranks r{{char.rank}}">{{char.rank}}命</div>
+          <div class="ranks r{{char.rank}}">{{char.rank}}影</div>
           <div class="level">等级{{char.level}}</div>
         </div>
       </div>
diff --git a/resources/card/index.scss b/resources/card/index.scss
index b4b80a3..8593fcb 100644
--- a/resources/card/index.scss
+++ b/resources/card/index.scss
@@ -94,7 +94,7 @@
         text-align: center;
         .ranks {
           background: rgb(117, 117, 117);
-          padding: 0 0.4em;
+          padding: 0 0.2em;
           &.r1 {
             background: rgb(58, 116, 43);
           }