diff --git a/website/client/src/components/settings/restoreModal.vue b/website/client/src/components/settings/restoreModal.vue
deleted file mode 100644
index de185f7226..0000000000
--- a/website/client/src/components/settings/restoreModal.vue
+++ /dev/null
@@ -1,208 +0,0 @@
-<template>
-  <b-modal
-    id="restore"
-    :title="$t('fixValues')"
-    :hide-footer="true"
-    size="lg"
-  >
-    <p>{{ $t('fixValuesText1') }}</p>
-    <p>{{ $t('fixValuesText2') }}</p>
-    <div class="form-horizontal">
-      <h3>{{ $t('stats') }}</h3>
-      <div class="form-group row">
-        <div class="col-sm-3">
-          <label class="control-label">{{ $t('health') }}</label>
-        </div>
-        <div class="col-sm-9">
-          <input
-            v-model="restoreValues.stats.hp"
-            class="form-control"
-            type="number"
-            step="any"
-            data-for="stats.hp"
-          >
-        </div>
-      </div>
-      <div class="form-group row">
-        <div class="col-sm-3">
-          <label class="control-label">{{ $t('experience') }}</label>
-        </div>
-        <div class="col-sm-9">
-          <input
-            v-model="restoreValues.stats.exp"
-            class="form-control"
-            type="number"
-            step="any"
-            data-for="stats.exp"
-          >
-        </div>
-      </div>
-      <div class="form-group row">
-        <div class="col-sm-3">
-          <label class="control-label">{{ $t('gold') }}</label>
-        </div>
-        <div class="col-sm-9">
-          <input
-            v-model="restoreValues.stats.gp"
-            class="form-control"
-            type="number"
-            step="any"
-            data-for="stats.gp"
-          >
-        </div>
-        <!--input.form-control(type='number',
-         step="any", data-for='stats.gp', v-model='restoreValues.stats.gp',disabled)-->
-      </div>
-      <div class="form-group row">
-        <div class="col-sm-3">
-          <label class="control-label">{{ $t('mana') }}</label>
-        </div>
-        <div class="col-sm-9">
-          <input
-            v-model="restoreValues.stats.mp"
-            class="form-control"
-            type="number"
-            step="any"
-            data-for="stats.mp"
-          >
-        </div>
-      </div>
-      <div class="form-group row">
-        <div class="col-sm-3">
-          <label class="control-label">{{ $t('level') }}</label>
-        </div>
-        <div class="col-sm-9">
-          <input
-            v-model="restoreValues.stats.lvl"
-            class="form-control"
-            type="number"
-            data-for="stats.lvl"
-          >
-        </div>
-      </div>
-      <h3>{{ $t('achievements') }}</h3>
-      <div class="form-group row">
-        <div class="col-sm-3">
-          <label class="control-label">{{ $t('fix21Streaks') }}</label>
-        </div>
-        <div class="col-sm-9">
-          <input
-            v-model="restoreValues.achievements.streak"
-            class="form-control"
-            type="number"
-            data-for="achievements.streak"
-          >
-        </div>
-      </div>
-    </div>
-    <div class="modal-footer">
-      <button
-        class="btn btn-danger"
-        @click="close()"
-      >
-        {{ $t('discardChanges') }}
-      </button>
-      <button
-        class="btn btn-primary"
-        @click="restore()"
-      >
-        {{ $t('saveAndClose') }}
-      </button>
-    </div>
-  </b-modal>
-</template>
-
-<script>
-import clone from 'lodash/clone';
-import { MAX_LEVEL_HARD_CAP } from '@/../../common/script/constants';
-import { mapState } from '@/libs/store';
-
-export default {
-  data () {
-    return {
-      restoreValues: {
-        stats: {
-          hp: 0,
-          mp: 0,
-          gp: 0,
-          exp: 0,
-          lvl: 0,
-        },
-        achievements: {
-          streak: 0,
-        },
-      },
-    };
-  },
-  computed: {
-    ...mapState({ user: 'user.data' }),
-  },
-  mounted () {
-    this.restoreValues.stats = clone(this.user.stats);
-    this.restoreValues.achievements.streak = clone(this.user.achievements.streak);
-  },
-  methods: {
-    close () {
-      this.validateInputs();
-      this.$root.$emit('bv::hide::modal', 'restore');
-    },
-    restore () {
-      if (!this.validateInputs()) {
-        return;
-      }
-
-      if (this.restoreValues.stats.lvl > MAX_LEVEL_HARD_CAP) {
-        this.restoreValues.stats.lvl = MAX_LEVEL_HARD_CAP;
-      }
-
-      const userChangedLevel = this.restoreValues.stats.lvl !== this.user.stats.lvl;
-      const userDidNotChangeExp = this.restoreValues.stats.exp === this.user.stats.exp;
-      if (userChangedLevel && userDidNotChangeExp) this.restoreValues.stats.exp = 0;
-
-      this.user.stats = clone(this.restoreValues.stats);
-      this.user.achievements.streak = clone(this.restoreValues.achievements.streak);
-
-      const settings = {
-        'stats.hp': Number(this.restoreValues.stats.hp),
-        'stats.exp': Number(this.restoreValues.stats.exp),
-        'stats.gp': Number(this.restoreValues.stats.gp),
-        'stats.lvl': Number(this.restoreValues.stats.lvl),
-        'stats.mp': Number(this.restoreValues.stats.mp),
-        'achievements.streak': Number(this.restoreValues.achievements.streak),
-      };
-
-      this.$store.dispatch('user:set', settings);
-      this.$root.$emit('bv::hide::modal', 'restore');
-    },
-    validateInputs () {
-      const canRestore = ['hp', 'exp', 'gp', 'mp'];
-      let valid = true;
-
-      for (const stat of canRestore) {
-        if (this.restoreValues.stats[stat] === '') {
-          this.restoreValues.stats[stat] = this.user.stats[stat];
-          valid = false;
-        }
-      }
-
-      const inputLevel = Number(this.restoreValues.stats.lvl);
-      if (this.restoreValues.stats.lvl === ''
-        || !Number.isInteger(inputLevel)
-        || inputLevel < 1) {
-        this.restoreValues.stats.lvl = this.user.stats.lvl;
-        valid = false;
-      }
-
-      const inputStreak = Number(this.restoreValues.achievements.streak);
-      if (this.restoreValues.achievements.streak === ''
-        || !Number.isInteger(inputStreak)
-        || inputStreak < 0) {
-        this.restoreValues.achievements.streak = this.user.achievements.streak;
-        valid = false;
-      }
-
-      return valid;
-    },
-  },
-};
-</script>
diff --git a/website/client/src/components/settings/site.vue b/website/client/src/components/settings/site.vue
index d5846eecd8..a83de48f8e 100644
--- a/website/client/src/components/settings/site.vue
+++ b/website/client/src/components/settings/site.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="row standard-page">
-    <restore-modal />
     <reset-modal />
     <delete-modal />
     <h1 class="col-12">
