diff --git a/src/app/pages/dashboard/temperature/temperature.component.html b/src/app/pages/dashboard/temperature/temperature.component.html
index 8f6c0e4b..566f8a06 100644
--- a/src/app/pages/dashboard/temperature/temperature.component.html
+++ b/src/app/pages/dashboard/temperature/temperature.component.html
@@ -21,16 +21,28 @@
 
       <nb-radio-group [(ngModel)]="temperatureMode" name="temperature-mode">
         <nb-radio value="cool">
-          <i class="nb-snowy-circled"></i>
+          <div class="radio-label">
+            <i class="nb-snowy-circled"></i>
+            <span>Cool</span>
+          </div>
         </nb-radio>
         <nb-radio value="warm">
-          <i class="nb-sunny-circled"></i>
+          <div class="radio-label">
+            <i class="nb-sunny-circled"></i>
+            <span>Warm</span>
+          </div>
         </nb-radio>
         <nb-radio value="heat">
-          <i class="nb-flame-circled"></i>
+          <div class="radio-label">
+            <i class="nb-flame-circled"></i>
+            <span>Heat</span>
+          </div>
         </nb-radio>
         <nb-radio value="fan">
-          <i class="nb-loop-circled"></i>
+          <div class="radio-label">
+            <i class="nb-loop-circled"></i>
+            <span>Fan</span>
+          </div>
         </nb-radio>
       </nb-radio-group>
     </nb-tab>
diff --git a/src/app/pages/dashboard/temperature/temperature.component.scss b/src/app/pages/dashboard/temperature/temperature.component.scss
index eb26cd67..b299869b 100644
--- a/src/app/pages/dashboard/temperature/temperature.component.scss
+++ b/src/app/pages/dashboard/temperature/temperature.component.scss
@@ -103,6 +103,13 @@
         padding: 0;
       }
 
+      .radio-label {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 21px;
+      }
+
       .text {
         border: 1px solid transparent;
         font-size: 2.5rem;