diff --git a/client/src/index.js b/client/src/index.js
index 4e44d69..cb60193 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -22,3 +22,5 @@ waitForKeyElements('.call-history-list call', (element) => { callHistory.showCal
 const status = new Status()
 // eslint-disable-next-line no-undef
 waitForKeyElements('wc-account-menu', (element) => { status.showStatus(element) }, false)
+
+waitForKeyElements('wc-account-menu i.status-indicator', (element) => { status.watchStatus(element) }, false)
diff --git a/client/src/status.ts b/client/src/status.ts
index d516fad..88d53a1 100644
--- a/client/src/status.ts
+++ b/client/src/status.ts
@@ -157,4 +157,34 @@ export class Status {
       this._currentStatus = undefined;
     }
   }
+
+  public watchStatus(element: HTMLElement) {
+    console.log('updateFavicon watching', element);
+    const attrObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.attributeName === 'class') {
+          this.updateStatus(element);
+        }
+      });
+    });
+    attrObserver.observe(element, { attributes: true });
+    this.updateStatus(element);
+  }
+
+  private updateStatus(element: HTMLElement) {
+    console.log('Status changed', element.classList);
+    var color = window.getComputedStyle(element).getPropertyValue("background-color");
+    console.log('Background color:', color);
+    this.setFaviconColor(color);
+  }
+
+  private setFaviconColor(color: string) {
+    var link = document.querySelector("link[rel~='icon']") as HTMLLinkElement;
+    if (!link) {
+      link = document.createElement('link');
+      link.rel = 'icon';
+      document.head.appendChild(link);
+    }
+    link.href = "data:image/svg+xml,%3Csvg width='32px' height='32px' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpolyline points='9,0 20,0 32,16 20,32 9,32, 20,16' fill='" + encodeURIComponent(color) + "' id='MyLine' /%3E%3C/svg%3E";
+  }
 }