diff --git a/YaeBlog.Core/Models/BlogOptions.cs b/YaeBlog.Core/Models/BlogOptions.cs
index 7fa918c..d804200 100644
--- a/YaeBlog.Core/Models/BlogOptions.cs
+++ b/YaeBlog.Core/Models/BlogOptions.cs
@@ -40,4 +40,6 @@ public class BlogOptions
     public string? RegisterInformation { get; set; }
 
     public required AboutInfo About { get; set; }
+
+    public required List<FriendLink> Links { get; set; }
 }
diff --git a/YaeBlog.Core/Models/FriendLink.cs b/YaeBlog.Core/Models/FriendLink.cs
new file mode 100644
index 0000000..0906cc7
--- /dev/null
+++ b/YaeBlog.Core/Models/FriendLink.cs
@@ -0,0 +1,27 @@
+namespace YaeBlog.Core.Models;
+
+/// <summary>
+/// 友链模型类
+/// </summary>
+public class FriendLink
+{
+    /// <summary>
+    /// 友链名称
+    /// </summary>
+    public required string Name { get; set; }
+
+    /// <summary>
+    /// 友链的简单介绍
+    /// </summary>
+    public required string Description { get; set; }
+
+    /// <summary>
+    /// 友链地址
+    /// </summary>
+    public required string Link { get; set; }
+
+    /// <summary>
+    /// 头像地址
+    /// </summary>
+    public required string AvatarImage { get; set; }
+}
diff --git a/YaeBlog.Theme.FluentUI/Pages/Links.razor b/YaeBlog.Theme.FluentUI/Pages/Links.razor
new file mode 100644
index 0000000..8d10eb0
--- /dev/null
+++ b/YaeBlog.Theme.FluentUI/Pages/Links.razor
@@ -0,0 +1,58 @@
+@page "/links"
+@using YaeBlog.Core.Models
+
+@inject BlogOptions BlogOptionsInstance
+
+<PageTitle>
+    友链
+</PageTitle>
+
+<div style="height: 100%">
+    <div class="link-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')">
+        <div class="link-content">
+            <FluentStack Orientation="@Orientation.Vertical"
+                         HorizontalAlignment="@HorizontalAlignment.Center">
+                <FluentLabel Typo="@Typography.H2" Style="color: white">
+                    友 情 链 接
+                </FluentLabel>
+
+                <div style="height: 5rem"></div>
+
+                <FluentCard Style="padding: 3rem;">
+                    <FluentGrid>
+                        @foreach (FriendLink link in BlogOptionsInstance.Links)
+                        {
+                            <FluentGridItem xs="12" sm="6" md="4" lg="3">
+                                <a href="@(link.Link)" target="_blank">
+                                    <div class="link-item">
+                                        <div class="link-item-image">
+                                            <img src="@(link.AvatarImage)" alt="@(link.Name)">
+                                        </div>
+
+                                        <div style="margin: 0.5rem">
+                                            <FluentLabel Typo="@Typography.H4">
+                                                @(link.Name)
+                                            </FluentLabel>
+
+                                            <FluentLabel Typo="@Typography.Body" Style="color: #718096">
+                                                @(link.Description)
+                                            </FluentLabel>
+                                        </div>
+
+
+                                    </div>
+                                </a>
+                            </FluentGridItem>
+                        }
+                    </FluentGrid>
+                </FluentCard>
+            </FluentStack>
+        </div>
+    </div>
+
+    <BlogFooter/>
+</div>
+
+@code {
+
+}
diff --git a/YaeBlog.Theme.FluentUI/Pages/Links.razor.css b/YaeBlog.Theme.FluentUI/Pages/Links.razor.css
new file mode 100644
index 0000000..69ad602
--- /dev/null
+++ b/YaeBlog.Theme.FluentUI/Pages/Links.razor.css
@@ -0,0 +1,37 @@
+.link-background {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.link-content {
+    top: 23%;
+    position: absolute;
+    width: 80%;
+    margin: 0 10%;
+}
+
+.link-item {
+    display: flex;
+    padding: 1rem;
+    border-radius: 4px;
+}
+
+.link-item:hover {
+    background-color: rgba(172, 172, 172, 0.25);
+}
+
+.link-item-image {
+    width: 4rem;
+    height: 4rem;
+}
+
+.link-item-image img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+}
+
+