diff --git a/frontend/components/IpInfos.vue b/frontend/components/IpInfos.vue
index e19f0214..91c240c7 100644
--- a/frontend/components/IpInfos.vue
+++ b/frontend/components/IpInfos.vue
@@ -7,185 +7,192 @@
     <div class="text-secondary">
       <p>{{ t('ipInfos.Notes') }}</p>
     </div>
-      <div class="row">
-        <div v-for="(card, index) in ipDataCards.slice(0, ipCardsToShow)" :key="card.id" :ref="card.id" :class="[colClass, {
+    <div class="row">
+      <div v-for="(card, index) in ipDataCards.slice(0, ipCardsToShow)" :key="card.id" :ref="card.id" :class="[colClass, {
           'jn-opacity': !card.ip || card.ip === t('ipInfos.IPv4Error') || card.ip === t('ipInfos.IPv6Error')
         }]">
-          <div class="card jn-card keyboard-shortcut-card" :class="{
+        <div class="card jn-card keyboard-shortcut-card" :class="{
             'dark-mode dark-mode-border': isDarkMode,
             'jn-ip-card1 jn-hover-card': !isMobile && ipGeoSource === 0,
             'jn-ip-card2 jn-hover-card': !isMobile && ipGeoSource !== 0,
           }">
-            <div class="card-header jn-ip-title jn-link1"
-              :class="{ 'dark-mode-title': isDarkMode, 'bg-light': !isDarkMode }" style="font-weight: bold;">
-              <span>
-                <i class="bi" :class="'bi-' + (index + 1) + '-circle-fill'"></i>&nbsp;
-                {{ t('ipInfos.Source') }}: {{ card.source }}</span>
-              <button @click="refreshCard(card,index)"
-                :class="['btn', isDarkMode ? 'btn-dark dark-mode-refresh' : 'btn-light']"
-                :aria-label="'Refresh' + card.source" v-tooltip="t('Tooltips.RefreshIPCard')">
-                <i class="bi bi-arrow-clockwise"></i></button>
-            </div>
-            <div class="p-3 placeholder-glow " :class="{
+          <div class="card-header jn-ip-title jn-link1"
+            :class="{ 'dark-mode-title': isDarkMode, 'bg-light': !isDarkMode }" style="font-weight: bold;">
+            <span>
+              <i class="bi" :class="'bi-' + (index + 1) + '-circle-fill'"></i>&nbsp;
+              {{ t('ipInfos.Source') }}: {{ card.source }}</span>
+            <button @click="refreshCard(card,index)"
+              :class="['btn', isDarkMode ? 'btn-dark dark-mode-refresh' : 'btn-light']"
+              :aria-label="'Refresh' + card.source" v-tooltip="t('Tooltips.RefreshIPCard')">
+              <i class="bi bi-arrow-clockwise"></i></button>
+          </div>
+          <div class="p-3 placeholder-glow " :class="{
               'dark-mode-title': isDarkMode,
               'jn-link2-dark': isDarkMode,
               'bg-light': !isDarkMode,
               'jn-link2': !isDarkMode
             }">
-              <span class="jn-text col-auto">
-                <i class="bi bi-pc-display-horizontal"></i>&nbsp;
-              </span>
-              <span v-if="card.ip" class="col-10" :class="{ 'jn-ip-font': (isMobile && card.ip.length > 32) }">
-                {{ card.ip }}&nbsp;
-                <i v-if="isValidIP(card.ip)"
-                  :class="copiedStatus[card.id] ? 'bi bi-clipboard-check-fill' : 'bi bi-clipboard-plus'"
-                  @click="copyToClipboard(card.ip, card.id)" role="button"
-                  v-tooltip="{ title: t('Tooltips.CopyIP'), placement: 'right' }" :aria-label="'Copy' + card.ip"></i>
-              </span>
-              <span v-else class="placeholder col-10"></span>
-            </div>
+            <span class="jn-text col-auto">
+              <i class="bi bi-pc-display-horizontal"></i>&nbsp;
+            </span>
+            <span v-if="card.ip" class="col-10" :class="{ 'jn-ip-font': (isMobile && card.ip.length > 32) }">
+              {{ card.ip }}&nbsp;
+              <i v-if="isValidIP(card.ip)"
+                :class="copiedStatus[card.id] ? 'bi bi-clipboard-check-fill' : 'bi bi-clipboard-plus'"
+                @click="copyToClipboard(card.ip, card.id)" role="button"
+                v-tooltip="{ title: t('Tooltips.CopyIP'), placement: 'right' }" :aria-label="'Copy' + card.ip"></i>
+            </span>
+            <span v-else class="placeholder col-10"></span>
+          </div>
 
 
-            <div v-if="(card.asn) || (card.ip === t('ipInfos.IPv4Error')) || (card.ip === t('ipInfos.IPv6Error')) || card.ip === '2001:4860:4860::8888'
+          <div v-if="(card.asn) || card.ip === '2001:4860:4860::8888'
             " class="card-body" :id="'IPInfo-' + (index + 1)">
