diff --git a/MP.SPEC/Components/DossiersFilter.razor b/MP.SPEC/Components/DossiersFilter.razor
index b1d6c7e9..9350c1a4 100644
--- a/MP.SPEC/Components/DossiersFilter.razor
+++ b/MP.SPEC/Components/DossiersFilter.razor
@@ -1,9 +1,17 @@
 <div class="d-flex justify-content-end">
-
-    <div class="d-flex justify-content-between">
-        <div class="d-flex justify-content-between pt-2 mb-1">
-
-            <div class="input-group input-group">
+    <button class="btn btn-info" type="button" data-bs-toggle="offcanvas" data-bs-target="#paramsFilterExample" aria-controls="paramsFilterExample">
+        Mostra filtri
+    </button>
+    <div class="offcanvas offcanvas-end" tabindex="-1" id="paramsFilterExample" aria-labelledby="paramsFilterExampleLabel">
+        <div class="offcanvas-header">
+            <h3 class="offcanvas-title" id="paramsFilterExampleLabel"><b>FILTRI</b></h3>
+            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body">
+            <div>
+                Seleziona i filtri per:
+            </div>
+            <div class="input-group p-2">
                 <label class="input-group-text" for="macchina" title="Selezionare l'articolo"><i class="fa-solid fa-file"></i></label>
                 <select @bind="@selArticolo" class="form-select" id="macchina" title="Selezionare la macchina">
                     <option value="*">--- Tutti ---</option>
@@ -15,6 +23,8 @@
                         }
                     }
                 </select>
+            </div>
+            <div class="input-group p-2">
                 <label class="input-group-text" for="macchina" title="Selezionare la macchina"><i class="fa-solid fa-hard-drive"></i></label>
                 <select @bind="@selMacchina" class="form-select" id="macchina" title="Selezionare la macchina">
                     <option value="*">--- Tutti ---</option>
@@ -26,31 +36,19 @@
                         }
                     }
                 </select>
-
             </div>
-        </div>
-        <div class="d-flex justify-content-between pt-0">
-            <div class="d-flex justify-content-between pt-2 mb-1">
-                @if (showParam)
-                {
-
-                    <div class="input-group input-group">
-                        <label class="input-group-text" for="DtMin" title="Selezionare la data da visualizzare"><i class="fa-solid fa-calendar-check"></i></label>
-                        <input @bind="@selDtRef" id="DtMin" class="form-control" type="datetime-local" title="Selezionare la data minima da visualizzare" />
-                        <label class="input-group-text" for="maxRecord" title="Selezionare il numero massimo di record da visualizzare"><i class="fa-solid fa-list-ol"></i></label>
-                        <select @bind="@selMaxRecord" class="form-select" id="maxRecord" title="Selezionare il numero massimo di record da visualizzare">
-                            <option value="50">50</option>
-                            <option value="100">100</option>
-                            <option value="250">250</option>
-                            <option value="500">500</option>
-                        </select>
-                        <button class="btn btn-default btn-block" @onclick="toggleShowParams" title="Hide Parameters"><i class="fa-solid fa-ellipsis-vertical"></i></button>
-                    </div>
-                }
-                else
-                {
-                        <button class="btn btn-default btn-block" @onclick="toggleShowParams" title="Show Parameters"><i class="fa-solid fa-ellipsis"></i></button>
-                }
+            <div class="input-group p-2">
+                <label class="input-group-text" for="DtMin" title="Selezionare la data da visualizzare"><i class="fa-solid fa-calendar-check"></i></label>
+                <input @bind="@selDtRef" id="DtMin" class="form-control" type="datetime-local" title="Selezionare la data minima da visualizzare" />
+            </div>
+            <div class="input-group p-2">
+                <label class="input-group-text" for="maxRecord" title="Selezionare il numero massimo di record da visualizzare"><i class="fa-solid fa-list-ol"></i></label>
+                <select @bind="@selMaxRecord" class="form-select" id="maxRecord" title="Selezionare il numero massimo di record da visualizzare">
+                    <option value="50">50</option>
+                    <option value="100">100</option>
+                    <option value="250">250</option>
+                    <option value="500">500</option>
+                </select>
             </div>
         </div>
     </div>
