diff --git a/package.json b/package.json
index f854501..06c8c88 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "guifier",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "type": "module",
   "license": "MIT",
   "description": "An interactive front-end toolkit simplifying JSON, YAML, TOML, and XML data. Visualize, edit, convert formats, and perform real-time data manipulations. Empower your data-driven apps with user-friendly data processing and interactive visualization.",
diff --git a/src/guifier/fields/containers/Container/Container.ts b/src/guifier/fields/containers/Container/Container.ts
index 44adc73..2d0db24 100644
--- a/src/guifier/fields/containers/Container/Container.ts
+++ b/src/guifier/fields/containers/Container/Container.ts
@@ -293,8 +293,8 @@ export abstract class Container extends Field {
         fullScreenContainer.append(fullScreenButton)
         fullScreenContainer.append(fullScreenExitButton)
 
+        const mainContainer = document.querySelector(this.params.elementSelector) as HTMLElement
         fullScreenContainer.addEventListener('click', () => {
-            const mainContainer = document.querySelector(this.params.elementSelector) as HTMLElement
             if (fullScreenButton.getAttribute('style') !== null) {
                 // when its not full screen
                 fullScreenExitButton.setAttribute('style', 'display: none')
@@ -310,6 +310,14 @@ export abstract class Container extends Field {
             }
         })
 
+        document.addEventListener('fullscreenchange', () => {
+            if (document.fullscreenElement === null) {
+                fullScreenExitButton.setAttribute('style', 'display: none')
+                fullScreenButton.removeAttribute('style')
+                mainContainer.removeAttribute('style')
+            }
+        })
+
         return fullScreenContainer
     }
 }