diff --git a/src/areas/elementsCache.js b/src/areas/elementsCache.js
index deb3c858..b78386d5 100644
--- a/src/areas/elementsCache.js
+++ b/src/areas/elementsCache.js
@@ -36,7 +36,7 @@ const ElementsCache = () => {
         });
         return result;
     };
-
+    console.log("ElementsCache is rendering")
     useEffect(() => {
         if (ui.ready && interfaceSettings.current?.settings?.extracontents) {
             //console.log("ElementsCache can now be created")
diff --git a/src/components/Controls/ContainerHelper.js b/src/components/Controls/ContainerHelper.js
index 5e2adc11..480d29dd 100644
--- a/src/components/Controls/ContainerHelper.js
+++ b/src/components/Controls/ContainerHelper.js
@@ -27,6 +27,7 @@ const ContainerHelper = ({id, active=false}) => {
     
    const  [enabled, setEnabled] = useState(active)
     //console.log("ContainerHelper id", id ,"active", active)
+    const listenerId = `listener_containerhelper_${id}`;
     useEffect(() => {
         const handleUpdateState = (msg) => {
                 if ('isFullScreen' in msg) {
@@ -45,9 +46,9 @@ const ContainerHelper = ({id, active=false}) => {
                  }
                 }
             }
-        eventBus.on("updateState", handleUpdateState)
+        eventBus.on("updateState", handleUpdateState, listenerId)
         return () => {
-            eventBus.off("updateState", handleUpdateState)
+            //eventBus.off("updateState", handleUpdateState,listenerId)
         }})
 
 
diff --git a/src/components/ExtraContent/extraContentItem.js b/src/components/ExtraContent/extraContentItem.js
index 118a01af..5c0c2b63 100644
--- a/src/components/ExtraContent/extraContentItem.js
+++ b/src/components/ExtraContent/extraContentItem.js
@@ -42,6 +42,8 @@ const ExtraContentItem = ({
     const { createNewRequest } = useHttpFn
     const element_id = id.replace("extra_content_", type)
     const refreshIntervalRef = useRef(null)
+    console.log(`Rendering ExtraContentItem ${id} at ${Date.now()}`);
+
 
     const handleContentSuccess = useCallback((result) => {
         let blob
@@ -95,12 +97,13 @@ const ExtraContentItem = ({
     }, [loadContent])
 
     useEffect(() => {
+        const listenerId = `listener_${id}`;
         const handleUpdateState = (msg) => {
             if (msg.id == id) { 
-                console.log("Matching message for element " + id)
-                console.log(msg)
+                console.log(`Received message for ${id} with listener ${listenerId}`, msg);
                 const element = document.getElementById(id)
                 if ( 'forceRefresh' in msg && msg.forceRefresh) {
+                    console.log(`Processing forceRefresh for ${id}`);
                     loadContent()
                 }
                 if ('isVisible' in msg) {
@@ -124,9 +127,10 @@ const ExtraContentItem = ({
                 }
             }
         }
-        eventBus.on("updateState", handleUpdateState)
+        eventBus.on("updateState", handleUpdateState, listenerId)
         return () => {
-            eventBus.off("updateState", handleUpdateState)
+            //console.log(`Removing listener ${listenerId} for ${id}`);
+            //eventBus.off("updateState", handleUpdateState, listenerId)
         }
     }, [id, loadContent])
 
@@ -277,7 +281,7 @@ const ExtraContentItem = ({
             )}
         </div>
     ), [type, refreshtime, isPaused, captureImage, togglePause]);
-
+    console.log("Rendering :" + "<div id=" + id+ " class='extra-content-container'>")
     return (
         <div id={id} class="extra-content-container">
             <ContainerHelper id={id} />
diff --git a/src/components/ExtraContent/index.js b/src/components/ExtraContent/index.js
index 71962c17..e1fe8f63 100644
--- a/src/components/ExtraContent/index.js
+++ b/src/components/ExtraContent/index.js
@@ -31,143 +31,167 @@ import { T } from "../Translations"
 import { RefreshCcw } from "preact-feather"
 import { iconsFeather } from "../Images"
 import { iconsTarget } from "../../targets"
-import { useUiContextFn } from "../../contexts"
+import { useUiContextFn, useUiContext } from "../../contexts"
 
 const ExtraContent = ({ id, source, refreshtime, label, type, target, icon }) => {
-    
+
     const [isFullScreen, setIsFullScreen] = useState(false)
+    const { panels } = useUiContext()
     const extra_content_id = `extra_content_${id}`
     const target_id = `target_${id}`
     const iconsList = { ...iconsTarget, ...iconsFeather }
     console.log("Extra Content " + id)
+
     const updateContentPosition = () => {
+        if (!useUiContextFn.panels.isVisible(id)) return
+        console.log("Updating position for element " + extra_content_id, "in target", target_id, " of panel ", id)
         const container = document.getElementById(target_id)
         if (container) {
             const { top, left, width, height } = container.getBoundingClientRect()
             console.log("New Position for element " + extra_content_id + ":", top, left, width, height)
-            eventBus.emit('updateState', {id: extra_content_id, position: {top, left, width, height}, isVisible: true, from: "extraContent(position)"})
+            eventBus.emit('updateState', { id: extra_content_id, position: { top, left, width, height }, isVisible: true, from: "extraContent(position)" })
         } else {
             console.log("Element " + target_id + " doesn't exist")
         }
     }
-    
+
+    const handleScrollAndResize = () => requestAnimationFrame(updateContentPosition)
+    useEffect(() => {
+        console.log("Updating element " + extra_content_id + " because visible list changed")
+        if (useUiContextFn.panels.isVisible(id)) {
+            const main = document.getElementById("main")
+            if (main) {
+                main.removeEventListener('scroll', handleScrollAndResize)
+                main.removeEventListener('resize', handleScrollAndResize)
+           }
+            window.removeEventListener('resize', handleScrollAndResize)
+            if (main) {
+                 main.addEventListener('scroll', handleScrollAndResize)
+                 main.addEventListener('resize', handleScrollAndResize)
+            }
+            window.addEventListener('resize', handleScrollAndResize)
+            
+            updateContentPosition()
+    }
+    }, [panels.visibles])
+
     useEffect(() => {
         console.log("Mount element " + id)
         if (!elementsCache.has(extra_content_id)) {
-            console.error("Error display element " + extra_content_id," because it doesn't exist")
+            console.error("Error display element " + extra_content_id, " because it doesn't exist")
         } else {
             console.log("Updating element " + extra_content_id + " because it already exists")
             updateContentPosition()
         }
 
-        const handleScrollAndResize = () => requestAnimationFrame(updateContentPosition)
-     
-       const main = document.getElementById("main")
-       if (main) {
+        const main = document.getElementById("main")
+        if (main) {
             main.addEventListener('scroll', handleScrollAndResize)
             main.addEventListener('resize', handleScrollAndResize)
-       }
-       window.addEventListener('resize', handleScrollAndResize)
-   
+        }
+        window.addEventListener('resize', handleScrollAndResize)
+
 
         return () => {
             const main = document.getElementById("main")
             if (main) {
                 main.removeEventListener('scroll', handleScrollAndResize)
                 main.removeEventListener('resize', handleScrollAndResize)
-           }
+            }
             window.removeEventListener('resize', handleScrollAndResize)
             console.log("Hiding element " + id)
-            eventBus.emit('updateState', {id: extra_content_id, isVisible: false, from: "extraContent(return)"})
+            eventBus.emit('updateState', { id: extra_content_id, isVisible: false, from: "extraContent(return)" })
         }
     }, [])
 
 
-    const handleRefresh = () => {
-        useUiContextFn.haptic()
-        //console.log("Refreshing element " + extra_content_id)
-        eventBus.emit('updateState', {id: extra_content_id, forceRefresh: true, from: "extraContent(refresh)"})
-    }
-
+const handleRefresh = () => {
+    useUiContextFn.haptic()
+    console.log("Refreshing element " + extra_content_id)
+    //eventBus.list()
+    eventBus.emit('updateState', { id: extra_content_id, isVisible: true, forceRefresh: true, from: "extraContent(refresh)-" + Date.now() })
+    updateContentPosition()
+}
 
 
-    const PanelRenderControls = () => (
-        <span class="full-height">
-      
-            <ButtonImg
-                xs
-                m1
-                nomin="yes"
-                icon={<RefreshCcw size="0.8rem" />}
-                onclick={handleRefresh}
-            />
-                <FullScreenButton
-                    elementId={extra_content_id}
-                />
-                <CloseButton
-                    elementId={id}
-                    hideOnFullScreen={true}
-                />
-            
-       
-        </span>
-    )
 
-    const PageRenderControls = () => (
-        <div class="m-2 image-button-bar">
-            <ButtonImg
-                m1
-                nomin="yes"
-                icon={<RefreshCcw size="0.8rem" />}
-                onclick={handleRefresh}
-            />
-           
-                <FullScreenButton
-                    elementId={extra_content_id}
-                    asButton={true}
-                />
-     
+const PanelRenderControls = () => (
+    <span class="full-height">
+
+        <ButtonImg
+            xs
+            m1
+            nomin="yes"
+            icon={<RefreshCcw size="0.8rem" />}
+            onclick={handleRefresh}
+        />
+        <FullScreenButton
+            elementId={extra_content_id}
+        />
+        <CloseButton
+            elementId={id}
+            hideOnFullScreen={true}
+        />
+
+
+    </span>
+)
+
+const PageRenderControls = () => (
+    <div class="m-2 image-button-bar">
+        <ButtonImg
+            m1
+            nomin="yes"
+            icon={<RefreshCcw size="0.8rem" />}
+            onclick={handleRefresh}
+        />
+
+        <FullScreenButton
+            elementId={extra_content_id}
+            asButton={true}
+        />
+
+    </div>
+)
+
+if (target === "page") {
+    //console.log("Rendering page element " + extra_content_id)
+    //console.log("Page Id " + id)
+    return (
+        <div class="page-container" id={id}>
+            <div id={target_id} class="page-target-container">
+                {/* content should fit this container */}
+            </div>
+            <PageRenderControls />
         </div>
     )
+}
 
-    if (target === "page") {
-        //console.log("Rendering page element " + extra_content_id)
-        //console.log("Page Id " + id)
-        return (
-            <div class = "page-container" id={id}>
-            <div id={target_id}  class="page-target-container">
-              {/* content should fit this container */}
-            </div>
-            <PageRenderControls/>
+if (target === "panel") {
+    // console.log("Rendering panel element " + extra_content_id)
+    //console.log("Panel Id " + id)
+    const displayIcon = iconsList[icon] || ""
+    return (
+        <Fragment>
+            <div class="panel panel-dashboard" id={id}>
+
+                <div class="navbar">
+                    <span class="navbar-section feather-icon-container">
+                        {displayIcon}
+                        <strong class="text-ellipsis">{T(label)}</strong>
+                    </span>
+                    <span class="navbar-section">
+                        {PanelRenderControls()}
+                    </span>
+                </div>
+                <div class="panel-body panel-body-dashboard no-margin-no-padding panel-target-container" id={target_id}>
+                    {/* content should fit this container */}
+                </div>
             </div>
-        )
-    }
 
-    if (target === "panel") {
-       // console.log("Rendering panel element " + extra_content_id)
-       //console.log("Panel Id " + id)
-        const displayIcon = iconsList[icon] || ""
-        return (
-            <Fragment>
-                <div class="panel panel-dashboard" id={id}>
-                   
-                    <div class="navbar">
-                        <span class="navbar-section feather-icon-container">
-                            {displayIcon}
-                            <strong class="text-ellipsis">{T(label)}</strong>
-                        </span>
-                        <span class="navbar-section">
-                            {PanelRenderControls()}
-                        </span>
-                    </div>
-                    <div class="panel-body panel-body-dashboard no-margin-no-padding panel-target-container"   id={target_id}>
-                        {/* content should fit this container */}
-                    </div>
-                </div>
-              
-            </Fragment>
-        )
-    }
+        </Fragment>
+    )
+}
 }
 
 export { ExtraContent, ExtraContentItem }
\ No newline at end of file
diff --git a/src/contexts/UiContext.js b/src/contexts/UiContext.js
index c2648d7a..751fbb4f 100644
--- a/src/contexts/UiContext.js
+++ b/src/contexts/UiContext.js
@@ -60,9 +60,10 @@ const UiContextProvider = ({ children }) => {
     notificationsRef.current = notifications
 
     const removeFromVisibles = (id) => {
-        setVisiblePanelsList(
-            visiblePanelsList.filter((element) => element.id != id)
-        )
+        const newlist = visiblePanelsList.filter((element) => element.id != id)
+        console.log("Removing element " + id + " from visible panels list")
+        console.log(visiblePanelsList)
+        setVisiblePanelsList(newlist)
     }
 
     const addToVisibles = (id, fixed) => {
diff --git a/src/hooks/eventBus.js b/src/hooks/eventBus.js
index 01e47e3a..e761097b 100644
--- a/src/hooks/eventBus.js
+++ b/src/hooks/eventBus.js
@@ -23,28 +23,58 @@
  */
 
 class EventBus {
-    //Constructor init listeners list
-    constructor() {
+  //Constructor init listeners list
+  constructor() {
       this.listeners = {};
-    }
-   
-    //Listener
-    on(event, callback) {
-      if (!this.listeners[event]) {
-        this.listeners[event] = [];
-      }
-      this.listeners[event].push(callback);
-    }
-    // Remove listener from memory
-    off(event, callback) {
-      if (!this.listeners[event]) return;
-      this.listeners[event] = this.listeners[event].filter(cb => cb !== callback);
-    }
-  // Emitter
-    emit(event, data) {
+      this.listenerId = 0;
+  }
+// Listener
+on(event, callback, id = null) {
+  if (!this.listeners[event]) {
+      this.listeners[event] = [];
+  }
+
+  const listenerId = id !== null ? id : this.listenerId++;
+
+  // check if listener with this ID already exists
+  const existingListenerIndex = this.listeners[event].findIndex(listener => listener.id === listenerId);
+  if (existingListenerIndex !== -1) {
+      console.warn(`Listener with ID ${listenerId} for event ${event} already exists. Replacing.`);
+      // Replace existing listener
+      this.listeners[event][existingListenerIndex] = { id: listenerId, callback };
+  } else {
+      // Add new listener
+      this.listeners[event].push({ id: listenerId, callback });
+  }
+
+  //console.log(`Listener ${existingListenerIndex !== -1 ? 'updated' : 'added'} for event: ${event}, ID: ${listenerId}, Total listeners: ${this.listeners[event].length}`);
+  return listenerId;
+}
+
+// Remove listener from memory
+  off(event, id) {
       if (!this.listeners[event]) return;
-      this.listeners[event].forEach(callback => callback(data));
-    }
+      this.listeners[event] = this.listeners[event].filter(listener => listener.id !== id);
   }
-  
-  export const eventBus = new EventBus();
+// Emitter
+emit(event, data) {
+  //console.log(`Emitting event: ${event}`, data);
+  ////console.log(`Current listeners for ${event}:`, this.listeners[event]);
+  if (!this.listeners[event]) return;
+  this.listeners[event].forEach(listener => {
+      ////console.log(`Calling listener with ID: ${listener.id}`);
+      listener.callback(data);
+  });
+}
+// List active listeners for debugging
+  list() {
+      //console.log("Active listeners:");
+      for (const event in this.listeners) {
+          this.listeners[event].forEach(listener => {
+              //console.log(`Event: ${event}, ID: ${listener.id}`);
+          });
+      }
+  }
+}
+
+export const eventBus = new EventBus();
\ No newline at end of file