diff --git a/package.json b/package.json
index 4f49fe734117304b390aff48e7edddb3f3be85f1..aabd2e98bc1d0b58aca536b32da443793ee695ee 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vapi",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/src/App.vue b/src/App.vue
index f02a087ce47dfafc79c5dc4a1f87948f9cc5ef1d..b84e1e69ebd18adf0a165891dc79f1b946e43e4a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -112,6 +112,11 @@ body {
     right: var(--unit-2);
   }
 
+  .text-background {
+    background: var(--color-1-5);
+    padding: var(--unit-1);
+  }
+
     @media (max-width: 700px) {
       body {
         margin: var(--unit-2);
diff --git a/src/components/Onboard.vue b/src/components/Onboard.vue
index 444cd31988477fcdfb935da1aaf1ef3d8472eb85..2f1aab8613e50fe62861ac7f8491005c16940726 100644
--- a/src/components/Onboard.vue
+++ b/src/components/Onboard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="on-board">
-    <h1>VAPI <span>0.3.2</span></h1>
+    <h1>VAPI <span>0.3.3</span></h1>
     <p>A minimal api tester</p>
   </div>
 </template>
diff --git a/src/components/RouteBlock.vue b/src/components/RouteBlock.vue
index eebcd44f0ad9c622711b9dc13530e0861478cb90..4fab4edfa76227d23e8359baa28b3d0c0dfd98a6 100644
--- a/src/components/RouteBlock.vue
+++ b/src/components/RouteBlock.vue
@@ -13,15 +13,15 @@
     <label for="request-body">REQUEST BODY</label>
     <textarea v-model="routeBody" name="request-body"></textarea>
     <label for="request-response">REQUEST RESPONSE
-      <span v-if="codeResponse" class="response-status">
+      <span v-if="apiResponseStatus" class="response-status">
         <div
           class="dot-status"
-          :class="codeResponse > 300 ? 'dot-status-error' : '' ">
+          :class="apiResponseStatus > 300 ? 'dot-status-error' : '' ">
         </div>
-        STATUS: {{ codeResponse }}
+        STATUS: {{ apiResponseStatus }}
       </span>
     </label>
-    <textarea v-model="apiResponse" name="request-response"></textarea>
+    <textarea v-model="apiResponseAsText" name="request-response"></textarea>
     <button @click="fetchData">🏃🏽 RUN</button>
     <button @click="deleteRoute">💣 DELETE</button>
   </div>
@@ -41,7 +41,7 @@ export default {
   },
   data() {
     return {
-      apiResponse: '',
+      // apiResponse: '',
       codeResponse: undefined,
     };
   },
@@ -89,6 +89,36 @@ export default {
         this.$store.commit('UPDATE_ROUTE_BODY', data);
       },
     },
+    apiResponse: {
+      get() {
+        const key = this.$store.getters.displayOnlyKey;
+        console.log('displayOnlyKey ===> ', key);
+        if (key && this.$store.getters.routeData(this.idx).apiResponse[key]) {
+          return this.$store.getters.routeData(this.idx).apiResponse[key];
+        }
+        return this.$store.getters.routeData(this.idx).apiResponse;
+      },
+      set(value) {
+        const data = {
+          idx: this.idx,
+          apiResponse: value,
+        };
+
+        this.$store.commit('UPDATE_ROUTE_RESPONSE', data);
+      },
+    },
+    apiResponseStatus() {
+      console.log('STATUS: ', this.$store.getters.routeDataStatus(this.idx));
+      return this.$store.getters.routeDataStatus(this.idx);
+    },
+    apiResponseAsText() {
+      if (this.apiResponse === '') { return null; }
+      console.log('this.$store.getters.isBeautify ===> ', this.$store.getters.beautifyResponse);
+      if (this.$store.getters.beautifyResponse) {
+        return JSON.stringify(this.apiResponse, undefined, 2);
+      }
+      return JSON.stringify(this.apiResponse);
+    },
   },
   methods: {
     fetchData() {
@@ -99,7 +129,7 @@ export default {
       axios[this.routeVerb](fullPath, h, b)
         .then((res) => {
           console.log('AXIOS RESPONSE: ', res);
-          this.apiResponse = JSON.stringify(res);
+          this.apiResponse = res;
           this.codeResponse = res.status;
         })
         .catch((err) => {
diff --git a/src/components/UserSettings.vue b/src/components/UserSettings.vue
new file mode 100644
index 0000000000000000000000000000000000000000..43817f699851647c26d196b1df6a1dff57172b39
--- /dev/null
+++ b/src/components/UserSettings.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="user-settings">
+    <h3 class="text-background">User settings (WIP)</h3>
+    <label for="displayOnlyKey">DISPLAY ONLY KEY</label>
+    <input type="text" name="displayOnlyKey" v-model="displayOnlyKey">
+
+    <label for="beautify" class="labels-settings">BEAUTIFY RESPONSE</label>
+    <input type="checkbox" name="beautify" v-model="beautifyResponse">
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserSettings',
+  computed: {
+    beautifyResponse: {
+      get() {
+        return this.$store.getters.beautifyResponse;
+      },
+      set(value) {
+        this.$store.commit('UPDATE_BEAUTIFY_RESPONSE', value);
+      },
+    },
+    displayOnlyKey: {
+      get() {
+        return this.$store.getters.displayOnlyKey;
+      },
+      set(value) {
+        this.$store.commit('UPDATE_DISPLAY_ONLY_KEY', value);
+      },
+    },
+  },
+};
+</script>
+
+<style scoped>
+  .user-settings {
+    display: grid;
+    gap: var(--unit-2);
+  }
+
+  label {
+    display: flex;
+  }
+
+  .element-setting {
+    display: grid;
+    grid-template-rows: 48px;
+  }
+</style>
diff --git a/src/store/index.js b/src/store/index.js
index 6970a9fe53a624be50c6f3bd86384d59649e93f8..2154d5a93603592c9f6c37661502efd26214dd14 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -3,6 +3,7 @@ import Vuex from 'vuex';
 import createPersistedState from 'vuex-persistedstate';
 import routeCollection from './routeCollection';
 import apiMain from './apiMain';
+import userSettings from './userSettings';
 
 Vue.use(Vuex);
 
@@ -17,5 +18,6 @@ export default new Vuex.Store({
   modules: {
     apiMain,
     routeCollection,
+    userSettings,
   },
 });
diff --git a/src/store/routeCollection.js b/src/store/routeCollection.js
index 140996931a7783f86c8b8b2ddb61c449a2860500..4b65f304405afee2d56dadb99d229a15b2cad396 100644
--- a/src/store/routeCollection.js
+++ b/src/store/routeCollection.js
@@ -9,6 +9,7 @@ export const INITIAL_STATE = {
     routeVerb: 'get',
     routePath: 'people/2/',
     routeBody: '{\n}',
+    apiResponse: '',
   },
 };
 
@@ -17,6 +18,7 @@ export default {
   getters: {
     routeCollection: (state) => state.routeCollection,
     routeData: (state) => (idx) => state.routeCollection[idx],
+    routeDataStatus: (state) => (idx) => state.routeCollection[idx].apiResponse.status,
     defaultRoute: (state) => state.defaultRoute,
   },
   mutations: {
@@ -48,6 +50,11 @@ export default {
       payload.routeBody = data.routeBody;
       Vue.set(state.routeCollection, data.idx, payload);
     },
+    UPDATE_ROUTE_RESPONSE(state, data) {
+      const payload = state.routeCollection[data.idx];
+      payload.apiResponse = data.apiResponse;
+      Vue.set(state.routeCollection, data.idx, payload);
+    },
     SET_COLLECTION_FROM_FILE(state, data) {
       state.routeCollection = data;
     },
diff --git a/src/store/userSettings.js b/src/store/userSettings.js
new file mode 100644
index 0000000000000000000000000000000000000000..d34d51991e2c8586d511cddd962990090c9e2791
--- /dev/null
+++ b/src/store/userSettings.js
@@ -0,0 +1,27 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+export const INITIAL_STATE = {
+  beautifyResponse: false,
+  displayOnlyKey: '',
+};
+
+export default {
+  state: () => ({ ...INITIAL_STATE }),
+  getters: {
+    beautifyResponse: (state) => state.beautifyResponse,
+    displayOnlyKey: (state) => state.displayOnlyKey,
+  },
+  mutations: {
+    UPDATE_BEAUTIFY_RESPONSE(state, isBeautify) {
+      state.beautifyResponse = isBeautify;
+    },
+    UPDATE_DISPLAY_ONLY_KEY(state, key) {
+      state.displayOnlyKey = key;
+    },
+  },
+  actions: {
+  },
+};
diff --git a/src/views/About.vue b/src/views/About.vue
index 3fa28070de24f2055171ca2e20543881cb7fdf1c..ea96c0adc7d405674373fd5fdd77b5004e1c5419 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,5 +1,37 @@
 <template>
   <div class="about">
     <h1>This is an about page</h1>
+    <div class="about-grid">
+      <div class="main-info">
+        <h3 class="text-background">Main info</h3>
+        <p>Some info about the app here</p>
+      </div>
+      <UserSettings />
+    </div>
   </div>
 </template>
+
+<script>
+import UserSettings from '../components/UserSettings.vue';
+
+export default {
+  name: 'About',
+  components: {
+    UserSettings,
+  },
+};
+</script>
+
+<style scoped>
+  .about-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--unit-4);
+  }
+
+  @media (max-width: 700px) {
+    .about-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 6221172c2e203385a09502a4bd2304d6e4e32e2c..ba0fb50defaa22d34a6a18241e1c5ae5eb99a667 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -73,16 +73,6 @@ export default {
     gap: var(--unit-2);
   }
 
-  .selector-verb {
-    padding: var(--unit-2);
-    background-color: #566584;
-    color: #a0caf1;
-    font-weight: bold;
-    letter-spacing: 0.1rem;
-    border: 1px solid #a0caf1;
-    width: 120px;
-  }
-
   .action-button {
     display: grid;
     grid-template-columns: repeat(6, 1fr);