diff --git a/website/client/src/assets/scss/form.scss b/website/client/src/assets/scss/form.scss
index 8e21bc06a4..b161472271 100644
--- a/website/client/src/assets/scss/form.scss
+++ b/website/client/src/assets/scss/form.scss
@@ -180,8 +180,8 @@ input, textarea, input.form-control, textarea.form-control {
 }
 
 // used in checkboxes and radios
-$bg-focused-active-control: #4f2993;
-$bg-disabled-control: #34303a;
+$bg-focused-active-control: $purple-200;
+$bg-disabled-control: $gray-10;
 
 // custom control
 .custom-control {
@@ -231,17 +231,21 @@ $bg-disabled-control: #34303a;
       background-color: inherit;
     }
 
-    &:focus:not(:checked):not(:disabled)~.custom-control-label::before, &:active:not(:checked):not(:disabled)~.custom-control-label::before  {
-      box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1);
+    &:focus:not(:checked):not(:disabled)~.custom-control-label::before, 
+    &:active:not(:checked):not(:disabled)~.custom-control-label::before  {
+      border: 2px solid $gray-300;
+      box-shadow: 0 0 0 2px rgba(146, 92, 243, 0.5);
     }
 
-    &:focus:checked:not(:disabled)~.custom-control-label::before, &:active:checked:not(:disabled)~.custom-control-label::before  {
-      box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1);
-      border-color: $purple-400;
+    &:focus:checked:not(:disabled)~.custom-control-label::before, 
+    &:active:checked:not(:disabled)~.custom-control-label::before  {
+      box-shadow: 0 0 0 2px rgba(146, 92, 243, 0.5);
+      border-color: 2 px solid $purple-400;
       background-color: $purple-400;
     }
 
