diff --git a/src/app/@theme/styles/global.scss b/src/app/@theme/styles/global.scss
index 000d4ec5..3c6c3aa4 100644
--- a/src/app/@theme/styles/global.scss
+++ b/src/app/@theme/styles/global.scss
@@ -8,3 +8,8 @@
     padding-top: 0;
   }
 }
+
+//global styles for thw whole application
+[class^='col-'] {
+  padding: 0 0.75rem;
+}
diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html
index dc3813e6..5e12e287 100644
--- a/src/app/pages/dashboard/dashboard.component.html
+++ b/src/app/pages/dashboard/dashboard.component.html
@@ -3,19 +3,7 @@
 
 <div class="row">
   <div class="col-lg-3">
-    <nga-card size="xmedium">
-      <nga-tabset fullWidth>
-        <nga-tab tabTitle="Temperature">
-          <ngx-temperature-dragger [arcThickness]="15" [knobRadius]="15" [(value)]="currentValue" [bottomAngle]="90"
-                               disableArcColor="#2c2961"
-                               [fillColors]="['#2ec6ff', '#31ffad', '#7bff24', '#fff024', '#ff6c00']">
-          </ngx-temperature-dragger>
-        </nga-tab>
-        <nga-tab tabTitle="Humidity">
-          <span>Content #2</span>
-        </nga-tab>
-      </nga-tabset>
-    </nga-card>
+    <ngx-temperature></ngx-temperature>
   </div>
 
   <div class="col-lg-9">
@@ -29,14 +17,7 @@
 
 <div class="row">
   <div class="col-lg-9">
-    <nga-card size="xmedium">
-      <nga-card-header>
-        Room Management
-      </nga-card-header>
-      <nga-card-body>
-        <ngx-room-selector></ngx-room-selector>
-      </nga-card-body>
-    </nga-card>
+    <ngx-rooms></ngx-rooms>
   </div>
 
   <div class="col-lg-3">
diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts
index 3ddde498..a4539cbc 100644
--- a/src/app/pages/dashboard/dashboard.component.ts
+++ b/src/app/pages/dashboard/dashboard.component.ts
@@ -6,5 +6,4 @@ import { Component } from '@angular/core';
   templateUrl: './dashboard.component.html',
 })
 export class DashboardComponent {
-  currentValue = 0.5;
 }
diff --git a/src/app/pages/dashboard/dashboard.module.ts b/src/app/pages/dashboard/dashboard.module.ts
index b778c42a..e444b7d4 100644
--- a/src/app/pages/dashboard/dashboard.module.ts
+++ b/src/app/pages/dashboard/dashboard.module.ts
@@ -4,9 +4,11 @@ import { NgaTabsetModule, NgaUserModule } from '@akveo/nga-theme';
 import { SharedModule } from '../../shared.module';
 import { DashboardComponent } from './dashboard.component';
 import { StatusCardsComponent } from './status-cards/status-cards.component';
-import { TemperatureDraggerComponent } from './temperature-dragger/temperature-dragger.component';
 import { ContactsComponent } from './contacts/contacts.component';
-import { RoomSelectorComponent } from './room-selector/room-selector.component';
+import { RoomsComponent } from './rooms/rooms.component';
+import { RoomSelectorComponent } from './rooms/room-selector/room-selector.component';
+import { TemperatureComponent } from './temperature/temperature.component';
+import { TemperatureDraggerComponent } from './temperature/temperature-dragger/temperature-dragger.component';
 
 @NgModule({
   imports: [
@@ -20,6 +22,8 @@ import { RoomSelectorComponent } from './room-selector/room-selector.component';
     TemperatureDraggerComponent,
     ContactsComponent,
     RoomSelectorComponent,
+    TemperatureComponent,
+    RoomsComponent,
   ],
 })
 export class DashboardModule { }
