diff --git a/stylesheets/components/ContactModal.scss b/stylesheets/components/ContactModal.scss
index 1aaa2b7673e..7ccc8093102 100644
--- a/stylesheets/components/ContactModal.scss
+++ b/stylesheets/components/ContactModal.scss
@@ -143,4 +143,23 @@
       );
     }
   }
+  
+  &__official-badge {
+    background: url('../images/icons/v2/official-20.svg') no-repeat center;
+    display: inline-block;
+    height: 18px;
+    margin-left: 4px;
+    margin-bottom: -4px;
+    width: 18px;
+  }
+
+  &__official-badge__large {
+    background: url('../images/icons/v2/official-20.svg') no-repeat center;
+    display: inline-block;
+    height: 18px;
+    margin-left: 9px;
+    margin-bottom: -2px;
+    width: 18px;
+    scale: 1.3;
+  }
 }
diff --git a/stylesheets/components/StoryListItem.scss b/stylesheets/components/StoryListItem.scss
index 02e36b0e193..fe873d388ca 100644
--- a/stylesheets/components/StoryListItem.scss
+++ b/stylesheets/components/StoryListItem.scss
@@ -180,12 +180,4 @@
     width: 12px;
     @include color-svg('../images/icons/v2/chevron-right-20.svg', $color-white);
   }
-
-  &__signal-official {
-    background: url('../images/icons/v2/official-20.svg') no-repeat center;
-    display: inline-block;
-    height: 16px;
-    margin-left: 6px;
-    width: 16px;
-  }
 }
diff --git a/ts/components/conversation/ContactName.tsx b/ts/components/conversation/ContactName.tsx
index ee1dc8e5515..8c9c7055fd0 100644
--- a/ts/components/conversation/ContactName.tsx
+++ b/ts/components/conversation/ContactName.tsx
@@ -12,6 +12,7 @@ export type PropsType = {
   contactNameColor?: ContactNameColorType;
   firstName?: string;
   isSignalConversation?: boolean;
+  isMe?: boolean;
   module?: string;
   preferFirstName?: boolean;
   title: string;
@@ -21,6 +22,7 @@ export function ContactName({
   contactNameColor,
   firstName,
   isSignalConversation,
+  isMe,
   module,
   preferFirstName,
   title,
@@ -43,8 +45,8 @@ export function ContactName({
       dir="auto"
     >
       <Emojify text={text} />
-      {isSignalConversation && (
-        <span className="StoryListItem__signal-official" />
+      {(isSignalConversation || isMe) && (
+        <span className="ContactModal__official-badge" />
       )}
     </span>
   );
diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx
index 2a6ee7a51c3..7e702fae7aa 100644
--- a/ts/components/conversation/ConversationHeader.tsx
+++ b/ts/components/conversation/ConversationHeader.tsx
@@ -177,6 +177,7 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
       return (
         <div className="module-ConversationHeader__header__info__title">
           {i18n('noteToSelf')}
+          <span className="ContactModal__official-badge" />
         </div>
       );
     }
diff --git a/ts/components/conversation/ConversationHero.tsx b/ts/components/conversation/ConversationHero.tsx
index 2d5ee033bd4..54df187dc6e 100644
--- a/ts/components/conversation/ConversationHero.tsx
+++ b/ts/components/conversation/ConversationHero.tsx
@@ -195,6 +195,7 @@ export function ConversationHero({
               title={title}
             />
           )}
+          {isMe && (<span className="ContactModal__official-badge__large" />)}
         </h1>
         {about && !isMe && (
           <div className="module-about__container">
diff --git a/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx b/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx
index 337208c6b69..647b4ffea95 100644
--- a/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx
+++ b/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx
@@ -107,6 +107,7 @@ export function ConversationDetailsHeader({
     <div>
       <div className={bem('title')}>
         <Emojify text={isMe ? i18n('noteToSelf') : conversation.title} />
+        {isMe && (<span className="ContactModal__official-badge__large" />)}
       </div>
     </div>
   );
diff --git a/ts/components/conversationList/ContactCheckbox.tsx b/ts/components/conversationList/ContactCheckbox.tsx
index 053a1a2b17a..7ced8a39b83 100644
--- a/ts/components/conversationList/ContactCheckbox.tsx
+++ b/ts/components/conversationList/ContactCheckbox.tsx
@@ -76,9 +76,10 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
     const disabled = Boolean(disabledReason);
 
     const headerName = isMe ? (
-      <span className={HEADER_CONTACT_NAME_CLASS_NAME}>
-        {i18n('noteToSelf')}
-      </span>
+      <ContactName module={HEADER_CONTACT_NAME_CLASS_NAME} 
+        title={i18n('noteToSelf')} 
+        isMe={isMe} 
+      />
     ) : (
       <ContactName module={HEADER_CONTACT_NAME_CLASS_NAME} title={title} />
     );
diff --git a/ts/components/conversationList/ContactListItem.tsx b/ts/components/conversationList/ContactListItem.tsx
index 4d5490164b9..39db08ede2d 100644
--- a/ts/components/conversationList/ContactListItem.tsx
+++ b/ts/components/conversationList/ContactListItem.tsx
@@ -68,9 +68,11 @@ export const ContactListItem: FunctionComponent<PropsType> = React.memo(
     uuid,
   }) {
     const headerName = isMe ? (
-      <span className={HEADER_CONTACT_NAME_CLASS_NAME}>
-        {i18n('noteToSelf')}
-      </span>
+      <ContactName
+        isMe={isMe}
+        module={HEADER_CONTACT_NAME_CLASS_NAME}
+        title={i18n('noteToSelf')}
+      />
     ) : (
       <ContactName
         isSignalConversation={isSignalConversation({ id, uuid })}
diff --git a/ts/components/conversationList/ConversationListItem.tsx b/ts/components/conversationList/ConversationListItem.tsx
index 18ac38fb89d..20d1fb256f5 100644
--- a/ts/components/conversationList/ConversationListItem.tsx
+++ b/ts/components/conversationList/ConversationListItem.tsx
@@ -106,9 +106,11 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
     const headerName = (
       <>
         {isMe ? (
-          <span className={HEADER_CONTACT_NAME_CLASS_NAME}>
-            {i18n('noteToSelf')}
-          </span>
+          <ContactName
+            module={HEADER_CONTACT_NAME_CLASS_NAME}
+            isMe={isMe}
+            title={i18n('noteToSelf')}
+          />
         ) : (
           <ContactName
             module={HEADER_CONTACT_NAME_CLASS_NAME}