diff --git a/docs/src/examples/components/Chat/Variations/ChatExampleAvatar.tsx b/docs/src/examples/components/Chat/Variations/ChatExampleAvatar.tsx
deleted file mode 100644
index 712095269e..0000000000
--- a/docs/src/examples/components/Chat/Variations/ChatExampleAvatar.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-
-import { Chat } from '@stardust-ui/react'
-
-const ChatExampleAvatar = () => (
-  <Chat>
-    <Chat.Message mine avatar={{ src: 'public/images/avatar/small/matt.jpg', status: 'Available' }}>
-      Hello
-    </Chat.Message>
-
-    <Chat.Message avatar={{ src: 'public/images/avatar/small/jenny.jpg', status: 'Busy' }}>
-      Hi
-    </Chat.Message>
-
-    <Chat.Message mine avatar={{ src: 'public/images/avatar/small/matt.jpg', status: 'Available' }}>
-      Let's go get some lunch!
-    </Chat.Message>
-
-    <Chat.Message avatar={{ src: 'public/images/avatar/small/jenny.jpg', status: 'Busy' }}>
-      Sure thing. I was thinking we should try the new place downtown.
-    </Chat.Message>
-  </Chat>
-)
-
-export default ChatExampleAvatar
diff --git a/src/components/Chat/ChatMessage.tsx b/src/components/Chat/ChatMessage.tsx
index 2b805c2b53..a8aa2960d8 100644
--- a/src/components/Chat/ChatMessage.tsx
+++ b/src/components/Chat/ChatMessage.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
+import * as cx from 'classnames'
 
 import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
 import { ComponentVariablesInput, IComponentPartStylesInput } from '../../../types/theme'
@@ -67,10 +68,14 @@ class ChatMessage extends UIComponent<Extendable<IChatMessageProps>, any> {
   renderComponent({ ElementType, classes, rest, styles }) {
     const { avatar, children, content, mine } = this.props
 
-    return (
+    return childrenExist(children) ? (
+      <ElementType {...rest} className={cx(classes.root, classes.chatContent)}>
+        {children}
+      </ElementType>
+    ) : (
       <ElementType {...rest} className={classes.root}>
         {!mine && this.renderAvatar(avatar, styles)}
-        <div className={classes.chatContent}>{childrenExist(children) ? children : content}</div>
+        <div className={classes.chatContent}>{content}</div>
         {mine && this.renderAvatar(avatar, styles)}
       </ElementType>
     )
diff --git a/test/specs/components/Chat/ChatMessage-test.tsx b/test/specs/components/Chat/ChatMessage-test.tsx
index db6f8bd077..c7659afcd2 100644
--- a/test/specs/components/Chat/ChatMessage-test.tsx
+++ b/test/specs/components/Chat/ChatMessage-test.tsx
@@ -11,8 +11,8 @@ describe('ChatMessage', () => {
 
   describe('avatar', () => {
     it('creates an Avatar component when the avatar shorthand is provided', () => {
-      const name = 'AB'
-      const chatMsg = mountWithProvider(<ChatMessage avatar="AB" />)
+      const name = 'John Doe'
+      const chatMsg = mountWithProvider(<ChatMessage avatar={name} />)
 
       expect(chatMsg.find('Avatar').prop('name')).toEqual(name)
     })