diff --git a/.idea/.idea.Katheryne/.idea/vcs.xml b/.idea/.idea.Katheryne/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/.idea.Katheryne/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/Frontend/MainLayout.razor b/Frontend/MainLayout.razor
deleted file mode 100644
index d629542..0000000
--- a/Frontend/MainLayout.razor
+++ /dev/null
@@ -1,3 +0,0 @@
-@inherits LayoutComponentBase
-
-<main> @Body </main>
\ No newline at end of file
diff --git a/Frontend/Models/ChatMessage.cs b/Frontend/Models/ChatMessage.cs
new file mode 100644
index 0000000..4158455
--- /dev/null
+++ b/Frontend/Models/ChatMessage.cs
@@ -0,0 +1,10 @@
+namespace Frontend.Models;
+
+public class ChatMessage
+{
+    public required string Sender { get; init; }
+        
+    public required string Text { get; init; }
+        
+    public required bool Left { get; init; }
+}
\ No newline at end of file
diff --git a/Frontend/Pages/Index.razor b/Frontend/Pages/Index.razor
index add825e..06f181e 100644
--- a/Frontend/Pages/Index.razor
+++ b/Frontend/Pages/Index.razor
@@ -1,3 +1,55 @@
 @page "/"
+@using Frontend.Models
 
-<h1>Hello, world!</h1>
\ No newline at end of file
+<Layout>
+    <Sider Width="200">
+        
+    </Sider>
+
+    <Content>
+        <div class="chat-zone">
+            <AntList TItem="ChatMessage" DataSource="@_messages" Split="@false">
+                <ListItem>
+                    @if (context.Left)
+                    {
+                        <div>
+                            <MessageBubble Message="context"/>
+                        </div>
+                    }
+                    else
+                    {
+                        <div style="margin-left: auto">
+                            <MessageBubble Message="context"/>
+                        </div>
+                    }
+                </ListItem>
+            </AntList>
+        </div>
+    </Content>
+</Layout>
+
+@code
+{
+    private readonly List<ChatMessage> _messages = new()
+    {
+        new ChatMessage
+        {
+            Sender = "凯瑟琳",
+            Text = "向着星辰和深渊！",
+            Left = true
+        },
+        new ChatMessage
+        {
+            Sender = "凯瑟琳",
+            Text = "欢迎来到冒险家协会。",
+            Left = true
+        },
+        new ChatMessage
+        {
+            Sender = "旅行者",
+            Text = "领取每日委托奖励。",
+            Left = false
+        }
+    };
+
+}
\ No newline at end of file
diff --git a/Frontend/Pages/index.razor.css b/Frontend/Pages/index.razor.css
new file mode 100644
index 0000000..ea57325
--- /dev/null
+++ b/Frontend/Pages/index.razor.css
@@ -0,0 +1,12 @@
+.chat-column {
+    margin-left: auto;
+}
+
+.chat-zone {
+    min-width: inherit;
+    background: linear-gradient(180deg, 
+    #f5f4f6,
+    #b5bddf);
+    min-height: calc(100vh - 64px);
+    padding: 20px;
+}
\ No newline at end of file
diff --git a/Frontend/Shared/MainLayout.razor b/Frontend/Shared/MainLayout.razor
new file mode 100644
index 0000000..ed18d08
--- /dev/null
+++ b/Frontend/Shared/MainLayout.razor
@@ -0,0 +1,27 @@
+@inherits LayoutComponentBase
+
+<div>
+    <Layout>
+        <Header class="header">
+            <Space >
+                <SpaceItem>
+                    <p class="title-text">
+                        自律型可重编程对话机器人
+                    </p>
+                </SpaceItem>
+                
+                <SpaceItem>
+                    <p class="subtitle-text">
+                        a.k.a 凯瑟琳
+                    </p>
+                </SpaceItem>
+            </Space>
+        </Header>
+
+        <Layout>
+            <Content>
+                @Body
+            </Content>
+        </Layout>
+    </Layout>
+</div>
\ No newline at end of file
diff --git a/Frontend/Shared/MainLayout.razor.css b/Frontend/Shared/MainLayout.razor.css
new file mode 100644
index 0000000..688abd1
--- /dev/null
+++ b/Frontend/Shared/MainLayout.razor.css
@@ -0,0 +1,11 @@
+.title-text {
+    font-size: 2rem;
+    color: white;
+    margin: 0;
+}
+
+.subtitle-text {
+    font-size: 0.8rem;
+    color: grey;
+    margin: 0;
+}
\ No newline at end of file
diff --git a/Frontend/Shared/MessageBubble.razor b/Frontend/Shared/MessageBubble.razor
new file mode 100644
index 0000000..5f474ce
--- /dev/null
+++ b/Frontend/Shared/MessageBubble.razor
@@ -0,0 +1,50 @@
+@using Frontend.Models
+@if (Message.Left)
+{
+    <Space Align="start">
+        <SpaceItem>
+            <Avatar Icon="user" Size="2.5rem"/>
+        </SpaceItem>
+
+        <SpaceItem>
+            <div class="bubble">
+                <p style="font-size: 1.1rem">
+                    @Message.Text
+                </p>
+                <p style="font-size: 0.8rem; color: rgb(128,128,128)">
+                    @Message.Sender
+                </p>
+            </div>
+        </SpaceItem>
+    </Space>
+}
+else
+{
+    <Space Align="start">
+        <SpaceItem>
+            <div class="bubble">
+                <p style="font-size: 1.1rem; align-self: flex-end">
+                    @Message.Text
+                </p>
+                <p style="font-size: 0.8rem; align-self: flex-end; color: rgb(128, 128, 128)">
+                    @Message.Sender
+                </p>
+            </div>
+        </SpaceItem>
+        
+        <SpaceItem>
+            <Avatar Icon="user" Size="2.5rem"/>
+        </SpaceItem>
+    </Space>
+}
+
+@code {
+
+    [Parameter]
+    public ChatMessage Message { get; set; } = new()
+    {
+        Left = true,
+        Sender = "default",
+        Text = "default"
+    };
+}
\ No newline at end of file
diff --git a/Frontend/Shared/MessageBubble.razor.css b/Frontend/Shared/MessageBubble.razor.css
new file mode 100644
index 0000000..d7d112d
--- /dev/null
+++ b/Frontend/Shared/MessageBubble.razor.css
@@ -0,0 +1,7 @@
+.bubble {
+    background-color: white;
+    border-radius: 10px;
+    padding: 5px;
+    display: flex;
+    flex-direction: column;
+}
\ No newline at end of file
diff --git a/Frontend/_Imports.razor b/Frontend/_Imports.razor
index 8deb6df..ce2123f 100644
--- a/Frontend/_Imports.razor
+++ b/Frontend/_Imports.razor
@@ -2,4 +2,5 @@
 @using Microsoft.AspNetCore.Components.Web
 @using Microsoft.JSInterop
 @using AntDesign
-@using Frontend
\ No newline at end of file
+@using Frontend
+@using Frontend.Shared
\ No newline at end of file