diff --git a/Thermo.Active/wwwroot/assets/styles/base/paddle.less b/Thermo.Active/wwwroot/assets/styles/base/paddle.less
index 5b8cad97..ea0d52fc 100644
--- a/Thermo.Active/wwwroot/assets/styles/base/paddle.less
+++ b/Thermo.Active/wwwroot/assets/styles/base/paddle.less
@@ -4,15 +4,15 @@
 @import "fonts.less";
 
 html {
-  height: 100%;
+  height  : 100%;
   overflow: hidden;
 }
 
 body {
-  border: 0;
-  margin: 0;
+  border : 0;
+  margin : 0;
   padding: 0;
-  height: 100%;
+  height : 100%;
 }
 
 .hidden {
@@ -21,9 +21,9 @@ body {
 
 .main-nav {
   position: absolute;
-  top: 50%;
-  right: 0;
-  z-index: 1000;
+  top     : 50%;
+  right   : 0;
+  z-index : 1000;
 }
 
 .container {
@@ -32,8 +32,12 @@ body {
 
     nav {
       position: absolute;
-      top: 50%;
-      right: 0;
+      // top     : 50%;
+      right   : 0;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
 
 
       .active button {
@@ -43,36 +47,36 @@ body {
       div {
 
         button {
-          position: relative;
-          height: 30px;
-          width: 32px;
-          display: block;
-          z-index: 1000;
-          border: 0;
-          border-radius: 0;
-          pointer-events: all;
-          background: #dddddd;
+          position                 : relative;
+          height                   : 30px;
+          width                    : 32px;
+          display                  : block;
+          z-index                  : 1000;
+          border                   : 0;
+          border-radius            : 0;
+          pointer-events           : all;
+          background               : #dddddd;
           border-bottom-left-radius: 90px;
-          border-top-left-radius: 90px;
-          height: 90px;
-          width: 45px;
-          box-shadow: -3px 0 3px rgba(0, 0, 0, .2);
+          border-top-left-radius   : 90px;
+          height                   : 90px;
+          width                    : 45px;
+          box-shadow               : -3px 0 3px rgba(0, 0, 0, .2);
 
           div {
-            display: grid;
+            display              : grid;
             grid-template-columns: repeat(2, 1fr);
-            grid-template-rows: 1fr 1fr;
-            align-items: center;
-            justify-items: center;
-            padding: 5px;
+            grid-template-rows   : 1fr 1fr;
+            align-items          : center;
+            justify-items        : center;
+            padding              : 5px;
 
 
             div {
-              width: 2px;
-              height: 2px;
+              width        : 2px;
+              height       : 2px;
               border-radius: 10px;
-              margin: 2px;
-              background: #002680;
+              margin       : 2px;
+              background   : #002680;
 
             }
 
@@ -86,80 +90,83 @@ body {
 
 
     .sidebar {
+      width          : 100vw;
+      height         : 100vh;
+      display        : flex;
+      flex-direction : column;
+      justify-content: center;
 
-      .sidebar-backdrop {
-        width: 100vw;
-        height: 100vh;
-        position: fixed;
-        top: 0;
-        left: 0;
-        cursor: pointer;
-      }
+      // .sidebar-backdrop {
+      //   width: 100vw;
+      //   height: 100vh;
+      //   // position: fixed;
+      //   // top: 0;
+      //   // left: 0;
+      //   cursor: pointer;
+      // }
 
       .sidebar-panel {
-
-        overflow-y: auto;
+        overflow-y      : auto;
         background-color: #130f40;
         position: fixed;
         right: 0;
-        top: 141px;
-        height: 100vh;
-        z-index: 900;
-        padding: 3rem 20px 2rem 20px;
-        width: 721px;
-        height: 920px;
-        border-radius: 4px;
-        box-shadow: 2px 10px 15px 0 rgba(0, 0, 0, 0.5);
+        // top: 141px;
+        z-index         : 900;
+        padding         : 3rem 20px 2rem 20px;
+        width           : 721px;
+        height          : 920px;
+        border-radius   : 4px;
+        box-shadow      : 2px 10px 15px 0 rgba(0, 0, 0, 0.5);
         background-color: #dddddd;
 
         .text-head-sidebar {
-          margin: 10px auto;
-          font-size: 24px;
-          font-weight: 500;
-          font-stretch: normal;
-          font-style: normal;
-          line-height: normal;
+          margin        : 10px auto;
+          font-size     : 24px;
+          font-weight   : 500;
+          font-stretch  : normal;
+          font-style    : normal;
+          line-height   : normal;
           letter-spacing: normal;
-          text-align: center;
-          color: #002680;
+          text-align    : center;
+          color         : #002680;
         }
 
         .box-sidebar-panel {
-          display: grid;
+          display              : grid;
           grid-template-columns: repeat(2, 1fr);
-          align-items: center;
-          justify-items: center;
+          align-items          : center;
+          justify-items        : center;
 
           .sidebar-panel-nav {
-            width: 286px;
-            height: 100px;
-            border-radius: 2px;
-            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
+            width           : 286px;
+            height          : 100px;
+            border-radius   : 2px;
+            box-shadow      : 0 2px 4px 0 rgba(0, 0, 0, 0.5);
             background-color: #808e96;
-            margin: 10px 30px;
+            margin          : 10px 30px;
 
             .text-box-paddle {
-              display: flex;
-              width: 268px;
-              height: 78px;
-              font-family: WorkSans;
-              font-size: 18px;
-              font-weight: 500;
-              font-stretch: normal;
-              font-style: normal;
-              line-height: normal;
+              display       : flex;
+              width         : 268px;
+              height        : 78px;
+              font-family   : WorkSans;
+              font-size     : 18px;
+              font-weight   : 500;
+              font-stretch  : normal;
+              font-style    : normal;
+              line-height   : normal;
               letter-spacing: normal;
-              color: #ffffff;
-              margin: 10px;
+              color         : #ffffff;
+              margin        : 10px;
 
               i {
                 text-align: end;
-                width: 50px;
-                color: #bbbcbc;
+                width     : 50px;
+                color     : #bbbcbc;
               }
 
               label {
-                width: 117px;
+                width : 117px;
                 margin: 10px;
               }
 
@@ -167,7 +174,7 @@ body {
 
             .text-box-paddle.text-soft {
               label {
-                width: 100%;
+                width     : 100%;
                 align-self: center;
               }
             }
@@ -179,8 +186,6 @@ body {
 
       }
 
-
-
     }
 
   }
diff --git a/Thermo.Active/wwwroot/assets/styles/style.css b/Thermo.Active/wwwroot/assets/styles/style.css
index 41337e6b..fc51e125 100644
--- a/Thermo.Active/wwwroot/assets/styles/style.css
+++ b/Thermo.Active/wwwroot/assets/styles/style.css
@@ -4977,8 +4977,11 @@ body {
 }
 .container #app nav {
   position: absolute;
-  top: 50%;
   right: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 .container #app nav .active button {
   transform: translate(-761px, 0px);
@@ -5014,21 +5017,18 @@ body {
   margin: 2px;
   background: #002680;
 }
-.container #app .sidebar .sidebar-backdrop {
+.container #app .sidebar {
   width: 100vw;
   height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 .container #app .sidebar .sidebar-panel {
   overflow-y: auto;
   background-color: #130f40;
   position: fixed;
   right: 0;
-  top: 141px;
-  height: 100vh;
   z-index: 900;
   padding: 3rem 20px 2rem 20px;
   width: 721px;
diff --git a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue
index 5a6fa93f..0e100048 100644
--- a/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue
+++ b/Thermo.Active/wwwroot/src/app_modules_thermo/components/paddle/sidebar.vue
@@ -1,80 +1,73 @@
 <template>
-    <div class="sidebar">
-        <div class="sidebar-backdrop" @click="closeSidebarPanel()" v-if="isPanelOpen()"></div>
-        <!-- <transition name="slide"> -->
-        <transition>
-            
-            <div v-if="isPanelOpen()" class="sidebar-panel">
+  <div class="sidebar">
+    <!-- <transition> -->
+    <div v-if="isPanelOpen()" class="sidebar-panel">
+      <div class="text-head-sidebar">
+        <label>Pulsanti personalizzati</label>
+      </div>
 
-                <div class="text-head-sidebar">
-                    <label>Pulsanti personalizzati</label>
-                </div>
+      <div class="box-sidebar-panel">
+        <div class="sidebar-panel-nav">
+          <div class="text-box-paddle">
+            <img src="assets/icons/svg/paddle-riscaldo.svg" />
+            <label>Estensione riscaldo 20 secondi</label>
+            <i class="fa fa-cog gear-box-paddle"></i>
+          </div>
+        </div>
+        <div class="sidebar-panel-nav">
+          <div class="text-box-paddle">
+            <img src="assets/icons/svg/paddle-altra-funzione.svg" />
+            <label>Altra funzione tasto fisico della tastiera</label>
+            <i class="fa fa-cog gear-box-paddle"></i>
+          </div>
+        </div>
+      </div>
 
-                <div class="box-sidebar-panel">
-                    <div class="sidebar-panel-nav">
-                        <div class="text-box-paddle">
-                            <img src="assets/icons/svg/paddle-riscaldo.svg" />
-                            <label>Estensione riscaldo 20 secondi</label>
-                            <i class="fa fa-cog gear-box-paddle"></i>
-                        </div>
-                    </div>
-                    <div class="sidebar-panel-nav">
-                        <div class="text-box-paddle">
-                            <img src="assets/icons/svg/paddle-altra-funzione.svg" />
-                            <label>Altra funzione tasto fisico della tastiera</label>
-                            <i class="fa fa-cog gear-box-paddle"></i>
-                        </div>
-                    </div>
-                </div>
+      <div class="text-head-sidebar">
+        <label>Soft keys</label>
+      </div>
 
-                <div class="text-head-sidebar">
-                    <label>Soft keys</label>
-                </div>
-
-                <div class="box-sidebar-panel">
-                    <div class="sidebar-panel-nav">
-                        <div class="text-box-paddle text-soft">
-                            <label>Nome azione soft key</label>
-                        </div>
-                    </div>
-                    <div class="sidebar-panel-nav">
-                        <div class="text-box-paddle text-soft">
-                            <label>Nome azione soft key</label>
-                        </div>
-                    </div>
-                    <div class="sidebar-panel-nav">
-                        <div class="text-box-paddle text-soft">
-                            <label>Nome azione soft key</label>
-                        </div>
-                    </div>
-                    <div class="sidebar-panel-nav">
-                        <div class="text-box-paddle text-soft">
-                            <label>Estensione riscaldo 20 secondi</label>
-                        </div>
-                    </div>
-                    <div class="sidebar-panel-nav">
-                        <div class="text-box-paddle text-soft">
-                            <toggle-button v-model="azione1"></toggle-button>
-                            <label>Nome azione soft key</label>
-                        </div>
-                    </div>
-                    <div class="sidebar-panel-nav">
-                        <div class="text-box-paddle text-soft">
-                            <toggle-button v-model="azione2"></toggle-button>
-                            <label>Nome azione soft key</label>
-                        </div>
-                    </div>
-                    <div class="sidebar-panel-nav">
-                        <div class="text-box-paddle text-soft">
-                            <label>Nome azione soft key</label>
-                        </div>
-                    </div>                
-                </div>
-
-            <!-- <i class="fa fa-cog gear-sidebar-paddle"></i> -->
-
-            </div>
-        </transition>
+      <div class="box-sidebar-panel">
+        <div class="sidebar-panel-nav">
+          <div class="text-box-paddle text-soft">
+            <label>Nome azione soft key</label>
+          </div>
+        </div>
+        <div class="sidebar-panel-nav">
+          <div class="text-box-paddle text-soft">
+            <label>Nome azione soft key</label>
+          </div>
+        </div>
+        <div class="sidebar-panel-nav">
+          <div class="text-box-paddle text-soft">
+            <label>Nome azione soft key</label>
+          </div>
+        </div>
+        <div class="sidebar-panel-nav">
+          <div class="text-box-paddle text-soft">
+            <label>Estensione riscaldo 20 secondi</label>
+          </div>
+        </div>
+        <div class="sidebar-panel-nav">
+          <div class="text-box-paddle text-soft">
+            <toggle-button v-model="azione1"></toggle-button>
+            <label>Nome azione soft key</label>
+          </div>
+        </div>
+        <div class="sidebar-panel-nav">
+          <div class="text-box-paddle text-soft">
+            <toggle-button v-model="azione2"></toggle-button>
+            <label>Nome azione soft key</label>
+          </div>
+        </div>
+        <div class="sidebar-panel-nav">
+          <div class="text-box-paddle text-soft">
+            <label>Nome azione soft key</label>
+          </div>
+        </div>
+      </div>
     </div>
+    <!-- </transition> -->
+  </div>
 </template>
 <script lang="ts" src="./sidebar.ts" />
\ No newline at end of file