diff --git a/src/pages/friends.astro b/src/pages/friends.astro
new file mode 100644
index 0000000..3539d1e
--- /dev/null
+++ b/src/pages/friends.astro
@@ -0,0 +1,97 @@
+---
+import MainGridLayout from "@layouts/MainGridLayout.astro";
+import { Icon } from "astro-icon/components";
+---
+
+<MainGridLayout title="友链">
+    <div class="card-base p-6 md:p-8">
+        <div class="flex items-center gap-2 mb-6">
+            <div class="h-8 w-8 rounded-lg bg-[var(--primary)] flex items-center justify-center text-white dark:text-black/70">
+                <Icon name="material-symbols:diversity-3" class="text-[1.5rem]">
+            </div>
+            <h1 class="text-2xl font-bold text-black dark:text-white">友链</h1>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <!-- 在这里添加你的友链，参考下面的格式 -->
+            
+            <!-- 友链示例1 -->
+            <a href="https://example.com/" target="_blank" class="friend-card">
+                <div class="flex items-center gap-2">
+                    <img src="https://example.com/avatar.png" loading="lazy" class="w-5 h-5 rounded">
+                    <div class="font-bold text-black dark:text-white">网站名称</div>
+                </div>
+                <div class="text-sm text-black/50 dark:text-white/50">网站简介描述</div>
+            </a>
+
+            <!-- 友链示例2 -->
+            <a href="https://example2.com/" target="_blank" class="friend-card">
+                <div class="flex items-center gap-2">
+                    <img src="https://example2.com/logo.png" loading="lazy" class="w-5 h-5 rounded">
+                    <div class="font-bold text-black dark:text-white">另一个网站</div>
+                </div>
+                <div class="text-sm text-black/50 dark:text-white/50">这里写网站的简介</div>
+            </a>
+
+            <!-- 继续添加更多友链... -->
+            <a href="https://adclosenn.top" target="_blank" class="friend-card">
+                <div class="flex items-center gap-2">
+                    <img src="https://adclosenn.top/assets/avatar.jpg" loading="lazy" class="w-5 h-5 rounded">
+                    <div class="font-bold text-black dark:text-white">Ad_closeNN の Blog</div>
+                </div>
+                <div class="text-sm text-black/50 dark:text-white/50">Ad_closeNN 的小站，时不时会刷新一些野生东西 | ✨ 欢迎友链，祝大家天天开心！ ✨</div>
+            </a>
+            <a href="https://caiyifeng.top/" target="_blank" class="friend-card">
+                <div class="flex items-center gap-2">
+                    <img src="https://img.cdn1.vip/i/68bbdee513eb9_1757142757.webp" loading="lazy" class="w-5 h-5 rounded">
+                    <div class="font-bold text-black dark:text-white">LYEy_isine个人博客</div>
+                </div>
+                <div class="text-sm text-black/50 dark:text-white/50">花海无一日,少年踏自来</div>
+            </a>
+        </div>
+
+        <!-- 申请友链 -->
+        <div class="sponsors-section mt-8">
+        	<h2 class="text-xl font-bold text-black dark:text-white mb-4 flex items-center gap-2">
+        		<Icon name="material-symbols:group" class="text-[1.5rem] text-[var(--primary)]"/>
+        		将您的网站加入本站友链
+        	</h2>
+        	<p class="text-sm text-black/60 dark:text-white/60">
+        		请自行提交PR <a target="_blank" href="https://github.com/MCKero6423/fuwari/blob/main/src/pages/friends.astro" class="transition link text-[var(--primary)] font-medium underline">点击这里提交</a>
+        	</p>
+        <br>
+    </div>
+
+</MainGridLayout>
+
+<style>
+    .friend-card {
+        @apply flex flex-col gap-1 p-4 rounded-lg bg-[var(--card-bg)] hover:bg-black/5 dark:hover:bg-white/5;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 0.15s;
+    }
+    
+    .friend-card:active {
+        scale: .98;
+        background-color: var(--btn-regular-bg-active);
+    }
+    
+    .friend-card:hover {
+        background-color: var(--btn-regular-bg-hover);
+    }
+    
+    .friend-card:hover .font-bold {
+        color: var(--btn-content);
+    }
+    
+    .friend-card:hover .text-sm {
+    @apply text-gray-700 dark:text-white;
+    }
+
+    .friend-card .font-bold,
+    .friend-card .text-sm {
+        transition-property: color;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 0.15s;
+    }
+</style>
\ No newline at end of file