diff --git a/index.html b/index.html
index 808b4e71b..076e6cd9c 100644
--- a/index.html
+++ b/index.html
@@ -13,21 +13,15 @@
         <link href="/stylesheets/manifest.css" rel="stylesheet" type="text/css" />
     </head>
     <body class='signal index'>
-        <div class='title-bar' id='header'>
-          <div class='new-conversation-title hide'>
-            <button class='back'></button>
-            <span class='title-text'>New Message</span>
+        <script type="text/x-tmpl-mustache" id="inbox">
+          <div class='title-bar' id='header'>
+            <div class='socket-status'></div>
           </div>
-          <div class='socket-status'></div>
-        </div>
-        <div class='notifications'>
-            <div class='notification info'>
-            </div>
-        </div>
-        <div id='gutter' class='gutter'>
-            <div id='contacts'></div>
-            <span class='fab'></span>
-        </div>
+          <div id='gutter' class='gutter'>
+              <div id='contacts'></div>
+              <span class='fab'></span>
+          </div>
+        </script>
         <script type="text/x-tmpl-mustache" id="phone-number">
             <div class="phone-input-form">
                 <div class="number-container">
@@ -54,23 +48,29 @@
             </div>
         </script>
         <script type='text/x-tmpl-mustache' id='new-conversation'>
-            <div class='new-group-update-form clearfix'>
-              <div class='group-avatar'>
-                <div class='paperclip'></div>
-                <input type='file' name='avatar' class='file-input'>
-              </div>
-              <input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
-            </div>
-            <div class='recipients-container'>
-              <span class='recipients'></span>
-              <input type='text' class='new-message' placeholder="Name or phone number" />
-            </div>
-            <div class='buttons'>
-              <button class='create'>Next</button>
+            <div class='title-bar' id='header'>
+              <button class='back'></button>
+              <span class='title-text'>New Message</span>
             </div>
-            <div class='results'>
-              <div class='new-contact contact'></div>
-              <div class='contacts'></div>
+            <div id='gutter' class='gutter'>
+              <div class='new-group-update-form clearfix'>
+                <div class='group-avatar'>
+                  <div class='paperclip'></div>
+                  <input type='file' name='avatar' class='file-input'>
+                </div>
+                <input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
+              </div>
+              <div class='recipients-container'>
+                <span class='recipients'></span>
+                <input type='text' class='new-message' placeholder="Name or phone number" />
+              </div>
+              <div class='buttons'>
+                <button class='create'>Next</button>
+              </div>
+              <div class='results'>
+                <div class='new-contact contact'></div>
+                <div class='contacts'></div>
+              </div>
             </div>
         </script>
         <script type='text/x-tmpl-mustache' id='attachment-preview'>
diff --git a/js/index.js b/js/index.js
index 4d83d960a..5da6ac93f 100644
--- a/js/index.js
+++ b/js/index.js
@@ -22,7 +22,7 @@
     if (textsecure.storage.getUnencrypted("number_id") === undefined) {
         window.location = '/options.html';
     } else {
-        new Whisper.InboxView({el: $('body')});
+        new Whisper.InboxView().$el.prependTo($('body'));
         textsecure.storage.putUnencrypted("unreadCount", 0);
         extension.navigator.setBadgeText("");
     }
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index 8f43a257d..6c1d9d26b 100644
--- a/js/views/inbox_view.js
+++ b/js/views/inbox_view.js
@@ -53,18 +53,18 @@
         }
     });
 
-    Whisper.InboxView = Backbone.View.extend({
+    Whisper.InboxView = Whisper.View.extend({
+        template: $('#inbox').html(),
         initialize: function () {
-            this.$gutter = $('#gutter');
-            this.$contacts = $('#contacts');
-            this.$fab = this.$el.find('.fab');
-            this.$back = this.$el.find('.new-conversation-title');
+            this.render();
 
             this.newConversationView = new Whisper.NewConversationView();
-            this.newConversationView.$el.hide().appendTo(this.$gutter);
+            this.newConversationView.$el.hide();
+            this.listenTo(this.newConversationView, 'open',
+                this.openConversation.bind(this, null));
 
             this.inbox = new Whisper.ConversationListView({
-                el         : this.$contacts,
+                el         : this.$el.find('#contacts'),
                 collection : bg.inbox
             }).render();
 
@@ -75,34 +75,24 @@
             }.bind(this));
         },
         events: {
-            'keyup': 'keyup',
-            'click .back': 'hideCompose',
             'click .fab': 'showCompose',
-            'select #contacts .contact': 'openConversation',
-            'open .new-conversation': 'openConversation'
+            'select .contact': 'openConversation',
         },
         openConversation: function(e, data) {
             bg.openConversation(data.modelId);
             this.hideCompose();
         },
         showCompose: function() {
-            this.$fab.hide();
-            this.$contacts.hide();
             this.newConversationView.reset();
+            this.$el.hide();
+            this.newConversationView.$el.insertAfter(this.$el);
             this.newConversationView.$el.show();
             this.newConversationView.$input.focus();
-            this.$back.show();
+            this.listenToOnce(this.newConversationView, 'back', this.hideCompose);
         },
         hideCompose: function() {
             this.newConversationView.$el.hide();
-            this.$contacts.show();
-            this.$fab.show();
-            this.$back.hide();
-        },
-        keyup: function(e) {
-            if (e.keyCode === 27) {
-                this.hideCompose();
-            }
+            this.$el.show();
         }
     });
 
diff --git a/js/views/new_conversation_view.js b/js/views/new_conversation_view.js
index 433436696..ff7dcc116 100644
--- a/js/views/new_conversation_view.js
+++ b/js/views/new_conversation_view.js
@@ -101,7 +101,19 @@
             'select .new-contact': 'addNewRecipient',
             'select .contacts': 'addRecipient',
             'remove .recipient': 'removeRecipient',
-            'click .create': 'create'
+            'click .create': 'create',
+            'click .back': 'goBack',
+            'keyup': 'keyup'
+        },
+
+        keyup: function(e) {
+            if (e.keyCode === 27) {
+                this.goBack();
+            }
+        },
+
+        goBack: function() {
+            this.trigger('back');
         },
 
         initNewContact: function() {
@@ -180,12 +192,12 @@
                 type: 'private'
             });
             conversation.fetch().then(function() {
-                this.$el.trigger('open', { modelId: conversation.id });
+                this.trigger('open', { modelId: conversation.id });
             }.bind(this)).fail(function() {
                 var saved = conversation.save(); // false or indexedDBRequest
                 if (saved) {
                     saved.then(function() {
-                        this.$el.trigger('open', { modelId: conversation.id });
+                        this.trigger('open', { modelId: conversation.id });
                     }.bind(this));
                 }
             }.bind(this));
@@ -210,7 +222,7 @@
                     var id = getString(groupId);
                     var group = new Whisper.Conversation(attributes);
                     group.save({ id: id, groupId: id }).then(function() {
-                        this.$el.trigger('open', {modelId: id});
+                        this.trigger('open', {modelId: id});
                     }.bind(this));
                 }.bind(this));
             }.bind(this));
