diff --git a/YaeBlog.Theme.FluentUI/Pages/Archives.razor b/YaeBlog.Theme.FluentUI/Pages/Archives.razor
new file mode 100644
index 0000000..e2f34eb
--- /dev/null
+++ b/YaeBlog.Theme.FluentUI/Pages/Archives.razor
@@ -0,0 +1,74 @@
+@page "/archives"
+@using YaeBlog.Core.Models
+@using YaeBlog.Core.Services
+
+@inject BlogOptions BlogOptionsInstance
+@inject EssayContentService EssayContentInstance
+
+<div style="height: 100%">
+    <div class="archive-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')">
+        <div class="archive-title">
+            <FluentStack Orientation="@Orientation.Vertical"
+                         HorizontalAlignment="@HorizontalAlignment.Center">
+                <FluentLabel Typo="@Typography.H1" Color="@Color.Fill">
+                    存 档
+                </FluentLabel>
+            </FluentStack>
+        </div>
+    </div>
+
+    <div style="height: 2rem"></div>
+
+    <div style="margin: 0 8% 0 8%">
+        <FluentCard>
+            <div style="margin: 0 8% 0 8%">
+                <FluentLabel Typo="@Typography.H2" Style="margin: 3rem 0 2rem 0; color: #404853">
+                    共计@(EssayContentInstance.Count)篇文章
+                </FluentLabel>
+
+                @foreach (IGrouping<DateTime, KeyValuePair<string, BlogEssay>> group in _essays)
+                {
+                    <FluentLabel Typo="@Typography.H3" Style="color: #718096; margin: 2rem 0 1rem 0">
+                        @(group.Key.ToString("yyyy年"))
+                    </FluentLabel>
+
+                    <div style="margin: 0 4% 0 4%">
+                        @foreach (KeyValuePair<string, BlogEssay> pair in group)
+                        {
+                            <div class="archive-item">
+                                <a href="/essays/@(pair.Key)" target="_blank">
+                                    <FluentStack Orientation="@Orientation.Horizontal">
+                                        <FluentLabel Typo="@Typography.H5" Style="width: 80px">
+                                            @(pair.Value.PublishTime.ToString("MM-dd"))
+                                        </FluentLabel>
+
+                                        <FluentLabel Typo="@Typography.H5">
+                                            @(pair.Value.Title)
+                                        </FluentLabel>
+                                    </FluentStack>
+                                </a>
+                            </div>
+                        }
+                    </div>
+                }
+            </div>
+        </FluentCard>
+    </div>
+
+    <BlogFooter/>
+</div>
+
+@code {
+    private readonly List<IGrouping<DateTime, KeyValuePair<string, BlogEssay>>> _essays = [];
+
+    protected override void OnInitialized()
+    {
+        IEnumerable<IGrouping<DateTime, KeyValuePair<string, BlogEssay>>> essays =
+            from essay in EssayContentInstance.Essays
+            orderby essay.Value.PublishTime descending
+            group essay by new DateTime(essay.Value.PublishTime.Year, 1, 1);
+
+        _essays.AddRange(essays);
+    }
+
+}
diff --git a/YaeBlog.Theme.FluentUI/Pages/Archives.razor.css b/YaeBlog.Theme.FluentUI/Pages/Archives.razor.css
new file mode 100644
index 0000000..8746f42
--- /dev/null
+++ b/YaeBlog.Theme.FluentUI/Pages/Archives.razor.css
@@ -0,0 +1,24 @@
+.archive-background {
+    position: relative;
+    height: 80%;
+    overflow: hidden;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.archive-title {
+    top: 43%;
+    position: absolute;
+    width: 100%;
+}
+
+.archive-item {
+    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
+    margin: 0.5rem 0 0.5rem 0;
+    border-radius: 4px;
+}
+
+.archive-item:hover {
+    background-color: rgba(169, 169, 169, 0.22);
+}
+
diff --git a/YaeBlog.Theme.FluentUI/Pages/Essay.razor b/YaeBlog.Theme.FluentUI/Pages/Essay.razor
index 9df0164..63a800d 100644
--- a/YaeBlog.Theme.FluentUI/Pages/Essay.razor
+++ b/YaeBlog.Theme.FluentUI/Pages/Essay.razor
@@ -49,6 +49,8 @@
             </FluentGridItem>
         </FluentGrid>
     </div>
+
+    <BlogFooter/>
 </div>
 
 @code {