diff --git a/components/account/AccountBigCard.vue b/components/account/AccountBigCard.vue
index fb7f852e..caaf3ba0 100644
--- a/components/account/AccountBigCard.vue
+++ b/components/account/AccountBigCard.vue
@@ -32,13 +32,7 @@ defineOptions({
           </a>
         </div>
         <div sm:mt-2>
-          <div>
-            <ContentRich
-              font-bold text-lg line-clamp-1 ws-pre-wrap break-all
-              :content="getDisplayName(account, { rich: true })"
-              :emojis="account.emojis"
-            />
-          </div>
+          <AccountDisplayName :account="account" font-bold text-lg line-clamp-1 ws-pre-wrap break-all />
           <AccountHandle text-sm :account="account" />
         </div>
       </div>
diff --git a/components/account/AccountDisplayName.vue b/components/account/AccountDisplayName.vue
new file mode 100644
index 00000000..a8b8befc
--- /dev/null
+++ b/components/account/AccountDisplayName.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { Account } from 'masto'
+
+defineProps<{
+  account: Account
+}>()
+</script>
+
+<template>
+  <ContentRich
+    :content="getDisplayName(account, { rich: true })"
+    :emojis="account.emojis"
+    :markdown="false"
+  />
+</template>
diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index f048ddc0..870da89d 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -73,14 +73,9 @@ const isSelf = $computed(() => currentUser.value?.account.id === account.id)
           <button w-30 h-30 rounded-full border-4 border-bg-base z-2 @click="previewAvatar">
             <AccountAvatar :account="account" hover:opacity-90 transition-opacity />
           </button>
-          <div flex flex-col>
+          <div flex="~ col gap1">
             <div flex justify-between>
-              <ContentRich
-                font-bold sm:text-2xl text-xl
-                :content="getDisplayName(account, { rich: true })"
-                :emojis="account.emojis"
-                :markdown="false"
-              />
+              <AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
               <AccountBotIndicator v-if="account.bot" />
             </div>
             <AccountHandle :account="account" />
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index bb97a95a..564b5437 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -22,11 +22,7 @@ defineOptions({
     </AccountHoverWrapper>
     <div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none>
       <div flex="~" gap-2>
-        <ContentRich
-          font-bold line-clamp-1 ws-pre-wrap break-all text-lg
-          :content="getDisplayName(account, { rich: true })"
-          :emojis="account.emojis"
-        />
+        <AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
         <AccountBotIndicator v-if="account.bot" />
       </div>
       <AccountHandle :account="account" text-secondary-light />
diff --git a/components/account/AccountInlineInfo.vue b/components/account/AccountInlineInfo.vue
index d82f4d69..d5422d5b 100644
--- a/components/account/AccountInlineInfo.vue
+++ b/components/account/AccountInlineInfo.vue
@@ -16,11 +16,7 @@ const { link = true, avatar = true } = defineProps<{
       min-w-0 flex gap-2 items-center
     >
       <AccountAvatar v-if="avatar" :account="account" w-5 h-5 />
-      <ContentRich
-        line-clamp-1 ws-pre-wrap break-all
-        :content="getDisplayName(account, { rich: true })"
-        :emojis="account.emojis"
-      />
+      <AccountDisplayName :account="account" line-clamp-1 ws-pre-wrap break-all />
     </NuxtLink>
   </AccountHoverWrapper>
 </template>
diff --git a/components/notification/NotificationCard.vue b/components/notification/NotificationCard.vue
index 00f3e815..1c5d540e 100644
--- a/components/notification/NotificationCard.vue
+++ b/components/notification/NotificationCard.vue
@@ -18,11 +18,7 @@ const { notification } = defineProps<{
           :lang="notification.status?.language ?? undefined"
         >
           <div i-ri:user-follow-fill me-1 color-primary />
-          <ContentRich
-            text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all
-            :content="getDisplayName(notification.account, { rich: true })"
-            :emojis="notification.account.emojis"
-          />
+          <AccountDisplayName :account="notification.account" text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all />
           <span ws-nowrap>
             {{ $t('notification.followed_you') }}
           </span>
@@ -36,10 +32,9 @@ const { notification } = defineProps<{
     <template v-else-if="notification.type === 'admin.sign_up'">
       <div flex p3 items-center bg-shaded>
         <div i-ri:admin-fill me-1 color-purple />
-        <ContentRich
+        <AccountDisplayName
+          :account="notification.account"
           text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all
-          :content="getDisplayName(notification.account, { rich: true })"
-          :emojis="notification.account.emojis"
         />
         <span>{{ $t("notification.signed_up") }}</span>
       </div>
diff --git a/components/notification/NotificationGroupedFollow.vue b/components/notification/NotificationGroupedFollow.vue
index a5420053..b9b9f1dd 100644
--- a/components/notification/NotificationGroupedFollow.vue
+++ b/components/notification/NotificationGroupedFollow.vue
@@ -35,10 +35,9 @@ const lang = $computed(() => {
         </span>
       </template>
       <template v-else>
-        <ContentRich
+        <AccountDisplayName
+          :account="items.items[0]?.account"
           text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all
-          :content="getDisplayName(items.items[0]?.account, { rich: true })"
-          :emojis="items.items[0]?.account.emojis"
         />
         <span me-1 ws-nowrap>
           {{ $t('notification.followed_you') }}
diff --git a/components/search/SearchAccountInfo.vue b/components/search/SearchAccountInfo.vue
index dd55f5c6..931bc0e7 100644
--- a/components/search/SearchAccountInfo.vue
+++ b/components/search/SearchAccountInfo.vue
@@ -11,11 +11,7 @@ defineProps<{
     <AccountAvatar w-10 h-10 :account="account" shrink-0 />
     <div flex="~ col gap1" shrink h-full overflow-hidden leading-none>
       <div flex="~" gap-2>
-        <ContentRich
-          line-clamp-1 ws-pre-wrap break-all text-base
-          :content="getDisplayName(account, { rich: true })"
-          :emojis="account.emojis"
-        />
+        <AccountDisplayName :account="account" line-clamp-1 ws-pre-wrap break-all text-base />
         <AccountBotIndicator v-if="account.bot" />
       </div>
       <AccountHandle text-sm :account="account" text-secondary-light />
diff --git a/components/status/StatusAccountDetails.vue b/components/status/StatusAccountDetails.vue
index 01adc82d..3cb34594 100644
--- a/components/status/StatusAccountDetails.vue
+++ b/components/status/StatusAccountDetails.vue
@@ -13,11 +13,7 @@ const { account, link = true } = defineProps<{
     flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
     text-link-rounded
   >
-    <ContentRich
-      font-bold line-clamp-1 ws-pre-wrap break-all
-      :content="getDisplayName(account, { rich: true })"
-      :emojis="account.emojis"
-    />
+    <AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all />
     <AccountHandle :account="account" />
   </NuxtLink>
 </template>