diff --git a/apps/guide/public/assets/snek-bot.jpeg b/apps/guide/public/assets/snek-bot.jpeg
new file mode 100644
index 000000000..59feb7835
Binary files /dev/null and b/apps/guide/public/assets/snek-bot.jpeg differ
diff --git a/apps/guide/src/content/01-home/03-how-to-contribute.mdx b/apps/guide/src/content/01-home/03-how-to-contribute.mdx
index 281a6e084..f732c7d04 100644
--- a/apps/guide/src/content/01-home/03-how-to-contribute.mdx
+++ b/apps/guide/src/content/01-home/03-how-to-contribute.mdx
@@ -136,6 +136,27 @@ Whenever some text does not need to be in the main body, you can put it here.
 	>
 		Interactions are supported! I definitely used a command.
 	</DiscordMessage>
+	<DiscordMessage
+		author={{
+			avatar: '/assets/discordjs.png',
+			bot: 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>
 
 ## Code blocks
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 780050eab..99b3cce3d 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -46,6 +46,7 @@
 	},
 	"homepage": "https://discord.js.org",
 	"dependencies": {
+		"@react-icons/all-files": "^4.1.0",
 		"ariakit": "^2.0.0-next.44",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
diff --git a/packages/ui/src/lib/components/discord/MessageAuthor.tsx b/packages/ui/src/lib/components/discord/MessageAuthor.tsx
index 482340f21..22f743c45 100644
--- a/packages/ui/src/lib/components/discord/MessageAuthor.tsx
+++ b/packages/ui/src/lib/components/discord/MessageAuthor.tsx
@@ -1,11 +1,15 @@
+import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
+
 export interface IDiscordMessageAuthor {
 	avatar: string;
 	bot?: boolean;
+	color?: string;
 	time: string;
 	username: string;
+	verified?: boolean;
 }
 
-export function DiscordMessageAuthor({ avatar, username, bot, time }: IDiscordMessageAuthor) {
+export function DiscordMessageAuthor({ avatar, bot, verified, color, time, username }: IDiscordMessageAuthor) {
 	return (
 		<>
 			<img
@@ -15,10 +19,12 @@ export function DiscordMessageAuthor({ avatar, username, bot, time }: IDiscordMe
 			/>
 			<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 text-white hover:underline">{username}</span>
+					<span className={`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">
-							BOT
+							{verified ? <FiCheck className="mr-1 inline-block" /> : 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 1b8de583d..0ac3564c8 100644
--- a/packages/ui/src/lib/components/discord/MessageAuthorReply.tsx
+++ b/packages/ui/src/lib/components/discord/MessageAuthorReply.tsx
@@ -1,19 +1,23 @@
+import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
+
 export interface IDiscordMessageAuthorReply {
 	avatar: string;
 	bot?: boolean;
+	color?: string;
 	username: string;
+	verified?: boolean;
 }
 
-export function DiscordMessageAuthorReply({ avatar, bot, username }: 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} />
 			{bot ? (
 				<div className="mr-1 rounded bg-blurple px-1 vertical-top text-xs text-white" id="bot">
-					BOT
+					{verified ? <FiCheck className="mr-1 inline-block" /> : null}BOT
 				</div>
 			) : null}
-			<span className="mr-1 cursor-pointer select-none text-sm font-medium leading-snug text-white hover:underline">
+			<span className={`mr-1 cursor-pointer select-none text-sm font-medium leading-snug ${color ?? 'text-white'}`}>
 				{username}
 			</span>
 		</>