diff --git a/Dockerfile b/Dockerfile
index ff07aaff..8377914e 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,7 +7,6 @@ COPY . .
 RUN npm run build
 
 # 第二阶段：运行
-# 基于 Node.js 官方镜像
 FROM node:20-alpine as production-stage
 WORKDIR /app
 COPY --from=build-stage /app/node_modules ./node_modules
diff --git a/src/App.vue b/src/App.vue
index b409fcde..4c362f6a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -111,6 +111,11 @@ export default {
         this.refreshEverything();
       }
     },
+    isInfosLoaded(newVal) {
+      if (newVal) {
+        this.$refs.navBarRef.loaded = true;
+      }
+    },
   },
   created() {
     this.hideLoading();
diff --git a/src/components/footer.vue b/src/components/footer.vue
index 6eee55e9..ae5e6228 100644
--- a/src/components/footer.vue
+++ b/src/components/footer.vue
@@ -6,7 +6,7 @@
       </p>
     </div>
 
-    <div id="about" class="text-center">
+    <div id="about" class="text-center mb-2">
       <a class="link link-underline-offset link-underline-opacity-0" :class="[isDarkMode ? 'link-info' : 'link-dark']"
         data-bs-toggle="offcanvas" href="#About" role="button" aria-controls="About">
         {{ $t('about.Title') }} <i class="bi bi-arrow-left-circle-fill"></i>
@@ -14,7 +14,7 @@
     </div>
 
 
-    <div class="offcanvas offcanvas-end mt-5" tabindex="-1" id="About" aria-labelledby="AboutLabel"
+    <div class="offcanvas offcanvas-end mt-5" :class="[isMobile ? ' w-100' :'']" tabindex="-1" id="About" aria-labelledby="AboutLabel"
       :data-bs-theme="isDarkMode ? 'dark' : 'light'">
       <div class="offcanvas-header mt-3">
         <div class="btn-group" role="group">
diff --git a/src/components/nav.vue b/src/components/nav.vue
index 62ad397c..e6589ec5 100644
--- a/src/components/nav.vue
+++ b/src/components/nav.vue
@@ -1,41 +1,60 @@
 <template>
-    <!-- Nav -->
-    <nav id="navbar-top" class="navbar navbar-expand-lg bg-body-tertiary px-3 mb-3 jn-navbar-top"
-      :class="{ 'dark-mode-nav navbar-dark bg-dark': isDarkMode }">
-      <div class="jn-logo">
-        <a class="navbar-brand" :class="{ 'text-white': isDarkMode }" href="#" @click="handleLogoClick"><i
-            class="bi bi-box-seam-fill"></i>
-          {{ $t('nav.Title') }} </a>
-        <div class="form-check form-switch">
-          <input class="form-check-input" type="checkbox" role="switch" id="darkModeSwitch" @change="toggleDarkMode"
-            :checked="isDarkMode">
-          <label class="form-check-label" for="darkModeSwitch">
-            <i v-if="isDarkMode" class="bi bi-moon-stars"></i>
-            <i v-else class="bi bi-brightness-high"></i>
-          </label>
-        </div>
+  <!-- Nav -->
+  <nav id="navbar-top" class="navbar navbar-expand-lg bg-body-tertiary px-3 mb-3 jn-navbar-top"
+    :class="{ 'dark-mode-nav navbar-dark bg-dark': isDarkMode }">
+    <div class="jn-logo">
+      <a class="navbar-brand" :class="{ 'text-white': isDarkMode }" href="#" @click="handleLogoClick"><i
+          class="bi bi-box-seam-fill"></i>
+        <span class=" fw-bold  "> IP</span>
+        <span class="fw-lighter">Check.</span>
+        <span class="fw-lighter" :class="{
+          'background-animation-dark': !loaded && isDarkMode,
+          'background-animation-light': !loaded && !isDarkMode
+        }">ing</span>
+      </a>
+      <div class="btn-group mx-1" :data-bs-theme="isDarkMode ? 'dark' : 'light'">
+        <button type="button" class="btn btn-sm dropdown-toggle jn-button" data-bs-toggle="dropdown"
+          aria-expanded="false">
+          <i class="bi bi-translate"></i>
+        </button>
+        <ul class="dropdown-menu">
+          <li><a class="dropdown-item" href="?hl=zh"><i class="fi fi-cn"></i> 中文</a></li>
+          <li><a class="dropdown-item" href="?hl=en"><i class="fi fi-us"></i> English</a></li>
+        </ul>
+      </div>
+      <div class="btn-group btn-group-sm " role="group" aria-label="Dark mode switch">
+        <button type="button" class="btn" :class="{ 'btn-outline-light': isDarkMode, 'btn-dark': !isDarkMode }"
+          @click="toggleDarkMode(false)">
+          <i class="bi bi-brightness-high"></i>
+        </button>
+        <button type="button" class="btn" :class="{ 'btn-outline-secondary': !isDarkMode, 'btn-warning': isDarkMode }"
+          @click="toggleDarkMode(true)">
+          <i class="bi bi-moon-stars"></i>
+        </button>
+      </div>
 