-              <ul class="list-group list-group-flush" v-if="card.country_name">
-
-                <img v-if="isMapShown" :src="isDarkMode ? card.mapUrl_dark : card.mapUrl"
-                  class="card-img-top jn-map-image" alt="Map">
-
-                <li class="jn-list-group-item"
-                  :class="{ 'dark-mode': isDarkMode, 'mobile-list': isMobile && isCardsCollapsed }">
-                  <span class="jn-text col-auto">
-                    <i class="bi bi-geo-alt-fill"></i> {{ t('ipInfos.Country') }} :&nbsp;
-                  </span>
-                  <span class="col-10 ">
-                    {{ card.country_name }}
-                    <span v-if="card.country_code" :class="'jn-fl fi fi-' + card.country_code.toLowerCase()"></span>
+            <ul class="list-group list-group-flush" v-if="card.country_name">
+
+              <img v-if="isMapShown" :src="isDarkMode ? card.mapUrl_dark : card.mapUrl"
+                class="card-img-top jn-map-image" alt="Map">
+
+              <li class="jn-list-group-item"
+                :class="{ 'dark-mode': isDarkMode, 'mobile-list': isMobile && isCardsCollapsed }">
+                <span class="jn-text col-auto">
+                  <i class="bi bi-geo-alt-fill"></i> {{ t('ipInfos.Country') }} :&nbsp;
+                </span>
+                <span class="col-10 ">
+                  {{ card.country_name }}
+                  <span v-if="card.country_code" :class="'jn-fl fi fi-' + card.country_code.toLowerCase()"></span>
+                </span>
+              </li>
+
+              <li v-show="!isMobile || !isCardsCollapsed" class="jn-list-group-item"
+                :class="{ 'dark-mode': isDarkMode }">
+                <span class="jn-text col-auto">
+                  <i class="bi bi-houses"></i>
+                  {{ t('ipInfos.Region') }} :&nbsp;
+                </span>
+                <span class="col-10 ">
+                  {{ card.region }}
+                </span>
+              </li>
+
+              <li v-show="!isMobile || !isCardsCollapsed" class="jn-list-group-item"
+                :class="{ 'dark-mode': isDarkMode }">
+                <span class="jn-text col-auto">
+                  <i class="bi bi-sign-turn-right"></i>
+                  {{ t('ipInfos.City') }} :&nbsp;
+                </span>
+                <span class="col-10 ">
+                  {{ card.city }}
+                </span>
+              </li>
+
+              <li v-show="!isMobile || !isCardsCollapsed" class="jn-list-group-item"
+                :class="{ 'dark-mode': isDarkMode }">
+                <span class="jn-text col-auto">
+                  <i class="bi bi-ethernet"></i>
+                  {{ t('ipInfos.ISP') }} :&nbsp;
+                </span>
+                <span class="col-10 ">
+                  {{ card.isp }}
+                </span>
+              </li>
+
+              <li
+                v-show="(!isMobile || !isCardsCollapsed) && ipGeoSource === 0 && card.type !== t('ipInfos.proxyDetect.type.unknownType')"
+                class="jn-list-group-item" :class="{ 'dark-mode': isDarkMode }">
+                <span class="jn-text col-auto">
+                  <i class="bi bi-reception-4"></i>
+                  {{ t('ipInfos.type') }} :&nbsp;
+                </span>
+                <span class="col-10 ">
+                  {{ card.type }}
+                  <span v-if="card.proxyOperator !== 'unknown'">
+                    ( {{ card.proxyOperator }} )
                   </span>
-                </li>
-
-                <li v-show="!isMobile || !isCardsCollapsed" class="jn-list-group-item"
-                  :class="{ 'dark-mode': isDarkMode }">
-                  <span class="jn-text col-auto">
-                    <i class="bi bi-houses"></i>
-                    {{ t('ipInfos.Region') }} :&nbsp;
+                </span>
+              </li>
+
+              <li
+                v-show="(!isMobile || !isCardsCollapsed) && ipGeoSource === 0 && card.isProxy !== t('ipInfos.proxyDetect.unknownProxyType')"
+                class="jn-list-group-item" :class="{ 'dark-mode': isDarkMode }">
+                <span class="jn-text col-auto">
+                  <i class="bi bi-shield-fill-check"></i>
+                  {{ t('ipInfos.isProxy') }} :&nbsp;
+                </span>
+                <span class="col-10 ">
+                  {{ card.isProxy }}
+                  <span v-if="card.proxyProtocol !== t('ipInfos.proxyDetect.unknownProtocol')">
+                    ( {{ card.proxyProtocol }} )
                   </span>
-                  <span class="col-10 ">
-                    {{ card.region }}
-                  </span>
-                </li>
-
-                <li v-show="!isMobile || !isCardsCollapsed" class="jn-list-group-item"
-                  :class="{ 'dark-mode': isDarkMode }">
-                  <span class="jn-text col-auto">
-                    <i class="bi bi-sign-turn-right"></i>
-                    {{ t('ipInfos.City') }} :&nbsp;
-                  </span>
-                  <span class="col-10 ">
-                    {{ card.city }}
+                </span>
+              </li>
+
+              <li v-show="!isMobile || !isCardsCollapsed" class="jn-list-group-item border-0"
+                :class="{ 'dark-mode': isDarkMode }">
+                <span class="jn-text col-auto">
+                  <i class="bi bi-buildings"></i>
+                  {{ t('ipInfos.ASN') }} :&nbsp;
+                </span>
+                <span v-if="card.asnlink" class="col-9 ">
+                  {{ card.asn }} <i v-if="configs.cloudFlare" class="bi bi-info-circle"
+                    @click="getASNInfo(card.asn, index)" data-bs-toggle="collapse"
+                    :data-bs-target="'#' + 'collapseASNInfo-' + index" aria-expanded="false"
+                    :aria-controls="'collapseASNInfo-' + index" role="button"
+                    :aria-label="'Display AS Info of' + card.asn"
+                    v-tooltip="{ title: t('Tooltips.ShowASNInfo'), placement: 'right' }"></i>
+                </span>
+              </li>
+
+              <div class="collapse alert alert-light placeholder-glow lh-lg fw-bold p-0"
+                :id="'collapseASNInfo-' + index" :data-bs-theme="isDarkMode ? 'dark' : ''">
+
+                <!-- 通过将 collapse 的 padding 设置为 0，然后添加一个子 div 设置 padding 的方式，避免 Bootstrap 的 collapse 发生卡顿，很奇怪的 bug -->
+
+                <div class="p-3">
+                  <span v-if="asnInfos[card.asn]">
+                    <i class="bi bi-info-circle-fill"></i> <span class="fw-light">{{ t('ipInfos.ASNInfo.note')
+                      }}</span>
+                    <br />
+                    <template v-for="(item,key) in asnInfos[card.asn]">
+                      <span class="fw-light">
+                        {{ t(`ipInfos.ASNInfo.${key}`) }}
+                      </span>
+                      {{ item }}
+                      <br />
+                    </template>
                   </span>
