diff --git a/css/dashboard.css b/css/dashboard.css
index 1eab995..ee0bb88 100644
--- a/css/dashboard.css
+++ b/css/dashboard.css
@@ -1250,14 +1250,7 @@
 .dashboard-grapetree .card-legend .card-form,
 .dashboard-grapetree .card-context-menu .card-form {
   padding: 0.2rem;
-  overflow: auto;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
-/* Hide scrollbar for Chrome, Safari and Opera */
-.dashboard-grapetree .card-legend .card-form::-webkit-scrollbar,
-.dashboard-grapetree .card-context-menu .card-form::-webkit-scrollbar {
-  display: none;
+  position: relative;
 }
 
 .dashboard-grapetree .card-legend.legend-loading .card-form {
@@ -1891,6 +1884,12 @@
   margin-top: 1.3rem;
 }
 
+.dashboard-grapetree .modal-contents p:first-child,
+.dashboard-grapetree .modal-contents ul:first-child,
+.dashboard-grapetree .modal-contents ol:first-child {
+  margin-top: 0;
+}
+
 .dashboard-grapetree .modal-contents button {
   margin-top: 1.3rem;
 }
@@ -1904,13 +1903,7 @@
 .dashboard-grapetree .modal-contents .modal-body {
   margin-top: 1.3rem;
   max-height: calc(90vh - 14rem); /* 14rem is the sum of h3 size, modal-contents paddings and margins and modal-body margins */
-  overflow: auto;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
-/* Hide scrollbar for Chrome, Safari and Opera */
-.dashboard-grapetree .modal-contents .modal-body::-webkit-scrollbar {
-  display: none;
+  position: relative;
 }
 
 .dashboard-grapetree .modal-contents .modal-feedback.show {
@@ -2044,16 +2037,11 @@
   z-index: 9998;
   width: 32rem;
   border-radius: 2.4rem;
-  padding: 2.1rem 2.1rem;
-  padding-top: 3.4rem;
-  padding-bottom: 3.4rem;
+  padding: 2.1rem 1.3rem;
   background-color: var(--white);
   top: 1rem;
   right: 1rem;
   max-height: calc(100vh - 9.8rem);
-  overflow-y: auto;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
   opacity: 0;
   -webkit-transform: translateX(calc(100% + 1rem));
   transform: translateX(calc(100% + 1rem));
diff --git a/index.html b/index.html
index b9f52e8..a7c42da 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,8 @@
   <!-- LeafletJS CSS -->
   <link rel="stylesheet" href="css/leaflet.css" />
   <link rel="stylesheet" href="css/leaflet-custom.css" />
+  <!-- scrolly -->
+  <link rel="stylesheet" href="js/scrolly/scrolly.css" />
   <!-- Spectrum -->
   <link rel="stylesheet" href="css/spectrum.min.css" type="text/css"/>
 </head>
@@ -49,7 +51,7 @@
           </div>
         </div><!-- language trigger -->
         <div class="tool">
-          <div class="tool-trigger tool-trigger-footer" onclick="gtiz_layout.showFooter()">
+          <div class="tool-trigger tool-trigger-footer" onclick="gtiz_footer.showFooter()">
             <i class="iconic iconic-information toogle-trigger-img toogle-trigger-img-help"></i>
             <i class="iconic iconic-close-circle toogle-trigger-img toogle-trigger-img-close hidden"></i>
           </div>
@@ -278,27 +280,31 @@ <h3 class="card-title" data-i18n-key="legend">Legend</h3>
   <section class="search-engine">
     <div class="search-engine-close"><i class="iconic iconic-close-circle"></i></div>
     <div class="search-engine-contents">
-      <div class="search-engine-header">
-        <div class="search-box">
-          <div class="form-label">Search a function</div>
-          <input id="search-functions" type="search" placeholder="Keyword..." autocomplete="off">
+      <div class="search-engine-form">
+        <div class="search-engine-header">
+          <div class="search-box">
+            <div class="form-label">Search a function</div>
+            <input id="search-functions" type="search" placeholder="Keyword..." autocomplete="off">
+          </div>
         </div>
+        <div class="search-engine-body"></div>
       </div>
-      <div class="search-engine-body"></div>
     </div>
   </section>
 
   <footer>
     <div class="footer-contents">
-      <div class="footer-close" onclick="gtiz_layout.showFooter()"><i class="iconic iconic-close-circle"></i></div>
-      <div class="footer-content">
-        <!-- here custom contents for footer, you can define them in themes/theme-name/html/footer.html -->
-      </div>
-      <div class="footer-info">
-        <div class="info">
-          <p><span data-i18n-key="cookies_notice">Questa applicazione non utilizza cookies.</span></p>
-          <p><span data-i18n-key="last_updated_on">Last updated on</span> <span class="last-update-date">2024-07-04</span></p>
-          <p class="copyright">&copy; <span class="copyright-year"></span> IZSAM 'G. Caporale'</p>
+      <div class="footer-close" onclick="gtiz_footer.showFooter()"><i class="iconic iconic-close-circle"></i></div>
+      <div class="footer-contents-wrapper">
+        <div class="footer-content">
+          <!-- here custom contents for footer, you can define them in themes/theme-name/html/footer.html -->
+        </div>
+        <div class="footer-info">
+          <div class="info">
+            <p><span data-i18n-key="cookies_notice">Questa applicazione non utilizza cookies.</span></p>
+            <p><span data-i18n-key="last_updated_on">Last updated on</span> <span class="last-update-date">__LAST_UPDATE__</span></p>
+            <p class="copyright">&copy; <span class="copyright-year"></span> IZSAM 'G. Caporale'</p>
+          </div>
         </div>
       </div>
     </div>
@@ -311,6 +317,7 @@ <h3 class="card-title" data-i18n-key="legend">Legend</h3>
   <script src="js/ag-grid/ag-grid-community.min.noStyle.js"></script>
   <script src="js/spectrum/spectrum.min.js"></script>
   <script src="js/leaflet/leaflet.js"></script>
+  <script src="js/scrolly/scrolly.js"></script>
   <!-- tree enterobase -->
   <script charset="utf-8" src="js/tree/base_tree.js"></script>
   <script charset="utf-8" src="js/tree/d3_m_tree.js"></script>
@@ -318,12 +325,12 @@ <h3 class="card-title" data-i18n-key="legend">Legend</h3>
   <script src="js/metadata/zooms-finder.js"></script>
   <!-- custom -->
   <script src="js/optimizer.js"></script>
+  <script src="js/utils.js"></script>
   <script src="js/modal.js"></script>
   <script src="js/slider.js"></script>
   <script src="js/loader.js"></script>
   <script src="js/languages.js"></script>
   <script src="js/locales.js"></script>
-  <script src="js/utils.js"></script>
   <script src="js/file-handler.js"></script>
   <script src="js/tree.js"></script>
   <script src="js/tree-extended.js"></script>
@@ -338,6 +345,7 @@ <h3 class="card-title" data-i18n-key="legend">Legend</h3>
   <script src="js/drag.js"></script>
   <script src="js/zooms.js"></script>
   <script src="js/search.js"></script>
+  <script src="js/footer.js"></script>
   <script src="js/app.js"></script>
 </body>
 </html>
diff --git a/js/context.js b/js/context.js
index 00d9d43..de92171 100644
--- a/js/context.js
+++ b/js/context.js
@@ -12,6 +12,21 @@ gtiz_context.legendToggleSelectionMode = function (value) {
   gtiz_legend.toggleSelectionMode(value);
 }
 
+gtiz_context.css_vars = gtiz_utils.getAllCssVariables();
+gtiz_context.scrolly_options = {
+  position: 'absolute',
+  opacity: 0.8,
+  containerColor: gtiz_context.css_vars['--secondary-light'],
+  barColor: gtiz_context.css_vars['--secondary-dark'],
+  radius: 1,
+  scaleY : 0.8,
+  side : 'left',
+  offset : -1.3,
+  width : 0.3,
+  unit : 'rem',
+};
+gtiz_context.scrolly = new Scrolly(gtiz_context.scrolly_options);
+
 /**
  * Build the context menu contents based on the user request
  * 
@@ -21,6 +36,9 @@ gtiz_context.legendToggleSelectionMode = function (value) {
 gtiz_context.getMenu = function(type) {
   let form = document.createElement('div');
   form.setAttribute('class', 'card-form');
+  let contents = document.createElement('div');
+  contents.setAttribute('class', 'card-form-contents');
+  form.append(contents);
   let cfg;
   switch (type) {
     case 'legend':
@@ -114,7 +132,7 @@ gtiz_context.getMenu = function(type) {
         }
       });
       container.append(box);
-      form.append(container);
+      contents.append(container);
     }
     if (item.type == 'abutton') {
       let box = document.createElement('div'); 
@@ -134,7 +152,7 @@ gtiz_context.getMenu = function(type) {
         item.function();
       });
       box.append(a);
-      form.append(box);
+      contents.append(box);
     }
     if (item.type == 'abutton_optioned') {
       let box = document.createElement('div'); 
@@ -187,7 +205,7 @@ gtiz_context.getMenu = function(type) {
       }
       box.append(select);
 
-      form.append(box);
+      contents.append(box);
     }
     if (item.type == 'select') {
       let box = document.createElement('div'); 
@@ -248,7 +266,7 @@ gtiz_context.getMenu = function(type) {
         item.function(select.value);
       });
       box.append(select);
-      form.append(box);
+      contents.append(box);
     }
     if (item.type == 'number') {
       let box = document.createElement('div');
@@ -294,11 +312,11 @@ gtiz_context.getMenu = function(type) {
         });
       });
       box.append(input);
-      form.append(box);
+      contents.append(box);
     }
     if (item.type == 'separator') {
       let hr = document.createElement('hr');
-      form.append(hr);
+      contents.append(hr);
     }
   });
 
@@ -400,168 +418,172 @@ gtiz_context.buildMenuUi = function(type, relation) {
  * 
  */
 gtiz_context.showMenu = function(type, component, trigger) {
-  // let gtiz_context_node = document.querySelector('.context-menu');
-  // if (!gtiz_context_node) {
-    let card = trigger.closest('.card-component');
-    let parent = card.parentNode;
-    let parent_cls = parent.getAttribute('class');
-    gtiz_context.closeContextMenu(type, card);
+  let card = trigger.closest('.card-component');
+  let parent = card.parentNode;
+  let parent_cls = parent.getAttribute('class');
+  gtiz_context.closeContextMenu(type, card);
 
-    let cls_controller = gtiz_context.body.getAttribute('class');
-    let card_style = getComputedStyle(card);
-    let margin = parseInt(card_style.marginRight.replace(/\D/g, ""));
-    let width = card.offsetWidth;
-    let rect = card.getBoundingClientRect();
-    let x = rect.left;
-    let y = rect.top;
-    let left = x;
-    let top = y;
-    let translate_value = -(width + margin)/10 + 'rem';
-    if (type == 'tree' || type == 'zooms') {
-      if (!parent_cls.includes('expanded')) {
-        if (!cls_controller.includes('-l')) {
-          width = 320;
-          translate_value = 0;
-          if (gtiz_context.body.classList.contains('dashboard-grapetree-m') || gtiz_context.body.classList.contains('dashboard-grapetree-mt') || gtiz_context.body.classList.contains('dashboard-grapetree-m-mt')) {
-            left = x + card.offsetWidth + margin;
-          } else {
-            left = x + card.offsetWidth + margin - width;
-          }
-        } else {
-          let legend_width = document.querySelector('.card-legend').offsetWidth;
-          width = legend_width;
-          translate_value = 0;
+  let cls_controller = gtiz_context.body.getAttribute('class');
+  let card_style = getComputedStyle(card);
+  let margin = parseInt(card_style.marginRight.replace(/\D/g, ""));
+  let width = card.offsetWidth;
+  let rect = card.getBoundingClientRect();
+  let x = rect.left;
+  let y = rect.top;
+  let left = x;
+  let top = y;
+  let translate_value = -(width + margin)/10 + 'rem';
+  if (type == 'tree' || type == 'zooms') {
+    if (!parent_cls.includes('expanded')) {
+      if (!cls_controller.includes('-l')) {
+        width = 320;
+        translate_value = 0;
+        if (gtiz_context.body.classList.contains('dashboard-grapetree-m') || gtiz_context.body.classList.contains('dashboard-grapetree-mt') || gtiz_context.body.classList.contains('dashboard-grapetree-m-mt')) {
           left = x + card.offsetWidth + margin;
+        } else {
+          left = x + card.offsetWidth + margin - width;
         }
       } else {
-        width = 320;
-        translate_value = width;
-        left = x + card.offsetWidth + margin - width;
+        let legend_width = document.querySelector('.card-legend').offsetWidth;
+        width = legend_width;
+        translate_value = 0;
+        left = x + card.offsetWidth + margin;
       }
+    } else {
+      width = 320;
+      translate_value = width;
+      left = x + card.offsetWidth + margin - width;
     }
-    if (type == 'metadata') {
-      if (!parent_cls.includes('expanded')) {
-        if (!cls_controller.includes('-l')) {
-          width = 320;
-          translate_value = 0;
-          left = x + card.offsetWidth + margin - width;
-        } else {
-          let legend_width = document.querySelector('.card-legend').offsetWidth;
-          width = legend_width;
-          translate_value = 0;
-          left = x + card.offsetWidth + margin;
-        }
-      } else {
+  }
+  if (type == 'metadata') {
+    if (!parent_cls.includes('expanded')) {
+      if (!cls_controller.includes('-l')) {
         width = 320;
-        translate_value = width;
+        translate_value = 0;
         left = x + card.offsetWidth + margin - width;
+      } else {
+        let legend_width = document.querySelector('.card-legend').offsetWidth;
+        width = legend_width;
+        translate_value = 0;
+        left = x + card.offsetWidth + margin;
       }
+    } else {
+      width = 320;
+      translate_value = width;
+      left = x + card.offsetWidth + margin - width;
     }
-    if (type == 'map') {
-      if (!parent_cls.includes('expanded')) {
-        if (!cls_controller.includes('-l')) {
-          width = 320;
-          translate_value = 0;
-          left = x + card.offsetWidth + margin - width;
-        } else {
-          let legend_width = document.querySelector('.card-legend').offsetWidth;
-          width = legend_width;
-          translate_value = 0;
-          left = x + card.offsetWidth + margin;
-        }
-      } else {
+  }
+  if (type == 'map') {
+    if (!parent_cls.includes('expanded')) {
+      if (!cls_controller.includes('-l')) {
         width = 320;
-        translate_value = width;
+        translate_value = 0;
         left = x + card.offsetWidth + margin - width;
+      } else {
+        let legend_width = document.querySelector('.card-legend').offsetWidth;
+        width = legend_width;
+        translate_value = 0;
+        left = x + card.offsetWidth + margin;
       }
+    } else {
+      width = 320;
+      translate_value = width;
+      left = x + card.offsetWidth + margin - width;
     }
+  }
 
-    let menu_node = document.createElement('div');
-    let cls = 'context-menu context-menu-' + type;
-    menu_node.setAttribute('class', cls);
-    menu_node.setAttribute('data-component', component);
-    menu_node.style.position = 'fixed';
-    menu_node.style.top = top/10 + 'rem';
-    menu_node.style.left = left/10 + 'rem';
-    menu_node.style.bottom = 0;
-    menu_node.style.zIndex = 9998;
-    menu_node.style.width = width/10 + 'rem';
-    menu_node.style.opacity = 0;
-    menu_node.addEventListener('click', (e) => {
-      if (e.target == menu_node) {
-        gtiz_context.closeContextMenu(type, card);
-      }
-    });
-    let menu_content = gtiz_context.buildMenuUi(type, card);
-    menu_node.append(menu_content);
-
-    // card style
-    card.style.transform = `translateX(${translate_value})`;
-    if (component == 'legend') {
-      card.style.zIndex = 9999;
+  let menu_node = document.createElement('div');
+  let cls = 'context-menu context-menu-' + type;
+  menu_node.setAttribute('class', cls);
+  menu_node.setAttribute('data-component', component);
+  menu_node.style.position = 'fixed';
+  menu_node.style.top = top/10 + 'rem';
+  menu_node.style.left = left/10 + 'rem';
+  menu_node.style.bottom = 0;
+  menu_node.style.zIndex = 9998;
+  menu_node.style.width = width/10 + 'rem';
+  menu_node.style.opacity = 0;
+  menu_node.addEventListener('click', (e) => {
+    if (e.target == menu_node) {
+      gtiz_context.closeContextMenu(type, card);
     }
-    if (component == 'tree') {
-      let tree_container = document.querySelector('.tree');
-      tree_container.style.zIndex = 9999;
-      if (parent_cls.includes('expanded')) {
-        parent.style.right = (margin/2 + width)/10 + 'rem';
-      } else {
-        if (!cls_controller.includes('-l') && !gtiz_context.body.classList.contains('dashboard-grapetree-m') && !gtiz_context.body.classList.contains('dashboard-grapetree-mt') && !gtiz_context.body.classList.contains('dashboard-grapetree-m-mt')) {
-          // card.style.width = (card.offsetWidth - width)/10 + 'rem';
-          tree_container.style.width = 'auto';
-          tree_container.style.right = (margin/2 + width)/10 + 'rem';
-        }
+  });
+  let menu_content = gtiz_context.buildMenuUi(type, card);
+  menu_node.append(menu_content);
+
+  // card style
+  card.style.transform = `translateX(${translate_value})`;
+  if (component == 'legend') {
+    card.style.zIndex = 9999;
+  }
+  if (component == 'tree') {
+    let tree_container = document.querySelector('.tree');
+    tree_container.style.zIndex = 9999;
+    if (parent_cls.includes('expanded')) {
+      parent.style.right = (margin/2 + width)/10 + 'rem';
+    } else {
+      if (!cls_controller.includes('-l') && !gtiz_context.body.classList.contains('dashboard-grapetree-m') && !gtiz_context.body.classList.contains('dashboard-grapetree-mt') && !gtiz_context.body.classList.contains('dashboard-grapetree-m-mt')) {
+        tree_container.style.width = 'auto';
+        tree_container.style.right = (margin/2 + width)/10 + 'rem';
       }
     }
-    if (component == 'metadata') {
-      let metadata_container = document.querySelector('.metadata');
-      parent.style.zIndex = 9999;
-      if (parent_cls.includes('expanded')) {
-        parent.style.right = (margin/2 + width)/10 + 'rem';
-      } else {
-        if (!cls_controller.includes('-l')) {
-          // card.style.width = (card.offsetWidth - width)/10 + 'rem';
-          metadata_container.style.transform = 'translateX(-' + (width/10) + 'rem)';
-        }
+  }
+  if (component == 'metadata') {
+    let metadata_container = document.querySelector('.metadata');
+    parent.style.zIndex = 9999;
+    if (parent_cls.includes('expanded')) {
+      parent.style.right = (margin/2 + width)/10 + 'rem';
+    } else {
+      if (!cls_controller.includes('-l')) {
+        metadata_container.style.transform = 'translateX(-' + (width/10) + 'rem)';
       }
     }
-    if (component == 'map') {
-      let map_container = document.querySelector('.map');
-      map_container.style.zIndex = 9999;
-      if (parent_cls.includes('expanded')) {
-        parent.style.right = (margin/2 + width)/10 + 'rem';
-      } else {
-        if (!cls_controller.includes('-l')) {
-          // card.style.width = (card.offsetWidth - width)/10 + 'rem';
-          map_container.style.transform = 'translateX(-' + (width/10) + 'rem)';
-        }
+  }
+  if (component == 'map') {
+    let map_container = document.querySelector('.map');
+    map_container.style.zIndex = 9999;
+    if (parent_cls.includes('expanded')) {
+      parent.style.right = (margin/2 + width)/10 + 'rem';
+    } else {
+      if (!cls_controller.includes('-l')) {
+        map_container.style.transform = 'translateX(-' + (width/10) + 'rem)';
       }
     }
+  }
 
-    let specific_cls = 'show-context-menu-' + type;
-    gtiz_context.body.classList.add('show-context-menu');
-    gtiz_context.body.classList.add(specific_cls);
-    gtiz_context.body.append(menu_node);
+  let specific_cls = 'show-context-menu-' + type;
+  gtiz_context.body.classList.add('show-context-menu');
+  gtiz_context.body.classList.add(specific_cls);
+  gtiz_context.body.append(menu_node);
+
+  let menu_form = menu_content.querySelector('.card-form');
+  let menu_form_contents = menu_content.querySelector('.card-form-contents');
+  let menu_form_top = menu_form.offsetTop;
 
-    let menu_node_h = menu_node.offsetHeight;
-    let menu_content_h = menu_content.offsetHeight;
-    let menu_form = menu_content.querySelector('.card-form');
-    let menu_form_top = menu_form.offsetTop;
-    if (menu_content_h > menu_node_h) {
-      // menu_content.classList.add('card-overflow');
-      let height = menu_node_h - 
+  if (component == 'legend') {
+    let height = menu_node.offsetHeight - parseInt(getComputedStyle(menu_content).paddingTop) -
+    parseInt(getComputedStyle(menu_content).paddingBottom);
+    menu_content.style.maxHeight = height/10 + 'rem';
+    menu_form.style.maxHeight = (height - menu_form_top)/10 + 'rem';
+  } else {
+    let component_card = document.querySelector('.card-' + component);
+    let component_height = component_card.offsetHeight;
+    let component_margin_top = parseInt(getComputedStyle(component_card).marginTop.replace(/\D/g, ""));
+    let component_margin_bottom = parseInt(getComputedStyle(component_card).marginBottom.replace(/\D/g, ""));
+    let component_full_height = component_height + component_margin_top + component_margin_bottom;
+    
+
+    let height = component_full_height - 
       parseInt(getComputedStyle(menu_content).paddingTop) -
-      parseInt(getComputedStyle(menu_content).paddingBottom) -
-      parseInt(getComputedStyle(menu_content).marginTop) -
-      parseInt(getComputedStyle(menu_content).marginBottom);
-      menu_content.style.height = height/10 + 'rem';
-      menu_form.style.height = (menu_content.offsetHeight - menu_form_top)/10 + 'rem';
-    }
+      parseInt(getComputedStyle(menu_content).paddingBottom);
+    menu_content.style.maxHeight = height/10 + 'rem';
+    menu_form.style.maxHeight = (height - menu_form_top)/10 + 'rem';
+  }
 
-    setTimeout(() => {
-      menu_node.style.opacity = 1;
-    }, 0);
-  // }
+  setTimeout(() => {
+    menu_node.style.opacity = 1;
+    gtiz_context.scrolly.initNode(menu_form_contents);
+  }, 0);
 }
 
 /**
@@ -578,11 +600,10 @@ gtiz_context.updateContextPosition = function(menu, type) {
   let parent_cls = parent.getAttribute('class');
   let card_context = menu.querySelector('.card-context-menu');
   let card_form = card_context.querySelector('.card-form');
+  let card_form_contents = card_context.querySelector('.card-form-contents');
   let card_form_top = card_form.offsetTop;
   let component_style = getComputedStyle(component);
-  let menu_h = menu.offsetHeight;
-  let menu_w = menu.offsetWidth;
-  let card_context_h = card_context.offsetHeight;
+  let menu_w = parseInt(menu.style.width.replace(/\D/g, ""));
   let margin_r = parseInt(component_style.marginRight.replace(/\D/g, ""));
   let width = component.offsetWidth;
   let rect = component.getBoundingClientRect();
@@ -590,6 +611,7 @@ gtiz_context.updateContextPosition = function(menu, type) {
   let y = rect.top;
   let left = x;
   let top = y;
+
   // update position
   menu.style.left = (left + width + margin_r)/10 + 'rem';
   menu.style.top  = (top)/10 + 'rem';
@@ -597,24 +619,33 @@ gtiz_context.updateContextPosition = function(menu, type) {
     let translate = -(width + margin_r)/10 + 'rem';
     component.style.transform = `translateX(${translate})`;
   }
+  // update width
   if (!parent_cls.includes('expanded') && body_cls.includes('-l')) {
-    let legend_width = document.querySelector('.main > .legend').offsetWidth;
+    let legend = document.querySelector('.legend-container');
+    // get legend margin left and right
+    let legend_width = legend.offsetWidth;
     menu_w = legend_width;
   }
   menu.style.width = menu_w/10 + 'rem';
 
-  if (card_context_h > menu_h) {
-    let height = menu_h - 
-      parseInt(getComputedStyle(card_context).paddingTop) -
-      parseInt(getComputedStyle(card_context).paddingBottom) -
-      parseInt(getComputedStyle(card_context).marginTop) -
-      parseInt(getComputedStyle(card_context).marginBottom);
-      card_context.style.height = height/10 + 'rem';
-      card_form.style.height = (card_context.offsetHeight - card_form_top)/10 + 'rem';
+  // update height
+  if (type == 'legend') {
+    let height = menu.offsetHeight - parseInt(getComputedStyle(card_context).paddingTop) - parseInt(getComputedStyle(card_context).paddingBottom);
+    card_context.style.maxHeight = height/10 + 'rem';
+    card_form.style.maxHeight = (height - card_form_top)/10 + 'rem';
   } else {
-    card_context.removeAttribute('style');
-    card_form.removeAttribute('style');
+    let component_height = component.offsetHeight;
+    let component_margin_top = parseInt(getComputedStyle(component).marginTop.replace(/\D/g, ""));
+    let component_margin_bottom = parseInt(getComputedStyle(component).marginBottom.replace(/\D/g, ""));
+    let component_full_height = component_height + component_margin_top + component_margin_bottom;
+
+    let height = component_full_height - parseInt(getComputedStyle(card_context).paddingTop) - parseInt(getComputedStyle(card_context).paddingBottom);
+    card_context.style.maxHeight = height/10 + 'rem';
+    card_form.style.maxHeight = (height - card_form_top)/10 + 'rem';
   }
+
+  // update scrolly
+  gtiz_context.scrolly.updateNode(card_form_contents);
 }
 
 gtiz_context.triggers.forEach(function(trigger) {
@@ -679,7 +710,7 @@ window.addEventListener("resize", function() {
     if (type) {
       setTimeout(() => {
         gtiz_context.updateContextPosition(menu, type);   
-      }, 100);
+      }, 800);
     }
   }
 });
\ No newline at end of file
diff --git a/js/footer.js b/js/footer.js
new file mode 100644
index 0000000..5ab4ece
--- /dev/null
+++ b/js/footer.js
@@ -0,0 +1,39 @@
+let gtiz_footer = {};
+
+gtiz_footer.css_vars = gtiz_utils.getAllCssVariables();
+gtiz_footer.scrolly_options = {
+  position: 'absolute',
+  containerColor: gtiz_footer.css_vars['--light'],
+  barColor: gtiz_footer.css_vars['--secondary-ultra-light'],
+  radius: 1,
+  scaleY : 0.8,
+  offset: 1,
+  side : 'left',
+  width : 0.3,
+  unit : 'rem',
+};
+gtiz_footer.scrolly = new Scrolly(gtiz_footer.scrolly_options);
+
+/**
+ * Manage footer view.
+ * 
+ */
+gtiz_footer.showFooter = function() {
+  let footer = document.querySelector('footer');
+  let footer_wrapper = footer.querySelector('.footer-contents-wrapper');
+  let trigger_help = document.querySelector('.toogle-trigger-img-help');
+  let trigger_close = document.querySelector('.toogle-trigger-img-close');
+  footer.classList.toggle('show');
+  gtiz_footer.scrolly.initNode(footer_wrapper);
+  trigger_help.classList.toggle('hidden');
+  trigger_close.classList.toggle('hidden');
+}
+
+window.addEventListener("resize", function() {
+  setTimeout(() => {
+    let node = document.querySelector('.footer-contents-wrapper');
+    if (node) {
+      gtiz_footer.scrolly.updateNode(node);
+    }
+  }, 300);
+});
\ No newline at end of file
diff --git a/js/help.js b/js/help.js
index b81c1a0..dbe18c6 100644
--- a/js/help.js
+++ b/js/help.js
@@ -85,10 +85,10 @@ gtiz_help.getHelp = function(type) {
   let help = gtiz_help.settings.find(setting => setting.card == type);
   if (help) {
     let title = help.title();
-    let contents = [];
-    let content = document.createElement('div');
-    content.innerHTML = help.contents();
-    contents.push(content);
+    let html_string = help.contents();
+    let parser = new DOMParser();
+    let html = parser.parseFromString(html_string, 'text/html');
+    let contents = Array.from(html.body.childNodes);
     let feedback = help.feedback();
     let f_type = 'info';
     gtiz_modal.buildModal(title, contents, feedback, f_type);
diff --git a/js/layout.js b/js/layout.js
index 207a143..b590206 100644
--- a/js/layout.js
+++ b/js/layout.js
@@ -149,6 +149,21 @@ gtiz_layout.legend_node = document.querySelector('.legend');
 gtiz_layout.view_triggers = document.querySelectorAll('[data-view-trigger]');
 gtiz_layout.expand_triggers = document.querySelectorAll('.card-context-expand-trigger');
 
+gtiz_layout.css_vars = gtiz_utils.getAllCssVariables();
+gtiz_layout.scrolly_options = {
+  position: 'absolute',
+  opacity: 0.8,
+  containerColor: gtiz_layout.css_vars['--secondary-light'],
+  barColor: gtiz_layout.css_vars['--secondary-dark'],
+  radius: 1,
+  scaleY : 0.9,
+  side : 'left',
+  offset : -1.3,
+  width : 0.3,
+  unit : 'rem',
+};
+gtiz_layout.scrolly = new Scrolly(gtiz_layout.scrolly_options);
+
 gtiz_layout.getStyleTime = function(node) {
   let styles = window.getComputedStyle(node);
   let duration = styles.getPropertyValue("transition-duration");
@@ -195,19 +210,6 @@ gtiz_layout.expandComponent = function(component, trigger) {
 
 }
 
-/**
- * Manage footer view.
- * 
- */
-gtiz_layout.showFooter = function() {
-  let footer = document.querySelector('footer');
-  let trigger_help = document.querySelector('.toogle-trigger-img-help');
-  let trigger_close = document.querySelector('.toogle-trigger-img-close');
-  footer.classList.toggle('show');
-  trigger_help.classList.toggle('hidden');
-  trigger_close.classList.toggle('hidden');
-}
-
 /**
  * Manage loading Ui for tree component
  * 
@@ -245,15 +247,19 @@ gtiz_layout.uiLoadingManager = function(components, action) {
  */
 gtiz_layout.setLegendHeight = function(time) {
   let delay = time ? time : 0;
-  setTimeout(() => {
-    let legend_card = document.querySelector('.card-legend');
-    let legend_form = legend_card.querySelector('.card-form');
-    // reset height
-    legend_form.removeAttribute('style');
-    legend_card.style.height = 'auto';
-    let legend_card_h = legend_card.offsetHeight;
+  let legend_card = document.querySelector('.card-legend');
+  let legend_form = legend_card.querySelector('.card-form');
+  let legend_list = legend_form.querySelector('.list-box');
+
+  // reset height
+  legend_form.removeAttribute('style');
+  legend_card.style.height = 'auto';
+  gtiz_layout.scrolly.destroy(legend_list);
+
+  function calculateHeight() {
+    let legend_card_h = parseInt(legend_card.clientHeight);
     let legend_node = legend_card.parentNode;
-    let legend_node_h = legend_node.offsetHeight;
+    let legend_node_h = parseInt(legend_node.clientHeight);
     let legend_player_h = 0;
     let legend_form_top = legend_form.offsetTop;
     if (gtiz_layout.body.classList.contains('video-mode')) {
@@ -272,12 +278,21 @@ gtiz_layout.setLegendHeight = function(time) {
       parseInt(getComputedStyle(legend_card).marginBottom) -
       legend_player_h;
       legend_card.style.height = height/10 + 'rem';
-      legend_form.style.height = (legend_card.offsetHeight - legend_form_top)/10 + 'rem';
+      legend_form.style.height = (legend_card.offsetHeight - legend_form_top - parseInt(getComputedStyle(legend_card).paddingBottom))/10 + 'rem';
     } else {
       legend_card.style.height = 'auto';
       legend_form.removeAttribute('style');
     }
-  }, delay);
+    gtiz_layout.scrolly.initNode(legend_list);
+  }
+
+  if (delay > 0) {
+    setTimeout(() => {
+      calculateHeight();
+    }, delay);
+  } else {
+    calculateHeight();
+  }
 }
 
 /**
@@ -587,7 +602,9 @@ window.addEventListener("resize", function() {
   gtiz_layout.resizeTree(tree_time);
   let legend_cfg = gtiz_layout.cfg.find(element => element.type === 'legend');
   if (legend_cfg.visible) {
-    let legend_time = gtiz_layout.getStyleTime(gtiz_layout.legend_node);
-    gtiz_layout.setLegendHeight(legend_time);
+    setTimeout(() => {
+      let legend_time = gtiz_layout.getStyleTime(gtiz_layout.legend_node);
+      gtiz_layout.setLegendHeight(legend_time);  
+    }, 800);
   }
 });
\ No newline at end of file
diff --git a/js/legend.js b/js/legend.js
index 1ca10c9..9d92ae7 100644
--- a/js/legend.js
+++ b/js/legend.js
@@ -355,7 +355,6 @@ gtiz_legend.changeCategoryColor = function(value) {
   } else {
     gtiz_legend.resetQualitativeSelection();
   }
-  // gtiz_layout.setLegendHeight(300);
 }
 
 /**
@@ -423,7 +422,6 @@ gtiz_legend.changeMaxGroupNumber = function(value, cat, change) {
     if(change) {
       tree.changeCategory(category);
     }
-    // gtiz_layout.setLegendHeight(300);
 	}
 }
 
@@ -459,7 +457,6 @@ gtiz_legend.changeMinGroupSize = function(value, cat, change) {
 		if(change) {
       tree.changeCategory(category);
     }
-    // gtiz_layout.setLegendHeight(300);
 	}
 }
 
diff --git a/js/modal.js b/js/modal.js
index 305a88d..8419c73 100644
--- a/js/modal.js
+++ b/js/modal.js
@@ -3,6 +3,21 @@ let gtiz_modal = {};
 gtiz_modal.body = document.querySelector('body');
 gtiz_modal.close_modal_trigger = document.querySelector('.modal-close');
 
+gtiz_modal.css_vars = gtiz_utils.getAllCssVariables();
+gtiz_modal.scrolly_options = {
+  position: 'absolute',
+  opacity: 0.8,
+  containerColor: gtiz_modal.css_vars['--secondary-light'],
+  barColor: gtiz_modal.css_vars['--secondary-dark'],
+  radius: 1,
+  scaleY : 0.8,
+  side : 'left',
+  offset : -1,
+  width : 0.3,
+  unit : 'rem',
+};
+gtiz_modal.scrolly = new Scrolly(gtiz_modal.scrolly_options);
+
 /**
  * Close all notifiers and clean contents
  * 
@@ -189,9 +204,13 @@ gtiz_modal.buildModal = function(title, contents, feedback, f_type) {
   }
   if (contents.length > 0) {
     let m_body = modal.querySelector('.modal-body');
+    let m_contents = document.createElement('div');
+    m_contents.setAttribute('class', 'modal-body-contents');
     contents.forEach(content => {
-      m_body.append(content);
+      m_contents.append(content);
     });
+    m_body.append(m_contents);
+    gtiz_modal.scrolly.initNode(m_contents);
   }
   if (feedback) {
     let m_feedback = modal.querySelector('.modal-feedback');
@@ -224,4 +243,13 @@ gtiz_modal.closeModal = function () {
 
 gtiz_modal.close_modal_trigger.addEventListener('click', function(e) {
   gtiz_modal.closeModal();
+});
+
+window.addEventListener("resize", function() {
+  setTimeout(() => {
+    let node = document.querySelector('.modal-body-contents');
+    if (node) {
+      gtiz_modal.scrolly.updateNode(node);
+    }
+  }, 300);
 });
\ No newline at end of file
diff --git a/js/scrolly/scrolly.css b/js/scrolly/scrolly.css
new file mode 100644
index 0000000..91b146f
--- /dev/null
+++ b/js/scrolly/scrolly.css
@@ -0,0 +1,24 @@
+.scrolly {
+  overflow-y: auto !important;
+  -ms-overflow-style: none !important;  /* IE and Edge */
+  scrollbar-width: none !important;  /* Firefox */
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.scrolly::-webkit-scrollbar {
+  display: none !important;
+}
+
+.scrolly-container {
+  transform-origin: 50% 50%;
+  transition: opacity 0.3s ease;
+  opacity: 0;
+}
+
+*:hover > .scrolly-container {
+  opacity: 1;
+}
+
+.scrolly .scrolly-bar {
+  transition: all 0.1s linear;
+}
\ No newline at end of file
diff --git a/js/scrolly/scrolly.js b/js/scrolly/scrolly.js
new file mode 100644
index 0000000..21ef57e
--- /dev/null
+++ b/js/scrolly/scrolly.js
@@ -0,0 +1,191 @@
+/*! *****************************************************************************
+
+ Scrolly 1.0, a JS library for creating custom scrollbars
+ 
+ (c) Alessandro De Luca @ Istituto Zooprofilattico Sperimentale dell'Abruzzo e del Molise "G. Caporale"
+ 
+ This program is free software. You can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ 
+ This program 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 General Public License for more details.
+
+ ***************************************************************************** */
+
+(function (global) {
+  const Scrolly = function (options, callback, errorCallback) {
+    const Scrolly = {};
+
+    const destroy = function (node) {
+      node.classList.remove('scrolly');
+      node.setAttribute(Scrolly.options.selector, 'false');
+      node.style.maxHeight = '';
+      let parent = node.parentElement;
+      let container = parent.querySelector('.scrolly-container');
+      if (container) {
+        parent.removeChild(container);
+      }
+    };
+
+    const createScrolly = function (node) {
+      let selector = node.getAttribute(Scrolly.options.selector);
+      if (!selector) {
+        node.setAttribute(Scrolly.options.selector, 'true');
+      }
+      let parent = node.parentElement;
+      let nodeHeight = parseInt(node.clientHeight);
+      let parentHeight = parseInt(parent.clientHeight);
+
+      if (nodeHeight <= parentHeight) {
+        return;
+      }
+
+      if (node.classList.contains('scrolly')) {
+        return;
+      }
+
+      let parentZIndex = window.getComputedStyle(parent).getPropertyValue('z-index');
+      let parentPaddingTop = parseInt(window.getComputedStyle(parent).getPropertyValue('padding-top'));
+      let parentPaddingBottom = parseInt(window.getComputedStyle(parent).getPropertyValue('padding-bottom'));
+      let parentMarginTop = parseInt(window.getComputedStyle(parent).getPropertyValue('margin-top'));
+      let parentMarginBottom = parseInt(window.getComputedStyle(parent).getPropertyValue('margin-bottom'));
+
+      let parentPaddings = parentPaddingTop + parentPaddingBottom;
+      let parentMargins = parentMarginTop + parentMarginBottom;
+
+      node.classList.add('scrolly');
+      node.style.maxHeight = (parentHeight - parentPaddings + parentMargins) + 'px';
+
+      let container = document.createElement('div');
+      let containerHeight = (parentHeight - parentPaddings + parentMargins);
+      container.classList.add('scrolly-container');
+      container.style.backgroundColor = Scrolly.options.containerColor;
+      container.style.width = Scrolly.options.width + Scrolly.options.unit;
+      container.style.position = Scrolly.options.position;
+      container.style.zIndex = parentZIndex ? parseInt(parentZIndex) + 1 : '1001';
+      container.style.top = parentPaddingTop + 'px';
+      let side = Scrolly.options.side;
+      container.style[side] = Scrolly.options.offset + Scrolly.options.unit;
+      container.style.height = containerHeight + 'px';
+      container.style.transform = 'scaleY(' + Scrolly.options.scaleY + ')';
+      container.style.borderRadius = Scrolly.options.radius + Scrolly.options.unit;
+
+      let barHeight = parseInt((containerHeight * containerHeight) / nodeHeight) + 1; // +1 to cover the empty space at the bottom when we have non-integer values less than 0.5, rounded by parseInt()
+      let bar = document.createElement('div');
+      bar.classList.add('scrolly-bar');
+      bar.style.backgroundColor = Scrolly.options.barColor;
+      bar.style.width = '100%';
+      bar.style.position = 'absolute';
+      bar.style.top = 0;
+      bar.style.right = 0;
+      bar.style.height = barHeight + 'px';
+      bar.style.borderRadius = Scrolly.options.radius + Scrolly.options.unit;
+
+      container.appendChild(bar);
+      parent.appendChild(container);
+
+      node.addEventListener('scroll', function (event) {
+        // get scroll position
+        let scrollTop = parseInt(node.scrollTop);
+        let scrollBarTop = ((scrollTop * barHeight) / containerHeight);
+        bar.style.top = scrollBarTop + 'px';
+      });
+    }
+
+    const updateNode = function (node) {
+      node.style.maxHeight = '';
+      let parent = node.parentElement;
+      let nodeHeight = parseInt(node.clientHeight);
+      let parentHeight = parseInt(parent.clientHeight);
+      if (nodeHeight <= parentHeight) {
+        destroy(node);
+        return;
+      }
+
+      if (!node.classList.contains('scrolly')) {
+        createScrolly(node);
+      } else {
+        node.setAttribute(Scrolly.options.selector, 'true');
+        let parentPaddingTop = parseInt(window.getComputedStyle(parent).getPropertyValue('padding-top'));
+        let parentPaddingBottom = parseInt(window.getComputedStyle(parent).getPropertyValue('padding-bottom'));
+        let parentMarginTop = parseInt(window.getComputedStyle(parent).getPropertyValue('margin-top'));
+        let parentMarginBottom = parseInt(window.getComputedStyle(parent).getPropertyValue('margin-bottom'));
+
+        let parentPaddings = parentPaddingTop + parentPaddingBottom;
+        let parentMargins = parentMarginTop + parentMarginBottom;
+
+        node.style.maxHeight = (parentHeight - parentPaddings + parentMargins) + 'px';
+
+        let container = parent.querySelector('.scrolly-container');
+        let containerHeight = (parentHeight - parentPaddings + parentMargins);
+        container.style.top = parentPaddingTop + 'px';
+        container.style.height = containerHeight + 'px';
+
+        let barHeight = parseInt((containerHeight * containerHeight) / nodeHeight) + 1 // +1 to cover the empty space at the bottom when we have non-integer values less than 0.5, rounded by parseInt()
+        let bar = container.querySelector('.scrolly-bar');
+        bar.style.height = barHeight + 'px';
+
+        // update the scroll event listener
+        node.removeEventListener('scroll', function (event) {
+          let scrollTop = parseInt(node.scrollTop);
+          let scrollBarTop = ((scrollTop * barHeight) / containerHeight);
+          bar.style.top = scrollBarTop + 'px';
+        });
+        node.addEventListener('scroll', function (event) {
+          let scrollTop = parseInt(node.scrollTop);
+          let scrollBarTop = ((scrollTop * barHeight) / containerHeight);
+          bar.style.top = scrollBarTop + 'px';
+        });
+      }
+    };
+
+    const updateNodes = function () {
+      let selector = '[' + Scrolly.options.selector + ']';
+      let nodes = document.querySelectorAll(selector);
+      if (nodes.length) {
+        for (let node of nodes) {
+          updateNode(node);
+        }
+      }
+    };
+
+    const initNodes = function () {
+      let selector = '[' + Scrolly.options.selector + ']';
+      let nodes = document.querySelectorAll(selector);
+      if (nodes.length) {
+        for (let node of nodes) {
+          createScrolly(node);
+        }
+      }
+    };
+
+    const initNode = function (node) {
+      createScrolly(node);
+    };
+
+    Scrolly.options = {
+      ...{
+        selector: 'data-scrolly',
+        position: 'fixed',
+        opacity: 1,
+        radius: 0,
+        offset: 0,
+        scaleY: 1,
+        containerColor: '#f1f1f1',
+        barColor: 'blue',
+        width: '0.5',
+        side: 'right', // 'left' or 'right
+        unit: 'rem' // px or rem
+      },
+      ...options
+    };
+
+    Scrolly.initNodes = initNodes;
+    Scrolly.initNode = initNode;
+    Scrolly.destroy = destroy;
+    Scrolly.updateNode = updateNode;
+    Scrolly.updateNodes = updateNodes;
+
+    return Scrolly;
+  };
+
+  global.Scrolly = Scrolly;
+})(this);
\ No newline at end of file
diff --git a/js/search.js b/js/search.js
index 9fc4168..8c9da2a 100644
--- a/js/search.js
+++ b/js/search.js
@@ -48,10 +48,24 @@ gtiz_search.metadata.forEach(item => {
 
 gtiz_search.obj = [...gtiz_search.tree, ...gtiz_search.rendering, ...gtiz_search.node_style, ...gtiz_search.node_size, ...gtiz_search.branch_style, ...gtiz_search.branch_cutoffs, ...gtiz_search.legend, ...gtiz_search.map, ...gtiz_search.metadata];
 
+gtiz_search.css_vars = gtiz_utils.getAllCssVariables();
+gtiz_search.scrolly_options = {
+  opacity: 0.8,
+  containerColor: gtiz_search.css_vars['--secondary-light'],
+  barColor: gtiz_search.css_vars['--secondary-dark'],
+  radius: 1,
+  scaleY : 0.95,
+  side : 'left',
+  width : 0.3,
+  unit : 'rem',
+};
+gtiz_search.scrolly = new Scrolly(gtiz_search.scrolly_options);
+
 gtiz_search.engine_node = document.querySelector('.search-engine');
 gtiz_search.trigger = document.querySelector('.tool-search');
 gtiz_search.input = document.getElementById('search-functions');
 gtiz_search.engine_close = document.querySelector('.search-engine-close');
+gtiz_search.engine_contents_node = document.querySelector('.search-engine-contents');
 
 /**
  * Function node to highlight after search
@@ -304,6 +318,8 @@ gtiz_search.buildUi = function(menu) {
     button_box.append(button);
   });
   container.append(results);
+  let scrolly_node = document.querySelector('.search-engine-form');
+  gtiz_search.scrolly.initNode(scrolly_node);
 };
 
 /**
@@ -322,9 +338,13 @@ gtiz_search.toggleSearchEngine = function() {
   } else {
     gtiz_search.input.value = '';
     let results = document.querySelector('.search-results');
+    let scrolly = document.querySelector('.search-engine-form.scrolly');
     if (results) {
       results.remove();
     }
+    if (scrolly) {
+      gtiz_search.scrolly.destroy(scrolly);
+    };
   }
 };
 
@@ -366,6 +386,8 @@ gtiz_search.input.addEventListener('input', function(e) {
     });
     let menu = gtiz_search.getMenu(is_label_present);
     gtiz_search.buildUi(menu);
+    let scrolly_node = document.querySelector('.search-engine-form');
+    gtiz_search.scrolly.updateNode(scrolly_node);
   } else {
     let menu = gtiz_search.getMenu(gtiz_search.obj);
     gtiz_search.buildUi(menu);
@@ -384,4 +406,13 @@ gtiz_search.engine_close.addEventListener('click', function() {
 
 gtiz_search.trigger.addEventListener('click', function() {
   gtiz_search.toggleSearchEngine();
+});
+
+window.addEventListener("resize", function() {
+  setTimeout(() => {
+    let node = document.querySelector('.search-engine-form');
+    if (node) {
+      gtiz_search.scrolly.updateNode(node);
+    }
+  }, 300);
 });
\ No newline at end of file
diff --git a/js/utils.js b/js/utils.js
index 950921f..80f8722 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -2,6 +2,7 @@ let gtiz_utils = {};
 
 gtiz_utils.postMessage = undefined;
 gtiz_utils.medatadata_select_nodes = ['#tree-metadata-select', '#tree-node-label-text', '#legend-menu-color-by', '#metadata-menu-color-by', '#metadata-map-select'];
+gtiz_utils.css_vars = {};
 
 /**
  * Uitility to check if an object exist and it is not empty
@@ -19,7 +20,6 @@ gtiz_utils.isObjectNotEmpty = function(obj) {
  * @param {String} input
  * @returns 
  */
-
 gtiz_utils.extractNumbersFromString = function(input) {
   // Use a regular expression to find all sequences of digits
   const matches = input.match(/\d+/g);
@@ -70,6 +70,39 @@ gtiz_utils.setCopyRightYear = function() {
   }
 }
 
+/**
+ * Get all css variables of the document as an object
+ */
+gtiz_utils.getAllCssVariables = function() {
+  if (gtiz_utils.isObjectNotEmpty(gtiz_utils.css_vars)) {
+    return gtiz_utils.css_vars;
+  }
+  // Iterate through all stylesheets
+  for (let stylesheet of document.styleSheets) {
+    try {
+      // Iterate through all rules within each stylesheet
+      for (let rule of stylesheet.cssRules) {
+        // Check if the rule is a CSSStyleRule and its selector is :root
+        if (rule instanceof CSSStyleRule && rule.selectorText === ':root') {
+          // Iterate through all CSS variables in the rule
+          for (let property of rule.style) {
+            if (property.startsWith('--')) {
+              // Get the value of the CSS variable
+              let value = rule.style.getPropertyValue(property).trim();
+              // Store the variable and its value
+              gtiz_utils.css_vars[property] = value;
+            }
+          }
+        }
+      }
+    } catch (e) {
+      // Catch and log any errors (e.g., CORS issues)
+      console.error("Error accessing stylesheet: ", e);
+    }
+  }
+  return gtiz_utils.css_vars;
+};
+
 window.addEventListener('message', (event) => {
   let url = new URL(window.location.href);
   let pathname = url.pathname.endsWith('/') ? url.pathname.slice(0, -1) : url.pathname;
diff --git a/themes/cohesive/css/footer.css b/themes/cohesive/css/footer.css
index eb59259..e181685 100644
--- a/themes/cohesive/css/footer.css
+++ b/themes/cohesive/css/footer.css
@@ -68,8 +68,8 @@ footer.show {
   background-color: var(--dark);
   bottom: 1rem;
   right: 1rem;
-  max-height: calc(84vh - 4.8rem);
-  overflow-y: auto;
+  max-height: calc(84vh - 8.4rem);
+  overflow: hidden;
   opacity: 0;
   -webkit-transform: translateY(calc(100% + 8.4rem));
   transform: translateY(calc(100% + 8.4rem));
diff --git a/themes/default/css/footer.css b/themes/default/css/footer.css
index 6d9a3f7..0f6addf 100644
--- a/themes/default/css/footer.css
+++ b/themes/default/css/footer.css
@@ -66,8 +66,8 @@ footer.show {
   background-color: var(--dark);
   bottom: 1rem;
   right: 1rem;
-  max-height: calc(84vh - 4.8rem);
-  overflow-y: auto;
+  max-height: calc(84vh - 8.4rem);
+  overflow: hidden;
   opacity: 0;
   -webkit-transform: translateY(calc(100% + 8.4rem));
   transform: translateY(calc(100% + 8.4rem));
diff --git a/themes/genpat/css/footer.css b/themes/genpat/css/footer.css
index 6d9a3f7..0f6addf 100644
--- a/themes/genpat/css/footer.css
+++ b/themes/genpat/css/footer.css
@@ -66,8 +66,8 @@ footer.show {
   background-color: var(--dark);
   bottom: 1rem;
   right: 1rem;
-  max-height: calc(84vh - 4.8rem);
-  overflow-y: auto;
+  max-height: calc(84vh - 8.4rem);
+  overflow: hidden;
   opacity: 0;
   -webkit-transform: translateY(calc(100% + 8.4rem));
   transform: translateY(calc(100% + 8.4rem));