diff --git a/ui/src/components/app-avatar/index.vue b/ui/src/components/app-avatar/index.vue
index 9f56628e9..b267d404a 100644
--- a/ui/src/components/app-avatar/index.vue
+++ b/ui/src/components/app-avatar/index.vue
@@ -40,7 +40,11 @@ const getAvatarColour = (name: string) => {
     '#7F3BF5',
     '#8F959E'
   ]
-  let charIndex = name ? pinyin(name).charAt(0).toUpperCase().charCodeAt(0) - 65 : 0
+  let charIndex = name
+    ? pinyin(name).charAt(0).toUpperCase().charCodeAt(0) - 65 >= 0
+      ? pinyin(name).charAt(0).toUpperCase().charCodeAt(0) - 65
+      : 0
+    : 0
 
   function getColor() {
     return colours[Math.abs(charIndex % colours.length)]