-                </li>
 
-                <li v-show="!isMobile || !isCardsCollapsed" class="jn-list-group-item"
-                  :class="{ 'dark-mode': isDarkMode }">
-                  <span class="jn-text col-auto">
-                    <i class="bi bi-ethernet"></i>
-                    {{ t('ipInfos.ISP') }} :&nbsp;
-                  </span>
-                  <span class="col-10 ">
-                    {{ card.isp }}
-                  </span>
-                </li>
-
-                <li
-                  v-show="(!isMobile || !isCardsCollapsed) && ipGeoSource === 0 && card.type !== t('ipInfos.proxyDetect.type.unknownType')"
-                  class="jn-list-group-item" :class="{ 'dark-mode': isDarkMode }">
-                  <span class="jn-text col-auto">
-                    <i class="bi bi-reception-4"></i>
-                    {{ t('ipInfos.type') }} :&nbsp;
-                  </span>
-                  <span class="col-10 ">
-                    {{ card.type }}
-                    <span v-if="card.proxyOperator !== 'unknown'">
-                      ( {{ card.proxyOperator }} )
-                    </span>
-                  </span>
-                </li>
-
-                <li
-                  v-show="(!isMobile || !isCardsCollapsed) && ipGeoSource === 0 && card.isProxy !== t('ipInfos.proxyDetect.unknownProxyType')"
-                  class="jn-list-group-item" :class="{ 'dark-mode': isDarkMode }">
-                  <span class="jn-text col-auto">
-                    <i class="bi bi-shield-fill-check"></i>
-                    {{ t('ipInfos.isProxy') }} :&nbsp;
-                  </span>
-                  <span class="col-10 ">
-                    {{ card.isProxy }}
-                    <span v-if="card.proxyProtocol !== t('ipInfos.proxyDetect.unknownProtocol')">
-                      ( {{ card.proxyProtocol }} )
+                  <span v-else>
+                    <span v-for="(colSize, index) in placeholderSizes" :key="index"
+                      :class="{ 'dark-mode': isDarkMode }">
+                      <span :class="`placeholder col-${colSize}`"></span>
                     </span>
                   </span>
-                </li>
-
-                <li v-show="!isMobile || !isCardsCollapsed" class="jn-list-group-item border-0"
-                  :class="{ 'dark-mode': isDarkMode }">
-                  <span class="jn-text col-auto">
-                    <i class="bi bi-buildings"></i>
-                    {{ t('ipInfos.ASN') }} :&nbsp;
-                  </span>
-                  <span v-if="card.asnlink" class="col-9 ">
-                    {{ card.asn }} <i v-if="configs.cloudFlare" class="bi bi-info-circle"
-                      @click="getASNInfo(card.asn, index)" data-bs-toggle="collapse"
-                      :data-bs-target="'#' + 'collapseASNInfo-' + index" aria-expanded="false"
-                      :aria-controls="'collapseASNInfo-' + index" role="button"
-                      :aria-label="'Display AS Info of' + card.asn"
-                      v-tooltip="{ title: t('Tooltips.ShowASNInfo'), placement: 'right' }"></i>
-                  </span>
-                </li>
-
-                <div class="collapse alert alert-light placeholder-glow lh-lg fw-bold p-0"
-                  :id="'collapseASNInfo-' + index" :data-bs-theme="isDarkMode ? 'dark' : ''">
-
-                  <!-- 通过将 collapse 的 padding 设置为 0，然后添加一个子 div 设置 padding 的方式，避免 Bootstrap 的 collapse 发生卡顿，很奇怪的 bug -->
-
-                  <div class="p-3">
-                    <span v-if="asnInfos[card.asn]">
-                      <i class="bi bi-info-circle-fill"></i> <span class="fw-light">{{ t('ipInfos.ASNInfo.note')
-                        }}</span>
-                      <br />
-                      <template v-for="(item,key) in asnInfos[card.asn]">
-                        <span class="fw-light">
-                          {{ t(`ipInfos.ASNInfo.${key}`) }}
-                        </span>
-                        {{ item }}
-                        <br />
-                      </template>
-                    </span>
-
-                    <span v-else>
-                      <span v-for="(colSize, index) in placeholderSizes" :key="index"
-                        :class="{ 'dark-mode': isDarkMode }">
-                        <span :class="`placeholder col-${colSize}`"></span>
-                      </span>
-                    </span>
-                  </div>
                 </div>