-    &:focus:disabled~.custom-control-label::before, &:active:disabled~.custom-control-label::before  {
+    &:focus:disabled~.custom-control-label::before, 
+    &:active:disabled~.custom-control-label::before  {
       box-shadow: 0 0 0 6px rgba($bg-disabled-control, 0.1);
     }
 
diff --git a/website/client/src/components/group-plans/createGroupModalPages.vue b/website/client/src/components/group-plans/createGroupModalPages.vue
index b354f6ac63..cc1470837a 100644
--- a/website/client/src/components/group-plans/createGroupModalPages.vue
+++ b/website/client/src/components/group-plans/createGroupModalPages.vue
@@ -1,3 +1,4 @@
+ <!-- THIS IS A VERY OLD FILE DO NOT USE -->
 <template>
   <div class="create-group-modal-pages">
     <div
diff --git a/website/client/src/components/group-plans/groupPlanCreationModal.vue b/website/client/src/components/group-plans/groupPlanCreationModal.vue
new file mode 100644
index 0000000000..d7980031f9
--- /dev/null
+++ b/website/client/src/components/group-plans/groupPlanCreationModal.vue
@@ -0,0 +1,356 @@
+<template>
+  <b-modal
+    id="create-group"
+    :title="activePage === PAGES.CREATE_GROUP ? 'Create your Group' : 'Select Payment'"
+    :hide-footer="true"
+    :hide-header="true"
+    size="md"
+    @hide="onHide()"
+  >
+    <div
+      v-if="activePage === PAGES.CREATE_GROUP"
+      class="col-12"
+    >
+      <!-- HEADER -->
+      <div
+        class="modal-close"
+      >
+        <span
+          class="cancel-text"
+          @click="close()"
+        >
+          {{ $t('cancel') }}
+        </span>
+        <button
+          class="btn btn-primary next-button"
+          :value="$t('next')"
+          :disabled="!newGroupIsReady"
+          @click="createGroup()"
+        >
+          {{ $t('next') }}
+        </button>
+      </div>
+      <h2>{{ $t('createGroup') }}</h2>
+
+      <!-- FORM -->
+      <div class="form-group">
+        <lockable-label
+          :text="$t('nameStar')"
+        />
+        <input
+          id="new-group-name"
+          v-model="newGroup.name"
+          class="form-control input-medium option-content name-input"
+          required="required"
+          type="text"
+          :placeholder="$t('nameStarText')"
+        >
+      </div>
+      <div class="form-group">
+        <lockable-label
+          for="new-group-description"
+          :text="$t('descriptionOptional')"
+          class="description-label"
+        />
+        <div class="characters-remaining">
+          {{ $t('charactersRemaining', {characters: charactersRemaining}) }}
+        </div>
+        <textarea
+          id="new-group-description"
+          v-model="newGroup.description"
+          class="form-control option-content description-input"
+          cols="3"
+          :placeholder="$t('descriptionOptionalText')"
+          maxlength="250"
+        ></textarea>
+      </div>
+      <div class="form-group">
+        <div class="custom-control custom-checkbox">
+          <input
+            id="create-group-leaderOnlyChallenges-checkbox"
+            v-model="newGroup.leaderOnly.challenges"
+            class="custom-control-input"
+            type="checkbox"
+          >
+          <label
+            class="custom-control-label"
+            for="create-group-leaderOnlyChallenges-checkbox"
+          >{{ $t('leaderOnlyChallenges') }}</label>
+        </div>
+      </div>
+      <div class="form-group">
+        <lockable-label
+          :text="$t('groupUse')"
+        />
+        <select-translated-array
+          :items="[
+            'groupParentChildren',
+            'groupCouple',
+            'groupFriends',
+            'groupCoworkers',
+            'groupManager',
+            'groupTeacher'
+          ]"
+          class="group-input"
+          :placeholder="'groupUseDefault'"
+          :value="newGroup.demographics"
+          @select="newGroup.demographics = $event"
+        />
+      </div>
+      <div class="form-group">
+        <button
+          class="btn btn-primary btn-lg btn-block btn-payment"
+          :disabled="!newGroupIsReady"
+          @click="createGroup()"
+        >
+          {{ $t('nextPaymentMethod') }}
+        </button>
+      </div>
+    </div>
+    <!-- PAYMENT -->
+    <!-- @TODO: Separate payment into a separate modal -->
+    <div
+      v-if="activePage === PAGES.PAY"
+      class="col-12 payments"
+    >
+      <div class="text-center">
+        <payments-buttons
+          :stripe-fn="() => pay(PAYMENTS.STRIPE)"
+          :amazon-data="pay(PAYMENTS.AMAZON)"
+        />
+      </div>
+    </div>
+  </b-modal>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  h2 {
+    color: $purple-300;
+    font-size: 1.25rem;
+    height: 28px;
+    width: 120px;
+    margin-top: 24px;
+    align-self: center;
+  }
+
+  .cancel-text {
+    color: $blue-10;
+    font-size: 0.875rem;
+    margin-right: 16px;
+    text-align: center;
+    cursor: pointer;
+  }
+  .next-button {
+    align-self: center;
+  }
+
+  .form-control::placeholder {
+    color: $gray-50;
+    height: 32px;
+  }
+
+  .description-label {
+    margin-bottom: -24px;
+  }
+
+  .name-input, .description-input, .group-input {
+    margin-top: -4px;
+  }
+
+ .characters-remaining {
+  color: $gray-100;
+  font-size: 0.75rem;
+  line-height: 1.33;
+  text-align: right;
+  margin-bottom: 12px;
+ }
+
+  .description-input {
+    height: 56px;
+  }
+
+  .spacer {
+    margin-bottom: 16px !important;
+  }
+
+  .btn-payment {
+    margin: 24px 112px 24px 112px;
+    width: 177px;
+  }
+
+  .payments {
+    padding: 24px;
+  }
+
+  .payment-options {
+    margin-bottom: 4em;
+
+    .purple-box {
+      background-color: #4f2a93;
+      color: #fff;
+      padding: .5em;
+      border-radius: 8px;
+      width: 200px;
+      height: 215px;
+
+      .dollar {
+      }
+
+      .number {
+        font-size: 60px;
+      }
+
+      .name {
+        width: 100px;
+        margin-left: .3em;
+      }
+
+      div {
+        display: inline-block;
+      }
+    }
+
+    .box, .purple-box {
+      display: inline-block;
+      vertical-align: bottom;
+    }
+  }
+
+</style>
+<style lang="scss">
+  @import '~@/assets/scss/mixins.scss';
+  #create-group {
+    .modal-dialog {
+      max-width: 448px;
+    }
+    .modal-content {
+      width: 448px;
+      max-height: 436px;
+      border-radius: 8px;
+      box-shadow: 0 14px 28px 0 rgba(26, 24, 29, 0.24), 0 10px 10px 0 rgba(26, 24, 29, 0.28);
+    }
+    .modal-body{
+      padding: 0px;
+      margin-left: 12px;
+      margin-right: 12px;
+    }
+    .modal-close {
+      position: absolute;
+      right: 16px;
+      cursor: pointer;
+      top: 0px;
+    }
+  }
+</style>
+
+<script>
+import paymentsMixin from '../../mixins/payments';
+import { mapState } from '@/libs/store';
+import paymentsButtons from '@/components/payments/buttons/list';
+import selectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
+import lockableLabel from '@/components/tasks/modal-controls/lockableLabel';
+import * as Analytics from '@/libs/analytics';
+
+export default {
+  components: {
+    paymentsButtons,
+    selectTranslatedArray,
+    lockableLabel,
+  },
+  mixins: [paymentsMixin],
+  data () {
+    return {
+      amazonPayments: {},
+      PAGES: {
+        CREATE_GROUP: 'create-group',
+        // UPGRADE_GROUP: 'upgrade-group',
+        PAY: 'pay',
+      },
+      PAYMENTS: {
+        AMAZON: 'amazon',
+        STRIPE: 'stripe',
+      },
+      paymentMethod: '',
+      newGroup: {
+        type: 'guild',
+        privacy: 'private',
+        name: '',
+        description: '',
+        leaderOnly: {
+          challenges: false,
+        },
+        demographics: null,
+        user: '',
+      },
+      activePage: 'create-group',
+      type: 'guild',
+    };
+  },
+  computed: {
+    ...mapState({ user: 'user.data' }),
+    newGroupIsReady () {
+      return Boolean(this.newGroup.name) && Boolean(this.newGroup.demographics);
+    },
+    charactersRemaining () {
+      const currentLength = this.newGroup.description ? this.newGroup.description.length : 0;
+      return 250 - currentLength;
+    },
+  },
+  methods: {
+    close () {
+      this.$root.$emit('bv::hide::modal', 'create-group');
+    },
+    changePage (page) {
+      this.activePage = page;
+    },
+    createGroup () {
+      this.changePage(this.PAGES.PAY);
+    },
+    pay (paymentMethod) {
+      const subscriptionKey = 'group_monthly'; // @TODO: Get from content API?
+      const demographicsKey = this.newGroup.demographics;
+      const paymentData = {
+        subscription: subscriptionKey,
+        coupon: null,
+        demographics: demographicsKey,
+      };
+
+      Analytics.track({
+        hitType: 'event',
+        eventName: 'group plan create',
+        eventAction: 'group plan create',
+        eventCategory: 'behavior',
+        demographics: this.newGroup.demographics,
+        type: this.newGroup.type,
+      }, { trackOnClient: true });
+
+      if (this.upgradingGroup && this.upgradingGroup._id) {
+        paymentData.groupId = this.upgradingGroup._id;
+        paymentData.group = this.upgradingGroup;
+      } else {
+        paymentData.groupToCreate = this.newGroup;
+      }
+
+      this.paymentMethod = paymentMethod;
+
+      if (this.paymentMethod === this.PAYMENTS.AMAZON) {
+        paymentData.type = 'subscription';
+        return paymentData;
+      }
+
+      if (this.paymentMethod === this.PAYMENTS.STRIPE) {
+        this.redirectToStripe(paymentData);
+      }
+
+      return null;
+    },
+
+    onHide () {
+      this.sendingInProgress = false;
+    },
+
+  },
+};
+</script>
diff --git a/website/client/src/components/groups/groupPlan.vue b/website/client/src/components/groups/groupPlan.vue
index ec5aee5442..c628774d9e 100644
--- a/website/client/src/components/groups/groupPlan.vue
+++ b/website/client/src/components/groups/groupPlan.vue
@@ -1,6 +1,7 @@
 <template>
   <!-- @TODO: Move to group plans folder-->
   <div>
