diff --git a/backend/authentication/authentication.js b/backend/authentication/authentication.js
index e717f53..19380db 100644
--- a/backend/authentication/authentication.js
+++ b/backend/authentication/authentication.js
@@ -39,7 +39,7 @@ router.post("", async function (req, res) {
             if (!user) {
                 user = new User({
                     email: payload["email"],
-                    password: "default-google-password-to-be-changed",
+                    password: "google-pass-to-be-changed",
                 });
                 await user.save();
             }
diff --git a/backend/controllers/reportsController.js b/backend/controllers/reportsController.js
index 04f41f0..6fb1a66 100644
--- a/backend/controllers/reportsController.js
+++ b/backend/controllers/reportsController.js
@@ -91,6 +91,7 @@ export const updateReport = async (req, res) => {
         res.status(200).json(report);
     } catch (error) {
         res.status(400).json({ message: "Error in report update" });
+        console.log(error.message)
     }
 };
 
diff --git a/frontend/src/components/Mappa/Mappa.vue b/frontend/src/components/Mappa/Mappa.vue
index fb02d10..9f600b1 100644
--- a/frontend/src/components/Mappa/Mappa.vue
+++ b/frontend/src/components/Mappa/Mappa.vue
@@ -22,6 +22,8 @@ const props = defineProps({
     },
 });
 
