diff --git a/src/renderer/components/tree-view/tree-view.scss b/src/renderer/components/tree-view/tree-view.scss
index 15f72b19e7..2817d5ddb7 100644
--- a/src/renderer/components/tree-view/tree-view.scss
+++ b/src/renderer/components/tree-view/tree-view.scss
@@ -10,10 +10,16 @@
       border: 1px solid transparent;
     }
 
-    &.Mui-selected, &.Mui-selected:focus {
+    &.selected {
       > .MuiTreeItem-content .MuiTreeItem-label {
         border-color: var(--blue);
         font-weight: bold;
+      }
+    }
+
+    // Make inner component selected state invisible
+    &.Mui-selected, &.Mui-selected:focus {
+      > .MuiTreeItem-content .MuiTreeItem-label {
         background-color: transparent;
       }
     }
diff --git a/src/renderer/components/tree-view/tree-view.tsx b/src/renderer/components/tree-view/tree-view.tsx
index 83409aab90..fbe942ad16 100644
--- a/src/renderer/components/tree-view/tree-view.tsx
+++ b/src/renderer/components/tree-view/tree-view.tsx
@@ -20,7 +20,12 @@ interface Props {
 export function RecursiveTreeView({ data }: Props) {
   const renderTree = (nodes: NavigationTree[]) => {
     return nodes.map(node => (
-      <TreeItem key={node.id} nodeId={node.id} label={node.name} className={cssNames({"Mui-selected": node.selected})}>
+      <TreeItem
+        key={node.id}
+        nodeId={node.id}
+        label={node.name}
+        className={cssNames({selected: node.selected})}
+      >
         {Array.isArray(node.children) ? node.children.map((node) => renderTree([node])) : null}
       </TreeItem>
     ));