diff --git a/react-ui/src/pages/Message/index.less b/react-ui/src/pages/Message/index.less
new file mode 100644
index 0000000..0911278
--- /dev/null
+++ b/react-ui/src/pages/Message/index.less
@@ -0,0 +1,72 @@
+.message-page {
+    .selected {
+        background-color: #f0f2f5;
+    }
+
+    .chat-message {
+        margin: 8px 0;
+        padding: 8px;
+        border-radius: 4px;
+
+        &.sent {
+            background-color: #e6f7ff;
+            margin-left: 40px;
+        }
+
+        &.received {
+            background-color: #f0f2f5;
+            margin-right: 40px;
+        }
+    }
+
+    .message-input {
+        border-top: 1px solid #f0f0f0;
+        padding-top: 16px;
+    }
+
+    .message-list {
+        height: calc(100vh - 200px);
+        overflow-y: auto;
+    }
+
+    .chat-container {
+        display: flex;
+        flex-direction: column;
+        height: calc(100vh - 100px);
+    }
+
+    .chat-messages {
+        flex: 1;
+        overflow-y: auto;
+        padding: 16px;
+    }
+
+    .ant-list-item {
+        transition: background-color 0.3s;
+
+        &:hover {
+            background-color: #f5f5f5;
+        }
+    }
+
+}
+
+.message-page {
+    .chat-message {
+        &.sent {
+            .ant-list-item-meta {
+                text-align: right;
+            }
+        }
+
+        &.received {
+            .ant-list-item-meta {
+                text-align: left;
+            }
+        }
+    }
+
+    .selected {
+        background-color: #f0f8ff;
+    }
+}
\ No newline at end of file