diff --git a/frontend/src/Metamaps/Views/ChatView.js b/frontend/src/Metamaps/Views/ChatView.js
index f8baf54a..76b3c7d3 100644
--- a/frontend/src/Metamaps/Views/ChatView.js
+++ b/frontend/src/Metamaps/Views/ChatView.js
@@ -10,6 +10,7 @@ import ReactDOM from 'react-dom'
 // TODO is this line good or bad
 // Backbone.$ = window.$
 
+import Realtime from '../Realtime'
 import MapChat from '../../components/MapChat'
 
 const linker = new Autolinker({ newWindow: true, truncate: 50, email: false, phone: false })
@@ -68,12 +69,12 @@ const ChatView = {
   render: () => {
     const self = ChatView
     ReactDOM.render(React.createElement(MapChat, {
-      show: self.show,
-      leaveCall: Realtime.leaveCall(),
-      joinCall: Realtime.joinCall(),
+      isOpen: self.isOpen,
+      leaveCall: Realtime.leaveCall,
+      joinCall: Realtime.joinCall,
       participants: self.participants,
       unreadMessages: self.unreadMessages
-    }))
+    }), document.getElementById('chat-box-wrapper'))
   },
   show: () => {
     ChatView.show = true
@@ -127,6 +128,26 @@ const ChatView = {
     // TODO set textarea to be empty in react
     $(document).trigger(ChatView.events.message + '-' + this.room, [{ message: text }])
   },
+  leaveConversation: () => {
+    // TODO refactor
+    // this.$participants.removeClass('is-participating')
+  },
+  mapperJoinedCall: () => {
+    // TODO refactor
+    // this.$participants.find('.participant-' + id).addClass('active')
+  },
+  mapperLeftCall: () => {
+    // TODO refactor
+    // this.$participants.find('.participant-' + id).removeClass('active')
+  },
+  invitationPending: () => {
+    // TODO refactor
+    // this.$participants.find('.participant-' + id).addClass('pending')
+  },
+  invitationAnswered: () => {
+    // TODO refactor
+    // this.$participants.find('.participant-' + id).removeClass('pending')
+  }
 }
 
 var Handlers = {
@@ -163,101 +184,82 @@ var Handlers = {
   }
 }
 
-ChatView.prototype.conversationInProgress = function(participating) {
-  this.$conversationInProgress.show()
-  this.$participants.addClass('is-live')
-  if (participating) this.$participants.addClass('is-participating')
-  this.$button.addClass('active')
-}
+// ChatView.prototype.conversationInProgress = function(participating) {
+//   this.$conversationInProgress.show()
+//   this.$participants.addClass('is-live')
+//   if (participating) this.$participants.addClass('is-participating')
+//   this.$button.addClass('active')
+// }
 
-ChatView.prototype.conversationEnded = function() {
-  this.$conversationInProgress.hide()
-  this.$participants.removeClass('is-live')
-  this.$participants.removeClass('is-participating')
-  this.$button.removeClass('active')
-  this.$participants.find('.participant').removeClass('active')
-  this.$participants.find('.participant').removeClass('pending')
-}
+// ChatView.prototype.conversationEnded = function() {
+//   this.$conversationInProgress.hide()
+//   this.$participants.removeClass('is-live')
+//   this.$participants.removeClass('is-participating')
+//   this.$button.removeClass('active')
+//   this.$participants.find('.participant').removeClass('active')
+//   this.$participants.find('.participant').removeClass('pending')
+// }
 
-ChatView.prototype.leaveConversation = function() {
-  this.$participants.removeClass('is-participating')
-}
 
-ChatView.prototype.mapperJoinedCall = function(id) {
-  this.$participants.find('.participant-' + id).addClass('active')
-}
+// ChatView.prototype.addParticipant = function(participant) {
+//   this.participants.add(participant)
+// }
 
-ChatView.prototype.mapperLeftCall = function(id) {
-  this.$participants.find('.participant-' + id).removeClass('active')
-}
+// ChatView.prototype.removeParticipant = function(username) {
+//   var p = this.participants.find(p => p.get('username') === username)
+//   if (p) {
+//     this.participants.remove(p)
+//   }
+// }
 
-ChatView.prototype.invitationPending = function(id) {
-  this.$participants.find('.participant-' + id).addClass('pending')
-}
+// ChatView.prototype.removeParticipants = function() {
+//   this.participants.remove(this.participants.models)
+// }
 
-ChatView.prototype.invitationAnswered = function(id) {
-  this.$participants.find('.participant-' + id).removeClass('pending')
-}
+// ChatView.prototype.open = function() {
+//   this.$container.css({
+//     right: '0'
+//   })
+//   this.$messageInput.focus()
+//   this.isOpen = true
+//   this.unreadMessages = 0
+//   this.$unread.hide()
+//   this.scrollMessages(0)
+//   $(document).trigger(ChatView.events.openTray)
+// }
 
-ChatView.prototype.addParticipant = function(participant) {
-  this.participants.add(participant)
-}
+// ChatView.prototype.addMessage = function(message, isInitial, wasMe) {
+//   this.messages.add(message)
+//   Private.addMessage.call(this, message, isInitial, wasMe)
+// }
+//
+// ChatView.prototype.scrollMessages = function(duration) {
+//   duration = duration || 0
 
-ChatView.prototype.removeParticipant = function(username) {
-  var p = this.participants.find(p => p.get('username') === username)
-  if (p) {
-    this.participants.remove(p)
-  }
-}
+//   this.$messages.animate({
+//     scrollTop: this.$messages[0].scrollHeight
+//   }, duration)
+// }
 
