diff --git a/nonebot_plugin_tetris_stats/templates/css/data.css b/nonebot_plugin_tetris_stats/templates/css/data.css
index 068f5ef..3a60cca 100644
--- a/nonebot_plugin_tetris_stats/templates/css/data.css
+++ b/nonebot_plugin_tetris_stats/templates/css/data.css
@@ -67,7 +67,7 @@
     text-align: right;
 }
 
-#main-content {
+.main-content {
     display: flex;
     flex-direction: column;
 
@@ -77,18 +77,18 @@
     font-family: 'CabinetGrotesk-Variable';
 }
 
-#account-box {
+.account-box {
     display: flex;
     flex-direction: column;
 }
 
-#info-box {
+.info-box {
     display: flex;
     justify-content: space-between;
     margin-top: 10px;
 }
 
-#user-info-box {
+.user-info-box {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -103,14 +103,14 @@
     box-sizing: border-box;
 }
 
-#user-avatar {
+.user-avatar {
     width: 125px;
     height: 125px;
     filter: drop-shadow(0px 11px 23px rgba(0, 0, 0, 0.22));
     border-radius: 65px;
 }
 
-#user-name {
+.user-name {
     font-weight: 800;
     font-size: 25px;
     line-height: 31px;
@@ -118,7 +118,7 @@
     color: #000000;
 }
 
-#user-sign {
+.user-sign {
     width: 225px;
     height: 66px;
 
@@ -132,7 +132,7 @@
     color: #000000;
 }
 
-#game-info-box {
+.game-info-box {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -147,19 +147,19 @@
     box-sizing: border-box;
 }
 
-#game-type-box {
+.game-type-box {
     display: flex;
     flex-direction: column;
 }
 
-#game-logo {
+.game-logo {
     width: 60px;
     height: 60px;
 
     border-radius: 10px;
 }
 
-#game-name {
+.game-name {
     font-weight: 800;
     font-size: 30px;
     line-height: 37px;
@@ -167,18 +167,18 @@
     color: #000000;
 }
 
-#game-info-dividing-line {
+.game-info-dividing-line {
     width: 225px;
     border: 1px solid #bababa;
     transform: rotate(0.25deg);
 }
 
-#ranking-info-box {
+.ranking-info-box {
     display: flex;
     flex-direction: column;
 }
 
-#ranking-title {
+.ranking-title {
     font-weight: 800;
     font-size: 25px;
     line-height: 31px;
@@ -186,7 +186,7 @@
     color: #000000;
 }
 
-#ranking {
+.ranking {
     font-weight: 400;
     font-size: 50px;
     line-height: 120%;
@@ -194,7 +194,7 @@
     color: #000000;
 }
 
-#rd {
+.rd {
     margin-top: -16px;
 
     font-weight: 300;
@@ -214,7 +214,7 @@
     background: linear-gradient(222.34deg, #525252 11.97%, #1d1916 89.73%);
 }
 
-#TR-title {
+.TR-title {
     position: absolute;
     margin-left: 24px;
     margin-top: 19px;
@@ -227,7 +227,7 @@
     color: #fafafa;
 }
 
-#rank-icon {
+.rank-icon {
     position: absolute;
     margin-left: 27px;
     margin-top: 90px;
@@ -236,7 +236,7 @@
     height: 50px;
 }
 
-#TR {
+.TR {
     position: absolute;
     margin-left: 24px;
     margin-top: 143px;
@@ -248,14 +248,14 @@
     color: #fafafa;
 }
 
-#multiplayer-box {
+.multiplayer-box {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     margin-top: 14px;
 }
 
-#multiplayer-data-box {
+.multiplayer-data-box {
     display: flex;
     flex-direction: column;
 }
@@ -268,44 +268,44 @@
     margin-top: 0px;
 }
 
-#lpm-box {
+.lpm-box {
     background-image: url('../static/data/LPM.svg');
 }
 
-#lpm-value {
+.lpm-value {
     color: #4d7d0f;
 }
 
