diff --git a/src/App.vue b/src/App.vue
index 34b844af..ebcc6ffa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -367,7 +367,7 @@ export default {
           type: "regex",
           action: (num) => {
             const card = this.$refs.IPCheckRef.ipDataCards[num - 1];
-            this.scrollToElement("IPInfo-" + num, 120);
+            this.scrollToElement("IPInfo-" + num, 180);
             this.$refs.IPCheckRef.refreshCard(card);
             this.$trackEvent('ShortCut', 'ShortCut', 'IPCheck');
           },
diff --git a/src/components/help.vue b/src/components/help.vue
index 9ec33e27..280dbe47 100644
--- a/src/components/help.vue
+++ b/src/components/help.vue
@@ -1,7 +1,7 @@
 <template>
     <!-- Help Modal -->
     <div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModal" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
             <div class="modal-content" :class="{ 'dark-mode dark-mode-border': isDarkMode }">
                 <div class="modal-header" :class="{ 'dark-mode-border': isDarkMode }">
                     <h5 class="modal-title" id="helpModalTitle">{{ $t('helpModal.Title') }}</h5>
@@ -13,15 +13,33 @@
                     <p class="jn-help-note "><i class="bi bi-hand-thumbs-up-fill"></i>
                         {{ $t('shortcutKeys.HelpNote') }}
                     </p>
-                    <div v-for="(key, index) in keyMap" :key="key.keys" class="row p-2 jn-shortcut-row"
-                        :class="[isDarkMode ? 'border-dark-subtle jn-dark-mode-help-border' : 'border-light-subtle', index === keyMap.length - 1 ? 'jn-border-bottom-none' : '']">
-                        <div class="col">
-                            <kbd :class="{ 'text-bg-light': isDarkMode }">
-                                {{ key.keys.replace(/[\[\]\\\(\)]/g, '') }}
-                            </kbd>
+                    <div class="row flex-nowrap text-nowrap">
+                        <!-- 左边的列 -->
+                        <div class="col text-nowrap">
+                            <div v-for="(key, index) in splitKeyMap.left" :key="`left-${key.keys}`" class="row p-2"
+                                :class="[isDarkMode ? 'border-dark-subtle jn-dark-mode-help-border' : 'border-light-subtle']">
+                                <div class="col-auto">
+                                    <kbd :class="{ 'text-bg-light': isDarkMode }">
+                                        {{ key.keys.replace(/[\[\]\\\(\)]/g, '') }}
+                                    </kbd>
+                                </div>
+                                <div class="col-8">{{ key.description }}</div>
+                            </div>
+                        </div>
+                        <!-- 右边的列 -->
+                        <div class="col text-nowrap">
+                            <div v-for="(key, index) in splitKeyMap.right" :key="`right-${key.keys}`" class="row p-2"
+                                :class="[isDarkMode ? 'border-dark-subtle jn-dark-mode-help-border' : 'border-light-subtle']">
+                                <div class="col-auto">
+                                    <kbd :class="{ 'text-bg-light': isDarkMode }">
+                                        {{ key.keys.replace(/[\[\]\\\(\)]/g, '') }}
+                                    </kbd>
+                                </div>
+                                <div class="col-8">{{ key.description }}</div>
+                            </div>
                         </div>
-                        <div class="col-8">{{ key.description }}</div>
                     </div>
+
                 </div>
             </div>
         </div>
@@ -56,7 +74,17 @@ export default {
 
     methods: {
 
-    }
+    },
+    computed: {
+        // 拆分 keyMap 为两个数组
+        splitKeyMap() {
+            const half = Math.ceil(this.keyMap.length / 2);
+            return {
+                left: this.keyMap.slice(0, half),
+                right: this.keyMap.slice(half),
+            };
+        }
+    },
 }
 </script>
 
diff --git a/src/components/ipcheck.vue b/src/components/ipcheck.vue
index ea4bfa04..dd478b7c 100644
--- a/src/components/ipcheck.vue
+++ b/src/components/ipcheck.vue
@@ -38,7 +38,8 @@
               <hr class="dropdown-divider">
             </li>
             <li v-for="source in sources" :key="source.id">
-              <span class="dropdown-item jn-select" :class="{ active: ipGeoSource === source.id, disabled: !source.enabled }"
+              <span class="dropdown-item jn-select"
+                :class="{ active: ipGeoSource === source.id, disabled: !source.enabled }"
                 @click="source.enabled ? selectIPGeoSource(source.id) : null" :disabled="!source.enabled"
                 :aria-disabled="!source.enabled" :aria-label="source.text">
                 {{ source.text }}
