diff --git a/examples/layout-manager-playground/package-lock.json b/examples/layout-manager-playground/package-lock.json
index 5cf55e835..ce5c1cad9 100644
--- a/examples/layout-manager-playground/package-lock.json
+++ b/examples/layout-manager-playground/package-lock.json
@@ -14,6 +14,7 @@
         "@metacell/geppetto-meta-client": "file:.yalc/@metacell/geppetto-meta-client",
         "@metacell/geppetto-meta-core": "file:.yalc/@metacell/geppetto-meta-core",
         "@metacell/geppetto-meta-ui": "file:.yalc/@metacell/geppetto-meta-ui",
+        "@mui/icons-material": "^5.14.0",
         "@mui/material": "^5.14.0",
         "@types/jest": "^27.5.2",
         "@types/node": "^16.18.38",
@@ -33,7 +34,7 @@
       }
     },
     ".yalc/@metacell/geppetto-meta-client": {
-      "version": "1.2.2",
+      "version": "1.2.7",
       "license": "MIT",
       "dependencies": {
         "@material-ui/core": "^4.1.3",
@@ -46,11 +47,11 @@
       }
     },
     ".yalc/@metacell/geppetto-meta-core": {
-      "version": "1.2.2",
+      "version": "1.2.7",
       "license": "MIT"
     },
     ".yalc/@metacell/geppetto-meta-ui": {
-      "version": "1.2.2",
+      "version": "1.2.7",
       "license": "MIT",
       "peerDependencies": {
         "@fortawesome/fontawesome-free": "^6.4.0",
@@ -59,7 +60,7 @@
         "@fortawesome/react-fontawesome": "^0.1.9",
         "@material-ui/core": "4.11.4",
         "@material-ui/icons": "^4.11.2",
-        "@metacell/geppetto-meta-core": "1.2.2",
+        "@metacell/geppetto-meta-core": "1.2.7",
         "aframe": "<1.1.0",
         "aframe-slice9-component": ">=1.0.0",
         "ami.js": ">=0.32.0",
@@ -1913,8 +1914,9 @@
       "license": "MIT"
     },
     "node_modules/@babel/runtime": {
-      "version": "7.22.11",
-      "license": "MIT",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz",
+      "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -3041,6 +3043,31 @@
         "url": "https://opencollective.com/mui"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "5.15.11",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.11.tgz",
+      "integrity": "sha512-R5ZoQqnKpd+5Ew7mBygTFLxgYsQHPhgR3TDXSgIHYIjGzYuyPLmGLSdcPUoMdi6kxiYqHlpPj4NJxlbaFD0UHA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.14.0",
       "license": "MIT",
@@ -15517,7 +15544,9 @@
       "version": "0.8.0"
     },
     "@babel/runtime": {
-      "version": "7.22.11",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz",
+      "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
       "requires": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -16197,6 +16226,14 @@
     "@mui/core-downloads-tracker": {
       "version": "5.14.0"
     },
+    "@mui/icons-material": {
+      "version": "5.15.11",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.11.tgz",
+      "integrity": "sha512-R5ZoQqnKpd+5Ew7mBygTFLxgYsQHPhgR3TDXSgIHYIjGzYuyPLmGLSdcPUoMdi6kxiYqHlpPj4NJxlbaFD0UHA==",
+      "requires": {
+        "@babel/runtime": "^7.23.9"
+      }
+    },
     "@mui/material": {
       "version": "5.14.0",
       "requires": {
diff --git a/examples/layout-manager-playground/package.json b/examples/layout-manager-playground/package.json
index 36ad5a162..e6172e9aa 100644
--- a/examples/layout-manager-playground/package.json
+++ b/examples/layout-manager-playground/package.json
@@ -10,6 +10,7 @@
     "@metacell/geppetto-meta-core": "file:.yalc/@metacell/geppetto-meta-core",
     "@metacell/geppetto-meta-ui": "file:.yalc/@metacell/geppetto-meta-ui",
     "@mui/material": "^5.14.0",
+    "@mui/icons-material": "^5.14.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.38",
     "@types/react": "17.0.52",
diff --git a/examples/layout-manager-playground/src/pages/HomePage.tsx b/examples/layout-manager-playground/src/pages/HomePage.tsx
index f5a17ec51..3335570f6 100644
--- a/examples/layout-manager-playground/src/pages/HomePage.tsx
+++ b/examples/layout-manager-playground/src/pages/HomePage.tsx
@@ -1,14 +1,26 @@
 import React, { useEffect, useState } from 'react';
-import { useDispatch, useStore } from 'react-redux';
-import { Box, Button, CircularProgress, Stack, TextField } from "@mui/material"
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
+import { useDispatch, useStore, useSelector } from 'react-redux';
+import {
+  Box,
+  Button,
+  CircularProgress,
+  IconButton,
+  Stack,
+  TextField,
+  Tooltip,
+  InputLabel,
+  MenuItem,
+  FormControl
+} from "@mui/material"
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import VisibilityOnIcon from '@mui/icons-material/Visibility';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 // @ts-ignore
 import { getLayoutManagerInstance } from "@metacell/geppetto-meta-client/common/layout/LayoutManager";
 // @ts-ignore
-import { addWidget } from '@metacell/geppetto-meta-client/common/layout/actions';
+import { addWidget, updateWidget } from '@metacell/geppetto-meta-client/common/layout/actions';
+// @ts-ignore
+import { Widget, WidgetStatus } from "@metacell/geppetto-meta-client/common/layout/model";
 import '@metacell/geppetto-meta-ui/flex-layout/style/dark.scss'
 
 import { componentWidget } from "../widgets";
@@ -16,10 +28,13 @@ import { componentWidget } from "../widgets";
 const HomePage = () => {
   const store = useStore();
   const dispatch = useDispatch();
+  // @ts-ignore
+  const widgets = useSelector(state => state.widgets);
   const [LayoutComponent, setLayoutComponent] = useState<any | undefined>(undefined);
   const [panel, setPanel] = useState("topLeft");
   const [name, setName] = useState("Component 1");
   const [color, setColor] = useState("red");
+    
   useEffect(() => {
     if (LayoutComponent === undefined) {
       const myManager = getLayoutManagerInstance();
@@ -27,13 +42,21 @@ const HomePage = () => {
         setLayoutComponent(myManager.getComponent() as React.ComponentType<any>);
       }
     }
-  }, [store])
+  }, [store, LayoutComponent])
 
   const addComponent = () => {
     dispatch(addWidget(componentWidget(name, color, panel)));
   };
 
 
+  const activateWidget = (widget: Widget) => {
+    const updatedWidget = { ...widget };
+    updatedWidget.status = WidgetStatus.ACTIVE;
+    updatedWidget.panelName = panel;
+    dispatch(updateWidget(updatedWidget));
+  };
+
+
   return (
     <Box>
       <Stack direction="row" spacing={2} sx={{
@@ -41,16 +64,16 @@ const HomePage = () => {
         display: 'flex',
         padding: 2
       }}>
-        <TextField id="outlined-basic" label="Name" variant="outlined" value={name}  onChange={(event: any) => 
+        <TextField id="outlined-basic" label="Name" variant="outlined" value={name} onChange={(event: any) =>
           setName(event.target.value as string)
-        } />
+        }/>
         <FormControl>
           <InputLabel id="name">Panel</InputLabel>
           <Select
             labelId="panel"
             value={panel}
             label="Panel"
-            onChange={(event: SelectChangeEvent) => 
+            onChange={(event: SelectChangeEvent) =>
               setPanel(event.target.value as string)
             }
           >
@@ -65,7 +88,7 @@ const HomePage = () => {
             labelId="color"
             value={color}
             label="Color"
-            onChange={(event: SelectChangeEvent) => 
+            onChange={(event: SelectChangeEvent) =>
               setColor(event.target.value as string)
             }
           >
@@ -79,6 +102,14 @@ const HomePage = () => {
                     Add Component
         </Button>
 
+        {Object.values(widgets).map((widget: Widget, index: number) => (
+          <Tooltip key={index} title={widget.name}>
+            <IconButton onClick={() => activateWidget(widget)} disabled={widget.status == WidgetStatus.ACTIVE}>
+              {widget.status == WidgetStatus.ACTIVE ? <VisibilityOffIcon/> : <VisibilityOnIcon/>}
+            </IconButton>
+          </Tooltip>
+        ))}
+
       </Stack>
       <Box p={2} sx={{
         display: 'flex',
diff --git a/geppetto.js/geppetto-client/src/GEPPETTO.js b/geppetto.js/geppetto-client/src/GEPPETTO.js
index 2b9353914..2621a5119 100644
--- a/geppetto.js/geppetto-client/src/GEPPETTO.js
+++ b/geppetto.js/geppetto-client/src/GEPPETTO.js
@@ -129,7 +129,7 @@ const EventsMapping = {
   [Events.Jupyter_geppetto_extension_ready]: EventManager.clientActions.JUPYTER_GEPPETTO_EXTENSION_READY,
 };
 
-export function initGeppetto(useWebsocket = true, loadStyle = true) {
+export function initGeppetto (useWebsocket = true, loadStyle = true) {
   if (!window.GEPPETTO_CONFIGURATION) {
     window.GEPPETTO_CONFIGURATION = {}
   }
diff --git a/geppetto.js/geppetto-client/src/WebsocketMain.js b/geppetto.js/geppetto-client/src/WebsocketMain.js
index 2ace4b8ed..a57fc31e8 100644
--- a/geppetto.js/geppetto-client/src/WebsocketMain.js
+++ b/geppetto.js/geppetto-client/src/WebsocketMain.js
@@ -12,7 +12,7 @@ import Events from './Events';
 /**
  *
  */
-function createChannel() {
+function createChannel () {
   // Change link from blank to self for GEPPETTO_CONFIGURATION.embedded environments
   if (GEPPETTO_CONFIGURATION.embedded && GEPPETTO_CONFIGURATION.embedderURL !== "/" && typeof handleRequest == 'undefined') {
     if ($.isArray(GEPPETTO_CONFIGURATION.embedderURL)) {
@@ -26,7 +26,7 @@ function createChannel() {
 /**
  * Initialize web socket communication
  */
-export function init() {
+export function init () {
   if (GEPPETTO_CONFIGURATION.contextPath == "/") {
     var host = urljoin(MessageSocket.protocol + window.location.host.replace("8081", "8080"), '/GeppettoServlet');
   } else {
diff --git a/geppetto.js/geppetto-client/src/common/layout/LayoutManager.tsx b/geppetto.js/geppetto-client/src/common/layout/LayoutManager.tsx
index 964cfa2b1..f4d54a5f6 100644
--- a/geppetto.js/geppetto-client/src/common/layout/LayoutManager.tsx
+++ b/geppetto.js/geppetto-client/src/common/layout/LayoutManager.tsx
@@ -3,21 +3,15 @@ import * as FlexLayout from '@metacell/geppetto-meta-ui/flex-layout/src/index';
 import Actions from '@metacell/geppetto-meta-ui/flex-layout/src/model/Actions';
 import DockLocation from '@metacell/geppetto-meta-ui/flex-layout/src/DockLocation';
 import Model from '@metacell/geppetto-meta-ui/flex-layout/src/model/Model';
-import { WidgetStatus, Widget, ComponentMap, TabsetPosition, IComponentConfig } from './model';
-import { withStyles, createStyles } from '@material-ui/core/styles'
+import {ComponentMap, IComponentConfig, Widget, WidgetStatus} from './model';
+import {createStyles, withStyles} from '@material-ui/core/styles'
 import WidgetFactory from "./WidgetFactory";
 import TabsetIconFactory from "./TabsetIconFactory";
 import defaultLayoutConfiguration from "./defaultLayout";
-import {widget2Node, isEqual, getWidget} from "./utils";
+import {getWidget, widget2Node} from "./utils";
 import * as GeppettoActions from '../actions';
 
-import {
-  layoutActions,
-  removeWidgetFromStore,
-  updateWidget,
-  setLayout,
-  updateLayout,
-} from "./actions";
+import {layoutActions, removeWidgetFromStore, setLayout, updateLayout,} from "./actions";
 
 import {MinimizeHelper} from "./helpers/MinimizeHelper";
 import {createTabSet, moveWidget} from "./helpers/FlexLayoutHelper";
@@ -116,7 +110,8 @@ class LayoutManager {
         widget2Node(widgetConfiguration),
         widgetConfiguration.panelName,
         DockLocation.CENTER,
-        widgetConfiguration.pos
+        widgetConfiguration.pos,
+        widgetConfiguration.status == WidgetStatus.ACTIVE
       )
     );
   }
diff --git a/geppetto.js/geppetto-client/src/common/layout/reducer.ts b/geppetto.js/geppetto-client/src/common/layout/reducer.ts
index 16c35916d..bd2d36b6e 100644
--- a/geppetto.js/geppetto-client/src/common/layout/reducer.ts
+++ b/geppetto.js/geppetto-client/src/common/layout/reducer.ts
@@ -131,7 +131,7 @@ export const widgets = (state: WidgetMap = {}, action) => {
           updatedWidgets[node.getId()].status = WidgetStatus.MAXIMIZED;
         } else if (parent.getType() === 'border') {
           updatedWidgets[node.getId()].status = WidgetStatus.MINIMIZED;
-        } else if (node.isVisible()) {
+        } else if (parent.getSelectedNode().getId() == node.getId()) {
           updatedWidgets[node.getId()].status = WidgetStatus.ACTIVE;
         } else {
           updatedWidgets[node.getId()].status = WidgetStatus.HIDDEN;
diff --git a/geppetto.js/geppetto-client/src/communication/MessageSocket.js b/geppetto.js/geppetto-client/src/communication/MessageSocket.js
index 3f5b86575..339a22340 100644
--- a/geppetto.js/geppetto-client/src/communication/MessageSocket.js
+++ b/geppetto.js/geppetto-client/src/communication/MessageSocket.js
@@ -40,13 +40,13 @@ export class MessageSocket {
   autoReconnectInterval = 5 * 1000;
   socketStatus = Resources.SocketStatus.CLOSE;
 
-  constructor() {
+  constructor () {
     this.connect = this.connect.bind(this);
     this.reconnect = this.reconnect.bind(this);
     this.send = this.send.bind(this);
   }
 
-  connect(host) {
+  connect (host) {
     if (this.socket !== null) {
       delete this.socket;
     }
@@ -88,15 +88,15 @@ export class MessageSocket {
 
     this.socket.onclose = e => {
       switch (e.code) {
-        case 1000:
-          this.socketStatus = Resources.SocketStatus.CLOSE;
-          console.log(Resources.WEBSOCKET_CLOSED, true);
-          break;
-        default:
-          if (this.lostConnectionId === undefined) {
-            this.lostConnectionId = this.getClientID();
-          }
-          this.reconnect(e);
+      case 1000:
+        this.socketStatus = Resources.SocketStatus.CLOSE;
+        console.log(Resources.WEBSOCKET_CLOSED, true);
+        break;
+      default:
+        if (this.lostConnectionId === undefined) {
+          this.lostConnectionId = this.getClientID();
+        }
+        this.reconnect(e);
       }
     };
 
@@ -132,18 +132,18 @@ export class MessageSocket {
         this.connect(this.protocol + window.location.host + '/' + GEPPETTO_CONFIGURATION.contextPath + '/GeppettoServlet');
       } else {
         switch (e.code) {
-          case 'ECONNREFUSED':
-            console.log("%c WebSocket Status - Open connection error ", 'background: #000; color: red');
-            console.log(Resources.WEBSOCKET_CONNECTION_ERROR, true);
-            break;
-          case undefined:
-            console.log("%c WebSocket Status - Open connection error ", 'background: #000; color: red');
-            console.log(Resources.WEBSOCKET_RECONNECTION, true);
-            break;
-          default:
-            console.log("%c WebSocket Status - Closed ", 'background: #000; color: red');
-            this.socketStatus = Resources.SocketStatus.CLOSE;
-            break;
+        case 'ECONNREFUSED':
+          console.log("%c WebSocket Status - Open connection error ", 'background: #000; color: red');
+          console.log(Resources.WEBSOCKET_CONNECTION_ERROR, true);
+          break;
+        case undefined:
+          console.log("%c WebSocket Status - Open connection error ", 'background: #000; color: red');
+          console.log(Resources.WEBSOCKET_RECONNECTION, true);
+          break;
+        default:
+          console.log("%c WebSocket Status - Closed ", 'background: #000; color: red');
+          this.socketStatus = Resources.SocketStatus.CLOSE;
+          break;
         }
       }
     }
@@ -152,7 +152,7 @@ export class MessageSocket {
   /**
    * Attempt to reconnect to the backend
    */
-  reconnect(e) {
+  reconnect (e) {
     if (this.attempts < this.reconnectionLimit) {
       this.attempts++;
       this.socketStatus = Resources.SocketStatus.RECONNECTING;
@@ -171,7 +171,7 @@ export class MessageSocket {
   /**
    * Sends messages to the server
    */
-  send(command, parameter, callback) {
+  send (command, parameter, callback) {
     if (this.socketStatus === Resources.SocketStatus.RECONNECTING && command !== "reconnect") {
       EventManager.actionsHandler[EventManager.clientActions.STOP_LOGO]();
       return;
@@ -189,7 +189,7 @@ export class MessageSocket {
     return requestID;
   }
 
-  waitForConnection(messageTemplate, interval) {
+  waitForConnection (messageTemplate, interval) {
     if (this.isReady() === 1) {
       this.socket.send(messageTemplate);
     } else if (this.isReady() > 1) {
@@ -204,7 +204,7 @@ export class MessageSocket {
     }
   }
 
-  isReady() {
+  isReady () {
     if (this.socket !== null) {
       return this.socket.readyState;
     } else {
@@ -212,7 +212,7 @@ export class MessageSocket {
     }
   }
 
-  close() {
+  close () {
     this.socket.close();
     EventManager.actionsHandler[EventManager.clientActions.WEBSOCKET_DISCONNECTED]();
 
@@ -221,36 +221,36 @@ export class MessageSocket {
   /**
    * Sets the id of the client
    */
-  setClientID(id) {
+  setClientID (id) {
     this.clientID = id;
   }
 
   /**
    * Sets the id of the client
    */
-  getClientID() {
+  getClientID () {
     return this.clientID;
   }
   /**
    * Creates a request id to send with the message to the server
    */
-  createRequestID() {
+  createRequestID () {
     return this.clientID + "-" + (this.nextID++);
   }
 
-  loadProjectFromId(projectId) {
+  loadProjectFromId (projectId) {
     this.send("load_project_from_id", { projectId });
   }
 
-  loadProjectFromUrl(projectURL) {
+  loadProjectFromUrl (projectURL) {
     this.send("load_project_from_url", projectURL);
   }
 
-  loadProjectFromContent(content) {
+  loadProjectFromContent (content) {
     this.send("load_project_from_content", content);
   }
 
-  gzipUncompress(compressedMessage) {
+  gzipUncompress (compressedMessage) {
     var messageBytes = new Uint8Array(compressedMessage);
     var message = pako.ungzip(messageBytes, { to: "string" });
     return message;
@@ -260,7 +260,7 @@ export class MessageSocket {
    * Dispatches through Redux actions all messages received from the socket
    * @param {*} messageData 
    */
-  parseAndNotify(messageData) {
+  parseAndNotify (messageData) {
     var parsedServerMessage = JSON.parse(messageData);
     console.debug("Received websocket message", parsedServerMessage);
     let payload = JSON.parse(parsedServerMessage.data);
@@ -273,16 +273,16 @@ export class MessageSocket {
     }
 
     switch (parsedServerMessage.type) {
-      case messageTypes.CLIENT_ID: {
-        this.setClientID(payload.clientID);
-        break;
-      }
-      case messageTypes.RECONNECTION_ERROR: {
-        this.socketStatus = Resources.SocketStatus.CLOSE;
-        break;
-      }
-      default:
-        break;
+    case messageTypes.CLIENT_ID: {
+      this.setClientID(payload.clientID);
+      break;
+    }
+    case messageTypes.RECONNECTION_ERROR: {
+      this.socketStatus = Resources.SocketStatus.CLOSE;
+      break;
+    }
+    default:
+      break;
     }
 
 
@@ -299,7 +299,7 @@ export class MessageSocket {
   }
 
 
-  processBinaryMessage(message) {
+  processBinaryMessage (message) {
 
     var messageBytes = new Uint8Array(message);
 
@@ -326,7 +326,7 @@ export class MessageSocket {
  * @param payload - message payload, can be anything
  * @returns JSON stringified object
  */
-function messageTemplate(id, msgtype, payload) {
+function messageTemplate (id, msgtype, payload) {
 
   if (!(typeof payload == 'string' || payload instanceof String)) {
     payload = JSON.stringify(payload);
diff --git a/geppetto.js/geppetto-client/src/components/ComponentFactory.js b/geppetto.js/geppetto-client/src/components/ComponentFactory.js
index f3cf06ceb..b74568bad 100644
--- a/geppetto.js/geppetto-client/src/components/ComponentFactory.js
+++ b/geppetto.js/geppetto-client/src/components/ComponentFactory.js
@@ -8,7 +8,7 @@ const ComponentFactory = {
     return this.componentsMap;
   },
 
-  addExistingComponent(componentType, component, override) {
+  addExistingComponent (componentType, component, override) {
     if (!(componentType in this.componentsMap)) {
       this.componentsMap[componentType] = [];
     }
@@ -26,7 +26,7 @@ const ComponentFactory = {
     this.componentsMap[componentType].push(component);
   },
 
-  removeExistingComponent(componentType, component) {
+  removeExistingComponent (componentType, component) {
     if (componentType in this.componentsMap) {
       var index = this.componentsMap[componentType].indexOf(component);
       if (index > -1) {
@@ -35,7 +35,7 @@ const ComponentFactory = {
     }
   },
 
-  getComponentById(componentType, componentId) {
+  getComponentById (componentType, componentId) {
     var componentsMap = this.componentsMap[componentType];
     for (var c in componentsMap) {
       if (componentId === componentsMap[c].id) {
@@ -45,7 +45,7 @@ const ComponentFactory = {
     return undefined;
   },
 
-  camelize(str) {
+  camelize (str) {
     return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
       if (+match === 0) {
         return "";
@@ -62,7 +62,7 @@ const ComponentFactory = {
    * @param {Array} widgetsList
    * @returns {String} id - Available id for a widget
    */
-  getAvailableComponentId(componentType) {
+  getAvailableComponentId (componentType) {
     var index = 0;
     var id = "";
     var available;