-#pps-value {
+.pps-value {
     color: #4d7d0f;
 }
 
-#apm-box {
+.apm-box {
     background-image: url('../static/data/APM.svg');
 }
 
-#apm-value {
+.apm-value {
     color: #b5530a;
 }
 
-#apl-value {
+.apl-value {
     color: #b5530a;
 }
 
-#adpm-box {
+.adpm-box {
     background-image: url('../static/data/ADPM.svg');
 }
 
-#adpm-value {
+.adpm-value {
     color: #235db4;
 }
 
-#vs-value {
+.vs-value {
     top: 62px;
     color: #4779c6;
 }
 
-#adpl-value {
+.adpl-value {
     color: #4779c6;
 }
 
@@ -316,30 +316,30 @@
         linear-gradient(222.34deg, #4f9dff 11.97%, #2563ea 89.73%);
 }
 
-#singleplayer-box {
+.singleplayer-box {
     display: flex;
     flex-direction: row;
     align-content: space-between;
     margin-top: 14px;
 }
 
-#sprint-box {
+.sprint-box {
     background-image: url('../static/data/40L.svg');
 }
 
-#blitz-box {
+.blitz-box {
     background-image: url('../static/data/Blitz.svg');
 }
 
-#sprint-value {
+.sprint-value {
     color: #b42323;
 }
 
-#blitz-value {
+.blitz-value {
     color: #8e23b4;
 }
 