diff --git a/MP.SPEC/Components/ParamsFilter.razor b/MP.SPEC/Components/ParamsFilter.razor
index 1be0c622..525ee3b5 100644
--- a/MP.SPEC/Components/ParamsFilter.razor
+++ b/MP.SPEC/Components/ParamsFilter.razor
@@ -1,115 +1,111 @@
-
 <div class="d-flex justify-content-between">
-    <div class="px-0 py-1">
-        <div class="d-flex justify-content-between">
-            <div class="px-2">
+    <div class="d-flex justify-content-between pt-1 mb-1">
+        <div class="px-2">
 
-                @if (!liveUpdate)
-                {
-                    <button class="btn btn-secondary" type="button" @onclick="() => toggleUpdate()" title="Click per tornare a Valori Live">
-                        <small>@lastUpdate</small>
-                    </button>
-                }
-                else
-                {
-                    <button class="btn btn-primary" type="button" @onclick="() => toggleUpdate()">
-                        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
-                        Valori live
-                    </button>
-                }
-            </div>
-            <div class="px-2">
-                @if (selMacchina != "*")
-                {
-                    <button class="btn btn-warning" type="button" @onclick="() => takeSnapshot()">
-                        <i class="fa-solid fa-camera"></i>
-                        @snapMode
-                    </button>
-                }
-            </div>
-            <div class="px-2">
-                @if (snapshotDone)
-                {
-                    <button class="btn btn-success" type="button" @onclick="() => navDossier()">
-                        <div class="spinner-border spinner-border-sm" role="status">
-                            <span class="visually-hidden">Loading...</span>
-                        </div>
-                        <i class="fa-solid fa-camera"></i>
-                        Fatto! Mostra Dossier
-                    </button>
-                }
-            </div>
-        </div>
-    </div>
-
-    <div class="px-0">
-        <div class="d-flex justify-content-end">
-            @if (showEditPar)
+            @if (!liveUpdate)
             {
-                <div class="px-0 input-group py-1">
-                    <button class="btn btn-primary" @onclick="() => toggleParams()"> <i class="fa-solid fa-arrow-right"></i></button>
-                    <label class="input-group-text" for="tempoAgg" title="Selezionare il tempo di aggiornamento dei dati"><i class="fa-solid fa-clock"></i></label>
-                    <select @bind="@selTempoAgg" class="form-select" id="tempoAgg" title="Selezionare il tempo di aggiornamento dei dati" style="width: 3em;">
-                        <option value="2">2</option>
-                        <option value="5">5</option>
-                        <option value="10">10</option>
-                        <option value="30">30</option>
-                        <option value="60">60</option>
-                    </select>
-                    <label class="input-group-text" for="maxRecord" title="Selezionare il numero massimo di record da visualizzare"><i class="fa-solid fa-list-ol"></i></label>
-                    <select @bind="@selMaxRecord" class="form-select" id="maxRecord" title="Selezionare il numero massimo di record da visualizzare">
-                        <option value="50">50</option>
-                        <option value="100">100</option>
-                        <option value="250">250</option>
-                        <option value="500">500</option>
-                        <option value="1000">1000</option>
-                        <option value="2500">2500</option>
-                        <option value="5000">5000</option>
-                    </select>
-                </div>
+                <button class="btn btn-secondary" type="button" @onclick="() => toggleUpdate()" title="Click per tornare a Valori Live">
+                    <small>@lastUpdate</small>
+                </button>
             }
             else
             {
-                <div class="px-2 py-1">
-                    <button class="btn btn-primary" @onclick="() => toggleParams()"><i class="fa-solid fa-arrow-left"></i></button>
-                </div>
+                <button class="btn btn-primary" type="button" @onclick="() => toggleUpdate()">
+                    <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
+                    Valori live
+                </button>
             }
