diff --git a/YaeBlog.Core/Models/BlogOptions.cs b/YaeBlog.Core/Models/BlogOptions.cs
index 5313860..62a5a80 100644
--- a/YaeBlog.Core/Models/BlogOptions.cs
+++ b/YaeBlog.Core/Models/BlogOptions.cs
@@ -6,5 +6,9 @@ public class BlogOptions
 
     public required string Root { get; set; }
 
+    public required string Author { get; set; }
+
     public required string ProjectName { get; set; }
+
+    public required string BannerImage { get; set; }
 }
diff --git a/YaeBlog.Theme.FluentUI/Layout/MainLayout.razor b/YaeBlog.Theme.FluentUI/Layout/MainLayout.razor
index e1af66e..d0323c7 100644
--- a/YaeBlog.Theme.FluentUI/Layout/MainLayout.razor
+++ b/YaeBlog.Theme.FluentUI/Layout/MainLayout.razor
@@ -1,44 +1,47 @@
+@using YaeBlog.Core.Models
 @inherits LayoutComponentBase
 
+@inject BlogOptions BlogOptionsInstance
+
 <FluentLayout>
     <FluentHeader>
         <FluentStack Orientation="@Orientation.Horizontal">
             <div style="width: 50px"></div>
 
             <a href="/">
-                <FluentLabel Typo="@Typography.H4">
-                    Ricardo Ren
+                <FluentLabel Typo="@Typography.H3">
+                    @BlogOptionsInstance.Author
                 </FluentLabel>
             </a>
 
             <FluentSpacer/>
 
-            <a href="/">
-                <FluentLabel Typo="@Typography.Body">
+            <a href="/" style="margin: auto 0 auto 0">
+                <FluentLabel Typo="@Typography.H5">
                     首页
                 </FluentLabel>
             </a>
 
-            <a href="/archives">
-                <FluentLabel Typo="@Typography.Body">
+            <a href="/archives" style="margin: auto 0 auto 0">
+                <FluentLabel Typo="@Typography.H5">
                     归档
                 </FluentLabel>
             </a>
 
-            <a href="/tags">
-                <FluentLabel Typo="@Typography.Body">
+            <a href="/tags" style="margin: auto 0 auto 0">
+                <FluentLabel Typo="@Typography.H5">
                     标签
                 </FluentLabel>
             </a>
 
-            <a href="/about">
-                <FluentLabel Typo="@Typography.Body">
+            <a href="/about" style="margin: auto 0 auto 0">
+                <FluentLabel Typo="@Typography.H5">
                     关于
                 </FluentLabel>
             </a>
 
-            <a href="/links">
-                <FluentLabel Typo="@Typography.Body">
+            <a href="/links" style="margin: auto 0 auto 0">
+                <FluentLabel Typo="@Typography.H5">
                     友链
                 </FluentLabel>
             </a>
@@ -46,8 +49,8 @@
             <div style="width: 50px"></div>
         </FluentStack>
     </FluentHeader>
-    <FluentBodyContent>
-        <main>
+    <FluentBodyContent Style="height: 100%">
+        <main style="height: 100%">
             @Body
         </main>
     </FluentBodyContent>
diff --git a/YaeBlog.Theme.FluentUI/Pages/Home.razor b/YaeBlog.Theme.FluentUI/Pages/Home.razor
index e8a367e..1fd8d9d 100644
--- a/YaeBlog.Theme.FluentUI/Pages/Home.razor
+++ b/YaeBlog.Theme.FluentUI/Pages/Home.razor
@@ -1,7 +1,81 @@
 @page "/"
