diff --git a/docs/src/components/message.jsx b/docs/src/components/message.jsx
index 37c48e07..ce24dbc1 100644
--- a/docs/src/components/message.jsx
+++ b/docs/src/components/message.jsx
@@ -124,7 +124,8 @@ class MessageDoc extends Component {
       compact: false,
       iconMenu: false,
       edited: false,
-      multiline: false
+      multiline: false,
+      avatar: true
     };
   }
 
@@ -140,7 +141,10 @@ class MessageDoc extends Component {
 
   selectMultiline = (event, multiline) => this.setState({ multiline })
 
+  selectAvatar = (event, avatar) => this.setState({ avatar });
+
   render() {
+    const { collapsed, fontSize, compact, iconMenu, edited, multiline, avatar } = this.state;
     const componentData = _.find(components, component => component.displayName === 'Message');
     const style = {
       paper: {
@@ -193,28 +197,32 @@ class MessageDoc extends Component {
         <section>
           <h1>Examples</h1>
           <div style={style.options}>
-            <Select style={style.select} label="Collapsed images" value={this.state.collapsed} onChange={this.selectCollapse}>
+            <Select style={style.select} label="Collapsed images" value={collapsed} onChange={this.selectCollapse}>
               <MenuItem text="On" value />
               <MenuItem text="Off" value={false} />
             </Select>
-            <Select style={style.select} label="Font size" value={this.state.fontSize} onChange={this.selectFontSize}>
+            <Select style={style.select} label="Font size" value={fontSize} onChange={this.selectFontSize}>
               <MenuItem text="Small" value="small" />
               <MenuItem text="Medium" value="medium" />
               <MenuItem text="Large" value="large" />
             </Select>
-            <Select style={style.select} label="Compact messages" value={this.state.compact} onChange={this.selectCompact}>
+            <Select style={style.select} label="Compact messages" value={compact} onChange={this.selectCompact}>
+              <MenuItem text="On" value />
+              <MenuItem text="Off" value={false} />
+            </Select>
+            <Select style={style.select} label="Icon menu" value={iconMenu} onChange={this.selectIconMenu}>
               <MenuItem text="On" value />
               <MenuItem text="Off" value={false} />
             </Select>
-            <Select style={style.select} label="Icon menu" value={this.state.iconMenu} onChange={this.selectIconMenu}>
+            <Select style={style.select} label="Edited messages" value={edited} onChange={this.selectEdited}>
               <MenuItem text="On" value />
               <MenuItem text="Off" value={false} />
             </Select>
-            <Select style={style.select} label="Edited messages" value={this.state.edited} onChange={this.selectEdited}>
+            <Select style={style.select} label="Enable multiline" value={multiline} onChange={this.selectMultiline}>
               <MenuItem text="On" value />
               <MenuItem text="Off" value={false} />
             </Select>
-            <Select style={style.select} label="Enable multiline" value={this.state.multiline} onChange={this.selectMultiline}>
+            <Select style={style.select} label="Enable avatar" value={avatar} onChange={this.selectAvatar}>
               <MenuItem text="On" value />
               <MenuItem text="Off" value={false} />
             </Select>
@@ -226,19 +234,19 @@ class MessageDoc extends Component {
                   message={message}
                   key={`message-${message.id}`}
                   myMessage={message.username === currentUser}
-                  avatar={message.avatar}
+                  avatar={avatar ? message.avatar : null}
                   emoji
-                  collapsed={this.state.collapsed}
+                  collapsed={collapsed}
                   collapsedText={
                     message.type === 'giphy'
                     ? 'This GIF has been collapsed, click the button to expand it.'
                     : 'This image has been collapsed, click the button to expand it.'
                   }
                   expand={() => this.selectCollapse(false)}
-                  fontSize={this.state.fontSize}
-                  compact={this.state.compact}
-                  menuItems={this.state.iconMenu ? menuItems : null}
-                  edited={this.state.edited ? 'edited' : null}
+                  fontSize={fontSize}
+                  compact={compact}
+                  menuItems={iconMenu ? menuItems : null}
+                  edited={edited ? 'edited' : null}
                   highlights={[
                     {
                       prefix: '@',
@@ -253,7 +261,7 @@ class MessageDoc extends Component {
                   ]}
                   onHighlightClick={(e, username) => alert(`mention ${username}`)} // eslint-disable-line no-alert
                   enableLinks
-                  enableMultiline={this.state.multiline}
+                  enableMultiline={multiline}
                 />
               ))}
             </MessageList>
diff --git a/src/message/giphy-message/styles.js b/src/message/giphy-message/styles.js
index 29fa5cbe..dd7ca901 100644
--- a/src/message/giphy-message/styles.js
+++ b/src/message/giphy-message/styles.js
@@ -16,9 +16,7 @@ export default {
   },
   myMessage: {
     backgroundColor: colors.theme,
-    color: colors.white,
-    marginLeft: '0',
-    marginRight: '16px',
+    color: colors.white
   },
   body: {
     display: 'flex',
diff --git a/src/message/image-message/styles.js b/src/message/image-message/styles.js
index adf69eea..4507e7f2 100644
--- a/src/message/image-message/styles.js
+++ b/src/message/image-message/styles.js
@@ -16,9 +16,7 @@ export default {
   },
   myMessage: {
     backgroundColor: colors.theme,
-    color: colors.white,
-    marginLeft: '0',
-    marginRight: '16px',
+    color: colors.white
   },
   body: {
     display: 'flex',
diff --git a/src/message/sticker-message/styles.js b/src/message/sticker-message/styles.js
index 1cab02fc..7f2d3294 100644
--- a/src/message/sticker-message/styles.js
+++ b/src/message/sticker-message/styles.js
@@ -24,9 +24,7 @@ export default {
     marginRight: '48px'
   },
   myMessage: {
-    backgroundColor: colors.theme,
-    marginLeft: '0',
-    marginRight: '16px',
+    backgroundColor: colors.theme
   },
   body: {
     width: 'auto',
diff --git a/src/message/text-message/styles.js b/src/message/text-message/styles.js
index fc80c1a6..d7870800 100644
--- a/src/message/text-message/styles.js
+++ b/src/message/text-message/styles.js
@@ -22,8 +22,7 @@ export default {
   myMessage: {
     backgroundColor: colors.theme,
     color: colors.white,
-    marginLeft: '0',
-    marginRight: '16px',
+    marginLeft: '0'
   },
   body: {
     display: 'flex',
diff --git a/src/message/typing-message/styles.js b/src/message/typing-message/styles.js
index eb1e96b9..9592feac 100644
--- a/src/message/typing-message/styles.js
+++ b/src/message/typing-message/styles.js
@@ -21,9 +21,7 @@ export default {
   },
   myMessage: {
     backgroundColor: colors.theme,
-    color: colors.white,
-    marginLeft: '0',
-    marginRight: '16px',
+    color: colors.white
   },
   body: {
     display: 'flex',