+
+    </div>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
+      aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon bg-transparent "></span>
+    </button>
+    <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
+      <div class="navbar-nav ">
+        <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#IPInfo"> {{ $t('nav.IPinfo') }}</a>
+        <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#Connectivity"> {{
+          $t('nav.Connectivity') }}</a>
+        <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#WebRTC"> {{ $t('nav.WebRTC') }}</a>
+        <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#DNSLeakTest"> {{
+          $t('nav.DNSLeakTest') }}</a>
+        <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#SpeedTest"> {{ $t('nav.SpeedTest')
+        }}</a>
+        <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#PingTest"> {{ $t('nav.PingTest')
+        }}</a>
+        <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#MTRTest"> {{ $t('nav.MTRTest') }}</a>
       </div>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
-        aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon bg-transparent "></span>
-      </button>
-      <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
-        <div class="navbar-nav ">
-          <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#IPInfo"> {{ $t('nav.IPinfo') }}</a>
-          <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#Connectivity"> {{
-            $t('nav.Connectivity') }}</a>
-          <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#WebRTC"> {{ $t('nav.WebRTC') }}</a>
-          <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#DNSLeakTest"> {{
-            $t('nav.DNSLeakTest') }}</a>
-          <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#SpeedTest"> {{ $t('nav.SpeedTest')
-          }}</a>
-          <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#PingTest"> {{ $t('nav.PingTest')
-          }}</a>
-          <a class="nav-link" :class="{ 'text-white jn-deactive': isDarkMode }" href="#MTRTest"> {{ $t('nav.MTRTest') }}</a>
-        </div>
-      </div>
-    </nav>
+    </div>
+  </nav>
 </template>
 
 <script>
@@ -55,6 +74,11 @@ export default {
     };
   },
 
