diff --git a/_tabs/friends.md b/_tabs/friends.md
index bae986bfd66..ca3bfc176d1 100644
--- a/_tabs/friends.md
+++ b/_tabs/friends.md
@@ -1,30 +1,37 @@
 ---
-# the default layout is 'page'
-icon: fas fa-info-circle
+# layout: page
+icon: fas fa-user-friends
 order: 5
 ---
 
-<h2 align="center">🔗 Friends</h2>
-
 <div align="center">
-  <p>这些是我可爱的朋友们，快来看看吧！</p>
+  <p>🔗这些是我可爱的朋友们，快来看看吧！🔗</p>
+</div>
+
+<div style="border: 2px solid #d1d5db; border-radius: 20px; padding: 20px; margin-bottom: 20px; text-align: center; background: linear-gradient(135deg, #f0f4f8, #dfe7ec); box-shadow: 0 8px 16px rgba(0,0,0,0.2); transition: transform 0.3s, box-shadow 0.3s;">
+  <h3 style="margin: 0; font-size: 1.5em;">🌱 朋友1</h3>
+  <p style="margin: 10px 0;">特长 xxx</p>
+  <a href="https://example.com" target="_blank" style="color: #0366d6; text-decoration: none; font-weight: bold; transition: color 0.3s;">访问链接</a>
+</div>
+
+<div style="border: 2px solid #d1d5db; border-radius: 20px; padding: 20px; margin-bottom: 20px; text-align: center; background: linear-gradient(135deg, #f0f4f8, #dfe7ec); box-shadow: 0 8px 16px rgba(0,0,0,0.2); transition: transform 0.3s, box-shadow 0.3s;">
+  <h3 style="margin: 0; font-size: 1.5em;">🌈 朋友2</h3>
+  <p style="margin: 10px 0;">特长 xxx</p>
+  <a href="https://example.com" target="_blank" style="color: #0366d6; text-decoration: none; font-weight: bold; transition: color 0.3s;">访问链接</a>
 </div>
-  <div style="border: 2px solid #d1d5db; border-radius: 20px; padding: 20px; margin-bottom: 20px; text-align: center; background: linear-gradient(135deg, #f0f4f8, #dfe7ec); box-shadow: 0 8px 16px rgba(0,0,0,0.2); transition: transform 0.3s, box-shadow 0.3s;">
-    <h3 style="margin: 0; font-size: 1.5em;">🌱 朋友1</h3>
-    <p style="margin: 10px 0;">特长 xxx</p>
-  </div>
-  <div style="border: 2px solid #d1d5db; border-radius: 20px; padding: 20px; margin-bottom: 20px; text-align: center; background: linear-gradient(135deg, #f0f4f8, #dfe7ec); box-shadow: 0 8px 16px rgba(0,0,0,0.2); transition: transform 0.3s, box-shadow 0.3s;">
-    <h3 style="margin: 0; font-size: 1.5em;">🌈 朋友2</h3>
-    <p style="margin: 10px 0;">特长 xxx</p>
-  </div>
-  <div style="border: 2px solid #d1d5db; border-radius: 20px; padding: 20px; margin-bottom: 20px; text-align: center; background: linear-gradient(135deg, #f0f4f8, #dfe7ec); box-shadow: 0 8px 16px rgba(0,0,0,0.2); transition: transform 0.3s, box-shadow 0.3s;">
-    <h3 style="margin: 0; font-size: 1.5em;">💡 朋友3</h3>
-    <p style="margin: 10px 0;">特长 xxx</p>
-  </div>
-  <div style="border: 2px solid #d1d5db; border-radius: 20px; padding: 20px; margin-bottom: 20px; text-align: center; background: linear-gradient(135deg, #f0f4f8, #dfe7ec); box-shadow: 0 8px 16px rgba(0,0,0,0.2); transition: transform 0.3s, box-shadow 0.3s;">
-    <h3 style="margin: 0; font-size: 1.5em;">📚 朋友4</h3>
-    <p style="margin: 10px 0;">特长 xxx</p>
-  </div>
+
+<div style="border: 2px solid #d1d5db; border-radius: 20px; padding: 20px; margin-bottom: 20px; text-align: center; background: linear-gradient(135deg, #f0f4f8, #dfe7ec); box-shadow: 0 8px 16px rgba(0,0,0,0.2); transition: transform 0.3s, box-shadow 0.3s;">
+  <h3 style="margin: 0; font-size: 1.5em;">💡 朋友3</h3>
+  <p style="margin: 10px 0;">特长 xxx</p>
+  <a href="https://example.com" target="_blank" style="color: #0366d6; text-decoration: none; font-weight: bold; transition: color 0.3s;">访问链接</a>
+</div>
+
+<div style="border: 2px solid #d1d5db; border-radius: 20px; padding: 20px; margin-bottom: 20px; text-align: center; background: linear-gradient(135deg, #f0f4f8, #dfe7ec); box-shadow: 0 8px 16px rgba(0,0,0,0.2); transition: transform 0.3s, box-shadow 0.3s;">
+  <h3 style="margin: 0; font-size: 1.5em;">📚 朋友4</h3>
+  <p style="margin: 10px 0;">特长 xxx</p>
+  <a href="https://example.com" target="_blank" style="color: #0366d6; text-decoration: none; font-weight: bold; transition: color 0.3s;">访问链接</a>
+</div>
+
 ---
 
-<p align="center">✨ 欢迎访问这些站点，发现更多有趣内容！✨</p>
+<p align="center">✨ 欢迎访问这些站点，发现更多有趣内容！✨</p>
\ No newline at end of file