diff --git a/ts/components/conversation/Message.md b/ts/components/conversation/Message.md
index 0152fa227..262ec7db4 100644
--- a/ts/components/conversation/Message.md
+++ b/ts/components/conversation/Message.md
@@ -34,6 +34,31 @@ const View = Whisper.MessageView;
 </util.ConversationContext>
 ```
 
+### In a group conversation
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  body: 'How are you doing this fine day?',
+  sent_at: Date.now() - 18000,
+});
+const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
+  source: '+12025550003',
+  type: 'incoming',
+}));
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme} type="group" >
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: incoming }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```
+
 ### With an attachment
 
 #### Image with caption
diff --git a/ts/components/conversation/Quote.md b/ts/components/conversation/Quote.md
index fb6920e94..ae4cd87d4 100644
--- a/ts/components/conversation/Quote.md
+++ b/ts/components/conversation/Quote.md
@@ -88,7 +88,7 @@ const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
   }),
 }));
 const View = Whisper.MessageView;
-<util.ConversationContext theme={util.theme} conversationType="group">
+<util.ConversationContext theme={util.theme} type="group">
   <util.BackboneWrapper
     View={View}
     options={{ model: incoming }}
diff --git a/ts/styleguide/ConversationContext.tsx b/ts/styleguide/ConversationContext.tsx
index 7efce4cec..139dd8a1e 100644
--- a/ts/styleguide/ConversationContext.tsx
+++ b/ts/styleguide/ConversationContext.tsx
@@ -7,7 +7,7 @@ interface Props {
    * Corresponds to the theme setting in the app, and the class added to the root element.
    */
   theme: 'ios' | 'android' | 'android-dark';
-  conversationType: 'private' | 'group';
+  type: 'private' | 'group';
 }
 
 /**
@@ -16,11 +16,11 @@ interface Props {
  */
 export class ConversationContext extends React.Component<Props, {}> {
   public render() {
-    const { theme, conversationType } = this.props;
+    const { theme, type } = this.props;
 
     return (
       <div className={theme || 'android'}>
-        <div className={classnames('conversation', conversationType || 'private')}>
+        <div className={classnames('conversation', type || 'private')}>
           <div className="discussion-container" style={{padding: '0.5em'}}>
             <ul className="message-list">
               {this.props.children}