diff --git a/lootalot_front/src/components/Wealth.vue b/lootalot_front/src/components/Wealth.vue
index 41fdef9..9347a1e 100644
--- a/lootalot_front/src/components/Wealth.vue
+++ b/lootalot_front/src/components/Wealth.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="box is-primary">
     <span class="icon is-large">
       <i class="fas fa-2x fa-piggy-bank"></i>
     </span>
@@ -21,34 +21,33 @@
           <p class="is-size-3">{{ wealth[3] }}</p>
       </div>
     </nav>
-    <nav v-show="edit" class="columns is-mobile">
-      <div class="column">
-        <input type="number" class="input" v-show="edit" v-model="edit_values[0]"></input>
-      </div>
-      <div class="column">
-        <input type="number" class="input" v-show="edit" v-model="edit_values[1]"></input>
-      </div>
-      <div class="column">
-        <input type="number" class="input" v-show="edit" v-model="edit_values[2]"></input>
-      </div>
-      <div class="column">
-        <input type="number" class="input" v-show="edit" v-model="edit_values[3]"></input>
+    <div v-if="edit"> <!-- or v-show ? -->
+    <nav class="columns is-1  is-variable is-mobile">
+      <template v-for="i in 4">
+      <div :key="`input-col-${i}`" class="column">
+        <input type="text" size="6" class="input" 
+            :key="inputs_key"
+            :class="{'is-danger': form_errors[i - 1]}" 
+            v-model.number="edit_values[i - 1]">
+        </input>
       </div>
+      </template>
     </nav>
-    <nav v-show="edit" class="columns is-mobile">
-      <div class="column is-3 is-offset-3">
-        <button class="button is-fullwidth is-danger"
+    <nav class="columns is-mobile">
+      <div class="column is-4 is-offset-2">
+        <button class="button is-outlined is-fullwidth is-danger"
             @click="updateWealth('minus')">
           <span class="icon"><i class="fas fa-2x fa-minus"></i></span>
         </button>
       </div>
-      <div class="column is-3">
-        <button class="button is-primary is-fullwidth"
+      <div class="column is-4">
+        <button class="button is-outlined is-primary is-fullwidth"
             @click="updateWealth('plus')">
           <span class="icon"><i class="fas fa-2x fa-plus"></i></span>
         </button>
       </div>
     </nav>
+    </div>
   </div>
 </template>
 
@@ -58,20 +57,28 @@
         data () { 
             return {
                 edit_values: [0,0,0,0], 
+                form_errors: [false,false,false,false],
+                inputs_key: 0, // Hack to re-render inputs
             }; 
         },
         methods: {
             updateWealth (op) {
-                const values = this.edit_values.map(Number);
-                console.log('updateWealth', op, values);
-                let success;
-                if (true) {
-                    success = true;
-                } 
+                const values = this.edit_values;
+                this.form_errors.fill(false); // Reset error status
+                values.forEach((v,i) => {
+                    if (isNaN(v)) { 
+                        console.log("error with value", v); 
+                        this.form_errors[i] = true;
+                        };
+                });
+                const success = !this.form_errors.includes(true);
                 if (success) {
+                    console.log('updated', op, values);
                     this.$emit('updated');
-                    this.edit_values.fill(0)
-
+                    this.edit_values.fill(0) }
+                else {
+                    console.log(this.form_errors);
+                    this.inputs_key += 1;
                 }
             }
         }