diff --git a/clientapp/helpers/xmppEventHandlers.js b/clientapp/helpers/xmppEventHandlers.js
index 4c0c13e..63cfbff 100644
--- a/clientapp/helpers/xmppEventHandlers.js
+++ b/clientapp/helpers/xmppEventHandlers.js
@@ -337,14 +337,20 @@ module.exports = function (client, app) {
 
     client.on('jingle:incoming', function (session) {
         var contact = me.getContact(session.peer);
-        contact.callState = 'incomingCall';
-        contact.jingleCall = session;
+        me.calls.add({
+            contact: contact,
+            state: 'incoming',
+            jingleSession: session
+        });
     });
 
     client.on('jingle:outgoing', function (session) {
         var contact = me.getContact(session.peer);
-        contact.callState = 'outgoingCall';
-        contact.jingleCall = session;
+        me.calls.add({
+            contact: contact,
+            state: 'outgoing',
+            jingleSession: session
+        });
     });
 
     client.on('jingle:terminated', function (session) {
diff --git a/clientapp/models/me.js b/clientapp/models/me.js
index 628ff55..1437c0a 100644
--- a/clientapp/models/me.js
+++ b/clientapp/models/me.js
@@ -72,7 +72,9 @@ module.exports = HumanModel.define({
         if (this.isMe(jid)) {
             jid = alt || jid;
         }
-        return this.contacts.get(jid.bare) || this.mucs.get(jid.bare) || undefined;
+        return this.contacts.get(jid.bare) ||
+            this.mucs.get(jid.bare) ||
+            this.calls.findWhere('jid', jid);
     },
     setContact: function (data, create) {
         var contact = this.getContact(data.jid);
diff --git a/clientapp/templates.js b/clientapp/templates.js
index c0c8570..3e41133 100644
--- a/clientapp/templates.js
+++ b/clientapp/templates.js
@@ -46,7 +46,7 @@ exports.includes.bareMessage = function anonymous(locals) {
 exports.includes.call = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<div class="call"><img class="callerAvatar"/><h1 class="caller"><span class="callerName"></span><span class="callerNumber"></span></h1><h2 class="callTime"></h2><div class="callActions"><button class="answer">Answer</button><button class="ignore">Ignore</button><button class="cancel">Cancel</button><button class="end">End</button><button class="mute">Mute</button></div></div>');
+        buf.push('<div class="call"><img class="callerAvatar"/><h1 class="caller"><span class="callerName"></span><span class="callerNumber"></span></h1><h2 class="callTime"></h2><div class="callActions"><button class="answer">Answer</button><button class="ignore">Ignore</button><button class="cancel">Cancel</button><button class="end">End</button><button class="mute">Mute</button><button class="unmute">Unmute</button></div></div>');
     }
     return buf.join("");
 };
diff --git a/clientapp/templates/includes/call.jade b/clientapp/templates/includes/call.jade
index 94a0da1..a179c96 100644
--- a/clientapp/templates/includes/call.jade
+++ b/clientapp/templates/includes/call.jade
@@ -10,3 +10,4 @@
     button.cancel Cancel
     button.end End
     button.mute Mute
+    button.unmute Unmute
diff --git a/clientapp/views/call.js b/clientapp/views/call.js
index 397af17..a399242 100644
--- a/clientapp/views/call.js
+++ b/clientapp/views/call.js
@@ -11,6 +11,13 @@ module.exports = HumanView.extend({
     classBindings: {
         state: ''
     },
+    events: {
+        'click .answer': 'handleAnswerClick',
+        'click .ignore': 'handleIgnoreClick',
+        'click .cancel': 'handleCancelClick',
+        'click .end': 'handleEndClick',
+        'click .mute': 'handleMuteClick'
+    },
     render: function () {
         this.renderAndBind();
         // register bindings for sub model
@@ -22,7 +29,52 @@ module.exports = HumanView.extend({
                 avatar: '.callerAvatar'
             }
         });
+        this.$buttons = this.$('button');
+        this.listenToAndRun(this.model, 'change:state', this.handleCallStateChange);
 
         return this;
+    },
+    handleAnswerClick: function (e) {
+
+        return false;
+    },
+    handleIgnoreClick: function (e) {
+
+        return false;
+    },
+    handleCancelClick: function (e) {
+
+        return false;
+    },
+    handleEndClick: function (e) {
+
+        return false;
+    },
+    handleMuteClick: function (e) {
+
+        return false;
+    },
+    // we want to make sure we show the appropriate buttons
+    // when in various stages of the call
+    handleCallStateChange: function (model, callState) {
+        var state = callState || this.model.state;
+        // hide all
+        this.$buttons.hide();
+
+        var map = {
+            incoming: '.ignore, .answer',
+            outgoing: '.cancel',
+            accepted: '.end, .mute',
+            terminated: '',
+            ringing: '.cancel',
+            mute: '.end, .unmute',
+            unmute: '.end, .mute',
+            //hold: '',
+            //resumed: ''
+        };
+
+        console.log('map[state]', map[state]);
+
+        this.$(map[state]).show();
     }
 });
diff --git a/public/css/app/callbar.styl b/public/css/app/callbar.styl
index 164fe8f..cf8dc56 100644
--- a/public/css/app/callbar.styl
+++ b/public/css/app/callbar.styl
@@ -33,7 +33,7 @@ $callHeight = 80px
       .callTime
         display: none
       .callerName:before
-        content: "Incoming: "
+        content: "Incoming Call: "
 
     &.waiting
       background: $activeBlue
@@ -42,34 +42,26 @@ $callHeight = 80px
         background-color: #fff
 
     &.calling
-      callbar($blue)
+      background: $activeBlue
       .callTime
         display: none
       .callerName:before
         content: "Calling: "
 
-    &.active
-      callbar($green)
+    &.accepted
+      background: $sidebarActive
       .callerName:before
         content: "On Call: "
 
-    &.inactive
-      callbar(#fff)
-
-    &.remote
-      callbar($blue  #333)    
-      .callTime
-        display: none
-
     &.ending
       .callerName:before
         content: "Call ending with: "
-      callbar($grey)
+      background: $grayBackground
       
     .callActions
       position: absolute
-      left: 10px
-      top: 50px
+      left: 80px
+      top: 38px
       display: block
       width: 100%
 
@@ -104,10 +96,10 @@ $callHeight = 80px
 
   .callerAvatar
     float: left
-    width: 50px
-    height: 50px
-    margin-right: 10px
-    roundall(25px)
+    width: 60px
+    height: 60px
+    margin: 10px
+    roundall(30px)
     
   .callerName, .callTime  
     font-weight: bold
@@ -117,9 +109,9 @@ $callHeight = 80px
 
   .caller
     margin: 0
+    padding: 5px 0 0 0
     font-size: 20px
     padding-bottom: 0px
-    border-bottom: 2px groove rgba(255,255,255,.4)
 
   .callerName
     display: inline
diff --git a/public/css/otalk.css b/public/css/otalk.css
index 6e0b9d3..ebafa1f 100644
--- a/public/css/otalk.css
+++ b/public/css/otalk.css
@@ -1092,7 +1092,7 @@ a.button:hover {
   display: none;
 }
 #calls .call.incoming .callerName:before {
-  content: "Incoming: ";
+  content: "Incoming Call: ";
 }
 #calls .call.waiting {
   background: #00aeef;
@@ -1100,25 +1100,31 @@ a.button:hover {
 #calls .call.waiting .spinner div {
   background-color: #fff;
 }
+#calls .call.calling {
+  background: #00aeef;
+}
 #calls .call.calling .callTime {
   display: none;
 }
 #calls .call.calling .callerName:before {
   content: "Calling: ";
 }
-#calls .call.active .callerName:before {
+#calls .call.accepted {
+  background: #1f2d49;
+}
+#calls .call.accepted .callerName:before {
   content: "On Call: ";
 }
