diff --git a/guiEditor/public/imgs/visibilityIcon.svg b/guiEditor/public/imgs/visibilityActiveIcon.svg
similarity index 100%
rename from guiEditor/public/imgs/visibilityIcon.svg
rename to guiEditor/public/imgs/visibilityActiveIcon.svg
diff --git a/guiEditor/public/imgs/visibilityNotActiveIcon.svg b/guiEditor/public/imgs/visibilityNotActiveIcon.svg
new file mode 100644
index 00000000000..11fcddcb648
--- /dev/null
+++ b/guiEditor/public/imgs/visibilityNotActiveIcon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path d="M15,13.19a3.23,3.23,0,1,1-3.22,3.22A3.22,3.22,0,0,1,15,13.19Zm0,1.21a2,2,0,1,0,2,2A2,2,0,0,0,15,14.4Zm0-4a8.06,8.06,0,0,1,7.82,6.1.61.61,0,0,1-1.18.29,6.84,6.84,0,0,0-13.28,0,.61.61,0,0,1-1.18-.3A8.07,8.07,0,0,1,15,10.36Z" style="fill:#888"/></svg>
\ No newline at end of file
diff --git a/guiEditor/src/components/sceneExplorer/entities/gui/controlTreeItemComponent.tsx b/guiEditor/src/components/sceneExplorer/entities/gui/controlTreeItemComponent.tsx
index ea75982f6dc..886ce1e077c 100644
--- a/guiEditor/src/components/sceneExplorer/entities/gui/controlTreeItemComponent.tsx
+++ b/guiEditor/src/components/sceneExplorer/entities/gui/controlTreeItemComponent.tsx
@@ -10,7 +10,7 @@ interface IControlTreeItemComponentProps {
     onClick: () => void;
 }
 
-export class ControlTreeItemComponent extends React.Component<IControlTreeItemComponentProps, { isActive: boolean, isVisible: boolean, isHovered: boolean}> {
+export class ControlTreeItemComponent extends React.Component<IControlTreeItemComponentProps, { isActive: boolean, isVisible: boolean, isHovered: boolean }> {
     constructor(props: IControlTreeItemComponentProps) {
         super(props);
 
@@ -35,18 +35,16 @@ export class ControlTreeItemComponent extends React.Component<IControlTreeItemCo
     render() {
         const control = this.props.control;
         const name = (control.name || "No name") + ` [${control.getClassName()}]`;
-        //const isActiveElement = this.state.isActive ? <FontAwesomeIcon icon={faHighlighter} /> : <FontAwesomeIcon icon={faHighlighter} className="isNotActive" />;
-        //const visibilityElement = this.state.isVisible ? <FontAwesomeIcon icon={faEye} /> : <FontAwesomeIcon icon={faEyeSlash} className="isNotActive" />;
 
         if (true) {
             return (
-                <div className="controlTools" onMouseOut={ () =>  this.setState({ isHovered: false})}>
+                <div className="controlTools" onMouseOutCapture={() => this.setState({ isHovered: false })}>
                     <TreeItemLabelComponent label={name} onClick={() => this.props.onClick()} color="greenyellow" />
                     <div className="addComponent icon" onClick={() => this.highlight()} title="Add component (Not Implemented)">
-                        <img src={"./imgs/makeComponentIcon.svg"} color="black" className=""/>
+                        <img src={"./imgs/makeComponentIcon.svg"}/>
                     </div>
                     <div className="visibility icon" onClick={() => this.switchVisibility()} title="Show/Hide control">
-                        <img src={"./imgs/visibilityIcon.svg"} color="black" className=""/>
+                        <img src={this.state.isVisible? "./imgs/visibilityActiveIcon.svg": "./imgs/visibilityNotActiveIcon.svg"}/>
                     </div>
                     <ExtensionsComponent target={control} extensibilityGroups={this.props.extensibilityGroups} />
                 </div>
@@ -54,7 +52,7 @@ export class ControlTreeItemComponent extends React.Component<IControlTreeItemCo
         }
         else {
             return (
-                <div className="controlTools" onMouseEnter={ () =>  this.setState({ isHovered: true})}>
+                <div className="controlTools" onMouseEnter={() => this.setState({ isHovered: true })}>
                     <TreeItemLabelComponent label={name} onClick={() => this.props.onClick()} color="greenyellow" />
                     <ExtensionsComponent target={control} extensibilityGroups={this.props.extensibilityGroups} />
                 </div>
diff --git a/guiEditor/src/components/sceneExplorer/sceneExplorer.scss b/guiEditor/src/components/sceneExplorer/sceneExplorer.scss
index 708582ba662..f4886b1c222 100644
--- a/guiEditor/src/components/sceneExplorer/sceneExplorer.scss
+++ b/guiEditor/src/components/sceneExplorer/sceneExplorer.scss
@@ -368,7 +368,7 @@
         .controlTools {
             grid-column: 2;
             display: grid;
-            grid-template-columns: 1fr 20px 20px auto 5px;
+            grid-template-columns: 1fr 30px 30px auto 5px;
             align-items: center;
 
             .highlight {
@@ -383,6 +383,8 @@
                 width: 20px;
                 grid-column: 4;
             }
+
+
         }   
         
 
@@ -403,8 +405,9 @@
                 grid-column: 1;
                 white-space: nowrap;
                 text-overflow: ellipsis;
-                overflow: hidden;                
-            }
+                overflow: hidden;          
+            }   
+ 
         }
     }
 }
\ No newline at end of file
diff --git a/guiEditor/src/components/sceneExplorer/sceneExplorerComponent.tsx b/guiEditor/src/components/sceneExplorer/sceneExplorerComponent.tsx
index bfffe18110e..e79cb8629d3 100644
--- a/guiEditor/src/components/sceneExplorer/sceneExplorerComponent.tsx
+++ b/guiEditor/src/components/sceneExplorer/sceneExplorerComponent.tsx
@@ -195,7 +195,7 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
         let guiElements = scene.textures.filter((t) => t.getClassName() === "AdvancedDynamicTexture");
 
         return (
-            <div id="tree" onContextMenu={(e) => e.preventDefault()}>
+            <div id="tree">
                 {guiElements && guiElements.length > 0 && <TreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={guiElements} label="GUI" offset={1} filter={this.state.filter} />}
             </div>
         );