diff --git a/web/html/xui/index.html b/web/html/xui/index.html
index 8dee4bf2..fdcb4b52 100644
--- a/web/html/xui/index.html
+++ b/web/html/xui/index.html
@@ -13,6 +13,9 @@
       margin-inline: 0.3rem;
     }
   }
+  .ant-statistic-content {
+    font-size: 18px;
+  }
   .ant-col-sm-24 {
     margin-top: 10px;
   }
@@ -120,18 +123,6 @@
             </template>
             <template v-else>
               <a-row>
-                <a-col :sm="24" :lg="12">
-                  <a-card title='3X-UI' hoverable>
-                    <a rel="noopener" href="https://github.com/MHSanaei/3x-ui/releases" target="_blank"><a-tag color="green">v{{ .cur_ver }}</a-tag></a>
-                    <a rel="noopener" href="https://t.me/XrayUI" target="_blank"><a-tag color="green">@XrayUI</a-tag></a>
-                  </a-card>
-                </a-col>
-                <a-col :sm="24" :lg="12">
-                  <a-card title='{{ i18n "pages.index.operationHours" }}' hoverable>
-                    <a-tag :color="status.xray.color">Xray: [[ TimeFormatter.formatSecond(status.appStats.uptime) ]]</a-tag>
-                    <a-tag color="green">OS: [[ TimeFormatter.formatSecond(status.uptime) ]]</a-tag>
-                  </a-card>
-                </a-col>
                 <a-col :sm="24" :lg="12">
                   <a-card title='{{ i18n "pages.index.xrayStatus" }}' hoverable>
                     <template #extra>
@@ -180,6 +171,18 @@
                     </template>
                   </a-card>
                 </a-col>
+                <a-col :sm="24" :lg="12">
+                  <a-card title='3X-UI' hoverable>
+                    <a rel="noopener" href="https://github.com/MHSanaei/3x-ui/releases" target="_blank"><a-tag color="green">v{{ .cur_ver }}</a-tag></a>
+                    <a rel="noopener" href="https://t.me/XrayUI" target="_blank"><a-tag color="green">@XrayUI</a-tag></a>
+                  </a-card>
+                </a-col>
+                <a-col :sm="24" :lg="12">
+                  <a-card title='{{ i18n "pages.index.operationHours" }}' hoverable>
+                    <a-tag :color="status.xray.color">Xray: [[ TimeFormatter.formatSecond(status.appStats.uptime) ]]</a-tag>
+                    <a-tag color="green">OS: [[ TimeFormatter.formatSecond(status.uptime) ]]</a-tag>
+                  </a-card>
+                </a-col>
                 <a-col :sm="24" :lg="12">
                   <a-card title='{{ i18n "pages.index.systemLoad" }}' hoverable>
                     <a-tag color="green">
@@ -198,54 +201,6 @@
                     <a-tag color="green"> Threads: [[ status.appStats.threads ]] </a-tag>
                   </a-card>
                 </a-col>
-                <a-col :sm="24" :lg="12">
-                  <a-card title='{{ i18n "pages.index.ipAddresses" }}' hoverable>
-                    <template #extra>
-                      <a-tooltip>
-                        <template #title>
-                          {{ i18n "pages.index.toggleIpVisibility" }}
-                        </template>
-                        <a-icon :type="showIp ? 'eye' : 'eye-invisible'" :style="{ fontSize: '1rem' }" @click="showIp = !showIp"></a-icon>
-                      </a-tooltip>
-                    </template>
-                    <a-row :class="showIp ? 'ip-visible' : 'ip-hidden'">
-                      <a-col :span="12">
-                        <a-statistic title="IPv4" :value="status.publicIP.ipv4">
-                          <template #prefix>
-                            <a-icon type="global" />
-                          </template>
-                        </a-statistic>
-                      </a-col>
-                      <a-col :span="12">
-                        <a-statistic title="IPv6" :value="status.publicIP.ipv6">
-                          <template #prefix>
-                            <a-icon type="global" />
-                          </template>
-                        </a-statistic>
-                      </a-col>
-                    </a-row>
-                  </a-card>
-                </a-col>
-                <a-col :sm="24" :lg="12">
-                  <a-card title='{{ i18n "pages.index.connectionCount" }}' hoverable>
-                    <a-row>
-                      <a-col :span="12">
-                        <a-statistic title="TCP" :value="status.tcpCount">
-                          <template #prefix>
-                            <a-icon type="swap" />
-                          </template>
-                        </a-statistic>
-                      </a-col>
-                      <a-col :span="12">
-                        <a-statistic title="UDP" :value="status.udpCount">
-                          <template #prefix>
-                            <a-icon type="swap" />
-                          </template>
-                        </a-statistic>
-                      </a-col>
-                    </a-row>
-                  </a-card>
-                </a-col>
                 <a-col :sm="24" :lg="12">
                   <a-card title='{{ i18n "pages.index.overallSpeed" }}' hoverable>
                     <a-row>
@@ -292,6 +247,54 @@
                     </a-row>
                   </a-card>
                 </a-col>
+                <a-col :sm="24" :lg="12">
+                  <a-card title='{{ i18n "pages.index.ipAddresses" }}' hoverable>
+                    <template #extra>
+                      <a-tooltip>
+                        <template #title>
+                          {{ i18n "pages.index.toggleIpVisibility" }}
+                        </template>
+                        <a-icon :type="showIp ? 'eye' : 'eye-invisible'" :style="{ fontSize: '1rem' }" @click="showIp = !showIp"></a-icon>
+                      </a-tooltip>
+                    </template>
+                    <a-row :class="showIp ? 'ip-visible' : 'ip-hidden'">
+                      <a-col :xs="24" :xxl="12">
+                        <a-statistic title="IPv4" :value="status.publicIP.ipv4">
+                          <template #prefix>
+                            <a-icon type="global" />
+                          </template>
+                        </a-statistic>
+                      </a-col>
+                      <a-col :xs="24" :xxl="12">
+                        <a-statistic title="IPv6" :value="status.publicIP.ipv6">
+                          <template #prefix>
+                            <a-icon type="global" />
+                          </template>
+                        </a-statistic>
+                      </a-col>
+                    </a-row>
+                  </a-card>
+                </a-col>
+                <a-col :sm="24" :lg="12">
+                  <a-card title='{{ i18n "pages.index.connectionCount" }}' hoverable>
+                    <a-row>
+                      <a-col :span="12">
+                        <a-statistic title="TCP" :value="status.tcpCount">
+                          <template #prefix>
+                            <a-icon type="swap" />
+                          </template>
+                        </a-statistic>
+                      </a-col>
+                      <a-col :span="12">
+                        <a-statistic title="UDP" :value="status.udpCount">
+                          <template #prefix>
+                            <a-icon type="swap" />
+                          </template>
+                        </a-statistic>
+                      </a-col>
+                    </a-row>
+                  </a-card>
+                </a-col>
               </a-row>
             </template>
           </transition>
@@ -566,7 +569,7 @@
             spinning: false,
             loadingTip: '{{ i18n "loading"}}',
             showAlert: false,
-            showIp: false,
+            showIp: true,
         },
         methods: {
             loading(spinning, tip = '{{ i18n "loading"}}') {
@@ -700,4 +703,4 @@
     });
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file