diff --git a/src/lib/app.svelte.ts b/src/lib/app.svelte.ts
index b3f34fb1..5c8efd19 100644
--- a/src/lib/app.svelte.ts
+++ b/src/lib/app.svelte.ts
@@ -3,6 +3,7 @@ import { SvelteMap } from "svelte/reactivity";
 import { handlers } from "./handlers";
 import { History } from "./history.svelte";
 import { log } from "./log";
+import { BadgeManager } from "./managers/badge-manager";
 import { ChannelManager } from "./managers/channel-manager";
 import { EmoteManager } from "./managers/emote-manager";
 import { SplitLayout } from "./split-layout";
@@ -64,7 +65,7 @@ class App {
 	/**
 	 * Provider-specific global badges.
 	 */
-	public readonly badges = new Map<string, Badge>();
+	public readonly badges = new BadgeManager();
 
 	/**
 	 * 7TV paints.
diff --git a/src/lib/commands/built-in/reload-badges.ts b/src/lib/commands/built-in/reload-badges.ts
index 310f7b94..a7d74d36 100644
--- a/src/lib/commands/built-in/reload-badges.ts
+++ b/src/lib/commands/built-in/reload-badges.ts
@@ -1,21 +1,34 @@
-import { CommandError } from "$lib/errors/command-error";
-import { ErrorMessage } from "$lib/errors/messages";
-import { defineCommand, parseBool } from "../util";
+import { app } from "$lib/app.svelte";
+import { defineCommand } from "../util";
 
 export default defineCommand({
 	provider: "Built-in",
 	name: "reload-badges",
-	description: "Reload all badges for the channel and optionally global badges",
-	args: ["include-global"],
+	description:
+		"Reload all badges for the channel and optionally badges from a comma-separated list of providers",
+	args: ["providers"],
 	async exec(args, channel) {
-		const includeGlobal = parseBool(args[0]);
+		const providers = args[0]?.split(",") ?? [];
 
-		if (includeGlobal === null) {
-			throw new CommandError(ErrorMessage.INVALID_BOOL_ARG);
-		}
+		if (providers.includes("all")) {
+			await app.badges.fetch(true);
+		} else {
+			const promises: Promise<unknown>[] = [channel.fetchBadges(true)];
+
+			if (providers.includes("twitch")) {
+				promises.push(app.badges.fetchTwitch(true));
+			}
+
+			if (providers.includes("bttv")) {
+				promises.push(app.badges.fetchBttv(true));
+			}
 
-		await channel.client.fetchBadges(includeGlobal);
-		await channel.fetchBadges(true);
+			if (providers.includes("chatterino")) {
+				promises.push(app.badges.fetchChatterino(true));
+			}
+
+			await Promise.all(promises);
+		}
 
 		channel.chat.addSystemMessage("Reloaded badges.");
 	},
diff --git a/src/lib/components/User.svelte b/src/lib/components/User.svelte
index 29246b54..4acdf77f 100644
--- a/src/lib/components/User.svelte
+++ b/src/lib/components/User.svelte
@@ -182,12 +182,12 @@
 					: relationship.badges.slice(0, 10)}
 
 				<div class="flex flex-wrap items-center gap-1">
-					{#each badges as badge (`${badge.setID}:${badge.version}`)}
+					{#each badges as badge (badge.id)}
 						<img
 							class="size-4"
-							src={badge.imageURL}
-							alt={badge.title}
 							title={badge.title}
+							src={badge.imageUrl}
+							alt={badge.description}
 						/>
 					{/each}
 
diff --git a/src/lib/components/message/Message.svelte b/src/lib/components/message/Message.svelte
index ac14cce6..6cc46bb3 100644
--- a/src/lib/components/message/Message.svelte
+++ b/src/lib/components/message/Message.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { app } from "$lib/app.svelte";
-	import type { Badge } from "$lib/graphql/twitch";
 	import type { LinkNode } from "$lib/models/message/parse";
 	import type { UserMessage } from "$lib/models/message/user-message";
 	import { settings } from "$lib/settings";
@@ -17,36 +15,8 @@
 
 	const { message, nested = false }: Props = $props();
 
-	const badges: Badge[] = [];
 	const linkNodes = $derived(message.nodes.filter((n) => n.type === "link"));
 
-	if (message.shared) {
-		const { user } = message.source;
-
-		badges.push({
-			setID: user.id,
-			version: "1",
-			title: user.displayName,
-			description: user.displayName,
-			imageURL: user.avatarUrl,
-		});
-	}
-
-	for (const badge of message.badges) {
-		const chatBadge = message.source.badges.get(badge);
-		const globalBadge = app.twitch.badges.get(badge);
-
-		const resolved = chatBadge ?? globalBadge;
-
-		if (resolved) {
-			badges.push(resolved);
-		}
-	}
-
-	if (message.author.badge) {
-		badges.push(message.author.badge);
-	}
-
 	function canEmbed(node: LinkNode) {
 		return (
 			node.data.tld.domain === "7tv.app" ||
@@ -59,17 +29,18 @@
 
 <Timestamp date={message.timestamp} />
 
-{#each badges as badge (badge.title)}
+{#each message.badges as badge (badge.id)}
 	<Tooltip.Root>
 		<Tooltip.Trigger>
 			{#snippet child({ props })}
 				<img
 					{...props}
-					class="inline-block align-middle"
-					src={badge.imageURL}
+					class={["inline-block align-middle", badge.color && "rounded-xs"]}
+					src={badge.imageUrl}
 					alt={badge.description}
 					width="18"
 					height="18"
+					style:background-color={badge.color}
 				/>
 			{/snippet}
 		</Tooltip.Trigger>
diff --git a/src/lib/handlers/irc/privmsg.ts b/src/lib/handlers/irc/privmsg.ts
index 54f41ef2..a78e1706 100644
--- a/src/lib/handlers/irc/privmsg.ts
+++ b/src/lib/handlers/irc/privmsg.ts
@@ -9,16 +9,17 @@ export default defineHandler({
 		if (!channel) return;
 
 		const message = new UserMessage(channel, data);
+		const badges = (data.source ?? data).badges;
 
 		message.author.color = data.name_color;
 		message.author.username = data.sender.login;
 		message.author.displayName = data.sender.name;
 
 		message.viewer ??= await channel.viewers.fetch(data.sender.id);
-		message.viewer.broadcaster = message.badges.some((b) => b.startsWith("broadcaster"));
+		message.viewer.broadcaster = badges.some((b) => b.name.startsWith("broadcaster"));
 		message.viewer.moderator = message.viewer.broadcaster || data.is_mod;
 		message.viewer.subscriber = data.is_subscriber;
-		message.viewer.vip = message.badges.some((b) => b.startsWith("vip"));
+		message.viewer.vip = badges.some((b) => b.name.startsWith("vip"));
 		message.viewer.returning = data.is_returning_chatter;
 		message.viewer.new = data.is_first_msg;
 
diff --git a/src/lib/handlers/irc/whisper.ts b/src/lib/handlers/irc/whisper.ts
index c235d221..7f88a5e5 100644
--- a/src/lib/handlers/irc/whisper.ts
+++ b/src/lib/handlers/irc/whisper.ts
@@ -1,6 +1,7 @@
 import { page } from "$app/state";
 import { app } from "$lib/app.svelte";
 import { Whisper } from "$lib/models/whisper.svelte";
+import { getOrInsertComputed } from "$lib/util";
 import { defineHandler } from "../helper";
 
 export default defineHandler({
@@ -10,17 +11,17 @@ export default defineHandler({
 
 		const sender = await app.twitch.users.fetch(data.sender.id);
 
-		if (!app.user.whispers.has(sender.id)) {
-			app.user.whispers.set(sender.id, new Whisper(app.twitch, sender));
-		}
-
-		const whisper = app.user.whispers.get(sender.id)!;
+		const whisper = getOrInsertComputed(
+			app.user.whispers,
+			sender.id,
+			() => new Whisper(app.twitch, sender),
+		);
 
 		whisper.messages.push({
 			id: data.message_id,
 			createdAt: new Date(),
 			badges: data.badges
-				.map((b) => app.twitch.badges.get(`${b.name}:${b.version}`))
+				.map((b) => app.badges.get(`${b.name}:${b.version}`))
 				.filter((b) => b != null),
 			user: sender,
 			text: data.message_text,
diff --git a/src/lib/handlers/seventv/cosmetic-create.ts b/src/lib/handlers/seventv/cosmetic-create.ts
index 2f606b2a..d94c27d2 100644
--- a/src/lib/handlers/seventv/cosmetic-create.ts
+++ b/src/lib/handlers/seventv/cosmetic-create.ts
@@ -1,4 +1,5 @@
 import { app } from "$lib/app.svelte";
+import { Badge } from "$lib/models/badge";
 import { defineHandler } from "../helper";
 
 function toRgb(decimal: number) {
@@ -16,13 +17,16 @@ export default defineHandler({
 		if (cosmetic.kind === "BADGE") {
 			const file = cosmetic.data.host.files.find((f) => f.name.startsWith("4x"))!;
 
-			app.badges.set(cosmetic.id, {
-				setID: cosmetic.id,
-				version: "1",
-				title: cosmetic.data.name,
-				description: cosmetic.data.tooltip,
-				imageURL: `https:${cosmetic.data.host.url}/${file.name}`,
-			});
+			app.badges.set(
+				cosmetic.id,
+				new Badge({
+					setId: "7tv",
+					version: cosmetic.id,
+					title: cosmetic.data.name,
+					description: cosmetic.data.tooltip,
+					imageUrl: `https:${cosmetic.data.host.url}/${file.name}`,
+				}),
+			);
 
 			return;
 		}
diff --git a/src/lib/handlers/seventv/entitlement-create.ts b/src/lib/handlers/seventv/entitlement-create.ts
index bc0936d5..7a49bf49 100644
--- a/src/lib/handlers/seventv/entitlement-create.ts
+++ b/src/lib/handlers/seventv/entitlement-create.ts
@@ -1,4 +1,5 @@
 import { app } from "$lib/app.svelte";
+import { getOrInsert } from "$lib/util";
 import { defineHandler } from "../helper";
 
 export default defineHandler({
@@ -11,7 +12,10 @@ export default defineHandler({
 
 		switch (data.kind) {
 			case "BADGE": {
-				app.u2b.set(user.id, app.badges.get(data.ref_id));
+				const badge = app.badges.get(data.ref_id);
+				if (!badge) return;
+
+				getOrInsert(app.badges.users, user.id, []).push(badge);
 				break;
 			}
 
diff --git a/src/lib/managers/badge-manager.ts b/src/lib/managers/badge-manager.ts
new file mode 100644
index 00000000..4a2c4ce0
--- /dev/null
+++ b/src/lib/managers/badge-manager.ts
@@ -0,0 +1,181 @@
+import { betterFetch as fetch } from "@better-fetch/fetch";
+import { SvelteMap } from "svelte/reactivity";
+import * as cache from "tauri-plugin-cache-api";
+import { ApiError } from "$lib/errors/api-error";
+import { sendTwitch } from "$lib/graphql";
+import { globalBadgesQuery } from "$lib/graphql/twitch";
+import { Badge } from "$lib/models/badge";
+import type { BttvBadge, ChatterinoBadge, FfzBadge } from "$lib/models/badge";
+import { getOrInsert, getOrInsertComputed } from "$lib/util";
+
+interface BttvUser {
+	providerId: string;
+	badge: BttvBadge;
+}
+
+interface FfzResponse {
+	badges: FfzBadge[];
+	users: Record<string, number[]>;
+}
+
+export class BadgeManager extends SvelteMap<string, Badge> {
+	/**
+	 * A map of user ids to provider-specific badges.
+	 */
+	public readonly users = new SvelteMap<string, Badge[]>();
+
+	public async fetch(force = false) {
+		await Promise.all([
+			this.fetchTwitch(force),
+			this.fetchBttv(force),
+			this.fetchChatterino(force),
+			this.fetchFfz(force),
+		]);
+	}
+
+	/**
+	 * Retrieves the list of global badges and caches them for later use.
+	 */
+	public async fetchTwitch(force = false) {
+		let badges = await cache.get<Badge[]>("global_badges");
+
+		if (!badges || force) {
+			if (force) this.clear();
+
+			const { badges: data } = await sendTwitch(globalBadgesQuery);
+			badges = data?.flatMap((b) => (b ? [Badge.fromGql(b)] : [])) ?? [];
+
+			// Twitch adds new badges fairly often, so ttl is lower than the
+			// global emote cache
+			await cache.set("global_badges", badges, { ttl: 3 * 24 * 60 * 60 });
+		}
+
+		for (const badge of badges) {
+			this.set(badge.id, badge);
+		}
+
+		return badges;
+	}
+
+	public async fetchBttv(force = false) {
+		let response = await cache.get<BttvUser[]>("bttv_badges");
+
+		if (!response || force) {
+			if (force) {
+				await cache.remove("bttv_badges");
+			}
+
+			const { data, error } = await fetch<BttvUser[]>(
+				"https://api.betterttv.net/3/cached/badges",
+			);
+
+			if (error) {
+				throw new ApiError(error.status, error.message ?? error.statusText);
+			}
+
+			response = data;
+			await cache.set("bttv_badges", response);
+		}
+
+		for (const user of response) {
+			const id = `bttv:${user.badge.type}`;
+
+			const badge = getOrInsertComputed(this, id, () => {
+				return new Badge({
+					setId: "bttv",
+					version: user.badge.type.toString(),
+					title: user.badge.description,
+					description: user.badge.description,
+					imageUrl: user.badge.svg,
+				});
+			});
+
+			getOrInsert(this.users, user.providerId, []).push(badge);
+		}
+	}
+
+	public async fetchChatterino(force = false) {
+		let badges = await cache.get<ChatterinoBadge[]>("chatterino_badges");
+
+		if (!badges || force) {
+			if (force) {
+				await cache.remove("chatterino_badges");
+			}
+
+			const { data, error } = await fetch<{ badges: ChatterinoBadge[] }>(
+				"https://api.chatterino.com/badges",
+			);
+
+			if (error) {
+				throw new ApiError(error.status, error.message ?? error.statusText);
+			}
+
+			badges = data.badges;
+			await cache.set("chatterino_badges", badges);
+		}
+
+		for (const data of badges) {
+			const setId = data.tooltip.toLowerCase().replace(/\s+/g, "-");
+
+			const badge = new Badge({
+				setId,
+				version: "1",
+				title: data.tooltip,
+				description: data.tooltip,
+				imageUrl: data.image3,
+			});
+
+			for (const id of data.users) {
+				getOrInsert(this.users, id, []).push(badge);
+			}
+		}
+	}
+
+	public async fetchFfz(force = false) {
+		let response = await cache.get<FfzResponse>("ffz_badges");
+
+		if (!response || force) {
+			if (force) {
+				await cache.remove("ffz_badges");
+			}
+
+			const { data, error } = await fetch<FfzResponse>(
+				"https://api.frankerfacez.com/v1/badges/ids",
+			);
+
+			if (error) {
+				throw new ApiError(error.status, error.message ?? error.statusText);
+			}
+
+			response = data;
+			await cache.set("ffz_badges", response);
+		}
+
+		const badges: Record<string, Badge> = {};
+
+		for (const data of response.badges) {
+			if (data.id === 2) continue;
+
+			const version = data.id.toString();
+
+			badges[version] = new Badge({
+				setId: "ffz",
+				version,
+				title: data.title,
+				description: data.title,
+				color: data.color,
+				imageUrl: data.urls["4"],
+			});
+		}
+
+		for (const [badgeId, users] of Object.entries(response.users)) {
+			if (badgeId === "2") continue;
+
+			const badge = badges[badgeId];
+
+			for (const id of users) {
+				getOrInsert(this.users, id.toString(), []).push(badge);
+			}
+		}
+	}
+}
diff --git a/src/lib/models/badge.ts b/src/lib/models/badge.ts
new file mode 100644
index 00000000..0f5a3afe
--- /dev/null
+++ b/src/lib/models/badge.ts
@@ -0,0 +1,91 @@
+import type { Badge as ApiBadge } from "$lib/graphql/twitch";
+
+export interface BttvBadge {
+	type: number;
+	description: string;
+	svg: string;
+}
+
+export interface ChatterinoBadge {
+	tooltip: string;
+	image1: string;
+	image2: string;
+	image3: string;
+	users: string[];
+}
+
+export interface FfzBadge {
+	id: number;
+	name: string;
+	title: string;
+	color: string;
+	urls: Record<string, string>;
+}
+
+interface BadgeData {
+	setId: string;
+	version: string;
+	title: string;
+	description: string;
+	color?: string;
+	imageUrl: string;
+}
+
+export class Badge {
+	/**
+	 * The id of the badge. This is in the form of `{setId}:{version}`.
+	 */
+	public readonly id: string;
+
+	/**
+	 * The id of the set the badge belongs to.
+	 */
+	public readonly setId: string;
+
+	/**
+	 * The version of the badge within its set.
+	 */
+	public readonly version: string;
+
+	/**
+	 * The title of the badge. This is the text displayed when hovering over
+	 * the badge.
+	 */
+	public readonly title: string;
+
+	/**
+	 * The description of the badge. This is the alt text for the badge image.
+	 * In most cases, this is the same as the title.
+	 */
+	public readonly description: string;
+
+	/**
+	 * The background color of the badge if any.
+	 */
+	public readonly color?: string;
+
+	/**
+	 * The url of the badge image.
+	 */
+	public readonly imageUrl: string;
+
+	public constructor(data: BadgeData) {
+		this.id = `${data.setId}:${data.version}`;
+		this.setId = data.setId;
+		this.version = data.version;
+		this.title = data.title;
+		this.description = data.description;
+		this.color = data.color;
+		this.imageUrl = data.imageUrl;
+	}
+
+	public static fromGql(data: ApiBadge) {
+		return new Badge({
+			setId: data.setID,
+			version: data.version,
+			title: data.title,
+			description: data.description,
+			imageUrl: data.imageURL,
+		});
+	}
+}
diff --git a/src/lib/models/channel.svelte.ts b/src/lib/models/channel.svelte.ts
index 842ce3c0..95cad1df 100644
--- a/src/lib/models/channel.svelte.ts
+++ b/src/lib/models/channel.svelte.ts
@@ -1,7 +1,7 @@
 import { invoke } from "@tauri-apps/api/core";
 import * as cache from "tauri-plugin-cache-api";
 import { channelBadgesQuery, cheermoteQuery, streamQuery } from "$lib/graphql/twitch";