-              </ul>
-            </div>
+              </div>
+            </ul>
+          </div>
 
-            <div v-else class="card-body">
-              <ul class="list-group list-group-flush placeholder-glow">
-                <li v-for="(colSize, index) in placeholderSizes" :key="index" class="list-group-item jn-list-group-item"
-                  :class="{ 'dark-mode': isDarkMode }">
-                  <span :class="`placeholder col-${colSize}`"></span>
-                </li>
-              </ul>
+          <div v-else-if="(card.ip === t('ipInfos.IPv4Error')) || (card.ip === t('ipInfos.IPv6Error'))"
+            class="card-body  jn-ip-error">
+            <div>
+              <IPErrorIcon />
             </div>
+          </div>
 
+          <div v-else class="card-body">
+            <ul class="list-group list-group-flush placeholder-glow">
+              <li v-for="(colSize, index) in placeholderSizes" :key="index" class="list-group-item jn-list-group-item"
+                :class="{ 'dark-mode': isDarkMode }">
+                <span :class="`placeholder col-${colSize}`"></span>
+              </li>
+            </ul>
           </div>
+
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 
@@ -201,6 +208,9 @@ import { getIPFromIPIP, getIPFromCloudflare_V4, getIPFromCloudflare_V6, getIPFro
 
 const { t } = useI18n();
 
+// 导入 IP 错误图标
+import IPErrorIcon from './svgicons/IPError.vue';
+
 // Store
 const store = useMainStore();
 const isDarkMode = computed(() => store.isDarkMode);
@@ -470,7 +480,7 @@ const refreshCard = (card, index) => {
       break;
     case 3:
       fetchIP(3, getIPFromIPChecking64);
-      break;      
+      break;
     case 4:
       fetchIP(4, getIPFromIPChecking4);
       break;
@@ -577,6 +587,13 @@ defineExpose({
   z-index: 1;
 }
 
+.jn-ip-error {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  flex-direction: column;
+}
+
 .dropdown-item.disabled,
 .dropdown-item:disabled {
   text-decoration: line-through;
diff --git a/frontend/components/Nav.vue b/frontend/components/Nav.vue
index e18663be..ef6fb869 100644
--- a/frontend/components/Nav.vue
+++ b/frontend/components/Nav.vue
@@ -7,13 +7,7 @@
 
         <a class="navbar-brand d-flex align-items-center align-content-center" :class="{ 'text-white': isDarkMode }"
           href="#" @click="handleLogoClick">
-          <svg :style="{ fill: isDarkMode ? '#fff' : '#212529' }" class="me-1" width="23" height="23"
-            xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"
-            image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 511 512.35">
-            <path
-              d="M162.62,21.9026663 C157.13,27.3326663 151.99,33.9226663 147.2,41.6126663 C129.83,69.4326663 116.87,111.602666 107.28,164.772666 C50.98,175.412666 16.22,198.912666 17.38,222.912666 C18.42,244.652666 45.84,261.322666 87.05,272.832666 C84.34,281.212666 84.98,282.652666 88.65,292.962666 C57.87,305.942666 25.71,345.362666 0,379.892666 L100.03,447.502666 L64.71,512.352666 L449.12,512.352666 L411.86,447.502666 L511,378.632666 C481.92,337.782666 446.81,303.072666 424.88,293.652666 C429.51,281.632666 430.32,279.532666 426.44,272.862666 C467.65,261.142666 494.67,244.022666 494.61,221.392666 C494.55,196.712666 459.11,173.012666 406.3,164.772666 C393.66,111.272666 381.08,69.1526663 365.07,41.5026663 C362.16,36.4826663 359.14,31.9326663 355.98,27.8826663 C308.32,-33.2373337 291.62,25.1926663 257.84,25.1226663 C218.67,25.0426663 213.69,-28.5673337 162.62,21.9026663 Z M223.27,419.802666 C223.27,416.232666 226.17,413.332666 229.74,413.332666 L240.26,413.332666 C241.64,413.332666 242.92,413.772666 243.96,414.502666 C247.73,416.602666 251.42,417.832666 254.97,417.922666 C256.256726,417.95538 257.551379,417.837477 258.853959,417.554552 C261.134997,417.059103 263.440344,416.057596 265.77,414.472666 C266.837339,413.754341 268.093464,413.368108 269.38,413.362666 L282.16,413.332666 C285.73,413.332666 288.62,416.232666 288.62,419.802666 C288.62,423.372666 285.73,426.272666 282.16,426.272666 L271.21,426.272666 C265.75,429.542666 260.23,430.942666 254.67,430.802666 C249.23,430.662666 243.89,429.032666 238.66,426.272666 L229.74,426.272666 C226.17,426.272666 223.27,423.372666 223.27,419.802666 Z M160.62,279.492666 C221.05,301.232666 281.49,300.872666 341.92,281.322666 C283.47,286.072666 219.13,284.942666 160.62,279.492666 Z M267.04,306.612666 L244.93,306.612666 C210.81,384.892666 122.79,350.782666 142.77,277.672666 C135.46,276.872666 128.26,275.992666 121.21,275.052666 L120.89,276.932666 L120.3,280.492666 L116.82,301.362666 C86.43,294.642666 103.46,373.132666 131.08,366.232666 C135.3,378.412666 136.442197,389.44711 142.34,398.422666 C171.368144,442.599077 205.648487,494.791988 256.040415,494.791988 C306.432342,494.791988 341.594767,438.778379 368.99,398.422666 C375.513955,388.812277 376.14,383.142666 380.53,369.392666 C405.97,373.452666 426.88,296.082666 395.87,301.762666 L392.68,280.712666 L392.13,277.062666 L391.9,275.522666 C384.43,276.682666 376.78,277.722666 368.99,278.632666 C389.88,349.262666 300.46,385.132666 267.04,306.612666 Z M284.280512,176.166601 L284.280512,67.1666006 C366.547618,67.1666006 361.40053,176.166601 284.280512,176.166601 Z M170.780508,409.666601 C182.571845,404.08157 211.029823,401.289054 256.154442,401.289054 C301.27906,401.289054 329.487749,404.08157 340.780508,409.666601 C340.780508,398.413948 339.802073,389.918194 323.84137,384.371704 C288.837937,372.207694 222.824258,373.335802 189.15409,384.371704 C170.816498,390.382125 170.780508,397.067154 170.780508,409.666601 Z M206.779566,446.766602 C218.286957,452.470688 235.027101,455.322731 257,455.322731 C278.972899,455.322731 295.566401,452.470688 306.780508,446.766602 C306.780508,458.019255 306.204953,466.515009 296.816215,472.061498 C286.632212,478.077798 271.985838,480.842479 257.386147,480.76502 C242.467564,480.685868 227.597726,477.639061 217.587657,472.061498 C206.800736,466.051077 206.779566,459.366048 206.779566,446.766602 Z M256.254843,67.1117579 L229.254843,87.6169826 C229.254843,124.271828 229.254843,160.370447 229.254843,204.775426 L256.254843,208.111758 C256.254843,143.245746 256.254843,107.726499 256.254843,67.1117579 Z M207.254843,67.1117579 L180.254843,87.6169826 C180.254843,124.271828 180.254843,160.370447 180.254843,204.775426 L207.254843,208.111758 C207.254843,143.245746 207.254843,107.726499 207.254843,67.1117579 Z"
-              id="Logo"></path>
-          </svg>
+          <brandIcon />
           <span class=" fw-bold  "> IP</span>
           <span class="fw-lighter">Check.</span>
           <span class="fw-lighter" :class="{
@@ -85,6 +79,9 @@ import { Offcanvas } from 'bootstrap';
 
 const { t } = useI18n();
 
+// 导入 Logo 图标
+import brandIcon from './svgicons/Brand.vue';
+
 const store = useMainStore();
 const isDarkMode = computed(() => store.isDarkMode);
 const isMobile = computed(() => store.isMobile);
diff --git a/frontend/components/svgicons/Brand.vue b/frontend/components/svgicons/Brand.vue
new file mode 100644
index 00000000..7c85f2c9
--- /dev/null
+++ b/frontend/components/svgicons/Brand.vue
@@ -0,0 +1,17 @@
+<template>
+    <svg :style="{ fill: isDarkMode ? '#fff' : '#212529' }" class="me-1" width="23" height="23"
+        xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"
+        image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 511 512.35">
+        <path
+            d="M162.62,21.9026663 C157.13,27.3326663 151.99,33.9226663 147.2,41.6126663 C129.83,69.4326663 116.87,111.602666 107.28,164.772666 C50.98,175.412666 16.22,198.912666 17.38,222.912666 C18.42,244.652666 45.84,261.322666 87.05,272.832666 C84.34,281.212666 84.98,282.652666 88.65,292.962666 C57.87,305.942666 25.71,345.362666 0,379.892666 L100.03,447.502666 L64.71,512.352666 L449.12,512.352666 L411.86,447.502666 L511,378.632666 C481.92,337.782666 446.81,303.072666 424.88,293.652666 C429.51,281.632666 430.32,279.532666 426.44,272.862666 C467.65,261.142666 494.67,244.022666 494.61,221.392666 C494.55,196.712666 459.11,173.012666 406.3,164.772666 C393.66,111.272666 381.08,69.1526663 365.07,41.5026663 C362.16,36.4826663 359.14,31.9326663 355.98,27.8826663 C308.32,-33.2373337 291.62,25.1926663 257.84,25.1226663 C218.67,25.0426663 213.69,-28.5673337 162.62,21.9026663 Z M223.27,419.802666 C223.27,416.232666 226.17,413.332666 229.74,413.332666 L240.26,413.332666 C241.64,413.332666 242.92,413.772666 243.96,414.502666 C247.73,416.602666 251.42,417.832666 254.97,417.922666 C256.256726,417.95538 257.551379,417.837477 258.853959,417.554552 C261.134997,417.059103 263.440344,416.057596 265.77,414.472666 C266.837339,413.754341 268.093464,413.368108 269.38,413.362666 L282.16,413.332666 C285.73,413.332666 288.62,416.232666 288.62,419.802666 C288.62,423.372666 285.73,426.272666 282.16,426.272666 L271.21,426.272666 C265.75,429.542666 260.23,430.942666 254.67,430.802666 C249.23,430.662666 243.89,429.032666 238.66,426.272666 L229.74,426.272666 C226.17,426.272666 223.27,423.372666 223.27,419.802666 Z M160.62,279.492666 C221.05,301.232666 281.49,300.872666 341.92,281.322666 C283.47,286.072666 219.13,284.942666 160.62,279.492666 Z M267.04,306.612666 L244.93,306.612666 C210.81,384.892666 122.79,350.782666 142.77,277.672666 C135.46,276.872666 128.26,275.992666 121.21,275.052666 L120.89,276.932666 L120.3,280.492666 L116.82,301.362666 C86.43,294.642666 103.46,373.132666 131.08,366.232666 C135.3,378.412666 136.442197,389.44711 142.34,398.422666 C171.368144,442.599077 205.648487,494.791988 256.040415,494.791988 C306.432342,494.791988 341.594767,438.778379 368.99,398.422666 C375.513955,388.812277 376.14,383.142666 380.53,369.392666 C405.97,373.452666 426.88,296.082666 395.87,301.762666 L392.68,280.712666 L392.13,277.062666 L391.9,275.522666 C384.43,276.682666 376.78,277.722666 368.99,278.632666 C389.88,349.262666 300.46,385.132666 267.04,306.612666 Z M284.280512,176.166601 L284.280512,67.1666006 C366.547618,67.1666006 361.40053,176.166601 284.280512,176.166601 Z M170.780508,409.666601 C182.571845,404.08157 211.029823,401.289054 256.154442,401.289054 C301.27906,401.289054 329.487749,404.08157 340.780508,409.666601 C340.780508,398.413948 339.802073,389.918194 323.84137,384.371704 C288.837937,372.207694 222.824258,373.335802 189.15409,384.371704 C170.816498,390.382125 170.780508,397.067154 170.780508,409.666601 Z M206.779566,446.766602 C218.286957,452.470688 235.027101,455.322731 257,455.322731 C278.972899,455.322731 295.566401,452.470688 306.780508,446.766602 C306.780508,458.019255 306.204953,466.515009 296.816215,472.061498 C286.632212,478.077798 271.985838,480.842479 257.386147,480.76502 C242.467564,480.685868 227.597726,477.639061 217.587657,472.061498 C206.800736,466.051077 206.779566,459.366048 206.779566,446.766602 Z M256.254843,67.1117579 L229.254843,87.6169826 C229.254843,124.271828 229.254843,160.370447 229.254843,204.775426 L256.254843,208.111758 C256.254843,143.245746 256.254843,107.726499 256.254843,67.1117579 Z M207.254843,67.1117579 L180.254843,87.6169826 C180.254843,124.271828 180.254843,160.370447 180.254843,204.775426 L207.254843,208.111758 C207.254843,143.245746 207.254843,107.726499 207.254843,67.1117579 Z"
+            id="Logo"></path>
+    </svg>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useMainStore } from '@/store';
+
+const store = useMainStore();
+const isDarkMode = computed(() => store.isDarkMode);
+</script>
\ No newline at end of file
diff --git a/frontend/components/svgicons/IPError.vue b/frontend/components/svgicons/IPError.vue
new file mode 100644
index 00000000..1847ca0d
--- /dev/null
+++ b/frontend/components/svgicons/IPError.vue
@@ -0,0 +1,17 @@
+<template>
+    <svg :style="{ fill: isDarkMode ? '#000' : '#212529', width: isMobile ? '100' : '150', height: isMobile ? '100' : '150' }"
+        viewBox="0 0 653 594" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M257.84,107.122666 C291.62,107.192666 308.32,48.7626663 355.98,109.882666 C359.14,113.932666 362.16,118.482666 365.07,123.502666 C381.08,151.152666 393.66,193.272666 406.3,246.772666 C459.11,255.012666 494.55,278.712666 494.61,303.392666 C494.67,326.022666 467.65,343.142666 426.44,354.862666 C430.32,361.532666 429.51,363.632666 424.88,375.652666 C446.81,385.072666 481.92,419.782666 511,460.632666 L411.86,529.502666 L449.12,594.352666 L64.71,594.352666 L100.03,529.502666 L0,461.892666 C25.71,427.362666 57.87,387.942666 88.65,374.962666 C84.98,364.652666 84.34,363.212666 87.05,354.832666 C45.84,343.322666 18.42,326.652666 17.38,304.912666 C16.22,280.912666 50.98,257.412666 107.28,246.772666 C116.87,193.602666 129.83,151.432666 147.2,123.612666 C151.99,115.922666 157.13,109.332666 162.62,103.902666 C213.69,53.4326663 218.67,107.042666 257.84,107.122666 Z M121.21,357.052666 L120.89,358.932666 L120.3,362.492666 L116.82,383.362666 C86.43,376.642666 103.46,455.132666 131.08,448.232666 C135.3,460.412666 136.442197,471.44711 142.34,480.422666 C171.368144,524.599077 205.648487,576.791988 256.040415,576.791988 C306.432342,576.791988 341.594767,520.778379 368.99,480.422666 C375.513955,470.812277 376.14,465.142666 380.53,451.392666 C405.97,455.452666 426.88,378.082666 395.87,383.762666 L392.68,362.712666 L392.13,359.062666 L391.9,357.522666 C384.43,358.682666 128.26,357.992666 121.21,357.052666 Z M306.780508,528.766602 C306.780508,540.019255 306.204953,548.515009 296.816215,554.061498 C286.632212,560.077798 271.985838,562.842479 257.386147,562.76502 C242.467564,562.685868 227.597726,559.639061 217.587657,554.061498 C207.043139,548.186143 206.785954,541.666158 206.77972,529.607102 L206.779566,528.766602 C218.286957,534.470688 235.027101,537.322731 257,537.322731 C278.972899,537.322731 295.566401,534.470688 306.780508,528.766602 Z M240.26,495.332666 C241.64,495.332666 242.92,495.772666 243.96,496.502666 C247.73,498.602666 251.42,499.832666 254.97,499.922666 C256.256726,499.95538 257.551379,499.837477 258.853959,499.554552 C261.134997,499.059103 263.440344,498.057596 265.77,496.472666 C266.837339,495.754341 268.093464,495.368108 269.38,495.362666 L282.16,495.332666 C285.73,495.332666 288.62,498.232666 288.62,501.802666 C288.62,505.372666 285.73,508.272666 282.16,508.272666 L271.21,508.272666 C265.75,511.542666 260.23,512.942666 254.67,512.802666 C249.23,512.662666 243.89,511.032666 238.66,508.272666 L229.74,508.272666 C226.17,508.272666 223.27,505.372666 223.27,501.802666 C223.27,498.232666 226.17,495.332666 229.74,495.332666 L240.26,495.332666 Z M189.15409,466.371704 C222.824258,455.335802 288.837937,454.207694 323.84137,466.371704 C339.802073,471.918194 340.780508,480.413948 340.780508,491.666601 C329.487749,486.08157 301.27906,483.289054 256.154442,483.289054 L254.805703,483.289892 C210.46233,483.345184 182.453932,486.13742 170.780508,491.666601 L170.780697,490.917689 C170.789268,478.800023 171.183249,472.261917 189.15409,466.371704 Z M355,365 C356.656854,365 358,366.343146 358,368 L358,431 C358,432.656854 356.656854,434 355,434 L350,434 C348.343146,434 347,432.656854 347,431 L347,368 C347,366.343146 348.343146,365 350,365 L355,365 Z M385,365 C386.656854,365 388,366.343146 388,368 L388,416 C388,417.656854 386.656854,419 385,419 L380,419 C378.343146,419 377,417.656854 377,416 L377,368 C377,366.343146 378.343146,365 380,365 L385,365 Z M370,365 C371.656854,365 373,366.343146 373,368 L373,407 C373,408.656854 371.656854,410 370,410 L365,410 C363.343146,410 362,408.656854 362,407 L362,368 C362,366.343146 363.343146,365 365,365 L370,365 Z M190,376 C196.627417,376 202,381.372583 202,388 C202,394.627417 196.627417,400 190,400 C183.372583,400 178,394.627417 178,388 C178,381.372583 183.372583,376 190,376 Z M321,376 C327.627417,376 333,381.372583 333,388 C333,394.627417 327.627417,400 321,400 C314.372583,400 309,394.627417 309,388 C309,381.372583 314.372583,376 321,376 Z M256.254843,149.111758 L229.254843,169.616983 L229.254843,286.775426 L256.254843,290.111758 L256.254843,149.111758 Z M207.254843,149.111758 L180.254843,169.616983 L180.254843,286.775426 L207.254843,290.111758 L207.254843,149.111758 Z M284.280512,149.166601 L284.280512,258.166601 C361.40053,258.166601 366.547618,149.166601 284.280512,149.166601 Z M535.5,0 C600.393458,0 653,52.6065419 653,117.5 C653,182.393458 600.393458,235 535.5,235 C470.606542,235 418,182.393458 418,117.5 C418,52.6065419 470.606542,0 535.5,0 Z M535.5,14.6875 C478.718224,14.6875 432.6875,60.7182242 432.6875,117.5 C432.6875,174.281776 478.718224,220.3125 535.5,220.3125 C592.281776,220.3125 638.3125,174.281776 638.3125,117.5 C638.3125,60.7182242 592.281776,14.6875 535.5,14.6875 Z M543.25,146.493317 C548.045717,149.126505 551,153.992837 551,159.259213 C551,167.400325 544.060414,174 535.5,174 C526.939586,174 520,167.400325 520,159.259213 C520,153.992837 522.954283,149.126505 527.75,146.493317 C532.545717,143.860129 538.454283,143.860129 543.25,146.493317 Z M542.904212,58.028153 C547.453229,60.732357 549.982135,65.6671396 549.419,70.740787 L543.994,122.436727 C543.616106,126.647053 539.912274,129.881609 535.469,129.881609 C531.025726,129.881609 527.321894,126.647053 526.944,122.436727 L521.519,70.740787 C520.955865,65.6671396 523.484771,60.732357 528.033788,58.028153 C532.582804,55.323949 538.355196,55.323949 542.904212,58.028153 Z">
+        </path>
+    </svg>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useMainStore } from '@/store';
+
+const store = useMainStore();
+const isDarkMode = computed(() => store.isDarkMode);
+const isMobile = computed(() => store.isMobile);
+</script>
\ No newline at end of file
diff --git a/frontend/style/style.css b/frontend/style/style.css
index aadc0acb..817c5b8c 100644
--- a/frontend/style/style.css
+++ b/frontend/style/style.css
@@ -228,10 +228,6 @@ footer {
   display: none !important;
 }
 
-.jn-loading {
-  margin-top: 50vh;
-}
-
 .jn-dark-mode-help-border {
   border-color: #a8a8a863 !important;
 }
diff --git a/index.html b/index.html
index f2aecae2..70e0bdc5 100644
--- a/index.html
+++ b/index.html
@@ -24,6 +24,7 @@
       border-radius: 50%;
       border-left-color: transparent;
       animation: spin 1s linear infinite;
+      margin-top: 10px;
     }
 
     .jn-loading {
@@ -57,11 +58,20 @@
 
 <body>
   <div id="jn-loading" class="jn-loading">
-    <div class="jn-spinner "></div>
+    <div>
+      <svg class="me-1" width="100" height="100"
+      xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"
+      image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 511 512.35">
+      <path
+          d="M162.62,21.9026663 C157.13,27.3326663 151.99,33.9226663 147.2,41.6126663 C129.83,69.4326663 116.87,111.602666 107.28,164.772666 C50.98,175.412666 16.22,198.912666 17.38,222.912666 C18.42,244.652666 45.84,261.322666 87.05,272.832666 C84.34,281.212666 84.98,282.652666 88.65,292.962666 C57.87,305.942666 25.71,345.362666 0,379.892666 L100.03,447.502666 L64.71,512.352666 L449.12,512.352666 L411.86,447.502666 L511,378.632666 C481.92,337.782666 446.81,303.072666 424.88,293.652666 C429.51,281.632666 430.32,279.532666 426.44,272.862666 C467.65,261.142666 494.67,244.022666 494.61,221.392666 C494.55,196.712666 459.11,173.012666 406.3,164.772666 C393.66,111.272666 381.08,69.1526663 365.07,41.5026663 C362.16,36.4826663 359.14,31.9326663 355.98,27.8826663 C308.32,-33.2373337 291.62,25.1926663 257.84,25.1226663 C218.67,25.0426663 213.69,-28.5673337 162.62,21.9026663 Z M223.27,419.802666 C223.27,416.232666 226.17,413.332666 229.74,413.332666 L240.26,413.332666 C241.64,413.332666 242.92,413.772666 243.96,414.502666 C247.73,416.602666 251.42,417.832666 254.97,417.922666 C256.256726,417.95538 257.551379,417.837477 258.853959,417.554552 C261.134997,417.059103 263.440344,416.057596 265.77,414.472666 C266.837339,413.754341 268.093464,413.368108 269.38,413.362666 L282.16,413.332666 C285.73,413.332666 288.62,416.232666 288.62,419.802666 C288.62,423.372666 285.73,426.272666 282.16,426.272666 L271.21,426.272666 C265.75,429.542666 260.23,430.942666 254.67,430.802666 C249.23,430.662666 243.89,429.032666 238.66,426.272666 L229.74,426.272666 C226.17,426.272666 223.27,423.372666 223.27,419.802666 Z M160.62,279.492666 C221.05,301.232666 281.49,300.872666 341.92,281.322666 C283.47,286.072666 219.13,284.942666 160.62,279.492666 Z M267.04,306.612666 L244.93,306.612666 C210.81,384.892666 122.79,350.782666 142.77,277.672666 C135.46,276.872666 128.26,275.992666 121.21,275.052666 L120.89,276.932666 L120.3,280.492666 L116.82,301.362666 C86.43,294.642666 103.46,373.132666 131.08,366.232666 C135.3,378.412666 136.442197,389.44711 142.34,398.422666 C171.368144,442.599077 205.648487,494.791988 256.040415,494.791988 C306.432342,494.791988 341.594767,438.778379 368.99,398.422666 C375.513955,388.812277 376.14,383.142666 380.53,369.392666 C405.97,373.452666 426.88,296.082666 395.87,301.762666 L392.68,280.712666 L392.13,277.062666 L391.9,275.522666 C384.43,276.682666 376.78,277.722666 368.99,278.632666 C389.88,349.262666 300.46,385.132666 267.04,306.612666 Z M284.280512,176.166601 L284.280512,67.1666006 C366.547618,67.1666006 361.40053,176.166601 284.280512,176.166601 Z M170.780508,409.666601 C182.571845,404.08157 211.029823,401.289054 256.154442,401.289054 C301.27906,401.289054 329.487749,404.08157 340.780508,409.666601 C340.780508,398.413948 339.802073,389.918194 323.84137,384.371704 C288.837937,372.207694 222.824258,373.335802 189.15409,384.371704 C170.816498,390.382125 170.780508,397.067154 170.780508,409.666601 Z M206.779566,446.766602 C218.286957,452.470688 235.027101,455.322731 257,455.322731 C278.972899,455.322731 295.566401,452.470688 306.780508,446.766602 C306.780508,458.019255 306.204953,466.515009 296.816215,472.061498 C286.632212,478.077798 271.985838,480.842479 257.386147,480.76502 C242.467564,480.685868 227.597726,477.639061 217.587657,472.061498 C206.800736,466.051077 206.779566,459.366048 206.779566,446.766602 Z M256.254843,67.1117579 L229.254843,87.6169826 C229.254843,124.271828 229.254843,160.370447 229.254843,204.775426 L256.254843,208.111758 C256.254843,143.245746 256.254843,107.726499 256.254843,67.1117579 Z M207.254843,67.1117579 L180.254843,87.6169826 C180.254843,124.271828 180.254843,160.370447 180.254843,204.775426 L207.254843,208.111758 C207.254843,143.245746 207.254843,107.726499 207.254843,67.1117579 Z"
+          id="Logo" fill="#212529"></path>
+  </svg>
+    </div>
     <div class="jn-spinner-text">
-      <p>首次加载的时间可能会较长，请等待...</p>
       <p>It may take a while for the first time, please wait...</p>
+      <p>首次加载的时间可能会较长，请等待...</p>
     </div>
+    <div class="jn-spinner "></div>
   </div>
   <div id="app"></div>
   <script type="module" src="/frontend/main.js"></script>