diff --git a/index.html b/index.html
index da69d50..58d2af5 100644
--- a/index.html
+++ b/index.html
@@ -11,13 +11,4 @@
   <div id="app"></div>
   <script type="module" src="/src/main.js"></script>
 </body>
-  <!-- 找到页面底部的 footer 标签，新增备案行 -->
-<footer>
-  <!-- 原有内容 -->
-  <div class="copyright">© 2025 DevOps 导航</div>
-  <!-- 新增ICP备案信息 -->
-  <div class="icp">
-    <a href="https://beian.miit.gov.cn/" target="_blank">豫ICP备2021025932号-2</a>
-  </div>
-</footer>
 </html>
diff --git a/src/App.vue b/src/App.vue
index c65d3ca..793f367 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -116,6 +116,12 @@
               <span>🎲</span> 随机
             </button>
           </div>
+
+          <div class="footer-info">
+            <span>© 2025 DevOps 导航</span>
+            <span class="divider">|</span>
+            <a href="https://beian.miit.gov.cn/" target="_blank" class="icp-link">豫ICP备2021025932号-2</a>
+          </div>
         </div>
       </footer>
     </div>
@@ -772,6 +778,32 @@ onMounted(() => {
   gap: 16px;
 }
 
+.footer-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.8rem;
+  width: 100%;
+  justify-content: center;
+  padding-top: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.15);
+  margin-top: 8px;
+}
+
+.footer-info .divider {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.footer-info .icp-link {
+  color: rgba(255, 255, 255, 0.6);
+  transition: color 0.3s;
+}
+
+.footer-info .icp-link:hover {
+  color: rgba(255, 255, 255, 0.9);
+}
+
 .stats-overview {
   display: flex;
   gap: 24px;