+  data() {
+    return {
+      loaded: false,
+    }
+  },
   methods: {
 
     // 切换暗黑模式
@@ -107,4 +131,63 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.jn-button:hover {
+  border: 0;
+}
+
+.jn-button:active {
+  border: 0;
+}
+
+.jn-button:focus {
+  border: 0;
+}
+
+.jn-button {
+  border: 0;
+}
+
+.background-animation-light {
+  position: relative;
+  overflow: hidden;
+  display: inline-flex;
+}
+
+.background-animation-light::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: -100%;
+  width: 100%;
+  height: 10%;
+  background-color: rgb(0, 0, 0);
+  animation: backgroundSlide 1s linear infinite;
+}
+
+.background-animation-dark {
+  position: relative;
+  overflow: hidden;
+  display: inline-flex;
+}
+
+.background-animation-dark::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: -100%;
+  width: 100%;
+  height: 10%;
+  background-color: rgb(255, 255, 255);
+  animation: backgroundSlide 1s linear infinite;
+}
+
+@keyframes backgroundSlide {
+  from {
+    left: -100%;
+  }
+
+  to {
+    left: 100%;
+  }
+}</style>
diff --git a/src/locales/en.json b/src/locales/en.json
index 7b26ce72..81d1ce96 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,7 +1,7 @@
 {
   "nav": {
     "id": "nav",
-    "Title": "IP Toolbox",
+    "Title": "IPCheck.ing",
     "IPinfo": "IP Infos",
     "Connectivity": "Connectivity",
     "WebRTC": "WebRTC Test",
@@ -187,7 +187,7 @@
     "fix": "Fixed",
     "versions": [
       {
-        "version": "v1.0.0",
+        "version": "v1.0",
         "date": "Nov 06, 2020",
         "content": [
           {
@@ -205,7 +205,7 @@
         ]
       },
       {
-        "version": "v2.0.0",
+        "version": "v2.0",
         "date": "Nov 24, 2023",
         "content": [
           {
@@ -219,7 +219,7 @@
         ]
       },
       {
-        "version": "v2.1.0",
+        "version": "v2.1",
         "date": "Nov 25, 2023",
         "content": [
           {
@@ -233,7 +233,7 @@
         ]
       },
       {
-        "version": "v2.2.0",
+        "version": "v2.2",
         "date": "Nov 26, 2023",
         "content": [
           {
@@ -251,7 +251,7 @@
         ]
       },
       {
-        "version": "v2.3.0",
+        "version": "v2.3",
         "date": "Nov 27, 2023 ",
         "content": [
           {
@@ -269,7 +269,7 @@
         ]
       },
       {
-        "version": "v2.4.0",
+        "version": "v2.4",
         "date": "Dec 1, 2023",
         "content": [
           {
@@ -287,7 +287,7 @@
         ]
       },
       {
-        "version": "v2.5.0",
+        "version": "v2.5",
         "date": "Dec 20, 2023",
         "content": [
           {
@@ -309,50 +309,26 @@
         ]
       },
       {
-        "version": "v2.6.0",
-        "date": "Jan 25, 2024",
+        "version": "v3.0",
+        "date": "Jan 28, 2024",
         "content": [
+          {
+            "type": "add",
+            "change": "Refactored the entire project using Vite + Vue3"
+          },
           {
             "type": "add",
             "change": "Added global latency test feature"
           },
-          {
-            "type": "improve",
-            "change": "Optimized map display in dark mode"
-          },
-          {
-            "type": "fix",
-            "change": "Fixed some issues"
-          }
-        ]
-      },
-      {
-        "version": "v3.0.0",
-        "date": "Jan 28, 2024",
-        "content": [
           {
             "type": "add",
-            "change": "Refactored the entire project using Vue3"
+            "change": "Added MTR test feature"
           },
           {
             "type": "improve",
             "change": "Multiple performance and user experience optimizations"
           }
         ]
-      },
-      {
-        "version": "v3.1.0",
-        "date": "Jan 29, 2024",
-        "content": [
-          {
-            "type": "add",
-            "change": "Added MTR test feature"
-          },
-          {
-            "type": "add",
-            "change": "Added global latency test map mode"
-          }
-        ]
       }
     ]
   }
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 1b1c3997..6b8b0cad 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -1,7 +1,7 @@
 {
   "nav": {
     "id": "nav",
-    "Title": "IP 工具箱",
+    "Title": "IPCheck.ing",
     "IPinfo": "IP 信息",
     "Connectivity": "网络连通性",
     "WebRTC": "WebRTC 测试",
@@ -187,7 +187,7 @@
     "fix": "修复",
     "versions": [
       {
-        "version": "v1.0.0",
+        "version": "v1.0",
         "date": "Nov 06, 2020",
         "content": [
           {
@@ -205,7 +205,7 @@
         ]
       },
       {
-        "version": "v2.0.0",
+        "version": "v2.0",
         "date": "Nov 24, 2023",
         "content": [
           {
@@ -219,7 +219,7 @@
         ]
       },
       {
-        "version": "v2.1.0",
+        "version": "v2.1",
         "date": "Nov 25, 2023",
         "content": [
           {
@@ -233,7 +233,7 @@
         ]
       },
       {
-        "version": "v2.2.0",
+        "version": "v2.2",
         "date": "Nov 26, 2023",
         "content": [
           {
@@ -251,7 +251,7 @@
         ]
       },
       {
-        "version": "v2.3.0",
+        "version": "v2.3",
         "date": "Nov 27, 2023 ",
         "content": [
           {
@@ -269,7 +269,7 @@
         ]
       },
       {
-        "version": "v2.4.0",
+        "version": "v2.4",
         "date": "Dec 1, 2023",
         "content": [
           {
@@ -287,7 +287,7 @@
         ]
       },
       {
-        "version": "v2.5.0",
+        "version": "v2.5",
         "date": "Dec 20, 2023",
         "content": [
           {
@@ -309,50 +309,26 @@
         ]
       },
       {
-        "version": "v2.6.0",
-        "date": "Jan 25, 2024",
+        "version": "v3.0",
+        "date": "Jan 28, 2024",
         "content": [
+          {
+            "type": "add",
+            "change": "使用 Vite + Vue3 重构了整个项目"
+          },
           {
             "type": "add",
             "change": "增加全球延迟测试功能"
           },
-          {
-            "type": "improve",
-            "change": "优化黑暗模式下的地图展示"
-          },
-          {
-            "type": "fix",
-            "change": "修复一些问题"
-          }
-        ]
-      },
-      {
-        "version": "v3.0.0",
-        "date": "Jan 28, 2024",
-        "content": [
           {
             "type": "add",
-            "change": "使用 Vue3 重构了整个项目"
+            "change": "增加 MTR 测试功能"
           },
           {
             "type": "improve",
             "change": "多个性能优化和体验优化"
           }
         ]
-      },
-      {
-        "version": "v3.1.0",
-        "date": "Jan 29, 2024",
-        "content": [
-          {
-            "type": "add",
-            "change": "添加 MTR 测试功能"
-          },
-          {
-            "type": "add",
-            "change": "添加全球延迟测试地图模式"
-          }
-        ]
       }
     ]
   }