diff --git a/app.py b/app.py
index a9d0bd23c094f73f1d9d9558914fb54c25bea96d..7f6bac956c1b302d511e15122235d573ae14d33d 100644
--- a/app.py
+++ b/app.py
@@ -4,15 +4,18 @@ from flask_cors import CORS
 app = Flask(__name__, static_folder="./dist/assets", template_folder="./dist")
 CORS(app)
 
+
 @app.route("/")
 def main():
     return render_template("index.html")
 
+
 @app.route("/values")
 def values():
     values = [{"N": 10}, {"P": 11}, {"K": 12}, {"T": 5}, {"H": 6}, {"M": 7}]
     return jsonify(values)
 
+
 @app.route('/favicon.ico')
 def favicon():
     return send_from_directory(app.template_folder,
diff --git a/index.html b/index.html
index 99f583aa2b835f6885f2c233a0e1f6d395fa42af..c6c273042ea8548696e9c233e88fd30a2b24df91 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
   <head>
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
diff --git a/package-lock.json b/package-lock.json
index 287c55d18c4f6f0fba5fac96d631c5fd9b33f8fb..f3e54f4915b9426abc34c39984be1006481eec7d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.6.2",
+        "bootstrap": "^5.3.2",
         "vue": "^3.3.4"
       },
       "devDependencies": {
@@ -384,6 +385,16 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.4.1.tgz",
@@ -514,6 +525,24 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
+      "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
diff --git a/package.json b/package.json
index ad3c6537ef78d2c8f833efa8baeb27ed35ed1fd8..2407abc91b69daedee390ec7e82c7c8541e6d1bf 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "axios": "^1.6.2",
+    "bootstrap": "^5.3.2",
     "vue": "^3.3.4"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index b920881dfcd8ba28b2e3392527c66f195010c67d..c0e49b96a51b70ce45ec68e6d54f70f0bf6c0493 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,13 @@
 <script setup>
-import ValueTabs from './components/ValueTabs.vue'
+import ValueTabs from "./components/ValueTabs.vue"
 </script>
 
 <template>
   <header>
     <img alt="Vue logo" class="logo" src="./assets/NanoPatch.png" />
-    <div class="greetings">
+    <!-- <div class="greetings">
       <h1 class="green">NanoPatch</h1>
-    </div>
+    </div> -->
     <!-- <div class="wrapper">
     </div> -->
   </header>
diff --git a/src/components/ValueTabs.vue b/src/components/ValueTabs.vue
index 1bd7e556cd6d5827bf1caab342e3b0c9895d1981..04e004e9d220621745d01d71d8fc465276b80853 100644
--- a/src/components/ValueTabs.vue
+++ b/src/components/ValueTabs.vue
@@ -1,35 +1,71 @@
-<script setup>
-  const N = 0, P = 0, K = 0, T = 0, H = 0, M = 0;
-</script>
-
 <script>
-  import axios from 'axios'
+import axios from "axios"
 
-  export default {
-    mounted() {
+export default {
+  data() {
+    return {
+      values: { 0: { N: 0 }, 1: { P: 0 }, 2: { K: 0 }, 3: { T: 0 }, 4: { H: 0 }, 5: { M: 0 } },
+    }
+  },
+  mounted() {
+    this.getValues();
+    setInterval(this.getValues, 5000);
+  },
+  methods: {
+    getValues() {
       axios
         .get('http://127.0.0.1:5000/values')
         .then((response) => {
-          console.log(response.data);
+          this.values = response.data
         })
-    }
-  }
+    },
+    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 >= 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
+      }
+    },
+  },
+}
 </script>
 
 <template>
-  <div>
-    <h1>Nitrogen (N): {{N}} ppm</h1>
-    <h1>Phosphorus (P): {{P}} ppm</h1>
-    <h1>Potassium (K): {{K}} ppm</h1>
-  </div>
-
-  <div>
-    <h1>Temperature: {{T}}°C</h1>
-    <h1>Humidity: {{H}} gm⁻³</h1>
-    <h1>Moisture: {{M}}°C</h1>
+  <div style="font-size: 40px; width: fit-content;">
+    <div>
+      <div class="valueBox">
+        Nitrogen (N):&nbsp;
+        <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, 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, 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, 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, 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, 0, 5, 10, 15)">{{ values[5].M }} °C</li>
+      </div>
+    </div>
   </div>
 </template>
 
 <style scoped>
-
+.valueBox {
+  display: flex;
+  padding-bottom: 2%;
+}
 </style>
diff --git a/src/main.js b/src/main.js
index 0ac3a5ff0ceea45d1a9066b2df477773977a338b..0406742d8ac8f7e13b423409488b2321d92e8850 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,5 @@
 import './assets/main.css'
+import "bootstrap/dist/css/bootstrap.min.css";
 
 import { createApp } from 'vue'
 import App from './App.vue'