diff --git a/app/static/js/screen.js b/app/static/js/screen.js
new file mode 100644
index 0000000..646c6d2
--- /dev/null
+++ b/app/static/js/screen.js
@@ -0,0 +1,84 @@
+/**
+ * screen.js
+ * Provides fullscreen and exitFullscreen functionality:
+ * - fullscreen(): hides header/footer, expands container, recalculates main height, sets ?fullscreen=1
+ * - exitFullscreen(): restores header/footer, container, recalculates main height, removes parameter
+ * - toggleFullscreen(): toggles between modes
+ * Reacts to URL ?fullscreen=1 on page load
+ */
+
+function fullscreen() {
+  // Hide header and footer
+  const header = document.querySelector('header');
+  const footer = document.querySelector('footer');
+  if (header) header.style.display = 'none';
+  if (footer) footer.style.display = 'none';
+
+  // Expand container to full width
+  const container = document.querySelector('.container');
+  if (container && !container.classList.contains('container-fluid')) {
+    container.classList.replace('container', 'container-fluid');
+  }
+
+  // Recalculate main height
+  if (typeof adjustScrollContainerHeight === 'function') {
+    adjustScrollContainerHeight();
+  }
+  if (typeof updateCustomScrollbar === 'function') {
+    updateCustomScrollbar();
+  }
+
+  // Update URL parameter
+  const url = new URL(window.location);
+  url.searchParams.set('fullscreen', '1');
+  window.history.replaceState({}, '', url);
+}
+
+function exitFullscreen() {
+  // Show header and footer
+  const header = document.querySelector('header');
+  const footer = document.querySelector('footer');
+  if (header) header.style.display = '';
+  if (footer) footer.style.display = '';
+
+  // Revert container to default width
+  const container = document.querySelector('.container-fluid');
+  if (container) {
+    container.classList.replace('container-fluid', 'container');
+  }
+
+  // Recalculate main height
+  if (typeof adjustScrollContainerHeight === 'function') {
+    adjustScrollContainerHeight();
+  }
+  if (typeof updateCustomScrollbar === 'function') {
+    updateCustomScrollbar();
+  }
+
+  // Remove URL parameter
+  const url = new URL(window.location);
+  url.searchParams.delete('fullscreen');
+  window.history.replaceState({}, '', url);
+}
+
+function toggleFullscreen() {
+  const header = document.querySelector('header');
+  if (header && header.style.display === 'none') {
+    exitFullscreen();
+  } else {
+    fullscreen();
+  }
+}
+
+// On load, check URL param and react
+window.addEventListener('DOMContentLoaded', () => {
+  const params = new URLSearchParams(window.location.search);
+  if (params.get('fullscreen') === '1') {
+    fullscreen();
+  }
+});
+
+// Expose functions globally
+window.fullscreen = fullscreen;
+window.exitFullscreen = exitFullscreen;
+window.toggleFullscreen = toggleFullscreen;
diff --git a/app/templates/moduls/base.html.j2 b/app/templates/moduls/base.html.j2
index 8ddca1e..10932cd 100644
--- a/app/templates/moduls/base.html.j2
+++ b/app/templates/moduls/base.html.j2
@@ -54,5 +54,6 @@
         <script src="{{ url_for('static', filename='js/tooltip.js') }}"></script>
         <script src="{{ url_for('static', filename='js/custom_scrollbar.js') }}"></script>
         <script src="{{ url_for('static', filename='js/iframe.js') }}"></script>
+        <script src="{{ url_for('static', filename='js/screen.js') }}"></script>
     </body>
 </html>
\ No newline at end of file