@@ -57,38 +58,46 @@
     </div>
     <div class="jn-card-deck">
       <div class="row">
-        <div v-for="(card,index) in ipDataCards" :key="card.id" :ref="card.id"
+        <div v-for="(card, index) in ipDataCards" :key="card.id" :ref="card.id"
           :class="{ 'jn-opacity': !card.asn, 'col-xl-4': true, 'col-lg-6': true, 'col-md-6': true, 'mb-4': true }">
           <div class="card jn-card" :class="{ 'dark-mode dark-mode-border': isDarkMode }">
-            <div class="card-header jn-ip-title"
-              :class="{ 'dark-mode-title': isDarkMode, 'bg-light': !isMapShown && !isDarkMode }"
-              style="font-weight: bold;">
+            <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>
+                <i class="bi" :class="'bi-' + (index + 1) + '-circle-fill'"></i>&nbsp;
                 {{ $t('ipInfos.Source') }}: {{ card.source }}</span>
               <button @click="refreshCard(card)" :class="['btn', isDarkMode ? 'btn-dark dark-mode-refresh' : 'btn-light']"
                 :aria-label="'Refresh' + card.source">
                 <i class="bi bi-arrow-clockwise"></i></button>
             </div>
+            <div class="p-3" :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.asn) || (card.ip === $t('ipInfos.IPv4Error')) || (card.ip === $t('ipInfos.IPv6Error'))"
+                class="col-10"
+                :class="{ 'jn-ip-font': isMobile}"
+                >
+                {{ 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)"></i>
+              </span>
+              <span v-else class="placeholder col-10"></span>
+            </div>
 
-            <img v-if="isMapShown" :src="isDarkMode ? card.mapUrl_dark : card.mapUrl" class="card-img-top jn-map-image"
-              alt="Map">
 
             <div v-if="(card.asn) || (card.ip === $t('ipInfos.IPv4Error')) || (card.ip === $t('ipInfos.IPv6Error'))
-              " class="card-body" :id="'IPInfo-'+(index+1)">
-              <ul class="list-group list-group-flush">
+              " class="card-body" :id="'IPInfo-' + (index + 1)">
+              <ul class="list-group list-group-flush" v-if="card.country_name">
 
-                <li class="jn-list-group-item" :class="{ 'dark-mode': isDarkMode }">
-                  <span class="jn-text col-auto">
-                    <i class="bi bi-pc-display-horizontal"></i> {{ $t('ipInfos.IP') }} :&nbsp;
-                  </span>
-                  <span class="col-10 ">
-                    {{ card.ip }}
-                    <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)"></i>
-                  </span>
-                </li>
+                <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 }">
@@ -191,7 +200,7 @@ export default {
   data() {
     return {
       isCardsCollapsed: JSON.parse(localStorage.getItem('isCardsCollapsed')) || false,
-      placeholderSizes: [12, 8, 6, 8, 4, 8],
+      placeholderSizes: [12, 8, 6, 8, 4],
       sources: [
         { id: 0, text: 'IPCheck.ing', enabled: true },
         { id: 1, text: 'IP.SB', enabled: true },
@@ -741,8 +750,39 @@ export default {
 </script>
 
 <style scoped>
-.jn-select{
+.jn-select {
   cursor: pointer;
   user-select: none;
 }
+
+.jn-link1 {
+  position: relative;
+}
+
+.jn-link2::before {
+  content: '';
+  position: absolute;
+  top: 34px;
+  left: 24px;
+  transform: translateX(-50%);
+  height: 40px;
+  width: 2px;
+  border-left: 2px dashed #212529;
+  z-index: 1;
+}
+
+.jn-link2-dark::before {
+  content: '';
+  position: absolute;
+  top: 34px;
+  left: 24px;
+  transform: translateX(-50%);
+  height: 40px;
+  width: 2px;
+  border-left: 2px dashed #e3e3e3;
+  z-index: 1;
+}
+.jn-ip-font{
+  zoom:0.8;
+}
 </style>
diff --git a/src/style.css b/src/style.css
index 34e01cea..0e9eecb2 100644
--- a/src/style.css
+++ b/src/style.css
@@ -220,11 +220,6 @@ footer {
   margin-top: 50vh;
 }
 
-.jn-shortcut-row {
-  margin: 2pt 0 2pt 0;
-  border-bottom: 1px solid;
-}
-
 .jn-dark-mode-help-border {
   border-color: #a8a8a863 !important;
 }