diff --git a/webgis/index.html b/webgis/index.html
index 47309bb..cc08089 100644
--- a/webgis/index.html
+++ b/webgis/index.html
@@ -11,7 +11,8 @@
     {
         "imports": {
         "three": "./js/vendor/three/build/three.module.js",
-        "@photo-sphere-viewer/core": "./js/vendor/@photo-sphere-viewer/core/index.module.js"
+        "@photo-sphere-viewer/core": "./js/vendor/@photo-sphere-viewer/core/index.module.js",
+        "@hotwired/stimulus": "./js/vendor/@hotwired/stimulus/dist/stimulus.js"
         }
     }
     </script>
@@ -20,7 +21,7 @@
     <script src="js/index.js" type="module"></script>
     <title>WebGIS Isola di Capri</title>
 </head>
-<body>
+<body data-controller="menu">
     <nav class="navbar mb-0" role="navigation">
         <div class="navbar-brand">
             <a href="/" class="navbar-item is-size-5 has-text-dark ml-4" title="Torna alla home page">
@@ -40,7 +41,8 @@
         </div>
         <hr class="navbar-divider">
         <div class="navbar-end pb-1 pt-1" id="nav-menu">
-            <button class="navbar-item button is-size-5 is-white" role="button" id="siti">
+            <button class="navbar-item button is-size-5 is-white" role="button" id="siti"
+                data-action="click->menu#toggleMenu" data-id="siti">
                 Beni archeologici
             </button>
             <button class="navbar-item button is-size-5 is-white" role="button" id="non-conserv">
@@ -61,10 +63,11 @@
         <div class="loading loading-lg"></div>
     </div>
     <div class="main columns">
-        <div class="column is-hidden is-4 is-3-widescreen is-4-desktop is-5-mobile is-overlay has-background-white-ter" id="menu">
+        <div class="column is-hidden is-4 is-4-desktop is-5-mobile is-overlay has-background-white-ter" id="menu"
+            data-menu-target="menu">
             <aside class="menu ml-4">
                 <button title="Chiudi menu" class="delete is-pulled-right" id="close-menu"></button>
-                <p class="menu-label is-size-5 mt-2 is-clickable">
+                <p class="menu-label is-size-5 mt-2 is-clickable" data-action="click->menu#toggle" data-id="siti">
                     <span class="icon pr-2">
                         <img class="image" src="img/icons/siti_menu.png"/>
                     </span>
@@ -73,7 +76,7 @@
                         <i class="fa fa-chevron-right"></i>
                     </span>
                 </p>
-                <ul class="menu-list is-hidden" id="siti-list">
+                <ul class="menu-list is-hidden" id="siti-list" data-menu-target="list">
                     <li>
                         Anacapri
                         <ul id="siti-anacapri-sub">
@@ -144,7 +147,7 @@
                         <i class="fa fa-chevron-right"></i>
                     </span>
                 </p>
-                <ul class="menu-list is-hidden" id="not-conserved-list">
+                <ul class="menu-list is-hidden" id="not-conserved-list" data-menu-target="list">
 
                 </ul>
                 <p class="menu-label is-size-5 is-clickable">
diff --git a/webgis/js/controllers/menu_controller.js b/webgis/js/controllers/menu_controller.js
new file mode 100644
index 0000000..48cf575
--- /dev/null
+++ b/webgis/js/controllers/menu_controller.js
@@ -0,0 +1,46 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ['list', 'menu'];
+
+    toggleMenu(event) {
+        const target = event.currentTarget;
+        const id = target.getAttribute('data-id');
+
+        this.menuTarget.classList.toggle('is-hidden');
+
+        this.openList(`#${id}-list`);
+
+        console.log(this.menuTarget);
+    }
+
+    openList(id) {
+        document.querySelector(id).classList.remove('is-hidden');
+    }
+
+    toggle(event) {
+        const target = event.currentTarget; 
+        const targetIcon = target.querySelector('.fa');
+        const id = target.getAttribute('data-id');
+        const listId = `${id}-list`;
+        const list = this.listTargets.find(t => t.id === listId);
+
+        if (list) {
+            list.classList.toggle('is-hidden');
+        }
+
+        this.toggleIcon(targetIcon);
+    }
+
+    toggleIcon(icon) {
+        if (icon.classList.contains('fa-chevron-right')) {
+            icon.classList.remove('fa-chevron-right');
+            icon.classList.add('fa-chevron-down');
+        } else {
+            icon.classList.add('fa-chevron-right');
+            icon.classList.remove('fa-chevron-down');
+        }
+
+        return icon;
+    }
+}
diff --git a/webgis/js/index.js b/webgis/js/index.js
index ee14cf3..920995b 100644
--- a/webgis/js/index.js
+++ b/webgis/js/index.js
@@ -1,7 +1,12 @@
 import GIS from './gis.js';
 import UI from './ui.js';
+import { Application } from '@hotwired/stimulus';
+import MenuController from './controllers/menu_controller.js';
 
 document.addEventListener('DOMContentLoaded', async () => {
+    // Register Stimulus controllers
+    initStimulus();
+
     let progress = document.querySelector('progress');
     const init = await GIS.initMap('map');
     progress.classList.add('is-hidden');
@@ -12,8 +17,8 @@ document.addEventListener('DOMContentLoaded', async () => {
     GIS.toggleSpherical(map);
 
     UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
-    UI.toggleMenu('siti', 'siti-list');
-    UI.toggleMenu('rinvenimenti', 'rinvenimenti-list');
+    //UI.toggleMenu('siti', 'siti-list');
+    //UI.toggleMenu('rinvenimenti', 'rinvenimenti-list');
     UI.toggleBurger('navbar-burger');
     UI.sitesMenu('.menu-list', map, sites);
 
@@ -21,3 +26,8 @@ document.addEventListener('DOMContentLoaded', async () => {
         document.querySelector('#menu').classList.add('is-hidden');
     })
 });
+
+function initStimulus() {
+    window.Stimulus = Application.start();
+    Stimulus.register("menu", MenuController);
+}
\ No newline at end of file
