diff --git a/src/components/council/CouncilAvatar.svelte b/src/components/council/CouncilAvatar.svelte
index f5d4fc3..ead5f28 100644
--- a/src/components/council/CouncilAvatar.svelte
+++ b/src/components/council/CouncilAvatar.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	// Reference: https://github.com/skeletonlabs/skeleton/tree/88844ffb67b7c9553c5245dd6d70146a3d6b8932/packages/skeleton-svelte/src/components/avatar
-	import { Avatar } from '@skeletonlabs/skeleton-svelte';
 	let { name, src }: { name: string; src: string } = $props();
 
 	function getInitials(name: string): string {
@@ -10,14 +8,25 @@
 			.map((word) => word.charAt(0).toUpperCase())
 			.join('');
 	}
+
+	let imageError = $state(false);
+
+	function handleImageError() {
+		imageError = true;
+	}
 </script>
 
-<Avatar class="size-26 md:size-32">
-	<Avatar.Image {src} class="h-full w-full rounded-full object-cover" />
-
-	<Avatar.Fallback>
+<div class="size-26 md:size-32 relative rounded-full overflow-hidden">
+	{#if src && !imageError}
+		<img
+			{src}
+			alt={name}
+			class="h-full w-full rounded-full object-cover"
+			onerror={handleImageError}
+		/>
+	{:else if !src || imageError}
 		<div class="bg-ecsess-400 flex h-full w-full items-center justify-center rounded-full">
 			<span class="text-ecsess-black text-xl font-bold"> {getInitials(name)} </span>
 		</div>
-	</Avatar.Fallback>
-</Avatar>
+	{/if}
+</div>