@@ -59,16 +58,6 @@
             >{{ $t('displayInviteToPartyWhenPartyIs1') }}</span>
           </label>
         </div>
-
-        <button
-          class="btn btn-primary mr-2 mb-2"
-          popover-trigger="mouseenter"
-          popover-placement="right"
-          :popover="$t('fixValPop')"
-          @click="openRestoreModal()"
-        >
-          {{ $t('fixVal') }}
-        </button>
       </div>
     </div>
     <div class="col-sm-6">
@@ -256,17 +245,14 @@
 import hello from 'hellojs';
 import axios from 'axios';
 import { mapState } from '@/libs/store';
-import restoreModal from './restoreModal';
 import resetModal from './resetModal';
 import deleteModal from './deleteModal';
 import { SUPPORTED_SOCIAL_NETWORKS } from '@/../../common/script/constants';
 import notificationsMixin from '../../mixins/notifications';
-import sounds from '../../libs/sounds';
 import { buildAppleAuthUrl } from '../../libs/auth';
 
 export default {
   components: {
-    restoreModal,
     resetModal,
     deleteModal,
   },
@@ -375,9 +361,6 @@ export default {
         });
       }
     },
-    openRestoreModal () {
-      this.$root.$emit('bv::show::modal', 'restore');
-    },
     openResetModal () {
       this.$root.$emit('bv::show::modal', 'reset');
     },
