diff --git a/src/lib/components/GroupedList/GroupedListItem.svelte b/src/lib/components/GroupedList/GroupedListItem.svelte
index f149a9a..8e873c0 100644
--- a/src/lib/components/GroupedList/GroupedListItem.svelte
+++ b/src/lib/components/GroupedList/GroupedListItem.svelte
@@ -6,6 +6,7 @@
 	type Props = {
 		icon?: IconSource | undefined;
 		selected?: boolean;
+		badge?: import('svelte').Snippet;
 		children?: import('svelte').Snippet;
 		class?: string;
 	} & (
@@ -17,6 +18,7 @@
 	let {
 		icon = undefined,
 		selected = false,
+		badge,
 		children,
 		class: externalClass,
 		...rest
@@ -39,9 +41,12 @@
 			mini
 		/>
 	{/if}
-	<div class="min-w-0 truncate text-start">
+	<div class="min-w-0 grow truncate text-start">
 		{@render children?.()}
 	</div>
+	{#if badge}
+		<div class="flex shrink-0 items-center gap-2">{@render badge()}</div>
+	{/if}
 {/snippet}
 
 {#if 'href' in rest}
diff --git a/src/routes/(app)/settings/account/profile/UsernameItem.svelte b/src/routes/(app)/settings/account/profile/UsernameItem.svelte
index ee894a8..b39eb9a 100644
--- a/src/routes/(app)/settings/account/profile/UsernameItem.svelte
+++ b/src/routes/(app)/settings/account/profile/UsernameItem.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
+	import Button from '$lib/components/Button.svelte';
 	import { GroupedListItem } from '$lib/components/GroupedList';
 	import LoadingIndicator from '$lib/components/LoadingIndicator.svelte';
 	import { idURLToUsername, validateIDURL } from '$lib/idURL';
 	import type { BlahIdentity } from '@blah-im/core/identity';
-	import { ExclamationCircle, ExclamationTriangle, Icon } from 'svelte-hero-icons';
+	import { AtSymbol, ExclamationCircle, ExclamationTriangle, Icon } from 'svelte-hero-icons';
 
 	interface Props {
 		url: string;
@@ -19,13 +20,19 @@
 </script>
 
 <GroupedListItem>
-	<span class="before:opacity-80 before:content-['@']">{idURLToUsername(url)}</span>
+	<div class="flex items-center gap-0.5">
+		<Icon micro src={AtSymbol} class="size-3.5 opacity-90" />
+		<span>{idURLToUsername(url)}</span>
+	</div>
 
-	{#await validate()}
-		<LoadingIndicator />
-	{:then result}
-		{#if result && !result.valid}
-			<Icon solid src={ExclamationCircle} class="size-5 text-red-500" />
-		{/if}
-	{/await}
+	{#snippet badge()}
+		{#await validate()}
+			<LoadingIndicator />
+		{:then result}
+			{#if result && !result.valid}
+				<Icon mini src={ExclamationCircle} class="size-5 fill-red-500 dark:fill-red-400" />
+				<Button>Fix</Button>
+			{/if}
+		{/await}
+	{/snippet}
 </GroupedListItem>