diff --git a/src/areas/elementsCache.js b/src/areas/elementsCache.js
new file mode 100644
index 000000000..9e920745f
--- /dev/null
+++ b/src/areas/elementsCache.js
@@ -0,0 +1,140 @@
+/*
+ elementsCache.js - ESP3D WebUI MainPage file
+
+ Copyright (c) 2020 Luc Lebosse. All rights reserved.
+  Original code inspiration : 2021 Alexandre Aussourd
+
+ This code is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 2.1 of the License, or (at your option) any later version.
+
+ This code is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ Lesser General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public
+ License along with This code; if not, write to the Free Software
+ Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
+*/
+import { h, render } from "preact"
+import { ExtraContentItem } from "../components/ExtraContent"
+
+const ElementsCache = () => {
+    return (<div style="position: fixed; top: 0; left: 0; width: 0; height: 0; overflow: visible;" id="elementsCache"></div>)
+}
+
+const elementsCache = {
+
+    has: (id) => {
+        const cacheHost = document.getElementById("elementsCache")
+        if (!cacheHost) return false
+        return cacheHost.querySelector('#' + id) !== null
+    },
+
+    create: (id, props) => {
+        if (!elementsCache.has(id)) {
+            const cacheHost = document.getElementById("elementsCache")
+            console.log("Creating element, because it doesn't exist: " + id)
+            console.log("Current host size is " + cacheHost.children.length)
+            try {
+                const container = document.getElementById("elementsCache")
+                const vnode = container.appendChild(document.createElement('div'))
+                vnode.id = "new_element" + id
+                const new_vnode = render(<ExtraContentItem {...props} id={id} />, container, vnode)
+                console.log("Element created: " + id + ", exists in cache: " + elementsCache.has(id))
+                console.log("Now Current host size is " + cacheHost.children.length)
+                console.log(cacheHost.innerHTML)
+                return true
+            } catch (error) {
+                console.error(`Error creating element ${id}:`, error)
+                return false
+            }
+        } else {
+            //console.log("Element already exists: " + id)
+            return true
+        }
+    },
+
+    get: (id) => {
+        const cacheHost = document.getElementById("elementsCache")
+        if (!cacheHost) return null
+        return cacheHost.querySelector('#' + id)
+    },
+
+    remove: (id) => {
+        const cacheItem = elementsCache.get(id)
+        if (cacheItem) {
+            try {
+                const cacheHost = document.getElementById("elementsCache")
+                if (!cacheHost) return false
+                removeCache = removeChild(cacheHost, cacheItem)
+                if (removeCache) {
+                    removeCache.remove()
+                    return true
+                } else {
+                    return false
+                }
+            } catch (error) {
+                console.error(`Error removing element ${id}:`, error)
+                return false
+            }
+        }
+        return false
+    },
+
+    updateState: (id, newState) => {
+        const element = document.getElementById(id);
+        console.log("Updating state for element " + id)
+        console.log(newState)
+        if (element) {
+            if ('isVisible' in newState) {
+                element.style.display = newState.isVisible ? 'block' : 'none';
+            }
+            if ('isFullScreen' in newState) {
+                if (newState.isFullScreen) {
+                    element.style.position = 'fixed';
+                    element.style.top = '0';
+                    element.style.left = '0';
+                    element.style.width = '100%';
+                    element.style.height = '100%';
+                    element.style.zIndex = '9999';
+                } else {
+                    // Rétablir les styles normaux
+                    element.style.position = 'absolute';
+                    element.style.top = '';
+                    element.style.left = '';
+                    element.style.width = '';
+                    element.style.height = '';
+                    element.style.zIndex = '';
+                }
+            }
+            return true;
+        }
+        return false;
+    },
+
+    updatePosition: (id, position) => {
+        const cacheItem = elementsCache.get(id)
+        //console.log("Updating position for element " + id + ", exists: " + elementsCache.has(id))
+        if (cacheItem) {
+            try {
+                //console.log("Updating positions to", position)
+                cacheItem.style.top = `${position.top}px`;
+                cacheItem.style.left = `${position.left}px`;
+                cacheItem.style.width = `${position.width}px`;
+                cacheItem.style.height = `${position.height}px`;
+                return true
+            } catch (error) {
+                console.error(`Error updating position for element ${id}:`, error)
+                return false
+            }
+        } else {
+            //console.log("Element " + id + " doesn't exist")
+        }
+        return false
+    }
+}
+
+export { ElementsCache, elementsCache }
\ No newline at end of file
diff --git a/src/components/App/index.js b/src/components/App/index.js
index 7f92d3c11..d8e49da3f 100644
--- a/src/components/App/index.js
+++ b/src/components/App/index.js
@@ -31,10 +31,12 @@ import { TargetContextProvider } from "../../targets"
 import { ToastsContainer } from "../Toast"
 import { ModalContainer } from "../Modal"
 import { ContentContainer } from "../../areas"