-            <div class="px-0 py-1">
-                <div class="px-2 input-group">
-                    <label class="input-group-text" for="macchina" title="Selezionare la macchina"><i class="fa-solid fa-hard-drive"></i></label>
-                    <select @bind="@selMacchina" class="form-select" id="macchina" title="Selezionare la macchina">
-                        <option value="*">--- Tutti ---</option>
-                        @if (ListMacchine != null)
-                        {
-                            foreach (var item in ListMacchine)
-                            {
-                                <option value="@item">@item</option>
-                            }
-                        }
-                    </select>
-                    <label class="input-group-text" for="flusso" title="Selezionare il tipo di flusso"><i class="fa-solid fa-sliders"></i></label>
-                    <select @bind="@selFlux" class="form-select" id="flusso" title="Selezionare il tipo di flusso">
-                        <option value="*">--- Tutti ---</option>
-                        @if (ListFlux != null)
-                        {
-                            foreach (var item in ListFlux)
-                            {
-                                <option value="@item">@item</option>
-                            }
-                        }
-                    </select>
-                    @if (selDtMax == null)
+        </div>
+        <div class="px-2">
+            @if (selMacchina != "*")
+            {
+                <button class="btn btn-warning" type="button" @onclick="() => takeSnapshot()">
+                    <i class="fa-solid fa-camera"></i>
+                    @snapMode
+                </button>
+            }
+        </div>
+        <div class="px-2">
+            @if (snapshotDone)
+            {
+                <button class="btn btn-success" type="button" @onclick="() => navDossier()">
+                    <div class="spinner-border spinner-border-sm" role="status">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                    <i class="fa-solid fa-camera"></i>
+                    Fatto! Mostra Dossier
+                </button>
+            }
+        </div>
+
+    </div>
+    <button class="btn btn-info" type="button" data-bs-toggle="offcanvas" data-bs-target="#paramsFilterExample" aria-controls="paramsFilterExample" @onclick="()=>setDtMax()">
+        Mostra filtri
+    </button>
+    <div class="offcanvas offcanvas-end" tabindex="-1" id="paramsFilterExample" aria-labelledby="paramsFilterExampleLabel">
+        <div class="offcanvas-header">
+            <h3 class="offcanvas-title" id="paramsFilterExampleLabel"><b>FILTRI</b></h3>
+            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body">
+            <div>
+                Seleziona i filtri per:
+            </div>
+            <div class="px-2 input-group">
+                <label class="input-group-text" for="macchina" title="Selezionare la macchina"><i class="fa-solid fa-hard-drive"></i></label>
+                <select @bind="@selMacchina" class="form-select" id="macchina" title="Selezionare la macchina">
+                    <option value="*">--- Tutti ---</option>
+                    @if (ListMacchine != null)
                     {
-                        <button class="btn btn-primary" @onclick="() => setDtMax()"><i class="fa-regular fa-calendar-check"></i></button>
+                        foreach (var item in ListMacchine)
+                        {
+                            <option value="@item">@item</option>
+                        }
                     }
-                    else
+                </select>
+            </div>
+            <div class="p-2 input-group">
+                <label class="input-group-text" for="flusso" title="Selezionare il tipo di flusso"><i class="fa-solid fa-sliders"></i></label>
+                <select @bind="@selFlux" class="form-select" id="flusso" title="Selezionare il tipo di flusso">
+                    <option value="*">--- Tutti ---</option>
+                    @if (ListFlux != null)
                     {
-                        <label class="input-group-text" for="flusso" title="Selezionare la data minima eventi da visualizzare"><i class="fa-regular fa-calendar-minus"></i></label>
-                        <input class="form-control" @bind="@selDtMin" type="datetime-local" title="Data minima eventi da visualizzare">
-                        <label class="input-group-text" for="flusso" title="Selezionare la data massima eventi da visualizzare"><i class="fa-regular fa-calendar-plus"></i></label>
-                        <input class="form-control" @bind="@selDtMax" type="datetime-local" title="Selezionare la data massima eventi da visualizzare">
+                        foreach (var item in ListFlux)
+                        {
+                            <option value="@item">@item</option>
+                        }
                     }
