diff --git a/web/src/lib/components/ui/Avatar.svelte b/web/src/lib/components/ui/Avatar.svelte
index 43077c79e..ce5cb5c45 100644
--- a/web/src/lib/components/ui/Avatar.svelte
+++ b/web/src/lib/components/ui/Avatar.svelte
@@ -78,7 +78,7 @@
 	<span
 		class={avatar({
 			size,
-			class: `flex items-center justify-center bg-background-inset text-foreground-default ${className}`
+			class: `flex items-center justify-center bg-background-canvas text-foreground-subtle ${className}`
 		})}
 		role={handle ? "img" : undefined}
 		aria-label={handle ? `${handle}'s avatar` : undefined}