diff --git a/packages/ui/src/lib/components/discord/DiscordMessages.stories.tsx b/packages/ui/src/lib/components/discord/DiscordMessages.stories.tsx
index 3b4741eb4..7bd932541 100644
--- a/packages/ui/src/lib/components/discord/DiscordMessages.stories.tsx
+++ b/packages/ui/src/lib/components/discord/DiscordMessages.stories.tsx
@@ -126,6 +126,28 @@ export const Default = {
 			>
 				Interactions are supported! I definitely used a command.
 			</DiscordMessage>
+			<DiscordMessage
+				author={{
+					avatar: '/assets/discordjs.png',
+					bot: true,
+					verified: true,
+					color: 'text-red-500',
+					time: 'Today at 21:04',
+					username: 'Guide Bot',
+				}}
+				reply={{
+					author: {
+						avatar: '/assets/snek-bot.jpeg',
+						bot: true,
+						verified: true,
+						color: 'text-blue-500',
+						username: 'Snek Bot',
+					},
+					content: 'You can also have verified bots, like me!',
+				}}
+			>
+				Display colors are supported as well!
+			</DiscordMessage>
 		</DiscordMessages>
 	),
 	args: {
diff --git a/packages/ui/src/lib/components/discord/MessageAuthor.tsx b/packages/ui/src/lib/components/discord/MessageAuthor.tsx
index 22f743c45..0e41f81bb 100644
--- a/packages/ui/src/lib/components/discord/MessageAuthor.tsx
+++ b/packages/ui/src/lib/components/discord/MessageAuthor.tsx
@@ -17,14 +17,17 @@ export function DiscordMessageAuthor({ avatar, bot, verified, color, time, usern
 				className="absolute left-[16px] mt-0.5 h-10 w-10 cursor-pointer select-none rounded-full"
 				src={avatar}
 			/>
-			<h2 className="m-0 text-size-inherit font-medium leading-snug" id="user-info">
-				<span className="mr-1" id="username">
-					<span className={`cursor-pointer text-base font-medium hover:underline ${color ?? 'text-white'}`}>
+			<h2 className="m-0 flex place-items-center text-size-inherit font-medium leading-snug" id="user-info">
+				<span className="inline-flex place-items-center" id="username">
+					<span className={`mr-1.5 cursor-pointer text-base font-medium hover:underline ${color ?? 'text-white'}`}>
 						{username}
 					</span>
 					{bot ? (
-						<span className="relative top-1 ml-1 rounded bg-blurple px-1 vertical-top text-xs text-white" id="bot">
-							{verified ? <FiCheck className="mr-1 inline-block" /> : null}BOT
+						<span
+							className="mr-1 inline-flex place-items-center rounded bg-blurple px-1 vertical-top text-[0.7rem]/4 font-normal text-white"
+							id="bot"
+						>
+							{verified ? <FiCheck className="mr-0.5 inline-block stroke-3" /> : null} BOT
 						</span>
 					) : null}
 				</span>
diff --git a/packages/ui/src/lib/components/discord/MessageAuthorReply.tsx b/packages/ui/src/lib/components/discord/MessageAuthorReply.tsx
index 0ac3564c8..78688fd61 100644
--- a/packages/ui/src/lib/components/discord/MessageAuthorReply.tsx
+++ b/packages/ui/src/lib/components/discord/MessageAuthorReply.tsx
@@ -11,10 +11,13 @@ export interface IDiscordMessageAuthorReply {
 export function DiscordMessageAuthorReply({ avatar, bot, verified, color, username }: IDiscordMessageAuthorReply) {
 	return (
 		<>
-			<img alt={`${username}'s avatar`} className="mr-1 h-4 w-4 select-none rounded-full" src={avatar} />
+			<img alt={`${username}'s avatar`} className="mr-1.5 h-4 w-4 select-none rounded-full" src={avatar} />
 			{bot ? (
-				<div className="mr-1 rounded bg-blurple px-1 vertical-top text-xs text-white" id="bot">
-					{verified ? <FiCheck className="mr-1 inline-block" /> : null}BOT
+				<div
+					className="mr-1 inline-flex place-items-center rounded bg-blurple px-1 vertical-top text-[0.7rem]/4 font-normal text-white"
+					id="bot"
+				>
+					{verified ? <FiCheck className="mr-0.5 inline-block stroke-3" /> : null} BOT
 				</div>
 			) : null}
 			<span className={`mr-1 cursor-pointer select-none text-sm font-medium leading-snug ${color ?? 'text-white'}`}>