diff --git a/src/components/ValueTabs.vue b/src/components/ValueTabs.vue
index f9531ada959bef7b67519ebfeab90e74e1aa03a9..38e7d1c275eca39212df270f178ef2c81ea6af48 100644
--- a/src/components/ValueTabs.vue
+++ b/src/components/ValueTabs.vue
@@ -19,10 +19,10 @@
             this.values = response.data
         })
       },
-      getClass(value) {
-        if (value > 5 && value <= 10) {
+      getClass(value, warn_min, good_min, good_max, warn_max) {
+        if (value > good_min && value <= good_max) {
           return 'list-group-item-success'; // Success class
-        } else if ((value >= 0 && value <= 5) || (value > 10 && value <= 15)) {
+        } else if ((value >= warn_min && value <= good_min) || (value > good_max && value <= warn_max)) {
           return 'list-group-item-warning'; // Warning class
         } else {
           return 'list-group-item-danger'; // Danger class
@@ -37,27 +37,27 @@
     <div>
       <div class="valueBox">
         Nitrogen (N):&nbsp;
-        <li class="list-group-item" v-bind:class="getClass(values[0].N)">{{values[0].N}} ppm</li>
+        <li class="list-group-item" v-bind:class="getClass(values[0].N, 0, 5, 10, 15)">{{values[0].N}} ppm</li>
       </div>
       <div class="valueBox">
         Phosphorus (P):&nbsp;
-        <li class="list-group-item" v-bind:class="getClass(values[1].P)">{{values[1].P}} ppm</li>
+        <li class="list-group-item" v-bind:class="getClass(values[1].P, 0, 5, 10, 15)">{{values[1].P}} ppm</li>
       </div>
       <div class="valueBox">
         Potassium (K):&nbsp;
-        <li class="list-group-item" v-bind:class="getClass(values[2].K)">{{values[2].K}} ppm</li>
+        <li class="list-group-item" v-bind:class="getClass(values[2].K, 0, 5, 10, 15)">{{values[2].K}} ppm</li>
       </div>
       <div class="valueBox">
         Temperature:&nbsp;
-        <li class="list-group-item" v-bind:class="getClass(values[3].T)">{{values[3].T}} °C</li>
+        <li class="list-group-item" v-bind:class="getClass(values[3].T, 0, 5, 10, 15)">{{values[3].T}} °C</li>
       </div>
       <div class="valueBox">
         Humidity:&nbsp;
-        <li class="list-group-item" v-bind:class="getClass(values[4].H)">{{values[4].H}} gm⁻³</li>
+        <li class="list-group-item" v-bind:class="getClass(values[4].H, 0, 5, 10, 15)">{{values[4].H}} gm⁻³</li>
       </div>
       <div class="valueBox">
         Moisture:&nbsp;
-        <li class="list-group-item" v-bind:class="getClass(values[5].M)">{{values[5].M}} °C</li>
+        <li class="list-group-item" v-bind:class="getClass(values[5].M, 0, 5, 10, 15)">{{values[5].M}} °C</li>
       </div>
     </div>
   </div>