-<h3>Home</h3>
+@using YaeBlog.Core.Models
+
+@inject BlogOptions BlogOptionsInstance
+
+<div style="height: 100%">
+    <div class="banner" style="background-image: url('@BlogOptionsInstance.BannerImage')">
+        <div class="blog-title">
+            <FluentLabel Typo="@Typography.H1" Style="color: white">
+                @(BlogOptionsInstance.Author)'s Blog
+            </FluentLabel>
+        </div>
+
+        <div class="scroll-down">
+            <i class="scroll-down-tag"></i>
+        </div>
+    </div>
+
+    <div style="margin: 0 15% 0 15%">
+        <FluentCard>
+            <div>
+                asdfasdfsadf
+            </div>
+            <div>
+                asdfasdfsadf
+            </div>
+            <div>
+                asdfasdfsadf
+            </div>
+            <div>
+                asdfasdfsadf
+            </div>
+            <div>
+                asdfasdfsadf
+            </div>
+            <div>
+                asdfasdfsadf
+            </div>
+            <div>
+                asdfasdfsadf
+            </div>
+            <div>
+                asdfasdfsadf
+            </div>
+            <div>
+                asdfasdfsadf
+            </div>
+            <div>
+                asdfasdfsadf
+            </div>
+            <div>
+                asdfasdfsadf
+            </div>
+            <div>
+                asdfasdfsadf
+            </div>
+            <div>
+                asdfasdfsadf
+            </div>
+            <div>
+                asdfasdfsadf
+            </div>
+            <div>
+                asdfasdfsadf
+            </div>
+            <div>
+                asdfasdfsadf
+            </div>
+            <div>
+                asdfasdfsadf
+            </div>
+            <div>
+                asdfasdfsadf
+            </div>
+        </FluentCard>
+    </div>
+</div>
 
-<p class="test">Color Text</p>
 
 @code {
 
diff --git a/YaeBlog.Theme.FluentUI/Pages/Home.razor.css b/YaeBlog.Theme.FluentUI/Pages/Home.razor.css
index 9e07b97..09f00f1 100644
--- a/YaeBlog.Theme.FluentUI/Pages/Home.razor.css
+++ b/YaeBlog.Theme.FluentUI/Pages/Home.razor.css
@@ -1,3 +1,54 @@
-.test {
-    color: purple;
+.banner {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+}
+
+.blog-title {
+    color: white;
+    text-align: center;
+    top: 43%;
+    position: absolute;
+    width: 100%;
+}
+
+.scroll-down {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+}
+
+.scroll-down-tag::before {
+    content: "V";
+}
+
+.scroll-down-tag {
+    font-family: "Font Awesome 6 Free", sans-serif;
+    font-size: 36px;
+    color: white;
+    text-align: center;
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    animation: scroll-down-animation 1.5s infinite;
+}
+
+@keyframes scroll-down-animation {
+    0% {
+        top: 0;
+        opacity: 0.4;
+    }
+
+    50% {
+        top: -20px;
+        opacity: 1;
+    }
+
+    100% {
+        top: 0;
+        opacity: 0.4;
+    }
 }
diff --git a/YaeBlog.Theme.FluentUI/YaeBlog.Theme.FluentUI.csproj b/YaeBlog.Theme.FluentUI/YaeBlog.Theme.FluentUI.csproj
index 0dddf28..545c700 100644
--- a/YaeBlog.Theme.FluentUI/YaeBlog.Theme.FluentUI.csproj
+++ b/YaeBlog.Theme.FluentUI/YaeBlog.Theme.FluentUI.csproj
@@ -13,6 +13,11 @@
 
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
+    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.3.1" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\YaeBlog.Core\YaeBlog.Core.csproj" />
   </ItemGroup>
 
 </Project>
diff --git a/YaeBlog.Theme.FluentUI/_Imports.razor b/YaeBlog.Theme.FluentUI/_Imports.razor
index 7728512..6b48efb 100644
--- a/YaeBlog.Theme.FluentUI/_Imports.razor
+++ b/YaeBlog.Theme.FluentUI/_Imports.razor
@@ -1 +1,9 @@
-@using Microsoft.AspNetCore.Components.Web
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using static Microsoft.AspNetCore.Components.Web.RenderMode
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.JSInterop
+@using Microsoft.FluentUI.AspNetCore.Components
diff --git a/YaeBlog.Theme.FluentUI/wwwroot/globals.css b/YaeBlog.Theme.FluentUI/wwwroot/globals.css
index e861f02..2a6da98 100644
--- a/YaeBlog.Theme.FluentUI/wwwroot/globals.css
+++ b/YaeBlog.Theme.FluentUI/wwwroot/globals.css
@@ -1,3 +1,7 @@
 body a {
     text-decoration: none;
 }
+
+html, body {
+    height: 100%;
+}