diff --git a/website/client/src/assets/images/confetti.png b/website/client/src/assets/images/confetti.png
new file mode 100644
index 0000000000..f2bcbc52e3
Binary files /dev/null and b/website/client/src/assets/images/confetti.png differ
diff --git a/website/client/src/assets/scss/typography.scss b/website/client/src/assets/scss/typography.scss
index 0b495912d7..59b206aafd 100644
--- a/website/client/src/assets/scss/typography.scss
+++ b/website/client/src/assets/scss/typography.scss
@@ -87,6 +87,10 @@ h4 {
   opacity: 0.75;
 }
 
+.bg-gray-100 {
+  background-color: $gray-100 !important;
+}
+
 .bg-gray-300 {
   background-color: $gray-300 !important;
 }
@@ -103,6 +107,18 @@ h4 {
   background-color: $green-10 !important;
 }
 
+.bg-green-100 {
+  background-color: $green-100 !important;
+}
+
+.bg-purple-100 {
+  background-color: $purple-100 !important;
+}
+
+.bg-purple-300 {
+  background-color: $purple-300 !important;
+}
+
 .bg-white {
   background-color: $white !important;
 }
diff --git a/website/client/src/components/settings/subscription.vue b/website/client/src/components/settings/subscription.vue
index 5c407aaf6a..685430c6a0 100644
--- a/website/client/src/components/settings/subscription.vue
+++ b/website/client/src/components/settings/subscription.vue
@@ -37,7 +37,30 @@
         </div>
         <div class="d-flex justify-content-center">
           <div class="d-flex flex-column mr-4">
-            <div class="d-flex mb-3 align-items-center">
+            <div
+              v-if="gemCap > 24"
+              class="w-100 green-gradient mb-3 text-center"
+            >
+              <div class='cap-readout bg-purple-300'>
+                <div
+                  v-once
+                  class="svg-icon svg-gems"
+                  v-html="icons.subscriberGems"
+                ></div>
+                <div class="white label"> {{ $t('gemCap') }}</div>
+                <div class="white readout"> {{ gemCap }} / 50</div>
+                <div class="progress-bar bg-purple-100">
+                  <div
+                    class="progress-fill h-100 bg-green-100"
+                    :style="`width: ${gemCap / 50 * 100}%`"
+                  >
+                  </div>
+                </div>
+                <img src="~@/assets/images/confetti.png">
+              </div>
+              <small class="teal-1">{{ $t('resubscribeToPickUp') }}</small>
+            </div>
+            <div v-else class="d-flex mb-3 align-items-center">
               <div class="sub-benefit bg-gray-600 d-flex mr-4">
                 <div
                   v-once
@@ -221,14 +244,14 @@
           </div>
           <div
             v-else-if="hasCanceledSubscription"
-            class="d-flex flex-column align-items-center mt-4"
+            class="d-flex flex-column align-items-center"
           >
-            <div class="round-container bg-gray-300
+            <div class="round-container bg-gray-100
               d-flex align-items-center justify-content-center"
             >
               <div
                 v-once
-                class="svg-icon svg-close"
+                class="svg svg-icon svg-close color white"
                 v-html="icons.closeIcon"
               ></div>
             </div>
@@ -236,12 +259,12 @@
               {{ $t('subscriptionCanceled') }}
             </h2>
             <div
-              class="w-75 text-center mb-4"
+              class="text-center mb-4"
               v-html="$t('subscriptionInactiveDate', {date: subscriptionEndDate})"
             >
             </div>
             <h2>{{ $t('readyToResubscribe') }}</h2>
-            <subscription-options class="w-100 mb-2" />
+            <subscription-options class="w-100 mb-4" :canceled="true"/>
           </div>
           <div
             v-if="hasSubscription"
@@ -415,6 +438,50 @@
     border-radius: 8px;
   }
 
+  .cap-readout {
+    height: 76px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    position: relative;
+
+    img {
+      position: absolute;
+      top: 2px;
+      right: 3px;
+    }
+
+    .label {
+      left: 92px;
+    }
+
+    .progress-bar {
+      position: absolute;
+      top: 42px;
+      left: 92px;
+      width: 330px;
+      height: 12px;
+      border-radius: 99px;
+    }
+
+    .readout {
+      right: 22px;
+    }
+
+    .svg-gems {
+      position: absolute;
+      left: 14px;
+      top: 14px;
+    }
+
+    .white {
+      position: absolute;
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 1.2;
+      top: 14px;
+    }
+  }
+
   .disabled {
     opacity: 0.64;
 
@@ -444,6 +511,19 @@
     }
   }
 
+  .green-gradient {
+    background: linear-gradient(90deg, rgba(119, 244, 199, 1), rgba(114, 207, 255, 1));
+    padding: 2px 2px 0px 2px;
+    border-radius: 8px;
+    height: 108px;
+
+    .teal-1 {
+      position: relative;
+      font-weight: 700;
+      top: 4px;
+    }
+  }
+
   .header-mid {
     width: 347px;
   }