-import type { Badge, Cheermote } from "$lib/graphql/twitch";
+import type { Cheermote } from "$lib/graphql/twitch";
 import { ChannelEmoteManager } from "$lib/managers/channel-emote-manager";
 import { fetch7tvId } from "$lib/seventv";
 import { app } from "../app.svelte";
@@ -9,6 +9,7 @@ import { ViewerManager } from "../managers/viewer-manager";
 import { settings } from "../settings";
 import type { StreamMarker } from "../twitch/api";
 import type { TwitchClient } from "../twitch/client";
+import { Badge } from "./badge";
 import { Chat } from "./chat.svelte";
 import { Stream } from "./stream.svelte";
 import { Viewer } from "./viewer.svelte";
@@ -177,13 +178,13 @@ export class Channel {
 			if (force) this.badges.clear();
 
 			const { user } = await this.client.send(channelBadgesQuery, { id: this.id });
+			badges = user?.broadcastBadges?.flatMap((b) => (b ? [Badge.fromGql(b)] : [])) ?? [];
 
-			badges = user?.broadcastBadges?.filter((b) => b != null) ?? [];
 			await cache.set(`badges:${this.id}`, badges);
 		}
 
 		for (const badge of badges) {
-			this.badges.set(`${badge.setID}:${badge.version}`, badge);
+			this.badges.set(badge.id, badge);
 		}
 
 		return this.badges;