-#footer {
+.footer {
     display: flex;
     justify-content: center;
     margin-top: 20px;
diff --git a/nonebot_plugin_tetris_stats/templates/data.j2.html b/nonebot_plugin_tetris_stats/templates/data.j2.html
index 603ed41..e5cde7b 100644
--- a/nonebot_plugin_tetris_stats/templates/data.j2.html
+++ b/nonebot_plugin_tetris_stats/templates/data.j2.html
@@ -8,56 +8,56 @@
     </head>
 
     <body>
-        <div id="main-content">
+        <div class="main-content">
             <span class="big-title">Account&Rankings</span>
-            <div id="account-box">
-                <div id="info-box">
+            <div class="account-box">
+                <div class="info-box">
                     <div class="flex-gap"></div>
-                    <div class="box-shadow box-rounded-corners" id="user-info-box">
-                        <img id="user-avatar" src="{{user_avatar}}" />
-                        <div id="user-name">{{user_name}}</div>
-                        <div id="user-sign">“{{user_sign}}”</div>
+                    <div class="box-shadow box-rounded-corners user-info-box">
+                        <img class="user-avatar" src="{{user_avatar}}" />
+                        <div class="user-name">{{user_name}}</div>
+                        <div class="user-sign">“{{user_sign}}”</div>
                     </div>
                     <div class="flex-gap"></div>
-                    <div class="box-shadow box-rounded-corners" id="game-info-box">
-                        <div id="game-type-box">
-                            <img id="game-logo" src="../../static/static/logo/{{game_type}}.svg" />
-                            <span id="game-name">{{game_type}}</span>
+                    <div class="box-shadow box-rounded-corners game-info-box">
+                        <div class="game-type-box">
+                            <img class="game-logo" src="../../static/static/logo/{{game_type}}.svg" />
+                            <span class="game-name">{{game_type}}</span>
                         </div>
-                        <div id="game-info-dividing-line"></div>
-                        <div id="ranking-info-box">
-                            <span id="ranking-title">Ranking</span>
-                            <span id="ranking">{{ranking}}</span>
-                            <span id="rd">±{{rd}}</span>
+                        <div class="game-info-dividing-line"></div>
+                        <div class="ranking-info-box">
+                            <span class="ranking-title">Ranking</span>
+                            <span class="ranking">{{ranking}}</span>
+                            <span class="rd">±{{rd}}</span>
                         </div>
                     </div>
                     <div class="flex-gap"></div>
                 </div>
                 <div class="chart-shadow box-rounded-corners" id="TR-curve-chart">
-                    <span id="TR-title">Tetra Rating (TR)</span>
-                    <img id="rank-icon" src="../../static/static/rank/{{rank}}.svg" />
-                    <span id="TR" style="display: flex; align-items: flex-end"
+                    <span class="TR-title">Tetra Rating (TR)</span>
+                    <img class="rank-icon" src="../../static/static/rank/{{rank}}.svg" />
+                    <span class="TR" style="display: flex; align-items: flex-end"
                         >{{TR}}&nbsp;
                         <p style="font-size: 30px; font-weight: 400; line-height: 47px">(#{{global_rank}})</p>
                     </span>
                 </div>
             </div>
             <span class="big-title">Multiplayer Stats</span>
-            <div id="multiplayer-box">
+            <div class="multiplayer-box">
                 <div class="flex-gap"></div>
-                <div id="multiplayer-data-box">
-                    <div class="multiplayer-data small-data-box box-shadow box-rounded-corners" id="lpm-box">
-                        <span class="big-data-value" id="lpm-value">{{lpm}}</span>
-                        <span class="small-data-value" id="pps-value">{{pps}} pps</span>
+                <div class="multiplayer-data-box">
+                    <div class="multiplayer-data small-data-box box-shadow box-rounded-corners lpm-box">
+                        <span class="big-data-value lpm-value">{{lpm}}</span>
+                        <span class="small-data-value pps-value">{{pps}} pps</span>
                     </div>
-                    <div class="multiplayer-data small-data-box box-shadow box-rounded-corners" id="apm-box">
-                        <span class="big-data-value" id="apm-value">{{apm}}</span>
-                        <span class="small-data-value" id="apl-value">x{{apl}}</span>
+                    <div class="multiplayer-data small-data-box box-shadow box-rounded-corners apm-box">
+                        <span class="big-data-value apm-value">{{apm}}</span>
+                        <span class="small-data-value apl-value">x{{apl}}</span>
                     </div>
-                    <div class="multiplayer-data small-data-box box-shadow box-rounded-corners" id="adpm-box">
-                        <span class="big-data-value" id="adpm-value">{{adpm}}</span>
-                        <span class="small-data-value" id="adpl-value">x{{adpl}}</span>
-                        <span class="small-data-value" id="vs-value">{{vs}} vs</span>
+                    <div class="multiplayer-data small-data-box box-shadow box-rounded-corners adpm-box">
+                        <span class="big-data-value adpm-value">{{adpm}}</span>
+                        <span class="small-data-value adpl-value">x{{adpl}}</span>
+                        <span class="small-data-value vs-value">{{vs}} vs</span>
                     </div>
                 </div>
                 <div class="flex-gap"></div>
@@ -65,18 +65,18 @@
                 <div class="flex-gap"></div>
             </div>
             <span class="big-title">Singleplayer Stats</span>
-            <div id="singleplayer-box">
+            <div class="singleplayer-box">
                 <div class="flex-gap"></div>
-                <div class="small-data-box box-shadow box-rounded-corners" id="sprint-box">
-                    <span class="big-data-value" id="sprint-value">{{sprint}}</span>
+                <div class="small-data-box box-shadow box-rounded-corners sprint-box">
+                    <span class="big-data-value sprint-value">{{sprint}}</span>
                 </div>
                 <div class="flex-gap"></div>
-                <div class="small-data-box box-shadow box-rounded-corners" id="blitz-box">
-                    <span class="big-data-value" id="blitz-value">{{blitz}}</span>
+                <div class="small-data-box box-shadow box-rounded-corners blitz-box">
+                    <span class="big-data-value blitz-value">{{blitz}}</span>
                 </div>
                 <div class="flex-gap"></div>
             </div>
-            <div id="footer">Powered by<br />Nonebot2 x nonebot-plugin-tetris-stats</div>
+            <div class="footer">Powered by<br />Nonebot2 x nonebot-plugin-tetris-stats</div>
         </div>
     </body>