diff --git a/app/soapbox/components/__tests__/display_name.test.js b/app/soapbox/components/__tests__/display_name.test.js
index 00e175d40f..6d0a05ed5a 100644
Binary files a/app/soapbox/components/__tests__/display_name.test.js and b/app/soapbox/components/__tests__/display_name.test.js differ
diff --git a/app/soapbox/components/display-name.tsx b/app/soapbox/components/display-name.tsx
new file mode 100644
index 0000000000..d27d0efc7f
--- /dev/null
+++ b/app/soapbox/components/display-name.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+
+import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
+import { useSoapboxConfig } from 'soapbox/hooks';
+
+import { getAcct } from '../utils/accounts';
+
+import Icon from './icon';
+import RelativeTimestamp from './relative_timestamp';
+import VerificationBadge from './verification_badge';
+
+import type { Account } from 'soapbox/types/entities';
+
+interface IDisplayName {
+  account: Account
+  withDate?: boolean
+}
+
+const DisplayName: React.FC<IDisplayName> = ({ account, children, withDate = false }) => {
+  const { displayFqn = false } = useSoapboxConfig();
+  const { created_at: createdAt, verified } = account;
+
+  const joinedAt = createdAt ? (
+    <div className='account__joined-at'>
+      <Icon src={require('@tabler/icons/icons/clock.svg')} />
+      <RelativeTimestamp timestamp={createdAt} />
+    </div>
+  ) : null;
+
+  const displayName = (
+    <span className='display-name__name'>
+      <bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>
+      {verified && <VerificationBadge />}
+      {withDate && joinedAt}
+    </span>
+  );
+
+  const suffix = (<span className='display-name__account'>@{getAcct(account, displayFqn)}</span>);
+
+  return (
+    <span className='display-name' data-testid='display-name'>
+      <HoverRefWrapper accountId={account.get('id')} inline>
+        {displayName}
+      </HoverRefWrapper>
+      {suffix}
+      {children}
+    </span>
+  );
+};
+
+export default DisplayName;
diff --git a/app/soapbox/components/display_name.js b/app/soapbox/components/display_name.js
deleted file mode 100644
index 141988697a..0000000000
Binary files a/app/soapbox/components/display_name.js and /dev/null differ
diff --git a/app/soapbox/features/account_timeline/components/moved_note.tsx b/app/soapbox/features/account_timeline/components/moved_note.tsx
index 6e901252d9..0ba6d8da56 100644
--- a/app/soapbox/features/account_timeline/components/moved_note.tsx
+++ b/app/soapbox/features/account_timeline/components/moved_note.tsx
@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 
 import AvatarOverlay from 'soapbox/components/avatar_overlay';
-import DisplayName from 'soapbox/components/display_name';
+import DisplayName from 'soapbox/components/display-name';
 import Icon from 'soapbox/components/icon';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities';
diff --git a/app/soapbox/features/aliases/components/account.js b/app/soapbox/features/aliases/components/account.js
index 38bce11bb0..8d0ccfbe39 100644
Binary files a/app/soapbox/features/aliases/components/account.js and b/app/soapbox/features/aliases/components/account.js differ
diff --git a/app/soapbox/features/birthdays/account.tsx b/app/soapbox/features/birthdays/account.tsx
index 94b7e08a6e..eea3266e2c 100644
--- a/app/soapbox/features/birthdays/account.tsx
+++ b/app/soapbox/features/birthdays/account.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import Avatar from 'soapbox/components/avatar';
-import DisplayName from 'soapbox/components/display_name';
+import DisplayName from 'soapbox/components/display-name';
 import Icon from 'soapbox/components/icon';
 import Permalink from 'soapbox/components/permalink';
 import { useAppSelector } from 'soapbox/hooks';
diff --git a/app/soapbox/features/chats/components/chat.tsx b/app/soapbox/features/chats/components/chat.tsx
index afb1d9df81..8e10a2f918 100644
--- a/app/soapbox/features/chats/components/chat.tsx
+++ b/app/soapbox/features/chats/components/chat.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Avatar from 'soapbox/components/avatar';
-import DisplayName from 'soapbox/components/display_name';
+import DisplayName from 'soapbox/components/display-name';
 import Icon from 'soapbox/components/icon';
 import emojify from 'soapbox/features/emoji/emoji';
 import { useAppSelector } from 'soapbox/hooks';
diff --git a/app/soapbox/features/directory/components/account_card.js b/app/soapbox/features/directory/components/account_card.js
index 18edafa7d7..542a05344d 100644
Binary files a/app/soapbox/features/directory/components/account_card.js and b/app/soapbox/features/directory/components/account_card.js differ
diff --git a/app/soapbox/features/follow_recommendations/components/account.tsx b/app/soapbox/features/follow_recommendations/components/account.tsx
index 6ba90ecd28..67bb18f509 100644
--- a/app/soapbox/features/follow_recommendations/components/account.tsx
+++ b/app/soapbox/features/follow_recommendations/components/account.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import Avatar from 'soapbox/components/avatar';
-import DisplayName from 'soapbox/components/display_name';
+import DisplayName from 'soapbox/components/display-name';
 import Permalink from 'soapbox/components/permalink';
 import ActionButton from 'soapbox/features/ui/components/action-button';
 import { useAppSelector } from 'soapbox/hooks';
diff --git a/app/soapbox/features/follow_requests/components/account_authorize.tsx b/app/soapbox/features/follow_requests/components/account_authorize.tsx
index cd46f78174..ff66df26b8 100644
--- a/app/soapbox/features/follow_requests/components/account_authorize.tsx
+++ b/app/soapbox/features/follow_requests/components/account_authorize.tsx
@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux';
 
 import { authorizeFollowRequest, rejectFollowRequest } from 'soapbox/actions/accounts';
 import Avatar from 'soapbox/components/avatar';
-import DisplayName from 'soapbox/components/display_name';
+import DisplayName from 'soapbox/components/display-name';
 import IconButton from 'soapbox/components/icon_button';
 import Permalink from 'soapbox/components/permalink';
 import { useAppSelector } from 'soapbox/hooks';
diff --git a/app/soapbox/features/list_adder/components/account.js b/app/soapbox/features/list_adder/components/account.js
index 014f3ac22a..184339572d 100644
Binary files a/app/soapbox/features/list_adder/components/account.js and b/app/soapbox/features/list_adder/components/account.js differ
diff --git a/app/soapbox/features/list_editor/components/account.js b/app/soapbox/features/list_editor/components/account.js
index 8054bb52ff..e73a465ca9 100644
Binary files a/app/soapbox/features/list_editor/components/account.js and b/app/soapbox/features/list_editor/components/account.js differ
diff --git a/app/soapbox/features/notifications/components/follow_request.js b/app/soapbox/features/notifications/components/follow_request.js
index 2bf25131b6..4c386227e4 100644
Binary files a/app/soapbox/features/notifications/components/follow_request.js and b/app/soapbox/features/notifications/components/follow_request.js differ
diff --git a/app/soapbox/features/reply_mentions/account.js b/app/soapbox/features/reply_mentions/account.js
index 1ef60ddf6d..b9bf62d51e 100644
Binary files a/app/soapbox/features/reply_mentions/account.js and b/app/soapbox/features/reply_mentions/account.js differ
diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status.js b/app/soapbox/features/scheduled_statuses/components/scheduled_status.js
index 6c05d8e2ae..b88ccc4502 100644
Binary files a/app/soapbox/features/scheduled_statuses/components/scheduled_status.js and b/app/soapbox/features/scheduled_statuses/components/scheduled_status.js differ