diff --git a/client/ui/App.jsx b/client/ui/App.jsx
index 64b36a5..a35ad92 100644
--- a/client/ui/App.jsx
+++ b/client/ui/App.jsx
@@ -1,5 +1,7 @@
 export default function App() {
     return (
-        <div></div>
+        <div>
+            
+        </div>
     )
 }
diff --git a/client/ui/chat/ChatFragment.jsx b/client/ui/chat/ChatFragment.jsx
new file mode 100644
index 0000000..e92ea04
--- /dev/null
+++ b/client/ui/chat/ChatFragment.jsx
@@ -0,0 +1,3 @@
+export default function ChatFragment() {
+
+}
diff --git a/client/ui/chat/Message.jsx b/client/ui/chat/Message.jsx
new file mode 100644
index 0000000..6d85f33
--- /dev/null
+++ b/client/ui/chat/Message.jsx
@@ -0,0 +1,67 @@
+export default function Message({ direction = 'left', children }) {
+    return (
+        <div
+            slot="trigger"
+            style={{
+                width: "100%",
+                display: "flex",
+                justifyContent: "flex-start",
+                flexDirection: "column"
+            }}>
+            <div
+                style={{
+                    display: "flex",
+                    justifyContent: "flex-start"
+                }}>
+                {
+                    // 发送者昵称(左)
+                    direction == 'left' && <span
+                        style={{
+                            alignSelf: "center",
+                            fontSize: "90%"
+                        }}></span>
+                }
+                {
+                    // 发送者头像
+                }
+                <mdui-avatar
+                    style={{
+                        width: "43px",
+                        height: "43px",
+                        margin: "11px"
+                    }}>
+                </mdui-avatar>
+                {
+                    // 发送者昵称(右)
+                    direction == 'right' && <span
+                        style={{
+                            alignSelf: "center",
+                            fontSize: "90%"
+                        }}>
+                    </span>
+                }
+            </div>
+            <mdui-card
+                variant="elevated"
+                style={{
+                    maxWidth: (window.matchMedia('(pointer: fine)') && "50%") || (window.matchMedia('(pointer: coarse)') && "77%"),
+                    minWidth: "0%",
+                    marginLeft: "55px",
+                    marginTop: "-5px",
+                    padding: "15px",
+                    alignSelf: "flex-start"
+                }}>
+                {
+                    // 消息内容
+                    children
+                }
+                <span
+                    id="msg"
+                    style={{
+                        fontSize: "94%"
+                    }}>
+                </span>
+            </mdui-card>
+        </div>
+    )
+}
diff --git a/client/ui/chat/MessageContainer.jsx b/client/ui/chat/MessageContainer.jsx
new file mode 100644
index 0000000..afbf781
--- /dev/null
+++ b/client/ui/chat/MessageContainer.jsx
@@ -0,0 +1,14 @@
+export default function MessageContainer({ children }) {
+    return (
+        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            paddingTop: '10px',
+            paddingBottom: '14px'
+        }}>
+            {children}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/client/ui/chat/SystemMessage.jsx b/client/ui/chat/SystemMessage.jsx
new file mode 100644
index 0000000..43f7f1a
--- /dev/null
+++ b/client/ui/chat/SystemMessage.jsx
@@ -0,0 +1,23 @@
+export default function SystemMessage({ children }) {
+    return (
+        <div style={{
+            width: '100%',
+            flexDirection: 'column',
+            display: 'flex',
+            marginTop: '25px',
+            marginBottom: '20px',
+        }}>
+            <mdui-card variant="filled"
+                style={{
+                    alignSelf: 'center',
+                    paddingTop: '9px',
+                    paddingBottom: '9px',
+                    paddingLeft: '18px',
+                    paddingRight: '18px',
+                    fontSize: '92%',
+                }}>
+                {children}
+            </mdui-card>
+        </div>
+    )
+}