diff --git a/components/Avatar.vue b/components/Avatar.vue
index ddfe1dc..eafd81b 100644
--- a/components/Avatar.vue
+++ b/components/Avatar.vue
@@ -3,8 +3,9 @@
 		class="display-avatar"
 		:src="displayAvatar"
 		:alt="displayName" />
-	<Icon v-else
-		name="lucide:user"
+	<DefaultIcon v-else-if="user"
+		:name="displayName"
+		:seed="user.uuid"
 		:alt="displayName" />
 </template>
 
@@ -28,10 +29,6 @@ if (user) {
 	
 	if (user.avatar) {
 		displayAvatar = user.avatar
-	} else if (!isCanvasBlocked()){
-		displayAvatar = generateDefaultIcon(displayName, user.uuid)
-	} else {
-		displayAvatar = null
 	}
 }
 
diff --git a/components/DefaultIcon.vue b/components/DefaultIcon.vue
new file mode 100644
index 0000000..31eaa6e
--- /dev/null
+++ b/components/DefaultIcon.vue
@@ -0,0 +1,45 @@
+<template>
+  <div :style="`background-color: ${generateIrcColor(seed, 50)}`"
+	class="default-icon">
+		<span class="default-icon-text">
+			{{ previewName }}
+		</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+const props = defineProps<{
+	seed: string,
+	name: string	
+}>();
+
+let previewName = "";
+if (props.name.length > 3) {
+	let guildName: string[] = props.name.split(' ')
+	for (let i = 0; i < 3; i ++) {
+		if (guildName.length > i) {
+			previewName += guildName[i].charAt(0)
+		} else {
+			break
+		}
+	}
+} else {
+	previewName = props.name
+}
+
+</script>
+
+<style scoped>
+.default-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.default-icon-text {
+	font-weight: bold;
+
+	color: var(--secondary-text-color)
+}
+</style>
diff --git a/layouts/client.vue b/layouts/client.vue
index 48a7f66..15907c4 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -17,19 +17,15 @@
 				</div>
 				<VerticalSpacer />
 				<div class="left-column-segment" id="left-column-middle">
-					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
+					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`" id="guild-icon-container">
 						<NuxtImg v-if="guild.icon"
 							class="sidebar-icon guild-icon"
 							:alt="guild.name"
 							:src="guild.icon" />
-						<NuxtImg v-else-if="!blockedCanvas"
-							class="sidebar-icon guild-icon"
+						<DefaultIcon 
+							class="sidebar-icon guild-icon" 
 							:alt="guild.name"
-							:src="generateDefaultIcon(guild.name, guild.uuid)" />
-						<Icon v-else name="lucide:server"
-							:style="`color: ${generateIrcColor(guild.uuid, 50)}`"
-							class="sidebar-icon guild-icon"
-							:alt="guild.name" />
+							:name="guild.name" :seed="guild.uuid"/>
 					</NuxtLink>
 				</div>
 				<VerticalSpacer />
@@ -52,6 +48,7 @@
 <script lang="ts" setup>
 import { ModalBase } from '#components';
 import { render } from 'vue';
+import DefaultIcon from '~/components/DefaultIcon.vue';
 import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
 import Button from '~/components/UserInterface/Button.vue';
 import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
@@ -63,8 +60,6 @@ const createButtonContainer = ref<HTMLButtonElement>();
 
 const api = useApi();
 
-const blockedCanvas = isCanvasBlocked()
-
 const options = [
 	{ name: "Join", value: "join", callback: async () => {
 			console.log("join guild!");
@@ -249,6 +244,10 @@ function createDropdown() {
 	height: var(--sidebar-icon-width);
 }
 
+#guild-icon-container {
+	text-decoration: none;
+}
+
 .guild-icon {
 	border-radius: var(--guild-icon-radius);
 }