+    <group-plan-creation-modal />
     <div>
       <div class="header">
         <h1 class="text-center">
@@ -51,6 +52,7 @@
           </div>
         </div>
       </div>
+      <!-- Upgrading an existing group -->
       <div
         v-if="upgradingGroup._id"
         id="upgrading-group"
@@ -100,153 +102,53 @@
           </div>
         </div>
       </div>
+      <!-- Create a new group -->
       <div
         v-if="!upgradingGroup._id"
         class="container col-6 offset-3 create-option"
       >
         <div class="row">
           <h1 class="col-12 text-center purple-header">
-            Create your Group today!
+            Create Your Group Today!
           </h1>
         </div>
         <div class="row">
           <div class="col-12 text-center">
             <button
               class="btn btn-primary create-group"
-              @click="launchModal('create')"
+              @click="launchModal('create-page')"
             >
-              Create Your New Group
+              Create Your New Group!
             </button>
           </div>
         </div>
-        <div class="row pricing">
-          <div class="col-5">
-            <div class="dollar">
-              $
-            </div>
-            <div class="number">
-              9
-            </div>
-            <div class="name">
-              <div>Group Owner</div>
-              <div>Subscription</div>
-            </div>
+        <div class="row pricing justify-content-center align-items-center">
+          <div class="dollar">
+            $
           </div>
-          <div class="col-1">
-            <div class="plus">
-              +
-            </div>
+          <div class="number">
+            9
           </div>
-          <div class="col-6">
-            <div class="dollar">
-              $
-            </div>
-            <div class="number">
-              3
-            </div>
-            <div class="name">
-              <div>Each Additional</div>
-              <div>Member</div>
-            </div>
+          <div class="name">
+            <div>Group Owner</div>
+            <div>Subscription</div>
+          </div>
+          <div class="plus">
+            +
+          </div>
+          <div class="dollar">
+            $
+          </div>
+          <div class="number">
+            3
+          </div>
+          <div class="name">
+            <div>Each Additional</div>
+            <div>Member</div>
           </div>
         </div>
       </div>
     </div>
