diff --git a/src/renderer/components/avatar/avatar.tsx b/src/renderer/components/avatar/avatar.tsx
index c504d773f1..c63df5054e 100644
--- a/src/renderer/components/avatar/avatar.tsx
+++ b/src/renderer/components/avatar/avatar.tsx
@@ -59,6 +59,10 @@ export function Avatar(props: AvatarProps) {
   const { title, variant = "rounded", size = 32, colorHash, children, background, imgProps, src, className, disabled, ...rest } = props;
 
   const getBackgroundColor = () => {
+    if (src) {
+      return "transparent";
+    }
+
     return background || randomColor({ seed: colorHash, luminosity: "dark" });
   };
 
diff --git a/src/renderer/components/layout/sidebar-cluster.tsx b/src/renderer/components/layout/sidebar-cluster.tsx
index 58cae55c99..34d9b733fc 100644
--- a/src/renderer/components/layout/sidebar-cluster.tsx
+++ b/src/renderer/components/layout/sidebar-cluster.tsx
@@ -16,6 +16,7 @@ import { navigate } from "../../navigation";
 import { Menu, MenuItem } from "../menu";
 import { ConfirmDialog } from "../confirm-dialog";
 import { Tooltip } from "../tooltip";
+import { observer } from "mobx-react";
 
 const contextMenu: CatalogEntityContextMenuContext = observable({
   menuItems: [],
@@ -59,7 +60,7 @@ function renderLoadingSidebarCluster() {
   );
 }
 
-export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity }) {
+export const SidebarCluster = observer(({ clusterEntity }: { clusterEntity: CatalogEntity }) => {
   const [opened, setOpened] = useState(false);
 
   if (!clusterEntity) {
@@ -138,4 +139,4 @@ export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity
       </Menu>
     </div>
   );
-}
+});