@@ -583,18 +663,8 @@
   }
 
   .svg-close {
-    width: 26px;
-    height: 26px;
-
-    & ::v-deep svg path {
-      stroke: $white;
-      stroke-width: 3;
-    }
-  }
-
-  .svg-credit-card {
-    width: 21.3px;
-    height: 16px;
+    width: 32px;
+    height: 32px;
   }
 
   .svg-food {
@@ -684,7 +754,6 @@ import applePayLogo from '@/assets/svg/apple-pay-logo.svg';
 import calendarIcon from '@/assets/svg/calendar-purple.svg';
 import checkmarkIcon from '@/assets/svg/check.svg';
 import closeIcon from '@/assets/svg/close.svg';
-import creditCardIcon from '@/assets/svg/credit-card-icon.svg';
 import dividerStars from '@/assets/svg/divider-stars.svg';
 import gemIcon from '@/assets/svg/gem.svg';
 import giftBox from '@/assets/svg/gift-purple.svg';
@@ -735,7 +804,6 @@ export default {
         calendarIcon,
         checkmarkIcon,
         closeIcon,
-        creditCardIcon,
         dividerStars,
         gemIcon,
         giftBox,
@@ -846,22 +914,22 @@ export default {
         case this.paymentMethods.AMAZON_PAYMENTS:
           return {
             icon: this.icons.amazonPayLogo,
-            class: 'svg-amazon-pay mt-3',
+            class: 'svg-amazon-pay',
           };
         case this.paymentMethods.APPLE:
           return {
             icon: this.icons.applePayLogo,
-            class: 'svg-apple-pay mt-4',
+            class: 'svg-apple-pay',
           };
         case this.paymentMethods.GOOGLE:
           return {
             icon: this.icons.googlePayLogo,
-            class: 'svg-google-pay mt-4',
+            class: 'svg-google-pay',
           };
         case this.paymentMethods.PAYPAL:
           return {
             icon: this.icons.paypalLogo,
-            class: 'svg-paypal mt-4',
+            class: 'svg-paypal',
           };
         case this.paymentMethods.STRIPE:
           return {
diff --git a/website/client/src/components/settings/subscriptionOptions.vue b/website/client/src/components/settings/subscriptionOptions.vue
index 53ec52ece5..791f9e46d7 100644
--- a/website/client/src/components/settings/subscriptionOptions.vue
+++ b/website/client/src/components/settings/subscriptionOptions.vue
@@ -1,14 +1,18 @@
 <template>
   <div id="subscription-form">
-    <div class="mb-3 w-100 h-100">
+    <div class="w-100 h-100">
       <!-- eslint-disable vue/no-use-v-if-with-v-for -->
       <div
         v-for="block in subscriptionBlocksOrdered"
         v-if="block.target !== 'group' && block.canSubscribe === true"
         :key="block.key"
         :value="block.key"
-        class="subscribe-option mb-2 d-flex"
-        :class="{selected: subscription.key === block.key, final: block.months === 12}"
+        class="subscribe-option d-flex"
+        :class="{
+          selected: subscription.key === block.key,
+          'mb-2': block.months !== 12,
+          final: block.months === 12,
+        }"
         @click="updateSubscriptionData(block.key)"
       >
         <div
@@ -129,9 +133,11 @@
         </div>
       </div>
     </div>
-    <div class="mx-4 mb-4 text-center">
+    <div
+      v-if="note"
+      class="mx-4 mb-4 text-center"
+    >
       <small
-        v-if="note"
         v-once
         class="font-italic"
       >
@@ -151,6 +157,7 @@
     <button
       v-else
       class="btn btn-primary w-100"
+      :class="canceled ? 'mt-4' : 'mt-3'"
       @click="$root.$emit('bv::show::modal', 'buy-subscription')"
     > {{ $t('subscribe') }} </button>
     <b-modal
@@ -234,13 +241,9 @@
     line-height: 24px;
   }
 
-  .gradient-banner {
-    padding-left: 100px;
-    padding-right: 100px;
-
-    small {
-      color: $teal-1;
-    }
+  .gradient-banner small {
+    color: $teal-1;
+    width: 61%;
   }
 
   .ribbon {
@@ -266,7 +269,7 @@
   }
 
   .subscribe-option {
-    width: 448px;
+    max-width: 448px;
     height: 120px;
     border-radius: 8px;
     box-shadow: 0px 1px 3px 0px rgba($black, 0.12), 0px 1px 2px 0px rgba($black, 0.24);
@@ -331,6 +334,10 @@ export default {
       type: String,
       default: '',
     },
+    canceled: {
+      type: Boolean,
+      default: false,
+    },
   },
   data () {
     return {
diff --git a/website/common/locales/en/subscriber.json b/website/common/locales/en/subscriber.json
index a6ed9a7a22..3e53f42fe7 100644
--- a/website/common/locales/en/subscriber.json
+++ b/website/common/locales/en/subscriber.json
@@ -230,6 +230,7 @@
     "subMonths": "Months Subscribed",
     "needToUpdateCard": "Need to update your card?",
     "readyToResubscribe": "Are you ready to resubscribe?",
+    "resubscribeToPickUp": "Resubscribe to pick up where you left off!",
     "cancelYourSubscription": "Need to cancel your subscription?",
     "cancelSubAlternatives": "If you're having technical problems or Habitica doesn't seem to be working out for you, please consider <a href='mailto:admin@habitica.com'>contacting us</a>. We want to help you get the most from Habitica.",
     "sendAGift": "Send Gift",