-                </div>
+                </select>
+            </div>
+            <div class="p-2 input-group">
+                <label class="input-group-text" for="flusso" title="Selezionare la data minima eventi da visualizzare"><i class="fa-regular fa-calendar-minus"></i></label>
+                <input class="form-control" @bind="@selDtMin" type="datetime-local" title="Data minima eventi da visualizzare">
+            </div>
+            <div class="p-2 input-group">
+                <label class="input-group-text" for="flusso" title="Selezionare la data massima eventi da visualizzare"><i class="fa-regular fa-calendar-plus"></i></label>
+                <input class="form-control" @bind="@selDtMax" type="datetime-local" title="Selezionare la data massima eventi da visualizzare">
+            </div>
+            <div class="p-2 input-group">
+                <label class="input-group-text" for="tempoAgg" title="Selezionare il tempo di aggiornamento dei dati"><i class="fa-solid fa-clock"></i></label>
+                <select @bind="@selTempoAgg" class="form-select" id="tempoAgg" title="Selezionare il tempo di aggiornamento dei dati" style="width: 3em;">
+                    <option value="2">2</option>
+                    <option value="5">5</option>
+                    <option value="10">10</option>
+                    <option value="30">30</option>
+                    <option value="60">60</option>
+                </select>
+            </div>
+            <div class="p-2 input-group">
+                <label class="input-group-text" for="maxRecord" title="Selezionare il numero massimo di record da visualizzare"><i class="fa-solid fa-list-ol"></i></label>
+                <select @bind="@selMaxRecord" class="form-select" id="maxRecord" title="Selezionare il numero massimo di record da visualizzare">
+                    <option value="50">50</option>
+                    <option value="100">100</option>
+                    <option value="250">250</option>
+                    <option value="500">500</option>
+                    <option value="1000">1000</option>
+                    <option value="2500">2500</option>
+                    <option value="5000">5000</option>
+                </select>
             </div>
         </div>
     </div>
diff --git a/MP.SPEC/Components/ParamsFilter.razor.cs b/MP.SPEC/Components/ParamsFilter.razor.cs
index 9930b251..76cd2905 100644
--- a/MP.SPEC/Components/ParamsFilter.razor.cs
+++ b/MP.SPEC/Components/ParamsFilter.razor.cs
@@ -99,7 +99,8 @@ namespace MP.SPEC.Components
                 }
             }
         }
-
+        protected bool showParam { get; set; } = false;
+        protected bool selDt { get; set; } = false;
         protected string selMacchina
         {
             get => SelFilter.IdxMacchina;
@@ -185,7 +186,7 @@ namespace MP.SPEC.Components
             // copio il filtro
             var currFilt = SelFilter;
             // fermo update
-            currFilt.LiveUpdate = false;
+            //currFilt.LiveUpdate = false;
             currFilt.CurrPage = 0;
             currFilt.lastUpdate = $"{DateTime.Now:yyyy/MM/dd HH:mm:ss}";
             currFilt.dtMax = RoundDatetime(5);
@@ -193,6 +194,7 @@ namespace MP.SPEC.Components
             SelFilter = currFilt;
         }
 
+
         protected void startTimer()
         {
             aTimer = new System.Timers.Timer(5000);
@@ -310,6 +312,26 @@ namespace MP.SPEC.Components
         {
             FilterChanged.InvokeAsync(SelFilter);
         }
+        private void toggleShowParams()
+        {
+            showParam = !showParam;
+        }
+        private void untoggleSelDt()
+        {
+            selDt = false;
+            liveUpdate = true;
+        }
+        private void toggleSelDt()
+        {
+            selDt = true;
+            liveUpdate = false;
+
+            if (selDtMax == null)
+            {
+                setDtMax();
+            }
+
+        }
 
         #endregion Private Methods
     }
