diff --git a/package.json b/package.json
index 3cc2c2d20d2f47f29c64b251acb79d1f644b5933..b4fcee4b739c2dcf370befe3b86936919406a8b9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vapi",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/src/App.vue b/src/App.vue
index ca262de0f8618a97c13677cdd36a173d19605442..f02a087ce47dfafc79c5dc4a1f87948f9cc5ef1d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -29,6 +29,7 @@ export default {
   --color-1-5: #2c3e5080;
   --color-2: #adefd1;
   --color-2-5: #adefd180;
+  --color-3: #476a74;
   /* units */
   --unit-1: 6px;
   --unit-2: calc(2 * var(--unit-1));
diff --git a/src/components/BtnColorModeSwitcher.vue b/src/components/BtnColorModeSwitcher.vue
index 172a6640af12f08aca1659f64e7f87f3ff5d88af..c8ff2a14c3255f13de13dfa90d03d46dd654d2a3 100644
--- a/src/components/BtnColorModeSwitcher.vue
+++ b/src/components/BtnColorModeSwitcher.vue
@@ -19,11 +19,12 @@ export default {
       const r = document.querySelector(':root');
       if (this.colorMode === 1) {
         // -- Light mode
-        r.style.setProperty('--color-0', '#eafbf3');
+        r.style.setProperty('--color-0', '#ffffff');
         r.style.setProperty('--color-1', '#d4f7e7');
         r.style.setProperty('--color-1-5', '#d4f7e780');
         r.style.setProperty('--color-2', '#1b2631');
         r.style.setProperty('--color-2-5', '#1b263180');
+        r.style.setProperty('--color-3', '#abdccb');
       } else {
         // -- Dark mode (default)
         r.style.setProperty('--color-0', '#1b2631');
@@ -31,6 +32,7 @@ export default {
         r.style.setProperty('--color-1-5', '#2c3e5080');
         r.style.setProperty('--color-2', '#adefd1');
         r.style.setProperty('--color-2-5', '#adefd180');
+        r.style.setProperty('--color-3', '#476a74');
       }
     },
   },
diff --git a/src/components/Onboard.vue b/src/components/Onboard.vue
index 5fad9d0bbd2af8a36501d1a9cac2d7313f59e469..b8328535d02d3809e78a392afacdb4b833f0d5a9 100644
--- a/src/components/Onboard.vue
+++ b/src/components/Onboard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="on-board">
-    <h1>VAPI <span>0.2.1</span></h1>
+    <h1>VAPI <span>0.2.2</span></h1>
     <p>A minimal api tester</p>
   </div>
 </template>
diff --git a/src/components/RouteBlock.vue b/src/components/RouteBlock.vue
index 30d4f40efb229c25eb9a16067c384fb20cb409d9..537ce4c28ad7d8a7065578b9cb54e4a140f5509f 100644
--- a/src/components/RouteBlock.vue
+++ b/src/components/RouteBlock.vue
@@ -11,7 +11,15 @@
     <input type="text" name="api-path" v-model="routePath">
     <label for="request-body">REQUEST BODY</label>
     <textarea v-model="routeBody" name="request-body"></textarea>
-    <label for="request-response">REQUEST RESPONSE</label>
+    <label for="request-response">REQUEST RESPONSE
+      <span v-if="codeResponse" class="response-status">
+        <div
+          class="dot-status"
+          :class="codeResponse > 300 ? 'dot-status-error' : '' ">
+        </div>
+        STATUS: {{ codeResponse }}
+      </span>
+    </label>
     <textarea v-model="apiResponse" name="request-response"></textarea>
     <button @click="fetchData">🏃🏽 RUN</button>
     <button @click="deleteRoute">💣 DELETE</button>
@@ -40,6 +48,7 @@ export default {
   data() {
     return {
       apiResponse: '',
+      codeResponse: undefined,
     };
   },
   computed: {
@@ -93,6 +102,14 @@ export default {
         .then((res) => {
           console.log('AXIOS RESPONSE: ', res);
           this.apiResponse = JSON.stringify(res);
+          this.codeResponse = res.status;
+        })
+        .catch((err) => {
+          console.log('AXIOS ERROR', err);
+          this.apiResponse = JSON.stringify(err);
+          if (err?.response?.status) {
+            this.codeResponse = err.response.status;
+          }
         });
     },
     deleteRoute() {
@@ -103,11 +120,55 @@ export default {
 </script>
 
 <style scoped>
+  label {
+    display: flex;
+  }
+
+  input,
+  textarea,
+  select {
+    border: none;
+  }
+
+  button {
+    border: none;
+    background: var(--color-3);
+    color: var(--color-2);
+  }
+
+  button:hover {
+    cursor: pointer;
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+    background-color: var(--color-0);
+  }
+
   .route-block {
     display: grid;
     gap: var(--unit-2);
     padding: var(--unit-2);
-    border: 1px solid var(--color-2-5);
+    border: none;
     background-color: var(--color-1);
   }
+
+  .response-status {
+    margin-left: var(--unit-4);
+    color: var(--color-2);
+    display: flex;
+    align-items: center;
+    margin-top: -6px;
+  }
+
+  .dot-status {
+    width: var(--unit-1);
+    height: var(--unit-1);
+    border: 1px solid var(--color-2);
+    border-radius: 50%;
+    background: chartreuse;
+    margin: 0 var(--unit-1);
+  }
+
+  .dot-status-error {
+    background: red;
+  }
 </style>