diff --git a/background.html b/background.html
index 418cb8665..903e1394b 100644
--- a/background.html
+++ b/background.html
@@ -279,11 +279,16 @@
           </div>
           <div class='tail-wrapper {{ innerBubbleClasses }}'>
             <div class='inner-bubble'>
-              <div class='quote-wrapper'></div>
-              <div class='attachments'></div>
-              <div class='content' dir='auto'>
-                {{ #message }}<div class='body'>{{ message }}</div>{{ /message }}
-              </div>
+              {{ #hasAttachments }}
+                <div class='attachments'></div>
+              {{ /hasAttachments }}
+              {{ #hasBody }}
+                <div class='content' dir='auto'>
+                  {{ #message }}
+                    <div class='body'>{{ message }}</div>
+                  {{ /message }}
+                </div>
+                {{ /hasBody }}
             </div>
           </div>
           <div class='meta'>
diff --git a/js/views/message_view.js b/js/views/message_view.js
index 824da362f..108fe97f4 100644
--- a/js/views/message_view.js
+++ b/js/views/message_view.js
@@ -316,7 +316,6 @@
     renderErrors() {
       const errors = this.model.get('errors');
 
-
       this.$('.error-icon-container').remove();
       if (this.errorIconView) {
         this.errorIconView.remove();
@@ -437,16 +436,18 @@
       };
 
       if (this.replyView) {
+        this.replyView.remove();
         this.replyView = null;
       } else if (contact) {
         this.listenTo(contact, 'change:color', this.renderQuote);
       }
 
       this.replyView = new Whisper.ReactWrapperView({
-        el: this.$('.quote-wrapper'),
+        className: 'quote-wrapper',
         Component: window.Signal.Components.Quote,
         props,
       });
+      this.$('.inner-bubble').prepend(this.replyView.el);
     },
     isImageWithoutCaption() {
       const attachments = this.model.get('attachments');
@@ -469,16 +470,23 @@
     render() {
       const contact = this.model.isIncoming() ? this.model.getContact() : null;
       const errors = this.model.get('errors');
+      const attachments = this.model.get('attachments');
+
       const hasErrors = errors && errors.length > 0;
+      const hasAttachments = attachments && attachments.length > 0;
+      const message = this.model.get('body');
+      const hasBody = message || (this.model.isIncoming() && hasErrors);
 
       this.$el.html(Mustache.render(_.result(this, 'template', ''), {
-        message: this.model.get('body'),
+        message,
+        hasBody,
         timestamp: this.model.get('sent_at'),
         sender: (contact && contact.getTitle()) || '',
         avatar: (contact && contact.getAvatar()),
         profileName: (contact && contact.getProfileName()),
         innerBubbleClasses: this.isImageWithoutCaption() ? '' : 'with-tail',
         hoverIcon: !hasErrors,
+        hasAttachments,
       }, this.render_partials()));
       this.timeStampView.setElement(this.$('.timestamp'));
       this.timeStampView.update();
diff --git a/js/views/react_wrapper_view.js b/js/views/react_wrapper_view.js
index a30275936..ff5768908 100644
--- a/js/views/react_wrapper_view.js
+++ b/js/views/react_wrapper_view.js
@@ -17,6 +17,8 @@
       const { Component, props, onClose } = options;
       this.render();
 
+      this.tagName = options.tagName;
+      this.className = options.className;
       this.Component = Component;
       this.onClose = onClose;
 
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index d534832d5..e45caed9b 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -622,7 +622,6 @@ span.status {
     }
 
     .body {
-      margin-top: 0.5em;
       white-space: pre-wrap;
 
       a {
@@ -630,6 +629,13 @@ span.status {
       }
     }
 
+    .attachments + .content {
+      margin-top: 0.5em;
+    }
+    .quote-wrapper + .content {
+      margin-top: 0.5em;
+    }
+
     p {
       margin: 0;
     }
diff --git a/stylesheets/_ios.scss b/stylesheets/_ios.scss
index 7bb7bb100..8bfacfc3e 100644
--- a/stylesheets/_ios.scss
+++ b/stylesheets/_ios.scss
@@ -108,6 +108,10 @@ $ios-border-color: rgba(0,0,0,0.1);
 
   .message-container,
   .message-list {
+    .bubble .content {
+      margin-top: 0px;
+    }
+
     .quote {
       border-top-left-radius: 15px;
       border-top-right-radius: 15px;
diff --git a/test/index.html b/test/index.html
index 22f049276..067f722ad 100644
--- a/test/index.html
+++ b/test/index.html
@@ -214,11 +214,16 @@
           </div>
           <div class='tail-wrapper {{ innerBubbleClasses }}'>
             <div class='inner-bubble'>
-              <div class='quote-wrapper'></div>
-              <div class='attachments'></div>
-              <div class='content' dir='auto'>
-                {{ #message }}<div class='body'>{{ message }}</div>{{ /message }}
-              </div>
+              {{ #hasAttachments }}
+                <div class='attachments'></div>
+              {{ /hasAttachments }}
+              {{ #hasBody }}
+                <div class='content' dir='auto'>
+                  {{ #message }}
+                    <div class='body'>{{ message }}</div>
+                  {{ /message }}
+                </div>
+                {{ /hasBody }}
             </div>
           </div>
           <div class='meta'>
diff --git a/test/styleguide/legacy_templates.js b/test/styleguide/legacy_templates.js
index 97a5bb6e3..814d5baf4 100644
--- a/test/styleguide/legacy_templates.js
+++ b/test/styleguide/legacy_templates.js
@@ -34,11 +34,16 @@ window.Whisper.View.Templates = {
           </div>
           <div class='tail-wrapper {{ innerBubbleClasses }}'>
             <div class='inner-bubble'>
-              <div class='quote-wrapper'></div>
-              <div class='attachments'></div>
-              <div class='content' dir='auto'>
-                {{ #message }}<div class='body'>{{ message }}</div>{{ /message }}
-              </div>
+              {{ #hasAttachments }}
+                <div class='attachments'></div>
+              {{ /hasAttachments }}
+              {{ #hasBody }}
+                <div class='content' dir='auto'>
+                  {{ #message }}
+                    <div class='body'>{{ message }}</div>
+                  {{ /message }}
+                </div>
+                {{ /hasBody }}
             </div>
           </div>
           <div class='meta'>
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index e53091cce..eb484e82b 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -15,7 +15,6 @@ export class Message extends React.Component<{}, {}> {
           <div className="sender" dir="auto" />
           <div className="tail-wrapper with-tail">
             <div className="inner-bubble">
-              <div className="attachments" />
               <p className="content" dir="auto">
                 <span className="body">
                   Hi there. How are you doing? Feeling pretty good? Awesome.