+const filteredEmergencies = ref([])
+
 onMounted(() => {
     // Recupero i bordi del comune di Trento da OpenStreetMap
     fetch('https://nominatim.openstreetmap.org/search.php?city=Trento&polygon_geojson=1&format=json')
@@ -34,6 +36,12 @@ onMounted(() => {
         .catch(error => {
             console.error('Errore caricamento mappa:', error);
         });
+
+    filteredEmergencies.value = props.emergencies?.filter(emergency => {
+        return emergency.coordinates.lat !== null &&
+            emergency.coordinates.lon !== null;
+    })
+    console.log(filteredEmergencies)
 });
 </script>
 
@@ -41,7 +49,7 @@ onMounted(() => {
     <div class="map-div w-full h-full m-0 p-0 z-40">
         <l-map :zoom="zoom" :center="center">
             <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
-            <l-marker v-for="marker in emergencies" :key="marker.id"
+            <l-marker v-for="marker in filteredEmergencies" :key="marker.id"
                 :lat-lng="[marker.coordinates.lat, marker.coordinates.lon]">
                 <l-popup>
                     <div class="flex justify-start">
diff --git a/frontend/src/components/Navbar/Navbar.vue b/frontend/src/components/Navbar/Navbar.vue
index 1a0dabd..5de3169 100644
--- a/frontend/src/components/Navbar/Navbar.vue
+++ b/frontend/src/components/Navbar/Navbar.vue
@@ -49,7 +49,7 @@ function chiudiMenuNavbar() {
                                 <p class="ms-1 mt-0.5">Storico emergenze</p>
                             </router-link>
                         </li>
-                        <li class="menu-title px-0">
+                        <li v-if="!loggedUser.role" class="menu-title px-0">
                             <router-link to="/accedi" class="px-0 flex" @click="chiudiMenuNavbar()">
                                 <KeyIcon class="size-6 mx-2" />
                                 <p class="ms-1 mt-0.5">Accedi</p>
diff --git a/frontend/src/components/Tabelle/TabellaSegnalazioni.vue b/frontend/src/components/Tabelle/TabellaSegnalazioni.vue
index cd47864..607099d 100644
--- a/frontend/src/components/Tabelle/TabellaSegnalazioni.vue
+++ b/frontend/src/components/Tabelle/TabellaSegnalazioni.vue
@@ -68,7 +68,7 @@ const filteredReports = computed(() => {
                             {{ index + 1 }}
                         </td>
                         <td v-if="props.isOperator">
-                            {{ report.email }}
+                            <span v-html="report.email ? report.email : '<i>Utente rimosso</i>'"></span>
                         </td>
                         <td v-else>
                             {{ report.createdAt }}
diff --git a/frontend/src/components/Toast/Toast.vue b/frontend/src/components/Toast/Toast.vue
index 9891387..be8627f 100644
--- a/frontend/src/components/Toast/Toast.vue
+++ b/frontend/src/components/Toast/Toast.vue
@@ -1,6 +1,4 @@
 <script setup>
-import { computed } from 'vue';
-
 import {
     CheckCircleIcon,
     ExclamationTriangleIcon,
diff --git a/frontend/src/data/reports.js b/frontend/src/data/reports.js
index 917e7ba..ee18bf7 100644
--- a/frontend/src/data/reports.js
+++ b/frontend/src/data/reports.js
@@ -168,3 +168,25 @@ export async function createReport(data) {
         return null;
     }
 }
+
+export async function updateReport(data) {
+    try {
+        const response = await fetch(apiReports + data.id, {
+            method: "PUT",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${loggedUser.token}`,
+            },
+            body: JSON.stringify(data),
+        });
+
+        if (!response.ok) {
+            throw new Error("Errore nell'aggiornamento del report");
+        }
+
+        return response.json();
+    } catch (error) {
+        console.error("Errore da updateReport(): ", error);
+        return null;
+    }
+}
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index e0e9ee6..c72fa35 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -43,6 +43,11 @@ const router = createRouter({
       name: 'invia_segnalazione',
       component: () => import('../views/user/ViewSegnalazione.vue'),
     },
+    {
+      path: '/conferma_segnalazione',
+      name: 'conferma_segnalazione',
+      component: () => import('../views/dashboard/ViewEditSegnalazione.vue'),
+    },
     {
       path: '/pubblica_comunicazione',
       name: 'pubblica_comunicazione',
diff --git a/frontend/src/views/dashboard/ViewDashboard.vue b/frontend/src/views/dashboard/ViewDashboard.vue
index 20e866f..ad53eaf 100644
--- a/frontend/src/views/dashboard/ViewDashboard.vue
+++ b/frontend/src/views/dashboard/ViewDashboard.vue
@@ -30,6 +30,10 @@ onMounted(async () => {
     if (route.query.published === 'true') {
         createToast("success", "Successo!", "Comunicazione pubblicata correttamente")
     }
+    
+    if (route.query.published === 'true') {
+        createToast("success", "Successo!", "Comunicazione modificata correttamente")
+    }
 
     if (route.query.approved === 'true') {
         createToast("info", "Successo!", "Segnalazione approvata correttamente")
@@ -98,7 +102,7 @@ function createToast(type, title, msg) {
                         </div>
                     </div>
                     <div class="stat">
-                        <div class="stat-figure text-ghost">
+                        <div class="stat-figure text-warning">
                             <ShieldExclamationIcon class="inline-block size-12" />
                         </div>
                         <div class="stat-title">Segnalazioni inviate</div>
@@ -108,7 +112,7 @@ function createToast(type, title, msg) {
                         </div>
                     </div>
                     <div class="stat">
-                        <div class="stat-figure text-ghost">
+                        <div class="stat-figure text-primary">
                             <ShieldCheckIcon class="inline-block size-12" />
                         </div>
                         <div class="stat-title">Emergenze pubblicate</div>
@@ -177,7 +181,7 @@ function createToast(type, title, msg) {
 }
 
 .stat:hover {
-    color: var(--primary);
+    color: var(--primary) !important;
     transform: scale(1.05);
 }
 
diff --git a/frontend/src/views/dashboard/ViewEditComunicazione.vue b/frontend/src/views/dashboard/ViewEditComunicazione.vue
index d38a761..743d7b3 100644
--- a/frontend/src/views/dashboard/ViewEditComunicazione.vue
+++ b/frontend/src/views/dashboard/ViewEditComunicazione.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, onMounted } from 'vue'
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { loggedUser } from '../../states/loggedUser.js';
 import { updateEmergency } from '@/data/emergencies.js';
 
@@ -11,11 +11,13 @@ import WrongURL from '@/components/Error/WrongURL.vue';
 import Toast from '@/components/Toast/Toast.vue';
 
 const route = useRoute();
+const router = useRouter();
+
 const apiEmergencies = import.meta.env.VITE_API_BASE_URL + "/emergencies/";
 
 const self = ref()
 const title = ref()
-const category = ref("Di che tipo è l'emergenza?")
+const category = ref()
 const startDate = ref()
 const startTime = ref()
 const location = ref()
@@ -23,7 +25,7 @@ const coordinates = ref({
     lat: null,
     lon: null
 });
-const state = ref("In che stato è l'emergenza?")
+const state = ref()
 const description = ref()
 
 onMounted(() => {
@@ -93,7 +95,7 @@ function modificaComunicazione() {
 
     console.log('Values: ', updatedEmergency)
     updateEmergency(updatedEmergency)
-    createToast("success", "Successo!", "Comunicazione modificata correttamente")
+    router.push({ path: '/dashboard', query: { edited: 'true' } })
 }
 
 const showToast = ref(false)
@@ -116,7 +118,7 @@ function createToast(type, title, msg) {
 
 <template>
     <div v-if="loggedUser.token && loggedUser.role === 'operator'">
-        <div v-if="self === null">
+        <div v-if="!self">
             <WrongURL />
         </div>
 
@@ -215,7 +217,7 @@ function createToast(type, title, msg) {
                     <div class="w-full">
                         <input @click="modificaComunicazione()" type="button" value="Modifica comunicazione"
                             class="btn btn-primary float-end rounded-lg mt-6" />
-                        <input @click="$router.go(-1)" type="button" value="Annulla"
+                        <input @click="$router.go(-1)" type="button" value="Torna alla dashboard"
                             class="btn btn-ghost btn-outline float-end rounded-lg mt-6 me-2" />
                     </div>
                 </form>
diff --git a/frontend/src/views/dashboard/ViewEditSegnalazione.vue b/frontend/src/views/dashboard/ViewEditSegnalazione.vue
index e85af20..e34b1e3 100644
--- a/frontend/src/views/dashboard/ViewEditSegnalazione.vue
+++ b/frontend/src/views/dashboard/ViewEditSegnalazione.vue
@@ -1,52 +1,144 @@
 <script setup>
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { loggedUser } from '../../states/loggedUser.js'
-import { createReport } from '@/data/reports.js'
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router';
+import { loggedUser } from '../../states/loggedUser.js';
+import { createEmergency } from '@/data/emergencies.js';
+import { updateReport } from '@/data/reports.js';
 
-import { PaperAirplaneIcon } from "@heroicons/vue/24/solid"
-import AccessDenied from '@/components/Error/AccessDenied.vue'
-import AccessLimited from "@/components/Error/AccessLimited.vue"
-import Toast from '@/components/Toast/Toast.vue'
+import { CheckIcon, WrenchIcon, XMarkIcon } from "@heroicons/vue/24/solid";
+import AccessDenied from '@/components/Error/AccessDenied.vue';
+import AccessLimited from "@/components/Error/AccessLimited.vue";
+import WrongURL from '@/components/Error/WrongURL.vue';
+import Toast from '@/components/Toast/Toast.vue';
 
-const router = useRouter()
+const route = useRoute();
+const router = useRouter();
 
-const description = ref()
+const apiReports = import.meta.env.VITE_API_BASE_URL + "/reports/";
+
+const id = ref()
+const title = ref()
+const category = ref("Di che tipo è l'emergenza?")
+const startDate = ref()
+const startTime = ref()
 const location = ref()
 const coordinates = ref({
     lat: null,
     lon: null
 });
+const state = ref("In che stato è l'emergenza?")
+const description = ref()
 
-const showToast = ref(false)
-const toastType = ref()
-const toastTitle = ref()
-const toastMsg = ref()
+// Funzione per recuperare l'id della segnalazione
+function recuperaId(self) {
+    return self.substring(self.lastIndexOf("/") + 1);
+}
 
-function inviaSegnalazione() {
-    if (!description.value) {
-        createToast("error", "Errore!", "La descrizione è un campo obbligatorio");
-        return;
-    }
+onMounted(() => {
+    fetch(apiReports + route.query.id, {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${loggedUser.token}`,
+        }
+    })
+        .then((response) => response.json())
+        .then((data) => {
+            if (data) {
+                id.value = recuperaId(data.self),
+                    description.value = data.description;
+                location.value = data.location;
+                coordinates.value = {
+                    lat: data.coordinates.lat,
+                    lon: data.coordinates.lon,
+                };
+                const [date, time] = data.startDate.split('T');
+                startDate.value = date;
+                startTime.value = time.slice(0, 5);
+            }
+        })
+        .catch((error) => {
+            console.error("Errore: ", error);
+            createToast("error", "Errore!", "Errore nel recupero dei dati")
+        });
+});
 
-    if (!location.value) {
-        createToast("error", "Errore!", "Il luogo è un campo obbligatorio");
-        return;
-    }
+function aggiornaSegnalazione(approved) {
+    if (approved) {
+        if (!title.value) {
+            createToast("error", "Errore!", "Il titolo è un campo obbligatorio");
+            return;
+        }
+
+        if (!category.value || category.value === "Di che tipo è l'emergenza?") {
+            createToast("error", "Errore!", "La categoria è un campo obbligatorio");
+            return;
+        }
+
+        if (!state.value || state.value === "In che stato è l'emergenza?") {
+            createToast("error", "Errore!", "Lo stato è un campo obbligatorio");
+            return;
+        }
+
+        if (!startDate.value || !startTime.value) {
+            createToast("error", "Errore!", "La data e ora d'inizio sono campi obbligatori");
+            return;
+        }
 
-    const bodyData = {
-        description: description.value,
-        location: location.value,
-        coordinates: {
-            lat: coordinates.value.lat,
-            lon: coordinates.value.lon
-        },
-        createdBy: loggedUser.id,
-    };
+        if (!location.value) {
+            createToast("error", "Errore!", "Il luogo è un campo obbligatorio");
+            return;
+        }
 
-    createReport(bodyData)
-    router.push({ path: '/profilo', query: { sent: 'true' } })
-};
+        const newEmergency = {
+            id: id.value,
+            title: title.value,
+            category: category.value,
+            startDate: `${startDate.value}T${startTime.value}:00.000Z`,
+            endDate: null,
+            location: location.value,
+            coordinates: {
+                lat: coordinates.value.lat,
+                lon: coordinates.value.lon
+            },
+            state: state.value,
+            description: description.value,
+        }
+
+        const updatedReport = {
+            id: id.value,
+            state: "approved",
+            description: description.value,
+            location: location.value,
+            coordinates: {
+                lat: coordinates.value.lat,
+                lon: coordinates.value.lon
+            }
+        }
+
+        createEmergency(newEmergency)
+        updateReport(updatedReport)
+        router.push({ path: '/dashboard', query: { approved: 'true' } })
+    } else {
+        const updatedReport = {
+            state: "rejected",
+            description: description.value,
+            location: location.value,
+            coordinates: {
+                lat: coordinates.value.lat,
+                lon: coordinates.value.lon
+            }
+        }
+
+        updateReport(updatedReport)
+        router.push({ path: '/dashboard', query: { rejected: 'true' } })
+    }
+}
+
+const showToast = ref(false)
+const toastType = ref()
+const toastTitle = ref()
+const toastMsg = ref()
 
 function createToast(type, title, msg) {
     showToast.value = true;
@@ -62,55 +154,169 @@ function createToast(type, title, msg) {
 </script>
 
 <template>
-    <div v-if="loggedUser.token && loggedUser.role === 'citizen'">
-        <Toast v-if="showToast" :type="toastType" :title="toastTitle" :msg="toastMsg" />
+    <div v-if="loggedUser.token && loggedUser.role === 'operator'">
+        <div v-if="!id">
+            <WrongURL />
+        </div>
+
+        <div v-else class="div-principale w-full flex justify-center">
+            <Toast v-if="showToast" class="high-z-index" :type="toastType" :title="toastTitle" :msg="toastMsg" />
 
-        <div class="div-principale w-full flex justify-center">
-            <div class="bg-secondary w-full max-w-4xl rounded-3xl p-8">
+            <div class="bg-secondary w-full max-w-6xl rounded-3xl p-8">
                 <div class="flex flex-row items-center ms mt-4 md:mt-0 mb-8">
-                    <PaperAirplaneIcon class="w-6 h-6 me-3" />
-                    <p class="text-2xl font-bold">Convalida segnalazione</p>
+                    <WrenchIcon class="w-6 h-6 me-3" />
+                    <p class="text-2xl font-bold">Conferma segnalazione</p>
                 </div>
                 <form class="flex flex-col justify-center items-center">
                     <label class="form-control w-full">
-                        <p class="text-slate-100 font-bold text-lg mb-2">Inserisci la descrizione:</p>
+                        <p class="text-slate-100 font-bold text-lg mb-2">Titolo comunicazione:</p>
+                        <input v-model="title" type="text" placeholder="Riassumi in un titolo la segnalazione"
+                            class="input input-md w-full" maxlength="200" required />
+                        <div class="label">
+                            <span class="label-text-alt"><b>Campo obbligatorio</b> - Max 200 caratteri</span>
+                        </div>
+                    </label>
+                    <label class="form-control w-full mt-6">
+                        <p class="text-slate-100 font-bold text-lg mb-2">Descrizione:</p>
                         <textarea v-model="description" class="textarea h-32"
-                            placeholder="Che succede? Spiegaci bene nel dettaglio cosa stai segnalando" maxlength="2500"
-                            required></textarea>
+                            placeholder="Che succede? Spiega bene nel dettaglio cosa si sta segnalando"
+                            maxlength="2500"></textarea>
                         <div class="label">
-                            <span class="label-text-alt"><b>Campo obbligatorio</b> - Max 2500 caratteri</span>
+                            <span class="label-text-alt">Max 2500 caratteri</span>
                         </div>
                     </label>
-                    <div class="columns-1 md:columns-2 w-full gap-6 mt-6">
+                    <div class="columns-1 sm:columns-2 lg:columns-4 w-full gap-6 mt-6">
+                        <label class="form-control w-full">
+                            <p class="text-slate-100 font-bold text-lg mb-2">Categoria:</p>
+                            <select v-model="category" class="select" required>
+                                <option class="text-gray-400" disabled selected>Di che tipo è l'emergenza?</option>
+                                <option>Frana</option>
+                                <option>Alluvione</option>
+                                <option>Ghiaccio</option>
+                                <option>Crollo strutturale</option>
+                                <option>Incendio</option>
+                                <option>Neve</option>
+                                <option>Tempesta</option>
+                                <option>Caduta albero</option>
+                            </select>
+                            <div class="label">
+                                <span class="label-text-alt"><b>Campo obbligatorio</b></span>
+                            </div>
+                        </label>
+                        <label class="form-control w-full mt-6">
+                            <p class="text-slate-100 font-bold text-lg mb-2">Stato:</p>
+                            <select v-model="state" class="select" required>
+                                <option class="text-gray-400" disabled selected>In che stato è l'emergenza?</option>
+                                <option>In corso</option>
+                                <option>Terminato</option>
+                            </select>
+                            <div class="label">
+                                <span class="label-text-alt"><b>Campo obbligatorio</b></span>
+                            </div>
+                        </label>
+                        <label class="form-control w-full mt-6">
+                            <p class="text-slate-100 font-bold text-lg mb-2">Data inizio:</p>
+                            <input v-model="startDate" type="date" class="input" required>
+                            <div class="label">
+                                <span class="label-text-alt"><b>Campo obbligatorio</b></span>
+                            </div>
+                        </label>
+                        <label class="form-control w-full mt-6">
+                            <p class="text-slate-100 font-bold text-lg mb-2">Ora inizio:</p>
+                            <input v-model="startTime" type="time" class="input" required>
+                            <div class="label">
+                                <span class="label-text-alt"><b>Campo obbligatorio</b></span>
+                            </div>
+                        </label>
+                    </div>
+                    <div class="columns-1 sm:columns-2 w-full gap-6 mt-6">
                         <label class="form-control w-full">
                             <p class="text-slate-100 font-bold text-lg mb-2">Luogo coinvolto:</p>
-                            <input v-model="location" type="text" placeholder="Che area coinvolge?" class="input"
-                                maxlength="100" required />
+                            <input v-model="location" type="text" placeholder="Che area coinvolge?"
+                                class="input input-md" maxlength="100" required />
                             <div class="label">
                                 <span class="label-text-alt"><b>Campo obbligatorio</b> - Max 100 caratteri</span>
                             </div>
                         </label>
                         <label class="form-control w-full mt-6">
                             <p class="text-slate-100 font-bold text-lg mb-2">Coordinate del luogo:</p>
-                            <div class="join w-full join-vertical sm:join-horizontal">
-                                <input v-model="coordinates.lat" type="number"
-                                    class="input w-full sm:w-3/4 join-item grow" placeholder="Latitudine" />
-                                <input v-model="coordinates.lon" type="number"
-                                    class="input w-full sm:w-3/4 join-item grow" placeholder="Longitudine" />
+                            <div class="join w-full join-vertical xl:join-horizontal">
+                                <input v-model="coordinates.lat" type="number" class="input input-md join-item grow"
+                                    placeholder="Latitudine" />
+                                <input v-model="coordinates.lon" type="number" class="input input-md join-item grow"
+                                    placeholder="Longitudine" />
                             </div>
                             <div class="label">
-                                <span class="label-text-alt">Campi facoltativi, <b>ma raccomandati</b></span>
+                                <span class="label-text-alt">Campi facoltativi</span>
                             </div>
                         </label>
                     </div>
                     <div class="w-full">
-                        <input @click="inviaSegnalazione()" type="button" value="Invia segnalazione"
-                            class="btn btn-wide btn-primary float-end rounded-lg mt-6" />
-                        <input @click="$router.go(-1)" type="button" value="Annulla"
-                            class="btn btn-ghost btn-outline float-end rounded-lg mt-6 me-2" />
+                        <button onclick="modalApprova.showModal()"
+                            class="btn btn-outline btn-primary float-end rounded-lg mt-6">
+                            <CheckIcon class="size-6 opacity-80" />
+                            Approva
+                        </button>
+                        <button onclick="modalRifiuta.showModal()"
+                            class="btn btn-outline btn-error float-end rounded-lg mt-6 me-4">
+                            <XMarkIcon class="size-6 opacity-80" />
+                            Rifiuta
+                        </button>
+                        <button @click="$router.go(-1)"
+                            class="btn btn-outline btn-ghost float-end rounded-lg mt-6 me-4">
+                            Torna alla dashboard
+                        </button>
                     </div>
                 </form>
             </div>
+
+            <dialog id="modalApprova" class="modal modal-bottom sm:modal-middle">
+                <div class="modal-box">
+                    <form method="dialog">
+                        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+                    </form>
+                    <h3 class="text-lg font-bold mb-2">Approvare la segnalazione?</h3>
+                    <p class="text-sm text-gray-200">
+                        La segnalazione verrà approvata e pubblicata a tutti gli effetti
+                    </p>
+                    <div class="modal-action">
+                        <form method="dialog">
+                            <button @click="aggiornaSegnalazione(true)" type="button" class="btn btn-success float-end">
+                                <CheckIcon class="size-5 opacity-70" />
+                                Conferma e approva
+                            </button>
+                            <button class="btn btn-ghost btn-outline me-2">Annulla</button>
+                        </form>
+                    </div>
+                </div>
+                <form method="dialog" class="modal-backdrop">
+                    <button>close</button>
+                </form>
+            </dialog>
+
+            <dialog id="modalRifiuta" class="modal modal-bottom sm:modal-middle">
+                <div class="modal-box">
+                    <form method="dialog">
+                        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+                    </form>
+                    <h3 class="text-lg font-bold mb-2">Rifiutare la segnalazione?</h3>
+                    <p class="text-sm text-gray-200">
+                        La segnalazione verrà rifiutata, ma non eliminata
+                    </p>
+                    <div class="modal-action">
+                        <form method="dialog">
+                            <button @click="aggiornaSegnalazione(false)" type="button" class="btn btn-error float-end">
+                                <XMarkIcon class="size-5 opacity-70" />
+                                Conferma e rifiuta
+                            </button>
+                            <button class="btn btn-ghost btn-outline me-2">Annulla</button>
+                        </form>
+                    </div>
+                </div>
+                <form method="dialog" class="modal-backdrop">
+                    <button>close</button>
+                </form>
+            </dialog>
         </div>
     </div>
 
@@ -125,7 +331,7 @@ function createToast(type, title, msg) {
 
 <style scoped>
 .div-principale {
-    padding: min(40px, 3vw);
+    padding: min(50px, 3vw);
 }
 
 .select {
@@ -136,11 +342,7 @@ function createToast(type, title, msg) {
     background-color: var(--input);
 }
 
-/* Per nascondere le frecce di input="number" */
-.no-arrows {
-    margin: 0 !important;
-    appearance: none !important;
-    -webkit-appearance: none !important;
-    -moz-appearance: textfield !important;
+.high-z-index {
+    z-index: 5000 !important;
 }
 </style>