-    <b-modal
-      id="group-plan-modal"
-      :title="activePage === PAGES.CREATE_GROUP ? 'Create your Group' : 'Select Payment'"
-      size="md"
-      hide-footer="hide-footer"
-    >
-      <div
-        v-if="activePage === PAGES.CREATE_GROUP"
-        class="col-12"
-      >
-        <div class="form-group">
-          <label
-            class="control-label"
-            for="new-group-name"
-          >Name</label>
-          <input
-            id="new-group-name"
-            v-model="newGroup.name"
-            class="form-control input-medium option-content"
-            required="required"
-            type="text"
-            placeholder="Name"
-          >
-        </div>
-        <div class="form-group">
-          <label for="new-group-description">{{ $t('description') }}</label>
-          <textarea
-            id="new-group-description"
-            v-model="newGroup.description"
-            class="form-control option-content"
-            cols="3"
-            :placeholder="$t('description')"
-          ></textarea>
-        </div>
-        <div
-          v-if="type === 'guild'"
-          class="form-group"
-        >
-          <div class="custom-control custom-radio">
-            <input
-              v-model="newGroup.privacy"
-              class="custom-control-input"
-              type="radio"
-              name="new-group-privacy"
-              value="private"
-            >
-            <label class="custom-control-label">{{ $t('inviteOnly') }}</label>
-          </div>
-        </div>
-        <div class="form-group">
-          <div class="custom-control custom-checkbox">
-            <input
-              id="create-group-leaderOnlyChallenges-checkbox"
-              v-model="newGroup.leaderOnly.challenges"
-              class="custom-control-input"
-              type="checkbox"
-            >
-            <label
-              class="custom-control-label"
-              for="create-group-leaderOnlyChallenges-checkbox"
-            >{{ $t('leaderOnlyChallenges') }}</label>
-          </div>
-        </div>
-        <div
-          v-if="type === 'party'"
-          class="form-group"
-        >
-          <button
-            class="btn btn-secondary form-control"
-            :value="$t('create')"
-            @click="createGroup()"
-          ></button>
-        </div>
-        <div class="form-group">
-          <button
-            class="btn btn-primary btn-lg btn-block"
-            :disabled="!newGroupIsReady"
-            @click="createGroup()"
-          >
-            {{ $t('create') }}
-          </button>
-        </div>
-      </div>
-      <div
-        v-if="activePage === PAGES.PAY"
-        class="col-12"
-      >
-        <div class="text-center">
-          <payments-buttons
-            :stripe-fn="() => pay(PAYMENTS.STRIPE)"
-            :amazon-data="pay(PAYMENTS.AMAZON)"
-          />
-        </div>
-      </div>
-    </b-modal>
   </div>
 </template>
 
