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 7506b91b48..8d156077f2 100644
--- a/website/client/src/components/admin-panel/user-support/index.vue
+++ b/website/client/src/components/admin-panel/user-support/index.vue
@@ -18,7 +18,7 @@
         />
 
         <subscription-and-perks
-          :subscription="hero.purchased.plan"
+          :hero="hero"
         />
 
         <cron-and-auth
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 0211a0f531..61abb08294 100644
--- a/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
+++ b/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
@@ -8,58 +8,113 @@
       Subscription, Monthly Perks
     </h3>
     <div v-if="expand">
-      <div v-if="subscription.paymentMethod">
-        Payment Method:
-        <strong>{{ subscription.paymentMethod }}</strong>
-      </div>
-      <div v-if="subscription.planId">
-        Payment Schedule ("basic-earned" is monthly):
-        <strong>{{ subscription.planId }}</strong>
-      </div>
-      <div v-if="subscription.dateCreated">
-        Creation Date:
-        <strong>{{ moment(subscription.dateCreated).format('YYYY/MM/DD') }}</strong>
-      </div>
-      <div v-if="subscription.dateTerminated">
-        Termination Date:
-        <strong>{{ moment(subscription.dateTerminated).format('YYYY/MM/DD') }}</strong>
-      </div>
-      <div>
-        Consecutive Months:
-        <strong>{{ subscription.consecutive.count }}</strong>
-      </div>
-      <div>
-        Months Until Renewal:
-        <strong>{{ subscription.consecutive.offset }}</strong>
-      </div>
-      <div>
-        Gem Cap:
-        <strong>{{ subscription.consecutive.gemCapExtra + 25 }}</strong>
-      </div>
-      <div
-        v-if="subscription.extraMonths > 0"
-      >
-        Additional Credit (applied upon cancellation):
-        <strong>{{ subscription.extraMonths }}</strong>
-      </div>
-      <div>
-        Mystery Items:
-        <span
-          v-for="(item, index) in subscription.mysteryItems"
-          :key="index"
+      <form @submit.prevent="saveHero({hero, msg: 'Subscription Perks'})">
+        <div v-if="hero.purchased.plan.paymentMethod">
+          Payment method:
+          <strong>{{ hero.purchased.plan.paymentMethod }}</strong>
+        </div>
+        <div v-if="hero.purchased.plan.planId">
+          Payment schedule ("basic-earned" is monthly):
+          <strong>{{ hero.purchased.plan.planId }}</strong>
+        </div>
+        <div v-if="hero.purchased.plan.dateCreated">
+          Creation date:
+          <strong>{{ dateFormat(hero.purchased.plan.dateCreated) }}</strong>
+        </div>
+        <div>
+          Termination date:
+          <strong
+            v-if="hero.purchased.plan.dateTerminated"
+          >
+            {{ dateFormat(hero.purchased.plan.dateTerminated) }}
+          </strong>
+          <strong v-else> None </strong>
+        </div>
+        <div>
+          Consecutive months:
+          <strong>{{ hero.purchased.plan.consecutive.count }}</strong>
+        </div>
+        <div>
+          Months until renewal:
+          <strong>{{ hero.purchased.plan.consecutive.offset || 1}}</strong>
+        </div>
+          <div>
+            Next Mystic Hourglass:
+            <strong>{{ nextHourGlassDate }}</strong>
+          </div>
+          <div class="form-inline">
+            <label>
+              Mystic Hourglasses:
+              <input
+                v-model="hero.purchased.plan.consecutive.trinkets"
+                class="form-control"
+                type="number"
+                min="0"
+                step="1"
+              >
+            </label>
+          </div>
+          <div>
+            Gem cap:
+            <strong>{{ hero.purchased.plan.consecutive.gemCapExtra + 25 }}</strong>
+          </div>
+          <div class="form-inline">
+          <label>
+            Gems bought this month:
+            <input
+              v-model="hero.purchased.plan.gemsBought"
+              class="form-control"
+              type="number"
+              min="0"
+              :max="hero.purchased.plan.consecutive.gemCapExtra + 25"
+              step="1"
+            >
+            </label>
+          </div>
+        <div
+          v-if="hero.purchased.plan.extraMonths > 0"
         >
-          <strong v-if="index < subscription.mysteryItems.length"> {{ item }}, </strong>
-          <strong v-else> {{ item }} </strong>
-        </span>
-      </div>
+          Additional credit (applied upon cancellation):
+          <strong>{{ hero.purchased.plan.extraMonths }}</strong>
+        </div>
+        <div>
+          Mystery Items:
+          <span
+            v-if="hero.purchased.plan.mysteryItems.length > 0"
+          >
+            <span
+              v-for="(item, index) in hero.purchased.plan.mysteryItems"
+              :key="index"
+            >
+              <strong v-if="index < hero.purchased.plan.mysteryItems.length - 1">
+                {{ item }},
+              </strong>
+              <strong v-else> {{ item }} </strong>
+            </span>
+          </span>
+          <span v-else>
+            <strong>None</strong>
+          </span>
+        </div>
+        <input
+          type="submit"
+          value="Save"
+          class="btn btn-primary mt-1"
+        >
+      </form>
     </div>
   </div>
 </template>
 
 <script>
+import moment from 'moment';
+import saveHero from '../mixins/saveHero';
+import { getPlanContext } from '@/../../common/script/cron';
+
 export default {
+  mixins: [saveHero],
   props: {
-    subscription: {
+    hero: {
       type: Object,
       required: true,
     },
@@ -69,5 +124,17 @@ export default {
       expand: false,
     };
   },
+  computed: {
+    nextHourGlassDate () {
+      const currentPlanContext = getPlanContext(this.hero, new Date());
+
+      return currentPlanContext.nextHourglassDate.format('MMMM');
+    },
+  },
+  methods: {
+    dateFormat (date) {
+      return moment(date).format('YYYY/MM/DD');
+    },
+  },
 };
 </script>
diff --git a/website/server/controllers/api-v3/hall.js b/website/server/controllers/api-v3/hall.js
index a05b1e4f0f..e3f950b08a 100644
--- a/website/server/controllers/api-v3/hall.js
+++ b/website/server/controllers/api-v3/hall.js
@@ -273,6 +273,15 @@ api.updateHero = {
       hero.balance = updateData.balance;
     }
 
+    if (updateData.purchased && updateData.purchased.plan) {
+      if (updateData.purchased.plan.gemsBought) {
+        hero.purchased.plan.gemsBought = updateData.purchased.plan.gemsBought;
+      }
+      if (updateData.purchased.plan.consecutive && updateData.purchased.plan.consecutive.trinkets) {
+        hero.purchased.plan.consecutive.trinkets = updateData.purchased.plan.consecutive.trinkets;
+      }
+    }
+
     // give them gems if they got an higher level
     // tier = level in this context
     let newTier = updateData.contributor && updateData.contributor.level;