diff --git a/resources/genshin/abyss/example.html b/resources/genshin/abyss/example.html
index 6b8a3e6e..dafe3ce9 100644
--- a/resources/genshin/abyss/example.html
+++ b/resources/genshin/abyss/example.html
@@ -26,6 +26,7 @@
             <div class="caption">出战次数</div>
             <div class="characters">
                 <div class="character">
+                    <div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
                     <div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
                         <img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
                     </div>
@@ -114,7 +115,7 @@
                     <div class="battle">
                         <div class="character">
                             <div style="background-color: var(--red)">6命</div>
-                            <div class="element" style="background-image: url('../../img/element/Cyro.png')"></div>
+                            <div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
                             <div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
                                 <img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
                             </div>
@@ -122,7 +123,7 @@
                         </div>
                         <div class="character">
                             <div style="background-color: var(--red)">5命</div>
-                            <div class="element" style="background-image: url('../../img/element/Cyro.png')"></div>
+                            <div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
                             <div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
                                 <img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
                             </div>
@@ -130,7 +131,7 @@
                         </div>
                         <div class="character">
                             <div style="background-color: var(--green)">4命</div>
-                            <div class="element" style="background-image: url('../../img/element/Cyro.png')"></div>
+                            <div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
                             <div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
                                 <img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
                             </div>
@@ -138,7 +139,7 @@
                         </div>
                         <div class="character">
                             <div style="background-color: var(--green)">3命</div>
-                            <div class="element" style="background-image: url('../../img/element/Cyro.png')"></div>
+                            <div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
                             <div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
                                 <img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
                             </div>
@@ -149,7 +150,7 @@
                     <div class="battle">
                         <div class="character">
                             <div style="background-color: var(--blue)">2命</div>
-                            <div class="element" style="background-image: url('../../img/element/Cyro.png')"></div>
+                            <div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
                             <div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
                                 <img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
                             </div>
@@ -157,14 +158,14 @@
                         </div>
                         <div class="character">
                             <div style="background-color: var(--blue)">1命</div>
-                            <div class="element" style="background-image: url('../../img/element/Cyro.png')"></div>
+                            <div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
                             <div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
                                 <img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
                             </div>
                             <div class="caption">Lv.90</div>
                         </div>
                         <div class="character">
-                            <div class="element" style="background-image: url('../../img/element/Cyro.png')"></div>
+                            <div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
                             <div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
                                 <img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
                             </div>
@@ -330,7 +331,7 @@
                     <div class="battle">
                         <div class="character">
                             <div style="background-color: var(--red)">6命</div>
-                            <div class="element" style="background-image: url('../../img/element/Cyro.png')"></div>
+                            <div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
                             <div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
                                 <img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
                             </div>
@@ -338,7 +339,7 @@
                         </div>
                         <div class="character">
                             <div style="background-color: var(--red)">5命</div>
-                            <div class="element" style="background-image: url('../../img/element/Cyro.png')"></div>
+                            <div class="element" style="background-image: url('../../img/element/Cryo.png')"></div>
                             <div class="icon" style="background-image: url('../../background/rarity/half/5.png')">
                                 <img src="../../assets/avatar/10000002/icon.png" alt="神里绫华"/>
                             </div>
diff --git a/resources/genshin/abyss/floor.html b/resources/genshin/abyss/floor.html
index f78cfb9b..380a69fa 100644
--- a/resources/genshin/abyss/floor.html
+++ b/resources/genshin/abyss/floor.html
@@ -75,6 +75,7 @@
                                                 {{ constellation }} 命
                                             </div>
                                         {% endif %}
+                                        <div class="element" style="background-image: url('../../img/element/{{ character.element }}.png')"></div>
                                         <div class="icon"
                                              style="background-image: url('../../background/rarity/half/{{ character.rarity }}.png')">
                                             <img src="{{ character.icon }}" alt=""/>
diff --git a/resources/genshin/abyss/overview.html b/resources/genshin/abyss/overview.html
index bbb4ae22..be4a3306 100644
--- a/resources/genshin/abyss/overview.html
+++ b/resources/genshin/abyss/overview.html
@@ -37,6 +37,7 @@
             <div class="characters">
                 {% for avatar in data.ranks.most_played %}
                     <div class="character">
+                        <div class="element" style="background-image: url('../../img/element/{{ avatar.element }}.png')"></div>
                         <div
                                 class="icon"
                                 style="background-image: url('../../background/rarity/half/{{ avatar.rarity }}.png')"
diff --git a/resources/genshin/abyss/style.css b/resources/genshin/abyss/style.css
index 6e5fa6b5..d4ee79a8 100644
--- a/resources/genshin/abyss/style.css
+++ b/resources/genshin/abyss/style.css
@@ -121,6 +121,17 @@ body {
     position: relative;
 }
 
+.characters > .character > .element {
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: 25px;
+    height: 25px;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
 .icon {
     width: 100%;
     height: 100px;
diff --git a/resources/img/element/Cryo.png b/resources/img/element/Cryo.png
new file mode 100644
index 00000000..eed66777
Binary files /dev/null and b/resources/img/element/Cryo.png differ
diff --git a/resources/img/element/Cyro.png b/resources/img/element/Cyro.png
deleted file mode 100644
index 4f913dba..00000000
Binary files a/resources/img/element/Cyro.png and /dev/null differ