@@ -258,8 +160,8 @@
 
     .dollar {
       position: absolute;
-      left: -1em;
-      top: 1em;
+      left: -16px;
+      top: 16px;
     }
 
     .purple-box {
@@ -291,9 +193,9 @@
     background: #432874;
     background: linear-gradient(180deg, #4F2A93 0%, #432874 100%);
     color: #fff;
-    padding: 2em;
+    padding: 32px;
     height: 340px;
-    margin-bottom: 2em;
+    margin-bottom: 32px;
     margin-left: -12px;
     margin-right: -12px;
 
@@ -317,6 +219,7 @@
 
     .box {
       height: 416px;
+      border-radius: 8px;
     }
 
     h2 {
@@ -359,17 +262,19 @@
   button.create-group {
     width: 330px;
     height: 96px;
+    border-radius: 8px;
+    font-size: 1.5rem;
   }
 
   .purple-header {
     color: #6133b4;
     font-size: 48px;
-    margin-top: 1em;
+    margin-top: 16px;
   }
 
   .pricing {
-    margin-top: 2em;
-    margin-bottom: 4em;
+    margin-top: 32px;
+    margin-bottom: 64px;
 
     .dollar, .number, .name {
       display: inline-block;
@@ -378,30 +283,32 @@
     }
 
     .plus {
-      font-size: 34px;
+      font-size: 2.125rem;
       color: #a5a1ac;
+      margin-left: 16px;
+      margin-right: 16px;
     }
 
     .dollar {
-      margin-bottom: 1.5em;
-      font-size: 32px;
+      margin-bottom: 24px;
+      font-size: 2rem;
       font-weight: bold;
     }
 
     .name {
-      font-size: 24px;
-      margin-bottom: .8em;
-      margin-left: .5em;
+      font-size: 1.5rem;
+      margin-left: 8px;
+      margin-right: 8px;
     }
 
     .number {
-      font-size: 72px;
+      font-size: 4.5rem;
       font-weight: bolder;
     }
   }
 
   .payment-options {
-    margin-bottom: 4em;
+    margin-bottom: 64px;
 
     h4 {
       color: #34313a;
@@ -410,7 +317,7 @@
     .purple-box {
       background-color: #4f2a93;
       color: #fff;
-      padding: .5em;
+      padding: 8px;
       border-radius: 8px;
       width: 200px;
       height: 215px;
@@ -424,7 +331,7 @@
 
       .name {
         width: 100px;
-        margin-left: .3em;
+        margin-left: 4.8px;
       }
 
       .plus {
@@ -449,10 +356,12 @@ import paymentsMixin from '../../mixins/payments';
 import { mapState } from '@/libs/store';
 import positiveIcon from '@/assets/svg/positive.svg';
 import paymentsButtons from '@/components/payments/buttons/list';
+import groupPlanCreationModal from '../group-plans/groupPlanCreationModal';
 
 export default {
   components: {
     paymentsButtons,
+    groupPlanCreationModal,
   },
   mixins: [paymentsMixin],
   data () {
@@ -501,12 +410,7 @@ export default {
   },
   methods: {
     launchModal () {
-      this.changePage(this.PAGES.CREATE_GROUP);
-      this.$root.$emit('bv::show::modal', 'group-plan-modal');
-    },
-    changePage (page) {
-      this.activePage = page;
-      window.scrollTo(0, 0);
+      this.$root.$emit('bv::show::modal', 'create-group');
     },
     createGroup () {
       this.changePage(this.PAGES.PAY);
diff --git a/website/client/src/components/payments/amazonModal.vue b/website/client/src/components/payments/amazonModal.vue
index 8641a957bb..fcae0e01ec 100644
--- a/website/client/src/components/payments/amazonModal.vue
+++ b/website/client/src/components/payments/amazonModal.vue
@@ -196,7 +196,7 @@ export default {
           appState.group = pick(this.amazonPayments.groupToCreate, ['_id', 'memberCount', 'name']);
         } else {
           appState.newGroup = false;
-          appState.group = pick(this.amazonPayments.group, ['_id', 'memberCount', 'name']);
+          appState.group = pick(this.amazonPayments.group, ['_id', 'memberCount', 'name', 'type']);
         }
       } else if (paymentType && paymentType.indexOf('gift-') === 0) {
         appState.gift = this.amazonPayments.gift;
diff --git a/website/client/src/components/payments/successModal.vue b/website/client/src/components/payments/successModal.vue
index c816a3300d..59a2119557 100644
--- a/website/client/src/components/payments/successModal.vue
+++ b/website/client/src/components/payments/successModal.vue
@@ -2,8 +2,8 @@
   <b-modal
     id="payments-success-modal"
     :title="$t('accountSuspendedTitle')"
-    :hide-footer="isFromBalance"
-    :modal-class="isFromBalance ? ['modal-hidden-footer'] : []"
+    :hide-footer="isFromBalance || paymentData.newGroup"
+    :modal-class="isFromBalance || paymentData.newGroup ? ['modal-hidden-footer'] : []"
   >
     <div slot="modal-header">
       <div class="check-container d-flex align-items-center justify-content-center">
@@ -16,15 +16,49 @@
       <h2>{{ $t(isFromBalance ? 'success' : 'paymentSuccessful') }}</h2>
     </div>
     <div slot="modal-footer">
+      <!-- everyone else -->
       <div
-        v-once
+        v-if="paymentData.paymentType !== 'groupPlan' || paymentData.newGroup"
         class="small-text"
       >
         {{ $t('giftSubscriptionText4') }}
       </div>
+      <!-- upgradedGroup -->
+      <div
+        v-else
+        class="demographics d-flex flex-column justify-content-center"
+      >
+        <lockable-label
+          :text="$t('groupUse')"
+          class="mx-auto label-text"
+        />
+        <select-translated-array
+          :items="[
+            'groupParentChildren',
+            'groupCouple',
+            'groupFriends',
+            'groupCoworkers',
+            'groupManager',
+            'groupTeacher'
+          ]"
+          class="group-input"
+          :placeholder="'groupUseDefault'"
+          :value="upgradedGroup.demographics"
+          @select="upgradedGroup.demographics = $event"
+        />
+        <button
+          v-if="!paymentData.newGroup"
+          class="btn btn-primary mx-auto"
+          :disabled="!upgradedGroup.demographics"
+          @click="submit()"
+        >
+          {{ $t('submit') }}
+        </button>
+      </div>
     </div>
     <div class="row">
       <div class="col-12 modal-body-col">
+        <!-- buy gems for self -->
         <template v-if="paymentData.paymentType === 'gems'">
           <strong v-once>{{ $t('paymentYouReceived') }}</strong>
           <div class="details-block gems">
@@ -36,6 +70,7 @@
             <span>{{ paymentData.gemsBlock.gems }}</span>
           </div>
         </template>
+        <!-- buy or gift gems to someone else -->
         <template
           v-if="paymentData.paymentType === 'gift-gems'
             || paymentData.paymentType === 'gift-gems-balance'"
@@ -50,12 +85,14 @@
             <span>{{ paymentData.gift.gems.amount }}</span>
           </div>
         </template>
+        <!-- give gift subscription (non-recurring)-->
         <template v-if="paymentData.paymentType === 'gift-subscription'">
           <span
             v-html="$t('paymentYouSentSubscription', {
               name: paymentData.giftReceiver, months: paymentData.subscription.months})"
           ></span>
         </template>
+        <!-- buy self subscription (recurring) -->
         <template v-if="paymentData.paymentType === 'subscription'">
           <strong v-once>{{ $t('nowSubscribed') }}</strong>
           <div class="details-block">
@@ -65,31 +102,45 @@
             ></span>
           </div>
         </template>
+        <!-- group plan new or upgraded -->
         <template v-if="paymentData.paymentType === 'groupPlan'">
           <span
             v-html="$t(paymentData.newGroup
               ? 'groupPlanCreated' : 'groupPlanUpgraded', {groupName: paymentData.group.name})"
           ></span>
-          <div class="details-block">
-            <span
-              v-html="$t('paymentSubBilling', {
-                amount: groupPlanCost, months: paymentData.subscription.months})"
-            ></span>
+          <div
+            v-if="!paymentData.newGroup || paymentData.newGroup"
+            class=""
+          >
+            <div class="details-block group-billing-date">
+              <span
+                v-html="$t('groupsPaymentSubBilling', { renewalDate })"
+              >
+              </span>
+            </div>
+            <div class="small-text group-auto-renew">
+              <span
+                v-once
+              >{{ $t('groupsPaymentAutoRenew') }}
+              </span>
+            </div>
           </div>
         </template>
+        <!-- buy self subscription auto renew -->
         <template
-          v-if="paymentData.paymentType === 'groupPlan'
-            || paymentData.paymentType === 'subscription'"
+          v-if="paymentData.paymentType === 'subscription'"
         >
           <span
             v-once
             class="small-text auto-renew"
           >{{ $t('paymentAutoRenew') }}</span>
         </template>
+        <!-- buttons for subscriptions -->
         <button
+          v-if="paymentData.paymentType !== 'groupPlan'"
           v-once
           class="btn btn-primary"
-          @click="close()"
+          @click="submit()"
         >
           {{ $t('onwards') }}
         </button>
@@ -102,7 +153,7 @@
 @import '~@/assets/scss/colors.scss';
 
 #payments-success-modal .modal-md {
-  max-width: 20.5rem;
+  max-width: 448px;
 }
 
 #payments-success-modal .modal-content {
@@ -114,6 +165,7 @@
   border-bottom-left-radius: 8px;
 }
 
+
 #payments-success-modal .modal-header {
   justify-content: center;
   padding-top: 24px;
@@ -124,14 +176,14 @@
   border-bottom: none;
 
   h2 {
-    color: white;
+    color: $green-1;
   }
 
   .check-container {
     width: 64px;
     height: 64px;
     border-radius: 50%;
-    background: #1CA372;
+    background: $green-1;
     margin: 0 auto;
     margin-bottom: 16px;
   }
@@ -139,14 +191,13 @@
   .check {
     width: 35.1px;
     height: 28px;
-    color: white;
+    color: $white;
   }
 }
 
 #payments-success-modal .modal-body {
-  padding-top: 16px;
-  padding-bottom: 24px;
-  background: white;
+  padding: 16px 32px 24px 32px;
+  background: $white;
 
   .modal-body-col {
     display: flex;
@@ -162,9 +213,9 @@
   .details-block {
     background: $gray-700;
     border-radius: 4px;
-    padding: 8px 24px;
+    padding: 8px 16px;
     margin-top: 16px;
-    display: flex;
+    display: inline-flex;
     flex-direction: row;
     text-align: center;
 
@@ -188,6 +239,14 @@
     color: $orange-10;
     font-style: normal;
   }
+  .group-auto-renew {
+    margin: 12px 20px -8px 20px;
+    color: $yellow-5;
+    font-style: normal;
+  }
+  .group-billing-date {
+    width: 269px;
+  }
 }
 
 #payments-success-modal .modal-footer {
@@ -201,14 +260,49 @@
     font-style: normal;
   }
 }
