diff --git a/css/molecules/RoomHeader.css b/css/molecules/RoomHeader.css
new file mode 100644
index 000000000..a395337d0
--- /dev/null
+++ b/css/molecules/RoomHeader.css
@@ -0,0 +1,6 @@
+.mx_RoomHeader {
+    background-color: #eee;
+    font-weight: bold;
+    height: 1em;
+    padding: 5px;
+}
diff --git a/css/molecules/RoomTile.css b/css/molecules/RoomTile.css
index e50ab7b04..7b0aa8f83 100644
--- a/css/molecules/RoomTile.css
+++ b/css/molecules/RoomTile.css
@@ -5,6 +5,17 @@
     margin-top: 1px;
     margin-bottom: 1px;
     padding: 5px;
+    cursor: pointer;
+    border: 2px solid white;
+    transition: background-color 0.1s ease;
+}
+
+.mx_RoomTile.selected {
+    border: 2px inset #eee;
+}
+
+.mx_RoomTile:hover {
+    background-color: #aad;
 }
 
 .mx_RoomTile_name {
diff --git a/css/organisms/RoomList.css b/css/organisms/RoomList.css
index 40d375269..b3a739be8 100644
--- a/css/organisms/RoomList.css
+++ b/css/organisms/RoomList.css
@@ -1,3 +1,8 @@
+.mx_RoomList {
+    display: table-row;
+}
+
 .mx_RoomList ul {
     padding: 0px;
+    margin: 0px;
 }
diff --git a/css/organisms/RoomView.css b/css/organisms/RoomView.css
new file mode 100644
index 000000000..35f935b01
--- /dev/null
+++ b/css/organisms/RoomView.css
@@ -0,0 +1,9 @@
+.mx_RoomView {
+    display: table-cell;
+    padding-left: 5px;
+    width: 100%;
+}
+
+.mx_RoomView ul {
+    padding: 0px;
+}
diff --git a/css/pages/MatrixChat.css b/css/pages/MatrixChat.css
new file mode 100644
index 000000000..da89f9d31
--- /dev/null
+++ b/css/pages/MatrixChat.css
@@ -0,0 +1,3 @@
+.mx_MatrixChat_leftPanel {
+    display: table-cell;
+}
diff --git a/package.json b/package.json
index fdb88aca6..1443c9142 100644
--- a/package.json
+++ b/package.json
@@ -18,10 +18,11 @@
     "start": "parallelshell 'npm run start:js' 'npm run start:css'"
   },
   "dependencies": {
-    "react-loader": "^1.4.0",
+    "classnames": "^2.1.2",
     "flux": "^2.0.3",
     "matrix-js-sdk": "0.0.4",
-    "react": "^0.13.0"
+    "react": "^0.13.0",
+    "react-loader": "^1.4.0"
   },
   "devDependencies": {
     "catw": "^1.0.1",
diff --git a/src/atoms/LogoutButton.js b/src/atoms/LogoutButton.js
new file mode 100644
index 000000000..33abaf2c7
--- /dev/null
+++ b/src/atoms/LogoutButton.js
@@ -0,0 +1,19 @@
+var React = require('react');
+
+var mxCliPeg = require("../MatrixClientPeg");
+
+var dis = require("../dispatcher");
+
+module.exports = React.createClass({
+    onClick: function() {
+        dis.dispatch({
+            action: 'logout'
+        });
+    },
+
+    render: function() {
+        return (
+            <button className="mx_LogoutButton" onClick={this.onClick}>Sign out</button>
+        );
+    }
+});
diff --git a/src/molecules/MatrixToolbar.js b/src/molecules/MatrixToolbar.js
new file mode 100644
index 000000000..e6b336aa1
--- /dev/null
+++ b/src/molecules/MatrixToolbar.js
@@ -0,0 +1,14 @@
+var React = require('react');
+
+var LogoutButton = require("../atoms/LogoutButton");
+
+module.exports = React.createClass({
+    render: function() {
+        return (
+            <div className="mx_MatrixToolbar">
+                <LogoutButton />
+            </div>
+        );
+    }
+});
+
diff --git a/src/molecules/MessageTile.js b/src/molecules/MessageTile.js
new file mode 100644
index 000000000..0ae6c02ae
--- /dev/null
+++ b/src/molecules/MessageTile.js
@@ -0,0 +1,13 @@
+var React = require('react');
+
+module.exports = React.createClass({
+    render: function() {
+                //{this.props.mxEvent.getContent().body}
+        return (
+            <div className="mx_MessageTile">
+                {JSON.stringify(this.props.mxEvent.getContent())}
+            </div>
+        );
+    },
+});
+
diff --git a/src/molecules/Message.js b/src/molecules/RoomHeader.js
similarity index 64%
rename from src/molecules/Message.js
rename to src/molecules/RoomHeader.js
index ffe3113f4..4d7850b23 100644
--- a/src/molecules/Message.js
+++ b/src/molecules/RoomHeader.js
@@ -3,8 +3,8 @@ var React = require('react');
 module.exports = React.createClass({
     render: function() {
         return (
-            <div>
-                {this.props.event.content.body}
+            <div className="mx_RoomHeader">
+                {this.props.room.name}
             </div>
         );
     },
diff --git a/src/molecules/RoomTile.js b/src/molecules/RoomTile.js
index 09a781abd..9d7572634 100644
--- a/src/molecules/RoomTile.js
+++ b/src/molecules/RoomTile.js
@@ -1,9 +1,23 @@
 var React = require('react');
+var classNames = require('classnames');
+
+var dis = require("../dispatcher");
 
 module.exports = React.createClass({
+    onClick: function() {
+        dis.dispatch({
+            action: 'view_room',
+            room_id: this.props.room.roomId
+        });
+    },
+
     render: function() {
+        var classes = classNames({
+            'mx_RoomTile': true,
+            'selected': this.props.selected
+        });
         return (
-            <div className="mx_RoomTile">
+            <div className={classes} onClick={this.onClick}>
                 <div className="mx_RoomTile_name">{this.props.room.name}</div>
             </div>
         );
diff --git a/src/organisms/RoomList.js b/src/organisms/RoomList.js
index a2d18ac22..56b075083 100644
--- a/src/organisms/RoomList.js
+++ b/src/organisms/RoomList.js
@@ -12,9 +12,11 @@ module.exports = React.createClass({
     },
 
     makeRoomTiles: function() {
+        var that = this;
         return this.state.roomList.map(function(room) {
+            var selected = room.roomId == that.props.selectedRoom;
             return (
-                <RoomTile room={room} key={room.roomId} />
+                <RoomTile room={room} key={room.roomId} selected={selected} />
             );
         });
     },
diff --git a/src/organisms/RoomView.js b/src/organisms/RoomView.js
index ee29a3deb..5f35ccfb3 100644
--- a/src/organisms/RoomView.js
+++ b/src/organisms/RoomView.js
@@ -1,23 +1,30 @@
 var React = require('react');
-var Message = require('../molecules/Message');
+var MessageTile = require('../molecules/MessageTile');
+var RoomHeader = require('../molecules/RoomHeader');
+
+var MatrixClientPeg = require("../MatrixClientPeg");
 
 module.exports = React.createClass({
     getInitialState: function() {
         return {
-            messages: [ { foo: "bar"} ]
+            room: MatrixClientPeg.get().getRoom(this.props.room_id)
         }
     },
 
-    render: function() {
-        /*var messageItems = this.state.messages.map(function(ev) {
+    getMessageTiles: function() {
+        return this.state.room.timeline.map(function(mxEv) {
             return (
-                <Message ev={ev} />
+                <MessageTile mxEvent={mxEv} key={mxEv.getId()} />
             );
-        });*/
+        });
+    },
+
+    render: function() {
         return (
-                    //{messageItems}
-            <div>
-                <ul className="message-list" ref="messageList">
+            <div className="mx_RoomView">
+                <RoomHeader room={this.state.room} />
+                <ul>
+                    {this.getMessageTiles()}
                 </ul>
             </div>
         );
diff --git a/src/pages/MatrixChat.js b/src/pages/MatrixChat.js
index 0e437a5d1..9eb8f14ff 100644
--- a/src/pages/MatrixChat.js
+++ b/src/pages/MatrixChat.js
@@ -2,13 +2,14 @@ var React = require('react');
 
 var RoomList = require('../organisms/RoomList');
 var RoomView = require('../organisms/RoomView');
+var MatrixToolbar = require('../molecules/MatrixToolbar');
 var Loader = require("react-loader");
 
 var Login = require('../templates/Login');
 
 var mxCliPeg = require("../MatrixClientPeg");
 
-//var dis = require("../dispatcher");
+var dis = require("../dispatcher");
 
 module.exports = React.createClass({
     getInitialState: function() {
@@ -19,11 +20,28 @@ module.exports = React.createClass({
     },
 
     componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
         if (this.state.logged_in) {
             this.startMatrixClient();
         }
     },
 
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+    },
+
+    onAction: function(payload) {
+        switch (payload.action) {
+            case 'logout':
+                mxCliPeg.replace(null);
+                this.setState({
+                    logged_in: false,
+                    ready: false
+                });
+                break;
+        }
+    },
+
     onLoggedIn: function() {
         this.setState({logged_in: true});
         this.startMatrixClient();
@@ -33,7 +51,11 @@ module.exports = React.createClass({
         var cli = mxCliPeg.get();
         var that = this;
         cli.on('syncComplete', function() {
-            that.setState({ready: true});
+            var firstRoom = null;
+            if (cli.getRooms() && cli.getRooms().length) {
+                firstRoom = cli.getRooms()[0].roomId;
+            }
+            that.setState({ready: true, currentRoom: firstRoom});
         });
         cli.startClient();
     },
@@ -42,8 +64,11 @@ module.exports = React.createClass({
         if (this.state.logged_in && this.state.ready) {
             return (
                 <div>
-                    <RoomList />
-                    <RoomView />
+                    <div className="mx_MatrixChat_leftPanel">
+                        <MatrixToolbar />
+                        <RoomList selectedRoom={this.state.currentRoom} />
+                    </div>
+                    <RoomView room_id={this.state.currentRoom} />
                 </div>
             );
         } else if (this.state.logged_in) {
diff --git a/src/templates/Login.js b/src/templates/Login.js
index 0700a3d0b..62c09ace7 100644
--- a/src/templates/Login.js
+++ b/src/templates/Login.js
@@ -6,8 +6,6 @@ var ServerConfig = require("../molecules/ServerConfig");
 var ProgressBar = require("../molecules/ProgressBar");
 var Loader = require("react-loader");
 
-//var dis = require("../dispatcher");
-
 module.exports = React.createClass({
     getInitialState: function() {
         return {