diff --git a/ts/components/conversation/ContactName.md b/ts/components/conversation/ContactName.md
new file mode 100644
index 0000000000..f078461c99
--- /dev/null
+++ b/ts/components/conversation/ContactName.md
@@ -0,0 +1,32 @@
+#### With name and profile
+
+```jsx
+<div style={{ backgroundColor: 'gray', color: 'white' }}>
+  <ContactName
+    i18n={util.i18n}
+    name="Someone 🔥 Somewhere"
+    phoneNumber="+12025550011"
+    profileName="🔥Flames🔥"
+  />
+</div>
+```
+
+#### Profile, no name
+
+```jsx
+<div style={{ backgroundColor: 'gray', color: 'white' }}>
+  <ContactName
+    i18n={util.i18n}
+    phoneNumber="+12025550011"
+    profileName="🔥Flames🔥"
+  />
+</div>
+```
+
+#### No name, no profile
+
+```jsx
+<div style={{ backgroundColor: 'gray', color: 'white' }}>
+  <ContactName i18n={util.i18n} phoneNumber="+12025550011" />
+</div>
+```
diff --git a/ts/components/conversation/ConversationTitle.md b/ts/components/conversation/ConversationTitle.md
new file mode 100644
index 0000000000..85f095fab2
--- /dev/null
+++ b/ts/components/conversation/ConversationTitle.md
@@ -0,0 +1,45 @@
+#### With name and profile, verified
+
+```jsx
+<div style={{ backgroundColor: 'gray', color: 'white' }}>
+  <ConversationTitle
+    i18n={util.i18n}
+    isVerified
+    name="Someone 🔥 Somewhere"
+    phoneNumber="+12025550011"
+    profileName="🔥Flames🔥"
+  />
+</div>
+```
+
+#### With name, not verified
+
+```jsx
+<div style={{ backgroundColor: 'gray', color: 'white' }}>
+  <ConversationTitle
+    i18n={util.i18n}
+    name="Someone 🔥 Somewhere"
+    phoneNumber="+12025550011"
+  />
+</div>
+```
+
+#### Profile, no name
+
+```jsx
+<div style={{ backgroundColor: 'gray', color: 'white' }}>
+  <ConversationTitle
+    i18n={util.i18n}
+    phoneNumber="+12025550011"
+    profileName="🔥Flames🔥"
+  />
+</div>
+```
+
+#### No name, no profile
+
+```jsx
+<div style={{ backgroundColor: 'gray', color: 'white' }}>
+  <ConversationTitle i18n={util.i18n} phoneNumber="+12025550011" />
+</div>
+```
diff --git a/ts/components/conversation/ConversationTitle.tsx b/ts/components/conversation/ConversationTitle.tsx
index 905435fead..0e5da03758 100644
--- a/ts/components/conversation/ConversationTitle.tsx
+++ b/ts/components/conversation/ConversationTitle.tsx
@@ -25,7 +25,7 @@ export class ConversationTitle extends React.Component<Props> {
         {phoneNumber ? (
           <span className="conversation-number">{phoneNumber}</span>
         ) : null}{' '}
-        {profileName ? (
+        {profileName && !name ? (
           <span className="profileName">
             <Emojify text={profileName} i18n={i18n} />
           </span>