diff --git a/src/MatrixClientPeg.js b/src/MatrixClientPeg.js
index 2c22c6b73a..7a14db607a 100644
--- a/src/MatrixClientPeg.js
+++ b/src/MatrixClientPeg.js
@@ -8,6 +8,10 @@ module.exports = {
         return matrixClient;
     },
 
+    replace: function(cli) {
+        matrixClient = cli;
+    },
+
     replaceUsingUrl: function(hs_url) {
         matrixClient = Matrix.createClient(hs_url);
     }
diff --git a/src/dispatcher.js b/src/dispatcher.js
index a8d766f657..3ffefcd11c 100644
--- a/src/dispatcher.js
+++ b/src/dispatcher.js
@@ -1 +1,2 @@
-module.exports = new require("flux").Dispatcher();
+var flux = require("flux");
+module.exports = new flux.Dispatcher();
diff --git a/src/molecules/ServerConfig.js b/src/molecules/ServerConfig.js
index 4b5fbc6493..5a874fa05e 100644
--- a/src/molecules/ServerConfig.js
+++ b/src/molecules/ServerConfig.js
@@ -1,30 +1,60 @@
 var React = require('react');
 
-var MatrixClientPeg = require("../MatrixClientPeg.js");
-
 module.exports = React.createClass({
+    propTypes: {
+        onHsUrlChanged: React.PropTypes.func,
+        onIsUrlChanged: React.PropTypes.func,
+        default_hs_url: React.PropTypes.string,
+        default_is_url: React.PropTypes.string
+    },
+
     getDefaultProps: function() {
         return {
-            default_url: 'https://matrix.org/'
+            onHsUrlChanged: function() {},
+            onIsUrlChanged: function() {},
+            default_hs_url: 'https://matrix.org/',
+            default_is_url: 'https://matrix.org/'
         };
     },
 
     getInitialState: function() {
         return {
-            hs_url: this.props.default_url
+            hs_url: this.props.default_hs_url,
+            is_url: this.props.default_is_url,
         }
     },
 
     hsChanged: function(ev) {
-        this.state.hs_url = ev.target.value;
-        MatrixClientPeg.replaceUsingUrl(this.state.hs_url);
+        this.setState({hs_url: ev.target.value});
+        this.props.onHsUrlChanged(this.state.hs_url);
+    },
+
+    isChanged: function(ev) {
+        this.setState({is_url: ev.target.value});
+        this.props.onIsUrlChanged(this.state.is_url);
+    },
+
+    getHsUrl: function() {
+        return this.state.hs_url;
+    },
+
+    getIsUrl: function() {
+        return this.state.is_url;
     },
 
     render: function() {
         return (
             <div className="HomeServerTextBox">
-                Home Server URL:&nbsp;
-                <input type="text" value={this.state.hs_url} onChange={this.hsChanged} />
+                <table className="serverConfig">
+                <tr>
+                <td>Home Server URL</td>
+                <td><input type="text" value={this.state.hs_url} onChange={this.hsChanged} /></td>
+                </tr>
+                <tr>
+                <td>Identity Server URL</td>
+                <td><input type="text" value={this.state.is_url} onChange={this.isChanged} /></td>
+                </tr>
+                </table>
             </div>
         );
     }
diff --git a/src/organisms/MessageSection.js b/src/organisms/MessageSection.js
index 10d85167b6..ee29a3debf 100644
--- a/src/organisms/MessageSection.js
+++ b/src/organisms/MessageSection.js
@@ -9,15 +9,15 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var messageItems = this.state.messages.map(function(ev) {
+        /*var messageItems = this.state.messages.map(function(ev) {
             return (
                 <Message ev={ev} />
             );
-        });
+        });*/
         return (
+                    //{messageItems}
             <div>
                 <ul className="message-list" ref="messageList">
-                    {messageItems}
                 </ul>
             </div>
         );
diff --git a/src/pages/MatrixChat.js b/src/pages/MatrixChat.js
index 6de89ab9af..04ea1fd22e 100644
--- a/src/pages/MatrixChat.js
+++ b/src/pages/MatrixChat.js
@@ -5,11 +5,30 @@ var MessageSection = require('../organisms/MessageSection');
 
 var Login = require('../templates/Login');
 
-var mxCli = require("../MatrixClientPeg").get();
+var mxCliPeg = require("../MatrixClientPeg");
+
+var dis = require("../dispatcher");
 
 module.exports = React.createClass({
+    getInitialState: function() {
+        return {
+            logged_in: false
+        };
+    },
+
+    componentWillMount: function() {
+        var that = this;
+        this.dispatcherRef = dis.register(function(payload) {
+            switch(payload.action) {
+                case 'logged_in':
+                    that.setState({logged_in: true});
+                    break;
+            }
+        });
+    },
+
     render: function() {
-        if (mxCli && mxCli.credentials) {
+        if (this.state.logged_in) {
             return (
                 <div>
                     <ThreadSection />
diff --git a/src/templates/Login.js b/src/templates/Login.js
index 32069f1246..b4bbc0a579 100644
--- a/src/templates/Login.js
+++ b/src/templates/Login.js
@@ -1,38 +1,107 @@
 var React = require('react');
 var MatrixClientPeg = require("../MatrixClientPeg");
+var Matrix = require("matrix-js-sdk");
 
-var HomeServerTextBox = require("../molecules/HomeServerTextBox");
+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 {
-            step: 'choose_hs'
+            step: 'choose_hs',
+            busy: false,
+            currentStep: 0,
+            totalSteps: 1
         };
     },
 
     setStep: function(step) {
-        this.setState({ step: step });
+        this.setState({ step: step, errorText: '' });
     },
 
     onHSChosen: function(ev) {
+        MatrixClientPeg.replaceUsingUrl(this.refs.serverConfig.getHsUrl());
         this.setStep("fetch_stages");
+        var cli = MatrixClientPeg.get();
+        var that = this;
+        cli.loginFlows().then(function(result) {
+            that.setState({
+                flows: result.flows,
+                currentStep: 1,
+                totalSteps: result.flows.length+1
+            });
+            that.setStep('stage_'+result.flows[0].type);
+        }, function(error) {
+            that.setStep("choose_hs");
+            that.setState({errorText: 'Unable to contact the given Home Server'});
+        });
     },
 
-    render: function() {
-        switch (this.state.step) {
+    onUserPassEntered: function(ev) {
+        var that = this;
+        MatrixClientPeg.get().login('m.login.password', {
+            'user': that.refs.user.getDOMNode().value,
+            'password': that.refs.pass.getDOMNode().value
+        }).then(function(data) {
+            dis.dispatch({
+                'action': 'logged_in'
+            });
+        }, function(error) {
+            that.setStep("stage_m.login.password");
+            that.setState({errorText: 'Login failed.'});
+        });
+    },
+
+    componentForStep: function(step) {
+        switch (step) {
             case 'choose_hs':
                 return (
                     <div>
-                        <div>Please log in:</div>
-                        <HomeServerTextBox />
-                        <button onClick={this.onHSChosen}>Continue</button>
+                        <form onSubmit={this.onHSChosen}>
+                        <ServerConfig ref="serverConfig" />
+                        <input type="submit" value="Continue" />
+                        </form>
                     </div>
                 );
-            case 'fetch_stages':
+            // XXX: clearly these should be separate organisms
+            case 'stage_m.login.password':
                 return (
-                    <Loader />
+                    <div>
+                        <form onSubmit={this.onUserPassEntered}>
+                        <input ref="user" type="text" placeholder="username" /><br />
+                        <input ref="pass" type="password" placeholder="password" /><br />
+                        <input type="submit" value="Log in" />
+                        </form>
+                    </div>
                 );
         }
+    },
+
+    loginContent: function() {
+        if (this.state.busy) {
+            return (
+                <Loader />
+            );
+        } else {
+            return (
+                <div>
+                    <h1>Please log in:</h1>
+                    {this.componentForStep(this.state.step)}
+                    <div className="error">{this.state.errorText}</div>
+                </div>
+            );
+        }
+    },
+
+    render: function() {
+        return (
+            <div className="mx_Login">
+            <ProgressBar value={this.state.currentStep} max={this.state.totalSteps} />
+            {this.loginContent()}
+            </div>
+        );
     }
 });