+
+.demographics {
+  background-color: $gray-700;
+
+  .label-text {
+    margin-bottom: 20px;
+  }
+
+  .group-input {
+    width: 400px !important;
+    margin-top: -24px !important;
+  }
+  .btn {
+    margin-top: 0px;
+    width: 77px;
+    margin-bottom: 20px;
+  }
+}
 </style>
 
+<style lang="scss">
+  @import '~@/assets/scss/mixins.scss';
+
+
+</style>
+
+
 <script>
 import checkIcon from '@/assets/svg/check.svg';
 import gemIcon from '@/assets/svg/gem.svg';
+import { mapState } from '@/libs/store';
 import subscriptionBlocks from '@/../../common/script/content/subscriptionBlocks';
+import selectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
+import lockableLabel from '@/components/tasks/modal-controls/lockableLabel';
+import paymentsMixin from '@/mixins/payments';
+import * as Analytics from '@/libs/analytics';
 
 export default {
+  components: {
+    selectTranslatedArray,
+    lockableLabel,
+  },
+  mixins: [paymentsMixin],
   data () {
     return {
       icons: Object.freeze({
@@ -216,9 +310,14 @@ export default {
         gem: gemIcon,
       }),
       paymentData: {},
+      upgradedGroup: {
+        name: '',
+        demographics: null,
+      },
     };
   },
   computed: {
+    ...mapState({ user: 'user.data', group: 'group.data' }),
     groupPlanCost () {
       const sub = this.paymentData.subscription;
       const memberCount = this.paymentData.group.memberCount || 1;
@@ -227,6 +326,21 @@ export default {
     isFromBalance () {
       return this.paymentData.paymentType === 'gift-gems-balance';
     },
+    // upgradedGroup () {
+    //   const upgradedGroup = (this.paymentData.paymentType === 'groupPlan'
+    // && !this.paymentData.newGroup);
+    //   const demographicsKey = upgradedGroup.demographics;
+    //   const upgradedGroupName = upgradedGroup.name;
+    //   const upgradedGroupType = upgradedGroup.type;
+    //   const groupPlanUpgraded = {
+    //     demographics: demographicsKey,
+    //     name: upgradedGroupName,
+    //     type: upgradedGroupType,
+    //   };
+    //   console.log(groupPlanUpgraded.demographics,
+    //     groupPlanUpgraded.name, groupPlanUpgraded.type);
+    //   return groupPlanUpgraded;
+    // },
   },
   mounted () {
     this.$root.$on('habitica:payment-success', data => {
@@ -242,7 +356,17 @@ export default {
     this.$root.$off('habitica:payments-success');
   },
   methods: {
-    close () {
+    submit () {
+      if (!this.paymentData.newGroup) {
+        Analytics.track({
+          hitType: 'event',
+          eventName: 'group plan upgrade',
+          eventAction: 'group plan upgrade',
+          eventCategory: 'behavior',
+          demographics: this.upgradedGroup.demographics,
+          type: this.paymentData.group.type, // also tried this.upgradedGroup.type
+        }, { trackOnClient: true });
+      }
       this.paymentData = {};
       this.$root.$emit('bv::hide::modal', 'payments-success-modal');
     },
diff --git a/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue b/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue
index 0b201f3d11..21e0cad24f 100644
--- a/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue
+++ b/website/client/src/components/tasks/modal-controls/selectTranslatedArray.vue
@@ -9,6 +9,7 @@
       :right="right"
       :hide-icon="false"
       :inline-dropdown="inlineDropdown"
+      :placeholder="placeholder"
       @select="selectItem($event)"
     >
       <template v-slot:item="{ item }">
@@ -70,6 +71,9 @@ export default {
       type: Boolean,
       default: true,
     },
+    placeholder: {
+      type: String,
+    },
   },
   data () {
     return {
diff --git a/website/client/src/components/ui/selectList.vue b/website/client/src/components/ui/selectList.vue
index c5607b1e60..1d8c93cca2 100644
--- a/website/client/src/components/ui/selectList.vue
+++ b/website/client/src/components/ui/selectList.vue
@@ -12,7 +12,7 @@
       <template v-slot:button-content>
         <slot
           name="item"
-          :item="selected"
+          :item="selected || placeholder"
           :button="true"
         >
           <!-- Fallback content -->
@@ -114,6 +114,9 @@ export default {
       type: Boolean,
       default: true,
     },
+    placeholder: {
+      type: String,
+    },
   },
   data () {
     return {
diff --git a/website/client/src/mixins/payments.js b/website/client/src/mixins/payments.js
index bce95ff76d..f22c5ffc5f 100644
--- a/website/client/src/mixins/payments.js
+++ b/website/client/src/mixins/payments.js
@@ -39,6 +39,13 @@ export default {
       return moment(this.user.purchased.plan.dateTerminated)
         .format(this.user.preferences.dateFormat.toUpperCase());
     },
+    renewalDate () {
+      const renewalDate = moment().add(1, 'months');
+      if (!this.user.preferences || !this.user.preferences.dateFormat) {
+        return renewalDate;
+      }
+      return renewalDate.format(this.user.preferences.dateFormat.toUpperCase());
+    },
   },
   methods: {
     encodeGift (uuid, gift) {
@@ -140,6 +147,7 @@ export default {
       if (data.subscription) postData.sub = sub.key;
       if (data.coupon) postData.coupon = data.coupon;
       if (data.groupId) postData.groupId = data.groupId;
+      if (data.demographics) postData.demographics = data.demographics;
 
       const response = await axios.post(url, postData);
 
@@ -267,6 +275,10 @@ export default {
         this.amazonPayments.groupToCreate = data.groupToCreate;
       }
 
+      if (data.demographics) { // sending demographics
+        this.amazonPayments.demographics = data.demographics;
+      }
+
       this.amazonPayments.gift = data.gift;
       this.amazonPayments.type = data.type;
     },
diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json
index f777bd766d..f9e1cdd157 100644
--- a/website/common/locales/en/groups.json
+++ b/website/common/locales/en/groups.json
@@ -215,7 +215,7 @@
   "userIsClamingTask": "`<%= username %> has claimed:` <%= task %>",
   "approvalRequested": "Approval Requested",
   "cantDeleteAssignedGroupTasks": "Can't delete group tasks that are assigned to you.",
-  "groupPlanUpgraded": "<strong><%- groupName %></strong> was upgraded to a Group Plan!",
+  "groupPlanUpgraded": "<strong><%- groupName %></strong> was successfully upgraded to a Group Plan!",
   "groupPlanCreated": "<strong><%- groupName %></strong> was created!",
   "onlyGroupLeaderCanInviteToGroupPlan": "Only the group leader can invite users to a group with a subscription.",
   "paymentDetails": "Payment Details",
@@ -342,7 +342,22 @@
   "exampleGroupName": "Example: Avengers Academy",
   "exampleGroupDesc": "For those selected to join the training academy for The Avengers Superhero Initiative",
   "thisGroupInviteOnly": "This group is invitation only.",
+  "createGroup": "Create a Group",
+  "groupUse": "Which best describes the use of your Group?*",
+  "groupUseDefault": "Choose an answer",
+  "groupParentChildren": "Parent(s) setting up tasks for children",
+  "groupCouple": "Couple sharing tasks",
+  "groupFriends": "Friends sharing tasks",
+  "groupCoworkers": "Coworkers sharing tasks",
+  "groupManager": "Manager setting up tasks for employees",
+  "groupTeacher": "Teacher setting up tasks for students",
   "gettingStarted": "Getting Started",
+  "next": "Next",
+  "nameStar": "Name*",
+  "nameStarText": "Add a title",
+  "descriptionOptional": "Description",
+  "descriptionOptionalText": "Add a description",
+  "nextPaymentMethod": "Next: Payment Method",
   "congratsOnGroupPlan": "Congratulations on creating your new Group! Here are a few answers to some of the more commonly asked questions.",
   "whatsIncludedGroup": "What's included in the subscription",
   "whatsIncludedGroupDesc": "All members of the Group receive full subscription benefits, including the monthly subscriber items, the ability to buy Gems with Gold, and the Royal Purple Jackalope mount, which is exclusive to users with a Group Plan membership.",
diff --git a/website/common/locales/en/npc.json b/website/common/locales/en/npc.json
index f1f0a83d6e..443b4eb8e9 100644
--- a/website/common/locales/en/npc.json
+++ b/website/common/locales/en/npc.json
@@ -94,8 +94,10 @@
   "paymentYouSentGems": "You sent <strong><%- name %></strong>:",
   "paymentYouSentSubscription": "You sent <strong><%- name %></strong> a <%= months %>-months Habitica subscription.",
   "paymentSubBilling": "Your subscription will be billed <strong>$<%= amount %></strong> every <strong><%= months %> months</strong>.",
+  "groupsPaymentSubBilling": "Your next billing date is <strong><%= renewalDate %></strong>.",
   "paymentSubBillingWithMethod": "Your subscription will be billed <strong>$<%= amount %></strong> every <strong><%= months %> months</strong> via <strong><%= paymentMethod %></strong>.",
   "paymentAutoRenew": "This subscription will auto-renew until it is canceled. If you need to cancel this subscription, you can do so from your settings.",
+  "groupsPaymentAutoRenew": "This subscription will auto-renew until it is canceled. If you need to cancel, you can do so from the Group Billing tab.",
   "paymentCanceledDisputes": "We’ve sent a cancelation confirmation to your email. If you don’t see the email, please contact us to prevent future billing disputes.",
   "success": "Success!",
   "classGear": "Class Gear",
diff --git a/website/server/libs/payments/subscriptions.js b/website/server/libs/payments/subscriptions.js
index eaee4d9803..2052dc4c9a 100644
--- a/website/server/libs/payments/subscriptions.js
+++ b/website/server/libs/payments/subscriptions.js
@@ -86,6 +86,13 @@ async function createSubscription (data) {
       user: data.user, groupId: data.groupId, populateLeader: false, groupFields,
     });
 
+    if (group) {
+      analytics.track(
+        this.groupID,
+        data.demographics,
+      );
+    }
+
     if (!group) {
       throw new NotFound(shared.i18n.t('groupNotFound'));
     }