diff --git a/website/client/src/components/admin/admin-panel/user-support/index.vue b/website/client/src/components/admin/admin-panel/user-support/index.vue
index 7fc86366e6..fc95561b7d 100644
--- a/website/client/src/components/admin/admin-panel/user-support/index.vue
+++ b/website/client/src/components/admin/admin-panel/user-support/index.vue
@@ -5,19 +5,25 @@
       class="row"
     >
       <div class="form col-12">
-                <button
-          class="btn btn-danger mt-3 float-right"
-          @click="confirmDeleteHero"
-        >
-          Begin Member deletion
-        </button>
+        <div class="btn-group float-right">
+          <button
+            class="btn btn-danger"
+            @click="confirmDeleteHero"
+          >
+            <span
+              v-once
+              class="svg-icon icon-16 mt-1 mb-1"
+              v-html="icons.deleteIcon"
+            ></span>
+          </button>
+        </div>
+
         <basic-details
           :user-id="hero._id"
           :auth="hero.auth"
           :preferences="hero.preferences"
           :profile="hero.profile"
         />
-        
 
         <privileges-and-gems
           :hero="hero"
@@ -202,6 +208,7 @@ import CustomizationsOwned from './customizationsOwned.vue';
 import Achievements from './achievements.vue';
 import UserHistory from './userHistory.vue';
 import Stats from './stats.vue';
+import deleteIcon from '@/assets/svg/delete.svg?raw';
 
 import { userStateMixin } from '../../../../mixins/userState';
 
@@ -240,6 +247,9 @@ export default {
       adminHasPrivForParty: true,
       deleteHabiticaAccount: true,
       deleteAmplitudeData: true,
+      icons: Object.freeze({
+        deleteIcon,
+      }),
     };
   },
   watch: {
diff --git a/website/client/src/components/admin/admin-panel/user-support/partyAndQuest.vue b/website/client/src/components/admin/admin-panel/user-support/partyAndQuest.vue
index 6a4396d5e9..d58db0ffd8 100644
--- a/website/client/src/components/admin/admin-panel/user-support/partyAndQuest.vue
+++ b/website/client/src/components/admin/admin-panel/user-support/partyAndQuest.vue
@@ -341,16 +341,16 @@ export default {
       expand: false,
     };
   },
+  computed: {
+    userIsPartyLeader () {
+      return this.groupPartyData.leader === this.userId;
+    },
+  },
   watch: {
     resetCounter () {
       resetData(this);
     },
   },
-  computed: {
-    userIsPartyLeader () {
-      return this.groupPartyData.leader === this.userId;
-    }
-  },
   mounted () {
     resetData(this);
   },
@@ -363,11 +363,13 @@ export default {
       });
     },
     async makePartyLeader () {
-      await this.$store.dispatch('guilds:update', { group: {
-        id: this.groupPartyData._id,
-        leader: this.userId,
-      } });
-    }
+      await this.$store.dispatch('guilds:update', {
+        group: {
+          id: this.groupPartyData._id,
+          leader: this.userId,
+        },
+      });
+    },
   },
 };
 </script>
diff --git a/website/client/src/components/admin/admin-panel/user-support/subscriptionAndPerks.vue b/website/client/src/components/admin/admin-panel/user-support/subscriptionAndPerks.vue
index b415404ea7..bddfd175af 100644
--- a/website/client/src/components/admin/admin-panel/user-support/subscriptionAndPerks.vue
+++ b/website/client/src/components/admin/admin-panel/user-support/subscriptionAndPerks.vue
@@ -136,8 +136,9 @@
           </div>
         </div>
         <formRow
+          v-model="hero.purchased.plan.customerId"
           label="Customer ID"
-          v-model="hero.purchased.plan.customerId" />
+        />
         <div
           v-if="hero.purchased.plan.planId === 'group_plan_auto'"
           class="form-group row"
@@ -188,19 +189,22 @@
           </div>
         </div>
         <formRow
-          label="Creation date"
           v-if="hero.purchased.plan.dateCreated"
           v-model="hero.purchased.plan.dateCreated"
-          :suffix="dateFormat(hero.purchased.plan.dateCreated)" />
+          label="Creation date"
+          :suffix="dateFormat(hero.purchased.plan.dateCreated)"
+        />
         <formRow
-          label="Current sub start date"
           v-if="hero.purchased.plan.dateCurrentTypeCreated"
           v-model="hero.purchased.plan.dateCurrentTypeCreated"
