diff --git a/docs/src/prototypes/chatMessageWithPopover/ChatMessageWithPopover.tsx b/docs/src/prototypes/chatMessageWithPopover/ChatMessageWithPopover.tsx
index ea3454ed1f..62f17dc69b 100644
--- a/docs/src/prototypes/chatMessageWithPopover/ChatMessageWithPopover.tsx
+++ b/docs/src/prototypes/chatMessageWithPopover/ChatMessageWithPopover.tsx
@@ -4,11 +4,6 @@ import * as React from 'react'
 import cx from 'classnames'
 import Popover from './Popover'
 
-const janeAvatar = {
-  image: 'public/images/avatar/small/ade.jpg',
-  status: { color: 'green', icon: 'check' },
-}
-
 interface ChatMessageWithPopoverProps {
   className?: string
 }
@@ -51,7 +46,6 @@ class ChatMessageWithPopover extends React.Component<
             </div>
           ),
         }}
-        avatar={janeAvatar}
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}
         className={cx(this.props.className, this.state.focused ? 'focused' : '')}
diff --git a/docs/src/prototypes/chatMessageWithPopover/ChatWithPopover.tsx b/docs/src/prototypes/chatMessageWithPopover/ChatWithPopover.tsx
index 6796bae0fa..06c4e3b1b5 100644
--- a/docs/src/prototypes/chatMessageWithPopover/ChatWithPopover.tsx
+++ b/docs/src/prototypes/chatMessageWithPopover/ChatWithPopover.tsx
@@ -1,7 +1,12 @@
-import { Chat, Provider } from '@stardust-ui/react'
+import { Chat, Provider, Avatar } from '@stardust-ui/react'
 import * as React from 'react'
 import ChatMessageWithPopover from './ChatMessageWithPopover'
 
+const janeAvatar = {
+  image: 'public/images/avatar/small/ade.jpg',
+  status: { color: 'green', icon: 'check' },
+}
+
 const ChatWithPopover = () => (
   <Provider
     theme={{
@@ -45,9 +50,21 @@ const ChatWithPopover = () => (
   >
     <Chat
       items={[
-        { key: 'a', content: <ChatMessageWithPopover /> },
-        { key: 'b', content: <ChatMessageWithPopover /> },
-        { key: 'c', content: <ChatMessageWithPopover /> },
+        {
+          key: 'a',
+          message: { content: <ChatMessageWithPopover /> },
+          gutter: { content: <Avatar {...janeAvatar} /> },
+        },
+        {
+          key: 'b',
+          message: { content: <ChatMessageWithPopover /> },
+          gutter: { content: <Avatar {...janeAvatar} /> },
+        },
+        {
+          key: 'c',
+          message: { content: <ChatMessageWithPopover /> },
+          gutter: { content: <Avatar {...janeAvatar} /> },
+        },
       ]}
     />
   </Provider>