diff --git a/app.py b/app.py
index a48e8d39d866fbbac73dfde665e075cac7755eb1..4fa320faae384ff0682a28efc4cc8a2d675fb969 100644
--- a/app.py
+++ b/app.py
@@ -16,18 +16,19 @@ def main():
 def values():
     return read_latest_entry_as_json()
 
+
 @app.route("/past-values")
 def pastValues():
     past_values = {"npkData": {
         "nitrogen": [120, 118, 119, 121, 120, 122, 120],
         "phosphorus": [110, 112, 111, 113, 110, 112, 111],
         "potassium": [115, 116, 117, 115, 114, 116, 117]
-      },
-      "thmData": {
+    },
+        "thmData": {
         "temperature": [18, 19, 20, 18, 17, 18, 19],
         "humidity": [50, 52, 53, 50, 49, 51, 52],
         "moisture": [40, 42, 45, 43, 41, 40, 44]
-      }}
+    }}
     return jsonify(past_values)
 
 
diff --git a/src/App.vue b/src/App.vue
index 81ba76d1c1e9d991a765799fa693572980068e9f..b57c88c9599d3b10cdd0238939d31fc5ba4fb5c9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -59,8 +59,9 @@ export default {
       </div>
     </div>
     <div class="bottom-section">
-      <MultiLineChart alt="NPK data line graph" v-if="npkData" :chart-data="npkData" :x-axis-data=pastSevenDaysData />
-      <MultiAxisChart alt="Temperature Humidity Moisture data line multi-axis graph" v-if="thmData" :chart-data="thmData" :x-axis-data=pastSevenDaysData />
+      <MultiLineChart aria-label="NPK data line graph" v-if="npkData" :chart-data="npkData" :x-axis-data=pastSevenDaysData />
+      <MultiAxisChart aria-label="Temperature Humidity Moisture data line multi-axis graph" v-if="thmData" :chart-data="thmData"
+        :x-axis-data=pastSevenDaysData />
     </div>
   </div>
 </template>
@@ -101,23 +102,26 @@ export default {
   justify-content: center;
   align-items: center;
   flex: 0.5;
-  gap: 10px; /* Adds a gap between the Graph components */
+  gap: 10px;
+  /* Adds a gap between the Graph components */
 }
 
 /* Responsive adjustments for mobile screens */
 @media (max-width: 768px) {
   .bottom-section {
-    flex-direction: column; /* Stack the Graph components */
-    gap: 0; /* Removes the gap when stacked vertically */
+    flex-direction: column;
+    /* Stack the Graph components */
+    gap: 0;
+    /* Removes the gap when stacked vertically */
   }
 
   .logo-container img {
-    width: 50vw; /* Adjust logo size for smaller screens */
+    width: 50vw;
+    /* Adjust logo size for smaller screens */
   }
 
   .value-tabs-container {
     right: 10%;
     width: 80%;
   }
-}
-</style>
+}</style>
diff --git a/src/components/ValueTabs.vue b/src/components/ValueTabs.vue
index 2b4f330be3e13a7af4984c3c7ce405d5e3768818..7dbf367691480e436afdda97d8165aceb76b5802 100644
--- a/src/components/ValueTabs.vue
+++ b/src/components/ValueTabs.vue
@@ -1,13 +1,20 @@
 <script>
