diff --git a/ui/src/components/app-avatar/index.vue b/ui/src/components/app-avatar/index.vue
index 22f72c29c..006142d74 100644
--- a/ui/src/components/app-avatar/index.vue
+++ b/ui/src/components/app-avatar/index.vue
@@ -40,10 +40,15 @@ const getAvatarColour = (name: string) => {
     '#7F3BF5',
     '#8F959E'
   ]
-  let charIndex = name ? pinyin(name).charAt(0).toUpperCase().charCodeAt(0) - 65 : 0
+  console.log(pinyin(name).charAt(0).toUpperCase().charCodeAt(0) - 65)
+  let charIndex = name
+    ? pinyin(name).charAt(0).toUpperCase().charCodeAt(0) - 65 > 0
+      ? pinyin(name).charAt(0).toUpperCase().charCodeAt(0) - 65
+      : 0
+    : 0
 
   function getColor() {
-    if (!colours[charIndex]) {
+    if (!colours?.[charIndex]) {
       charIndex -= 10
       getColor()
     }