diff --git a/src/renderer/components/hotbar/hotbar-entity-icon.tsx b/src/renderer/components/hotbar/hotbar-entity-icon.tsx
index 72e04e2c5c..e71ab2fdb2 100644
--- a/src/renderer/components/hotbar/hotbar-entity-icon.tsx
+++ b/src/renderer/components/hotbar/hotbar-entity-icon.tsx
@@ -18,7 +18,6 @@
  * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-import "./hotbar-icon.scss";
 
 import React, { DOMAttributes } from "react";
 import { observable } from "mobx";
@@ -103,8 +102,6 @@ export class HotbarEntityIcon extends React.Component<Props> {
     const isPersisted = this.isPersisted(entity);
     const menuItems = this.contextMenu?.menuItems.filter((menuItem) => !menuItem.onlyVisibleForSource || menuItem.onlyVisibleForSource === entity.metadata.source);
 
-    console.log(entity.metadata.name, isActive);
-
     if (!isPersisted) {
       menuItems.unshift({
         title: "Pin to Hotbar",
diff --git a/src/renderer/components/hotbar/hotbar-icon.scss b/src/renderer/components/hotbar/hotbar-icon.scss
index bd2c7bd5d9..018faf9085 100644
--- a/src/renderer/components/hotbar/hotbar-icon.scss
+++ b/src/renderer/components/hotbar/hotbar-icon.scss
@@ -36,11 +36,6 @@
       border-radius: 6px;
     }
 
-    &.active {
-      box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
-      transition: all 0s 0.8s;
-    }
-
     &.disabled {
       opacity: 0.4;
       cursor: default;
@@ -53,23 +48,24 @@
       }
     }
 
-    &.active, &.interactive:hover {
-      img {
-        opacity: 1;
-      }
-    }
-
-    &:hover {
-      &:not(.active) {
-        box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff30;
-      }
-    }
-
     &.isDragging {
       box-shadow: none;
     }
 
-    > .led {
+    div.MuiAvatar-root {
+      &.active {
+        box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
+        transition: all 0s 0.8s;
+      }
+
+      &:hover {
+        &:not(.active) {
+          box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff30;
+        }
+      }
+    }
+
+    .led {
       position: absolute;
       left: 3px;
       top: 3px;
diff --git a/src/renderer/components/hotbar/hotbar-icon.tsx b/src/renderer/components/hotbar/hotbar-icon.tsx
index 4ca5a90e4d..2f681a05c1 100644
--- a/src/renderer/components/hotbar/hotbar-icon.tsx
+++ b/src/renderer/components/hotbar/hotbar-icon.tsx
@@ -32,6 +32,7 @@ import { ConfirmDialog } from "../confirm-dialog";
 import { Icon } from "../icon";
 import { Menu, MenuItem } from "../menu";
 import { MaterialTooltip } from "../+catalog/material-tooltip/material-tooltip";
+import { observer } from "mobx-react";
 
 interface Props extends DOMAttributes<HTMLElement> {
   uid: string;
@@ -83,8 +84,8 @@ function getNameParts(name: string): string[] {
   return name.split(/@+/);
 }
 
-export function HotbarIcon(props: Props) {
-  const { uid, title, className, source, active, disabled, menuItems, onMenuOpen, children, ...rest } = props;
+export const HotbarIcon = observer(({menuItems = [], ...props}: Props) => {
+  const { uid, title, active, className, source, disabled, onMenuOpen, children, ...rest } = props;
   const id = `hotbarIcon-${uid}`;
   const [menuOpen, setMenuOpen] = useState(false);
 
@@ -113,7 +114,7 @@ export function HotbarIcon(props: Props) {
           <Avatar
             {...rest}
             variant="square"
-            className="active"
+            className={active ? "active" : "default"}
             style={generateAvatarStyle(`${title}-${source}`)}
           >
             {getIconString()}
@@ -143,8 +144,4 @@ export function HotbarIcon(props: Props) {
       </Menu>
     </div>
   );
-}
-
-HotbarIcon.defaultProps = {
-  menuItems: []
-};
+});