diff --git a/AppScope/resources/base/element/color.json b/AppScope/resources/base/element/color.json
new file mode 100644
index 0000000..29abd9d
--- /dev/null
+++ b/AppScope/resources/base/element/color.json
@@ -0,0 +1,8 @@
+{
+  "color": [
+    {
+      "name": "bg_01",
+      "value": "#F2F3F5"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/build-profile.json5 b/build-profile.json5
index ed2b75e..dcc0b05 100644
--- a/build-profile.json5
+++ b/build-profile.json5
@@ -1,6 +1,19 @@
 {
   "app": {
     "signingConfigs": [
+      {
+        "name": "default",
+        "type": "HarmonyOS",
+        "material": {
+          "certpath": "C:\\Users\\wps\\.ohos\\config\\default_himi_ZikZBgBxljB_K_Bxk-D2cAAnn7PtvbqmLsGmCt8Tywc=.cer",
+          "storePassword": "0000001B9A5987C8C2ED4361B7927D584652F717FF7936EC3310D0B9BCEEA9B1E3485C8480FF92C40CA86E",
+          "keyAlias": "debugKey",
+          "keyPassword": "0000001BC10C705923EBF5BFF9E770159DFBE2DD5E92BD7DCC5F78CCF2629A20BA2BD3177C275B83ADB93F",
+          "profile": "C:\\Users\\wps\\.ohos\\config\\default_himi_ZikZBgBxljB_K_Bxk-D2cAAnn7PtvbqmLsGmCt8Tywc=.p7b",
+          "signAlg": "SHA256withECDSA",
+          "storeFile": "C:\\Users\\wps\\.ohos\\config\\default_himi_ZikZBgBxljB_K_Bxk-D2cAAnn7PtvbqmLsGmCt8Tywc=.p12"
+        }
+      }
     ],
     "products": [
       {
diff --git a/entry/src/main/cangjie/src/components/chat/ChatList.cj b/entry/src/main/cangjie/src/components/chat/ChatList.cj
index ddbfd05..a4b3c61 100644
--- a/entry/src/main/cangjie/src/components/chat/ChatList.cj
+++ b/entry/src/main/cangjie/src/components/chat/ChatList.cj
@@ -6,18 +6,28 @@ package ohos_app_cangjie_entry.components.chat
 internal import ohos.component.*
 internal import ohos.state_manage.*
 internal import ohos.base.*
+import std.collection.*
 import ohos.state_macro_manage.*
 import ohos_app_cangjie_entry.mock.*
 import ohos_app_cangjie_entry.types.ChatData
+import ohos_app_cangjie_entry.utils.Logger
+import ohos_app_cangjie_entry.view_model.ChatListControl
 
 @Component
 public class ChatList {
+    let TAG: String = "ChatList"
     @Prop
-    var datasource: ObservedArray<ChatData>
+    var datasource: ArrayList<ChatData>
+    let scrollerForList = Scroller()
+
+    protected func aboutToAppear() {
+        Logger(TAG).info("About to Appear")
+        ChatListControl().setScrollerForList(this.scrollerForList)
+    }
 
     func build() {
         Column {
-            List(space: 20, initialIndex: 0) {
+            List(space: 20, initialIndex: Int32(this.datasource.size - 1), scroller: this.scrollerForList) {
                 ForEach(
                     this.datasource,
                     itemGeneratorFunc: {
@@ -27,7 +37,7 @@ public class ChatList {
                                 source: item.source,
                             )
                         }
-                    }
+                    },
                 )
             }
         }.height(100.percent).width(100.percent).padding(top: 5.vp)
diff --git a/entry/src/main/cangjie/src/components/chat/ChatMessage.cj b/entry/src/main/cangjie/src/components/chat/ChatMessage.cj
index c9c9d21..33330d1 100644
--- a/entry/src/main/cangjie/src/components/chat/ChatMessage.cj
+++ b/entry/src/main/cangjie/src/components/chat/ChatMessage.cj
@@ -19,6 +19,9 @@ public enum EChatSource {
     }
 }
 
+/**
+ * 只限定UI
+ **/
 @Component
 public class ChatMessage {
     @Prop
diff --git a/entry/src/main/cangjie/src/components/home/HomeBottom.cj b/entry/src/main/cangjie/src/components/home/HomeBottom.cj
index 4cabd5f..c51bf37 100644
--- a/entry/src/main/cangjie/src/components/home/HomeBottom.cj
+++ b/entry/src/main/cangjie/src/components/home/HomeBottom.cj
@@ -7,12 +7,60 @@ internal import ohos.base.*
 internal import ohos.component.*
 internal import ohos.state_manage.*
 import ohos.state_macro_manage.*
+import ohos_app_cangjie_entry.utils.Logger
+import ohos_app_cangjie_entry.store.ChatStore
+import ohos_app_cangjie_entry.types.ChatData
+import ohos_app_cangjie_entry.view_model.ChatListControl
 
 @Component
 public class HomeBottom {
+    let TAG: String = "HomeBottom"
+
+    @State
+    var isPedding: Bool = false
+    @State
+    var inputText: String = ""
+    let inputPlaceHolder: String = "有什么问题尽管问我"
+    let inputController = TextInputController()
+
+    protected func aboutToAppear() {
+        Logger(TAG).info("About to appear.")
+    }
+
+    func submitInput() {
+        if (this.inputText == "") {
+            return
+        }
+
+        if (this.isPedding) {
+            // 处理正在等待的情况
+            return
+        }
+
+        this.isPedding = true
+        ChatStore().add(
+            ChatData(
+                id: ChatStore().genID(),
+                message: this.inputText,
+                source: 'ME',
+            )
+        )
+        this.inputText = ""
+        this.isPedding = false
+        ChatListControl().toBottom()
+    }
+
     func build() {
         Row {
-            Text("HomeBottom")
+            TextInput(
+                text: this.inputText,
+                placeholder: this.inputPlaceHolder,
+                controller: this.inputController,
+            ).onChange {
+                value => this.inputText = value
+            }.onSubmit {
+                _ => this.submitInput()
+            }
         }.width(100.percent)
     }
 }
diff --git a/entry/src/main/cangjie/src/components/home/HomeMain.cj b/entry/src/main/cangjie/src/components/home/HomeMain.cj
index b86e742..9dff581 100644
--- a/entry/src/main/cangjie/src/components/home/HomeMain.cj
+++ b/entry/src/main/cangjie/src/components/home/HomeMain.cj
@@ -6,15 +6,28 @@ package ohos_app_cangjie_entry.components.home
 internal import ohos.base.*
 internal import ohos.component.*
 internal import ohos.state_manage.*
+import ohos_app_cangjie_entry.utils.Logger
 import ohos.state_macro_manage.*
 import ohos_app_cangjie_entry.components.chat.ChatList
 import ohos_app_cangjie_entry.mock.*
 import ohos_app_cangjie_entry.types.ChatData
+import std.collection.*
+import ohos_app_cangjie_entry.store.ChatStore
+import ohos_app_cangjie_entry.view_model.ChatListControl
 
 @Component
 public class HomeMain {
+    let TAG: String = "HomeMain"
     @State
-    var mockData: ObservedArray<ChatData> = ObservedArray<ChatData>(genMockData())
+    var mockData: ArrayList<ChatData> = ChatStore().use()
+    let chatListController = ChatListControl()
+
+    protected func aboutToAppear(): Unit {
+        Logger(TAG).info("About to appear.")
+        ChatStore().register(this.TAG) {
+            this.mockData = ChatStore().use()
+        }
+    }
 
     func build() {
         Column {
diff --git a/entry/src/main/cangjie/src/index.cj b/entry/src/main/cangjie/src/index.cj
index ddb3776..f79c0e5 100644
--- a/entry/src/main/cangjie/src/index.cj
+++ b/entry/src/main/cangjie/src/index.cj
@@ -19,6 +19,6 @@ class MyView {
     func build() {
         Row {
             HomePage()
-        }.height(100.percent).width(100.percent)
+        }.height(100.percent).width(100.percent).backgroundColor(@r(app.color.bg_01))
     }
 }
diff --git a/entry/src/main/cangjie/src/mock/Data.cj b/entry/src/main/cangjie/src/mock/Data.cj
index 546d8d9..f96fcec 100644
--- a/entry/src/main/cangjie/src/mock/Data.cj
+++ b/entry/src/main/cangjie/src/mock/Data.cj
@@ -11,6 +11,7 @@ public func genMockData() {
         20,
         {
             index: Int => ChatData(
+                id: index.toString(),
                 message: "teststesstasdasdasdadasdasdsaesrfsfdfsfdsf",
                 source: getSource(index)
             )
diff --git a/entry/src/main/cangjie/src/pages/HomePage.cj b/entry/src/main/cangjie/src/pages/HomePage.cj
index 4f7de7e..2a421c3 100644
--- a/entry/src/main/cangjie/src/pages/HomePage.cj
+++ b/entry/src/main/cangjie/src/pages/HomePage.cj
@@ -9,16 +9,20 @@ import ohos.state_macro_manage.*
 internal import ohos.component.*
 internal import ohos.state_manage.*
 internal import ohos.base.*
+import ohos_app_cangjie_entry.store.ChatStore
 
 @Component
 public class HomePage {
     private let TAG = "HomePage"
     protected func aboutToAppear() {
+        ChatStore().initStore()
     }
     func build() {
         Column(10) {
             HomeTitle()
-            HomeMain()
+            Column {
+                HomeMain()
+            }.layoutWeight(1)
             HomeBottom()
         }.width(100.percent).height(100.percent)
     }
diff --git a/entry/src/main/cangjie/src/store/ChatStore.cj b/entry/src/main/cangjie/src/store/ChatStore.cj
index 5665048..30bb201 100644
--- a/entry/src/main/cangjie/src/store/ChatStore.cj
+++ b/entry/src/main/cangjie/src/store/ChatStore.cj
@@ -8,17 +8,62 @@ internal import ohos.base.*
 import ohos.state_macro_manage.*
 import ohos_app_cangjie_entry.types.ChatData
 import ohos_app_cangjie_entry.mock.genMockData
+import std.collection.*
+import ohos_app_cangjie_entry.utils.Logger
 
-@Observed
 public class ChatStore {
-    @Publish
-    private var chatDataList: ObservedArray<ChatData> = ObservedArray<ChatData>()
+    private let TAG: String = "ChatStore"
+    private static let chatDataList: ArrayList<ChatData> = ArrayList<ChatData>()
+    private static let observers: HashMap<String, () -> Unit> = HashMap<String, () -> Unit>()
 
-    func initChatStore() {
-        this.chatDataList = ObservedArray<ChatData>(genMockData())
+    public func initStore() {
+        ChatStore.chatDataList.appendAll(genMockData())
     }
 
-    func getChatDataList() {
-        return this.chatDataList
+    public func genID() {
+        return chatDataList.size.toString()
+    }
+
+    public func len() {
+        return chatDataList.size
+    }
+
+    public func use() {
+        return ChatStore.chatDataList.clone()
+    }
+
+    public func resetStore() {
+        ChatStore.chatDataList.clear()
+    }
+
+    public func register(id: String, action: () -> Unit) {
+        if (observers.contains(id)) {
+            Logger(TAG).warn("this id: ${id} is existed.")
+        }
+        ChatStore.observers[id] = action
+        return this
+    }
+
+    public func unregister(id: String) {
+        ChatStore.observers.remove(id)
+        return this
+    }
+
+    public func add(chatData: ChatData) {
+        chatDataList.append(chatData)
+        this.onUpdate()
+        return this
+    }
+
+    public func remove(chatData: ChatData) {
+        chatDataList.removeIf {item => item == chatData}
+        this.onUpdate()
+        return this
+    }
+
+    private func onUpdate() {
+        ChatStore.observers.values().iterator().forEach {
+            action => action()
+        }
     }
 }
diff --git a/entry/src/main/cangjie/src/types/ChatData.cj b/entry/src/main/cangjie/src/types/ChatData.cj
index 296e8f0..722f530 100644
--- a/entry/src/main/cangjie/src/types/ChatData.cj
+++ b/entry/src/main/cangjie/src/types/ChatData.cj
@@ -3,6 +3,12 @@
  */
 package ohos_app_cangjie_entry.types
 
-public struct ChatData {
-    public ChatData(public let message!: String, public let source!: String) {}
+public class ChatData {
+    public ChatData(public let id!: String, public let message!: String, public let source!: String) {}
+
+    public operator func ==(right: ChatData) {
+        return (this.id == right.id
+            && this.message == right.message
+            && this.source == right.source)
+    }
 }
diff --git a/entry/src/main/cangjie/src/utils/Log.cj b/entry/src/main/cangjie/src/utils/Log.cj
index 8ab25f4..4a6ac8e 100644
--- a/entry/src/main/cangjie/src/utils/Log.cj
+++ b/entry/src/main/cangjie/src/utils/Log.cj
@@ -3,16 +3,26 @@
  */
 package ohos_app_cangjie_entry.utils
 
+internal import ohos.base.*
+
 public class Logger {
     private let TAG: String
     public init(TAG: String) {
         this.TAG = TAG + ": "
     }
-    public func debug(msg: String) {}
+    public func debug(msg: String) {
+        AppLog.debug(this.TAG + msg)
+    }
 
-    public func error(msg: String) {}
+    public func error(msg: String) {
+        AppLog.error(this.TAG + msg)
+    }
 
-    public func info(msg: String) {}
+    public func info(msg: String) {
+        AppLog.info(this.TAG + msg)
+    }
 
-    public func warn(msg: String) {}
+    public func warn(msg: String) {
+        AppLog.warn(this.TAG + msg)
+    }
 }
diff --git a/entry/src/main/cangjie/src/view_model/ChatListController.cj b/entry/src/main/cangjie/src/view_model/ChatListController.cj
new file mode 100644
index 0000000..275c318
--- /dev/null
+++ b/entry/src/main/cangjie/src/view_model/ChatListController.cj
@@ -0,0 +1,28 @@
+/**
+ * Created on 2024/9/18
+ */
+package ohos_app_cangjie_entry.view_model
+
+internal import ohos.component.Scroller
+import ohos_app_cangjie_entry.store.ChatStore
+import ohos_app_cangjie_entry.utils.Logger
+
+public class ChatListControl {
+    private let TAG: String = "ChatListControl"
+    private static var scrollerForList: ?Scroller = None
+    private let chatStore = ChatStore()
+
+    public func setScrollerForList(scroller: Scroller) {
+        scrollerForList = scroller
+    }
+
+    public func toBottom(smooth!: Bool = false): Unit {
+        Logger(TAG).info("toBottom")
+        scrollerForList?.scrollToIndex(Int32(this.chatStore.len() - 1), smooth: smooth)
+    }
+
+    public func toTop(smooth!: Bool = false): Unit {
+        Logger(TAG).info("toTop")
+        scrollerForList?.scrollToIndex(0, smooth: smooth)
+    }
+}