diff --git a/src/HomePage.js b/src/HomePage.js
index 0a08e7b..9aa9b68 100644
--- a/src/HomePage.js
+++ b/src/HomePage.js
@@ -3,7 +3,7 @@ import {MessageList, MessageRow, MessageInput} from './MesaageBox';
 import Login from './Login';
 import feed from './feed-socketio';
 import UserList from './UserList';
-
+import RoomList from './RoomList';
 export default class HomePage extends Component {
   constructor(props) {
     super(props);
@@ -11,10 +11,12 @@ export default class HomePage extends Component {
     this.state = {
       msgs: msgs,
       userName: '',
-      userList: []
+      userList: [],
+      RoomList: ["123","456"],
     };
     this._sendMsg = this._sendMsg.bind(this);
     this._handleLogin = this._handleLogin.bind(this);
+    this._addRoom = this._addRoom.bind(this);
   }
   componentDidMount() {
     let _self = this;
@@ -23,6 +25,10 @@ export default class HomePage extends Component {
         userName: msg
       });
     });
+    feed.watchRoomList(RoomList => {
+        console.log(RoomList);
+      _self.setState({RoomList: RoomList});
+    });
     feed.watchChat(msg => {
       let msgs = _self.state.msgs;
       msgs.push(msg);
@@ -32,6 +38,15 @@ export default class HomePage extends Component {
       _self.setState({userList: userList});
     });
   }
+  _addRoom(roomName) {
+     feed.addRoom(roomName);
+   }
+   _RoomList(){
+     feed.watchRoomList(RoomList => {
+           console.log(RoomList);
+         this.setState({RoomList: RoomList});
+      });
+  }
   _sendMsg(msg) {
     feed.sendMsg(msg);
   }
@@ -43,6 +58,7 @@ export default class HomePage extends Component {
     var rows = userName && userName.length > 0 ? (
       <div>
         <MessageList msgs={this.state.msgs} />
+        <RoomList RoomList={this.state.RoomList} _addRoom={this._addRoom}/>
         <UserList userList={this.state.userList} />
         <MessageInput sendMessage={this._sendMsg}/>
       </div>
diff --git a/src/RoomList.js b/src/RoomList.js
new file mode 100644
index 0000000..d0abe40
--- /dev/null
+++ b/src/RoomList.js
@@ -0,0 +1,47 @@
+import React, {Component} from 'react';
+
+var divStyle = {
+  color: 'white'
+};
+
+export default class RoomList extends Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        input: ''
+      };
+      this._handleChange = this._handleChange.bind(this);
+      this._onClickAddRoom = this._onClickAddRoom.bind(this);
+    }
+    _onClickAddRoom () {
+        var addRoom = this.state.input.trim();
+        this.props._addRoom(addRoom);
+    }
+    _handleChange(e) {
+      this.setState({
+        input: e.currentTarget.value
+      });
+    }
+    render() {
+        return (
+        <div id="RoomListBox">
+            <input
+            type="text"
+            value={this.state.input}
+            onChange={this._handleChange}/>
+            <button onClick={this._onClickAddRoom}>add Room</button>
+            <ul>
+            {
+                this.props.RoomList.map((result,index) => {
+                    return <li key={index}>
+                        <a href="#" title={result}>
+                            {result}
+                        </a>
+                    </li>;
+                })
+            }
+            </ul>
+        </div>
+        );
+    }
+}