diff --git a/MP.SPEC/MP.SPEC.csproj b/MP.SPEC/MP.SPEC.csproj
index 3abca903..ccb08c71 100644
--- a/MP.SPEC/MP.SPEC.csproj
+++ b/MP.SPEC/MP.SPEC.csproj
@@ -5,7 +5,7 @@
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
     <RootNamespace>MP.SPEC</RootNamespace>
-    <Version>6.16.2210.516</Version>
+    <Version>6.16.2210.616</Version>
   </PropertyGroup>
 
   <ItemGroup>
diff --git a/MP.SPEC/Pages/Test.razor b/MP.SPEC/Pages/Test.razor
new file mode 100644
index 00000000..be6e0035
--- /dev/null
+++ b/MP.SPEC/Pages/Test.razor
@@ -0,0 +1,32 @@
+@page "/Test"
+
+<h3>Test</h3>
+
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
+    Button with data-bs-target
+</button>
+<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
+    <div class="offcanvas-header">
+        <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
+        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    </div>
+    <div class="offcanvas-body">
+        <div>
+            Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
+        </div>
+        <div class="dropdown mt-3">
+            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
+                Dropdown button
+            </button>
+            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <li><a class="dropdown-item" href="#">Action</a></li>
+                <li><a class="dropdown-item" href="#">Another action</a></li>
+                <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+@code {
+
+}
diff --git a/MP.SPEC/Pages/_Layout.cshtml b/MP.SPEC/Pages/_Layout.cshtml
index 060b003f..9353216d 100644
--- a/MP.SPEC/Pages/_Layout.cshtml
+++ b/MP.SPEC/Pages/_Layout.cshtml
@@ -30,7 +30,9 @@
         <a class="dismiss">🗙</a>
     </div>
 
+    <script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
     <script src="_framework/blazor.server.js" autostart="false"></script>
+
     @*Gestione autoriconnessione: https://github.com/dotnet/aspnetcore/issues/38305 (vedere anche https://docs.microsoft.com/it-it/aspnet/core/blazor/fundamentals/signalr?view=aspnetcore-6.0#modify-the-reconnection-handler-blazor-server)*@
     <script>
         Blazor.start({
diff --git a/MP.SPEC/Resources/ChangeLog.html b/MP.SPEC/Resources/ChangeLog.html
index e0f700ec..4c149536 100644
--- a/MP.SPEC/Resources/ChangeLog.html
+++ b/MP.SPEC/Resources/ChangeLog.html
@@ -1,6 +1,6 @@
 <body>
     <i>Modulo MAPOSPEC </i>
-    <h4>Versione: 6.16.2210.516</h4>
+    <h4>Versione: 6.16.2210.616</h4>
     <br /> Note di rilascio:
     <ul>
         <li>
diff --git a/MP.SPEC/Resources/VersNum.txt b/MP.SPEC/Resources/VersNum.txt
index 401aa198..1beb1912 100644
--- a/MP.SPEC/Resources/VersNum.txt
+++ b/MP.SPEC/Resources/VersNum.txt
@@ -1 +1 @@
-6.16.2210.516
+6.16.2210.616
diff --git a/MP.SPEC/Resources/manifest.xml b/MP.SPEC/Resources/manifest.xml
index cb2da6ab..9ed1abb1 100644
--- a/MP.SPEC/Resources/manifest.xml
+++ b/MP.SPEC/Resources/manifest.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <item>
-  <version>6.16.2210.516</version>
+  <version>6.16.2210.616</version>
   <url>https://nexus.steamware.net/repository/SWS/MP-SPEC/stable/LAST/MP.SPEC.zip</url>
   <changelog>https://nexus.steamware.net/repository/SWS/MP-SPEC/stable/LAST/ChangeLog.html</changelog>
   <mandatory>false</mandatory>