diff --git a/frontend/src/layouts/AppLayout.vue b/frontend/src/layouts/AppLayout.vue
index 67a32af..97ebf63 100644
--- a/frontend/src/layouts/AppLayout.vue
+++ b/frontend/src/layouts/AppLayout.vue
@@ -52,6 +52,25 @@ const handleCancel = () => {
   showDialog.value = false;
   resetForm();
 }
+
+const getServerInitials = (name: string): string => {
+  if (!name) return ''
+  const words = name.trim().split(/\s+/)
+  if (words.length >= 2) {
+    return (words[0][0] + words[1][0]).toUpperCase()
+  }
+  return name.slice(0, 2).toUpperCase()
+}
+
+const getServerColor = (str: string): string => {
+  if (!str) return 'hsl(0, 0%, 50%)'
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  const hue = Math.abs(hash) % 360
+  return `hsl(${hue}, 60%, 45%)`
+}
 </script>
 
 <template>
@@ -89,10 +108,12 @@ const handleCancel = () => {
         :to="`/server/${server.id}`"
       >
         <v-avatar
-          class="d-block text-center mx-auto mb-9"
-          color="grey-lighten-1"
+          :style="{ backgroundColor: getServerColor(server.name) }"
+          class="d-flex align-center justify-center mx-auto mb-9 font-weight-bold text-caption text-white"
           size="28"
-        ></v-avatar>
+        >
+          {{ getServerInitials(server.name) }}
+        </v-avatar>
       </router-link>
 
       <v-btn
@@ -151,7 +172,7 @@ const handleCancel = () => {
         </v-card-actions>
       </v-card>
     </v-dialog>
-    
+
   </v-app>
 </template>