diff --git a/test/api/v3/integration/hall/GET-hall_heroes_heroId.test.js b/test/api/v3/integration/hall/GET-hall_heroes_heroId.test.js
index 107f729a7d..c83e4cbaf1 100644
--- a/test/api/v3/integration/hall/GET-hall_heroes_heroId.test.js
+++ b/test/api/v3/integration/hall/GET-hall_heroes_heroId.test.js
@@ -9,7 +9,7 @@ describe('GET /heroes/:heroId', () => {
 
   const heroFields = [
     '_id', 'id', 'auth', 'balance', 'contributor', 'flags', 'items',
-    'lastCron', 'party', 'preferences', 'profile', 'purchased', 'secret',
+    'lastCron', 'party', 'preferences', 'profile', 'purchased', 'secret', 'achievements',
   ];
 
   before(async () => {
diff --git a/test/api/v3/integration/hall/PUT-hall_heores_heroId.test.js b/test/api/v3/integration/hall/PUT-hall_heores_heroId.test.js
index 2f98e89b3f..2c27536a61 100644
--- a/test/api/v3/integration/hall/PUT-hall_heores_heroId.test.js
+++ b/test/api/v3/integration/hall/PUT-hall_heores_heroId.test.js
@@ -10,7 +10,7 @@ describe('PUT /heroes/:heroId', () => {
 
   const heroFields = [
     '_id', 'auth', 'balance', 'contributor', 'flags', 'items', 'lastCron',
-    'party', 'preferences', 'profile', 'purchased', 'secret', 'permissions',
+    'party', 'preferences', 'profile', 'purchased', 'secret', 'permissions', 'achievements',
   ];
 
   before(async () => {
@@ -251,4 +251,159 @@ describe('PUT /heroes/:heroId', () => {
     expect(updatedHero.apiToken).to.not.equal(originalToken);
     expect(updatedHero.apiTokenObscured).to.not.exist;
   });
+
+  it('updates purchased hair customization', async () => {
+    const hero = await generateUser();
+    const heroRes = await user.put(`/hall/heroes/${hero._id}`, {
+      purchasedPath: 'purchased.hair.bangs.1',
+      purchasedVal: true,
+    });
+
+    // test response
+    expect(heroRes).to.have.all.keys(heroFields);
+    expect(heroRes.auth.local).not.to.have.keys(['salt', 'hashed_password']);
+    expect(heroRes.profile).to.have.all.keys(['name']);
+
+    // test response values
+    expect(heroRes.purchased.hair.bangs['1']).to.equal(true);
+    // test hero values
+    await hero.sync();
+    expect(hero.purchased.hair.bangs['1']).to.equal(true);
+  });
+
+  it('updates purchased customization', async () => {
+    const hero = await generateUser();
+    const heroRes = await user.put(`/hall/heroes/${hero._id}`, {
+      purchasedPath: 'purchased.background.beach',
+      purchasedVal: true,
+    });
+
+    // test response
+    expect(heroRes).to.have.all.keys(heroFields);
+    expect(heroRes.auth.local).not.to.have.keys(['salt', 'hashed_password']);
+    expect(heroRes.profile).to.have.all.keys(['name']);
+
+    // test response values
+    expect(heroRes.purchased.background.beach).to.equal(true);
+    // test hero values
+    await hero.sync();
+    expect(hero.purchased.background.beach).to.equal(true);
+  });
+
+  it('updates giving nested achievement', async () => {
+    const hero = await generateUser();
+    const heroRes = await user.put(`/hall/heroes/${hero._id}`, {
+      achievementPath: 'achievements.quests.dilatory',
+      achievementVal: 2,
+    });
+
+    // test response
+    expect(heroRes).to.have.all.keys(heroFields);
+    expect(heroRes.auth.local).not.to.have.keys(['salt', 'hashed_password']);
+    expect(heroRes.profile).to.have.all.keys(['name']);
+
+    // test response values
+    expect(heroRes.achievements.quests.dilatory).to.equal(2);
+    // test hero values
+    await hero.sync();
+    expect(hero.achievements.quests.dilatory).to.equal(2);
+  });
+
+  it('updates taking away nested achievement', async () => {
+    const hero = await generateUser({ 'achievements.quests.dilatory': 3 });
+    expect(hero.achievements.quests.dilatory).to.equal(3);
+    const heroRes = await user.put(`/hall/heroes/${hero._id}`, {
+      achievementPath: 'achievements.quests.dilatory',
+      achievementVal: 0,
+    });
+
+    // test response
+    expect(heroRes).to.have.all.keys(heroFields);
+    expect(heroRes.auth.local).not.to.have.keys(['salt', 'hashed_password']);
+    expect(heroRes.profile).to.have.all.keys(['name']);
+
+    // test response values
+    expect(heroRes.achievements.quests.dilatory).to.equal(0);
+    // test hero values
+    await hero.sync();
+    expect(hero.achievements.quests.dilatory).to.equal(0);
+  });
+
+  it('updates giving achievement', async () => {
+    const hero = await generateUser();
+    const heroRes = await user.put(`/hall/heroes/${hero._id}`, {
+      achievementPath: 'achievements.partyOn',
+      achievementVal: true,
+    });
+
+    // test response
+    expect(heroRes).to.have.all.keys(heroFields);
+    expect(heroRes.auth.local).not.to.have.keys(['salt', 'hashed_password']);
+    expect(heroRes.profile).to.have.all.keys(['name']);
+
+    // test response values
+    expect(heroRes.achievements.partyOn).to.equal(true);
+    // test hero values
+    await hero.sync();
+    expect(hero.achievements.partyOn).to.equal(true);
+  });
+
+  it('updates taking away achievement', async () => {
+    const hero = await generateUser({ 'achievements.partyUp': true });
+    expect(hero.achievements.partyUp).to.equal(true);
+    const heroRes = await user.put(`/hall/heroes/${hero._id}`, {
+      achievementPath: 'achievements.partyUp',
+      achievementVal: false,
+    });
+
+    // test response
+    expect(heroRes).to.have.all.keys(heroFields);
+    expect(heroRes.auth.local).not.to.have.keys(['salt', 'hashed_password']);
+    expect(heroRes.profile).to.have.all.keys(['name']);
+
+    // test response values
+    expect(heroRes.achievements.partyUp).to.equal(false);
+    // test hero values
+    await hero.sync();
+    expect(hero.achievements.partyUp).to.equal(false);
+  });
+
+  it('updates giving numbered achievement', async () => {
+    const hero = await generateUser();
+    const heroRes = await user.put(`/hall/heroes/${hero._id}`, {
+      achievementPath: 'achievements.streak',
+      achievementVal: 42,
+    });
+
+    // test response
+    expect(heroRes).to.have.all.keys(heroFields);
+    expect(heroRes.auth.local).not.to.have.keys(['salt', 'hashed_password']);
+    expect(heroRes.profile).to.have.all.keys(['name']);
+
+    // test response values
+    expect(heroRes.achievements.streak).to.equal(42);
+    // test hero values
+    await hero.sync();
+    expect(hero.achievements.streak).to.equal(42);
+  });
+
+  it('updates setting numbered achievement to 0', async () => {
+    const hero = await generateUser({ 'achievements.streak': 42 });
+    expect(hero.achievements.streak).to.equal(42);
+    const heroRes = await user.put(`/hall/heroes/${hero._id}`, {
+      achievementPath: 'achievements.streak',
+      achievementVal: 0,
+    });
+
+    // test response
+    expect(heroRes).to.have.all.keys(heroFields);
+    expect(heroRes.auth.local).not.to.have.keys(['salt', 'hashed_password']);
+    expect(heroRes.profile).to.have.all.keys(['name']);
+
+    // test response values
+    expect(heroRes.achievements.streak).to.equal(0);
+    // test hero values
+    await hero.sync();
+    expect(hero.achievements.streak).to.equal(0);
+  });
 });
diff --git a/website/client/src/components/admin-panel/user-support/achievements.vue b/website/client/src/components/admin-panel/user-support/achievements.vue
new file mode 100644
index 0000000000..d3ab101b34
--- /dev/null
+++ b/website/client/src/components/admin-panel/user-support/achievements.vue
@@ -0,0 +1,270 @@
+<template>
+  <div class="accordion-group">
+    <h3
+      class="expand-toggle"
+      :class="{'open': expand}"
+      @click="expand = !expand"
+    >
+      Achievements
+    </h3>
+    <div v-if="expand">
+      <ul>
+        <li
+          v-for="item in achievements"
+          :key="item.path"
+        >
+          <form @submit.prevent="saveItem(item)">
+            <span
+              class="enableValueChange"
+              @click="enableValueChange(item)"
+            >
+              <span :class="item.value ? 'achieved' : 'not-achieved'">
+                {{ item.value }}
+              </span>
+              :
+              {{ item.text || item.key }}
+            </span>
+
+            <div
+              v-if="item.modified"
+              class="form-inline"
+            >
+              <input
+                v-if="item.valueIsInteger"
+                v-model="item.value"
+                class="form-control valueField"
+                type="number"
+              >
+              <input
+                v-if="item.modified"
+                type="submit"
+                value="Save"
+                class="btn btn-primary"
+              >
+            </div>
+          </form>
+        </li>
+      </ul>
+      <div
+        v-for="achievementType in nestedAchievementKeys"
+        :key="achievementType"
+      >
+        <div class="accordion-group">
+          <h4
+            class="expand-toggle"
+            :class="{'open': expandItemType[achievementType]}"
+            @click="expandItemType[achievementType] = !expandItemType[achievementType]"
+          >
+            {{ achievementType }}
+          </h4>
+
+          <div v-if="expandItemType[achievementType]">
+            <ul>
+              <li
+                v-for="item in nestedAchievements[achievementType]"
+                :key="item.path"
+              >
+                <form @submit.prevent="saveItem(item)">
+                  <span
+                    class="enableValueChange"
+                    @click="enableValueChange(item)"
+                  >
+                    <span :class="item.value ? 'achieved' : 'not-achieved'">
+                      {{ item.value }}
+                    </span>
+                    :
+                    {{ item.text || item.key }}
+                  </span>
+
+                  <div
+                    v-if="item.modified"
+                    class="form-inline"
+                  >
+                    <input
+                      v-if="item.valueIsInteger"
+                      v-model="item.value"
+                      class="form-control valueField"
+                      type="number"
+                    >
+                    <input
+                      v-if="item.modified"
+                      type="submit"
+                      value="Save"
+                      class="btn btn-primary"
+                    >
+                  </div>
+                </form>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  ul li {
+    margin-bottom: 0.2em;
+  }
+  .ownedItem {
+    font-weight: bold;
+  }
+  .enableValueChange:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  .valueField {
+    min-width: 10ch;
+  }
+
+  .achieved {
+    color: green;
+  }
+
+  .not-achieved {
+    color: red;
+  }
+</style>
+
+<script>
+import content from '@/../../common/script/content';
+import i18n from '@/../../common/script/i18n';
+import saveHero from '../mixins/saveHero';
+
+function getText (achievementItem) {
+  if (achievementItem === undefined) {
+    return '';
+  }
+  const { titleKey } = achievementItem;
+  if (titleKey !== undefined) {
+    return i18n.t(titleKey, 'en');
+  }
+  const { singularTitleKey } = achievementItem;
+  if (singularTitleKey !== undefined) {
+    return i18n.t(singularTitleKey, 'en');
+  }
+  return achievementItem.key;
+}
+
+function collateItemData (self) {
+  const achievements = [];
+  const nestedAchievements = {};
+  const basePath = 'achievements';
+  const ownedAchievements = self.hero.achievements;
+  const allAchievements = content.achievements;
+
+  for (const key of Object.keys(ownedAchievements)) {
+    const value = ownedAchievements[key];
+    if (typeof value === 'object') {
+      nestedAchievements[key] = [];
+      for (const nestedKey of Object.keys(value)) {
+        const valueIsInteger = self.integerTypes.includes(key);
+        let text = nestedKey;
+        if (allAchievements[key] && allAchievements[key][nestedKey]) {
+          text = getText(allAchievements[key][nestedKey]);
+        }
+        nestedAchievements[key].push({
+          key: nestedKey,
+          text,
+          achievementType: key,
+          modified: false,
+          path: `${basePath}.${key}.${nestedKey}`,
+          value: value[nestedKey],
+          valueIsInteger,
+        });
+      }
+    } else {
+      const valueIsInteger = self.integerTypes.includes(key);
+      achievements.push({
+        key,
+        text: getText(allAchievements[key]),
+        modified: false,
+        path: `${basePath}.${key}`,
+        value: ownedAchievements[key],
+        valueIsInteger,
+      });
+    }
+  }
+
+  for (const key of Object.keys(allAchievements)) {
+    if (key !== '' && !key.endsWith('UltimateGear') && !key.endsWith('Quest')) {
+      if (ownedAchievements[key] === undefined) {
+        const valueIsInteger = self.integerTypes.includes(key);
+        achievements.push({
+          key,
+          text: getText(allAchievements[key]),
+          modified: false,
+          path: `${basePath}.${key}`,
+          value: valueIsInteger ? 0 : false,
+          valueIsInteger,
+          neverOwned: true,
+        });
+      }
+    }
+  }
+
+  self.achievements = achievements;
+  self.nestedAchievements = nestedAchievements;
+}
+
+function resetData (self) {
+  collateItemData(self);
+  self.nestedAchievementKeys.forEach(itemType => { self.expandItemType[itemType] = false; });
+}
+
+export default {
+  mixins: [
+    saveHero,
+  ],
+  props: {
+    resetCounter: {
+      type: Number,
+      required: true,
+    },
+    hero: {
+      type: Object,
+      required: true,
+    },
+  },
+  data () {
+    return {
+      expand: false,
+      expandItemType: {
+        quests: false,
+        ultimateGearSets: false,
+      },
+      nestedAchievementKeys: ['quests', 'ultimateGearSets'],
+      integerTypes: ['streak', 'perfect', 'birthday', 'habiticaDays', 'habitSurveys', 'habitBirthdays',
+        'valentine', 'congrats', 'shinySeed', 'goodluck', 'thankyou', 'seafoam', 'snowball', 'quests'],
+      achievements: [],
+      nestedAchievements: {},
+    };
+  },
+  watch: {
+    resetCounter () {
+      resetData(this);
+    },
+  },
+  mounted () {
+    resetData(this);
+  },
+  methods: {
+    async saveItem (item) {
+      // prepare the item's new value and path for being saved
+      this.hero.achievementPath = item.path;
+      this.hero.achievementVal = item.value;
+
+      await this.saveHero({ hero: this.hero, msg: item.path });
+      item.modified = false;
+    },
+    enableValueChange (item) {
+      // allow form field(s) to be shown:
+      item.modified = true;
+      if (!item.valueIsInteger) {
+        item.value = !item.value;
+      }
+    },
+  },
+};
+</script>
diff --git a/website/client/src/components/admin-panel/user-support/customizationsOwned.vue b/website/client/src/components/admin-panel/user-support/customizationsOwned.vue
new file mode 100644
index 0000000000..9b244efe60
--- /dev/null
+++ b/website/client/src/components/admin-panel/user-support/customizationsOwned.vue
@@ -0,0 +1,245 @@
+<template>
+  <div class="accordion-group">
+    <h3
+      class="expand-toggle"
+      :class="{'open': expand}"
+      @click="expand = !expand"
+    >
+      Customizations
+    </h3>
+    <div v-if="expand">
+      <div
+        v-for="itemType in itemTypes"
+        :key="itemType"
+      >
+        <div
+          v-if="collatedItemData[itemType]"
+          class="accordion-group"
+        >
+          <h4
+            class="expand-toggle"
+            :class="{'open': expandItemType[itemType]}"
+            @click="expandItemType[itemType] = !expandItemType[itemType]"
+          >
+            {{ itemType }}
+          </h4>
+
+          <div v-if="expandItemType[itemType]">
+            <ul>
+              <li
+                v-for="item in collatedItemData[itemType]"
+                :key="item.path"
+              >
+                <form @submit.prevent="saveItem(item)">
+                  <span
+                    class="enableValueChange"
+                    @click="enableValueChange(item)"
+                  >
+                    <span :class="item.value ? 'owned' : 'not-owned'">
+                      {{ item.value }}
+                    </span>
+                    :
+                    <span :class="{ ownedItem: !item.neverOwned }">{{ item.text }}</span>
+                  </span>
+                  {{ item.set }}
+
+                  <div
+                    v-if="item.modified"
+                    class="form-inline"
+                  >
+                    <input
+                      v-if="item.valueIsInteger"
+                      v-model="item.value"
+                      class="form-control valueField"
+                      type="number"
+                    >
+                    <input
+                      v-if="item.modified"
+                      type="submit"
+                      value="Save"
+                      class="btn btn-primary"
+                    >
+                  </div>
+                </form>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  ul li {
+    margin-bottom: 0.2em;
+  }
+  .ownedItem {
+    font-weight: bold;
+  }
+  .enableValueChange:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  .valueField {
+    min-width: 10ch;
+  }
+  .owned {
+    color: green;
+  }
+
+  .not-owned {
+    color: red;
+  }
+</style>
+
+<script>
+import content from '@/../../common/script/content';
+import getItemDescription from '../mixins/getItemDescription';
+import saveHero from '../mixins/saveHero';
+
+const months = [
+  'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
+  'September', 'October', 'November', 'December',
+];
+
+function makeSetText (set) {
+  if (set === undefined) {
+    return '';
+  }
+  if (set.key.indexOf('backgrounds') === 0) {
+    const { text } = set;
+    return `${months[parseInt(text.slice(11, 13), 10) - 1]} ${text.slice(13)}`;
+  }
+  return set.key;
+}
+
+function collateItemData (self) {
+  const collatedItemData = {};
+  self.itemTypes.forEach(itemType => {
+    // itemTypes are pets, food, gear, etc
+
+    // Set up some basic data for this itemType:
+    const basePath = `purchased.${itemType}`;
+    let ownedItems;
+    let allItems;
+    if (itemType.indexOf('hair') === 0) {
+      const hairType = itemType.split('.')[1];
+      allItems = content.appearances.hair[hairType];
+      if (self.hero.purchased && self.hero.purchased.hair) {
+        ownedItems = self.hero.purchased.hair[hairType] || {};
+      } else {
+        ownedItems = {};
+      }
+    } else {
+      allItems = content.appearances[itemType];
+      ownedItems = self.hero.purchased[itemType] || {};
+    }
+
+    const itemData = []; // all items for this itemType
+
+    // Collate data for items that the user owns or used to own:
+    for (const key of Object.keys(ownedItems)) {
+      // Do not sort keys. The order in the items object gives hints about order received.
+      const item = allItems[key];
+      itemData.push({
+        itemType,
+        key,
+        text: item.text ? item.text() : key,
+        modified: false,
+        path: `${basePath}.${key}`,
+        value: ownedItems[key],
+        set: makeSetText(item.set),
+      });
+    }
+
+    // Collate data for items that the user never owned:
+    for (const key of Object.keys(allItems).sort()) {
+      if (
+        // ignore items the user owns because we captured them above:
+        !(key in ownedItems)
+        && allItems[key].price > 0
+      ) {
+        const item = allItems[key];
+        itemData.push({
+          itemType,
+          key,
+          text: item.text ? item.text() : key,
+          modified: false,
+          path: `${basePath}.${key}`,
+          value: false,
+          set: makeSetText(item.set),
+        });
+      }
+    }
+    if (itemData.length > 0) {
+      collatedItemData[itemType] = itemData;
+    }
+  });
+  return collatedItemData;
+}
+
+function resetData (self) {
+  self.collatedItemData = collateItemData(self);
+  self.itemTypes.forEach(itemType => { self.expandItemType[itemType] = false; });
+}
+
+export default {
+  mixins: [
+    getItemDescription,
+    saveHero,
+  ],
+  props: {
+    resetCounter: {
+      type: Number,
+      required: true,
+    },
+    hero: {
+      type: Object,
+      required: true,
+    },
+  },
+  data () {
+    return {
+      expand: false,
+      expandItemType: {
+        skin: false,
+        shirt: false,
+        background: false,
+        'hair.bangs': false,
+        'hair.base': false,
+        'hair.color': false,
+        'hair.mustache': false,
+        'hair.beard': false,
+        'hair.flower': false,
+      },
+      itemTypes: ['skin', 'shirt', 'background', 'hair.bangs', 'hair.base', 'hair.color', 'hair.mustache', 'hair.beard', 'hair.flower'],
+      nonIntegerTypes: ['skin', 'shirt', 'background'],
+      collatedItemData: {},
+    };
+  },
+  watch: {
+    resetCounter () {
+      resetData(this);
+    },
+  },
+  mounted () {
+    resetData(this);
+  },
+  methods: {
+    async saveItem (item) {
+      // prepare the item's new value and path for being saved
+      this.hero.purchasedPath = item.path;
+      this.hero.purchasedVal = item.value;
+
+      await this.saveHero({ hero: this.hero, msg: item.path });
+      item.modified = false;
+    },
+    enableValueChange (item) {
+      // allow form field(s) to be shown:
+      item.modified = true;
+      item.value = !item.value;
+    },
+  },
+};
+</script>
diff --git a/website/client/src/components/admin-panel/user-support/index.vue b/website/client/src/components/admin-panel/user-support/index.vue
index 0573ea9896..6d8e2c73ce 100644
--- a/website/client/src/components/admin-panel/user-support/index.vue
+++ b/website/client/src/components/admin-panel/user-support/index.vue
@@ -47,6 +47,16 @@
           :reset-counter="resetCounter"
         />
 
+        <customizations-owned
+          :hero="hero"
+          :reset-counter="resetCounter"
+        />
+
+        <achievements
+          :hero="hero"
+          :reset-counter="resetCounter"
+        />
+
         <transactions
           :hero="hero"
           :reset-counter="resetCounter"
@@ -103,6 +113,8 @@ import PrivilegesAndGems from './privilegesAndGems';
 import ContributorDetails from './contributorDetails';
 import Transactions from './transactions';
 import SubscriptionAndPerks from './subscriptionAndPerks';
+import CustomizationsOwned from './customizationsOwned.vue';
+import Achievements from './achievements.vue';
 
 import { userStateMixin } from '../../../mixins/userState';
 
@@ -110,6 +122,7 @@ export default {
   components: {
     BasicDetails,
     ItemsOwned,
+    CustomizationsOwned,
     CronAndAuth,
     PartyAndQuest,
     AvatarAndDrops,
@@ -117,6 +130,7 @@ export default {
     ContributorDetails,
     Transactions,
     SubscriptionAndPerks,
+    Achievements,
   },
   mixins: [userStateMixin],
   beforeRouteUpdate (to, from, next) {
diff --git a/website/client/src/components/admin-panel/user-support/itemsOwned.vue b/website/client/src/components/admin-panel/user-support/itemsOwned.vue
index 83b25c3e29..0385857eca 100644
--- a/website/client/src/components/admin-panel/user-support/itemsOwned.vue
+++ b/website/client/src/components/admin-panel/user-support/itemsOwned.vue
@@ -68,7 +68,9 @@
                     class="enableValueChange"
                     @click="enableValueChange(item)"
                   >
-                    {{ item | displayValue }}
+                    <span :class="item.value ? 'owned' : 'not-owned'">
+                      {{ item | displayValue }}
+                    </span>
                     :
                     <span :class="{ ownedItem: !item.neverOwned }">{{ item.key }} : </span>
                   </span>
@@ -102,15 +104,26 @@
 </template>
 
 <style lang="scss" scoped>
+  ul li {
+    margin-bottom: 0.2em;
+  }
   .ownedItem {
     font-weight: bold;
   }
   .enableValueChange:hover {
     text-decoration: underline;
+    cursor: pointer;
   }
   .valueField {
     min-width: 10ch;
   }
+  .owned {
+    color: green;
+  }
+
+  .not-owned {
+    color: red;
+  }
 </style>
 
 <script>
diff --git a/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue b/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
index 71015029f1..1d58847a15 100644
--- a/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
+++ b/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
@@ -21,39 +21,43 @@
           Group plan ID:
           <strong>{{ hero.purchased.plan.owner }}</strong>
         </div>
-        <div v-if="hero.purchased.plan.dateCreated" class="form-inline">
+        <div
+          v-if="hero.purchased.plan.dateCreated"
+          class="form-inline"
+        >
           <label>
-          Creation date:
+            Creation date:
             <input
               v-model="hero.purchased.plan.dateCreated"
               class="form-control"
               type="text"
             > <strong class="ml-2">{{ dateFormat(hero.purchased.plan.dateCreated) }}</strong>
-            </label>
+          </label>
         </div>
-        <div v-if="hero.purchased.plan.dateCurrentTypeCreated" class="form-inline">
+        <div
+          v-if="hero.purchased.plan.dateCurrentTypeCreated"
+          class="form-inline"
+        >
           <label>
-          Start date for current subscription type:
+            Start date for current subscription type:
             <input
               v-model="hero.purchased.plan.dateCurrentTypeCreated"
               class="form-control"
               type="text"
             >
-            </label>
-            <strong class="ml-2">{{dateFormat(hero.purchased.plan.dateCurrentTypeCreated)}}</strong>
+          </label>
+          <strong class="ml-2">{{ dateFormat(hero.purchased.plan.dateCurrentTypeCreated) }}</strong>
         </div>
         <div class="form-inline">
           <label>
-          Termination date:
-          <div
-            v-if="hero.purchased.plan.dateTerminated">
-          <input
-              v-model="hero.purchased.plan.dateTerminated"
-              class="form-control"
-              type="text"
-            > <strong class="ml-2">{{ dateFormat(hero.purchased.plan.dateTerminated) }}</strong>
-          </div>
-          <strong v-else> None</strong>
+            Termination date:
+            <div>
+              <input
+                v-model="hero.purchased.plan.dateTerminated"
+                class="form-control"
+                type="text"
+              > <strong class="ml-2">{{ dateFormat(hero.purchased.plan.dateTerminated) }}</strong>
+            </div>
           </label>
         </div>
         <div class="form-inline">
@@ -199,6 +203,9 @@ export default {
   },
   methods: {
     dateFormat (date) {
+      if (!date) {
+        return '--';
+      }
       return moment(date).format('YYYY/MM/DD');
     },
   },
diff --git a/website/client/src/pages/settings/settingRows/resetAccount.vue b/website/client/src/pages/settings/settingRows/resetAccount.vue
index 9da36aed56..a03ead6960 100644
--- a/website/client/src/pages/settings/settingRows/resetAccount.vue
+++ b/website/client/src/pages/settings/settingRows/resetAccount.vue
@@ -59,8 +59,8 @@
 
         <div
           v-once
-          v-html="$t('resetText2')"
           class="mb-3"
+          v-html="$t('resetText2')"
         >
         </div>
 
diff --git a/website/server/controllers/api-v3/hall.js b/website/server/controllers/api-v3/hall.js
index 5cfcfeb960..0de5ec74bf 100644
--- a/website/server/controllers/api-v3/hall.js
+++ b/website/server/controllers/api-v3/hall.js
@@ -146,7 +146,7 @@ api.getHeroes = {
 // Note, while the following routes are called getHero / updateHero
 // they can be used by admins to get/update any user
 
-const heroAdminFields = 'auth balance contributor flags items lastCron party preferences profile purchased secret permissions';
+const heroAdminFields = 'auth balance contributor flags items lastCron party preferences profile purchased secret permissions achievements';
 const heroAdminFieldsToFetch = heroAdminFields; // these variables will make more sense when...
 const heroAdminFieldsToShow = heroAdminFields; // ... apiTokenObscured is added
 
@@ -285,7 +285,7 @@ api.updateHero = {
       if (plan.dateCurrentTypeCreated) {
         hero.purchased.plan.dateCurrentTypeCreated = plan.dateCurrentTypeCreated;
       }
-      if (plan.dateTerminated) {
+      if (plan.dateTerminated !== hero.purchased.plan.dateTerminated) {
         hero.purchased.plan.dateTerminated = plan.dateTerminated;
       }
       if (plan.perkMonthCount) {
@@ -342,6 +342,42 @@ api.updateHero = {
       hero.purchased.ads = updateData.purchased.ads;
     }
 
+    if (updateData.purchasedPath && updateData.purchasedVal !== undefined
+      && validateItemPath(updateData.purchasedPath)) {
+      const parts = updateData.purchasedPath.split('.');
+      const key = _.last(parts);
+      const type = parts[parts.length - 2];
+      // using _.set causes weird issues
+      if (updateData.purchasedVal === true) {
+        if (updateData.purchasedPath.indexOf('hair.') === 10) {
+          if (hero.purchased.hair[type] === undefined) hero.purchased.hair[type] = {};
+          hero.purchased.hair[type][key] = true;
+        } else {
+          if (hero.purchased[type] === undefined) hero.purchased[type] = {};
+          hero.purchased[type][key] = true;
+        }
+      } else if (updateData.purchasedPath.indexOf('hair.') === 10) {
+        delete hero.purchased.hair[type][key];
+      } else {
+        delete hero.purchased[type][key];
+      }
+      hero.markModified('purchased');
+    }
+
+    if (updateData.achievementPath && updateData.achievementVal !== undefined) {
+      const parts = updateData.achievementPath.split('.');
+      const key = _.last(parts);
+      const type = parts[parts.length - 2];
+      // using _.set causes weird issues
+      if (type !== 'achievements') {
+        if (hero.achievements[type] === undefined) hero.achievements[type] = {};
+        hero.achievements[type][key] = updateData.achievementVal;
+      } else {
+        hero.achievements[key] = updateData.achievementVal;
+      }
+      hero.markModified('achievements');
+    }
+
     // give them the Dragon Hydra pet if they're above level 6
     if (hero.contributor.level >= 6) {
       hero.items.pets['Dragon-Hydra'] = 5;
diff --git a/website/server/libs/items/utils.js b/website/server/libs/items/utils.js
index 191d717a14..33748425a1 100644
--- a/website/server/libs/items/utils.js
+++ b/website/server/libs/items/utils.js
@@ -22,37 +22,49 @@ export function getDefaultOwnedGear () {
 // Example of an item path: `items.gear.owned.head_warrior_0`
 export function validateItemPath (itemPath) {
   // The item path must start with `items.`
-  if (itemPath.indexOf('items.') !== 0) return false;
-  if (User.schema.paths[itemPath]) return true;
+  if (itemPath.indexOf('items.') === 0) {
+    if (User.schema.paths[itemPath]) return true;
 
-  const key = last(itemPath.split('.'));
+    const key = last(itemPath.split('.'));
 
-  if (itemPath.indexOf('items.gear.owned') === 0) {
-    return Boolean(shared.content.gear.flat[key]);
+    if (itemPath.indexOf('items.gear.owned') === 0) {
+      return Boolean(shared.content.gear.flat[key]);
+    }
+
+    if (itemPath.indexOf('items.pets') === 0) {
+      return Boolean(shared.content.petInfo[key]);
+    }
+
+    if (itemPath.indexOf('items.eggs') === 0) {
+      return Boolean(shared.content.eggs[key]);
+    }
+
+    if (itemPath.indexOf('items.hatchingPotions') === 0) {
+      return Boolean(shared.content.hatchingPotions[key]);
+    }
+
+    if (itemPath.indexOf('items.food') === 0) {
+      return Boolean(shared.content.food[key]);
+    }
+
+    if (itemPath.indexOf('items.mounts') === 0) {
+      return Boolean(shared.content.mountInfo[key]);
+    }
+
+    if (itemPath.indexOf('items.quests') === 0) {
+      return Boolean(shared.content.quests[key]);
+    }
   }
 
-  if (itemPath.indexOf('items.pets') === 0) {
-    return Boolean(shared.content.petInfo[key]);
-  }
+  if (itemPath.indexOf('purchased.') === 0) {
+    const parts = itemPath.split('.');
+    const key = last(parts);
+    const type = parts[parts.length - 2];
 
-  if (itemPath.indexOf('items.eggs') === 0) {
-    return Boolean(shared.content.eggs[key]);
-  }
-
-  if (itemPath.indexOf('items.hatchingPotions') === 0) {
-    return Boolean(shared.content.hatchingPotions[key]);
-  }
-
-  if (itemPath.indexOf('items.food') === 0) {
-    return Boolean(shared.content.food[key]);
-  }
-
-  if (itemPath.indexOf('items.mounts') === 0) {
-    return Boolean(shared.content.mountInfo[key]);
-  }
-
-  if (itemPath.indexOf('items.quests') === 0) {
-    return Boolean(shared.content.quests[key]);
+    if (itemPath.indexOf('hair.') === 10) {
+      return Boolean(shared.content.appearances.hair[type][key]);
+    }
+    return Boolean(shared.content.appearances[type][key]);
   }
 
   return false;