@@ -407,14 +390,6 @@ export default {
       await axios.post('/api/v4/user/auth/local/register', this.localAuth);
       window.location.href = '/user/settings/site';
     },
-    changeAudioTheme () {
-      this.soundIndex = 0;
-      this.set('sound');
-    },
-    playAudio () {
-      this.$root.$emit('playSound', sounds[this.soundIndex]);
-      this.soundIndex = (this.soundIndex + 1) % sounds.length;
-    },
   },
 };
 </script>
diff --git a/website/client/src/pages/settings/inlineSettings/displayNameSetting.vue b/website/client/src/pages/settings/inlineSettings/displayNameSetting.vue
index ba48d89a78..e2c41e795f 100644
--- a/website/client/src/pages/settings/inlineSettings/displayNameSetting.vue
+++ b/website/client/src/pages/settings/inlineSettings/displayNameSetting.vue
@@ -201,6 +201,8 @@ export default {
       window.alert(this.$t('displayNameSuccess')); // eslint-disable-line no-alert
       this.user.profile.name = newName;
       this.temporaryDisplayName = newName;
+
+      this.closeModal();
     },
     validateDisplayName: debounce(async function checkName (displayName) {
       if (displayName.length <= 1 || displayName === this.user.profile.name) {
diff --git a/website/client/src/pages/settings/inlineSettings/fixValuesSetting.vue b/website/client/src/pages/settings/inlineSettings/fixValuesSetting.vue
index 5478f2096c..e0f2bbd1c6 100644
--- a/website/client/src/pages/settings/inlineSettings/fixValuesSetting.vue
+++ b/website/client/src/pages/settings/inlineSettings/fixValuesSetting.vue
@@ -40,132 +40,42 @@
           <br>
           <span v-html="$t('fixValuesText2')"></span>
         </div>
-        "mana": "Mana",
-        "hp": "HP",
-        "mp": "MP",
-        "xp": "XP",
-        "health": "Health",
-        <div class="fix-value-group">
-          <span class="fix-label">
-            {{ $t('health') }}
-          </span>
-          <div class="input-group">
-            <div class="input-group-prepend positive-addon input-group-icon">
-              <div
-                v-once
-                class="svg-icon"
-                v-html="icons.health"
-              ></div>
-            </div>
-            <input
-              class="form-control"
-              type="number"
-              min="0"
-              required="required"
+
+        <div class="content-centered">
+          <div class="input-rows row">
+            <div
+              v-for="input in inputList"
+              :key="input.property"
+              class="col-4"
             >
-          </div>
-        </div>
-
-
-        <div class="form-horizontal">
-          <h3>{{ $t('stats') }}</h3>
-          <div class="form-group row">
-            <div class="col-sm-3">
-              <label class="control-label">{{ $t('health') }}</label>
-            </div>
-            <div class="col-sm-9">
-              <input
-                v-model="restoreValues.stats.hp"
-                class="form-control"
-                type="number"
-                step="any"
-                data-for="stats.hp"
-              >
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="col-sm-3">
-              <label class="control-label">{{ $t('experience') }}</label>
-            </div>
-            <div class="col-sm-9">
-              <input
-                v-model="restoreValues.stats.exp"
-                class="form-control"
-                type="number"
-                step="any"
-                data-for="stats.exp"
-              >
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="col-sm-3">
-              <label class="control-label">{{ $t('gold') }}</label>
-            </div>
-            <div class="col-sm-9">
-              <input
-                v-model="restoreValues.stats.gp"
-                class="form-control"
-                type="number"
-                step="any"
-                data-for="stats.gp"
-              >
-            </div>
-            <!--input.form-control(type='number',
-         step="any", data-for='stats.gp', v-model='restoreValues.stats.gp',disabled)-->
-          </div>
-          <div class="form-group row">
-            <div class="col-sm-3">
-              <label class="control-label">{{ $t('mana') }}</label>
-            </div>
-            <div class="col-sm-9">
-              <input
-                v-model="restoreValues.stats.mp"
-                class="form-control"
-                type="number"
-                step="any"
-                data-for="stats.mp"
-              >
-            </div>
-          </div>
-          <div class="form-group row">
-            <div class="col-sm-3">
-              <label class="control-label">{{ $t('level') }}</label>
-            </div>
-            <div class="col-sm-9">
-              <input
-                v-model="restoreValues.stats.lvl"
-                class="form-control"
-                type="number"
-                data-for="stats.lvl"
-              >
-            </div>
-          </div>
-          <h3>{{ $t('achievements') }}</h3>
-          <div class="form-group row">
-            <div class="col-sm-3">
-              <label class="control-label">{{ $t('fix21Streaks') }}</label>
-            </div>
-            <div class="col-sm-9">
-              <input
-                v-model="restoreValues.achievements.streak"
-                class="form-control"
-                type="number"
-                data-for="achievements.streak"
-              >
+              <div class="fix-value-group mt-3">
+                <span class="fix-label">
+                  {{ $t(input.translationKey) }}
+                </span>
+                <div class="input-group">
+                  <div class="input-group-prepend positive-addon input-group-icon">
+                    <div
+                      v-once
+                      class="svg-icon icon-16"
+                      v-html="input.icon"
+                    ></div>
+                  </div>
+                  <input
+                    v-model="restoreValues[input.property]"
+                    class="form-control"
+                    type="number"
+                    min="0"
+                    required="required"
+                  >
+                </div>
+              </div>
             </div>
           </div>
         </div>
-        Health
-        Exp
-        Mana
-        Gold
-        Level
-        21-Day-Streak
-        TODO
 
         <save-cancel-buttons
-          :disable-save="inputsInvalid || true"
-          @saveClicked="changePassword( passwordUpdates)"
+          class="mt-4"
+          @saveClicked="save()"
           @cancelClicked="requestCloseModal()"
         />
       </td>
@@ -181,10 +91,33 @@
   background: white;
 }
 
+.input-rows {
+  width: calc(370px + 1.5rem);
+}
+
+.content-centered {
+  display: flex;
+  flex-direction: column;
+
+  align-items: center;
+}
+
+.fix-label {
+  font-weight: bold;
+  line-height: 1.71;
+  color: $gray-50;
+}
+
+.svg-icon.icon-16 {
+  width: 16px !important;
+  height: 16px !important;
+  display: flex;
+}
+
 </style>
 
 <script>
-import clone from 'lodash/clone';
+// import clone from 'lodash/clone';
 import SaveCancelButtons from '../components/saveCancelButtons.vue';
 import { InlineSettingMixin } from '../components/inlineSettingMixin';
 import healthIcon from '@/assets/svg/health.svg';
@@ -202,16 +135,12 @@ export default {
   data () {
     return {
       restoreValues: {
-        stats: {
-          hp: 0,
-          mp: 0,
-          gp: 0,
-          exp: 0,
-          lvl: 0,
-        },
-        achievements: {
-          streak: 0,
-        },
+        hp: 0,
+        mp: 0,
+        gp: 0,
+        exp: 0,
+        lvl: 0,
+        streak: 0,
       },
       icons: Object.freeze({
         health: healthIcon,
@@ -221,72 +150,110 @@ export default {
         level,
         streak: streakIcon,
       }),
+      inputList: Object.freeze([
+        {
+          translationKey: 'health',
+          icon: healthIcon,
+          property: 'hp',
+        },
+        {
+          translationKey: 'experience',
+          icon: experienceIcon,
+          property: 'exp',
+        }, {
+          translationKey: 'mana',
+          icon: manaIcon,
+          property: 'mp',
+        }, {
+          translationKey: 'gold',
+          icon: svgGold,
+          property: 'gp',
+        },
+        {
+          translationKey: 'level',
+          icon: level,
+          property: 'lvl',
+        },
+        {
+          translationKey: 'fix21Streaks',
+          icon: streakIcon,
+          property: 'streak',
+        },
+      ]),
     };
   },
   computed: {
     ...mapState({ user: 'user.data' }),
   },
   mounted () {
-    this.restoreValues.stats = clone(this.user.stats);
-    this.restoreValues.achievements.streak = clone(this.user.achievements.streak);
+    const {
+      hp, mp, gp, exp, lvl,
+    } = this.user.stats;
+
+    this.restoreValues = {
+      hp, mp, gp, exp, lvl, streak: this.user.achievements.streak,
+    };
   },
   methods: {
     close () {
       this.validateInputs();
-      this.$root.$emit('bv::hide::modal', 'restore');
     },
-    restore () {
+    save () {
       if (!this.validateInputs()) {
         return;
       }
 
-      if (this.restoreValues.stats.lvl > MAX_LEVEL_HARD_CAP) {
-        this.restoreValues.stats.lvl = MAX_LEVEL_HARD_CAP;
+      if (this.restoreValues.lvl > MAX_LEVEL_HARD_CAP) {
+        this.restoreValues.lvl = MAX_LEVEL_HARD_CAP;
       }
 
-      const userChangedLevel = this.restoreValues.stats.lvl !== this.user.stats.lvl;
-      const userDidNotChangeExp = this.restoreValues.stats.exp === this.user.stats.exp;
-      if (userChangedLevel && userDidNotChangeExp) this.restoreValues.stats.exp = 0;
+      const userChangedLevel = this.restoreValues.lvl !== this.user.stats.lvl;
+      const userDidNotChangeExp = this.restoreValues.exp === this.user.stats.exp;
+      if (userChangedLevel && userDidNotChangeExp) {
+        this.restoreValues.exp = 0;
+      }
 
-      this.user.stats = clone(this.restoreValues.stats);
-      this.user.achievements.streak = clone(this.restoreValues.achievements.streak);
+      // todo
+      // this.user.stats = clone(this.restoreValues.stats);
+      // this.user.achievements.streak = clone(this.restoreValues.achievements.streak);
 
       const settings = {
-        'stats.hp': Number(this.restoreValues.stats.hp),
-        'stats.exp': Number(this.restoreValues.stats.exp),
-        'stats.gp': Number(this.restoreValues.stats.gp),
-        'stats.lvl': Number(this.restoreValues.stats.lvl),
-        'stats.mp': Number(this.restoreValues.stats.mp),
-        'achievements.streak': Number(this.restoreValues.achievements.streak),
+        'stats.hp': Number(this.restoreValues.hp),
+        'stats.exp': Number(this.restoreValues.exp),
+        'stats.gp': Number(this.restoreValues.gp),
+        'stats.lvl': Number(this.restoreValues.lvl),
+        'stats.mp': Number(this.restoreValues.mp),
+        'achievements.streak': Number(this.restoreValues.streak),
       };
 
       this.$store.dispatch('user:set', settings);
-      this.$root.$emit('bv::hide::modal', 'restore');
+
+      this.closeModal();
     },
     validateInputs () {
       const canRestore = ['hp', 'exp', 'gp', 'mp'];
       let valid = true;
 
       for (const stat of canRestore) {
-        if (this.restoreValues.stats[stat] === '') {
-          this.restoreValues.stats[stat] = this.user.stats[stat];
+        if (this.restoreValues[stat] === '') {
+          this.restoreValues[stat] = this.user.stats[stat];
           valid = false;
         }
       }
 
-      const inputLevel = Number(this.restoreValues.stats.lvl);
-      if (this.restoreValues.stats.lvl === ''
-        || !Number.isInteger(inputLevel)
-        || inputLevel < 1) {
-        this.restoreValues.stats.lvl = this.user.stats.lvl;
+      const inputLevel = Number(this.restoreValues.lvl);
+      if (this.restoreValues.lvl === ''
+          || !Number.isInteger(inputLevel)
+          || inputLevel < 1) {
+        this.restoreValues.lvl = this.user.stats.lvl;
         valid = false;
       }
 
-      const inputStreak = Number(this.restoreValues.achievements.streak);
-      if (this.restoreValues.achievements.streak === ''
-        || !Number.isInteger(inputStreak)
-        || inputStreak < 0) {
-        this.restoreValues.achievements.streak = this.user.achievements.streak;
+      const inputStreak = Number(this.restoreValues.streak);
+      if (this.restoreValues.streak === ''
+          || !Number.isInteger(inputStreak)
+          || inputStreak < 0) {
+        this.restoreValues.streak = this.user.achievements.streak;
         valid = false;
       }