diff --git a/index.html b/index.html
index 6b286fc6..f96073ef 100644
--- a/index.html
+++ b/index.html
@@ -52,6 +52,8 @@
             </div>
         </script>
         <script type='text/x-tmpl-mustache' id='message'>
+            <div class='sender'>{{ sender }}</div>
+            <img class='avatar' src='{{ contact_avatar }}'>
             <div class='bubble bubble_context {{ bubble_class }}'>
             <ul class='volley'>
                 <li class='message'>
diff --git a/js/views/message_view.js b/js/views/message_view.js
index 1d5a4f7a..6595c0f6 100644
--- a/js/views/message_view.js
+++ b/js/views/message_view.js
@@ -24,7 +24,8 @@ var Whisper = Whisper || {};
           message: this.model.get('body'),
           date: this.formatTimestamp(),
           attachments: this.model.get('attachments'),
-          bubble_class: this.model.get('type') === 'outgoing' ? 'sent' : 'incoming'
+          bubble_class: this.model.get('type') === 'outgoing' ? 'sent' : 'incoming',
+          sender: this.model.thread().get('type') === 'group' ? this.model.get('person') : ''
         })
       );
 
diff --git a/stylesheets/index.css b/stylesheets/index.css
index 7b0ebf3a..c462deec 100644
--- a/stylesheets/index.css
+++ b/stylesheets/index.css
@@ -36,3 +36,23 @@ ul.discussion {
 .conversation .bootstrap-tagsinput {
   max-width: 40%;
 }
+
+li.entry .sender {
+  font-size: 0.75em;
+  opacity: 0.54;
+}
+
+li.entry .avatar {
+  height:32px;
+  width:32px;
+  border-radius:32px;
+  cursor:pointer;
+  display:inline-block;
+  float:left;
+  clear:both;
+  background-color:whitesmoke;
+}
+
+li.entry.outgoing .avatar {
+  display: none;
+}