diff --git a/ale.png b/ale/1.png
similarity index 100%
rename from ale.png
rename to ale/1.png
diff --git a/ale/2.png b/ale/2.png
new file mode 100644
index 0000000..67fcfc3
Binary files /dev/null and b/ale/2.png differ
diff --git a/ale/3.png b/ale/3.png
new file mode 100644
index 0000000..a4b1b24
Binary files /dev/null and b/ale/3.png differ
diff --git a/ale/4.png b/ale/4.png
new file mode 100644
index 0000000..2051dc2
Binary files /dev/null and b/ale/4.png differ
diff --git a/ale/5.png b/ale/5.png
new file mode 100644
index 0000000..3aed890
Binary files /dev/null and b/ale/5.png differ
diff --git a/ale/6.png b/ale/6.png
new file mode 100644
index 0000000..819b72d
Binary files /dev/null and b/ale/6.png differ
diff --git a/ale/7.png b/ale/7.png
new file mode 100644
index 0000000..a4b1b24
Binary files /dev/null and b/ale/7.png differ
diff --git a/ale/8.png b/ale/8.png
new file mode 100644
index 0000000..67fcfc3
Binary files /dev/null and b/ale/8.png differ
diff --git a/index.html b/index.html
index a2729f8..5a9b997 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,8 @@
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <title</title>
+        <title>ALE 30</title>
+        <script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.11/lib/draggable.js"></script>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="style.css">
@@ -13,53 +14,99 @@
         <p><i>26 Luglio<br> Civitanova Marche</i></p>
 
         <h2><marquee behavior="" direction="left">MASKED FACE EDITION</marquee></h2>
-
+        <button onclick="ale()">Cambia Ale</button>
         <div class="animaz">
-            <img src="ale.png" alt="">
-            <!-- <div class="maskContainer"> -->
-                <img class="mask uno draggable" src="mask.png" alt="">
-                <img class="mask due draggable" src="mask2.png" alt="">
-            <!-- </div> -->
-           
+            <img id="ale" src="ale/1.png" alt="">
         </div>
+        <p>Sposta la maschera!</p>
 
