diff --git a/src/components/player/badge.tsx b/src/components/player/badge.tsx
new file mode 100644
index 0000000..d46434c
--- /dev/null
+++ b/src/components/player/badge.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { DEVUUIDS } from "@/data/general"
+import { Tooltip } from "react-tooltip"
+import DeveloperBadge from "../svgs/developer-badge"
+
+export function DevBadge({ uuid, size }: { uuid: string, size?: number }) {
+    if (!DEVUUIDS.includes(uuid)) return null
+
+    return (
+        <>
+            <DeveloperBadge
+                data-id="dev-badge"
+                data-tooltip-id="dev-badge"
+                data-tooltip-content="Developer"
+                size={size}
+            />
+            <Tooltip id="dev-badge" />
+        </>
+    )
+}
diff --git a/src/components/player/displayname.tsx b/src/components/player/displayname.tsx
index f7a0b58..a3abcb6 100644
--- a/src/components/player/displayname.tsx
+++ b/src/components/player/displayname.tsx
@@ -1,10 +1,9 @@
-import { DEVUUIDS } from "@/data/general"
 import { getColor } from "@/lib/colors"
 import { head } from "@/lib/hypixel/general"
 import { Player } from "@/lib/schema/player"
 import Image from "next/image"
 import Link from "next/link"
-import DeveloperBadge from "../svgs/developer-badge"
+import { DevBadge } from "./badge"
 import { OnlineStatus } from "./online-status"
 
 type NewPackageRank = Player["player"]["newPackageRank"]
@@ -29,7 +28,7 @@ export default function DisplayName(
 ) {
     return (
         <div className="flex gap-2 items-center">
-            {DEVUUIDS.includes(uuid) && <DeveloperBadge size={40} />}
+            <DevBadge uuid={uuid} size={40} />
             <Link href={`https://namemc.com/profile/${uuid}`}>
                 <Image
                     src={head(uuid, 40)}
diff --git a/src/components/svgs/developer-badge.tsx b/src/components/svgs/developer-badge.tsx
index 769af0f..dbf2883 100644
--- a/src/components/svgs/developer-badge.tsx
+++ b/src/components/svgs/developer-badge.tsx
@@ -1,6 +1,8 @@
-export default function DeveloperBadge({ size = 32 }: { size?: number }) {
+import { ComponentProps } from "react"
+
+export default function DeveloperBadge({ size = 32, ...props }: { size?: number } & ComponentProps<SVGSVGElement>) {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height={size} width={size}>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height={size} width={size} {...props}>
             <path
                 fill="#3e70dd"
                 d="M21.58 11.4L17.3 4.01l-.35-.6H7.04l-.35.6-4.27 7.39-.35.6.35.6 4.27 7.39.35.6h9.92l.35-.6 4.28-7.39.35-.6-.36-.6zM8.51 10.37L6.88 12l1.63 1.63v2.73L4.15 12l4.37-4.37v2.74zm3.12 6.93l-2.04-.63 3.1-9.98 2.04.64-3.1 9.97zm3.86-.93v-2.73L17.12 12l-1.63-1.63V7.63L19.85 12l-4.36 4.37z"