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 cd5007f1..54749c5e 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
@@ -14,12 +14,12 @@
 
   .temperature-bg {
     position: absolute;
-    width: 94%;
-    height: 94%;
+    width: 84%;
+    height: 84%;
+    top: 14%;
+    left: 8%;
     background-color: lighten(nga-theme(layout-bg), 2%);
     border-radius: 50%;
-    top: 9%;
-    left: 3%;
     z-index: 1;
 
     display: flex;
@@ -34,7 +34,7 @@
     height: 5.25rem;
     background-color: nga-theme(card-bg);
     border-radius: 50%;
-    bottom: 0;
+    bottom: 5%;
     left: 50%;
     transform: translate(-50%, 50%);
     z-index: 2;
diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts
index 76e1bfeb..5fd46723 100644
--- a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts
+++ b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts
@@ -1,5 +1,6 @@
 import {
   Component, HostListener, ViewChild, ElementRef, Input, Output, EventEmitter, AfterViewInit, OnChanges,
+  ChangeDetectorRef,
 } from '@angular/core';
 
 const VIEW_BOX_SIZE = 300;
@@ -74,13 +75,14 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
   private isMouseDown = false;
   private init = false;
 
-  constructor() {
+  constructor(private changeDetectorRef: ChangeDetectorRef) {
     this.oldValue = this.value;
   }
 
   ngAfterViewInit(): void {
     this.invalidate();
     this.init = true;
+    this.changeDetectorRef.detectChanges();
   }
 
   ngOnChanges(): void {