diff --git a/resources/card/index.css b/resources/card/index.css
index 3e75d51..bd5b63d 100644
--- a/resources/card/index.css
+++ b/resources/card/index.css
@@ -105,24 +105,15 @@
   top: 0.2em;
   left: 0.1em;
   width: 1.5em;
-  aspect-ratio: 1;
-  background: url("./images/RANK_A.png") no-repeat center center;
-  background-size: contain;
   color: white;
   z-index: 2;
 }
 .card .list .item.rankS::after {
   background: rgb(230, 119, 51);
 }
-.card .list .item.rankS .rank {
-  background-image: url("./images/RANK_S.png");
-}
 .card .list .item.rankB::after {
   background: rgb(93, 183, 249);
 }
-.card .list .item.rankB .rank {
-  background-image: url("./images/RANK_B.png");
-}
 .card .list .item .image {
   width: 100%;
   aspect-ratio: 0.8;
diff --git a/resources/card/index.html b/resources/card/index.html
index 7a951a4..d25c0f4 100644
--- a/resources/card/index.html
+++ b/resources/card/index.html
@@ -44,7 +44,7 @@
   <div class="list">
     {{each card.avatar_list char i}}
     <div class="item rank{{char.rarity}}">
-      <div class="rank rank{{char.rarity}}"></div>
+      <div class="rank rank-icon {{char.rarity}}"></div>
       <div class="property {{char.element_str}}"></div>
       <div class="image">
         <img src="{{char.square_icon}}" alt="">
@@ -74,7 +74,7 @@
   <div class="list">
     {{each card.buddy_list bangboo i}}
     <div class="item rank{{bangboo.rarity}}">
-      <div class="rank rank{{bangboo.rarity}}"></div>
+      <div class="rank rank-icon {{bangboo.rarity}}"></div>
       <div class="image">
         <img src="{{bangboo.square_icon}}" alt="">
       </div>
@@ -83,4 +83,4 @@
     {{/each}}
   </div>
 </div>
-{{/block}}
+{{/block}}
\ No newline at end of file
diff --git a/resources/card/index.scss b/resources/card/index.scss
index f1be98f..9abc0f8 100644
--- a/resources/card/index.scss
+++ b/resources/card/index.scss
@@ -113,9 +113,6 @@
         top: 0.2em;
         left: 0.1em;
         width: 1.5em;
-        aspect-ratio: 1;
-        background: url('./images/RANK_A.png') no-repeat center center;
-        background-size: contain;
         color: white;
         z-index: 2;
       }
@@ -123,17 +120,11 @@
         &::after {
           background: rgb(230, 119, 51);
         }
-        .rank {
-          background-image: url('./images/RANK_S.png');
-        }
       }
       &.rankB {
         &::after {
           background: rgb(93, 183, 249);
         }
-        .rank {
-          background-image: url('./images/RANK_B.png');
-        }
       }
       .image {
         width: 100%;
diff --git a/resources/gachalog/images/RANK_A.png b/resources/common/images/RANK_A.png
similarity index 100%
rename from resources/gachalog/images/RANK_A.png
rename to resources/common/images/RANK_A.png
diff --git a/resources/gachalog/images/RANK_B.png b/resources/common/images/RANK_B.png
similarity index 100%
rename from resources/gachalog/images/RANK_B.png
rename to resources/common/images/RANK_B.png
diff --git a/resources/gachalog/images/RANK_S.png b/resources/common/images/RANK_S.png
similarity index 100%
rename from resources/gachalog/images/RANK_S.png
rename to resources/common/images/RANK_S.png
diff --git a/resources/common/style/index.css b/resources/common/style/index.css
index 28eb92e..fefee3c 100644
--- a/resources/common/style/index.css
+++ b/resources/common/style/index.css
@@ -18,4 +18,21 @@
   font-family: "Source Han Serif", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
+.rank-icon {
+  width: 1.5em;
+  aspect-ratio: 1;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+.rank-icon.s, .rank-icon.S {
+  background-image: url("../images/RANK_S.png");
+}
+.rank-icon.a, .rank-icon.A {
+  background-image: url("../images/RANK_A.png");
+}
+.rank-icon.b, .rank-icon.B {
+  background-image: url("../images/RANK_B.png");
+}
+
 /*# sourceMappingURL=index.css.map */
diff --git a/resources/common/style/index.scss b/resources/common/style/index.scss
index 33d3479..243c401 100644
--- a/resources/common/style/index.scss
+++ b/resources/common/style/index.scss
@@ -39,3 +39,23 @@
     'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
     sans-serif;
 }
+
+.rank-icon {
+  width: 1.5em;
+  aspect-ratio: 1;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  &.s,
+  &.S {
+    background-image: url('../images/RANK_S.png');
+  }
+  &.a,
+  &.A {
+    background-image: url('../images/RANK_A.png');
+  }
+  &.b,
+  &.B {
+    background-image: url('../images/RANK_B.png');
+  }
+}
diff --git a/resources/gachalog/images/role_square_avatar_1011.png b/resources/gachalog/images/role_square_avatar_1011.png
deleted file mode 100644
index 9a67751..0000000
Binary files a/resources/gachalog/images/role_square_avatar_1011.png and /dev/null differ
diff --git a/resources/gachalog/index.css b/resources/gachalog/index.css
index 6883997..049a1b0 100644
--- a/resources/gachalog/index.css
+++ b/resources/gachalog/index.css
@@ -176,18 +176,9 @@
   top: 0.2em;
   right: 0.2em;
   width: 1.5em;
-  aspect-ratio: 1;
-  background: url("./images/RANK_A.png") no-repeat center center;
-  background-size: contain;
   color: white;
   z-index: 2;
 }
-.card .list .item.rankS .rank {
-  background-image: url("./images/RANK_S.png");
-}
-.card .list .item.rankB .rank {
-  background-image: url("./images/RANK_B.png");
-}
 .card .list .item .image {
   width: 100%;
   aspect-ratio: 1.5;
diff --git a/resources/gachalog/index.html b/resources/gachalog/index.html
index cbec8e3..53d9c72 100644
--- a/resources/gachalog/index.html
+++ b/resources/gachalog/index.html
@@ -41,7 +41,7 @@
   <div class="list">
     {{each item.list inv j}}
     <div class="item rankS {{inv.isUp && 'up'}}">
-      <div class="rank rankS"></div>
+      <div class="rank rank-icon s"></div>
       <div class="image">
         <img src="{{inv.square_icon}}" alt="">
       </div>
@@ -54,4 +54,4 @@
   {{/each}}
 
 </div>
-{{/block}}
+{{/block}}
\ No newline at end of file
diff --git a/resources/gachalog/index.scss b/resources/gachalog/index.scss
index ab8e1c8..9d541d6 100644
--- a/resources/gachalog/index.scss
+++ b/resources/gachalog/index.scss
@@ -127,22 +127,9 @@
         top: 0.2em;
         right: 0.2em;
         width: 1.5em;
-        aspect-ratio: 1;
-        background: url('./images/RANK_A.png') no-repeat center center;
-        background-size: contain;
         color: white;
         z-index: 2;
       }
-      &.rankS {
-        .rank {
-          background-image: url('./images/RANK_S.png');
-        }
-      }
-      &.rankB {
-        .rank {
-          background-image: url('./images/RANK_B.png');
-        }
-      }
       .image {
         width: 100%;
         aspect-ratio: 1.5;