diff --git a/src/app/pages/dashboard/room-selector/room-selector.component.html b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.html
similarity index 100%
rename from src/app/pages/dashboard/room-selector/room-selector.component.html
rename to src/app/pages/dashboard/rooms/room-selector/room-selector.component.html
diff --git a/src/app/pages/dashboard/room-selector/room-selector.component.scss b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss
similarity index 98%
rename from src/app/pages/dashboard/room-selector/room-selector.component.scss
rename to src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss
index 08faadd3..90878d1c 100644
--- a/src/app/pages/dashboard/room-selector/room-selector.component.scss
+++ b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss
@@ -44,6 +44,7 @@ svg {
 .room-text {
   cursor: pointer;
   user-select: none;
+  fill: #fff;
 }
 
 .selected-room {
diff --git a/src/app/pages/dashboard/room-selector/room-selector.component.ts b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts
similarity index 100%
rename from src/app/pages/dashboard/room-selector/room-selector.component.ts
rename to src/app/pages/dashboard/rooms/room-selector/room-selector.component.ts
diff --git a/src/app/pages/dashboard/rooms/rooms.component.scss b/src/app/pages/dashboard/rooms/rooms.component.scss
new file mode 100644
index 00000000..8ec32631
--- /dev/null
+++ b/src/app/pages/dashboard/rooms/rooms.component.scss
@@ -0,0 +1,9 @@
+@import '../../../@theme/styles/variables';
+@import '~@akveo/nga-theme/styles/global/bootstrap/hero-buttons';
+
+@include nga-install-component() {
+
+  ngx-room-selector {
+    width: 65%;
+  }
+}
diff --git a/src/app/pages/dashboard/rooms/rooms.component.ts b/src/app/pages/dashboard/rooms/rooms.component.ts
new file mode 100644
index 00000000..9e28351d
--- /dev/null
+++ b/src/app/pages/dashboard/rooms/rooms.component.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-rooms',
+  styleUrls: ['./rooms.component.scss'],
+  template: `
+    <nga-card size="xmedium">
+      <nga-card-header>
+        Room Management
+      </nga-card-header>
+      <nga-card-body>
+        <ngx-room-selector></ngx-room-selector>
+      </nga-card-body>
+    </nga-card>
+  `,
+})
+export class RoomsComponent {
+}
diff --git a/src/app/pages/dashboard/status-cards/status-cards.component.ts b/src/app/pages/dashboard/status-cards/status-cards.component.ts
index 8cf0a500..b49805fd 100644
--- a/src/app/pages/dashboard/status-cards/status-cards.component.ts
+++ b/src/app/pages/dashboard/status-cards/status-cards.component.ts
@@ -23,8 +23,8 @@ import { Component } from '@angular/core';
 export class StatusCardsComponent {
   statusCards = [
     { title: 'Light', on: true, type: 'primary', icon: 'ion-ios-game-controller-b-outline' },
-    { title: 'RollerShades', on: false, type: 'success', icon: 'ion-ios-game-controller-b-outline' },
+    { title: 'RollerShades', on: true, type: 'success', icon: 'ion-ios-game-controller-b-outline' },
     { title: 'Wireless Audio', on: true, type: 'info', icon: 'ion-ios-game-controller-b-outline' },
-    { title: 'Coffee Maker', on: false, type: 'warning', icon: 'ion-ios-game-controller-b-outline' },
+    { title: 'Coffee Maker', on: true, type: 'warning', icon: 'ion-ios-game-controller-b-outline' },
   ];
 }
diff --git a/src/app/pages/dashboard/temperature-dragger/temperature-dragger.component.html b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
similarity index 100%
rename from src/app/pages/dashboard/temperature-dragger/temperature-dragger.component.html
rename to src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.html
diff --git a/src/app/pages/dashboard/temperature-dragger/temperature-dragger.component.scss b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
similarity index 100%
rename from src/app/pages/dashboard/temperature-dragger/temperature-dragger.component.scss
rename to src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
diff --git a/src/app/pages/dashboard/temperature-dragger/temperature-dragger.component.ts b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts
similarity index 100%
rename from src/app/pages/dashboard/temperature-dragger/temperature-dragger.component.ts
rename to src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts
diff --git a/src/app/pages/dashboard/temperature/temperature.component.scss b/src/app/pages/dashboard/temperature/temperature.component.scss
new file mode 100644
index 00000000..f55b2d6e
--- /dev/null
+++ b/src/app/pages/dashboard/temperature/temperature.component.scss
@@ -0,0 +1,14 @@
+@import '../../../@theme/styles/variables';
+@import '~@akveo/nga-theme/styles/global/bootstrap/hero-buttons';
+
+@include nga-install-component() {
+
+  nga-tab.content-active {
+    display: flex;
+    justify-content: center;
+  }
+
+  ngx-temperature-dragger {
+    width: 80%;
+  }
+}
diff --git a/src/app/pages/dashboard/temperature/temperature.component.ts b/src/app/pages/dashboard/temperature/temperature.component.ts
new file mode 100644
index 00000000..4b25ac9f
--- /dev/null
+++ b/src/app/pages/dashboard/temperature/temperature.component.ts
@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-temperature',
+  styleUrls: ['./temperature.component.scss'],
+  template: `
+    <nga-card size="xmedium">
+      <nga-tabset fullWidth>
+        <nga-tab tabTitle="Temperature">
+          <ngx-temperature-dragger [(value)]="temperature" [arcThickness]="20" [knobRadius]="15" [bottomAngle]="90"
+             disableArcColor="#2c2961" [fillColors]="['#2ec6ff', '#31ffad', '#7bff24', '#EAE75F']">
+          </ngx-temperature-dragger>
+        </nga-tab>
+        <nga-tab tabTitle="Humidity">
+          <span>Content #2</span>
+        </nga-tab>
+      </nga-tabset>
+    </nga-card>
+  `,
+})
+export class TemperatureComponent {
+  temperature = 0.5;
+}