-        <p> Portare costume e asciugamano.<br>Chi vuole rimanere a dormire ci saranno delle tende in giardino per accorgliervi ♥️ </p>
-       <p>Conferma la tua partecipazione entro il 12.07 e avrai tutte le info dell’evento ;)</p>
-
-
-       <script>
-
-const bodyWidth = document.body.clientWidth;
-let currentZIndex = 1; // Initialize a variable to keep track of the highest z-index
-
-document.querySelectorAll('.draggable').forEach(draggable => {
-
-    draggable.addEventListener('touchstart', (event) => {
-        draggable.style.zIndex = ++currentZIndex; // Set the z-index to a higher value
+       
 
-        const shiftX = event.clientX - draggable.getBoundingClientRect().left;
-        const shiftY = event.clientY - draggable.getBoundingClientRect().top;
-
-        function moveAt(pageX, pageY) {
-            draggable.style.left = `${pageX - shiftX}px`;
-            draggable.style.top = `${pageY - shiftY}px`;
-        }
-
-        function onMouseMove(event) {
-            moveAt(event.pageX, event.pageY);
-        }
-
-        // document.addEventListener('mousemove', onMouseMove);
-
-        draggable.addEventListener('touchstart', () => {
-            document.removeEventListener('touchend', onMouseMove);
-        }, { once: true });
+        <div class="maskContainer">
+            <img class="mask uno draggable" draggable="true" src="mask/mask.png" alt="">
+            <img class="mask due draggable" draggable="true" src="mask/mask2.png" alt="">
+            <img class="mask tre draggable" draggable="true" src="mask/mask3.png" alt="">
+            <img class="mask quattro draggable" draggable="true" src="mask/mask4.png" alt="">
+        </div>
 
+        <div class="description">
+            <p> Portare costume e asciugamano.<br>Chi vuole rimanere a dormire ci saranno delle tende in giardino per accorgliervi ♥️ </p>
+            <p>Conferma la tua partecipazione entro il 12.07 e avrai tutte le info dell’evento ;)</p>
+         </div>
+   
+       
 
-    });
+       <script>
 
-    draggable.addEventListener('dragstart', () => false);
+let alePic = 1
+
+function ale(){
+    alePic++
+    if(alePic == 9){
+        alePic = 1
+    }
+    document.querySelector('#ale').src = `ale/${alePic}.png`
+}
+
+
+document.addEventListener('DOMContentLoaded', () => {
+  const draggables = document.querySelectorAll('.draggable');
+
+  draggables.forEach(draggable => {
+    // HTML5 Drag and Drop Events
+    draggable.addEventListener('dragstart', handleDragStart);
+    draggable.addEventListener('dragend', handleDragEnd);
+
+    // Touch Events for mobile
+    draggable.addEventListener('touchstart', handleTouchStart);
+    draggable.addEventListener('touchmove', handleTouchMove);
+    draggable.addEventListener('touchend', handleTouchEnd);
+  });
+
+  function handleDragStart(event) {
+    event.dataTransfer.setData('text/plain', event.target.id);
+    setTimeout(() => {
+      event.target.classList.add('hidden');
+    }, 0);
+  }
+
+  function handleDragEnd(event) {
+    event.target.classList.remove('hidden');
+  }
+
+  function handleTouchStart(event) {
+    const touch = event.touches[0];
+    event.target.style.position = 'absolute';
+    event.target.style.zIndex = 1000;
+    moveAt(touch.pageX, touch.pageY, event.target);
+
+    function moveAt(pageX, pageY, element) {
+      element.style.left = pageX - element.offsetWidth / 2 + 'px';
+      element.style.top = pageY - element.offsetHeight / 2 + 'px';
+    }
+
+    function onTouchMove(event) {
+      const touch = event.touches[0];
+      moveAt(touch.pageX, touch.pageY, event.target);
+    }
+
+    document.addEventListener('touchmove', onTouchMove);
+
+    event.target.ontouchend = function () {
+      document.removeEventListener('touchmove', onTouchMove);
+      event.target.ontouchend = null;
+    };
+  }
+
+  function handleTouchMove(event) {
+    event.preventDefault();
+  }
+
+  function handleTouchEnd(event) {
+    event.preventDefault();
+  }
 });
+
        </script>
     </body>
 </html>
diff --git a/mask.png b/mask/mask.png
similarity index 100%
rename from mask.png
rename to mask/mask.png
diff --git a/mask2.png b/mask/mask2.png
similarity index 100%
rename from mask2.png
rename to mask/mask2.png
diff --git a/mask/mask3.png b/mask/mask3.png
new file mode 100644
index 0000000..8a9e475
Binary files /dev/null and b/mask/mask3.png differ
diff --git a/mask/mask4.png b/mask/mask4.png
new file mode 100644
index 0000000..6ecbb3c
Binary files /dev/null and b/mask/mask4.png differ
diff --git a/style.css b/style.css
index 44ad826..0077854 100644
--- a/style.css
+++ b/style.css
@@ -18,7 +18,7 @@ body, html{
 }
 
 img{
-    width: 50%;
+    width: 200px;
     border-radius: 20%;
 }
 
@@ -53,8 +53,32 @@ p{
 }
 
 .mask{
-    position: absolute;
-    top: 32%;
-    /* animation: infinite linear maskMove 10s; */
+    width: 100px;
+    height: fit-content
+    
 }
 
+
+
+.maskContainer{
+    display: flex;
+    height: 200px;
+    align-items: center;
+    margin-top: 2rem;
+}
+
+button{
+    background: none;
+    border-radius: 25%;
+    padding:  .5rem 1rem;
+    margin-bottom: 1rem;
+    font-family: 'inter';
+}
+
+.uno{
+    scale: 1.55
+}
+
+.quattro{
+    scale: 1.2
+}
\ No newline at end of file