-          :suffix="dateFormat(hero.purchased.plan.dateCurrentTypeCreated)" />
+          label="Current sub start date"
+          :suffix="dateFormat(hero.purchased.plan.dateCurrentTypeCreated)"
+        />
         <formRow
-          label="Termination date"
           v-model="hero.purchased.plan.dateTerminated"
-          :suffix="dateFormat(hero.purchased.plan.dateTerminated)">
+          label="Termination date"
+          :suffix="dateFormat(hero.purchased.plan.dateTerminated)"
+        >
           <template #suffix>
             <strong class="input-group-text">
               {{ dateFormat(hero.purchased.plan.dateTerminated) }}
@@ -214,23 +218,31 @@
               Terminate
             </a>
           </template>
-          <template #helpText v-if="isSubscribed() && !isCancelled()">
+          <template
+            v-if="isSubscribed() && !isCancelled()"
+            #helpText
+          >
             <span class="text-success">
               The subscription does not have a termination date and is active.
             </span>
           </template>
         </formRow>
         <formRow
-          label="Cumulative months"
           v-model="hero.purchased.plan.cumulativeCount"
-          inputType="number"
-          helpText="Cumulative subscribed months across subscription periods." />
+          label="Cumulative months"
+          input-type="number"
+          help-text="Cumulative subscribed months across subscription periods."
+        />
         <formRow
-          label="Extra months"
           v-model="hero.purchased.plan.extraMonths"
-          inputType="number"
-          helpText="Additional credit that is applied if a subscription is cancelled.">
-          <template #suffix v-if="hero.purchased.plan.dateTerminated && hero.purchased.plan.extraMonths > 0">
+          label="Extra months"
+          input-type="number"
+          help-text="Additional credit that is applied if a subscription is cancelled."
+        >
+          <template
+            v-if="hero.purchased.plan.dateTerminated && hero.purchased.plan.extraMonths > 0"
+            #suffix
+          >
             <a
               class="btn btn-warning"
               @click="applyExtraMonths"
@@ -240,21 +252,24 @@
           </template>
         </formRow>
         <formRow
-          label="Received hourglass bonus"
           v-model="hero.purchased.plan.hourglassPromoReceived"
-          :suffix="dateFormat(hero.purchased.plan.hourglassPromoReceived)" />
+          label="Received hourglass bonus"
+          :suffix="dateFormat(hero.purchased.plan.hourglassPromoReceived)"
+        />
         <formRow
-          label="Mystic Hourglasses"
           v-model="hero.purchased.plan.consecutive.trinkets"
-          inputType="number"
-          min="0" />
+          label="Mystic Hourglasses"
+          input-type="number"
+          min="0"
+        />
         <formRow
-          label="Gem cap increase"
           v-model="hero.purchased.plan.consecutive.gemCapExtra"
-          inputType="number"
+          label="Gem cap increase"
+          input-type="number"
           min="0"
           max="26"
-          step="2" />
+          step="2"
+        />
         <div class="form-group row">
           <label class="col-sm-3 col-form-label">
             Total Gem cap:
@@ -264,11 +279,12 @@
           </strong>
         </div>
         <formRow
-          label="Gems bought this month"
           v-model="hero.purchased.plan.gemsBought"
-          inputType="number"
+          label="Gems bought this month"
+          input-type="number"
           min="0"
-              :max="hero.purchased.plan.consecutive.gemCapExtra + 24" />
+          :max="hero.purchased.plan.consecutive.gemCapExtra + 24"
+        />
         <div class="form-group row">
           <label class="col-sm-3 col-form-label">
             Mystery Items:
