diff --git a/skins/base/views/molecules/RoomHeader.js b/skins/base/views/molecules/RoomHeader.js
index e64aee538..1708bd1c3 100644
--- a/skins/base/views/molecules/RoomHeader.js
+++ b/skins/base/views/molecules/RoomHeader.js
@@ -32,8 +32,8 @@ module.exports = React.createClass({
 
         var callButtons;
         if (this.state) {
-            switch (this.state.callState) {
-                case "INBOUND":
+            switch (this.state.call_state) {
+                case "ringing":
                     callButtons = (
                         <div>
                         <div className="mx_RoomHeader_button" onClick={this.onAnswerClick}>
@@ -45,14 +45,8 @@ module.exports = React.createClass({
                         </div>
                     );
                     break;
-                case "OUTBOUND":
-                    callButtons = (
-                        <div className="mx_RoomHeader_button" onClick={this.onHangupClick}>
-                        BYEBYE
-                        </div>
-                    );
-                    break;
-                case "IN_CALL":
+                case "ringback":
+                case "connected":
                     callButtons = (
                         <div className="mx_RoomHeader_button" onClick={this.onHangupClick}>
                         BYEBYE
diff --git a/src/CallHandler.js b/src/CallHandler.js
index d6367a6bf..029b89174 100644
--- a/src/CallHandler.js
+++ b/src/CallHandler.js
@@ -22,7 +22,8 @@ limitations under the License.
  * This handler dispatches when voip calls are added/updated/removed from this list:
  * {
  *   action: 'call_state'
- *   room_id: <room ID of the call>
+ *   room_id: <room ID of the call>,
+ *   status: ringing|ringback|connected|ended|busy|stop_ringback|stop_ringing
  * }
  *
  * To know if the call was added/removed, this handler exposes a getter to
@@ -33,8 +34,6 @@ limitations under the License.
  * {
  *   action: 'place_call',
  *   type: 'voice|video',
- *   remote_element: DOMVideoElement, // only if type: video
- *   local_element: DOMVideoElement,  // only if type: video
  *   room_id: <room that the place call button was pressed in>
  * }
  *
@@ -67,19 +66,51 @@ function _setCallListeners(call) {
         console.error("Call error: %s", err);
         console.error(err.stack);
         call.hangup();
-        _setCallState(undefined, call.roomId);
+        _setCallState(undefined, call.roomId, "ended");
     });
     call.on("hangup", function() {
-        _setCallState(undefined, call.roomId);
+        _setCallState(undefined, call.roomId, "ended");
+    });
+    // map web rtc states to dummy UI state
+    // ringing|ringback|connected|ended|busy|stop_ringback|stop_ringing
+    call.on("state", function(newState, oldState) {
+        if (newState === "ringing") {
+            _setCallState(call, call.roomId, "ringing");
+        }
+        else if (newState === "invite_sent") {
+            _setCallState(call, call.roomId, "ringback");
+        }
+        else if (newState === "ended" && oldState === "connected") {
+            _setCallState(call, call.roomId, "ended");
+        }
+        else if (newState === "ended" && oldState === "invite_sent" &&
+                (call.hangupParty === "remote" ||
+                (call.hangupParty === "local" && call.hangupReason === "invite_timeout")
+                )) {
+            _setCallState(call, call.roomId, "busy");
+        }
+        else if (oldState === "invite_sent") {
+            _setCallState(call, call.roomId, "stop_ringback");
+        }
+        else if (oldState === "ringing") {
+            _setCallState(call, call.roomId, "stop_ringing");
+        }
+        else if (newState === "connected") {
+            _setCallState(call, call.roomId, "connected");
+        }
     });
 }
 
-function _setCallState(call, roomId) {
-    console.log("_setState >>> %s >>> %s ", call, roomId);
+function _setCallState(call, roomId, status) {
+    console.log("_setState >>> %s >>> %s >> %s", call, roomId, status);
     calls[roomId] = call;
+    if (call) {
+        call.call_state = status;
+    }
     dis.dispatch({
         action: 'call_state',
-        room_id: roomId
+        room_id: roomId,
+        status: status
     });
 }
 
@@ -94,7 +125,7 @@ dis.register(function(payload) {
                 MatrixClientPeg.get(), payload.room_id
             );
             _setCallListeners(call);
-            _setCallState(call, call.roomId);
+            _setCallState(call, call.roomId, "ringback");
             if (payload.type === 'voice') {
                 call.placeVoiceCall();
             }
@@ -116,21 +147,21 @@ dis.register(function(payload) {
             }
             var call = payload.call;
             _setCallListeners(call);
-            _setCallState(call, call.roomId);
+            _setCallState(call, call.roomId, "ringing");
             break;
         case 'hangup':
             if (!calls[payload.room_id]) {
                 return; // no call to hangup
             }
             calls[payload.room_id].hangup();
-            _setCallState(null, payload.room_id);
+            _setCallState(null, payload.room_id, "ended");
             break;
         case 'answer':
             if (!calls[payload.room_id]) {
                 return; // no call to answer
             }
             calls[payload.room_id].answer();
-            _setCallState(calls[payload.room_id], payload.room_id);
+            _setCallState(calls[payload.room_id], payload.room_id, "connected");
             break;
     }
 });
diff --git a/src/controllers/molecules/RoomHeader.js b/src/controllers/molecules/RoomHeader.js
index b66d1ff90..766f9b40d 100644
--- a/src/controllers/molecules/RoomHeader.js
+++ b/src/controllers/molecules/RoomHeader.js
@@ -25,40 +25,16 @@ var dis = require("../../dispatcher");
 var CallHandler = require("../../CallHandler");
 
 module.exports = {
-    _setCallState: function(call) {
-        if (!call) {
-            this.setState({
-                callState: "NO_CALL"
-            });
-            return;
-        }
-        var callState = 'NO_CALL';
-        if (call.state !== 'ended') {
-            if (call.state === 'connected') {
-                callState = "IN_CALL";
-            }
-            else if (call.direction === 'outbound') {
-                callState = "OUTBOUND";
-            }
-            else if (call.direction === 'inbound') {
-                callState = "INBOUND";
-            }
-            else {
-                console.error("Cannot determine call state.");
-            }
-        }
-        this.setState({
-            callState: callState
-        });
-    },
 
     componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
-        var call;
         if (this.props.room) {
-            call = CallHandler.getCall(this.props.room.roomId);
+            var call = CallHandler.getCall(this.props.room.roomId);
+            var callState = call ? call.call_state : "ended";
+            this.setState({
+                call_state: callState
+            });
         }
-        this._setCallState(call);
     },
 
     componentWillUnmount: function() {
@@ -75,7 +51,10 @@ module.exports = {
             return;
         }
         var call = CallHandler.getCall(payload.room_id);
-        this._setCallState(call);
+        var callState = call ? call.call_state : "ended";
+        this.setState({
+            call_state: callState
+        });
     },
 
     onVideoClick: function() {