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 20acb44a..dca03847 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
@@ -26,7 +26,7 @@
       </g>
 
       <circle [attr.cx]="styles.thumbPosition.x" [attr.cy]="styles.thumbPosition.y" [attr.r]="pinRadius"
-              [attr.stroke-width]="1 / scaleFactor" fill="#FFFFFF" stroke="#666666"></circle>
+              [attr.stroke-width]="1 / scaleFactor" fill="#FFFFFF" stroke="none"></circle>
       <circle [attr.cx]="styles.thumbPosition.x" [attr.cy]="styles.thumbPosition.y" [attr.r]="pinDashRadius"
               [attr.stroke-width]="2 / scaleFactor" fill="none" stroke="#FFFFFF" stroke-linecap="round" stroke-dasharray="1, 6" *ngIf="pinDashRadius"></circle>
     </g>
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 54749c5e..6b1d4071 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,10 +14,10 @@
 
   .temperature-bg {
     position: absolute;
-    width: 84%;
-    height: 84%;
-    top: 14%;
-    left: 8%;
+    width: 88%;
+    height: 88%;
+    top: 13%;
+    left: 6%;
     background-color: lighten(nga-theme(layout-bg), 2%);
     border-radius: 50%;
     z-index: 1;
@@ -34,7 +34,7 @@
     height: 5.25rem;
     background-color: nga-theme(card-bg);
     border-radius: 50%;
-    bottom: 5%;
+    bottom: 2%;
     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 5d750032..ea2de6c8 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
@@ -17,7 +17,7 @@ export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
   @Input() fillColors: string|string[] = '#2ec6ff';
   @Input() disableArcColor: string = '#999999';
   @Input() bottomAngle: number = 90;
-  @Input() arcThickness: number = 20; // CSS pixels
+  @Input() arcThickness: number = 18; // CSS pixels
   @Input() thumbRadius: number = 15; // CSS pixels
   @Input() thumbDashRadius: number = null;
   @Input() maxLeap: number = 0.4;
diff --git a/src/app/pages/dashboard/temperature/temperature.component.html b/src/app/pages/dashboard/temperature/temperature.component.html
index ff515e6e..24c3512e 100644
--- a/src/app/pages/dashboard/temperature/temperature.component.html
+++ b/src/app/pages/dashboard/temperature/temperature.component.html
@@ -3,13 +3,13 @@
 
     <nga-tab tabTitle="Temperature">
 
-      <div class="temperature-container">
-        <ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event" [min]="12" [max]="30"
-                                 [arcThickness]="20" [thumbRadius]="15" [thumbDashRadius]="22" [bottomAngle]="90" [disableArcColor]="themeConfig.layoutBg"
-                                 [fillColors]="[themeConfig.colorInfo, themeConfig.colorSuccess, themeConfig.colorWarning]">
+      <div class="slider-container">
+        <ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
+                                 [min]="12" [max]="30" [disableArcColor]="themeConfig.layoutBg"
+                                 [fillColors]="['#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59']">
 
-          <div class="temperature"  [ngClass]="{ 'off': temperatureOff }">
-            <div class="value">
+          <div class="slider-value-container"  [ngClass]="{ 'off': temperatureOff }">
+            <div class="value temperature">
               {{ temperatureOff ? '--' : (temperature | ngxRound) }}
             </div>
             <div class="desc">
@@ -38,21 +38,34 @@
 
     <nga-tab tabTitle="Humidity">
 
-      <span>Humidity placeholder</span>
+      <div class="slider-container">
+        <ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event"
+                                 [min]="0" [max]="100" [disableArcColor]="themeConfig.layoutBg"
+                                 [fillColors]="['#fff024', '#7bff24', '#31ffad', '#2ec7fe']">
 
-      <ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event" [min]="0" [max]="100"
-           [arcThickness]="20" [thumbRadius]="15" [bottomAngle]="90" [disableArcColor]="themeConfig.layoutBg"
-           [fillColors]="[themeConfig.colorInfo, themeConfig.colorSuccess, themeConfig.colorWarning]">
+          <div class="slider-value-container"  [ngClass]="{ 'off': humidityOff }">
+            <div class="value humidity">
+              {{ humidityOff ? '--' : (humidity | ngxRound) }}
+            </div>
+          </div>
+        </ngx-temperature-dragger>
+      </div>
 
-        <div class="temperature"  [ngClass]="{ 'off': humidityOff }">
-          <div class="value">
-            {{ humidityOff ? '--' : (humidity | ngxRound) }}
-          </div>
-          <div class="desc">
-            Celsius
-          </div>
-        </div>
-      </ngx-temperature-dragger>
+      <div [(ngModel)]="humidityMode" ngbRadioGroup class="btn-group btn-group-block btn-group-divided-hidden"
+           data-toggle="buttons">
+        <label class="btn btn-icon">
+          <input type="radio" value="cool"/><i class="ion-ios-snowy"></i>
+        </label>
+        <label class="btn btn-icon">
+          <input type="radio" value="warm"/><i class="ion-ios-sunny-outline"></i>
+        </label>
+        <label class="btn btn-icon">
+          <input type="radio" value="heat"/><i class="ion-ios-flame-outline"></i>
+        </label>
+        <label class="btn btn-icon">
+          <input type="radio" value="fan"/><i class="ion-ios-loop"></i>
+        </label>
+      </div>
     </nga-tab>
   </nga-tabset>
 </nga-card>
diff --git a/src/app/pages/dashboard/temperature/temperature.component.scss b/src/app/pages/dashboard/temperature/temperature.component.scss
index 7a3ce75a..c96a94ed 100644
--- a/src/app/pages/dashboard/temperature/temperature.component.scss
+++ b/src/app/pages/dashboard/temperature/temperature.component.scss
@@ -20,7 +20,7 @@
     height: 100%;
   }
 
-  .temperature-container {
+  .slider-container {
     display: flex;
     flex: 1;
     justify-content: center;
@@ -28,11 +28,11 @@
   }
 
   ngx-temperature-dragger {
-    margin-top: -3.5rem;
+    margin-top: -1.5rem;
     width: 80%;
   }
 
-  .temperature {
+  .slider-value-container {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -44,12 +44,22 @@
       font-size: 4rem;
       font-weight: nga-theme(font-weight-bolder);
 
-      &::before {
+      &.temperature::before {
         position: absolute;
         content: '°';
         top: 0;
         right: -1.25rem;
       }
+
+      &.humidity::before {
+        position: absolute;
+        content: '%';
+        bottom: 0.5rem;
+        right: -2.5rem;
+        color: nga-theme(color-fg);
+        font-size: 2.5rem;
+        font-weight: nga-theme(font-weight-light);
+      }
     }
 
     .desc {
diff --git a/src/app/pages/dashboard/temperature/temperature.component.ts b/src/app/pages/dashboard/temperature/temperature.component.ts
index b056c1fa..6a611c10 100644
--- a/src/app/pages/dashboard/temperature/temperature.component.ts
+++ b/src/app/pages/dashboard/temperature/temperature.component.ts
@@ -8,13 +8,13 @@ import { NgaThemeService } from '@akveo/nga-theme';
 })
 export class TemperatureComponent {
 
-  temperature: number = 23;
+  temperature: number = 28;
   temperatureOff: boolean = false;
   temperatureMode = 'cool';
 
-  humidity: number = 23;
+  humidity: number = 87;
   humidityOff: boolean = false;
-  humidityMode = 'auto';
+  humidityMode = 'heat';
 
   themeConfig: any = {};