-import axios from "axios"
+import axios from 'axios'
+import * as bootstrap from 'bootstrap/dist/js/bootstrap'
 
 export default {
   data() {
     return {
       values: { 0: { N: 0 }, 1: { P: 0 }, 2: { K: 0 }, 3: { T: 0 }, 4: { H: 0 }, 5: { M: 0 } },
+      rangeNPK: [80, 100, 150, 170],
+      rangeT: [12, 15, 22, 25],
+      rangeHM: [30, 40, 60, 70],
     }
   },
   mounted() {
+    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
+
     this.getValues();
     setInterval(this.getValues, 5000);
   },
@@ -37,34 +44,58 @@ export default {
     <div>
       <div class="valueBox">
         Nitrogen (N):&nbsp;
-        <li class="list-group-item" v-bind:class="getClass(values[0].N, 80, 100, 150, 170)">{{ values[0].N }} ppm</li>
+        <li class="list-group-item"
+          v-bind:class="getClass(values[0].N, this.rangeNPK[0], this.rangeNPK[1], this.rangeNPK[2], this.rangeNPK[3])"
+          data-bs-toggle="tooltip"
+          :data-bs-title="'Ideal conditions: ' + this.rangeNPK[1] + '-' + this.rangeNPK[2] + ' ppm'">{{
+            values[0].N }} ppm</li>
       </div>
       <div class="valueBox">
         Phosphorus (P):&nbsp;
-        <li class="list-group-item" v-bind:class="getClass(values[1].P, 80, 100, 150, 170)">{{ values[1].P }} ppm</li>
+        <li class="list-group-item"
+          v-bind:class="getClass(values[1].P, this.rangeNPK[0], this.rangeNPK[1], this.rangeNPK[2], this.rangeNPK[3])"
+          data-bs-toggle="tooltip"
+          :data-bs-title="'Ideal conditions: ' + this.rangeNPK[1] + '-' + this.rangeNPK[2] + ' ppm'">{{
+            values[1].P }} ppm</li>
       </div>
       <div class="valueBox">
         Potassium (K):&nbsp;
-        <li class="list-group-item" v-bind:class="getClass(values[2].K, 80, 100, 150, 170)">{{ values[2].K }} ppm</li>
+        <li class="list-group-item"
+          v-bind:class="getClass(values[2].K, this.rangeNPK[0], this.rangeNPK[1], this.rangeNPK[2], this.rangeNPK[3])"
+          data-bs-toggle="tooltip"
+          :data-bs-title="'Ideal conditions: ' + this.rangeNPK[1] + '-' + this.rangeNPK[2] + ' ppm'">{{
+            values[2].K }} ppm</li>
       </div>
       <div class="valueBox">
         Temperature:&nbsp;
-        <li class="list-group-item" v-bind:class="getClass(values[3].T, 12, 15, 22, 25)">{{ values[3].T }} °C</li>
+        <li class="list-group-item"
+          v-bind:class="getClass(values[3].T, this.rangeT[0], this.rangeT[1], this.rangeT[2], this.rangeT[3])"
+          data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions: ' + this.rangeT[1] + '-' + this.rangeT[2] + ' °C'">
+          {{
+            values[3].T }} °C</li>
       </div>
       <div class="valueBox">
         Humidity:&nbsp;
-        <li class="list-group-item" v-bind:class="getClass(values[4].H, 30, 40, 60, 70)">{{ values[4].H }} %</li>
+        <li class="list-group-item"
+          v-bind:class="getClass(values[4].H, this.rangeHM[0], this.rangeHM[1], this.rangeHM[2], this.rangeHM[3])"
+          data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions: ' + this.rangeHM[1] + '-' + this.rangeHM[2] + ' %'">
+          {{
+            values[4].H }} %</li>
       </div>
       <div class="valueBox">
         Moisture:&nbsp;
-        <li class="list-group-item" v-bind:class="getClass(values[5].M, 30, 40, 60, 70)">{{ values[5].M }} %</li>
+        <li class="list-group-item"
+          v-bind:class="getClass(values[5].M, this.rangeHM[0], this.rangeHM[1], this.rangeHM[2], this.rangeHM[3])"
+          data-bs-toggle="tooltip" :data-bs-title="'Ideal conditions: ' + this.rangeHM[1] + '-' + this.rangeHM[2] + ' %'">
+          {{
+            values[5].M }} %</li>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.allBoxes{
+.allBoxes {
   /* font-size: 40px; */
   font-size: 2vw;
   width: fit-content;
@@ -78,8 +109,7 @@ export default {
 
 /* Responsive adjustments for mobile screens */
 @media (max-width: 768px) {
-  .allBoxes{
+  .allBoxes {
     font-size: 1.6vh;
   }
-}
-</style>
+}</style>