+import { ElementsCache } from "../../areas/elementsCache"
 
 const App = () => {
     return (
         <div id="app">
+            <ElementsCache />
             <DatasContextProvider>
                 <TargetContextProvider>
                     <RouterContextProvider>
diff --git a/src/components/Controls/FullScreenButton.js b/src/components/Controls/FullScreenButton.js
index 11b9bba47..dcc0c354b 100644
--- a/src/components/Controls/FullScreenButton.js
+++ b/src/components/Controls/FullScreenButton.js
@@ -25,12 +25,17 @@ const isFullScreen = (element) => {
     return document.fullscreenElement === element
 }
 
-const FullScreenButton = ({ panelRef, hideOnFullScreen, asButton }) => {
+const FullScreenButton = ({ panelRef,panelId, hideOnFullScreen, asButton, onclick }) => {
     const [isFullScreenMode, setIsFullScreenMode] = useState(false)
-
+    const getPanelRef = () => {
+        if(panelRef) return panelRef.current
+        if (panelId)return document.getElementById(panelId)
+            return null
+    }
     useEffect(() => {
         const handleFullscreenChange = () => {
-            setIsFullScreenMode(isFullScreen(panelRef.current))
+             if(getPanelRef)   
+            setIsFullScreenMode(isFullScreen(getPanelRef))
         }
 
         document.addEventListener("fullscreenchange", handleFullscreenChange)
@@ -41,11 +46,18 @@ const FullScreenButton = ({ panelRef, hideOnFullScreen, asButton }) => {
                 handleFullscreenChange
             )
         }
-    }, [panelRef])
+    }, [])
 
     const toggleFullScreen = () => {
-        if (!isFullScreenMode) {
-            panelRef.current.requestFullscreen()
+        if (!isFullScreenMode) {//
+            if (onclick) {
+                onclick()
+            }
+            if (getPanelRef()){
+                getPanelRef().requestFullscreen()
+            }
+           
+            console.log("Fullscreen activated pour " + panelId)
         } else {
             if (document.fullscreenElement) {
                 document.exitFullscreen()
diff --git a/src/components/ExtraContent/extraContentItem.js b/src/components/ExtraContent/extraContentItem.js
new file mode 100644
index 000000000..2aac080aa
--- /dev/null
+++ b/src/components/ExtraContent/extraContentItem.js
@@ -0,0 +1,185 @@
+/*
+ extraContentItem.js - ESP3D WebUI navigation page file
+
+ Copyright (c) 2020 Luc Lebosse. All rights reserved.
+
+ This code is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 2.1 of the License, or (at your option) any later version.
+
+ This code is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ Lesser General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public
+ License along with This code; if not, write to the Free Software
+ Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
+*/
+import { Fragment, h } from "preact"
+import { useState, useEffect, useCallback } from "preact/hooks"
+import { espHttpURL } from "../Helpers"
+import { useHttpFn } from "../../hooks"
+import {
+    ButtonImg,
+    FullScreenButton,
+    CloseButton,
+    ContainerHelper,
+} from "../Controls"
+import { T } from "../Translations"
+import { Play, Pause, Aperture, RefreshCcw } from "preact-feather"
+import { elementsCache } from "../../areas/elementsCache"
+
+const ExtraContentItem = ({ id, source, type, label, target, refreshtime, isVisible = true, isFullScreen = false, refreshPaused = false }) => {
+    const [contentUrl, setContentUrl] = useState("")
+    const { createNewRequest } = useHttpFn
+    console.log( id)
+    //console.log("ExtraContentItem rendering for " + id, "is in cache: " + elementsCache.has(id))
+    /*const loadContent = useCallback((forceReload = false) => {
+        if ( elementsCache.has(id) && !forceReload) {
+            console.log("Content already loaded for " + id)
+            return
+        }
+        if (source.startsWith("http") || forceReload) {
+            setContentUrl(source)
+        } else {
+            const idquery = type === "content" ? type + id : "download" + id
+            createNewRequest(
+                espHttpURL(source),
+                { method: "GET", id: idquery, max: 2 },
+                {
+                    onSuccess: handleContentSuccess,
+                    onFail: handleContentError,
+                }
+            )
+        }
+    }, [id, source, type, createNewRequest])
+
+    const handleContentSuccess = useCallback((result) => {
+        let blob
+        switch (type) {
+            case "camera":
+            case "image":
+                blob = new Blob([result], { type: "image/jpeg" })
+                break
+            case "extension":
+            case "content":
+                blob = new Blob([result], { type: "text/html" })
+                break
+            default:
+                blob = new Blob([result], { type: "text/plain" })
+        }
+        const url = URL.createObjectURL(blob)
+        setContentUrl(url)
+    }, [type])
+
+    const handleContentError = useCallback((error) => {
+        console.error(`Error loading content for ${id}:`, error)
+        const errorContent = `<html><body><div style='display: flex; justify-content: center; align-items: center; height: 100%; font-family: Arial, sans-serif;'><p>Error loading content</p></div></body></html>`
+        const errorBlob = new Blob([errorContent], { type: "text/html" })
+        setContentUrl(URL.createObjectURL(errorBlob))
+    }, [id])
+*/
+    useEffect(() => {
+        console.log("ExtraContentItem rendering for " + id, "is in cache: " + elementsCache.has(id))
+    }, [])
+/*
+    const handleRefresh = () => loadContent(true)
+    const toggleFullScreen = () => elementsCache.updateState(id, { isFullScreen: !isFullScreen })
+    const toggleRefreshPause = () => elementsCache.updateState(id, { refreshPaused: !refreshPaused })
+
+    const renderControls = () => (
+        <div class="m-2 image-button-bar">
+            {parseInt(refreshtime) === 0 && target === "page" && (
+                <ButtonImg
+                    m1
+                    icon={<RefreshCcw size="0.8rem" />}
+                    onclick={handleRefresh}
+                />
+            )}
+            {parseInt(refreshtime) > 0 && type !== "extension" && (
+                <>
+                    <ButtonImg
+                        m1
+                        tooltip
+                        data-tooltip={refreshPaused ? T("S185") : T("S184")}
+                        icon={refreshPaused ? <Play /> : <Pause />}
+                        onclick={toggleRefreshPause}
+                    />
+                    {type !== "content" && (
+                        <ButtonImg
+                            m1
+                            tooltip
+                            data-tooltip={T("S186")}
+                            icon={<Aperture />}
+                            onclick={() => {
+                                // Handle screenshot functionality here
+                            }}
+                        />
+                    )}
+                </>
+            )}
+           
+            {target === "panel" && (
+                <Fragment>
+                <CloseButton
+                    panelRef={{ current: document.getElementById(`extra_content_${id}`) }}
+                    panelId={id}
+                    hideOnFullScreen={true}
+                    callbackfn={() => elementsCache.updateState(id, { isVisible: false })}
+                /> 
+                <FullScreenButton
+                panelRef={{ current: document.getElementById(`extra_content_${id}`) }}
+                hideOnFullScreen={true}
+                asButton={true}
+                onclick={toggleFullScreen}
+            />
+            </Fragment>
+            )}
+        </div>
+    )
+*/
+    const contentStyle = {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        zIndex: isFullScreen ? '9999' : 'auto',
+        display: isVisible ? 'block' : 'none',
+    }
+
+    let content
+    if (type === "camera" || type === "image") {
+        content = <img src={contentUrl} alt={label} style="width: 100%; height: 100%; object-fit: contain;" />
+    } else {
+        content = (
+            <iframe
+                src={contentUrl}
+                style={{
+                    border: 'none',
+                    width: '100%',
+                    height: '100%',
+                    visibility: contentUrl ? 'visible' : 'hidden'
+                }}
+                class={type === "extension" ? "extensionContainer" : "content-container"}
+            />
+        )
+    }
+    console.log("ExtraContentItem rendering for " + id, "is in cache: " + elementsCache.has(id))
+    return (
+        <div id={id} class="extra-content-container" >
+            My {type} content is here
+         </div>
+    )
+  /*  return (
+        <div id={id} style={contentStyle}>
+            {content}
+            {renderControls()}
+            {target === "panel" && <ContainerHelper id={id} />}
+        </div>
+    )*/
+}
+
+export { ExtraContentItem }
\ No newline at end of file
diff --git a/src/components/ExtraContent/index.js b/src/components/ExtraContent/index.js
index 3ea62fb77..b9a4cfc24 100644
--- a/src/components/ExtraContent/index.js
+++ b/src/components/ExtraContent/index.js
@@ -17,12 +17,10 @@
  License along with This code; if not, write to the Free Software
  Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 */
-import { Fragment, h } from "preact"
-import { useRef, useEffect, useState } from "preact/hooks"
-import { espHttpURL } from "../Helpers"
-import { useUiContextFn } from "../../contexts"
-import { useHttpFn } from "../../hooks"
-import { Play, Pause, Aperture, RefreshCcw } from "preact-feather"
+import { h, Fragment } from "preact"
+import { useRef, useEffect, useCallback, useState } from "preact/hooks"
+import { elementsCache } from "../../areas/elementsCache"
+import { ExtraContentItem } from "./extraContentItem"
 import {
     ButtonImg,
     FullScreenButton,
@@ -30,361 +28,145 @@ import {
     ContainerHelper,
 } from "../Controls"
 import { T } from "../Translations"
+import { RefreshCcw } from "preact-feather"
 import { iconsFeather } from "../Images"
 import { iconsTarget } from "../../targets"
+import { useUiContextFn } from "../../contexts"
 
-const contentCache = {}
-const refreshPausedList = {}
-const timerIDs = {}
-
-const ExtraContent = ({
-    id,
-    source,
-    refreshtime,
-    label,
-    type,
-    target,
-    icon,
-}) => {
-    const { createNewRequest } = useHttpFn
-    const [refreshPaused, setRefreshPaused] = useState(refreshPausedList[id])
+const ExtraContent = ({ id, source, refreshtime, label, type, target, icon }) => {
+    const containerRef = useRef(null)
     const [isFullScreen, setIsFullScreen] = useState(false)
-    const element = useRef(null)
-    const imageCache = useRef(null)
-    const panelRef = useRef(null)
-    const pageSource = type == "camera" ? "/snap" : source
+    const extra_content_id = `extra_content_${id}`
+    const target_id = `target_${id}`
     const iconsList = { ...iconsTarget, ...iconsFeather }
+   console.log(id)
+    const updateContentPosition = () => {
+        if (containerRef.current) {
+            const { top, left, width, height } = containerRef.current.getBoundingClientRect()
+            //console.log("New Position for element " + extra_content_id + ":", top, left, width, height)
+            elementsCache.updatePosition(extra_content_id, { top, left, width, height })
+        } else {
+            //console.log("Element " + extra_content_id + " doesn't exist")
+        }
+    }
+    updateContentPosition()
     useEffect(() => {
-        const handleFullScreenChange = () => {
-            setIsFullScreen(document.fullscreenElement !== null)
+        if (!elementsCache.has(extra_content_id)) {
+            console.log("Creating element " + extra_content_id," because it doesn't exist")
+            elementsCache.create(extra_content_id, { 
+                id, 
+                source, 
+                type, 
+                label, 
+                target, 
+                refreshtime, 
+                icon,
+                isVisible: true
+            })
+        } else {
+            console.log("Updating element " + extra_content_id + " because it already exists")
+            elementsCache.updateState(extra_content_id, { isVisible: true})
         }
 
-        document.addEventListener("fullscreenchange", handleFullScreenChange)
+        updateContentPosition()
+
+        const handleScrollAndResize = () => requestAnimationFrame(updateContentPosition)
+     
+       const main = document.getElementById("main")
+       if (main) {
+            main.addEventListener('scroll', handleScrollAndResize)
+            main.addEventListener('resize', handleScrollAndResize)
+       }
+       window.addEventListener('resize', handleScrollAndResize)
+   
 
         return () => {
-            document.removeEventListener(
-                "fullscreenchange",
-                handleFullScreenChange
-            )
+            const main = document.getElementById("main")
+            if (main) {
+                main.removeEventListener('scroll', handleScrollAndResize)
+                main.removeEventListener('resize', handleScrollAndResize)
+           }
+            window.removeEventListener('resize', handleScrollAndResize)
+            console.log("Hiding element " + extra_content_id)
+            //elementsCache.updateState(extra_content_id, { isVisible: false })
         }
     }, [])
-    const loadContent = (init = false) => {
-        if (!init && refreshPausedList[id]) {
-            return
-        }
-        if (pageSource.startsWith("http")) {
-            switch (type) {
-                case "image":
-                    if (element.current) element.current.src = pageSource
-                    break
-                default:
-                    if (element.current) element.current.src = pageSource
-            }
-        } else {
-            if (
-                (type == "image" || type == "extension") &&
-                contentCache[id] != undefined
-            ) {
-                element.current.classList.remove("d-block")
-                element.current.classList.add("d-none")
-                element.current.onload = () => {
-                    URL.revokeObjectURL(element.current.src)
-                    if (type == "extension") {
-                        const doc = element.current.contentWindow.document
-                        const body = doc.querySelector("body")
-                        body.classList.add("body-extension")
-                        const css = document.querySelectorAll("style")
-                        //inject css
-                        css.forEach((csstag) => {
-                            doc.head.appendChild(csstag.cloneNode(true))
-                        }) //to avoid the flickering when apply css
-                    }
-                    element.current.classList.remove("d-none")
-                    element.current.classList.add("d-block")
-                }
-                element.current.src = URL.createObjectURL(contentCache[id])
-            } else {
-                const idquery = type == "content" ? type + id : "download" + id
-                createNewRequest(
-                    espHttpURL(pageSource),
-                    { method: "GET", id: idquery, max: 2 },
-                    {
-                        onSuccess: (result) => {
-                            switch (type) {
-                                case "camera":
-                                case "image":
-                                    if (element.current) {
-                                        imageCache.current = result
-                                        element.current.onload = () => {
-                                            URL.revokeObjectURL(
-                                                element.current.src
-                                            )
-                                        }
-                                        contentCache[id] = result
-                                        element.current.src =
-                                            URL.createObjectURL(
-                                                contentCache[id]
-                                            )
-                                    }
-                                    break
-                                //cannot be used because this way disable javascript in iframe
-                                case "extension":
-                                    element.current.onload = () => {
-                                        URL.revokeObjectURL(element.current.src)
-                                        const doc =
-                                            element.current.contentWindow
-                                                .document
-                                        const body = doc.querySelector("body")
-                                        body.classList.add("body-extension")
-                                        const css =
-                                            document.querySelectorAll("style")
-                                        //inject css
-                                        css.forEach((csstag) => {
-                                            doc.head.appendChild(
-                                                csstag.cloneNode(true)
-                                            )
-                                        })
-                                        //to avoid the flickering when apply css
-                                        element.current.classList.remove(
-                                            "d-none"
-                                        )
-                                        element.current.classList.add("d-block")
-                                    }
-                                    contentCache[id] = result
-                                    element.current.src = URL.createObjectURL(
-                                        contentCache[id]
-                                    )
-                                    //todo inject css
-                                    break
-                                default:
-                                    if (
-                                        element.current &&
-                                        element.current.contentWindow
-                                    )
-                                        element.current.contentWindow.document.body.innerHTML =
-                                            result
-                            }
-                        },
-                        onFail: (error) => {
-                            const errorContent =
-                                "<div style='display: flex; justify-content: center; align-items: center; height: 100%; font-family: Arial, sans-serif;'><p>" +
-                                T("S222") +
-                                pageSource +
-                                "</p></div>"
-                            element.current.contentWindow.document.body.innerHTML =
-                                errorContent
-                        },
-                    }
-                )
-            }
-        }
-    }
-    const ControlButtons = () => {
-        return (
-            <div class="m-2 image-button-bar">
-                {parseInt(refreshtime) == 0 && target == "page" && (
-                    <ButtonImg
-                        m1
-                        icon={<RefreshCcw size="0.8rem" />}
-                        onclick={() => {
-                            loadContent()
-                        }}
-                    />
-                )}
-                {parseInt(refreshtime) > 0 && type != "extension" && (
-                    <Fragment>
-                        <ButtonImg
-                            m1
-                            tooltip
-                            data-tooltip={refreshPaused ? T("S185") : T("S184")}
-                            icon={refreshPaused ? <Play /> : <Pause />}
-                            onclick={() => {
-                                useUiContextFn.haptic()
-                                setRefreshPaused(!refreshPaused)
-                                refreshPausedList[id] = !refreshPaused
-                            }}
-                        />
-                        {type != "content" && (
-                            <ButtonImg
-                                m1
-                                tooltip
-                                data-tooltip={T("S186")}
-                                icon={<Aperture />}
-                                onclick={() => {
-                                    useUiContextFn.haptic()
-                                    const typeImage =
-                                        type == "camera"
-                                            ? "image/jpeg"
-                                            : imageCache.current.type
-                                    const filename =
-                                        "snap." + typeImage.split("/")[1]
-                                    const file = new Blob(
-                                        [imageCache.current],
-                                        {
-                                            type: typeImage,
-                                        }
-                                    )
-                                    if (window.navigator.msSaveOrOpenBlob)
-                                        // IE10+
-                                        window.navigator.msSaveOrOpenBlob(
-                                            file,
-                                            filename
-                                        )
-                                    else {
-                                        // Others
-                                        const a = document.createElement("a")
-                                        const url = URL.createObjectURL(file)
-                                        a.href = url
-                                        a.download = filename
-                                        a.onload = () => {
-                                            URL.revokeObjectURL(a.href)
-                                        }
-                                        document.body.appendChild(a)
-                                        a.click()
-                                        setTimeout(function () {
-                                            document.body.removeChild(a)
-                                            window.URL.revokeObjectURL(url)
-                                        }, 0)
-                                    }
-                                }}
-                            />
-                        )}
-                    </Fragment>
-                )}
-                {target == "page" && (
-                    <Fragment>
-                        <span class="m-1" />
-                        <FullScreenButton
-                            panelRef={panelRef}
-                            hideOnFullScreen={true}
-                            asButton={true}
-                        />
-                    </Fragment>
-                )}
-            </div>
-        )
-    }
 
-    const MainContent = () => {
-        switch (type) {
-            case "camera":
-                return (
-                    <img
-                        class="mt-2"
-                        ref={element}
-                        id={"page_content_" + id}
-                        src={pageSource.startsWith("http") ? pageSource : ""}
-                        alt={label}
-                    />
-                )
-            case "image":
-                return (
-                    <img
-                        class="mt-2"
-                        ref={element}
-                        id={"page_content_" + id}
-                        src={pageSource.startsWith("http") ? pageSource : ""}
-                        alt={label}
-                    />
-                )
-            default:
-                const handleIframeError = () => {
-                    console.log("Error loading iframe")
-                }
-                return (
-                    <iframe
-                        class={
-                            type == "extension"
-                                ? "extensionContainer d-block iframe-container"
-                                : "content-container d-block iframe-container"
-                        }
-                        ref={element}
-                        id={"page_content_" + id}
-                        src={pageSource.startsWith("http") ? pageSource : ""}
-                        alt={label}
-                    ></iframe>
-                )
-        }
+
+    const handleRefresh = () => {
+        useUiContextFn.haptic()
+        console.log("Refreshing element " + extra_content_id)
+        elementsCache.updateState(extra_content_id, { forceRefresh: true })
     }
 
-    useEffect(() => {
-        //load using internal http manager
-        if (!pageSource.startsWith("http")) loadContent(true)
-        //init timer if any
+    const handleFullScreen = () => {
+        setIsFullScreen(!isFullScreen)
+        console.log("Toggling fullscreen for element " + extra_content_id)
+        elementsCache.updateState(extra_content_id, { isFullScreen: !isFullScreen })
+    }
 
-        if (refreshtime != 0 && type != "extension") {
-            clearInterval(timerIDs[id])
-            timerIDs[id] = setInterval(loadContent, refreshtime)
-        }
+    const renderControls = () => (
+        <div class="m-2 image-button-bar">
+            <ButtonImg
+                xs
+                m1
+                nomin="yes"
+                icon={<RefreshCcw size="0.8rem" />}
+                onclick={handleRefresh}
+            />
+            <span class="full-height">
+                <FullScreenButton
+                    panelId={extra_content_id}
+                    onclick={handleFullScreen}
+                />
+                <CloseButton
+                    panelRef={containerRef}
+                    panelId={id}
+                    callbackfn={() => elementsCache.updateState(extra_content_id, { isVisible: false })}
+                />
+            </span>
+        </div>
+    )
 
-        return () => {
-            //cleanup
-            if (refreshtime != 0 && type != "extension") {
-                clearInterval(timerIDs[id])
-            }
-        }
-    })
-    if (target == "page")
+    if (target === "page") {
+        console.log("Rendering page element " + extra_content_id)
         return (
-            <div id={"page_"+id} ref={panelRef} style="height: 100%">
-                <ContainerHelper id={"page_"+id} /> 
-                <MainContent />
-                <ControlButtons />
+            <div id={target_id} ref={containerRef} style="height: 100%;">
+                <ContainerHelper id={`page_${id}`} />
+                {renderControls()}
             </div>
         )
-    if (target == "panel") {
-        const displayIcon = iconsList[icon] ? iconsList[icon] : ""
-        //console.log("Panel :", id, "Ref :", panelRef.current)
+    }
+
+    if (target === "panel") {
+       // console.log("Rendering panel element " + extra_content_id)
+        const displayIcon = iconsList[icon] || ""
         return (
-            <div class="panel panel-dashboard" id={id} ref={panelRef}>
-                <ContainerHelper 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">
-                        {refreshtime == 0 && (
-                            <ButtonImg
-                                xs
-                                m1
-                                nomin="yes"
-                                icon={<RefreshCcw size="0.8rem" />}
-                                onclick={() => {
-                                    useUiContextFn.haptic()
-                                    if (contentCache[id])
-                                        contentCache[id] = undefined
-                                    loadContent()
-                                }}
-                            />
-                        )}
-                        <span class="full-height">
-                            <FullScreenButton
-                                panelRef={panelRef}
-                                hideOnFullScreen={true}
-                            />
-                            <CloseButton
-                                panelRef={panelRef}
-                                panelId={id}
-                                hideOnFullScreen={true}
-                                callbackfn={() => {
-                                    clearInterval(timerIDs[id])
-                                }}
-                            />
+            <Fragment>
+                <div class="panel panel-dashboard" id={id}>
+                    <ContainerHelper 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">
+                            {renderControls()}
                         </span>
-                    </span>
-                </div>
-                <div class="panel-body panel-body-dashboard no-margin-no-padding">
-                    <MainContent />
-                </div>
-                {parseInt(refreshtime) > 0 && type != "extension" && (
-                    <div class="panel-footer">
-                        <ControlButtons />
                     </div>
-                )}
-            </div>
+                    <div class="panel-body panel-body-dashboard no-margin-no-padding"  ref={containerRef} id={target_id}>
+                        {/* Host content */}
+                    </div>
+                    {parseInt(refreshtime) > 0 && type !== "extension" && (
+                        <div class="panel-footer">
+                            {renderControls()}
+                        </div>
+                    )}
+                </div>
+              
+            </Fragment>
         )
     }
 }
 
-export default ExtraContent
+export { ExtraContent, ExtraContentItem }
\ No newline at end of file
diff --git a/src/components/Panels/ExtraPanel.js b/src/components/Panels/ExtraPanel.js
index 6449679bd..d07a71254 100644
--- a/src/components/Panels/ExtraPanel.js
+++ b/src/components/Panels/ExtraPanel.js
@@ -17,7 +17,7 @@ Files.js - ESP3D WebUI component file
 */
 
 import { h } from "preact"
-import ExtraContent from "../ExtraContent"
+import {ExtraContent} from "../ExtraContent"
 
 /*
  * Local const
diff --git a/src/pages/extrapages/index.js b/src/pages/extrapages/index.js
index 06973735a..f6b5c3ffc 100644
--- a/src/pages/extrapages/index.js
+++ b/src/pages/extrapages/index.js
@@ -18,7 +18,7 @@
  Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
 */
 import { h } from "preact"
-import ExtraContent from "../../components/ExtraContent"
+import {ExtraContent} from "../../components/ExtraContent"
 
 const ExtraPage = ({ id, source, refreshtime, label, type }) => {
     return (
diff --git a/src/style/components/_app.scss b/src/style/components/_app.scss
index a94a0115c..bc4de2b22 100644
--- a/src/style/components/_app.scss
+++ b/src/style/components/_app.scss
@@ -109,3 +109,19 @@ body {
 .modal-container {
     max-height: 95vh;
 }
+
+.page_extra {
+    height: 100%;
+    display: flex;
+    flex-direction: column; 
+}
+.extra-content-container {
+    height: 100%;
+    width: 100%;
+    position:absolute;
+    background-color: red!important;
+    color: white!important;
+    border: 1px solid red!important;
+    z-index: 99999;
+    opacity: 1;
+}
\ No newline at end of file