-#calls .call.remote .callTime {
-  display: none;
+#calls .call.ending {
+  background: #f7f7f7;
 }
 #calls .call.ending .callerName:before {
   content: "Call ending with: ";
 }
 #calls .call .callActions {
   position: absolute;
-  left: 10px;
-  top: 50px;
+  left: 80px;
+  top: 38px;
   display: block;
   width: 100%;
 }
@@ -1161,15 +1167,15 @@ rgba(0,0,0,0.2)
 }
 #calls .callerAvatar {
   float: left;
-  width: 50px;
-  height: 50px;
-  margin-right: 10px;
-  -moz-border-radius: 25px;
-  -webkit-border-radius: 25px;
-  -khtml-border-radius: 25px;
-  -o-border-radius: 25px;
-  -border-radius: 25px;
-  border-radius: 25px;
+  width: 60px;
+  height: 60px;
+  margin: 10px;
+  -moz-border-radius: 30px;
+  -webkit-border-radius: 30px;
+  -khtml-border-radius: 30px;
+  -o-border-radius: 30px;
+  -border-radius: 30px;
+  border-radius: 30px;
 }
 #calls .callerName,
 #calls .callTime {
@@ -1180,9 +1186,9 @@ rgba(0,0,0,0.7)
 }
 #calls .caller {
   margin: 0;
+  padding: 5px 0 0 0;
   font-size: 20px;
   padding-bottom: 0px;
-  border-bottom: 2px groove rgba(255,255,255,0.4);
 }
 #calls .callerName {
   display: inline;
diff --git a/public/x-manifest.cache b/public/x-manifest.cache
index 0452612..b806d1e 100644
--- a/public/x-manifest.cache
+++ b/public/x-manifest.cache
@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1381879352769
+# 0.0.1 1381889614306
 
 CACHE:
 /app.js