diff --git a/src/app/pages/dashboard/dashboard.module.ts b/src/app/pages/dashboard/dashboard.module.ts
index ede7fe79..b938dd67 100644
--- a/src/app/pages/dashboard/dashboard.module.ts
+++ b/src/app/pages/dashboard/dashboard.module.ts
@@ -44,6 +44,7 @@ import { FormsModule } from '@angular/forms';
     NbSelectModule,
     NbListModule,
     NbIconModule,
+    NbButtonModule,
     NgxEchartsModule,
   ],
   declarations: [
diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
index 25ae167a..c79e4c48 100644
--- a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
+++ b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
@@ -21,14 +21,19 @@
 
       <g class="toClip" [attr.clip-path]="'url(#sliderClip' + svgControlId +')'">
         <g class="toFilter" [attr.filter]="'url(#blurFilter' + svgControlId +')'">
-          <path [attr.d]="arc.d" [attr.fill]="arc.color" *ngFor="let arc of styles.gradArcs"></path>
+          <path [attr.d]="arc.d" [attr.fill]="off ? styles.nonSelectedArc.color : arc.color" *ngFor="let arc of styles.gradArcs"></path>
         </g>
         <!-- ngFor is a quirk fix for webkit rendering issues -->
         <path [attr.d]="styles.nonSelectedArc.d" [attr.fill]="styles.nonSelectedArc.color" *ngFor="let number of [0,1,2,3,4,5]"></path>
       </g>
 
-      <circle [attr.cx]="styles.thumbPosition.x" [attr.cy]="styles.thumbPosition.y" [attr.r]="pinRadius"
-              [attr.stroke-width]="thumbBorder / scaleFactor" [attr.fill]="thumbBg" [attr.stroke]="thumbBorderColor"></circle>
+      <circle [attr.cx]="styles.thumbPosition.x"
+              [attr.cy]="styles.thumbPosition.y"
+              [attr.r]="pinRadius"
+              [attr.stroke-width]="thumbBorder / scaleFactor"
+              [attr.fill]="off ? 'none' : thumbBg"
+              [attr.stroke]="off ? 'none' : thumbBorderColor">
+      </circle>
     </g>
   </svg>
 </div>
@@ -37,6 +42,6 @@
   <ng-content></ng-content>
 </div>
 
-<div class="power-bg" [ngClass]="{'off': off}" (click)="switchPower()">
-  <i class="nb-power-circled"></i>
-</div>
+<button nbButton appearance="ghost" class="power-bg" [class.on]="!off" (click)="switchPower()">
+  <nb-icon class="power-icon" icon="power-outline" pack="eva"></nb-icon>
+</button>
diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
index f1d456f3..0fa12c1a 100644
--- a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
+++ b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
@@ -50,23 +50,14 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    font-size: 3rem;
-    color: nb-theme(text-basic-color);
     border: nb-theme(divider-width) nb-theme(divider-style) nb-theme(divider-color);
 
-    &:hover {
-      background-color: nb-theme(color-basic-hover);
-      color: nb-theme(text-basic-color);
-    }
-
-    &:active {
-      background-color: nb-theme(color-basic-default);
-      box-shadow: none;
-    }
-
-    &.off:not(:hover) {
+    &.on {
       color: nb-theme(text-hint-color);
-      text-shadow: none;
     }
   }
+
+  .power-icon {
+    font-size: 3rem;
+  }
 }