diff --git a/frontend/package.json b/frontend/package.json
index 940f5a9..b255342 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,7 @@
     "@ionic/react-router": "^7.0.0",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
+    "consistent-color-generation": "^0.4.0",
     "fuse.js": "^6.6.2",
     "ionicons": "^7.1.2",
     "preact": "^10.17.0",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 080c075..84d90a9 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -17,6 +17,9 @@ dependencies:
   '@types/react-router-dom':
     specifier: ^5.3.3
     version: 5.3.3
+  consistent-color-generation:
+    specifier: ^0.4.0
+    version: 0.4.0
   fuse.js:
     specifier: ^6.6.2
     version: 6.6.2
@@ -2288,6 +2291,13 @@ packages:
       yargs: 17.7.2
     dev: true
 
+  /consistent-color-generation@0.4.0:
+    resolution: {integrity: sha512-6OJlZgA1B+4L4BKLpHtynTOD4nA6ZAPuGgee0t/29QBLQ1JY0hNWQ4aNiVz/qMVtN0XOpwONVUNgEmRa6yc2XQ==}
+    dependencies:
+      hsluv: 0.1.0
+      js-sha1: 0.6.0
+    dev: false
+
   /content-disposition@0.5.4:
     resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
     engines: {node: '>= 0.6'}
@@ -2776,6 +2786,10 @@ packages:
       react-is: 16.13.1
     dev: false
 
+  /hsluv@0.1.0:
+    resolution: {integrity: sha512-ERcanKLAszD2XN3Vh5r5Szkrv9q0oSTudmP0rkiKAGM/3NMc9FLmMZBB7TSqTaXJfSDBOreYTfjezCOYbRKqlw==}
+    dev: false
+
   /http-errors@2.0.0:
     resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
     engines: {node: '>= 0.8'}
@@ -3085,6 +3099,10 @@ packages:
       '@sideway/pinpoint': 2.0.0
     dev: true
 
+  /js-sha1@0.6.0:
+    resolution: {integrity: sha512-01gwBFreYydzmU9BmZxpVk6svJJHrVxEN3IOiGl6VO93bVKYETJ0sIth6DASI6mIFdt7NmfX9UiByRzsYHGU9w==}
+    dev: false
+
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
diff --git a/frontend/public/version.txt b/frontend/public/version.txt
index c043eea..276cbf9 100644
--- a/frontend/public/version.txt
+++ b/frontend/public/version.txt
@@ -1 +1 @@
-2.2.1
+2.3.0
diff --git a/frontend/src/components/BotItem.tsx b/frontend/src/components/BotItem.tsx
index b4192cc..ba966ae 100644
--- a/frontend/src/components/BotItem.tsx
+++ b/frontend/src/components/BotItem.tsx
@@ -8,6 +8,7 @@ import {
 } from "@ionic/react";
 import { languageOutline, openOutline } from "ionicons/icons";
 
+import TextAvatar from "./TextAvatar";
 import { Bot, recently } from "../store";
 import { getText as _ } from "../i18n";
 import "./BotItem.css";
@@ -52,9 +53,7 @@ export default function BotItem({
           href={bot.url}
         >
           <IonChip>
-            <IonAvatar>
-              <img src="icon.png" />
-            </IonAvatar>
+            <TextAvatar text={bot.addr} />
             <IonLabel>{bot.addr} </IonLabel>
             <IonIcon icon={openOutline} />
           </IonChip>
diff --git a/frontend/src/components/TextAvatar.tsx b/frontend/src/components/TextAvatar.tsx
new file mode 100644
index 0000000..d0491bd
--- /dev/null
+++ b/frontend/src/components/TextAvatar.tsx
@@ -0,0 +1,21 @@
+import { IonAvatar } from "@ionic/react";
+// @ts-ignore
+import getRGB from "consistent-color-generation";
+
+export default function TextAvatar({ text }: { text: string }) {
+  const backgroundColor = getRGB(text).toString();
+  const textColor = "#ffffff";
+  const fontFamily = "Arial";
+  const fontSize = 50;
+  const svg = btoa(
+    `<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100' width='100' height='100'><rect width='100' height='100' x='0' y='0' fill='${backgroundColor}'></rect><text x='50%' y='50%' alignment-baseline='central' text-anchor='middle' font-family='${fontFamily}' font-size='${fontSize}' fill='${textColor}' dominant-baseline='middle'>${text.charAt(
+      0,
+    )}</text></svg>`,
+  );
+  const url = `data:image/svg+xml;base64,${svg}`;
+  return (
+    <IonAvatar>
+      <img src={url} />
+    </IonAvatar>
+  );
+}