-ChatView.prototype.removeParticipants = function() {
-  this.participants.remove(this.participants.models)
-}
+// ChatView.prototype.clearMessages = function() {
+//   this.unreadMessages = 0
+//   this.$unread.hide()
+//   this.$messages.empty()
+// }
 
-ChatView.prototype.open = function() {
-  this.$container.css({
-    right: '0'
-  })
-  this.$messageInput.focus()
-  this.isOpen = true
-  this.unreadMessages = 0
-  this.$unread.hide()
-  this.scrollMessages(0)
-  $(document).trigger(ChatView.events.openTray)
-}
+// ChatView.prototype.close = function() {
+//   this.$container.css({
+//     right: '-300px'
+//   })
+//   this.$messageInput.blur()
+//   this.isOpen = false
+//   $(document).trigger(ChatView.events.closeTray)
+// }
 
-ChatView.prototype.addMessage = function(message, isInitial, wasMe) {
-  this.messages.add(message)
-  Private.addMessage.call(this, message, isInitial, wasMe)
-}
-
-ChatView.prototype.scrollMessages = function(duration) {
-  duration = duration || 0
-
-  this.$messages.animate({
-    scrollTop: this.$messages[0].scrollHeight
-  }, duration)
-}
-
-ChatView.prototype.clearMessages = function() {
-  this.unreadMessages = 0
-  this.$unread.hide()
-  this.$messages.empty()
-}
-
-ChatView.prototype.close = function() {
-  this.$container.css({
-    right: '-300px'
-  })
-  this.$messageInput.blur()
-  this.isOpen = false
-  $(document).trigger(ChatView.events.closeTray)
-}
-
-ChatView.prototype.remove = function() {
-  this.$button.off()
-  this.$container.remove()
-}
+// ChatView.prototype.remove = function() {
+//   this.$button.off()
+//   this.$container.remove()
+// }
 
 /**
  * @class
diff --git a/frontend/src/Metamaps/Views/Room.js b/frontend/src/Metamaps/Views/Room.js
index a3a79cc8..29c604e2 100644
--- a/frontend/src/Metamaps/Views/Room.js
+++ b/frontend/src/Metamaps/Views/Room.js
@@ -26,7 +26,8 @@ const Room = function(opts = {}) {
 
   this.messages = new Backbone.Collection()
   this.currentMapper = new Backbone.Model({ name: opts.username, image: opts.image })
-  this.chat = new ChatView(this.messages, this.currentMapper, this.room, {
+  this.chat = ChatView
+  this.chat.init(this.messages, this.currentMapper, this.room, {
     soundUrls: opts.soundUrls
   })
 
diff --git a/frontend/src/components/MapChat/Participant.js b/frontend/src/components/MapChat/Participant.js
index cff5f5b9..56bbcdd1 100644
--- a/frontend/src/components/MapChat/Participant.js
+++ b/frontend/src/components/MapChat/Participant.js
@@ -28,7 +28,7 @@ class Participant extends Component {
   }
 }
 
-ChatView.propTypes = {
+Participant.propTypes = {
   color: PropTypes.string, // css color
   id: PropTypes.number,
   image: PropTypes.string, // image url
@@ -36,4 +36,4 @@ ChatView.propTypes = {
   username: PropTypes.string
 }
 
-export default ChatView
+export default Participant
diff --git a/frontend/src/components/MapChat/Unread.js b/frontend/src/components/MapChat/Unread.js
new file mode 100644
index 00000000..ceec0e9c
--- /dev/null
+++ b/frontend/src/components/MapChat/Unread.js
@@ -0,0 +1,10 @@
+import React from 'react'
+
+const Unread = props => {
+  if (props.count <= 0) {
+    return null
+  }
+  return <div className="chat-unread"></div>
+}
+
+export default Unread
diff --git a/frontend/src/components/MapChat/index.js b/frontend/src/components/MapChat/index.js
index aa341252..f88d3bd6 100644
--- a/frontend/src/components/MapChat/index.js
+++ b/frontend/src/components/MapChat/index.js
@@ -1,8 +1,11 @@
 import React, { PropTypes, Component } from 'react'
+import Unread from './Unread'
+import Participant from './Participant'
+import Message from './Message'
 
 class MapChat extends Component {
-  render() {
-    const rightOffset = this.props.show ? '-300px' : '0'
+  render = () => {
+    const rightOffset = this.props.isOpen ? '-300px' : '0'
     return (
       <div className="chat-box"
         style={{ right: rightOffset }}
@@ -13,15 +16,15 @@ class MapChat extends Component {
           <div className="cursor-toggle" />
         </div>
         <div className="participants">
-				  <div className="conversation-live">
-						LIVE
+          <div className="conversation-live">
+            LIVE
 						<span className="call-action leave" onClick={this.props.leaveCall}>
 							LEAVE
 						</span>
 						<span className="call-action join"  onClick={this.props.joinCall}>
 							JOIN
 						</span>
-					</div>
+          </div>
         </div>
         <div className="chat-header">
           CHAT
@@ -39,7 +42,7 @@ class MapChat extends Component {
 }
 
 MapChat.propTypes = {
-  show: PropTypes.bool,
+  isOpen: PropTypes.bool,
   leaveCall: PropTypes.func,
   joinCall: PropTypes.func,
   participants: PropTypes.arrayOf(PropTypes.shape({