diff --git a/src/lib/models/message/user-message.ts b/src/lib/models/message/user-message.ts
index 71758b3d..19fd8607 100644
--- a/src/lib/models/message/user-message.ts
+++ b/src/lib/models/message/user-message.ts
@@ -9,6 +9,7 @@ import type {
 	UserNoticeMessage,
 } from "$lib/twitch/irc";
 import { extractEmotes } from "$lib/util";
+import { Badge } from "../badge";
 import { User } from "../user.svelte";
 import { Viewer } from "../viewer.svelte";
 import type { Channel } from "../channel.svelte";
@@ -71,9 +72,9 @@ export class UserMessage extends Message {
 	public readonly shared: boolean;
 
 	/**
-	 * The badges sent with the message. This is in the form of `setID:version`.
+	 * The badges sent with the message.
 	 */
-	public readonly badges: string[];
+	public readonly badges: Badge[] = [];
 
 	/**
 	 * The amount of bits sent with the message if it was a cheer.
@@ -123,13 +124,12 @@ export class UserMessage extends Message {
 		this.highlighted = "is_highlighted" in data && data.is_highlighted;
 		this.shared = data.source != null;
 
-		const { badges } = data.source ?? data;
-		this.badges = badges.map((b) => `${b.name}:${b.version}`);
-
 		this.bits = "bits" in data ? (data.bits ?? 0) : 0;
 		this.event = "event" in data ? data.event : null;
 		this.reply = "reply" in data ? data.reply : null;
 		this.source = this.channel;
+
+		this.#populateBadges();
 	}
 
 	/**
@@ -242,6 +242,54 @@ export class UserMessage extends Message {
 		await this.#updateHeldMessage(false);
 	}
 
+	#populateBadges() {
+		if (this.shared) {
+			const { user } = this.source;
+
+			this.badges.push(
+				new Badge({
+					setId: "shared-chat",
+					version: user.id,
+					title: user.displayName,
+					description: user.displayName,
+					imageUrl: user.avatarUrl,
+				}),
+			);
+		}
+
+		for (const badge of (this.data.source ?? this.data).badges) {
+			const id = `${badge.name}:${badge.version}`;
+
+			const chatBadge = this.source.badges.get(id);
+			const globalBadge = app.badges.get(id);
+
+			const resolved = chatBadge ?? globalBadge;
+
+			if (resolved) {
+				this.badges.push(resolved);
+			}
+		}
+
+		const providerBadges = app.badges.users.get(this.author.id);
+
+		if (providerBadges) {
+			function getPriority(id: string) {
+				if (id.startsWith("chatterino")) return 0;
+				if (id === "ffz") return 1;
+				if (id === "bttv") return 2;
+				if (id === "7tv") return 3;
+
+				return 4;
+			}
+
+			providerBadges.sort((a, b) => {
+				return getPriority(a.setId) - getPriority(b.setId);
+			});
+
+			this.badges.push(...providerBadges);
+		}
+	}
+
 	async #updateHeldMessage(allow: boolean) {
 		if (!app.user?.moderating.has(this.channel.id)) {
 			return;
diff --git a/src/lib/models/user.svelte.ts b/src/lib/models/user.svelte.ts
index 6e60dd1c..09a91136 100644
--- a/src/lib/models/user.svelte.ts
+++ b/src/lib/models/user.svelte.ts
@@ -4,13 +4,14 @@ import { app } from "$lib/app.svelte";
 import type { Emote } from "$lib/emotes";
 import { ApiError } from "$lib/errors/api-error";
 import { userBadgesQuery } from "$lib/graphql/twitch";
-import type { User as ApiUser, Badge } from "$lib/graphql/twitch";
+import type { User as ApiUser } from "$lib/graphql/twitch";
 import { settings } from "$lib/settings";
 import type { Paint } from "$lib/seventv";
 import { COLORS } from "$lib/twitch";
 import type { SubscriptionAge } from "$lib/twitch/api";
 import type { TwitchClient } from "$lib/twitch/client";
 import { dedupe, makeReadable } from "$lib/util";
+import { Badge } from "./badge";
 
 export interface RelationshipSubscription {
 	/**
@@ -105,11 +106,6 @@ export class User {
 	 */
 	public username: string;
 
-	/**
-	 * The 7TV badge for the user if they have one set.
-	 */
-	public readonly badge?: Badge;
-
 	/**
 	 * The 7TV paint for the user if they have one set.
 	 */
@@ -141,7 +137,7 @@ export class User {
 		this.avatarUrl = $state(data.profileImageURL ?? "");
 		this.bannerUrl = $state(data.bannerImageURL ?? "");
 
-		this.badge = $derived(app.u2b.get(this.id));
+		// this.badge = $derived(app.u2b.get(this.id));
 		this.paint = $derived(app.u2p.get(this.id));
 	}
 
@@ -237,7 +233,7 @@ export class User {
 		}
 
 		const relationship = {
-			badges: channelViewer?.earnedBadges ?? [],
+			badges: channelViewer?.earnedBadges?.map(Badge.fromGql) ?? [],
 			followedAt: data.followedAt ? new Date(data.followedAt) : null,
 			subscription: {
 				hidden: data.statusHidden,
diff --git a/src/lib/models/whisper.svelte.ts b/src/lib/models/whisper.svelte.ts
index 09507e69..ab6a0859 100644
--- a/src/lib/models/whisper.svelte.ts
+++ b/src/lib/models/whisper.svelte.ts
@@ -1,6 +1,6 @@
 import { app } from "$lib/app.svelte";
-import type { Badge } from "$lib/graphql/twitch";
 import type { TwitchClient } from "$lib/twitch/client";
+import type { Badge } from "./badge";
 import type { User } from "./user.svelte";
 
 export interface WhisperMessage {
diff --git a/src/lib/twitch/client.ts b/src/lib/twitch/client.ts
index 87b4132b..53c7e74f 100644
--- a/src/lib/twitch/client.ts
+++ b/src/lib/twitch/client.ts
@@ -1,11 +1,8 @@
-import * as cache from "tauri-plugin-cache-api";
 import { ApiError } from "$lib/errors/api-error";
 import { sendTwitch as send } from "$lib/graphql";
-import { globalBadgesQuery } from "$lib/graphql/twitch";
 import { UserManager } from "$lib/managers/user-manager";
 import { Stream } from "$lib/models/stream.svelte";
 import { dedupe } from "$lib/util";
-import type { Badge } from "../graphql/twitch";
 import type { Stream as HelixStream } from "./api";
 
 type QueryParams = Record<string, string | number | (string | number)[]>;
@@ -24,33 +21,8 @@ export class TwitchClient {
 	// API calls SHOULD have a valid token as it's set at first layout load.
 	public token: string | null = null;
 
-	public readonly badges = new Map<string, Badge>();
 	public readonly users = new UserManager(this);
 
-	/**
-	 * Retrieves the list of global badges and caches them for later use.
-	 */
-	public async fetchBadges(force = false) {
-		let badges = await cache.get<Badge[]>("global_badges");
-
-		if (force || !badges) {
-			if (force) this.badges.clear();
-
-			const { badges: data } = await this.send(globalBadgesQuery);
-			badges = data?.filter((b) => b != null) ?? [];
-
-			// Twitch adds new badges fairly often, so ttl is lower than the
-			// global emote cache
-			await cache.set("global_badges", badges, { ttl: 3 * 24 * 60 * 60 });
-		}
-
-		for (const badge of badges) {
-			this.badges.set(`${badge.setID}:${badge.version}`, badge);
-		}
-
-		return badges;
-	}
-
 	/**
 	 * Retrieves the streams of the specified channels if they're live.
 	 */
diff --git a/src/lib/util.ts b/src/lib/util.ts
index 5f1d2bf2..d06a406a 100644
--- a/src/lib/util.ts
+++ b/src/lib/util.ts
@@ -162,3 +162,24 @@ export async function openMenu(event: MouseEvent, menufn: () => Promise<Menu>) {
 	const menu = await menufn();
 	await menu.popup();
 }
+
+// https://github.com/tc39/proposal-upsert
+export function getOrInsert<K, V>(map: Map<K, V>, key: K, defaultValue: V): V {
+	if (map.has(key)) {
+		return map.get(key)!;
+	}
+
+	map.set(key, defaultValue);
+	return defaultValue;
+}
+
+export function getOrInsertComputed<K, V>(map: Map<K, V>, key: K, defaultValue: () => V): V {
+	if (map.has(key)) {
+		return map.get(key)!;
+	}
+
+	const value = defaultValue();
+	map.set(key, value);
+
+	return value;
+}
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index c9d4be04..e92832c8 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -78,7 +78,7 @@ export async function load({ url }) {
 		await app.emotes.fetch();
 	}
 
-	if (!app.twitch.badges.size) {
-		await app.twitch.fetchBadges();
+	if (!app.badges.size) {
+		await app.badges.fetch();
 	}
 }