@@ -601,8 +617,8 @@ export default {
       return `${PLAY_CONSOLE_ORDERS_BASE_URL}${this.paymentDetails?.transactionId || ''}`;
     },
     isGroupPlanMember () {
-      return this.hero.purchased.plan.planId === 'group_plan_auto'
-    }
+      return this.hero.purchased.plan.planId === 'group_plan_auto';
+    },
   },
   methods: {
     dateFormat (date) {
diff --git a/website/client/src/components/admin/formRow.vue b/website/client/src/components/admin/formRow.vue
index d18c0e071f..f5f370e5a8 100644
--- a/website/client/src/components/admin/formRow.vue
+++ b/website/client/src/components/admin/formRow.vue
@@ -1,43 +1,56 @@
 <template>
   <div class="form-group row">
     <label class="col-sm-3 col-form-label"><slot name="label">{{ label }}:</slot></label>
-    <div class="col-sm-9"
-      :class="editable ? 'editable' : 'col-form-label'">
+    <div
+      class="col-sm-9"
+      :class="editable ? 'editable' : 'col-form-label'"
+    >
       <slot>
         <div class="input-group">
-        <strong v-if="!editable">
-          {{ value || "---" }}
-        </strong>
-        <textarea
-          v-else-if="inputType === 'textarea'"
-          :value="value"
-          class="form-control"
-          :rows="rows"
-          @input="$emit('input', $event.target.value)"
-        ></textarea>
-        <input
-          v-else
-          :value="value"
-          class="form-control"
-          :type="inputType"
-          @input="$emit('input', $event.target.value)"
-          :min="min"
-          :max="max"
-          :step="step"
-        >
-        <div class="input-group-append" v-if="suffix || $slots.suffix">
-          <slot name="suffix">
-            <strong class="input-group-text">
-              {{ suffix }}
-            </strong>
-          </slot>
+          <strong v-if="!editable">
+            {{ value || "---" }}
+          </strong>
+          <textarea
+            v-else-if="inputType === 'textarea'"
+            :value="value"
+            class="form-control"
+            :rows="rows"
+            @input="$emit('input', $event.target.value)"
+          ></textarea>
+          <input
+            v-else
+            :value="value"
+            class="form-control"
+            :type="inputType"
+            :min="min"
+            :max="max"
+            :step="step"
+            @input="$emit('input', $event.target.value)"
+          >
+          <div
+            v-if="suffix || $slots.suffix"
+            class="input-group-append"
+          >
+            <slot name="suffix">
+              <strong class="input-group-text">
+                {{ suffix }}
+              </strong>
+            </slot>
+          </div>
         </div>
-      </div>
       </slot>
-      <div class="form-text text-muted" v-if="helpText || $slots.helpText">
-        <slot name="helpText">{{ helpText }}</slot>
+      <div
+        v-if="helpText || $slots.helpText"
+        class="form-text text-muted"
+      >
+        <slot name="helpText">
+          {{ helpText }}
+        </slot>
       </div>
-      <div class="form-text text-muted mt-1" v-if="$slots.subtitle">
+      <div
+        v-if="$slots.subtitle"
+        class="form-text text-muted mt-1"
+      >
         <slot name="subtitle"></slot>
       </div>
     </div>
@@ -60,8 +73,7 @@
 </style>
 
 <script>
-import { max } from 'lodash';
-import { min } from 'lodash';
+import { max, min } from 'lodash';
 
 export default {
   model: {
@@ -95,20 +107,20 @@ export default {
     min: {
       type: [Number, String],
       default: 0,
-      validator(value) {
+      validator (value) {
         return !isNaN(value) && min([value, 0]) === 0;
       },
     },
     max: {
       type: [Number, String],
-      validator(value) {
+      validator (value) {
         return !isNaN(value) && max([value, 100]) === 100;
       },
     },
     step: {
       type: [Number, String],
       default: 1,
-      validator(value) {
+      validator (value) {
         return !isNaN(value) && min([value, 1]) === 1;
       },
     },
diff --git a/website/client/src/components/admin/groups/group-support/groupPlan.vue b/website/client/src/components/admin/groups/group-support/groupPlan.vue
index 36b7f5671d..66fb28a6a6 100644
--- a/website/client/src/components/admin/groups/group-support/groupPlan.vue
+++ b/website/client/src/components/admin/groups/group-support/groupPlan.vue
@@ -1,26 +1,31 @@
 <template>
-    <div v-if="group.purchased.plan">
+  <div v-if="group.purchased.plan">
     <form-row
-      label="Payment Method"
       v-model="group.purchased.plan.paymentMethod"
-      :editable="false" />
+      label="Payment Method"
+      :editable="false"
+    />
     <form-row
-      label="Plan ID"
       v-model="group.purchased.plan.planId"
-      :editable="false" />
+      label="Plan ID"
+      :editable="false"
+    />
     <form-row
-      label="Customer ID"
       v-model="group.purchased.plan.customerId"
-      :editable="false" />
+      label="Customer ID"
+      :editable="false"
+    />
     <form-row
-      label="Creation Date"
       v-model="group.purchased.plan.dateCreated"
-      :editable="false" />
+      label="Creation Date"
+      :editable="false"
+    />
     <form-row
-      label="Termination Date"
       v-model="group.purchased.plan.dateTerminated"
-      :editable="false" />
-    </div>
+      label="Termination Date"
+      :editable="false"
+    />
+  </div>
 </template>
 
 <script>
diff --git a/website/client/src/components/admin/groups/group-support/index.vue b/website/client/src/components/admin/groups/group-support/index.vue
index 763de342e8..a25659fd5e 100644
--- a/website/client/src/components/admin/groups/group-support/index.vue
+++ b/website/client/src/components/admin/groups/group-support/index.vue
@@ -3,32 +3,37 @@
     <h2>{{ group.name }}</h2>
     <router-link
       v-if="isGroupPlan"
-      :to="{'name': 'groupPlanDetail', 'params': {'groupId': groupId}}">
+      :to="{'name': 'groupPlanDetail', 'params': {'groupId': groupId}}"
+    >
       Group Plan Page
     </router-link>
-    
+
     <supportContainer
       :title="$t('groupData')"
-        :onSave="updateGroup">
+      :on-save="updateGroup"
+    >
       <groupData
         :group="group"
       />
     </supportContainer>
     <supportContainer
-      :title="$t('groupPlanSubscription')">
+      :title="$t('groupPlanSubscription')"
+    >
       <groupPlan
         :group="group"
       />
     </supportContainer>
     <supportContainer
       v-if="group.type === 'party'"
-      :title="$t('questDetails')">
+      :title="$t('questDetails')"
+    >
       <quest
         :group="group"
       />
-      </supportContainer>
+    </supportContainer>
     <supportContainer
-      :title="$t('members')">
+      :title="$t('members')"
+    >
       <members
         :group="group"
       />
@@ -59,14 +64,6 @@ export default {
       group: {},
     };
   },
-  watch: {
-    groupId () {
-      this.loadGroup(this.groupId);
-    },
-  },
-  mounted () {
-    this.groupId = this.$route.params.groupId;
-  },
   computed: {
     isGroupPlan () {
       return this.group
@@ -75,6 +72,14 @@ export default {
         && this.group.purchased.plan.planId;
     },
   },
+  watch: {
+    groupId () {
+      this.loadGroup(this.groupId);
+    },
+  },
+  mounted () {
+    this.groupId = this.$route.params.groupId;
+  },
   methods: {
     clearData () {
       this.group = {};
@@ -82,17 +87,16 @@ export default {
     async loadGroup (groupId) {
       this.$emit('changeGroupId', groupId);
       this.group = await this.$store.dispatch('admin:getGroup', { groupId });
-
     },
     async updateGroup () {
       if (this.group && !this.group.id) {
         this.group.id = this.group._id || this.groupId; // Ensure group has an id property
       }
       await this.$store.dispatch('guilds:update', { group: this.group });
-      this.group = await this.$store.dispatch('admin:getGroup', { groupId: this.group.id })
+      this.group = await this.$store.dispatch('admin:getGroup', { groupId: this.group.id });
       await this.$store.dispatch('snackbars:add', {
         title: '',
-        text: `Group updated`,
+        text: 'Group updated',
         type: 'info',
       });
     },
diff --git a/website/client/src/components/admin/groups/group-support/quest.vue b/website/client/src/components/admin/groups/group-support/quest.vue
index f99ef057c8..fec4bc83fb 100644
--- a/website/client/src/components/admin/groups/group-support/quest.vue
+++ b/website/client/src/components/admin/groups/group-support/quest.vue
@@ -1,26 +1,29 @@
 <template>
-    <div>
-        <form-row
-            label="Quest Identifier"
-            v-model="group.quest.key"
-            :editable="false" />
-        <form-row
-            label="Quest Leader"
-            v-model="group.quest.leader"
-            :editable="false">
-            <template slot="subtitle">
-                <router-link
-                    :to="{'name': 'adminPanelUser', 'params': {'userIdentifier': group.quest.leader}}">
-                    {{ group.quest.leader }}
-                </router-link>
-            </template>
-        </form-row>
-        <form-row
-            label="Is Quest Active"
-            v-model="group.quest.active"
-            input-type="checkbox"
-            />
-    </div>
+  <div>
+    <form-row
+      v-model="group.quest.key"
+      label="Quest Identifier"
+      :editable="false"
+    />
+    <form-row
+      v-model="group.quest.leader"
+      label="Quest Leader"
+      :editable="false"
+    >
+      <template slot="subtitle">
+        <router-link
+          :to="{'name': 'adminPanelUser', 'params': {'userIdentifier': group.quest.leader}}"
+        >
+          {{ group.quest.leader }}
+        </router-link>
+      </template>
+    </form-row>
+    <form-row
+      v-model="group.quest.active"
+      label="Is Quest Active"
+      input-type="checkbox"
+    />
+  </div>
 </template>
 
 <script>