diff --git a/habitica-images b/habitica-images
index 5e51d6b8011..be2d077eb64 160000
--- a/habitica-images
+++ b/habitica-images
@@ -1 +1 @@
-Subproject commit 5e51d6b8011a9500557e184bc67bac3bb671eaa5
+Subproject commit be2d077eb64f9d19d73455ddd11d33c008a54bcf
diff --git a/test/api/unit/libs/bug-report.test.js b/test/api/unit/libs/bug-report.test.js
index 58eefca3e65..5cb33d39b49 100644
--- a/test/api/unit/libs/bug-report.test.js
+++ b/test/api/unit/libs/bug-report.test.js
@@ -44,7 +44,6 @@ describe('bug-report', () => {
         USER_HOURGLASSES: 0,
         USER_ID: userId,
         USER_LEVEL: 1,
-        USER_OFFSET_MONTHS: 0,
         USER_PAYMENT_PLATFORM: undefined,
         USER_SUBSCRIPTION: undefined,
         USER_TIMEZONE_OFFSET: 0,
diff --git a/test/api/unit/libs/cron.test.js b/test/api/unit/libs/cron.test.js
index 6757228033e..2863269ff2e 100644
--- a/test/api/unit/libs/cron.test.js
+++ b/test/api/unit/libs/cron.test.js
@@ -154,6 +154,14 @@ describe('cron', async () => {
       expect(user.purchased.plan.consecutive.count).to.equal(1);
     });
 
+    it('increments plan.cumulativeCount', async () => {
+      user.purchased.plan.cumulativeCount = 0;
+      await cron({
+        user, tasksByType, daysMissed, analytics,
+      });
+      expect(user.purchased.plan.cumulativeCount).to.equal(1);
+    });
+
     it('increments plan.consecutive.count by more than 1 if user skipped months between logins', async () => {
       user.purchased.plan.dateUpdated = moment().subtract(2, 'months').toDate();
       user.purchased.plan.consecutive.count = 0;
@@ -163,12 +171,13 @@ describe('cron', async () => {
       expect(user.purchased.plan.consecutive.count).to.equal(2);
     });
 
-    it('decrements plan.consecutive.offset when offset is greater than 0', async () => {
-      user.purchased.plan.consecutive.offset = 2;
+    it('increments plan.cumulativeCount by more than 1 if user skipped months between logins', async () => {
+      user.purchased.plan.dateUpdated = moment().subtract(3, 'months').toDate();
+      user.purchased.plan.cumulativeCount = 0;
       await cron({
         user, tasksByType, daysMissed, analytics,
       });
-      expect(user.purchased.plan.consecutive.offset).to.equal(1);
+      expect(user.purchased.plan.cumulativeCount).to.equal(3);
     });
 
     it('does not award unearned plan.consecutive.trinkets if subscription ended during an absence', async () => {
@@ -185,12 +194,12 @@ describe('cron', async () => {
     });
 
     it('does not increment plan.consecutive.gemCapExtra when user has reached the gemCap limit', async () => {
-      user.purchased.plan.consecutive.gemCapExtra = 25;
+      user.purchased.plan.consecutive.gemCapExtra = 26;
       user.purchased.plan.consecutive.count = 5;
       await cron({
         user, tasksByType, daysMissed, analytics,
       });
-      expect(user.purchased.plan.consecutive.gemCapExtra).to.equal(25);
+      expect(user.purchased.plan.consecutive.gemCapExtra).to.equal(26);
     });
 
     it('does not reset plan stats if we are before the last day of the cancelled month', async () => {
@@ -205,16 +214,14 @@ describe('cron', async () => {
       user.purchased.plan.dateTerminated = moment(new Date()).subtract({ days: 1 });
       user.purchased.plan.consecutive.gemCapExtra = 20;
       user.purchased.plan.consecutive.count = 5;
-      user.purchased.plan.consecutive.offset = 1;
 
       await cron({
         user, tasksByType, daysMissed, analytics,
       });
 
       expect(user.purchased.plan.customerId).to.not.exist;
-      expect(user.purchased.plan.consecutive.gemCapExtra).to.equal(0);
+      expect(user.purchased.plan.consecutive.gemCapExtra).to.equal(20);
       expect(user.purchased.plan.consecutive.count).to.equal(0);
-      expect(user.purchased.plan.consecutive.offset).to.equal(0);
     });
 
     describe('for a 1-month recurring subscription', async () => {
@@ -236,13 +243,11 @@ describe('cron', async () => {
         user1.purchased.plan.dateUpdated = moment().toDate();
         user1.purchased.plan.planId = 'basic';
         user1.purchased.plan.consecutive.count = 0;
-        user1.purchased.plan.perkMonthCount = 0;
-        user1.purchased.plan.consecutive.offset = 0;
-        user1.purchased.plan.consecutive.trinkets = 0;
+        user1.purchased.plan.consecutive.trinkets = 1;
         user1.purchased.plan.consecutive.gemCapExtra = 0;
       });
 
-      it('does not increment consecutive benefits after the first month', async () => {
+      it('increments consecutive benefits', async () => {
         clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(1, 'months')
           .add(2, 'days')
           .toDate());
@@ -253,75 +258,8 @@ describe('cron', async () => {
           user: user1, tasksByType, daysMissed, analytics,
         });
         expect(user1.purchased.plan.consecutive.count).to.equal(1);
-        expect(user1.purchased.plan.consecutive.offset).to.equal(0);
-        expect(user1.purchased.plan.consecutive.trinkets).to.equal(0);
-        expect(user1.purchased.plan.consecutive.gemCapExtra).to.equal(0);
-      });
-
-      it('does not increment consecutive benefits after the second month', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(2, 'months')
-          .add(2, 'days')
-          .toDate());
-        // Add 1 month to simulate what happens a month after the subscription was created.
-        // Add 2 days so that we're sure we're not affected by any start-of-month effects
-        // e.g., from time zone oddness.
-        await cron({
-          user: user1, tasksByType, daysMissed, analytics,
-        });
-        expect(user1.purchased.plan.consecutive.count).to.equal(2);
-        expect(user1.purchased.plan.consecutive.offset).to.equal(0);
-        expect(user1.purchased.plan.consecutive.trinkets).to.equal(0);
-        expect(user1.purchased.plan.consecutive.gemCapExtra).to.equal(0);
-      });
-
-      it('increments consecutive benefits after the second month if they also received a 1 month gift subscription', async () => {
-        user1.purchased.plan.perkMonthCount = 1;
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(2, 'months')
-          .add(2, 'days')
-          .toDate());
-        // Add 1 month to simulate what happens a month after the subscription was created.
-        // Add 2 days so that we're sure we're not affected by any start-of-month effects
-        // e.g., from time zone oddness.
-        await cron({
-          user: user1, tasksByType, daysMissed, analytics,
-        });
-        expect(user1.purchased.plan.perkMonthCount).to.equal(0);
-        expect(user1.purchased.plan.consecutive.count).to.equal(2);
-        expect(user1.purchased.plan.consecutive.offset).to.equal(0);
-        expect(user1.purchased.plan.consecutive.trinkets).to.equal(1);
-        expect(user1.purchased.plan.consecutive.gemCapExtra).to.equal(5);
-      });
-
-      it('increments consecutive benefits after the third month', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(3, 'months')
-          .add(2, 'days')
-          .toDate());
-        // Add 1 month to simulate what happens a month after the subscription was created.
-        // Add 2 days so that we're sure we're not affected by any start-of-month effects
-        // e.g., from time zone oddness.
-        await cron({
-          user: user1, tasksByType, daysMissed, analytics,
-        });
-        expect(user1.purchased.plan.consecutive.count).to.equal(3);
-        expect(user1.purchased.plan.consecutive.offset).to.equal(0);
-        expect(user1.purchased.plan.consecutive.trinkets).to.equal(1);
-        expect(user1.purchased.plan.consecutive.gemCapExtra).to.equal(5);
-      });
-
-      it('does not increment consecutive benefits after the fourth month', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(4, 'months')
-          .add(2, 'days')
-          .toDate());
-        // Add 1 month to simulate what happens a month after the subscription was created.
-        // Add 2 days so that we're sure we're not affected by any start-of-month effects
-        // e.g., from time zone oddness.
-        await cron({
-          user: user1, tasksByType, daysMissed, analytics,
-        });
-        expect(user1.purchased.plan.consecutive.count).to.equal(4);
-        expect(user1.purchased.plan.consecutive.offset).to.equal(0);
-        expect(user1.purchased.plan.consecutive.trinkets).to.equal(1);
-        expect(user1.purchased.plan.consecutive.gemCapExtra).to.equal(5);
+        expect(user1.purchased.plan.consecutive.trinkets).to.equal(2);
+        expect(user1.purchased.plan.consecutive.gemCapExtra).to.equal(2);
       });
 
       it('increments consecutive benefits correctly if user has been absent with continuous subscription', async () => {
@@ -332,33 +270,8 @@ describe('cron', async () => {
           user: user1, tasksByType, daysMissed, analytics,
         });
         expect(user1.purchased.plan.consecutive.count).to.equal(10);
-        expect(user1.purchased.plan.consecutive.offset).to.equal(0);
-        expect(user1.purchased.plan.consecutive.trinkets).to.equal(3);
-        expect(user1.purchased.plan.consecutive.gemCapExtra).to.equal(15);
-      });
-
-      it('initializes plan.perkMonthCount if necessary', async () => {
-        user.purchased.plan.perkMonthCount = undefined;
-        clock = sinon.useFakeTimers(moment(user.purchased.plan.dateUpdated)
-          .utcOffset(0)
-          .startOf('month')
-          .add(1, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user, tasksByType, daysMissed, analytics,
-        });
-        expect(user.purchased.plan.perkMonthCount).to.equal(1);
-        user.purchased.plan.perkMonthCount = undefined;
-        user.purchased.plan.consecutive.count = 8;
-        clock.restore();
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(2, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user, tasksByType, daysMissed, analytics,
-        });
-        expect(user.purchased.plan.perkMonthCount).to.equal(2);
+        expect(user1.purchased.plan.consecutive.trinkets).to.equal(11);
+        expect(user1.purchased.plan.consecutive.gemCapExtra).to.equal(20);
       });
     });
 
@@ -379,14 +292,12 @@ describe('cron', async () => {
         user3.purchased.plan.customerId = 'subscribedId';
         user3.purchased.plan.dateUpdated = moment().toDate();
         user3.purchased.plan.planId = 'basic_3mo';
-        user3.purchased.plan.perkMonthCount = 0;
         user3.purchased.plan.consecutive.count = 0;
-        user3.purchased.plan.consecutive.offset = 3;
         user3.purchased.plan.consecutive.trinkets = 1;
-        user3.purchased.plan.consecutive.gemCapExtra = 5;
+        user3.purchased.plan.consecutive.gemCapExtra = 0;
       });
 
-      it('does not increment consecutive benefits in the first month of the first paid period that they already have benefits for', async () => {
+      it('increments consecutive benefits', async () => {
         clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(1, 'months')
           .add(2, 'days')
           .toDate());
@@ -394,102 +305,8 @@ describe('cron', async () => {
           user: user3, tasksByType, daysMissed, analytics,
         });
         expect(user3.purchased.plan.consecutive.count).to.equal(1);
-        expect(user3.purchased.plan.consecutive.offset).to.equal(2);
-        expect(user3.purchased.plan.consecutive.trinkets).to.equal(1);
-        expect(user3.purchased.plan.consecutive.gemCapExtra).to.equal(5);
-      });
-
-      it('does not increment consecutive benefits in the middle of the period that they already have benefits for', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(2, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user3, tasksByType, daysMissed, analytics,
-        });
-        expect(user3.purchased.plan.consecutive.count).to.equal(2);
-        expect(user3.purchased.plan.consecutive.offset).to.equal(1);
-        expect(user3.purchased.plan.consecutive.trinkets).to.equal(1);
-        expect(user3.purchased.plan.consecutive.gemCapExtra).to.equal(5);
-      });
-
-      it('does not increment consecutive benefits in the final month of the period that they already have benefits for', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(3, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user3, tasksByType, daysMissed, analytics,
-        });
-        expect(user3.purchased.plan.consecutive.count).to.equal(3);
-        expect(user3.purchased.plan.consecutive.offset).to.equal(0);
-        expect(user3.purchased.plan.consecutive.trinkets).to.equal(1);
-        expect(user3.purchased.plan.consecutive.gemCapExtra).to.equal(5);
-      });
-
-      it('increments consecutive benefits the month after the second paid period has started', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(4, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user3, tasksByType, daysMissed, analytics,
-        });
-        expect(user3.purchased.plan.consecutive.count).to.equal(4);
-        expect(user3.purchased.plan.consecutive.offset).to.equal(2);
         expect(user3.purchased.plan.consecutive.trinkets).to.equal(2);
-        expect(user3.purchased.plan.consecutive.gemCapExtra).to.equal(10);
-      });
-
-      it('keeps existing plan.perkMonthCount intact when incrementing consecutive benefits', async () => {
-        user3.purchased.plan.perkMonthCount = 2;
-        user3.purchased.plan.consecutive.trinkets = 1;
-        user3.purchased.plan.consecutive.gemCapExtra = 5;
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(4, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user3, tasksByType, daysMissed, analytics,
-        });
-        expect(user3.purchased.plan.perkMonthCount).to.equal(2);
-        expect(user3.purchased.plan.consecutive.trinkets).to.equal(2);
-        expect(user3.purchased.plan.consecutive.gemCapExtra).to.equal(10);
-      });
-
-      it('does not increment consecutive benefits in the second month of the second period that they already have benefits for', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(5, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user3, tasksByType, daysMissed, analytics,
-        });
-        expect(user3.purchased.plan.consecutive.count).to.equal(5);
-        expect(user3.purchased.plan.consecutive.offset).to.equal(1);
-        expect(user3.purchased.plan.consecutive.trinkets).to.equal(2);
-        expect(user3.purchased.plan.consecutive.gemCapExtra).to.equal(10);
-      });
-
-      it('does not increment consecutive benefits in the final month of the second period that they already have benefits for', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(6, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user3, tasksByType, daysMissed, analytics,
-        });
-        expect(user3.purchased.plan.consecutive.count).to.equal(6);
-        expect(user3.purchased.plan.consecutive.offset).to.equal(0);
-        expect(user3.purchased.plan.consecutive.trinkets).to.equal(2);
-        expect(user3.purchased.plan.consecutive.gemCapExtra).to.equal(10);
-      });
-
-      it('increments consecutive benefits the month after the third paid period has started', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(7, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user3, tasksByType, daysMissed, analytics,
-        });
-        expect(user3.purchased.plan.consecutive.count).to.equal(7);
-        expect(user3.purchased.plan.consecutive.offset).to.equal(2);
-        expect(user3.purchased.plan.consecutive.trinkets).to.equal(3);
-        expect(user3.purchased.plan.consecutive.gemCapExtra).to.equal(15);
+        expect(user3.purchased.plan.consecutive.gemCapExtra).to.equal(2);
       });
 
       it('increments consecutive benefits correctly if user has been absent with continuous subscription', async () => {
@@ -500,8 +317,7 @@ describe('cron', async () => {
           user: user3, tasksByType, daysMissed, analytics,
         });
         expect(user3.purchased.plan.consecutive.count).to.equal(10);
-        expect(user3.purchased.plan.consecutive.offset).to.equal(2);
-        expect(user3.purchased.plan.consecutive.trinkets).to.equal(4);
+        expect(user3.purchased.plan.consecutive.trinkets).to.equal(11);
         expect(user3.purchased.plan.consecutive.gemCapExtra).to.equal(20);
       });
     });
@@ -523,14 +339,12 @@ describe('cron', async () => {
         user6.purchased.plan.customerId = 'subscribedId';
         user6.purchased.plan.dateUpdated = moment().toDate();
         user6.purchased.plan.planId = 'google_6mo';
-        user6.purchased.plan.perkMonthCount = 0;
         user6.purchased.plan.consecutive.count = 0;
-        user6.purchased.plan.consecutive.offset = 6;
-        user6.purchased.plan.consecutive.trinkets = 2;
-        user6.purchased.plan.consecutive.gemCapExtra = 10;
+        user6.purchased.plan.consecutive.trinkets = 1;
+        user6.purchased.plan.consecutive.gemCapExtra = 0;
       });
 
-      it('does not increment consecutive benefits in the first month of the first paid period that they already have benefits for', async () => {
+      it('increments benefits', async () => {
         clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(1, 'months')
           .add(2, 'days')
           .toDate());
@@ -538,74 +352,8 @@ describe('cron', async () => {
           user: user6, tasksByType, daysMissed, analytics,
         });
         expect(user6.purchased.plan.consecutive.count).to.equal(1);
-        expect(user6.purchased.plan.consecutive.offset).to.equal(5);
-        expect(user6.purchased.plan.consecutive.trinkets).to.equal(2);
-        expect(user6.purchased.plan.consecutive.gemCapExtra).to.equal(10);
-      });
-
-      it('does not increment consecutive benefits in the final month of the period that they already have benefits for', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(6, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user6, tasksByType, daysMissed, analytics,
-        });
-        expect(user6.purchased.plan.consecutive.count).to.equal(6);
-        expect(user6.purchased.plan.consecutive.offset).to.equal(0);
         expect(user6.purchased.plan.consecutive.trinkets).to.equal(2);
-        expect(user6.purchased.plan.consecutive.gemCapExtra).to.equal(10);
-      });
-
-      it('increments consecutive benefits the month after the second paid period has started', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(7, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user6, tasksByType, daysMissed, analytics,
-        });
-        expect(user6.purchased.plan.consecutive.count).to.equal(7);
-        expect(user6.purchased.plan.consecutive.offset).to.equal(5);
-        expect(user6.purchased.plan.consecutive.trinkets).to.equal(4);
-        expect(user6.purchased.plan.consecutive.gemCapExtra).to.equal(20);
-      });
-
-      it('keeps existing plan.perkMonthCount intact when incrementing consecutive benefits', async () => {
-        user6.purchased.plan.perkMonthCount = 2;
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(7, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user6, tasksByType, daysMissed, analytics,
-        });
-        expect(user6.purchased.plan.perkMonthCount).to.equal(2);
-        expect(user6.purchased.plan.consecutive.trinkets).to.equal(4);
-        expect(user6.purchased.plan.consecutive.gemCapExtra).to.equal(20);
-      });
-
-      it('increments consecutive benefits the month after the third paid period has started', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(13, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user6, tasksByType, daysMissed, analytics,
-        });
-        expect(user6.purchased.plan.consecutive.count).to.equal(13);
-        expect(user6.purchased.plan.consecutive.offset).to.equal(5);
-        expect(user6.purchased.plan.consecutive.trinkets).to.equal(6);
-        expect(user6.purchased.plan.consecutive.gemCapExtra).to.equal(25);
-      });
-
-      it('increments consecutive benefits correctly if user has been absent with continuous subscription', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(19, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user6, tasksByType, daysMissed, analytics,
-        });
-        expect(user6.purchased.plan.consecutive.count).to.equal(19);
-        expect(user6.purchased.plan.consecutive.offset).to.equal(5);
-        expect(user6.purchased.plan.consecutive.trinkets).to.equal(8);
-        expect(user6.purchased.plan.consecutive.gemCapExtra).to.equal(25);
+        expect(user6.purchased.plan.consecutive.gemCapExtra).to.equal(2);
       });
     });
 
@@ -626,11 +374,10 @@ describe('cron', async () => {
       user12.purchased.plan.dateUpdated = moment().toDate();
       user12.purchased.plan.planId = 'basic_12mo';
       user12.purchased.plan.consecutive.count = 0;
-      user12.purchased.plan.consecutive.offset = 12;
-      user12.purchased.plan.consecutive.trinkets = 4;
-      user12.purchased.plan.consecutive.gemCapExtra = 20;
+      user12.purchased.plan.consecutive.trinkets = 1;
+      user12.purchased.plan.consecutive.gemCapExtra = 26;
 
-      it('does not increment consecutive benefits in the first month of the first paid period that they already have benefits for', async () => {
+      it('increments consecutive benefits the month after the second paid period has started', async () => {
         clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(1, 'months')
           .add(2, 'days')
           .toDate());
@@ -638,61 +385,20 @@ describe('cron', async () => {
           user: user12, tasksByType, daysMissed, analytics,
         });
         expect(user12.purchased.plan.consecutive.count).to.equal(1);
-        expect(user12.purchased.plan.consecutive.offset).to.equal(11);
-        expect(user12.purchased.plan.consecutive.trinkets).to.equal(4);
-        expect(user12.purchased.plan.consecutive.gemCapExtra).to.equal(20);
-      });
-
-      it('does not increment consecutive benefits in the final month of the period that they already have benefits for', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(12, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user12, tasksByType, daysMissed, analytics,
-        });
-        expect(user12.purchased.plan.consecutive.count).to.equal(12);
-        expect(user12.purchased.plan.consecutive.offset).to.equal(0);
-        expect(user12.purchased.plan.consecutive.trinkets).to.equal(4);
-        expect(user12.purchased.plan.consecutive.gemCapExtra).to.equal(20);
-      });
-
-      it('increments consecutive benefits the month after the second paid period has started', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(13, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user12, tasksByType, daysMissed, analytics,
-        });
-        expect(user12.purchased.plan.consecutive.count).to.equal(13);
-        expect(user12.purchased.plan.consecutive.offset).to.equal(11);
-        expect(user12.purchased.plan.consecutive.trinkets).to.equal(8);
-        expect(user12.purchased.plan.consecutive.gemCapExtra).to.equal(25);
-      });
-
-      it('increments consecutive benefits the month after the third paid period has started', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(25, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user12, tasksByType, daysMissed, analytics,
-        });
-        expect(user12.purchased.plan.consecutive.count).to.equal(25);
-        expect(user12.purchased.plan.consecutive.offset).to.equal(11);
-        expect(user12.purchased.plan.consecutive.trinkets).to.equal(12);
-        expect(user12.purchased.plan.consecutive.gemCapExtra).to.equal(25);
+        expect(user12.purchased.plan.consecutive.trinkets).to.equal(2);
+        expect(user12.purchased.plan.consecutive.gemCapExtra).to.equal(26);
       });
 
       it('increments consecutive benefits correctly if user has been absent with continuous subscription', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(37, 'months')
+        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(10, 'months')
           .add(2, 'days')
           .toDate());
         await cron({
           user: user12, tasksByType, daysMissed, analytics,
         });
-        expect(user12.purchased.plan.consecutive.count).to.equal(37);
-        expect(user12.purchased.plan.consecutive.offset).to.equal(11);
-        expect(user12.purchased.plan.consecutive.trinkets).to.equal(16);
-        expect(user12.purchased.plan.consecutive.gemCapExtra).to.equal(25);
+        expect(user12.purchased.plan.consecutive.count).to.equal(10);
+        expect(user12.purchased.plan.consecutive.trinkets).to.equal(11);
+        expect(user12.purchased.plan.consecutive.gemCapExtra).to.equal(26);
       });
     });
 
@@ -715,11 +421,11 @@ describe('cron', async () => {
         .toDate();
       user3g.purchased.plan.planId = null;
       user3g.purchased.plan.consecutive.count = 0;
-      user3g.purchased.plan.consecutive.offset = 3;
+      user3g.purchased.plan.cumulativeCount = 0;
       user3g.purchased.plan.consecutive.trinkets = 1;
-      user3g.purchased.plan.consecutive.gemCapExtra = 5;
+      user3g.purchased.plan.consecutive.gemCapExtra = 0;
 
-      it('does not increment consecutive benefits in the first month of the gift subscription', async () => {
+      it('increments benefits', async () => {
         clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(1, 'months')
           .add(2, 'days')
           .toDate());
@@ -727,35 +433,9 @@ describe('cron', async () => {
           user: user3g, tasksByType, daysMissed, analytics,
         });
         expect(user3g.purchased.plan.consecutive.count).to.equal(1);
-        expect(user3g.purchased.plan.consecutive.offset).to.equal(2);
-        expect(user3g.purchased.plan.consecutive.trinkets).to.equal(1);
-        expect(user3g.purchased.plan.consecutive.gemCapExtra).to.equal(5);
-      });
-
-      it('does not increment consecutive benefits in the second month of the gift subscription', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(2, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user3g, tasksByType, daysMissed, analytics,
-        });
-        expect(user3g.purchased.plan.consecutive.count).to.equal(2);
-        expect(user3g.purchased.plan.consecutive.offset).to.equal(1);
-        expect(user3g.purchased.plan.consecutive.trinkets).to.equal(1);
-        expect(user3g.purchased.plan.consecutive.gemCapExtra).to.equal(5);
-      });
-
-      it('does not increment consecutive benefits in the third month of the gift subscription', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(3, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user3g, tasksByType, daysMissed, analytics,
-        });
-        expect(user3g.purchased.plan.consecutive.count).to.equal(3);
-        expect(user3g.purchased.plan.consecutive.offset).to.equal(0);
-        expect(user3g.purchased.plan.consecutive.trinkets).to.equal(1);
-        expect(user3g.purchased.plan.consecutive.gemCapExtra).to.equal(5);
+        expect(user3g.purchased.plan.cumulativeCount).to.equal(1);
+        expect(user3g.purchased.plan.consecutive.trinkets).to.equal(2);
+        expect(user3g.purchased.plan.consecutive.gemCapExtra).to.equal(2);
       });
 
       it('does not increment consecutive benefits in the month after the gift subscription has ended', async () => {
@@ -767,84 +447,9 @@ describe('cron', async () => {
         });
         // subscription has been erased by now
         expect(user3g.purchased.plan.consecutive.count).to.equal(0);
-        expect(user3g.purchased.plan.consecutive.offset).to.equal(0);
-        expect(user3g.purchased.plan.consecutive.trinkets).to.equal(1);
-        expect(user3g.purchased.plan.consecutive.gemCapExtra).to.equal(0); // erased
-      });
-    });
-
-    describe('for a 6-month recurring subscription where the user has incorrect consecutive month data from prior bugs', async () => {
-      const user6x = new User({
-        auth: {
-          local: {
-            username: 'username6x',
-            lowerCaseUsername: 'username6x',
-            email: 'email6x@example.com',
-            salt: 'salt',
-            hashed_password: 'hashed_password', // eslint-disable-line camelcase
-          },
-        },
-      });
-      // user6x has a 6-month recurring subscription starting 8 months in the past
-      // before issue #4819 was fixed
-      user6x.purchased.plan.customerId = 'subscribedId';
-      user6x.purchased.plan.dateUpdated = moment().toDate();
-      user6x.purchased.plan.planId = 'basic_6mo';
-      user6x.purchased.plan.consecutive.count = 8;
-      user6x.purchased.plan.consecutive.offset = 0;
-      user6x.purchased.plan.consecutive.trinkets = 3;
-      user6x.purchased.plan.consecutive.gemCapExtra = 15;
-
-      it('increments consecutive benefits in the first month since the fix for #4819 goes live', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(1, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user6x, tasksByType, daysMissed, analytics,
-        });
-        expect(user6x.purchased.plan.consecutive.count).to.equal(9);
-        expect(user6x.purchased.plan.consecutive.offset).to.equal(5);
-        expect(user6x.purchased.plan.consecutive.trinkets).to.equal(5);
-        expect(user6x.purchased.plan.consecutive.gemCapExtra).to.equal(25);
-      });
-
-      it('does not increment consecutive benefits in the second month after the fix goes live', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(2, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user6x, tasksByType, daysMissed, analytics,
-        });
-        expect(user6x.purchased.plan.consecutive.count).to.equal(10);
-        expect(user6x.purchased.plan.consecutive.offset).to.equal(4);
-        expect(user6x.purchased.plan.consecutive.trinkets).to.equal(5);
-        expect(user6x.purchased.plan.consecutive.gemCapExtra).to.equal(25);
-      });
-
-      it('does not increment consecutive benefits in the third month after the fix goes live', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(3, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user6x, tasksByType, daysMissed, analytics,
-        });
-        expect(user6x.purchased.plan.consecutive.count).to.equal(11);
-        expect(user6x.purchased.plan.consecutive.offset).to.equal(3);
-        expect(user6x.purchased.plan.consecutive.trinkets).to.equal(5);
-        expect(user6x.purchased.plan.consecutive.gemCapExtra).to.equal(25);
-      });
-
-      it('increments consecutive benefits in the seventh month after the fix goes live', async () => {
-        clock = sinon.useFakeTimers(moment().utcOffset(0).startOf('month').add(7, 'months')
-          .add(2, 'days')
-          .toDate());
-        await cron({
-          user: user6x, tasksByType, daysMissed, analytics,
-        });
-        expect(user6x.purchased.plan.consecutive.count).to.equal(15);
-        expect(user6x.purchased.plan.consecutive.offset).to.equal(5);
-        expect(user6x.purchased.plan.consecutive.trinkets).to.equal(7);
-        expect(user6x.purchased.plan.consecutive.gemCapExtra).to.equal(25);
+        expect(user3g.purchased.plan.consecutive.trinkets).to.equal(2);
+        expect(user3g.purchased.plan.consecutive.gemCapExtra).to.equal(2);
+        expect(user3g.purchased.plan.cumulativeCount).to.equal(1);
       });
     });
   });
@@ -888,12 +493,12 @@ describe('cron', async () => {
       expect(user.purchased.plan.consecutive.count).to.equal(0);
     });
 
-    it('does not decrement plan.consecutive.offset when offset is greater than 0', async () => {
-      user.purchased.plan.consecutive.offset = 1;
+    it('does not increment plan.cumulativeCount', async () => {
+      user.purchased.plan.cumulativeCount = 0;
       await cron({
         user, tasksByType, daysMissed, analytics,
       });
-      expect(user.purchased.plan.consecutive.offset).to.equal(1);
+      expect(user.purchased.plan.cumulativeCount).to.equal(0);
     });
 
     it('does not increment plan.consecutive.trinkets when user has reached a month that is a multiple of 3', async () => {
@@ -913,12 +518,12 @@ describe('cron', async () => {
     });
 
     it('does not increment plan.consecutive.gemCapExtra when user has reached the gemCap limit', async () => {
-      user.purchased.plan.consecutive.gemCapExtra = 25;
+      user.purchased.plan.consecutive.gemCapExtra = 26;
       user.purchased.plan.consecutive.count = 5;
       await cron({
         user, tasksByType, daysMissed, analytics,
       });
-      expect(user.purchased.plan.consecutive.gemCapExtra).to.equal(25);
+      expect(user.purchased.plan.consecutive.gemCapExtra).to.equal(26);
     });
 
     it('does nothing to plan stats if we are before the last day of the cancelled month', async () => {
@@ -928,22 +533,6 @@ describe('cron', async () => {
       });
       expect(user.purchased.plan.customerId).to.not.exist;
     });
-
-    xit('does nothing to plan stats when we are after the last day of the cancelled month', async () => {
-      user.purchased.plan.dateTerminated = moment(new Date()).subtract({ days: 1 });
-      user.purchased.plan.consecutive.gemCapExtra = 20;
-      user.purchased.plan.consecutive.count = 5;
-      user.purchased.plan.consecutive.offset = 1;
-
-      await cron({
-        user, tasksByType, daysMissed, analytics,
-      });
-
-      expect(user.purchased.plan.customerId).to.exist;
-      expect(user.purchased.plan.consecutive.gemCapExtra).to.exist;
-      expect(user.purchased.plan.consecutive.count).to.exist;
-      expect(user.purchased.plan.consecutive.offset).to.exist;
-    });
   });
 
   describe('todos', async () => {
diff --git a/test/api/unit/libs/payments/group-plans/group-payments-create.test.js b/test/api/unit/libs/payments/group-plans/group-payments-create.test.js
index 383d7dfe6f3..17ff154a0a0 100644
--- a/test/api/unit/libs/payments/group-plans/group-payments-create.test.js
+++ b/test/api/unit/libs/payments/group-plans/group-payments-create.test.js
@@ -715,7 +715,7 @@ describe('Purchasing a group plan for group', () => {
     const mysteryItem = { title: 'item' };
     const mysteryItems = [mysteryItem];
     const consecutive = {
-      trinkets: 3,
+      trinkets: 4,
       gemCapExtra: 20,
       offset: 1,
       count: 13,
diff --git a/test/api/unit/libs/payments/payments.test.js b/test/api/unit/libs/payments/payments.test.js
index 5b2d2f98990..00732af3cea 100644
--- a/test/api/unit/libs/payments/payments.test.js
+++ b/test/api/unit/libs/payments/payments.test.js
@@ -12,6 +12,7 @@ import {
 } from '../../../../helpers/api-unit.helper';
 import * as worldState from '../../../../../website/server/libs/worldState';
 import { TransactionModel } from '../../../../../website/server/models/transaction';
+import { REPEATING_EVENTS } from '../../../../../website/common/script/content/constants/events';
 
 describe('payments/index', () => {
   let user;
@@ -65,7 +66,6 @@ describe('payments/index', () => {
       mysteryItems: [],
       consecutive: {
         trinkets: 0,
-        offset: 0,
         gemCapExtra: 0,
       },
     };
@@ -108,14 +108,8 @@ describe('payments/index', () => {
       });
 
       it('add a transaction entry to the recipient', async () => {
-        recipient.purchased.plan = plan;
-
-        expect(recipient.purchased.plan.extraMonths).to.eql(0);
-
         await api.createSubscription(data);
 
-        expect(recipient.purchased.plan.extraMonths).to.eql(3);
-
         const transactions = await TransactionModel
           .find({ userId: recipient._id })
           .sort({ createdAt: -1 })
@@ -177,6 +171,45 @@ describe('payments/index', () => {
         expect(recipient.purchased.plan.dateUpdated).to.exist;
       });
 
+      it('does not reset gemCapExtra if they already had one', async () => {
+        recipient.purchased.plan.consecutive.gemCapExtra = 10;
+
+        await api.createSubscription(data);
+
+        expect(recipient.purchased.plan.consecutive.gemCapExtra).to.eql(10);
+      });
+
+      it('sets gemCapExtra to 0 if they receive a 3 month sub', async () => {
+        data.gift.subscription.key = 'basic_3mo';
+        data.gift.subscription.months = 3;
+
+        await api.createSubscription(data);
+
+        expect(recipient.purchased.plan.consecutive.gemCapExtra).to.eql(0);
+      });
+
+      it('sets gemCapExtra to max if they receive a 12 month sub', async () => {
+        recipient.purchased.plan.consecutive.gemCapExtra = 10;
+
+        data.gift.subscription.key = 'basic_12mo';
+        data.gift.subscription.months = 12;
+
+        await api.createSubscription(data);
+
+        expect(recipient.purchased.plan.consecutive.gemCapExtra).to.eql(26);
+      });
+
+      it('gives user 1 hourglass if they have no active subscription', async () => {
+        await api.createSubscription(data);
+        expect(recipient.purchased.plan.consecutive.trinkets).to.eql(1);
+      });
+
+      it('does not give any hourglasses if they have an active subscription', async () => {
+        recipient.purchased.plan = plan;
+        await api.createSubscription(data);
+        expect(recipient.purchased.plan.consecutive.trinkets).to.eql(plan.consecutive.trinkets);
+      });
+
       it('sets plan.dateUpdated if it did exist but the user has cancelled', async () => {
         recipient.purchased.plan.dateUpdated = moment().subtract(1, 'days').toDate();
         recipient.purchased.plan.dateTerminated = moment().subtract(1, 'days').toDate();
@@ -235,116 +268,6 @@ describe('payments/index', () => {
         expect(recipient.purchased.plan.customerId).to.eql('customer-id');
       });
 
-      it('sets plan.perkMonthCount to 1 if user is not subscribed', async () => {
-        recipient.purchased.plan = plan;
-        recipient.purchased.plan.perkMonthCount = 1;
-        recipient.purchased.plan.customerId = undefined;
-        data.sub.key = 'basic_earned';
-        data.gift.subscription.key = 'basic_earned';
-        data.gift.subscription.months = 1;
-
-        expect(recipient.purchased.plan.perkMonthCount).to.eql(1);
-        await api.createSubscription(data);
-
-        expect(recipient.purchased.plan.perkMonthCount).to.eql(1);
-      });
-
-      it('sets plan.perkMonthCount to 1 if field is not initialized', async () => {
-        recipient.purchased.plan = plan;
-        recipient.purchased.plan.perkMonthCount = -1;
-        recipient.purchased.plan.customerId = undefined;
-        data.sub.key = 'basic_earned';
-        data.gift.subscription.key = 'basic_earned';
-        data.gift.subscription.months = 1;
-
-        expect(recipient.purchased.plan.perkMonthCount).to.eql(-1);
-        await api.createSubscription(data);
-
-        expect(recipient.purchased.plan.perkMonthCount).to.eql(1);
-      });
-
-      it('sets plan.perkMonthCount to 1 if user had previous count but lapsed subscription', async () => {
-        recipient.purchased.plan = plan;
-        recipient.purchased.plan.perkMonthCount = 2;
-        recipient.purchased.plan.customerId = undefined;
-        data.sub.key = 'basic_earned';
-        data.gift.subscription.key = 'basic_earned';
-        data.gift.subscription.months = 1;
-
-        expect(recipient.purchased.plan.perkMonthCount).to.eql(2);
-        await api.createSubscription(data);
-
-        expect(recipient.purchased.plan.perkMonthCount).to.eql(1);
-      });
-
-      it('adds to plan.perkMonthCount if user is already subscribed', async () => {
-        recipient.purchased.plan = plan;
-        recipient.purchased.plan.perkMonthCount = 1;
-        data.sub.key = 'basic_earned';
-        data.gift.subscription.key = 'basic_earned';
-        data.gift.subscription.months = 1;
-
-        expect(recipient.purchased.plan.perkMonthCount).to.eql(1);
-        await api.createSubscription(data);
-
-        expect(recipient.purchased.plan.perkMonthCount).to.eql(2);
-      });
-
-      it('awards perks if plan.perkMonthCount reaches 3 with existing subscription', async () => {
-        recipient.purchased.plan = plan;
-        recipient.purchased.plan.perkMonthCount = 2;
-        data.sub.key = 'basic_earned';
-        data.gift.subscription.key = 'basic_earned';
-        data.gift.subscription.months = 1;
-
-        expect(recipient.purchased.plan.perkMonthCount).to.eql(2);
-        expect(recipient.purchased.plan.consecutive.trinkets).to.eql(0);
-        expect(recipient.purchased.plan.consecutive.gemCapExtra).to.eql(0);
-        await api.createSubscription(data);
-
-        expect(recipient.purchased.plan.perkMonthCount).to.eql(0);
-        expect(recipient.purchased.plan.consecutive.trinkets).to.eql(1);
-        expect(recipient.purchased.plan.consecutive.gemCapExtra).to.eql(5);
-      });
-
-      it('awards perks if plan.perkMonthCount reaches 3 without existing subscription', async () => {
-        recipient.purchased.plan.perkMonthCount = 0;
-        expect(recipient.purchased.plan.perkMonthCount).to.eql(0);
-        expect(recipient.purchased.plan.consecutive.trinkets).to.eql(0);
-        expect(recipient.purchased.plan.consecutive.gemCapExtra).to.eql(0);
-        await api.createSubscription(data);
-
-        expect(recipient.purchased.plan.perkMonthCount).to.eql(0);
-        expect(recipient.purchased.plan.consecutive.trinkets).to.eql(1);
-        expect(recipient.purchased.plan.consecutive.gemCapExtra).to.eql(5);
-      });
-
-      it('awards perks if plan.perkMonthCount reaches 3 without initialized field', async () => {
-        expect(recipient.purchased.plan.perkMonthCount).to.eql(-1);
-        expect(recipient.purchased.plan.consecutive.trinkets).to.eql(0);
-        expect(recipient.purchased.plan.consecutive.gemCapExtra).to.eql(0);
-        await api.createSubscription(data);
-
-        expect(recipient.purchased.plan.perkMonthCount).to.eql(0);
-        expect(recipient.purchased.plan.consecutive.trinkets).to.eql(1);
-        expect(recipient.purchased.plan.consecutive.gemCapExtra).to.eql(5);
-      });
-
-      it('awards perks if plan.perkMonthCount goes over 3', async () => {
-        recipient.purchased.plan = plan;
-        recipient.purchased.plan.perkMonthCount = 2;
-        data.sub.key = 'basic_earned';
-
-        expect(recipient.purchased.plan.perkMonthCount).to.eql(2);
-        expect(recipient.purchased.plan.consecutive.trinkets).to.eql(0);
-        expect(recipient.purchased.plan.consecutive.gemCapExtra).to.eql(0);
-        await api.createSubscription(data);
-
-        expect(recipient.purchased.plan.perkMonthCount).to.eql(2);
-        expect(recipient.purchased.plan.consecutive.trinkets).to.eql(1);
-        expect(recipient.purchased.plan.consecutive.gemCapExtra).to.eql(5);
-      });
-
       it('sets plan.customerId to "Gift" if it does not already exist', async () => {
         expect(recipient.purchased.plan.customerId).to.not.exist;
 
@@ -421,8 +344,8 @@ describe('payments/index', () => {
       context('Active Promotion', () => {
         beforeEach(() => {
           sinon.stub(worldState, 'getCurrentEventList').returns([{
-            ...common.content.events.winter2021Promo,
-            event: 'winter2021',
+            ...REPEATING_EVENTS.giftOneGetOne,
+            event: 'g1g1',
           }]);
         });
 
@@ -438,22 +361,30 @@ describe('payments/index', () => {
           expect(user.purchased.plan.dateTerminated).to.exist;
           expect(user.purchased.plan.dateUpdated).to.exist;
           expect(user.purchased.plan.dateCreated).to.exist;
+          expect(user.purchased.plan.consecutive.trinkets).to.eql(1);
+          expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(0);
 
           expect(recipient.items.pets['Jackalope-RoyalPurple']).to.eql(5);
           expect(recipient.purchased.plan.customerId).to.eql('Gift');
           expect(recipient.purchased.plan.dateTerminated).to.exist;
           expect(recipient.purchased.plan.dateUpdated).to.exist;
           expect(recipient.purchased.plan.dateCreated).to.exist;
+          expect(recipient.purchased.plan.consecutive.trinkets).to.eql(1);
+          expect(recipient.purchased.plan.consecutive.gemCapExtra).to.eql(0);
         });
 
         it('adds extraMonths to existing subscription for purchaser and creates a gift subscription for recipient without sub', async () => {
           user.purchased.plan = plan;
 
           expect(user.purchased.plan.extraMonths).to.eql(0);
+          expect(user.purchased.plan.consecutive.trinkets).to.eql(0);
+          expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(0);
 
           await api.createSubscription(data);
 
           expect(user.purchased.plan.extraMonths).to.eql(3);
+          expect(user.purchased.plan.consecutive.trinkets).to.eql(0);
+          expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(0);
 
           expect(recipient.items.pets['Jackalope-RoyalPurple']).to.eql(5);
           expect(recipient.purchased.plan.customerId).to.eql('Gift');
@@ -466,10 +397,12 @@ describe('payments/index', () => {
           recipient.purchased.plan = plan;
 
           expect(recipient.purchased.plan.extraMonths).to.eql(0);
+          expect(recipient.purchased.plan.consecutive.trinkets).to.eql(0);
 
           await api.createSubscription(data);
 
           expect(recipient.purchased.plan.extraMonths).to.eql(3);
+          expect(recipient.purchased.plan.consecutive.trinkets).to.eql(0);
 
           expect(user.items.pets['Jackalope-RoyalPurple']).to.eql(5);
           expect(user.purchased.plan.customerId).to.eql('Gift');
@@ -484,11 +417,15 @@ describe('payments/index', () => {
 
           expect(user.purchased.plan.extraMonths).to.eql(0);
           expect(recipient.purchased.plan.extraMonths).to.eql(0);
+          expect(user.purchased.plan.consecutive.trinkets).to.eql(0);
+          expect(recipient.purchased.plan.consecutive.trinkets).to.eql(0);
 
           await api.createSubscription(data);
 
           expect(user.purchased.plan.extraMonths).to.eql(3);
           expect(recipient.purchased.plan.extraMonths).to.eql(3);
+          expect(user.purchased.plan.consecutive.trinkets).to.eql(0);
+          expect(recipient.purchased.plan.consecutive.trinkets).to.eql(0);
         });
 
         it('sends a private message about the promotion', async () => {
@@ -511,7 +448,6 @@ describe('payments/index', () => {
         expect(user.purchased.plan.customerId).to.eql('customer-id');
         expect(user.purchased.plan.dateUpdated).to.exist;
         expect(user.purchased.plan.gemsBought).to.eql(0);
-        expect(user.purchased.plan.perkMonthCount).to.eql(0);
         expect(user.purchased.plan.paymentMethod).to.eql('Payment Method');
         expect(user.purchased.plan.extraMonths).to.eql(0);
         expect(user.purchased.plan.dateTerminated).to.eql(null);
@@ -549,33 +485,6 @@ describe('payments/index', () => {
         expect(user.purchased.plan.dateCurrentTypeCreated).to.not.eql(initialDate);
       });
 
-      it('keeps plan.perkMonthCount when changing subscription type', async () => {
-        await api.createSubscription(data);
-        user.purchased.plan.perkMonthCount = 2;
-        await api.createSubscription(data);
-        expect(user.purchased.plan.perkMonthCount).to.eql(2);
-      });
-
-      it('sets plan.perkMonthCount to zero when creating new monthly subscription', async () => {
-        user.purchased.plan.perkMonthCount = 2;
-        await api.createSubscription(data);
-        expect(user.purchased.plan.perkMonthCount).to.eql(0);
-      });
-
-      it('sets plan.perkMonthCount to zero when creating new 3 month subscription', async () => {
-        user.purchased.plan.perkMonthCount = 2;
-        await api.createSubscription(data);
-        expect(user.purchased.plan.perkMonthCount).to.eql(0);
-      });
-
-      it('updates plan.consecutive.offset when changing subscription type', async () => {
-        await api.createSubscription(data);
-        expect(user.purchased.plan.consecutive.offset).to.eql(3);
-        data.sub.key = 'basic_6mo';
-        await api.createSubscription(data);
-        expect(user.purchased.plan.consecutive.offset).to.eql(6);
-      });
-
       it('awards the Royal Purple Jackalope pet', async () => {
         await api.createSubscription(data);
 
@@ -694,6 +603,7 @@ describe('payments/index', () => {
           expect(user.purchased.plan.dateCreated).to.eql(created);
           expect(user.purchased.plan.dateUpdated).to.not.eql(updated);
           expect(user.purchased.plan.customerId).to.eql('customer-id');
+          expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(26);
         });
       });
 
@@ -741,77 +651,51 @@ describe('payments/index', () => {
     });
 
     context('Block subscription perks', () => {
-      it('adds block months to plan.consecutive.offset', async () => {
+      it('adds 26 to plan.consecutive.gemCapExtra for 12 month block', async () => {
+        data.sub.key = 'basic_12mo';
         await api.createSubscription(data);
 
-        expect(user.purchased.plan.consecutive.offset).to.eql(3);
+        expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(26);
       });
 
-      it('does not add to plans.consecutive.offset if 1 month subscription', async () => {
-        data.sub.key = 'basic_earned';
-        await api.createSubscription(data);
-
-        expect(user.purchased.plan.consecutive.offset).to.eql(0);
-      });
+      it('does not raise plan.consecutive.gemCapExtra higher than 26', async () => {
+        data.sub.key = 'basic_12mo';
 
-      it('resets plans.consecutive.offset if 1 month subscription', async () => {
-        user.purchased.plan.consecutive.offset = 1;
-        await user.save();
-        data.sub.key = 'basic_earned';
+        await api.createSubscription(data);
         await api.createSubscription(data);
 
-        expect(user.purchased.plan.consecutive.offset).to.eql(0);
+        expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(26);
       });
 
-      it('adds 5 to plan.consecutive.gemCapExtra for 3 month block', async () => {
+      it('adds a plan.consecutive.trinkets for 3 month block', async () => {
         await api.createSubscription(data);
 
-        expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(5);
+        expect(user.purchased.plan.consecutive.trinkets).to.eql(1);
       });
 
-      it('adds 10 to plan.consecutive.gemCapExtra for 6 month block', async () => {
+      it('adds 1 plan.consecutive.trinkets for 6 month block', async () => {
         data.sub.key = 'basic_6mo';
-        await api.createSubscription(data);
 
-        expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(10);
-      });
-
-      it('adds 20 to plan.consecutive.gemCapExtra for 12 month block', async () => {
-        data.sub.key = 'basic_12mo';
         await api.createSubscription(data);
 
-        expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(20);
+        expect(user.purchased.plan.consecutive.trinkets).to.eql(1);
       });
 
-      it('does not raise plan.consecutive.gemCapExtra higher than 25', async () => {
+      it('adds 1 plan.consecutive.trinkets for 12 month block if they had promo', async () => {
+        user.purchased.plan.hourglassPromoReceived = new Date();
         data.sub.key = 'basic_12mo';
 
-        await api.createSubscription(data);
-        await api.createSubscription(data);
-
-        expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(25);
-      });
-
-      it('adds a plan.consecutive.trinkets for 3 month block', async () => {
         await api.createSubscription(data);
 
         expect(user.purchased.plan.consecutive.trinkets).to.eql(1);
       });
 
-      it('adds 2 plan.consecutive.trinkets for 6 month block', async () => {
-        data.sub.key = 'basic_6mo';
-
-        await api.createSubscription(data);
-
-        expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
-      });
-
-      it('adds 4 plan.consecutive.trinkets for 12 month block', async () => {
+      it('adds 12 plan.consecutive.trinkets for 12 month block', async () => {
         data.sub.key = 'basic_12mo';
 
         await api.createSubscription(data);
 
-        expect(user.purchased.plan.consecutive.trinkets).to.eql(4);
+        expect(user.purchased.plan.consecutive.trinkets).to.eql(13);
       });
 
       context('Upgrades subscription', () => {
@@ -819,70 +703,38 @@ describe('payments/index', () => {
           beforeEach(async () => {
             data.updatedFrom = { logic: 'payDifference' };
           });
-          it('Adds 10 to plan.consecutive.gemCapExtra from basic_earned to basic_6mo', async () => {
-            data.sub.key = 'basic_earned';
-            expect(user.purchased.plan.planId).to.not.exist;
-
-            await api.createSubscription(data);
-
-            expect(user.purchased.plan.planId).to.eql('basic_earned');
-            expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(0);
-
-            data.sub.key = 'basic_6mo';
-            data.updatedFrom.key = 'basic_earned';
-            await api.createSubscription(data);
-            expect(user.purchased.plan.planId).to.eql('basic_6mo');
-            expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(10);
-          });
-
-          it('Adds 15 to plan.consecutive.gemCapExtra when upgrading from basic_3mo to basic_12mo', async () => {
+          it('Adds 26 to plan.consecutive.gemCapExtra when upgrading from basic_3mo to basic_12mo', async () => {
             expect(user.purchased.plan.planId).to.not.exist;
 
             await api.createSubscription(data);
 
             expect(user.purchased.plan.planId).to.eql('basic_3mo');
-            expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(5);
+            expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(0);
 
             data.sub.key = 'basic_12mo';
             data.updatedFrom.key = 'basic_3mo';
             await api.createSubscription(data);
             expect(user.purchased.plan.planId).to.eql('basic_12mo');
-            expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(20);
+            expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(26);
           });
 
-          it('Adds 2 to plan.consecutive.trinkets from basic_earned to basic_6mo', async () => {
-            data.sub.key = 'basic_earned';
-            expect(user.purchased.plan.planId).to.not.exist;
-
-            await api.createSubscription(data);
-
-            expect(user.purchased.plan.planId).to.eql('basic_earned');
-            expect(user.purchased.plan.consecutive.trinkets).to.eql(0);
-
-            data.sub.key = 'basic_6mo';
-            data.updatedFrom.key = 'basic_earned';
-            await api.createSubscription(data);
-            expect(user.purchased.plan.planId).to.eql('basic_6mo');
-            expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
-          });
-
-          it('Adds 2 to plan.consecutive.trinkets when upgrading from basic_6mo to basic_12mo', async () => {
+          it('Adds 12 to plan.consecutive.trinkets when upgrading from basic_6mo to basic_12mo', async () => {
             data.sub.key = 'basic_6mo';
             expect(user.purchased.plan.planId).to.not.exist;
 
             await api.createSubscription(data);
 
             expect(user.purchased.plan.planId).to.eql('basic_6mo');
-            expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
+            expect(user.purchased.plan.consecutive.trinkets).to.eql(1);
 
             data.sub.key = 'basic_12mo';
             data.updatedFrom.key = 'basic_6mo';
             await api.createSubscription(data);
             expect(user.purchased.plan.planId).to.eql('basic_12mo');
-            expect(user.purchased.plan.consecutive.trinkets).to.eql(4);
+            expect(user.purchased.plan.consecutive.trinkets).to.eql(13);
           });
 
-          it('Adds 3 to plan.consecutive.trinkets when upgrading from basic_3mo to basic_12mo', async () => {
+          it('Adds 12 to plan.consecutive.trinkets when upgrading from basic_3mo to basic_12mo', async () => {
             expect(user.purchased.plan.planId).to.not.exist;
 
             await api.createSubscription(data);
@@ -894,7 +746,7 @@ describe('payments/index', () => {
             data.updatedFrom.key = 'basic_3mo';
             await api.createSubscription(data);
             expect(user.purchased.plan.planId).to.eql('basic_12mo');
-            expect(user.purchased.plan.consecutive.trinkets).to.eql(4);
+            expect(user.purchased.plan.consecutive.trinkets).to.eql(13);
           });
         });
 
@@ -902,70 +754,39 @@ describe('payments/index', () => {
           beforeEach(async () => {
             data.updatedFrom = { logic: 'payFull' };
           });
-          it('Adds 10 to plan.consecutive.gemCapExtra from basic_earned to basic_6mo', async () => {
-            data.sub.key = 'basic_earned';
-            expect(user.purchased.plan.planId).to.not.exist;
-
-            await api.createSubscription(data);
 
-            expect(user.purchased.plan.planId).to.eql('basic_earned');
-            expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(0);
-
-            data.sub.key = 'basic_6mo';
-            data.updatedFrom.key = 'basic_earned';
-            await api.createSubscription(data);
-            expect(user.purchased.plan.planId).to.eql('basic_6mo');
-            expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(10);
-          });
-
-          it('Adds 20 to plan.consecutive.gemCapExtra when upgrading from basic_3mo to basic_12mo', async () => {
+          it('Adds 26 to plan.consecutive.gemCapExtra when upgrading from basic_3mo to basic_12mo', async () => {
             expect(user.purchased.plan.planId).to.not.exist;
 
             await api.createSubscription(data);
 
             expect(user.purchased.plan.planId).to.eql('basic_3mo');
-            expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(5);
+            expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(0);
 
             data.sub.key = 'basic_12mo';
             data.updatedFrom.key = 'basic_3mo';
             await api.createSubscription(data);
             expect(user.purchased.plan.planId).to.eql('basic_12mo');
-            expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(25);
-          });
-
-          it('Adds 2 to plan.consecutive.trinkets from basic_earned to basic_6mo', async () => {
-            data.sub.key = 'basic_earned';
-            expect(user.purchased.plan.planId).to.not.exist;
-
-            await api.createSubscription(data);
-
-            expect(user.purchased.plan.planId).to.eql('basic_earned');
-            expect(user.purchased.plan.consecutive.trinkets).to.eql(0);
-
-            data.sub.key = 'basic_6mo';
-            data.updatedFrom.key = 'basic_earned';
-            await api.createSubscription(data);
-            expect(user.purchased.plan.planId).to.eql('basic_6mo');
-            expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
+            expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(26);
           });
 
-          it('Adds 4 to plan.consecutive.trinkets when upgrading from basic_6mo to basic_12mo', async () => {
+          it('Adds 12 to plan.consecutive.trinkets when upgrading from basic_6mo to basic_12mo', async () => {
             data.sub.key = 'basic_6mo';
             expect(user.purchased.plan.planId).to.not.exist;
 
             await api.createSubscription(data);
 
             expect(user.purchased.plan.planId).to.eql('basic_6mo');
-            expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
+            expect(user.purchased.plan.consecutive.trinkets).to.eql(1);
 
             data.sub.key = 'basic_12mo';
             data.updatedFrom.key = 'basic_6mo';
             await api.createSubscription(data);
             expect(user.purchased.plan.planId).to.eql('basic_12mo');
-            expect(user.purchased.plan.consecutive.trinkets).to.eql(6);
+            expect(user.purchased.plan.consecutive.trinkets).to.eql(13);
           });
 
-          it('Adds 4 to plan.consecutive.trinkets when upgrading from basic_3mo to basic_12mo', async () => {
+          it('Adds 12 to plan.consecutive.trinkets when upgrading from basic_3mo to basic_12mo', async () => {
             expect(user.purchased.plan.planId).to.not.exist;
 
             await api.createSubscription(data);
@@ -977,7 +798,7 @@ describe('payments/index', () => {
             data.updatedFrom.key = 'basic_3mo';
             await api.createSubscription(data);
             expect(user.purchased.plan.planId).to.eql('basic_12mo');
-            expect(user.purchased.plan.consecutive.trinkets).to.eql(5);
+            expect(user.purchased.plan.consecutive.trinkets).to.eql(13);
           });
         });
 
@@ -988,30 +809,13 @@ describe('payments/index', () => {
             data.updatedFrom = { logic: 'refundAndRepay' };
           });
           context('Upgrades within first half of subscription', () => {
-            it('Adds 10 to plan.consecutive.gemCapExtra from basic_earned to basic_6mo', async () => {
-              data.sub.key = 'basic_earned';
-              expect(user.purchased.plan.planId).to.not.exist;
-              await api.createSubscription(data);
-
-              expect(user.purchased.plan.planId).to.eql('basic_earned');
-              expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(0);
-
-              data.sub.key = 'basic_6mo';
-              data.updatedFrom.key = 'basic_earned';
-              clock.restore();
-              clock = sinon.useFakeTimers(new Date('2022-01-10'));
-              await api.createSubscription(data);
-              expect(user.purchased.plan.planId).to.eql('basic_6mo');
-              expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(10);
-            });
-
-            it('Adds 15 to plan.consecutive.gemCapExtra when upgrading from basic_3mo to basic_12mo', async () => {
+            it('Adds 26 to plan.consecutive.gemCapExtra when upgrading from basic_3mo to basic_12mo', async () => {
               expect(user.purchased.plan.planId).to.not.exist;
 
               await api.createSubscription(data);
 
               expect(user.purchased.plan.planId).to.eql('basic_3mo');
-              expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(5);
+              expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(0);
 
               data.sub.key = 'basic_12mo';
               data.updatedFrom.key = 'basic_3mo';
@@ -1019,28 +823,10 @@ describe('payments/index', () => {
               clock = sinon.useFakeTimers(new Date('2022-02-05'));
               await api.createSubscription(data);
               expect(user.purchased.plan.planId).to.eql('basic_12mo');
-              expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(20);
-            });
-
-            it('Adds 2 to plan.consecutive.trinkets from basic_earned to basic_6mo', async () => {
-              data.sub.key = 'basic_earned';
-              expect(user.purchased.plan.planId).to.not.exist;
-
-              await api.createSubscription(data);
-
-              expect(user.purchased.plan.planId).to.eql('basic_earned');
-              expect(user.purchased.plan.consecutive.trinkets).to.eql(0);
-
-              data.sub.key = 'basic_6mo';
-              data.updatedFrom.key = 'basic_earned';
-              clock.restore();
-              clock = sinon.useFakeTimers(new Date('2022-01-08'));
-              await api.createSubscription(data);
-              expect(user.purchased.plan.planId).to.eql('basic_6mo');
-              expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
+              expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(26);
             });
 
-            it('Adds 3 to plan.consecutive.trinkets when upgrading from basic_3mo to basic_12mo', async () => {
+            it('Adds 12 to plan.consecutive.trinkets when upgrading from basic_3mo to basic_12mo', async () => {
               expect(user.purchased.plan.planId).to.not.exist;
 
               await api.createSubscription(data);
@@ -1054,17 +840,17 @@ describe('payments/index', () => {
               clock = sinon.useFakeTimers(new Date('2022-01-31'));
               await api.createSubscription(data);
               expect(user.purchased.plan.planId).to.eql('basic_12mo');
-              expect(user.purchased.plan.consecutive.trinkets).to.eql(4);
+              expect(user.purchased.plan.consecutive.trinkets).to.eql(13);
             });
 
-            it('Adds 2 to plan.consecutive.trinkets when upgrading from basic_6mo to basic_12mo', async () => {
+            it('Adds 12 to plan.consecutive.trinkets when upgrading from basic_6mo to basic_12mo', async () => {
               data.sub.key = 'basic_6mo';
               expect(user.purchased.plan.planId).to.not.exist;
 
               await api.createSubscription(data);
 
               expect(user.purchased.plan.planId).to.eql('basic_6mo');
-              expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
+              expect(user.purchased.plan.consecutive.trinkets).to.eql(1);
 
               data.sub.key = 'basic_12mo';
               data.updatedFrom.key = 'basic_6mo';
@@ -1072,35 +858,17 @@ describe('payments/index', () => {
               clock = sinon.useFakeTimers(new Date('2022-01-28'));
               await api.createSubscription(data);
               expect(user.purchased.plan.planId).to.eql('basic_12mo');
-              expect(user.purchased.plan.consecutive.trinkets).to.eql(4);
+              expect(user.purchased.plan.consecutive.trinkets).to.eql(13);
             });
 
-            it('Adds 2 to plan.consecutive.trinkets from basic_earned to basic_6mo after initial cycle', async () => {
-              data.sub.key = 'basic_earned';
-              expect(user.purchased.plan.planId).to.not.exist;
-
-              await api.createSubscription(data);
-
-              expect(user.purchased.plan.planId).to.eql('basic_earned');
-              expect(user.purchased.plan.consecutive.trinkets).to.eql(0);
-
-              data.sub.key = 'basic_6mo';
-              data.updatedFrom.key = 'basic_earned';
-              clock.restore();
-              clock = sinon.useFakeTimers(new Date('2024-01-08'));
-              await api.createSubscription(data);
-              expect(user.purchased.plan.planId).to.eql('basic_6mo');
-              expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
-            });
-
-            it('Adds 2 to plan.consecutive.trinkets when upgrading from basic_6mo to basic_12mo after initial cycle', async () => {
+            it('2 plan.consecutive.trinkets when upgrading from basic_6mo to basic_12mo after initial cycle', async () => {
               data.sub.key = 'basic_6mo';
               expect(user.purchased.plan.planId).to.not.exist;
 
               await api.createSubscription(data);
 
               expect(user.purchased.plan.planId).to.eql('basic_6mo');
-              expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
+              expect(user.purchased.plan.consecutive.trinkets).to.eql(1);
 
               data.sub.key = 'basic_12mo';
               data.updatedFrom.key = 'basic_6mo';
@@ -1108,10 +876,10 @@ describe('payments/index', () => {
               clock = sinon.useFakeTimers(new Date('2022-08-28'));
               await api.createSubscription(data);
               expect(user.purchased.plan.planId).to.eql('basic_12mo');
-              expect(user.purchased.plan.consecutive.trinkets).to.eql(4);
+              expect(user.purchased.plan.consecutive.trinkets).to.eql(13);
             });
 
-            it('Adds 3 to plan.consecutive.trinkets when upgrading from basic_3mo to basic_12mo after initial cycle', async () => {
+            it('Adds 12 to plan.consecutive.trinkets when upgrading from basic_3mo to basic_12mo after initial cycle', async () => {
               expect(user.purchased.plan.planId).to.not.exist;
 
               await api.createSubscription(data);
@@ -1125,11 +893,11 @@ describe('payments/index', () => {
               clock = sinon.useFakeTimers(new Date('2022-07-31'));
               await api.createSubscription(data);
               expect(user.purchased.plan.planId).to.eql('basic_12mo');
-              expect(user.purchased.plan.consecutive.trinkets).to.eql(4);
+              expect(user.purchased.plan.consecutive.trinkets).to.eql(13);
             });
           });
           context('Upgrades within second half of subscription', () => {
-            it('Adds 10 to plan.consecutive.gemCapExtra from basic_earned to basic_6mo', async () => {
+            it('Adds 0 to plan.consecutive.gemCapExtra from basic_earned to basic_6mo', async () => {
               data.sub.key = 'basic_earned';
               expect(user.purchased.plan.planId).to.not.exist;
 
@@ -1144,16 +912,16 @@ describe('payments/index', () => {
               clock = sinon.useFakeTimers(new Date('2022-01-20'));
               await api.createSubscription(data);
               expect(user.purchased.plan.planId).to.eql('basic_6mo');
-              expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(10);
+              expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(0);
             });
 
-            it('Adds 20 to plan.consecutive.gemCapExtra when upgrading from basic_3mo to basic_12mo', async () => {
+            it('Adds 26 to plan.consecutive.gemCapExtra when upgrading from basic_3mo to basic_12mo', async () => {
               expect(user.purchased.plan.planId).to.not.exist;
 
               await api.createSubscription(data);
 
               expect(user.purchased.plan.planId).to.eql('basic_3mo');
-              expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(5);
+              expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(0);
 
               data.sub.key = 'basic_12mo';
               data.updatedFrom.key = 'basic_3mo';
@@ -1161,17 +929,17 @@ describe('payments/index', () => {
               clock = sinon.useFakeTimers(new Date('2022-02-24'));
               await api.createSubscription(data);
               expect(user.purchased.plan.planId).to.eql('basic_12mo');
-              expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(25);
+              expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(26);
             });
 
-            it('Adds 2 to plan.consecutive.trinkets from basic_earned to basic_6mo', async () => {
+            it('Adds 0 to plan.consecutive.trinkets from basic_earned to basic_6mo', async () => {
               data.sub.key = 'basic_earned';
               expect(user.purchased.plan.planId).to.not.exist;
 
               await api.createSubscription(data);
 
               expect(user.purchased.plan.planId).to.eql('basic_earned');
-              expect(user.purchased.plan.consecutive.trinkets).to.eql(0);
+              expect(user.purchased.plan.consecutive.trinkets).to.eql(1);
 
               data.sub.key = 'basic_6mo';
               data.updatedFrom.key = 'basic_earned';
@@ -1179,17 +947,17 @@ describe('payments/index', () => {
               clock = sinon.useFakeTimers(new Date('2022-01-28'));
               await api.createSubscription(data);
               expect(user.purchased.plan.planId).to.eql('basic_6mo');
-              expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
+              expect(user.purchased.plan.consecutive.trinkets).to.eql(1);
             });
 
-            it('Adds 4 to plan.consecutive.trinkets when upgrading from basic_6mo to basic_12mo', async () => {
+            it('Adds 12 to plan.consecutive.trinkets when upgrading from basic_6mo to basic_12mo', async () => {
               data.sub.key = 'basic_6mo';
               expect(user.purchased.plan.planId).to.not.exist;
 
               await api.createSubscription(data);
 
               expect(user.purchased.plan.planId).to.eql('basic_6mo');
-              expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
+              expect(user.purchased.plan.consecutive.trinkets).to.eql(1);
 
               data.sub.key = 'basic_12mo';
               data.updatedFrom.key = 'basic_6mo';
@@ -1197,10 +965,10 @@ describe('payments/index', () => {
               clock = sinon.useFakeTimers(new Date('2022-05-28'));
               await api.createSubscription(data);
               expect(user.purchased.plan.planId).to.eql('basic_12mo');
-              expect(user.purchased.plan.consecutive.trinkets).to.eql(6);
+              expect(user.purchased.plan.consecutive.trinkets).to.eql(13);
             });
 
-            it('Adds 4 to plan.consecutive.trinkets when upgrading from basic_3mo to basic_12mo', async () => {
+            it('Adds 12 to plan.consecutive.trinkets when upgrading from basic_3mo to basic_12mo', async () => {
               expect(user.purchased.plan.planId).to.not.exist;
 
               await api.createSubscription(data);
@@ -1214,17 +982,17 @@ describe('payments/index', () => {
               clock = sinon.useFakeTimers(new Date('2022-03-03'));
               await api.createSubscription(data);
               expect(user.purchased.plan.planId).to.eql('basic_12mo');
-              expect(user.purchased.plan.consecutive.trinkets).to.eql(5);
+              expect(user.purchased.plan.consecutive.trinkets).to.eql(13);
             });
 
-            it('Adds 2 to plan.consecutive.trinkets from basic_earned to basic_6mo after initial cycle', async () => {
+            it('Adds 0 to plan.consecutive.trinkets from basic_earned to basic_6mo after initial cycle', async () => {
               data.sub.key = 'basic_earned';
               expect(user.purchased.plan.planId).to.not.exist;
 
               await api.createSubscription(data);
 
               expect(user.purchased.plan.planId).to.eql('basic_earned');
-              expect(user.purchased.plan.consecutive.trinkets).to.eql(0);
+              expect(user.purchased.plan.consecutive.trinkets).to.eql(1);
 
               data.sub.key = 'basic_6mo';
               data.updatedFrom.key = 'basic_earned';
@@ -1232,17 +1000,17 @@ describe('payments/index', () => {
               clock = sinon.useFakeTimers(new Date('2022-05-28'));
               await api.createSubscription(data);
               expect(user.purchased.plan.planId).to.eql('basic_6mo');
-              expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
+              expect(user.purchased.plan.consecutive.trinkets).to.eql(1);
             });
 
-            it('Adds 4 to plan.consecutive.trinkets when upgrading from basic_6mo to basic_12mo after initial cycle', async () => {
+            it('Adds 12 to plan.consecutive.trinkets when upgrading from basic_6mo to basic_12mo after initial cycle', async () => {
               data.sub.key = 'basic_6mo';
               expect(user.purchased.plan.planId).to.not.exist;
 
               await api.createSubscription(data);
 
               expect(user.purchased.plan.planId).to.eql('basic_6mo');
-              expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
+              expect(user.purchased.plan.consecutive.trinkets).to.eql(1);
 
               data.sub.key = 'basic_12mo';
               data.updatedFrom.key = 'basic_6mo';
@@ -1250,10 +1018,10 @@ describe('payments/index', () => {
               clock = sinon.useFakeTimers(new Date('2023-05-28'));
               await api.createSubscription(data);
               expect(user.purchased.plan.planId).to.eql('basic_12mo');
-              expect(user.purchased.plan.consecutive.trinkets).to.eql(6);
+              expect(user.purchased.plan.consecutive.trinkets).to.eql(13);
             });
 
-            it('Adds 4 to plan.consecutive.trinkets when upgrading from basic_3mo to basic_12mo after initial cycle', async () => {
+            it('Adds 12 to plan.consecutive.trinkets when upgrading from basic_3mo to basic_12mo after initial cycle', async () => {
               expect(user.purchased.plan.planId).to.not.exist;
 
               await api.createSubscription(data);
@@ -1267,7 +1035,7 @@ describe('payments/index', () => {
               clock = sinon.useFakeTimers(new Date('2023-09-03'));
               await api.createSubscription(data);
               expect(user.purchased.plan.planId).to.eql('basic_12mo');
-              expect(user.purchased.plan.consecutive.trinkets).to.eql(5);
+              expect(user.purchased.plan.consecutive.trinkets).to.eql(13);
             });
           });
           afterEach(async () => {
@@ -1277,22 +1045,6 @@ describe('payments/index', () => {
       });
 
       context('Downgrades subscription', () => {
-        it('does not remove from plan.consecutive.gemCapExtra from basic_6mo to basic_earned', async () => {
-          data.sub.key = 'basic_6mo';
-          expect(user.purchased.plan.planId).to.not.exist;
-
-          await api.createSubscription(data);
-
-          expect(user.purchased.plan.planId).to.eql('basic_6mo');
-          expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(10);
-
-          data.sub.key = 'basic_earned';
-          data.updatedFrom = { key: 'basic_6mo' };
-          await api.createSubscription(data);
-          expect(user.purchased.plan.planId).to.eql('basic_earned');
-          expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(10);
-        });
-
         it('does not remove from plan.consecutive.gemCapExtra from basic_12mo to basic_3mo', async () => {
           expect(user.purchased.plan.planId).to.not.exist;
 
@@ -1300,28 +1052,12 @@ describe('payments/index', () => {
           await api.createSubscription(data);
 
           expect(user.purchased.plan.planId).to.eql('basic_12mo');
-          expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(20);
+          expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(26);
 
           data.sub.key = 'basic_3mo';
           data.updatedFrom = { key: 'basic_12mo' };
           await api.createSubscription(data);
-          expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(20);
-        });
-
-        it('does not remove from plan.consecutive.trinkets from basic_6mo to basic_earned', async () => {
-          data.sub.key = 'basic_6mo';
-          expect(user.purchased.plan.planId).to.not.exist;
-
-          await api.createSubscription(data);
-
-          expect(user.purchased.plan.planId).to.eql('basic_6mo');
-          expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
-
-          data.sub.key = 'basic_earned';
-          data.updatedFrom = { key: 'basic_6mo' };
-          await api.createSubscription(data);
-          expect(user.purchased.plan.planId).to.eql('basic_earned');
-          expect(user.purchased.plan.consecutive.trinkets).to.eql(2);
+          expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(26);
         });
 
         it('does not remove from plan.consecutive.trinkets from basic_12mo to basic_3mo', async () => {
@@ -1331,12 +1067,12 @@ describe('payments/index', () => {
           await api.createSubscription(data);
 
           expect(user.purchased.plan.planId).to.eql('basic_12mo');
-          expect(user.purchased.plan.consecutive.trinkets).to.eql(4);
+          expect(user.purchased.plan.consecutive.trinkets).to.eql(13);
 
           data.sub.key = 'basic_3mo';
           data.updatedFrom = { key: 'basic_12mo' };
           await api.createSubscription(data);
-          expect(user.purchased.plan.consecutive.trinkets).to.eql(4);
+          expect(user.purchased.plan.consecutive.trinkets).to.eql(13);
         });
       });
     });
@@ -1453,6 +1189,32 @@ describe('payments/index', () => {
         expect(user.purchased.plan.extraMonths).to.eql(0);
       });
 
+      it('does not reset gemCapExtra', async () => {
+        user.purchased.plan.consecutive.gemCapExtra = 12;
+
+        await api.cancelSubscription(data);
+
+        expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(12);
+      });
+
+      it('initializes gemCapExtra', async () => {
+        await api.cancelSubscription(data);
+        expect(user.purchased.plan.consecutive.gemCapExtra).to.eql(0);
+      });
+
+      it('initializes hourglasses', async () => {
+        await api.cancelSubscription(data);
+        expect(user.purchased.plan.consecutive.trinkets).to.eql(0);
+      });
+
+      it('does not reset owned hourglasses', async () => {
+        user.purchased.plan.consecutive.trinkets = 12;
+
+        await api.cancelSubscription(data);
+
+        expect(user.purchased.plan.consecutive.trinkets).to.eql(12);
+      });
+
       it('sends an email', async () => {
         await api.cancelSubscription(data);
 
diff --git a/test/api/unit/libs/payments/stripe/oneTimePayments.test.js b/test/api/unit/libs/payments/stripe/oneTimePayments.test.js
index c52cd162b4a..7ccb85b8eee 100644
--- a/test/api/unit/libs/payments/stripe/oneTimePayments.test.js
+++ b/test/api/unit/libs/payments/stripe/oneTimePayments.test.js
@@ -308,6 +308,7 @@ describe('Stripe - One Time Payments', () => {
           customerId,
           paymentMethod: 'Gift',
           gift,
+          autoRenews: false,
           gemsBlock: undefined,
         });
       });
diff --git a/test/api/unit/libs/payments/stripe/subscriptions.test.js b/test/api/unit/libs/payments/stripe/subscriptions.test.js
index c135f94b276..3955037c020 100644
--- a/test/api/unit/libs/payments/stripe/subscriptions.test.js
+++ b/test/api/unit/libs/payments/stripe/subscriptions.test.js
@@ -173,6 +173,7 @@ describe('Stripe - Subscriptions', () => {
         paymentMethod: 'Stripe',
         sub: sinon.match({ ...sub }),
         groupId: null,
+        autoRenews: true,
       });
     });
 
@@ -197,6 +198,7 @@ describe('Stripe - Subscriptions', () => {
         paymentMethod: 'Stripe',
         sub: sinon.match({ ...sub }),
         groupId,
+        autoRenews: true,
       });
     });
 
@@ -231,6 +233,7 @@ describe('Stripe - Subscriptions', () => {
         paymentMethod: 'Stripe',
         sub: sinon.match({ ...sub }),
         groupId,
+        autoRenews: true,
       });
     });
   });
diff --git a/test/api/v3/integration/user/buy/POST-user_buy_mystery_set.test.js b/test/api/v3/integration/user/buy/POST-user_buy_mystery_set.test.js
index d4df2c93b3f..cd0576d13a6 100644
--- a/test/api/v3/integration/user/buy/POST-user_buy_mystery_set.test.js
+++ b/test/api/v3/integration/user/buy/POST-user_buy_mystery_set.test.js
@@ -31,7 +31,7 @@ describe('POST /user/buy-mystery-set/:key', () => {
 
     expect(res.data).to.eql({
       items: JSON.parse(JSON.stringify(user.items)), // otherwise dates can't be compared
-      purchasedPlanConsecutive: user.purchased.plan.consecutive,
+      purchasedPlanConsecutive: JSON.parse(JSON.stringify(user.purchased.plan.consecutive)),
     });
     expect(res.message).to.equal(t('hourglassPurchaseSet'));
   });
diff --git a/test/common/libs/cron.test.js b/test/common/libs/cron.test.js
index e8be92fceb5..c2e8f7b32bb 100644
--- a/test/common/libs/cron.test.js
+++ b/test/common/libs/cron.test.js
@@ -183,8 +183,6 @@ describe('cron utility functions', () => {
   });
 
   describe('getPlanContext', () => {
-    const now = new Date(2022, 5, 1);
-
     function baseUserData (count, offset, planId) {
       return {
         purchased: {
@@ -192,7 +190,7 @@ describe('cron utility functions', () => {
             consecutive: {
               count,
               offset,
-              gemCapExtra: 25,
+              gemCapExtra: 26,
               trinkets: 19,
             },
             quantity: 1,
@@ -213,52 +211,19 @@ describe('cron utility functions', () => {
       };
     }
 
-    it('monthly plan, next date in 3 months', () => {
+    it('elapsedMonths is 0 if its the same month', () => {
       const user = baseUserData(60, 0, 'group_plan_auto');
-      user.purchased.plan.perkMonthCount = 0;
-
-      const planContext = getPlanContext(user, now);
-
-      expect(planContext.nextHourglassDate)
-        .to.be.sameMoment('2022-08-10T02:00:00.144Z');
-    });
 
-    it('monthly plan, next date in 1 month', () => {
-      const user = baseUserData(62, 0, 'group_plan_auto');
-      user.purchased.plan.perkMonthCount = 2;
-
-      const planContext = getPlanContext(user, now);
-
-      expect(planContext.nextHourglassDate)
-        .to.be.sameMoment('2022-06-10T02:00:00.144Z');
+      const planContext = getPlanContext(user, new Date(2022, 4, 20));
+      expect(planContext.elapsedMonths).to.equal(0);
     });
 
-    it('multi-month plan, no offset', () => {
-      const user = baseUserData(60, 0, 'basic_3mo');
-
-      const planContext = getPlanContext(user, now);
-
-      expect(planContext.nextHourglassDate)
-        .to.be.sameMoment('2022-06-10T02:00:00.144Z');
-    });
-
-    it('multi-month plan with offset', () => {
-      const user = baseUserData(60, 1, 'basic_3mo');
-
-      const planContext = getPlanContext(user, now);
-
-      expect(planContext.nextHourglassDate)
-        .to.be.sameMoment('2022-07-10T02:00:00.144Z');
-    });
-
-    it('multi-month plan with perk count', () => {
-      const user = baseUserData(60, 1, 'basic_3mo');
-      user.purchased.plan.perkMonthCount = 2;
+    it('elapsedMonths is 1 after one month', () => {
+      const user = baseUserData(60, 0, 'group_plan_auto');
 
-      const planContext = getPlanContext(user, now);
+      const planContext = getPlanContext(user, new Date(2022, 5, 11));
 
-      expect(planContext.nextHourglassDate)
-        .to.be.sameMoment('2022-07-10T02:00:00.144Z');
+      expect(planContext.elapsedMonths).to.equal(1);
     });
   });
 });
diff --git a/website/client/src/assets/css/sprites/spritesmith-main.css b/website/client/src/assets/css/sprites/spritesmith-main.css
index 3c87e3e11c7..b2fb062682a 100644
--- a/website/client/src/assets/css/sprites/spritesmith-main.css
+++ b/website/client/src/assets/css/sprites/spritesmith-main.css
@@ -40127,6 +40127,11 @@
   width: 28px;
   height: 28px;
 }
+.notif_subscriber_reward {
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_subscriber_reward.png');
+  width: 28px;
+  height: 28px;
+}
 .npc_bailey {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/npc_bailey.png');
   width: 60px;
diff --git a/website/client/src/assets/images/confetti.png b/website/client/src/assets/images/confetti.png
new file mode 100644
index 00000000000..f2bcbc52e35
Binary files /dev/null and b/website/client/src/assets/images/confetti.png differ
diff --git a/website/client/src/assets/images/subscriber-food.png b/website/client/src/assets/images/subscriber-food.png
deleted file mode 100644
index 88fc52f7ccb..00000000000
Binary files a/website/client/src/assets/images/subscriber-food.png and /dev/null differ
diff --git a/website/client/src/assets/scss/colors.scss b/website/client/src/assets/scss/colors.scss
index 9ee2894a5af..4e1536efa24 100644
--- a/website/client/src/assets/scss/colors.scss
+++ b/website/client/src/assets/scss/colors.scss
@@ -78,15 +78,3 @@ $gold-color: #FFA624;
 $hourglass-color: #2995CD;
 
 $purple-task: #925cf3;
-
-.gray-200 {
-  color: $gray-200 !important;
-}
-
-.purple-300 {
-  color: $purple-300 !important;
-}
-
-.white {
-  color: $white !important;
-}
diff --git a/website/client/src/assets/scss/typography.scss b/website/client/src/assets/scss/typography.scss
index 970fd417370..59b206aafd2 100644
--- a/website/client/src/assets/scss/typography.scss
+++ b/website/client/src/assets/scss/typography.scss
@@ -86,3 +86,91 @@ h4 {
 .opacity-75 {
   opacity: 0.75;
 }
+
+.bg-gray-100 {
+  background-color: $gray-100 !important;
+}
+
+.bg-gray-300 {
+  background-color: $gray-300 !important;
+}
+
+.bg-gray-600 {
+  background-color: $gray-600 !important;
+}
+
+.bg-gray-700 {
+  background-color: $gray-700 !important;
+}
+
+.bg-green-10 {
+  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;
+}
+
+.gray-10 {
+  color: $gray-10 !important;
+}
+
+.gray-50 {
+  color: $gray-50 !important;
+}
+
+.gray-200 {
+  color: $gray-200 !important;
+}
+
+.gray-300 {
+  color: $gray-300 !important;
+}
+
+.green-10 {
+  color: $green-10 !important;
+}
+
+.maroon-50 {
+  color: $maroon-50 !important;
+}
+
+.purple-200 {
+  color: $purple-200 !important;
+}
+
+.purple-300 {
+  color: $purple-300 !important;
+}
+
+.purple-600 {
+  color: $purple-600 !important;
+}
+
+.teal-1 {
+  color: $teal-1 !important;
+}
+
+.teal-10 {
+  color: $teal-10 !important;
+}
+
+.yellow-10 {
+  color: $yellow-10 !important;
+}
+
+.white {
+  color: $white !important;
+}
diff --git a/website/client/src/assets/svg/divider-stars.svg b/website/client/src/assets/svg/divider-stars.svg
new file mode 100644
index 00000000000..648001dab4d
--- /dev/null
+++ b/website/client/src/assets/svg/divider-stars.svg
@@ -0,0 +1,32 @@
+<svg width="40" height="16" viewBox="0 0 40 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3333 5.33333L12 8L17.3333 10.6667L20 16L22.6667 10.6667L28 8L22.6667 5.33333L20 0L17.3333 5.33333Z" fill="#BDA8FF"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M25 7.99984L21.6667 9.6665L20 7.99984L25 7.99984Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M20 3L21.6666 6.33333L20 8V3Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M15 8L18.3333 6.33333L20 8L15 8Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M20 13L18.3333 9.66667L20 8V13Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M15 7.99984L18.3333 9.6665L20 7.99984L15 7.99984Z" fill="#925CF3"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M20 3L18.3333 6.33333L20 8V3Z" fill="#925CF3"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M25 8L21.6667 6.33333L20 8L25 8Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M20 13L21.6666 9.66667L20 8V13Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M20.7999 7.20041L22.3333 8.00041L20.7999 8.80041L19.9999 10.3337L19.1999 8.80041L17.6666 8.00041L19.1999 7.20041L19.9999 5.66707L20.7999 7.20041Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.66667 6.66667L0 8L2.66667 9.33333L4 12L5.33333 9.33333L8 8L5.33333 6.66667L4 4L2.66667 6.66667Z" fill="#925CF3"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M6.49976 7.99967L4.83309 8.83301L3.99976 7.99967H6.49976Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M3.99998 5.5L4.83331 7.16667L3.99998 8L3.99998 5.5Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8L3.16667 7.16667L4 8H1.5Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M4 10.5L3.16667 8.83333L4 8V10.5Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M1.50018 7.99967L3.16685 8.83301L4.00018 7.99967H1.50018Z" fill="#6133B4"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M4 5.5L3.16667 7.16667L4 8V5.5Z" fill="#6133B4"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M6.5 8L4.83333 7.16667L4 8H6.5Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M3.99998 10.5L4.83331 8.83333L3.99998 8L3.99998 10.5Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M4.40002 7.59935L5.16669 7.99935L4.40002 8.39935L4.00002 9.16602L3.60002 8.39935L2.83335 7.99935L3.60002 7.59935L4.00002 6.83268L4.40002 7.59935Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.6667 6.66667L32 8L34.6667 9.33333L36 12L37.3333 9.33333L40 8L37.3333 6.66667L36 4L34.6667 6.66667Z" fill="#925CF3"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M38.4998 7.99967L36.8331 8.83301L35.9998 7.99967H38.4998Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M36 5.5L36.8333 7.16667L36 8V5.5Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M33.5 8L35.1667 7.16667L36 8H33.5Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M36 10.5L35.1667 8.83333L36 8V10.5Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M33.5002 7.99967L35.1668 8.83301L36.0002 7.99967H33.5002Z" fill="#6133B4"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M36 5.5L35.1667 7.16667L36 8V5.5Z" fill="#6133B4"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M38.5 8L36.8333 7.16667L36 8H38.5Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M36 10.5L36.8333 8.83333L36 8V10.5Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M36.4 7.59935L37.1667 7.99935L36.4 8.39935L36 9.16602L35.6 8.39935L34.8334 7.99935L35.6 7.59935L36 6.83268L36.4 7.59935Z" fill="white"/>
+</svg>
diff --git a/website/client/src/assets/svg/habitica-logo.svg b/website/client/src/assets/svg/habitica-logo.svg
index 54b2acc5a19..01d80fb183d 100644
--- a/website/client/src/assets/svg/habitica-logo.svg
+++ b/website/client/src/assets/svg/habitica-logo.svg
@@ -1,7 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 144 31">
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#FFF" d="M120.876 24.007a2.27 2.27 0 0 0-3.183.41 4.595 4.595 0 0 1-3.663 1.804 4.62 4.62 0 0 1-4.613-4.335c-.005-.35-.009-2.864-.009-3.19a4.627 4.627 0 0 1 4.622-4.622c1.28 0 2.47.51 3.353 1.44a2.269 2.269 0 0 0 3.29-3.125 9.2 9.2 0 0 0-6.643-2.853c-5.05 0-9.16 4.109-9.16 9.16 0 .03.002 3.175.014 3.406a9.158 9.158 0 0 0 9.146 8.657 9.1 9.1 0 0 0 7.257-3.57 2.27 2.27 0 0 0-.411-3.182M134.373 26.221a4.62 4.62 0 0 1-4.613-4.333c-.005-.353-.008-2.877-.008-3.193a4.627 4.627 0 0 1 4.621-4.622 4.627 4.627 0 0 1 4.622 4.622c0 .328-.003 2.84-.009 3.189a4.618 4.618 0 0 1-4.613 4.337m6.891-17.078a2.264 2.264 0 0 0-2.19 1.706 9.095 9.095 0 0 0-4.7-1.313c-5.051 0-9.16 4.109-9.16 9.16 0 .031.001 3.173.013 3.406a9.158 9.158 0 0 0 9.146 8.657 9.118 9.118 0 0 0 4.81-1.37 2.268 2.268 0 0 0 4.35-.899V11.412a2.27 2.27 0 0 0-2.269-2.269M30.546 26.221a4.62 4.62 0 0 1-4.613-4.335c-.006-.35-.01-2.863-.01-3.19a4.627 4.627 0 0 1 4.623-4.623 4.627 4.627 0 0 1 4.622 4.622c0 .328-.004 2.84-.01 3.189a4.618 4.618 0 0 1-4.612 4.337m6.89-17.078a2.264 2.264 0 0 0-2.19 1.706 9.095 9.095 0 0 0-4.7-1.313c-5.052 0-9.16 4.109-9.16 9.16 0 .031 0 3.174.013 3.406a9.158 9.158 0 0 0 9.147 8.657 9.118 9.118 0 0 0 4.809-1.37 2.268 2.268 0 0 0 4.35-.899V11.412a2.27 2.27 0 0 0-2.269-2.269M70.84 9.143a2.27 2.27 0 0 0-2.27 2.27V28.49a2.27 2.27 0 0 0 4.539 0V11.412a2.27 2.27 0 0 0-2.27-2.269M97.563 9.143a2.27 2.27 0 0 0-2.27 2.27V28.49a2.27 2.27 0 0 0 4.538 0V11.412a2.27 2.27 0 0 0-2.268-2.269M59.066 21.888a4.62 4.62 0 0 1-4.613 4.333 4.62 4.62 0 0 1-4.613-4.338c-.006-.35-.009-2.86-.009-3.187a4.627 4.627 0 0 1 4.622-4.622 4.627 4.627 0 0 1 4.622 4.622c0 .315-.004 2.84-.009 3.192M54.453 9.536a9.089 9.089 0 0 0-4.622 1.265V2.33a2.27 2.27 0 0 0-4.537 0V28.49a2.269 2.269 0 0 0 4.35.9 9.117 9.117 0 0 0 4.81 1.37 9.16 9.16 0 0 0 9.146-8.666c.011-.224.013-3.367.013-3.398 0-5.052-4.11-9.16-9.16-9.16M8.92 9.536a9.143 9.143 0 0 0-4.382 1.11V2.33A2.27 2.27 0 0 0 0 2.33v26.16a2.269 2.269 0 1 0 4.538 0V16.763c.173-.147.333-.314.46-.516a4.601 4.601 0 0 1 3.921-2.173 4.627 4.627 0 0 1 4.622 4.622c0 .415-.004 9.233-.01 9.738a2.27 2.27 0 0 0 4.535.172c.01-.225.012-9.814.012-9.91 0-5.052-4.108-9.16-9.159-9.16M88.95 9.143h-2.648V2.33a2.27 2.27 0 0 0-4.538 0v6.813h-2.647a2.27 2.27 0 0 0 0 4.538h2.647V28.49a2.27 2.27 0 0 0 4.538 0V13.681h2.647a2.27 2.27 0 0 0 0-4.538"/>
-        <path fill="#FF6066" d="M73.025 2.33a2.27 2.27 0 1 1-4.538 0 2.27 2.27 0 0 1 4.538 0"/>
-        <path fill="#4FB5E8" d="M99.748 2.33a2.27 2.27 0 1 1-4.539 0 2.27 2.27 0 0 1 4.539 0"/>
-    </g>
+<svg width="217" height="48" viewBox="0 0 217 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M108.785 0.0195312C106.343 0.0195312 104.355 1.99967 104.355 4.44184C104.355 6.88401 106.343 8.86415 108.785 8.86415C111.227 8.86415 113.215 6.87668 113.215 4.44184C113.215 2.007 111.227 0.0195312 108.785 0.0195312Z" fill="#FF6165"/>
+<path d="M148.564 0.0195312C146.121 0.0195312 144.134 1.99967 144.134 4.44184C144.134 6.88401 146.121 8.86415 148.564 8.86415C151.006 8.86415 152.993 6.87668 152.993 4.44184C152.993 2.007 151.006 0.0195312 148.564 0.0195312Z" fill="#50B5E9"/>
+<path d="M184.2 42.1989C181.332 45.8879 177.005 48 172.319 48C164.355 48 157.776 41.8176 157.344 33.9264C157.322 33.5303 157.322 28.8367 157.322 28.7927C157.322 20.5788 164.047 13.8976 172.319 13.8976C176.411 13.8976 180.379 15.5917 183.195 18.54C184.053 19.4347 184.515 20.6154 184.478 21.8548C184.449 23.0943 183.928 24.2457 183.019 25.0964C181.156 26.8565 178.201 26.7759 176.426 24.9277C175.341 23.7983 173.881 23.1749 172.312 23.1749C169.188 23.1749 166.65 25.6904 166.65 28.7853C166.65 29.2694 166.65 32.995 166.665 33.5083C166.841 36.4052 169.327 38.7154 172.312 38.7154C174.087 38.7154 175.722 37.916 176.8 36.5225C178.369 34.4984 181.31 34.1244 183.342 35.6865C184.332 36.4419 184.962 37.5346 185.124 38.7667C185.285 39.9988 184.948 41.2162 184.192 42.1989H184.2ZM216.82 18.4739V43.4164C216.82 45.9392 214.774 47.9927 212.258 47.9927C210.916 47.9927 209.669 47.3986 208.819 46.4159C206.787 47.45 204.543 47.9927 202.262 47.9927C194.533 47.9927 188.145 41.9129 187.727 34.1464C187.705 33.7577 187.705 29.152 187.705 29.1007C187.705 21.0261 194.239 14.4623 202.262 14.4623C204.419 14.4623 206.545 14.9537 208.503 15.8924C209.332 14.6677 210.726 13.8903 212.266 13.8903C214.781 13.8903 216.827 15.9438 216.827 18.4666L216.82 18.4739ZM207.689 33.721C207.697 33.1196 207.704 29.5774 207.704 29.108C207.704 26.0791 205.262 23.6223 202.262 23.6223C199.263 23.6223 196.821 26.0865 196.821 29.108C196.821 29.5701 196.821 33.2443 196.836 33.7577C197.004 36.5812 199.395 38.84 202.262 38.84C205.13 38.84 207.506 36.5959 207.689 33.721ZM63.3042 18.4739V43.4164C63.3042 45.9392 61.2581 47.9927 58.7426 47.9927C57.4006 47.9927 56.1539 47.3986 55.3032 46.4159C53.2717 47.45 51.0276 47.9927 48.7469 47.9927C41.0099 47.9927 34.6296 41.9129 34.2115 34.1464C34.1895 33.8017 34.1895 30.2008 34.1895 29.1007C34.1895 21.0261 40.7238 14.4623 48.7469 14.4623C50.903 14.4623 53.0371 14.9537 54.9878 15.8924C55.8165 14.6677 57.2099 13.8903 58.75 13.8903C61.2654 13.8903 63.3115 15.9438 63.3115 18.4666L63.3042 18.4739ZM48.7469 23.6223C45.7474 23.6223 43.3053 26.0865 43.3053 29.108C43.3053 29.5847 43.3053 33.237 43.32 33.7503C43.4886 36.5812 45.8794 38.84 48.7469 38.84C51.6143 38.84 53.9904 36.5959 54.1738 33.721C54.1811 33.1196 54.1884 29.5847 54.1884 29.108C54.1884 26.0791 51.7463 23.6223 48.7469 23.6223ZM108.78 14.1396C106.338 14.1396 104.351 16.1931 104.351 18.716V43.4164C104.351 45.9392 106.338 47.9927 108.78 47.9927C111.222 47.9927 113.21 45.9392 113.21 43.4164V18.716C113.21 16.1931 111.222 14.1396 108.78 14.1396ZM148.558 14.1396C146.116 14.1396 144.129 16.1931 144.129 18.716V43.4164C144.129 45.9392 146.116 47.9927 148.558 47.9927C151 47.9927 152.988 45.9392 152.988 43.4164V18.716C152.988 16.1931 151 14.1396 148.558 14.1396ZM98.7551 28.866C98.7551 28.91 98.7551 33.5817 98.7331 33.9704C98.3151 41.8396 91.9275 48 84.1978 48C81.917 48 79.6729 47.45 77.6415 46.4012C76.7908 47.3986 75.5441 48 74.1947 48C71.6792 48 69.6331 45.9245 69.6331 43.3797V4.62032C69.6331 2.07548 71.6792 0 74.1947 0C76.7101 0 78.7562 2.07548 78.7562 4.62032V15.1224C80.487 14.411 82.3351 14.037 84.1978 14.037C92.2282 14.037 98.7551 20.6888 98.7551 28.866ZM84.1978 23.285C81.1983 23.285 78.7562 25.7858 78.7562 28.866C78.7562 29.35 78.7562 33.0536 78.7709 33.5743C78.9469 36.4565 81.3303 38.752 84.1978 38.752C87.0653 38.752 89.434 36.4712 89.6247 33.5523C89.6247 32.929 89.6394 29.328 89.6394 28.866C89.6394 25.7858 87.1973 23.285 84.1978 23.285ZM14.3887 14.037C12.6139 14.037 10.8612 14.3597 9.21109 14.9757V4.62766C9.21109 2.08281 7.14299 0.00733401 4.60554 0.00733401C2.06809 0.00733401 0 2.08281 0 4.62766V43.3797C0 45.9319 2.06809 48 4.60554 48C7.14299 48 9.21109 45.9245 9.21109 43.3797V26.5412C9.40176 26.3358 11.1178 23.285 14.3887 23.285C17.4395 23.285 19.9182 25.7858 19.9182 28.866C19.9182 29.482 19.9182 42.529 19.9036 43.2623C19.8376 45.7852 21.759 47.868 24.2524 47.9927C24.3404 47.9927 24.4211 47.9927 24.5091 47.9927C26.9586 47.9927 28.9753 46.0639 29.1 43.607C29.122 43.2257 29.122 29.0053 29.122 28.866C29.122 20.6888 22.5144 14.037 14.3887 14.037ZM136.399 14.037H133.7V4.62032C133.7 2.07548 131.61 0 129.036 0C126.462 0 124.372 2.07548 124.372 4.62032V14.037H121.673C119.106 14.037 117.009 16.1125 117.009 18.6646C117.009 21.2168 119.099 23.285 121.673 23.285H124.372V43.3797C124.372 45.9319 126.462 48 129.036 48C131.61 48 133.7 45.9245 133.7 43.3797V23.285H136.399C138.973 23.285 141.063 21.2095 141.063 18.6646C141.063 16.1198 138.973 14.037 136.399 14.037Z" fill="white"/>
 </svg>
diff --git a/website/client/src/assets/svg/hourglass-sparkle-left.svg b/website/client/src/assets/svg/hourglass-sparkle-left.svg
new file mode 100644
index 00000000000..c4d221fbb8d
--- /dev/null
+++ b/website/client/src/assets/svg/hourglass-sparkle-left.svg
@@ -0,0 +1,48 @@
+<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.4728 37.2881L31.0401 40.6634C30.8722 41.0588 30.533 41.3618 30.1106 41.4581C25.4964 42.5161 15.7591 38.3829 13.3131 34.3281C13.0907 33.958 13.073 33.5035 13.2408 33.108L14.6735 29.7328C15.9802 26.6545 18.829 24.3765 21.9907 23.6412C22.9143 23.4268 23.3484 22.4041 22.8611 21.5907C21.1937 18.8056 20.8534 15.174 22.16 12.0957L23.5927 8.72043C23.7606 8.32501 24.0998 8.02203 24.5199 7.92663C29.1358 6.86935 38.8731 11.0026 41.3173 15.0567C41.5422 15.4259 41.5599 15.8804 41.392 16.2758L39.9593 19.651C38.6527 22.7293 35.8039 25.0073 32.6422 25.7426C31.7185 25.957 31.2844 26.9797 31.7718 27.7931C33.4392 30.5782 33.7795 34.2099 32.4728 37.2881Z" fill="#A9DCF6" fill-opacity="0.8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.664 12.0938C29.7729 10.8666 27.3007 10.4316 25.8346 10.5102L24.7036 13.1747C23.7617 15.3938 23.9622 18.0859 25.2286 20.2007C25.9064 21.3331 26.0063 22.7223 25.4978 23.9203C24.9893 25.1182 23.9206 26.0114 22.6375 26.3096C20.2342 26.8686 18.1583 28.5945 17.2171 30.8118L16.0854 33.478C17.0473 34.5873 19.0775 36.0634 21.9686 37.2906C24.8596 38.5178 27.3318 38.9528 28.7979 38.8742L29.9297 36.208C30.8709 33.9906 30.6703 31.2985 29.4039 29.1837C28.7261 28.0513 28.6263 26.662 29.1348 25.4641C29.6433 24.2662 30.7119 23.3729 31.9957 23.0732C34.3983 22.5158 36.4742 20.7899 37.4162 18.5709L38.5472 15.9064C37.5853 14.7971 35.555 13.321 32.664 12.0938Z" fill="white" fill-opacity="0.9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.5684 13.8635C33.7371 14.784 35.9512 15.9582 35.7471 16.4997C35.5853 16.9371 35.2218 17.7653 33.0852 17.902C31.0091 18.0368 30.0196 19.4736 29.0902 19.0791C28.0092 18.6202 28.3314 17.6878 27.3948 16.2289C26.429 14.7261 26.743 13.3826 26.9685 12.8935C27.2828 12.2137 29.3996 12.9429 31.5684 13.8635Z" fill="#9A62FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.3942 16.2291C26.4285 14.7263 26.7424 13.3828 26.9679 12.8937C27.2164 12.3553 28.5959 12.7006 30.2369 13.3243C29.6862 13.3623 28.8925 13.5984 28.6315 14.6159C28.3585 15.6755 29.4738 17.4486 28.8447 18.2192C28.7229 18.3703 28.5806 18.4714 28.4271 18.5381C28.0907 18.0153 28.0509 17.2522 27.3942 16.2291Z" fill="#4F2A93"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.3429 26.9852C27.003 27.2653 26.6667 28.5305 27.3103 29.6779C28.1003 31.0844 28.7422 32.6761 28.3659 34.4146C28.0561 35.8466 27.757 35.9145 27.4109 35.8779C27.0665 35.842 24.5481 35.2396 22.4522 33.773C20.3546 32.3057 19.4609 30.8532 20.0783 30.0166C20.6666 29.2207 21.6339 28.7393 23.1921 28.369C24.6835 28.0155 25.6829 26.705 26.3429 26.9852Z" fill="#9A62FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.4114 35.8785C27.0653 35.8419 24.5469 35.2396 22.451 33.773C20.7841 32.6066 19.878 31.4501 19.8876 30.6036C19.8956 30.5893 19.9037 30.575 19.9144 30.5637C20.2509 30.1316 22.3027 30.658 24.5368 32.0612C26.6666 33.3964 28.1998 34.9294 27.8338 35.7684C27.6986 35.8902 27.5598 35.8942 27.4114 35.8785Z" fill="#4F2A93"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.80368 18.2264L8.2016e-05 20.1109L3.80368 21.9953L5.70549 25.7643L7.60729 21.9953L11.4109 20.1109L7.60729 18.2264L5.70549 14.4574L3.80368 18.2264Z" fill="#925CF3"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M9.27148 20.1109L6.89423 21.2887L5.70561 20.1109H9.27148Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M5.70542 16.5775L6.89404 18.933L5.70542 20.1108V16.5775Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M2.13969 20.1108L4.51694 18.933L5.70557 20.1108H2.13969Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M5.70557 23.6443L4.51694 21.2887L5.70557 20.1109V23.6443Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M2.13969 20.1109L4.51694 21.2887L5.70557 20.1109H2.13969Z" fill="#6133B4"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M5.70557 16.5775L4.51694 18.933L5.70557 20.1108V16.5775Z" fill="#6133B4"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M9.27148 20.1108L6.89423 18.933L5.70561 20.1108H9.27148Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M5.70542 23.6443L6.89404 21.2887L5.70542 20.1109V23.6443Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M6.27609 19.5455L7.36963 20.1109L6.27609 20.6762L5.70555 21.7598L5.13501 20.6762L4.04148 20.1109L5.13501 19.5455L5.70555 18.4619L6.27609 19.5455Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8625 1.53112L11.3172 2.29668L12.8625 3.06225L13.6351 4.59338L14.4077 3.06225L15.9529 2.29668L14.4077 1.53112L13.6351 -1.81198e-05L12.8625 1.53112Z" fill="#BDA8FF"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M15.0837 2.29667L14.118 2.77515L13.6351 2.29667H15.0837Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M13.635 0.861193L14.1179 1.81815L13.635 2.29663V0.861193Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M12.1864 2.29663L13.1521 1.81815L13.635 2.29663H12.1864Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M13.635 3.73218L13.1521 2.77522L13.635 2.29674V3.73218Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M12.1864 2.29667L13.1521 2.77515L13.635 2.29667H12.1864Z" fill="#925CF3"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M13.635 0.861193L13.1521 1.81815L13.635 2.29663V0.861193Z" fill="#925CF3"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M15.0837 2.29663L14.118 1.81815L13.6351 2.29663H15.0837Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M13.635 3.73218L14.1179 2.77522L13.635 2.29674V3.73218Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M13.8668 2.06701L14.311 2.29668L13.8668 2.52635L13.635 2.96655L13.4032 2.52635L12.959 2.29668L13.4032 2.06701L13.635 1.62681L13.8668 2.06701Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.2455 29.7042L45.8682 30.882L48.2455 32.0598L49.4341 34.4154L50.6227 32.0598L53 30.882L50.6227 29.7042L49.4341 27.3486L48.2455 29.7042Z" fill="#925CF3"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M51.6628 30.882L50.1771 31.6182L49.4342 30.882H51.6628Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M49.4341 28.6737L50.177 30.146L49.4341 30.8821V28.6737Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M47.2054 30.8821L48.6912 30.146L49.4341 30.8821H47.2054Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M49.4341 33.0903L48.6912 31.6181L49.4341 30.882V33.0903Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M47.2054 30.882L48.6912 31.6182L49.4341 30.882H47.2054Z" fill="#6133B4"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M49.4341 28.6737L48.6912 30.146L49.4341 30.8821V28.6737Z" fill="#6133B4"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M51.6628 30.8821L50.1771 30.146L49.4342 30.8821H51.6628Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M49.4341 33.0903L50.177 31.6181L49.4341 30.882V33.0903Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M49.7907 30.5287L50.4741 30.882L49.7907 31.2354L49.4341 31.9126L49.0775 31.2354L48.394 30.882L49.0775 30.5287L49.4341 29.8515L49.7907 30.5287Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.9456 43.5776L35.1911 45.9332L39.9456 48.2888L42.3228 53L44.7001 48.2888L49.4546 45.9332L44.7001 43.5776L42.3228 38.8665L39.9456 43.5776Z" fill="#6133B4"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M46.7803 45.9333L43.8087 47.4055L42.3229 45.9333H46.7803Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M42.3228 41.5165L43.8086 44.461L42.3228 45.9332V41.5165Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M37.8654 45.9332L40.837 44.461L42.3228 45.9332H37.8654Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M42.3228 50.35L40.837 47.4055L42.3228 45.9332V50.35Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M37.8654 45.9333L40.837 47.4055L42.3228 45.9333H37.8654Z" fill="#4F2A93"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M42.3228 41.5165L40.837 44.461L42.3228 45.9332V41.5165Z" fill="#4F2A93"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M46.7803 45.9332L43.8087 44.461L42.3229 45.9332H46.7803Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M42.3228 50.35L43.8086 47.4055L42.3228 45.9332V50.35Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M43.0359 45.2266L44.4028 45.9332L43.0359 46.6399L42.3227 47.9944L41.6096 46.6399L40.2426 45.9332L41.6096 45.2266L42.3227 43.8721L43.0359 45.2266Z" fill="white"/>
+</svg>
diff --git a/website/client/src/assets/svg/hourglass-sparkle-right.svg b/website/client/src/assets/svg/hourglass-sparkle-right.svg
new file mode 100644
index 00000000000..0388d0d7364
--- /dev/null
+++ b/website/client/src/assets/svg/hourglass-sparkle-right.svg
@@ -0,0 +1,48 @@
+<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.5272 37.2881L22.9599 40.6634C23.1278 41.0588 23.467 41.3618 23.8894 41.4581C28.5036 42.5161 38.2409 38.3829 40.6869 34.3281C40.9093 33.958 40.927 33.5035 40.7592 33.108L39.3265 29.7328C38.0198 26.6545 35.171 24.3765 32.0093 23.6412C31.0857 23.4268 30.6516 22.4041 31.1389 21.5907C32.8063 18.8056 33.1466 15.174 31.84 12.0957L30.4073 8.72043C30.2394 8.32501 29.9002 8.02203 29.4801 7.92663C24.8642 6.86935 15.1269 11.0026 12.6827 15.0567C12.4578 15.4259 12.4401 15.8804 12.608 16.2758L14.0407 19.651C15.3473 22.7293 18.1961 25.0073 21.3578 25.7426C22.2815 25.957 22.7156 26.9797 22.2282 27.7931C20.5608 30.5782 20.2205 34.2099 21.5272 37.2881Z" fill="#A9DCF6" fill-opacity="0.8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.336 12.0938C24.2271 10.8666 26.6993 10.4316 28.1654 10.5102L29.2964 13.1747C30.2383 15.3938 30.0378 18.0859 28.7714 20.2007C28.0936 21.3331 27.9937 22.7223 28.5022 23.9203C29.0107 25.1182 30.0794 26.0114 31.3625 26.3096C33.7658 26.8686 35.8417 28.5945 36.7829 30.8118L37.9146 33.478C36.9527 34.5873 34.9225 36.0634 32.0314 37.2906C29.1404 38.5178 26.6682 38.9528 25.2021 38.8742L24.0703 36.208C23.1291 33.9906 23.3297 31.2985 24.5961 29.1837C25.2739 28.0513 25.3737 26.662 24.8652 25.4641C24.3567 24.2662 23.2881 23.3729 22.0043 23.0732C19.6017 22.5158 17.5258 20.7899 16.5838 18.5709L15.4528 15.9064C16.4147 14.7971 18.445 13.321 21.336 12.0938Z" fill="white" fill-opacity="0.9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.4316 13.8635C20.2629 14.784 18.0488 15.9582 18.2529 16.4997C18.4147 16.9371 18.7782 17.7653 20.9148 17.902C22.9909 18.0368 23.9804 19.4736 24.9098 19.0791C25.9908 18.6202 25.6686 17.6878 26.6052 16.2289C27.571 14.7261 27.257 13.3826 27.0315 12.8935C26.7172 12.2137 24.6004 12.9429 22.4316 13.8635Z" fill="#9A62FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.6058 16.2291C27.5715 14.7263 27.2576 13.3828 27.0321 12.8937C26.7836 12.3553 25.4041 12.7006 23.7631 13.3243C24.3138 13.3623 25.1075 13.5984 25.3685 14.6159C25.6415 15.6755 24.5262 17.4486 25.1553 18.2192C25.2771 18.3703 25.4194 18.4714 25.5729 18.5381C25.9093 18.0153 25.9491 17.2522 26.6058 16.2291Z" fill="#4F2A93"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.6571 26.9852C26.997 27.2653 27.3333 28.5305 26.6897 29.6779C25.8997 31.0844 25.2578 32.6761 25.6341 34.4146C25.9439 35.8466 26.243 35.9145 26.5891 35.8779C26.9335 35.842 29.4519 35.2396 31.5478 33.773C33.6454 32.3057 34.5391 30.8532 33.9217 30.0166C33.3334 29.2207 32.3661 28.7393 30.8079 28.369C29.3165 28.0155 28.3171 26.705 27.6571 26.9852Z" fill="#9A62FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.5886 35.8785C26.9347 35.8419 29.4531 35.2396 31.549 33.773C33.2159 32.6066 34.122 31.4501 34.1124 30.6036C34.1044 30.5893 34.0963 30.575 34.0856 30.5637C33.7491 30.1316 31.6973 30.658 29.4632 32.0612C27.3334 33.3964 25.8002 34.9294 26.1662 35.7684C26.3014 35.8902 26.4402 35.8942 26.5886 35.8785Z" fill="#4F2A93"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 30L15 32.5L10 35L7.5 40L5 35L0 32.5L5 30L7.5 25L10 30Z" fill="#925CF3"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M3 32L6.33333 34L8 32H3Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M8 27L6 30.3333L8 32L8 27Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M12 32L8.66667 30L7 32H12Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M7 37L9 33.6667L7 32L7 37Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M12 32L8.66667 34L7 32H12Z" fill="#6133B4"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M7 27L9 30.3333L7 32L7 27Z" fill="#6133B4"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M3 32L6.33333 30L8 32H3Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M8 37L6 33.6667L8 32L8 37Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M6.31429 31.3143L5 32L6.31429 32.6857L7 34L7.68571 32.6857L9 32L7.68571 31.3143L7 30L6.31429 31.3143Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.3333 47.6667L21 49L18.3333 50.3333L17 53L15.6667 50.3333L13 49L15.6667 47.6667L17 45L18.3333 47.6667Z" fill="#BDA8FF"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M14 49L16 50L17 49H14Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17 46L16 48L17 49V46Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M20 49L18 48L17 49H20Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17 52L18 50L17 49V52Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M20 49L18 50L17 49H20Z" fill="#925CF3"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M17 46L18 48L17 49V46Z" fill="#925CF3"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M14 49L16 48L17 49H14Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M17 52L16 50L17 49V52Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M16.9857 48.9857L16 49.5L16.9857 50.0143L17.5 51L18.0143 50.0143L19 49.5L18.0143 48.9857L17.5 48L16.9857 48.9857Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40 2L42 3L40 4L39 6L38 4L36 3L38 2L39 0L40 2Z" fill="#925CF3"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M37 3L38.3333 4L39 3H37Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M39 1L38 2.33333L39 3V1Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M41 3L39.6667 2L39 3L41 3Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M39 5L40 3.66667L39 3V5Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M41 3L39.6667 4L39 3H41Z" fill="#6133B4"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M39 1L40 2.33333L39 3V1Z" fill="#6133B4"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M37 3L38.3333 2L39 3L37 3Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M39 5L38 3.66667L39 3V5Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M38.6571 2.65714L38 3L38.6571 3.34286L39 4L39.3429 3.34286L40 3L39.3429 2.65714L39 2L38.6571 2.65714Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49 21L53 23L49 25L47 29L45 25L41 23L45 21L47 17L49 21Z" fill="#6133B4"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M43 23L45.6667 24L47 23H43Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M46 19L45 21.6667L46 23V19Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M50 23L47.3333 22L46 23H50Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M47 27L48 24.3333L47 23V27Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M50 23L47.3333 24L46 23H50Z" fill="#4F2A93"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M47 19L48 21.6667L47 23V19Z" fill="#4F2A93"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M43 23L45.6667 22L47 23H43Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M46 27L45 24.3333L46 23V27Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M46.3143 21.9857L45 22.5L46.3143 23.0143L47 24L47.6857 23.0143L49 22.5L47.6857 21.9857L47 21L46.3143 21.9857Z" fill="white"/>
+</svg>
diff --git a/website/client/src/assets/svg/jackalope.svg b/website/client/src/assets/svg/jackalope.svg
new file mode 100644
index 00000000000..5e351c4955f
--- /dev/null
+++ b/website/client/src/assets/svg/jackalope.svg
@@ -0,0 +1,9 @@
+<svg width="38" height="44" viewBox="0 0 38 44" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="38" height="44" fill="url(#pattern0_1325_164)"/>
+<defs>
+<pattern id="pattern0_1325_164" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_1325_164" transform="scale(0.0263158 0.0227273)"/>
+</pattern>
+<image id="image0_1325_164" width="38" height="44" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAsCAYAAAAJpsrIAAAAAXNSR0IArs4c6QAAAn5JREFUWAnV1T1uFEEUBOAJwDEHICBFWomEE5BwDbiCAydOLRGSkRGQOOIYRGRIyEcgIbGFZIeN2tpvtBRqesx4lwbpqfb9Vm0xO56mzr9y87bUaI09fjCVGq2+em+ux+POjL2FHqFDvbkejzvT9fdXpcaLzXQbc2P7AdHp5qLUkPfmpunW3d8cxoM378y5AQtzY/uBkIMLuzifSg2CCE1Bn95flRrq5qH68dPPpYZ5zrlrPnnVZ8wBBxBxCpH6fGD7Qf3ehPkvJNDDiYiwFNwSZs4X4Zi7ePDmnTk3YMGBfy6MQgKhbw4JJ9geVDdnD7oL7XXRAnQQIiQgD6qbswfdhbm/OHcgiQjIQ+qE2HMn5/86dxABQgLysLo5e+7k/OrcYYiYEKhuDq4W0DqAABJAEFQ3B1t3V9cRv35+Xmp4gbbw7Nm3UsP7a7WA1oHhhKUgjnHi45vLshvqHIPqrS9+5/rBhSHsKTXHKe5w4MPJZdkNdXN3dgzhMMIIyj/SBOonbp48KjV23amfXx4d/RLZ56D7TUQ4rDAvQgI54lnyfpJDc+9OvpQ/BQOaDmXDwrDCfnx9WGpwwK8nnco8nbOfmIZ0c44NJ4xyAjkC0zlznIKezXwk5PbwLUaLBMHhhHEiBfoC+hyB6Zy6vcVOGbRICGI558zpI4Z7E4aQIEiQ3JwfDWGJ+vYZsRgtIiQA6svNIU5Bcn37iwUZtIgQEqIv14cEeH/J8xHAtxgRI4KE6Mv1ISH3Lsw3IAAiJkhdrg8J01/t2PDCUiAnOCBvObc3x4YXlgI5lMhJuHfHhhdGYCLnPHMc8ys8mHP/jTBCOZfY6qvvHVOQHLEcqvfwJ8mbnKIO4lmnAAAAAElFTkSuQmCC"/>
+</defs>
+</svg>
diff --git a/website/client/src/assets/svg/stars-purple.svg b/website/client/src/assets/svg/stars-purple.svg
new file mode 100644
index 00000000000..a6c799848dd
--- /dev/null
+++ b/website/client/src/assets/svg/stars-purple.svg
@@ -0,0 +1,52 @@
+<svg width="41" height="61" viewBox="0 0 41 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.53642 4.26827L12.8046 6.40237L8.53642 8.53648L6.40232 12.8047L4.26821 8.53648L0 6.40237L4.26821 4.26827L6.40232 5.72205e-05L8.53642 4.26827Z" fill="#6133B4"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M2.40088 6.40239L5.06851 7.73621L6.40233 6.40239H2.40088Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M6.4023 2.4009L5.06848 5.06853L6.4023 6.40234V2.4009Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M10.4038 6.40234L7.73616 5.06853L6.40234 6.40234L10.4038 6.40234Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M6.40234 10.4038L7.73616 7.73618L6.40234 6.40236L6.40234 10.4038Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M10.4038 6.40239L7.73616 7.73621L6.40234 6.40239H10.4038Z" fill="#4F2A93"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M6.40234 2.4009L7.73616 5.06853L6.40234 6.40234L6.40234 2.4009Z" fill="#4F2A93"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M2.40088 6.40234L5.06851 5.06853L6.40233 6.40234L2.40088 6.40234Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M6.4023 10.4038L5.06848 7.73618L6.4023 6.40236V10.4038Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M5.76208 5.7622L4.53497 6.40243L5.76208 7.04267L6.40232 8.26978L7.04255 7.04267L8.26966 6.40243L7.04255 5.7622L6.40232 4.53509L5.76208 5.7622Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.5385 14.2663L39.8368 15.4154L37.5385 16.5645L36.3894 18.8628L35.2402 16.5645L32.942 15.4154L35.2402 14.2663L36.3894 11.968L37.5385 14.2663Z" fill="#925CF3"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M34.2347 15.4153L35.6712 16.1335L36.3894 15.4153H34.2347Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M36.3894 13.2608L35.6711 14.6972L36.3894 15.4154V13.2608Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M38.544 15.4154L37.1076 14.6972L36.3893 15.4154H38.544Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M36.3893 17.5701L37.1076 16.1337L36.3893 15.4154V17.5701Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M38.544 15.4153L37.1076 16.1335L36.3893 15.4153H38.544Z" fill="#6133B4"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M36.3893 13.2608L37.1076 14.6972L36.3893 15.4154V13.2608Z" fill="#6133B4"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M34.2347 15.4154L35.6712 14.6972L36.3894 15.4154H34.2347Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M36.3894 17.5701L35.6711 16.1337L36.3894 15.4154V17.5701Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M36.0446 15.0707L35.3839 15.4154L36.0446 15.7601L36.3893 16.4209L36.7341 15.7601L37.3948 15.4154L36.7341 15.0707L36.3893 14.4099L36.0446 15.0707Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5354 28.2693L25.7885 30.8959L20.5354 33.5225L17.9088 38.7756L15.2822 33.5225L10.029 30.8959L15.2822 28.2693L17.9088 23.0161L20.5354 28.2693Z" fill="#BDA8FF"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M12.9839 30.8959L16.2671 32.5375L17.9087 30.8959H12.9839Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17.9088 25.971L16.2672 29.2543L17.9088 30.8959V25.971Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M22.8336 30.8959L19.5504 29.2543L17.9088 30.8959H22.8336Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M17.9088 35.8207L19.5504 32.5374L17.9088 30.8958V35.8207Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M22.8336 30.8959L19.5504 32.5375L17.9088 30.8959H22.8336Z" fill="#925CF3"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M17.9088 25.971L19.5504 29.2543L17.9088 30.8959V25.971Z" fill="#925CF3"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M12.9839 30.8959L16.2671 29.2543L17.9087 30.8959H12.9839Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M17.9088 35.8207L16.2672 32.5374L17.9088 30.8958V35.8207Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M17.1208 30.1078L15.6105 30.8958L17.1208 31.6838L17.9087 33.1941L18.6967 31.6838L20.207 30.8958L18.6967 30.1078L17.9087 28.5976L17.1208 30.1078Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.53742 54.2673L10.8207 55.9089L7.53742 57.5505L5.8958 60.8337L4.25419 57.5505L0.970947 55.9089L4.25419 54.2673L5.8958 50.984L7.53742 54.2673Z" fill="#925CF3"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M2.81775 55.9089L4.86977 56.9349L5.89579 55.9089H2.81775Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M5.89582 52.8309L4.86981 54.8829L5.89582 55.9089V52.8309Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M8.97385 55.9089L6.92183 54.8829L5.89581 55.9089H8.97385Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M5.89581 58.9869L6.92183 56.9349L5.89581 55.9089V58.9869Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M8.97385 55.9089L6.92183 56.9349L5.89581 55.9089H8.97385Z" fill="#6133B4"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M5.89581 52.8309L6.92183 54.8829L5.89581 55.9089V52.8309Z" fill="#6133B4"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M2.81775 55.9089L4.86977 54.8829L5.89579 55.9089H2.81775Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M5.89582 58.9869L4.86981 56.9349L5.89582 55.9089V58.9869Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M5.40334 55.4164L4.45941 55.9089L5.40334 56.4014L5.89583 57.3453L6.38831 56.4014L7.33225 55.9089L6.38831 55.4164L5.89583 54.4725L5.40334 55.4164Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.5374 44.2673L40.8207 45.9089L37.5374 47.5505L35.8958 50.8337L34.2542 47.5505L30.9709 45.9089L34.2542 44.2673L35.8958 40.984L37.5374 44.2673Z" fill="#6133B4"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M32.8177 45.9089L34.8698 46.9349L35.8958 45.9089H32.8177Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M35.8958 42.8309L34.8698 44.8829L35.8958 45.9089V42.8309Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M38.9738 45.9089L36.9218 44.8829L35.8958 45.9089H38.9738Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M35.8958 48.9869L36.9218 46.9349L35.8958 45.9089V48.9869Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M38.9738 45.9089L36.9218 46.9349L35.8958 45.9089H38.9738Z" fill="#4F2A93"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M35.8958 42.8309L36.9218 44.8829L35.8958 45.9089V42.8309Z" fill="#4F2A93"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M32.8177 45.9089L34.8698 44.8829L35.8958 45.9089H32.8177Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M35.8958 48.9869L34.8698 46.9349L35.8958 45.9089V48.9869Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M35.4033 45.4164L34.4594 45.9089L35.4033 46.4014L35.8958 47.3453L36.3883 46.4014L37.3322 45.9089L36.3883 45.4164L35.8958 44.4725L35.4033 45.4164Z" fill="white"/>
+</svg>
diff --git a/website/client/src/assets/svg/subscriber-food.svg b/website/client/src/assets/svg/subscriber-food.svg
new file mode 100644
index 00000000000..7991bab49fe
--- /dev/null
+++ b/website/client/src/assets/svg/subscriber-food.svg
@@ -0,0 +1,19 @@
+<svg width="60" height="58" viewBox="0 0 60 58" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect x="38" y="6" width="22" height="26" fill="url(#pattern0_1327_256)"/>
+<rect width="26" height="26" fill="url(#pattern1_1327_256)"/>
+<rect x="8" y="36" width="30" height="22" fill="url(#pattern2_1327_256)"/>
+<defs>
+<pattern id="pattern0_1327_256" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_1327_256" transform="scale(0.0454545 0.0384615)"/>
+</pattern>
+<pattern id="pattern1_1327_256" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image1_1327_256" transform="scale(0.0384615)"/>
+</pattern>
+<pattern id="pattern2_1327_256" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image2_1327_256" transform="scale(0.0333333 0.0454545)"/>
+</pattern>
+<image id="image0_1327_256" width="22" height="26" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAaCAYAAACzdqxAAAAAAXNSR0IArs4c6QAAAQlJREFUSA290k1qwlAUxfFsp+soXYdzoeAaWqFbcSx14LTQSbuAjruLVgdPnvArcsIjRlOFy8n9+t9jSNcN/B7u7stpDIyf3z6F1ufzN2MyQfvf91LjZ7s6RvZjvZ3m4tVgwN36q9TgkKrT7+ePUsNe06oBi4BUnQ6CE2iBAqXqU5w/5woWDVL1VH2K0wMbAHibfZYa6i01dzsw6y7m5+UfcMxhS3FwO4XJwICc5efFaeqg45uB05m85VCdwd679SqAUgFa2gQDWTQoT82+vOd4crALLtKszx8XpUarb76nFqgB+cVgoFTgp+VLqSHPudE50L+B16+bUsOh0Q5zAWhysEMOyCfTseADSSC3nu5iFacAAAAASUVORK5CYII="/>
+<image id="image1_1327_256" width="26" height="26" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAASlJREFUSA3F1DFOw0AQBVDTRhSp6RHUaVLQcAWOECkNR6HiPtRcJl1KqBZtpEfxjbWrxA6WRl8znvl//q7lYYjnbnNb/gpt+e75fV1qqOtrooFEg1k/WygJ73c3pQYB+cUC/y6UTjh6225Ljd0wnMKi3ZhHNZsQYohYvv94LDXUOTm+vpQaXw9Pp1CfdIQQIpRfLIQQOnvEMOv6OWk6MwCTcHYhRwRTwAKJ7uT781BqcKj+e1ecEICzCyGmvFmtSg2bE7Rpbq7P+8m7upoQJ5AjZ5wb2xymg3Q8+ce4upCNc8OWA3Ow6Ujj4kLuiCBsCafjpqPFhaa+vl5hjvX7uPCOUIMB6Agh4sz14xkJZEEjdOaIWmgueUe5RriYUCoT7MWc7857BfQh/gFCaNQahl2u3gAAAABJRU5ErkJggg=="/>
+<image id="image2_1327_256" width="30" height="22" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAWCAYAAADXYyzPAAAAAXNSR0IArs4c6QAAARRJREFUSA3F08FtAjEUBFCagAYSKd3QAsUgcUkDqSO31JBjLrnSBlJk5MOD1Wgt7Ro5IH2N/cee+bPsbjaDf68vb2Vag+3u8lPTur4zK1cpZJ8y+h+H71LLPs8t3hNITAF8tzEB+PlzKdP6Pf+VWvjE0/6r1Fo9QApNTet6uDHD4/u5zBXeoJm0OzHhOdPawz9sTIBgGnrEyevvtttSi05ivoy3vYMpbAAGyes/bEzIf8YItgYx+C3J0oWLw4wZJHpUkkksoX4inl4zqAOJ/2bsO4MSGkgyifBQ3/lmUoSDDCFB/HDjNGQMDQC9fHgoWBMdbCXFQ4aw29hEhA1gj4f6ifjVSOhpxgZYPXnvBYawV2fpvStxGFyuIXWsWQAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>
diff --git a/website/client/src/assets/svg/subscriber-gems.svg b/website/client/src/assets/svg/subscriber-gems.svg
index e57077f7d86..844f13598ec 100644
--- a/website/client/src/assets/svg/subscriber-gems.svg
+++ b/website/client/src/assets/svg/subscriber-gems.svg
@@ -1,26 +1,29 @@
-<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 39 44">
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#24CC8F" d="M2.782 35.927l1.867-8.397 12.887-5.47 7.338 4.49-5.967 16.655z"/>
-        <path fill="#FFF" d="M9.147 33.008L6.351 28.98l5.523-2.344zM18.352 29.1l-.955-4.808-5.523 2.344z" opacity=".25"/>
-        <path fill="#FFF" d="M9.147 33.008l2.727-6.372 6.478 2.465zM5.097 34.727L6.35 28.98l2.796 4.028z" opacity=".5"/>
-        <path fill="#1B996B" d="M22.402 27.382l-5.005-3.09.955 4.809zM5.097 34.727l4.05-1.719 8.627 7.528z" opacity=".35"/>
-        <path fill="#FFF" d="M22.402 27.382l-4.05 1.719-.578 11.435z" opacity=".5"/>
-        <path fill="#FFF" d="M9.147 33.008l9.205-3.907-.578 11.435z" opacity=".25"/>
-        <g>
-            <path fill="#24CC8F" d="M23.248 7.266l4.784-3.162 8.714 3.345 1.44 5.55-10.575 5.225z"/>
-            <path fill="#FFF" d="M27.653 8.814l.524-3.227 3.734 1.434zM33.876 11.203l1.77-2.749-3.735-1.433z" opacity=".25"/>
-            <path fill="#FFF" d="M27.653 8.814L31.91 7.02l1.965 4.182zM24.914 7.763l3.263-2.176-.524 3.227z" opacity=".5"/>
-            <path fill="#1B996B" d="M36.615 12.254l-.97-3.8-1.769 2.749zM24.914 7.763l2.739 1.05.65 7.606z" opacity=".35"/>
-            <path fill="#FFF" d="M36.615 12.254l-2.739-1.051-5.572 5.216z" opacity=".5"/>
-            <path fill="#FFF" d="M27.653 8.814l6.223 2.389-5.572 5.216z" opacity=".25"/>
-        </g>
-        <g>
-            <path fill="#24CC8F" d="M.815 5.996l1.58-4L9.185.301l3.273 2.791-4.25 7.758z"/>
-            <path fill="#FFF" d="M4.187 5.052L3.121 2.845l2.911-.726zM9.039 3.843l-.096-2.45-2.91.726z" opacity=".25"/>
-            <path fill="#FFF" d="M4.187 5.052L6.032 2.12 9.04 3.843zM2.053 5.585l1.068-2.74 1.066 2.207z" opacity=".5"/>
-            <path fill="#1B996B" d="M11.173 3.31l-2.23-1.917.096 2.45zM2.053 5.585l2.134-.533L7.86 9.445z" opacity=".35"/>
-            <path fill="#FFF" d="M11.173 3.31l-2.134.533-1.18 5.602z" opacity=".5"/>
-            <path fill="#FFF" d="M4.187 5.052l4.852-1.21-1.18 5.603z" opacity=".25"/>
-        </g>
-    </g>
+<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.89107 26.3989L14.4076 18.6441L33.6795 23.9114L37.9287 35.4286L16.5188 48.8092L4.89107 26.3989Z" fill="#24CC8F"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M14.6023 28.7572L15.0317 21.7734L23.2911 24.0309L14.6023 28.7572Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M28.368 32.5196L31.5505 26.2883L23.2911 24.0309L28.368 32.5196Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M14.6023 28.7573L23.2911 24.031L28.368 32.5197L14.6023 28.7573Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M8.54539 27.1018L15.0317 21.7735L14.6023 28.7572L8.54539 27.1018Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M34.4249 34.1751L31.5505 26.2883L28.368 32.5196L34.4249 34.1751Z" fill="#1B996B"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M8.54541 27.1018L14.6023 28.7572L17.6099 44.8171L8.54541 27.1018Z" fill="#1B996B"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M34.4249 34.175L28.368 32.5196L17.6099 44.8171L34.4249 34.175Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M14.6023 28.7573L28.368 32.5197L17.6099 44.8172L14.6023 28.7573Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2974 3.46554L14.2627 0.349942L21.1938 1.32978L23.1792 5.14526L16.3285 10.7414L11.2974 3.46554Z" fill="#24CC8F"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M14.7769 3.85639L14.6178 1.41003L17.5882 1.82996L14.7769 3.85639Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M19.7277 4.55627L20.5587 2.24989L17.5883 1.82996L19.7277 4.55627Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M14.7769 3.85647L17.5882 1.83004L19.7277 4.55636L14.7769 3.85647Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M12.5986 3.54849L14.6178 1.41008L14.7769 3.85644L12.5986 3.54849Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M21.906 4.86425L20.5587 2.24992L19.7277 4.5563L21.906 4.86425Z" fill="#1B996B"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M12.5986 3.54846L14.7769 3.85641L16.5314 9.30565L12.5986 3.54846Z" fill="#1B996B"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M21.906 4.86431L19.7277 4.55636L16.5314 9.30572L21.906 4.86431Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M14.7769 3.85645L19.7277 4.55633L16.5314 9.30568L14.7769 3.85645Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.8389 13.9788L33.0633 6.97062L44.4487 3.28717L50.3566 7.66432L44.0181 21.3937L30.8389 13.9788Z" fill="#24CC8F"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M36.4789 11.9744L34.4028 8.33398L39.2822 6.75536L36.4789 11.9744Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M44.6113 9.3434L44.1617 5.17675L39.2822 6.75537L44.6113 9.3434Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M36.4789 11.9745L39.2822 6.75541L44.6113 9.34344L36.4789 11.9745Z" fill="white"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M32.9007 13.1321L34.4028 8.33396L36.4789 11.9744L32.9007 13.1321Z" fill="white"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M48.1896 8.18571L44.1617 5.17672L44.6113 9.34337L48.1896 8.18571Z" fill="#1B996B"/>
+<path opacity="0.35" fill-rule="evenodd" clip-rule="evenodd" d="M32.9007 13.1321L36.4789 11.9744L43.2551 19.0353L32.9007 13.1321Z" fill="#1B996B"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M48.1896 8.18576L44.6113 9.34342L43.2551 19.0353L48.1896 8.18576Z" fill="white"/>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M36.4789 11.9745L44.6113 9.34345L43.2551 19.0353L36.4789 11.9745Z" fill="white"/>
 </svg>
diff --git a/website/client/src/assets/svg/subscriber-hourglasses.svg b/website/client/src/assets/svg/subscriber-hourglasses.svg
index 79e993b4c64..27d8c948228 100644
--- a/website/client/src/assets/svg/subscriber-hourglasses.svg
+++ b/website/client/src/assets/svg/subscriber-hourglasses.svg
@@ -1,26 +1,20 @@
-<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 35 47">
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#A9DCF6" fill-opacity=".8" d="M25.955 43.329l-.999 2.352a.939.939 0 0 1-.644.555c-3.194.747-9.918-2.107-11.6-4.923a.941.941 0 0 1-.047-.85l.998-2.351c.911-2.146 2.886-3.738 5.074-4.257a.957.957 0 0 0 .607-1.429c-1.147-1.934-1.374-4.46-.463-6.606l.998-2.352a.937.937 0 0 1 .643-.555c3.195-.746 9.919 2.108 11.6 4.924a.935.935 0 0 1 .049.848l-.999 2.353c-.91 2.145-2.886 3.737-5.074 4.256a.957.957 0 0 0-.606 1.429c1.146 1.934 1.373 4.46.463 6.606"/>
-        <path fill="#FFF" fill-opacity=".9" d="M26.145 25.795c-1.997-.848-3.705-1.145-4.72-1.087l-.788 1.857c-.656 1.547-.524 3.42.347 4.889.466.786.532 1.753.178 2.588a2.881 2.881 0 0 1-1.983 1.669c-1.664.395-3.103 1.6-3.76 3.146l-.788 1.858c.663.77 2.063 1.792 4.06 2.64 1.996.847 3.705 1.144 4.719 1.086l.789-1.858c.656-1.545.523-3.418-.348-4.887a2.883 2.883 0 0 1-.178-2.588 2.886 2.886 0 0 1 1.984-1.67c1.663-.394 3.103-1.6 3.759-3.146l.788-1.857c-.662-.77-2.063-1.793-4.06-2.64"/>
-        <path fill="#9A62FF" d="M25.383 27.029c1.497.636 3.026 1.448 2.883 1.825-.112.305-.366.882-1.844.982-1.436.098-2.123 1.1-2.765.828-.746-.317-.521-.966-1.166-1.98-.664-1.043-.444-1.979-.287-2.32.219-.473 1.681.03 3.179.665"/>
-        <path fill="#4F2A93" d="M22.491 28.685c-.664-1.044-.444-1.98-.287-2.32.173-.376 1.126-.139 2.26.292-.382.027-.93.194-1.114.902-.19.738.576 1.97.14 2.507a.755.755 0 0 1-.29.223c-.231-.363-.257-.894-.709-1.604"/>
-        <path fill="#9A62FF" d="M21.74 36.173c.455.193.22 1.074.662 1.871.543.978.984 2.084.72 3.294-.218.998-.425 1.046-.664 1.021-.238-.024-1.979-.438-3.425-1.454-1.447-1.016-2.062-2.025-1.633-2.608.409-.556 1.079-.893 2.157-1.154 1.032-.25 1.727-1.164 2.182-.97"/>
-        <path fill="#4F2A93" d="M22.458 42.36c-.24-.025-1.98-.439-3.425-1.455-1.15-.807-1.774-1.61-1.766-2.2a.138.138 0 0 1 .019-.027c.233-.302 1.651.06 3.193 1.031 1.47.925 2.526 1.988 2.271 2.573-.093.085-.19.088-.292.077"/>
-        <g>
-            <path fill="#A9DCF6" fill-opacity=".8" d="M12.754 15.163l.61 1.59a.626.626 0 0 1-.052.565c-1.185 1.837-5.732 3.582-7.843 3.01a.627.627 0 0 1-.415-.385l-.61-1.59c-.558-1.45-.348-3.129.461-4.39a.638.638 0 0 0-.37-.967c-1.446-.397-2.725-1.503-3.282-2.954l-.61-1.59a.625.625 0 0 1 .05-.564c1.187-1.837 5.734-3.582 7.844-3.01a.623.623 0 0 1 .416.384l.61 1.59c.557 1.45.347 3.129-.462 4.39a.638.638 0 0 0 .371.967c1.446.397 2.725 1.503 3.282 2.954"/>
-            <path fill="#FFF" fill-opacity=".9" d="M4.725 6.666c-1.35.518-2.307 1.167-2.767 1.665l.482 1.255c.402 1.046 1.333 1.883 2.43 2.184a1.922 1.922 0 0 1 1.284 1.159 1.92 1.92 0 0 1-.178 1.719c-.615.96-.747 2.204-.346 3.249l.483 1.256c.674.062 1.82-.096 3.17-.614 1.349-.518 2.306-1.167 2.765-1.664l-.482-1.257c-.401-1.044-1.332-1.881-2.43-2.182a1.922 1.922 0 0 1-1.284-1.16 1.924 1.924 0 0 1 .178-1.72c.615-.958.747-2.203.346-3.248l-.482-1.256c-.674-.062-1.82.096-3.17.614"/>
-            <path fill="#9A62FF" d="M4.93 7.61c1.013-.388 2.122-.706 2.229-.46.087.199.233.593-.43 1.325-.643.713-.508 1.512-.942 1.678-.505.194-.698-.222-1.476-.41-.802-.192-1.13-.743-1.212-.979-.115-.328.82-.765 1.832-1.153"/>
-            <path fill="#4F2A93" d="M4.31 9.744c-.801-.193-1.129-.743-1.211-.98-.091-.26.476-.587 1.219-.906-.17.19-.357.524-.116.948.25.443 1.188.678 1.228 1.138a.503.503 0 0 1-.036.241c-.28-.067-.537-.31-1.083-.44"/>
-            <path fill="#9A62FF" d="M7.418 13.683c.308-.118.603.413 1.185.59.713.218 1.436.544 1.87 1.247.358.58.28.698.154.797-.125.099-1.15.706-2.315.889-1.165.183-1.926-.016-1.991-.495-.061-.455.104-.927.5-1.552.38-.598.289-1.358.597-1.476"/>
-            <path fill="#4F2A93" d="M10.628 16.317c-.126.1-1.152.707-2.316.89-.926.144-1.597.048-1.866-.238a.092.092 0 0 1-.004-.022c-.027-.253.82-.736 2.01-.984 1.132-.237 2.132-.217 2.28.182-.006.084-.05.13-.104.172"/>
-        </g>
-        <g>
-            <path fill="#A9DCF6" fill-opacity=".8" d="M32.605 10.804l-.31 1.24a.47.47 0 0 1-.275.324c-1.518.619-5.062-.265-6.113-1.524a.47.47 0 0 1-.09-.416l.31-1.24c.281-1.13 1.132-2.07 2.172-2.498a.479.479 0 0 0 .188-.753c-.718-.866-1.027-2.096-.745-3.226l.309-1.24a.469.469 0 0 1 .274-.324c1.519-.619 5.063.265 6.113 1.524.097.114.127.27.09.415l-.308 1.24c-.282 1.13-1.133 2.071-2.173 2.498a.479.479 0 0 0-.188.754c.718.865 1.027 2.095.746 3.226"/>
-            <path fill="#FFF" fill-opacity=".9" d="M31.327 2.13c-1.052-.262-1.92-.276-2.416-.168l-.244.98c-.203.814.009 1.729.554 2.386.292.352.4.824.29 1.264a1.44 1.44 0 0 1-.849.98 2.762 2.762 0 0 0-1.61 1.847l-.244.98c.387.328 1.16.723 2.211.986 1.052.262 1.92.275 2.416.167l.244-.98a2.761 2.761 0 0 0-.554-2.385 1.442 1.442 0 0 1-.29-1.265c.11-.44.427-.806.849-.98a2.76 2.76 0 0 0 1.61-1.847l.244-.979c-.387-.328-1.159-.724-2.211-.986"/>
-            <path fill="#9A62FF" d="M31.047 2.799c.79.197 1.608.478 1.567.676-.032.159-.112.464-.834.629-.701.16-.962.71-1.3.625-.394-.098-.334-.436-.731-.886-.41-.464-.375-.943-.324-1.124.071-.25.833-.117 1.622.08"/>
-            <path fill="#4F2A93" d="M29.749 3.843c-.41-.464-.375-.943-.324-1.124.056-.198.546-.156 1.139-.032-.186.044-.444.169-.48.533-.036.38.44.927.266 1.227a.378.378 0 0 1-.126.133c-.143-.161-.197-.422-.475-.737"/>
-            <path fill="#9A62FF" d="M29.963 7.6c.24.06.193.513.474.872.344.44.648.952.613 1.57-.03.51-.128.55-.248.556-.12.007-1.012-.061-1.805-.45-.794-.388-1.177-.838-1.01-1.16.158-.306.462-.525.974-.739.49-.204.762-.71 1.002-.65"/>
-            <path fill="#4F2A93" d="M30.802 10.599c-.12.006-1.012-.062-1.806-.45-.63-.31-1.002-.657-1.043-.949a.069.069 0 0 1 .007-.015c.091-.167.82-.1 1.657.26.798.341 1.403.784 1.323 1.092-.04.05-.087.059-.138.062"/>
-        </g>
-    </g>
+<svg width="39" height="54" viewBox="0 0 39 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.2715 47.841L27.8997 51.0729C27.7389 51.4515 27.4157 51.7423 27.014 51.8357C22.6266 52.8619 13.3878 48.9402 11.0765 45.0707C10.8663 44.7175 10.8509 44.283 11.0117 43.9044L12.3835 40.6724C13.6347 37.7249 16.3485 35.5378 19.3549 34.8248C20.2332 34.6169 20.6488 33.6376 20.1883 32.8614C18.6128 30.2035 18.3009 26.732 19.552 23.7844L20.9239 20.5525C21.0846 20.1739 21.4079 19.8832 21.8073 19.7906C26.1963 18.7652 35.4351 22.6868 37.7447 26.5557C37.9572 26.9079 37.9726 27.3425 37.8119 27.7211L36.4401 30.953C35.1889 33.9005 32.475 36.0876 29.4687 36.8006C28.5904 37.0086 28.1747 37.9879 28.6352 38.7641C30.2107 41.4219 30.5227 44.8934 29.2715 47.841Z" fill="#A9DCF6" fill-opacity="0.8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.5322 23.7497C26.7892 22.5854 24.4416 22.1772 23.0484 22.257L21.9654 24.8083C21.0635 26.9331 21.2456 29.5067 22.4422 31.5248C23.0826 32.6056 23.1732 33.9336 22.6863 35.0807C22.1994 36.2277 21.1812 37.0852 19.9611 37.3743C17.6759 37.9164 15.6981 39.5731 14.7969 41.6963L13.7132 44.2492C14.6236 45.3069 16.548 46.712 19.2911 47.8764C22.0341 49.0407 24.3817 49.4489 25.7749 49.3691L26.8586 46.8162C27.7598 44.693 27.5777 42.1194 26.3811 40.1013C25.7407 39.0206 25.6501 37.6925 26.137 36.5454C26.6239 35.3984 27.6421 34.541 28.8628 34.2503C31.1474 33.7098 33.1252 32.053 34.0271 29.9282L35.1101 27.3769C34.1996 26.3192 32.2753 24.9141 29.5322 23.7497Z" fill="white" fill-opacity="0.9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.4856 25.4452C30.5433 26.3187 32.6433 27.4344 32.4477 27.9529C32.2926 28.3716 31.9446 29.1647 29.9141 29.3021C27.9411 29.4375 26.9965 30.8145 26.1146 30.4401C25.089 30.0048 25.3981 29.1122 24.5127 27.7201C23.5998 26.2862 23.9023 25.0005 24.1181 24.5322C24.4189 23.8812 26.4279 24.5718 28.4856 25.4452Z" fill="#9A62FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5124 27.7203C23.5995 26.2864 23.902 25.0008 24.1178 24.5324C24.3555 24.0168 25.6652 24.3427 27.2224 24.9339C26.699 24.9719 25.9442 25.2001 25.693 26.1739C25.4303 27.188 26.4845 28.8798 25.8843 29.6187C25.7681 29.7636 25.6326 29.8607 25.4865 29.925C25.1685 29.4261 25.1331 28.6965 24.5124 27.7203Z" fill="#4F2A93"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.4797 38.0086C24.1059 38.2744 23.7824 39.4852 24.3904 40.5804C25.1366 41.9228 25.7414 43.4428 25.3785 45.1063C25.0797 46.4765 24.7953 46.5424 24.4665 46.5084C24.1394 46.4752 21.7484 45.9071 19.7617 44.5113C17.7733 43.1149 16.9287 41.7288 17.518 40.9269C18.0793 40.164 19 39.7007 20.4816 39.3417C21.8998 38.999 22.8534 37.7428 23.4797 38.0086Z" fill="#9A62FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.467 46.509C24.1383 46.4751 21.7473 45.907 19.7605 44.5113C18.1804 43.4012 17.3231 42.2982 17.3349 41.4887C17.3426 41.475 17.3503 41.4613 17.3605 41.4506C17.6815 41.0363 19.6294 41.5332 21.7477 42.8679C23.7671 44.138 25.2191 45.599 24.8686 46.4024C24.7398 46.5193 24.6079 46.5236 24.467 46.509Z" fill="#4F2A93"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8803 22.4748L13.0712 24.6344C13.0936 24.8874 13.0019 25.1397 12.8101 25.3073C10.7172 27.1406 4.54355 27.6865 2.16031 26.249C1.9432 26.1175 1.80861 25.8852 1.78624 25.6322L1.59529 23.4726C1.42114 21.5029 2.26494 19.5229 3.69621 18.2613C4.11444 17.893 4.05658 17.2386 3.5802 16.9493C1.94977 15.9584 0.771638 14.1572 0.597488 12.1876L0.406536 10.0279C0.384166 9.77492 0.475899 9.52258 0.666679 9.35616C2.76071 7.52275 8.93431 6.97689 11.3165 8.41452C11.5346 8.54479 11.6692 8.77712 11.6915 9.03012L11.8825 11.1898C12.0566 13.1594 11.2128 15.1394 9.78156 16.401C9.36333 16.7693 9.42119 17.4238 9.89756 17.713C11.528 18.7039 12.7061 20.5051 12.8803 22.4748Z" fill="#A9DCF6" fill-opacity="0.8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.02615 9.27039C4.19318 9.43245 2.79533 9.89173 2.05923 10.3398L2.20997 12.0447C2.33551 13.4645 3.18214 14.8141 4.4203 15.5665C5.08317 15.9694 5.51817 16.6668 5.58595 17.4333C5.65372 18.1998 5.34784 18.9628 4.76693 19.4746C3.67901 20.4337 3.08233 21.9109 3.20777 23.3297L3.35861 25.0356C4.16191 25.3476 5.61866 25.5545 7.45163 25.3924C9.2846 25.2303 10.6825 24.7711 11.4186 24.323L11.2677 22.617C11.1423 21.1983 10.2956 19.8487 9.05748 19.0963C8.39461 18.6934 7.95961 17.996 7.89184 17.2295C7.82406 16.463 8.12994 15.7 8.71076 15.1871C9.79877 14.2291 10.3955 12.7519 10.2699 11.332L10.1192 9.62718C9.31587 9.31519 7.85912 9.10832 6.02615 9.27039Z" fill="white" fill-opacity="0.9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.94818 10.4983C7.32318 10.3767 8.7916 10.3749 8.83559 10.7142C8.87266 10.9875 8.91336 11.5207 7.84673 12.1853C6.81082 12.832 6.69593 13.8567 6.10664 13.9088C5.42128 13.9694 5.33053 13.3933 4.44377 12.8918C3.52987 12.3754 3.32137 11.587 3.30294 11.2691C3.27784 10.8269 4.57319 10.6199 5.94818 10.4983Z" fill="#9A62FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.44368 12.892C3.52978 12.3757 3.32128 11.5872 3.30285 11.2693C3.28266 10.9193 4.09102 10.7165 5.1113 10.5865C4.83716 10.7592 4.49205 11.1028 4.63795 11.7064C4.78931 12.3353 5.8551 12.9512 5.74257 13.5281C5.72134 13.6408 5.6757 13.7331 5.61477 13.8105C5.29657 13.631 5.06544 13.2437 4.44368 12.892Z" fill="#4F2A93"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.86862 18.7985C7.2871 18.7615 7.46241 19.5152 8.11175 19.9355C8.90824 20.4504 9.67927 21.103 9.96455 22.115C10.1996 22.9484 10.0638 23.067 9.87478 23.1439C9.68684 23.2208 8.21892 23.6056 6.73087 23.4219C5.24175 23.2383 4.37897 22.7283 4.46722 22.1201C4.55161 21.5413 4.91878 21.0215 5.62194 20.3956C6.29524 19.797 6.45015 18.8355 6.86862 18.7985Z" fill="#9A62FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.87521 23.1441C9.68621 23.2211 8.21829 23.6059 6.73023 23.4222C5.54676 23.2762 4.75927 22.924 4.53061 22.4795C4.53083 22.4698 4.53104 22.4601 4.53349 22.4512C4.58813 22.1323 5.79395 21.8374 7.33593 21.9495C8.80526 22.0553 10.0208 22.4298 10.0631 22.9694C10.0269 23.0705 9.95622 23.1111 9.87521 23.1441Z" fill="#4F2A93"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.9597 9.01912L34.5713 10.2909C34.6429 10.4399 34.6449 10.6147 34.5665 10.7608C33.7119 12.3575 30.0762 14.1058 28.2947 13.7765C28.1323 13.7463 27.9971 13.6356 27.9254 13.4866L27.3139 12.2148C26.7561 11.0549 26.8161 9.65517 27.3987 8.5584C27.569 8.2381 27.3837 7.85272 27.0272 7.78575C25.8067 7.55599 24.676 6.72887 24.1182 5.56895L23.5066 4.29712C23.435 4.14812 23.433 3.97336 23.5111 3.82823C24.3663 2.23116 28.002 0.48293 29.7828 0.812446C29.9456 0.841791 30.0808 0.952458 30.1525 1.10146L30.764 2.37329C31.3218 3.53321 31.2618 4.93289 30.6792 6.02966C30.5089 6.34996 30.6942 6.73535 31.0507 6.80232C32.2712 7.03207 33.4019 7.85919 33.9597 9.01912Z" fill="#A9DCF6" fill-opacity="0.8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.7563 2.54696C25.6769 3.06602 24.9306 3.66635 24.585 4.10812L25.0678 5.11213C25.4698 5.94828 26.2951 6.5763 27.2218 6.75067C27.7181 6.84413 28.143 7.16925 28.36 7.62065C28.5771 8.07205 28.5657 8.60697 28.3292 9.05198C27.8864 9.8857 27.8617 10.9224 28.2634 11.758L28.7465 12.7626C29.3074 12.7685 30.2423 12.5604 31.3217 12.0414C32.4012 11.5223 33.1474 10.922 33.4931 10.4802L33.01 9.47556C32.6082 8.64004 31.783 8.01202 30.8562 7.83765C30.36 7.74419 29.9351 7.41907 29.718 6.96767C29.5009 6.51628 29.5123 5.98136 29.7485 5.53571C30.1917 4.70262 30.2164 3.66588 29.8143 2.82973L29.3315 1.82572C28.7706 1.81987 27.8358 2.0279 26.7563 2.54696Z" fill="white" fill-opacity="0.9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.9904 3.31291C27.8001 2.92355 28.6943 2.58571 28.7989 2.78233C28.8841 2.94028 29.0312 3.25581 28.5338 3.90522C28.051 4.53676 28.216 5.18735 27.869 5.35422C27.4654 5.5483 27.278 5.21811 26.6228 5.11596C25.9476 5.011 25.6398 4.57848 25.5557 4.38904C25.439 4.12546 26.1806 3.70228 26.9904 3.31291Z" fill="#9A62FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.6228 5.11609C25.9476 5.01113 25.6398 4.57861 25.5557 4.38917C25.4631 4.18057 25.9091 3.8717 26.5008 3.55853C26.3734 3.72661 26.242 4.01506 26.4692 4.3493C26.7057 4.69772 27.4962 4.82848 27.5599 5.20575C27.5728 5.27927 27.5662 5.34594 27.5468 5.40711C27.3118 5.37072 27.0822 5.18777 26.6228 5.11609Z" fill="#4F2A93"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.4545 8.15813C29.7009 8.03962 29.9806 8.4586 30.4725 8.56572C31.0758 8.69672 31.6951 8.91751 32.101 9.46854C32.4353 9.92237 32.3797 10.0257 32.2823 10.116C32.1854 10.2059 31.3794 10.7769 30.4308 11.0062C29.4815 11.2359 28.839 11.123 28.7533 10.7323C28.672 10.3604 28.7764 9.9595 29.0613 9.41694C29.3342 8.89791 29.208 8.27663 29.4545 8.15813Z" fill="#9A62FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.2826 10.1159C32.1851 10.2062 31.3791 10.7772 30.4305 11.0065C29.676 11.1889 29.1155 11.155 28.8743 10.9366C28.8722 10.9307 28.8701 10.9247 28.8696 10.9188C28.8297 10.7119 29.4967 10.2558 30.4617 9.97051C31.3811 9.69797 32.2074 9.64738 32.3569 9.96638C32.3581 10.0363 32.3243 10.0773 32.2826 10.1159Z" fill="#4F2A93"/>
 </svg>
diff --git a/website/client/src/components/achievements/armoireEmpty.vue b/website/client/src/components/achievements/armoireEmpty.vue
index f4aa5a008d3..6c2d8f3c505 100644
--- a/website/client/src/components/achievements/armoireEmpty.vue
+++ b/website/client/src/components/achievements/armoireEmpty.vue
@@ -8,7 +8,7 @@
     <div class="modal-body">
       <div class="row">
         <div class="col-6 offset-3">
-          <div class="shop_armoire"></div>
+          <Sprite image-name="shop_armoire" />
           <p>{{ $t('armoireLastItem') }}</p>
           <p>{{ $t('armoireNotesEmpty') }}</p>
         </div>
@@ -34,7 +34,12 @@
 </style>
 
 <script>
+import Sprite from '@/components/Sprite.vue';
+
 export default {
+  components: {
+    Sprite,
+  },
   methods: {
     close () {
       this.$root.$emit('bv::hide::modal', 'armoire-empty');
diff --git a/website/client/src/components/achievements/ultimateGear.vue b/website/client/src/components/achievements/ultimateGear.vue
index 9572db75604..4d75db537e2 100644
--- a/website/client/src/components/achievements/ultimateGear.vue
+++ b/website/client/src/components/achievements/ultimateGear.vue
@@ -55,7 +55,7 @@
           <p v-html="$t('moreGearAchievements')"></p>
           <br>
         </div>
-        <div class="shop_armoire"></div>
+        <Sprite image-name="shop_armoire" />
         <p v-html="$t('armoireUnlocked')"></p>
         <br>
         <button
@@ -87,11 +87,13 @@
 import achievementFooter from './achievementFooter';
 import achievementAvatar from './achievementAvatar';
 import { mapState } from '@/libs/store';
+import Sprite from '@/components/ui/sprite.vue';
 
 export default {
   components: {
     achievementFooter,
     achievementAvatar,
+    Sprite,
   },
   computed: {
     ...mapState({ user: 'user.data' }),
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 2d3fd5679c3..7e959a10854 100644
--- a/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
+++ b/website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
@@ -91,11 +91,11 @@
         </div>
         <div class="form-group row">
           <label class="col-sm-3 col-form-label">
-            Consecutive months:
+            Cumulative months:
           </label>
           <div class="col-sm-9">
             <input
-              v-model="hero.purchased.plan.consecutive.count"
+              v-model="hero.purchased.plan.cumulativeCount"
               class="form-control"
               type="number"
               min="0"
@@ -105,39 +105,23 @@
         </div>
         <div class="form-group row">
           <label class="col-sm-3 col-form-label">
-            Perk offset months:
+            Received hourglass bonus:
           </label>
           <div class="col-sm-9">
-            <input
-              v-model="hero.purchased.plan.consecutive.offset"
-              class="form-control"
-              type="number"
-              min="0"
-              step="1"
-            >
-          </div>
-        </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">
-            Perk month count:
-          </label>
-          <div class="col-sm-9">
-            <input
-              v-model="hero.purchased.plan.perkMonthCount"
-              class="form-control"
-              type="number"
-              min="0"
-              max="2"
-              step="1"
-            >
+            <div class="input-group">
+              <input
+                v-model="hero.purchased.plan.hourglassPromoReceived"
+                class="form-control"
+                type="text"
+              >
+              <div class="input-group-append">
+                <strong class="input-group-text">
+                  {{ dateFormat(hero.purchased.plan.hourglassPromoReceived) }}
+                </strong>
+              </div>
+            </div>
           </div>
         </div>
-        <div class="form-group row">
-          <label class="col-sm-3 col-form-label">
-            Next Mystic Hourglass:
-          </label>
-          <strong class="col-sm-9 col-form-label">{{ nextHourglassDate }}</strong>
-        </div>
         <div class="form-group row">
           <label class="col-sm-3 col-form-label">
             Mystic Hourglasses:
@@ -162,8 +146,8 @@
               class="form-control"
               type="number"
               min="0"
-              max="25"
-              step="5"
+              max="26"
+              step="2"
             >
           </div>
         </div>
@@ -172,7 +156,7 @@
             Total Gem cap:
           </label>
           <strong class="col-sm-9 col-form-label">
-            {{ Number(hero.purchased.plan.consecutive.gemCapExtra) + 25 }}
+            {{ Number(hero.purchased.plan.consecutive.gemCapExtra) + 24 }}
           </strong>
         </div>
         <div class="form-group row">
@@ -185,7 +169,7 @@
               class="form-control"
               type="number"
               min="0"
-              :max="hero.purchased.plan.consecutive.gemCapExtra + 25"
+              :max="hero.purchased.plan.consecutive.gemCapExtra + 24"
               step="1"
             >
           </div>
@@ -268,6 +252,7 @@ export default {
     nextHourglassDate () {
       const currentPlanContext = getPlanContext(this.hero, new Date());
 
+      if (!currentPlanContext.nextHourglassDate) return 'N/A';
       return currentPlanContext.nextHourglassDate.format('MMMM YYYY');
     },
   },
diff --git a/website/client/src/components/group-plans/billing.vue b/website/client/src/components/group-plans/billing.vue
index cdca5dd87ea..a9fe133d2b0 100644
--- a/website/client/src/components/group-plans/billing.vue
+++ b/website/client/src/components/group-plans/billing.vue
@@ -27,13 +27,13 @@
           </td>
         </tr>
         <tr
-          v-if="group.purchased.plan.consecutive.count || group.purchased.plan.consecutive.offset"
+          v-if="group.purchased.plan.consecutive.count"
         >
           <td>
             <span class="glyphicon glyphicon-forward"></span>
             {{ $t('consecutiveSubscription') }}
             <ul class="list-unstyled">
-              <li>{{ $t('consecutiveMonths') }} {{ group.purchased.plan.consecutive.count + group.purchased.plan.consecutive.offset }}</li> <!-- eslint-disable-line max-len -->
+              <li>{{ $t('consecutiveMonths') }} {{ group.purchased.plan.consecutive.count }}</li> <!-- eslint-disable-line max-len -->
               <li>{{ $t('gemCapExtra') }} {{ group.purchased.plan.consecutive.gemCapExtra }}</li>
               <li>{{ $t('mysticHourglasses') }} {{ group.purchased.plan.consecutive.trinkets }}</li>
             </ul>
diff --git a/website/client/src/components/notifications.vue b/website/client/src/components/notifications.vue
index 43dfeb901f6..f967e6fca81 100644
--- a/website/client/src/components/notifications.vue
+++ b/website/client/src/components/notifications.vue
@@ -529,7 +529,7 @@ export default {
 
       // List of prompts for user on changes.
       // Sounds like we may need a refactor here, but it is clean for now
-      if (!this.user.flags.welcomed && !this.$route.name.includes('groupPlan')) {
+      if (!this.user.flags.welcomed && !this.$route?.name.includes('groupPlan')) {
         if (this.$store.state.avatarEditorOptions) {
           this.$store.state.avatarEditorOptions.editingUser = false;
         }
diff --git a/website/client/src/components/payments/buttons/list.vue b/website/client/src/components/payments/buttons/list.vue
index 5ec3eb2d28b..784e947a222 100644
--- a/website/client/src/components/payments/buttons/list.vue
+++ b/website/client/src/components/payments/buttons/list.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="payments-column mx-auto mt-auto">
+  <div class="payments-column mx-auto">
     <h4>{{ $t('choosePaymentMethod') }}</h4>
     <button
       v-if="stripeAvailable"
diff --git a/website/client/src/components/payments/buyGemsModal.vue b/website/client/src/components/payments/buyGemsModal.vue
index 20fca7b5272..e3e1496e337 100644
--- a/website/client/src/components/payments/buyGemsModal.vue
+++ b/website/client/src/components/payments/buyGemsModal.vue
@@ -465,7 +465,7 @@ export default {
       };
     },
     isGemsPromoActive () {
-      return Boolean(this.eventInfo);
+      return Boolean(this.eventInfo?.gemsPromo);
     },
     gemsBlocks () {
       // We don't want to modify the original gems blocks when a promotion is running
diff --git a/website/client/src/components/payments/sendGiftModal.vue b/website/client/src/components/payments/sendGiftModal.vue
index 86a0431b584..0c86b8d9e55 100644
--- a/website/client/src/components/payments/sendGiftModal.vue
+++ b/website/client/src/components/payments/sendGiftModal.vue
@@ -51,7 +51,7 @@
       </div>
 
       <!-- menu area -->
-      <div class="row">
+      <div class="row bg-gray-700">
         <div class="col-md-8 offset-md-2 text-center nav">
           <div
             class="nav-link"
@@ -73,7 +73,7 @@
       <!-- subscriber block -->
       <subscription-options
         v-show="selectedPage === 'subscription'"
-        class="subscribe-option"
+        class="bg-gray-700 py-3"
         :user-receiving-gift="userReceivingGift"
         :receiver-name="receiverName"
       />
@@ -248,6 +248,11 @@
 <style lang="scss">
   @import '~@/assets/scss/mixins.scss';
   #send-gift {
+    #subscription-form {
+      border-bottom-left-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+
     .modal-dialog {
       max-width: 448px;
     }
@@ -280,15 +285,7 @@
         }
       }
     }
-    #subscription-form .subscribe-option {
-      background: #F9F9F9;
-    }
-
-    #subscription-form .selected {
-      background: rgba(213, 200, 255, 0.32);
-      // using rgba for transparency
-    }
-}
+  }
 </style>
 <style scoped lang="scss">
   @import '~@/assets/scss/colors.scss';
@@ -322,7 +319,6 @@
   }
 
   .row {
-    background-color: $gray-700;
     margin: 0 0 0 0;
     min-height: 32px;
   }
@@ -336,19 +332,18 @@
   }
 
   .nav-link {
-    color: $gray-100;
+    color: $gray-50;
     display: inline-block;
     padding: 0px 8px 6px 8px;
 
     &.active {
-    color: $purple-300;
-    border-bottom: 2px solid $purple-400;
+      color: $purple-300;
+      border-bottom: 2px solid $purple-400;
     }
 
     &:hover {
-    color: $purple-300;
-    border-bottom: 2px solid $purple-400;
-    cursor: pointer;
+      color: $purple-300;
+      cursor: pointer;
     }
   }
 
diff --git a/website/client/src/components/settings/subscription.vue b/website/client/src/components/settings/subscription.vue
index f83d36be3b8..51b61a5735a 100644
--- a/website/client/src/components/settings/subscription.vue
+++ b/website/client/src/components/settings/subscription.vue
@@ -1,312 +1,365 @@
 <template>
-  <div class="standard-page pt-0 px-0">
-    <div v-if="!hasSubscription && !hasCanceledSubscription">
-      <div class="row mt-3">
-        <div class="block-header mx-auto">
-          {{ $t('support') }}
-        </div>
-      </div>
-      <div class="row mb-5">
-        <div
-          v-once
-          class="svg-icon svg-logo mx-auto mt-1"
-          v-html="icons.logo"
-        ></div>
-      </div>
-      <div class="d-flex justify-content-center">
-        <div>
-          <div class="row col-12 ml-1">
-            <h2> {{ $t('subscribersReceiveBenefits') }} </h2>
-          </div>
-          <div class="row">
-            <div class="col-2">
-              <div
-                v-once
-                class="svg-icon svg-gems ml-3 mt-1"
-                v-html="icons.subscriberGems"
-              ></div>
-            </div>
-            <div class="col-10">
-              <h3> {{ $t('buyGemsGold') }} </h3>
-              <p> {{ $t('subscriptionBenefit1') }} </p>
+  <div>
+    <div class="pt-0 px-0">
+      <div v-if="!hasSubscription && !hasCanceledSubscription">
+        <div class="d-flex flex-column justify-content-center align-items-center
+          purple-gradient full-banner mb-4"
+        >
+          <p class="white header-top mt-4 mb-2">
+            {{ $t('subscribeTo').toUpperCase() }}
+          </p>
+          <div
+            class="header-mid d-flex justify-content-center align-items-center
+              mb-4 position-relative"
+          >
+            <div
+              v-once
+              class="svg-icon flip position-absolute left-0"
+              v-html="icons.purpleStars"
+            >
             </div>
-          </div>
-          <div class="row">
-            <div class="col-2">
-              <div
-                v-once
-                class="svg-icon svg-hourglasses ml-3 mt-1"
-                v-html="icons.subscriberHourglasses"
-              ></div>
+            <div
+              v-once
+              class="svg-icon svg-wordmark mx-4"
+              v-html="icons.wordmark"
+            >
             </div>
-            <div class="col-10">
-              <h3> {{ $t('mysticHourglassesTooltip') }} </h3>
-              <p> {{ $t('subscriptionBenefit6') }} </p>
+            <div
+              v-once
+              class="svg-icon position-absolute right-0"
+              v-html="icons.purpleStars"
+            >
             </div>
           </div>
-          <div class="row">
-            <div class="col-2">
-              <Sprite
-                :image-name="currentMysterySet"
-                class="mt-n1"
-              />
+          <h2 class="white">
+            {{ $t('subscribersReceiveBenefits') }}
+          </h2>
+        </div>
+        <div class="d-flex justify-content-center">
+          <div class="d-flex flex-column mr-4">
+            <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 class="col-10">
-              <h3> {{ $t('monthlyMysteryItems') }} </h3>
-              <p> {{ $t('subscriptionBenefit4') }} </p>
+            <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
+                  class="svg-icon svg-gems m-auto"
+                  v-html="icons.subscriberGems"
+                ></div>
+              </div>
+              <div class="w-330p my-auto">
+                <h3 class="mb-1"> {{ $t('buyGemsGold') }} </h3>
+                <p> {{ $t('subscriptionBenefit1') }} </p>
+              </div>
             </div>
-          </div>
-          <div class="row">
-            <div class="col-2">
-              <div class="Pet-Jackalope-RoyalPurple"></div>
+            <div class="d-flex mb-3 align-items-center">
+              <div class="sub-benefit bg-gray-600 d-flex mr-4">
+                <Sprite
+                  :image-name="currentMysterySet"
+                  class="m-auto"
+                />
+              </div>
+              <div class="w-330p my-auto">
+                <h3> {{ $t('monthlyMysteryItems') }} </h3>
+                <p> {{ $t('subscriptionBenefit4', {
+                  month,
+                  currentMysterySetName,
+                }) }} </p>
+              </div>
             </div>
-            <div class="col-10">
-              <h3> {{ $t('exclusiveJackalopePet') }} </h3>
-              <p> {{ $t('subscriptionBenefit5') }} </p>
+            <div class="d-flex mb-3 align-items-center">
+              <div class="sub-benefit bg-gray-600 d-flex mr-4">
+                <div
+                  v-once
+                  class="svg-icon svg-hourglasses m-auto"
+                  v-html="icons.subscriberHourglasses"
+                ></div>
+              </div>
+              <div class="w-330p my-auto">
+                <h3> {{ $t('mysticHourglassesTooltip') }} </h3>
+                <p> {{ $t('subscriptionBenefit6') }} </p>
+              </div>
             </div>
-          </div>
-          <div class="row">
-            <div class="col-2">
-              <div class="image-foods ml-2 mt-2"></div>
+            <div class="d-flex mb-3 align-items-center">
+              <div class="sub-benefit bg-gray-600 d-flex mr-4">
+                <div
+                  v-once
+                  class="svg-icon svg-jackalope m-auto"
+                  v-html="icons.jackalope"
+                ></div>
+              </div>
+              <div class="w-330p my-auto">
+                <h3> {{ $t('exclusiveJackalopePet') }} </h3>
+                <p> {{ $t('subscriptionBenefit5') }} </p>
+              </div>
             </div>
-            <div class="col-10">
-              <h3> {{ $t('doubleDropCap') }} </h3>
-              <p> {{ $t('subscriptionBenefit3') }} </p>
+            <div class="d-flex mb-3 align-items-center">
+              <div class="sub-benefit bg-gray-600 d-flex mr-4">
+                <div
+                  v-once
+                  class="svg-icon svg-food m-auto"
+                  v-html="icons.subscriberFood"
+                ></div>
+              </div>
+              <div class="w-330p my-auto">
+                <h3> {{ $t('doubleDropCap') }} </h3>
+                <p> {{ $t('subscriptionBenefit3') }} </p>
+              </div>
             </div>
           </div>
-        </div>
-        <div class="flex-spacer"></div>
-        <div>
-          <div class="subscribe-card d-flex flex-column">
-            <subscription-options class="mb-4" />
+          <div>
+            <div class="my-auto d-flex flex-column">
+              <subscription-options class="mb-4" />
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div
-      v-if="hasSubscription"
-      class="d-flex flex-column align-items-center"
-    >
-      <h1 class="mt-4 mx-auto">
-        {{ $t('subscription') }}
-      </h1>
-      <div class="subscribe-card mx-auto">
-        <div
-          v-if="hasSubscription && !hasCanceledSubscription"
-          class="d-flex flex-column align-items-center pt-4"
-        >
-          <div class="round-container bg-green-10 d-flex align-items-center justify-content-center">
-            <div
-              v-once
-              class="svg-icon svg-check"
-              v-html="icons.checkmarkIcon"
-            ></div>
-          </div>
-          <h2 class="green-10 mx-auto mb-75">
-            {{ $t('youAreSubscribed') }}
-          </h2>
-          <div
-            v-if="hasGroupPlan"
-            class="mx-5 mb-4 text-center"
-          >
-            {{ $t('youHaveGroupPlan') }}
-          </div>
-          <div
-            v-else
-            class="w-55 text-center"
-            v-html="$t('paymentSubBillingWithMethod', {
-              amount: purchasedPlanIdInfo.price,
-              months: purchasedPlanIdInfo.months,
-              paymentMethod: purchasedPlanIdInfo.plan
-            })"
-          >
-          </div>
+      <div
+        v-if="hasSubscription"
+        class="d-flex flex-column align-items-center"
+      >
+        <h1 class="mt-4 mx-auto mb-3">
+          {{ $t('subscription') }}
+        </h1>
+        <div class="sub-card bg-white p-4 mb-4">
           <div
-            v-if="canEditCardDetails"
-            class="mt-4 text-center"
+            v-if="hasSubscription && !hasCanceledSubscription"
+            class="d-flex flex-column align-items-center"
           >
-            <div class="font-weight-bold gray-10 mb-2">
-              {{ $t('needToUpdateCard') }}
-            </div>
-            <button
-              class="btn btn-primary btn-update-card
-              d-flex justify-content-center align-items-center mb-4"
-              @click="redirectToStripeEdit()"
+            <div class="round-container bg-green-10
+              d-flex align-items-center justify-content-center"
             >
               <div
                 v-once
-                class="svg-icon svg-credit-card mr-2"
-                v-html="icons.creditCardIcon"
+                class="svg-icon svg-check"
+                v-html="icons.checkmarkIcon"
               ></div>
-              <div>{{ $t('subUpdateCard') }}</div>
-            </button>
-          </div>
-          <div
-            v-else
-            class="svg-icon mb-4"
-            :class="paymentMethodLogo.class"
-            v-html="paymentMethodLogo.icon"
-          >
+            </div>
+            <h2 class="green-10 mx-auto mb-3">
+              {{ $t('youAreSubscribed') }}
+            </h2>
+            <div
+              v-if="hasGroupPlan"
+              class="mx-5 mb-4 text-center"
+            >
+              {{ $t('youHaveGroupPlan') }}
+            </div>
+            <p
+              v-else
+              class="text-center mb-4"
+              v-html="$t('paymentSubBillingWithMethod', {
+                amount: purchasedPlanIdInfo.price,
+                months: purchasedPlanIdInfo.months,
+                paymentMethod: purchasedPlanIdInfo.plan,
+              })"
+            >
+            </p>
+            <div
+              class="svg svg-icon mb-4"
+              :class="paymentMethodLogo.class"
+              v-html="paymentMethodLogo.icon"
+            >
+            </div>
+            <div
+              v-if="canEditCardDetails"
+              class="text-center"
+            >
+              <button
+                class="btn btn-secondary btn-update-card mb-4"
+                @click="redirectToStripeEdit()"
+              >
+                <div>{{ $t('subUpdateCard') }}</div>
+              </button>
+            </div>
+            <div
+              v-if="purchasedPlanExtraMonthsDetails.months > 0"
+              class="extra-months green-10 py-2 px-3 mb-4"
+              v-html="$t('purchasedPlanExtraMonths',
+                         {months: purchasedPlanExtraMonthsDetails.months})"
+            >
+            </div>
           </div>
           <div
-            v-if="purchasedPlanExtraMonthsDetails.months > 0"
-            class="extra-months green-10 py-2 px-3 mb-4"
-            v-html="$t('purchasedPlanExtraMonths',
-                       {months: purchasedPlanExtraMonthsDetails.months})"
+            v-if="hasGiftSubscription"
+            class="d-flex flex-column align-items-center mt-4"
           >
-          </div>
-        </div>
-        <div
-          v-if="hasGiftSubscription"
-          class="d-flex flex-column align-items-center mt-4"
-        >
-          <div class="round-container bg-green-10 d-flex align-items-center justify-content-center">
+            <div class="round-container bg-green-10
+              d-flex align-items-center justify-content-center"
+            >
+              <div
+                v-once
+                class="svg-icon svg-check"
+                v-html="icons.checkmarkIcon"
+              ></div>
+            </div>
+            <h2 class="green-10 mx-auto mb-3">
+              {{ $t('youAreSubscribed') }}
+            </h2>
             <div
+              class="mx-4 text-center mb-4 lh-71"
+            >
+              <span v-once>
+                {{ $t('haveNonRecurringSub') }}
+              </span>
+              <span
+                v-once
+                v-html="$t('subscriptionInactiveDate', {date: subscriptionEndDate})"
+              >
+              </span>
+            </div>
+            <h2 v-once>
+              {{ $t('switchToRecurring') }}
+            </h2>
+            <small
               v-once
-              class="svg-icon svg-check"
-              v-html="icons.checkmarkIcon"
-            ></div>
+              class="mx-4 mb-3 text-center"
+            >
+              {{ $t('continueGiftSubBenefits') }}
+            </small>
+            <subscription-options
+              :note="'subscriptionCreditConversion'"
+              class="w-100 mb-2"
+            />
           </div>
-          <h2 class="green-10 mx-auto mb-75">
-            {{ $t('youAreSubscribed') }}
-          </h2>
           <div
-            class="mx-4 text-center mb-4 lh-71"
+            v-else-if="hasCanceledSubscription"
+            class="d-flex flex-column align-items-center"
           >
-            <span v-once>
-              {{ $t('haveNonRecurringSub') }}
-            </span>
-            <span
-              v-once
-              v-html="$t('subscriptionInactiveDate', {date: subscriptionEndDate})"
+            <div class="round-container bg-gray-100
+              d-flex align-items-center justify-content-center"
             >
-            </span>
-          </div>
-          <h2 v-once>
-            {{ $t('switchToRecurring') }}
-          </h2>
-          <small
-            v-once
-            class="mx-4 mb-3 text-center"
-          >
-            {{ $t('continueGiftSubBenefits') }}
-          </small>
-          <subscription-options
-            :note="'subscriptionCreditConversion'"
-            class="w-100 mb-2"
-          />
-        </div>
-        <div
-          v-else-if="hasCanceledSubscription"
-          class="d-flex flex-column align-items-center mt-4"
-        >
-          <div class="round-container bg-gray-300 d-flex align-items-center justify-content-center">
+              <div
+                v-once
+                class="svg svg-icon svg-close color white"
+                v-html="icons.closeIcon"
+              ></div>
+            </div>
+            <h2 class="gray-50">
+              {{ $t('subscriptionCanceled') }}
+            </h2>
             <div
-              v-once
-              class="svg-icon svg-close"
-              v-html="icons.closeIcon"
-            ></div>
+              class="text-center mb-4"
+              v-html="$t('subscriptionInactiveDate', {date: subscriptionEndDate})"
+            >
+            </div>
+            <h2>{{ $t('readyToResubscribe') }}</h2>
+            <subscription-options class="w-100 mb-4" :canceled="true"/>
           </div>
-          <h2 class="gray-50">
-            {{ $t('subscriptionCanceled') }}
-          </h2>
           <div
-            class="w-75 text-center mb-4"
-            v-html="$t('subscriptionInactiveDate', {date: subscriptionEndDate})"
+            v-if="hasSubscription"
           >
-          </div>
-          <h2>{{ $t('readyToResubscribe') }}</h2>
-          <subscription-options class="w-100 mb-2" />
-        </div>
-        <div
-          v-if="hasSubscription"
-          class="bg-gray-700 py-3 mb-3 text-center"
-        >
-          <div class="header-mini mb-3">
-            {{ $t('subscriptionStats') }}
-          </div>
-          <div class="d-flex">
-            <div class="stat-column">
-              <div class="d-flex justify-content-center align-items-center">
-                <div
-                  v-once
-                  class="svg-icon svg-calendar mr-1"
-                  v-html="icons.calendarIcon"
-                >
+            <div class="d-flex justify-content-around mb-3">
+              <div class="bg-gray-700 d-flex flex-column
+                justify-content-center align-items-center stats-card"
+              >
+                <div class="d-flex justify-content-center align-items-center">
+                  <div
+                    v-once
+                    class="svg-icon svg-calendar mr-2"
+                    v-html="icons.calendarIcon"
+                  >
+                  </div>
+                  <div class="number-heavy">
+                    {{ user.purchased.plan.consecutive.count }}
+                  </div>
                 </div>
-                <div class="number-heavy">
-                  {{ user.purchased.plan.consecutive.count +
-                    user.purchased.plan.consecutive.offset }}
+                <div class="stats-label gray-50">
+                  {{ $t('subMonths') }}
                 </div>
               </div>
-              <div class="stats-label">
-                {{ $t('subMonths') }}
-              </div>
-            </div>
-            <div class="stats-spacer"></div>
-            <div class="stat-column">
-              <div class="d-flex justify-content-center align-items-center">
-                <div
-                  v-once
-                  class="svg-icon svg-gem mr-1"
-                  v-html="icons.gemIcon"
-                >
+              <div class="bg-gray-700 d-flex flex-column
+                justify-content-center align-items-center stats-card"
+              >
+                <div class="d-flex justify-content-center align-items-center">
+                  <div
+                    v-once
+                    class="svg-icon svg-gem mr-2"
+                    v-html="icons.gemIcon"
+                  >
+                  </div>
+                  <div class="number-heavy">
+                    {{ gemCap }}
+                  </div>
                 </div>
-                <div class="number-heavy">
-                  {{ gemCap }}
+                <div class="stats-label gray-50">
+                  {{ $t('monthlyGemsLabel') }}
                 </div>
               </div>
-              <div class="stats-label">
-                {{ $t('gemCap') }}
-              </div>
             </div>
-            <div class="stats-spacer"></div>
-            <div class="stat-column">
-              <div class="d-flex justify-content-center align-items-center">
+            <div
+              class="hourglass-preview purple-gradient d-flex flex-column
+              justify-content-center align-items-center position-relative mb-4"
+            >
+              <div
+                v-once
+                class="svg svg-icon position-absolute left-24"
+                v-html="icons.hourglassLeft"
+              >
+              </div>
+              <div v-if="nextHourGlass" class="text-center">
                 <div
-                  v-once
-                  class="svg-icon svg-hourglass mt-1 mr-1"
-                  v-html="icons.hourglassIcon"
+                  class="white mb-1"
                 >
-                </div>
-                <div class="number-heavy">
                   {{ nextHourGlass }}
                 </div>
+                <div
+                  v-once
+                  class="purple-600"
+                  >
+                  {{ $t('nextHourglass') }}
+                </div>
               </div>
-              <div class="stats-label">
-                {{ $t('nextHourglass') }}*
+              <p class="w-50 text-center" v-else>
+                {{ $t('subscribeAgainContinueHourglasses') }}
+              </p>
+              <div
+                v-once
+                class="svg svg-icon position-absolute right-24"
+                v-html="icons.hourglassRight"
+              >
               </div>
             </div>
-          </div>
-
-          <div
-            v-once
-            class="mt-4 nextHourglassDescription"
-          >
-            *{{ $t('nextHourglassDescription') }}
-          </div>
-        </div>
-        <div class="d-flex flex-column justify-content-center align-items-center mb-3">
-          <div
-            v-once
-            class="svg-icon svg-heart mb-2"
-            v-html="icons.heartIcon"
-          >
-          </div>
-          <div class="thanks-for-support">
-            {{ $t('giftSubscriptionText4') }}
+            <div
+              v-once
+              class="text-center next-hourglass-description gray-50"
+            >
+              {{ $t('nextHourglassDescription') }}
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div
-      v-if="hasSubscription && !hasCanceledSubscription"
-      class="d-flex flex-column align-items-center mt-3"
-    >
-      <div class="cancel-card p-4 text-center">
-        <h2 class="maroon-50">
+      <div
+        v-if="hasSubscription && !hasCanceledSubscription"
+        class="d-flex flex-column align-items-center mb-4 w-448p text-center"
+      >
+        <a
+          v-if="canCancelSubscription"
+          class="maroon-50"
+          @click="cancelSubscriptionConfirm({canCancel: canCancelSubscription})"
+        >
           {{ $t('cancelYourSubscription') }}
-        </h2>
+        </a>
         <div v-if="hasGroupPlan">
           {{ $t('cancelSubInfoGroupPlan') }}
         </div>
@@ -315,38 +368,33 @@
           v-html="$t(`cancelSubInfo${user.purchased.plan.paymentMethod}`)"
         >
         </div>
+      </div>
+    </div>
+    <div class="d-flex flex-column justify-content-center">
+      <div class="d-flex justify-content-center">
+        <div class="purple-bar my-auto"></div>
         <div
-          v-if="canCancelSubscription"
-          v-html="$t('cancelSubAlternatives')"
-        >
-        </div>
+          v-once
+          class="svg-icon mx-2"
+          v-html="icons.dividerStars"
+        ></div>
+        <div class="purple-bar my-auto"></div>
+      </div>
+      <div class="d-flex flex-column align-items-center mt-3">
         <div
-          class="btn btn-danger mt-4"
-          :class="{disabled: !canCancelSubscription}"
-          :disabled="!canCancelSubscription"
-          @click="cancelSubscriptionConfirm({canCancel: canCancelSubscription})"
+          v-once
+          class="svg-icon svg-gift-box mb-2"
+          v-html="icons.giftBox"
         >
-          {{ $t('cancelSub') }}
         </div>
+        <p class="purple-300 mb-3">
+          {{ $t('giftSubscription') }}
+        </p>
+        <button class="btn btn-secondary w-448p mb-5" @click="showSelectUser()">
+          {{ $t('giftASubscription') }}
+        </button>
       </div>
     </div>
-    <div class="d-flex flex-column align-items-center mt-4">
-      <div
-        v-once
-        class="svg-icon svg-gift-box m-auto"
-        v-html="icons.giftBox"
-      >
-      </div>
-      <div class="muted mx-auto mt-3 mb-1">
-        {{ $t('giftSubscription') }}
-      </div>
-      <a
-        class="mx-auto"
-        @click="showSelectUser()"
-      >
-        {{ $t('giftASubscription') }}
-      </a>
-    </div>
   </div>
 </template>
 
@@ -361,8 +409,13 @@
     color: $purple-200;
   }
 
+  h3 {
+    line-height: 24px;
+  }
+
   p {
-    max-width: 21rem;
+    margin-bottom: 0px;
+    line-height: 1.71;
   }
 
   small {
@@ -375,29 +428,11 @@
     font-size: 16px;
   }
 
-  .bg-green-10 {
-    background-color: $green-10;
-  }
-
-  .bg-gray-300 {
-    background-color: $gray-300;
-  }
-
-  .bg-gray-700 {
-    background-color: $gray-700;
-  }
-
-  .block-header {
-    color: $purple-200;
-    letter-spacing: 0.25rem;
-    font-size: 20px;
-  }
-
   .btn-update-card {
-    width: 12.5rem;
-    height: 2.5rem;
     border-radius: 4px;
     font-size: 14px;
+    padding: 4px 12px;
+    width: fit-content;
   }
 
   .cancel-card {
@@ -406,6 +441,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;
 
@@ -420,20 +499,63 @@
     border: 1px solid $green-50;
   }
 
-  .flex-spacer {
-    width: 4rem;
+  .flip {
+    transform: scaleX(-1);
   }
 
-  .gray-10 {
-    color: $gray-10;
+  .full-banner {
+    height: 180px;
+    width: 100vw;
   }
 
-  .gray-50 {
-    color: $gray-50;
+  @media only screen and (max-width: 922px) {
+    .full-banner {
+      width: 100%;
+    }
+  }
+
+  .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;
   }
 
-  .green-10 {
-    color: $green-10;
+  .header-top {
+    letter-spacing: 1ch;
+    font-weight: 700;
+  }
+
+  .hourglass-preview {
+    height: 92px;
+    border-radius: 8px;
+    font-weight: 700;
+
+    p {
+      color: $white;
+      line-height: 1.4;
+    }
+
+    .white {
+      font-family: 'Roboto Condensed';
+      font-size: 20px;
+      line-height: 1.4;
+    }
+
+    .purple-600 {
+      font-size: 12px;
+      line-height: 1.33;
+    }
   }
 
   .header-mini {
@@ -441,19 +563,20 @@
     font-weight: bold;
   }
 
-  .image-foods {
-    background: url(~@/assets/images/subscriber-food.png);
-    background-size: contain;
-    width: 46px;
-    height: 49px;
+  .justify-content-around {
+    gap: 16px;
   }
 
-  .lh-71 {
-    line-height: 1.71;
+  .left-0 {
+    left: 0px;
+  }
+
+  .left-24 {
+    left: 24px;
   }
 
-  .maroon-50 {
-    color: $maroon-50;
+  .lh-71 {
+    line-height: 1.71;
   }
 
   .muted {
@@ -461,6 +584,12 @@
     color: $gray-200;
   }
 
+  .next-hourglass-description {
+    font-size: 12px;
+    font-style: italic;
+    line-height: 1.33;
+  }
+
   .number-heavy {
     font-size: 20px;
     font-weight: bold;
@@ -468,9 +597,23 @@
     color: $gray-50;
   }
 
-  .Pet-Jackalope-RoyalPurple {
-    margin-top: -1.75rem;
-    transform: scale(0.75);
+  .purple-bar {
+    background-color: $purple-400;
+    height: 1px;
+    width: 50%;
+    max-width: 432px;
+  }
+
+  .purple-gradient {
+    background-image: linear-gradient($purple-300, $purple-200);
+  }
+
+  .right-0 {
+    right: 0px;
+  }
+
+  .right-24 {
+    right: 24px;
   }
 
   .round-container {
@@ -481,25 +624,29 @@
     margin-bottom: 16px;
   }
 
+  .stats-card {
+    border-radius: 8px;
+    width: 192px;
+    height: 88px;
+  }
+
   .stats-label {
     font-size: 12px;
-    color: $gray-100;
     margin-top: 6px;
-    font-weight: bold;
+    font-weight: 700;
     line-height: 1.33;
   }
 
-  .stats-spacer {
-    width: 1px;
-    height: 3rem;
-    background-color: $gray-500;
+  .sub-benefit {
+    width: 94px;
+    height: 94px;
+    border-radius: 8px;
   }
 
-  .subscribe-card {
-    width: 28rem;
+  .sub-card {
     border-radius: 8px;
-    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-    background-color: $white;
+    box-shadow: 0px 1px 3px 0px rgba($black, 0.12), 0px 1px 2px 0px rgba($black, 0.24);
+    width: 448px;
   }
 
   .svg-amazon-pay {
@@ -518,29 +665,19 @@
     margin-right: 2px;
   }
 
-  .svg-heart {
-    width: 24px;
-    height: 24px;
-  }
-
   .svg-check {
-    width: 36px;
+    width: 48px;
     color: $white;
   }
 
   .svg-close {
-    width: 26px;
-    height: 26px;
-
-    & ::v-deep svg path {
-      stroke: $white;
-      stroke-width: 3;
-    }
+    width: 32px;
+    height: 32px;
   }
 
-  .svg-credit-card {
-    width: 21.3px;
-    height: 16px;
+  .svg-food {
+    width: 60px;
+    height: 58px;
   }
 
   .svg-gem {
@@ -551,8 +688,13 @@
   }
 
   .svg-gems {
-    width: 42px;
-    height: 52px;
+    width: 54px;
+    height: 54px;
+  }
+
+  .svg-gift-box {
+    width: 24px;
+    height: 24px;
   }
 
   .svg-google-pay {
@@ -560,6 +702,11 @@
     height: 40px;
   }
 
+  .svg-heart {
+    width: 24px;
+    height: 24px;
+  }
+
   .svg-hourglass {
     width: 24px;
     height: 24px;
@@ -567,14 +714,14 @@
     margin-right: 2px;
   }
 
-  .svg-gift-box {
-    width: 32px;
-    height: 32px;
+  .svg-hourglasses {
+    width: 39px;
+    height: 54px;
   }
 
-  .svg-hourglasses {
-    width: 43px;
-    height: 53px;
+  .svg-jackalope {
+    width: 38px;
+    height: 44px;
   }
 
   .svg-logo {
@@ -587,32 +734,16 @@
     height: 40px;
   }
 
-  .w-55 {
-    width: 55%;
-  }
-
-  .nextHourglassDescription {
-    font-size: 12px;
-    font-style: italic;
-    line-height: 1.33;
-    color: $gray-100;
-    margin-left: 100px;
-    margin-right: 100px;
-  }
-
-  .justify-content-evenly {
-    justify-content: space-evenly;
+  .svg-stripe {
+    width: 96px;
   }
 
-  .thanks-for-support {
-    font-size: 12px;
-    line-height: 1.33;
-    text-align: center;
-    color: $gray-100;
+  .w-330p {
+    width: 330px;
   }
 
-  .stat-column {
-    width: 33%;
+  .w-448p {
+    width: 448px;
   }
 </style>
 
@@ -635,16 +766,23 @@ 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';
 import googlePayLogo from '@/assets/svg/google-pay-logo.svg';
 import heartIcon from '@/assets/svg/health.svg';
 import hourglassIcon from '@/assets/svg/hourglass.svg';
+import hourglassLeft from '@/assets/svg/hourglass-sparkle-left.svg';
+import hourglassRight from '@/assets/svg/hourglass-sparkle-right.svg';
+import jackalope from '@/assets/svg/jackalope.svg';
 import logo from '@/assets/svg/habitica-logo-purple.svg';
 import paypalLogo from '@/assets/svg/paypal-logo.svg';
+import purpleStars from '@/assets/svg/stars-purple.svg';
+import stripeLogo from '@/assets/svg/stripe.svg';
+import subscriberFood from '@/assets/svg/subscriber-food.svg';
 import subscriberGems from '@/assets/svg/subscriber-gems.svg';
 import subscriberHourglasses from '@/assets/svg/subscriber-hourglasses.svg';
+import wordmark from '@/assets/svg/habitica-logo.svg';
 
 export default {
   components: {
@@ -678,16 +816,23 @@ export default {
         calendarIcon,
         checkmarkIcon,
         closeIcon,
-        creditCardIcon,
+        dividerStars,
         gemIcon,
         giftBox,
         googlePayLogo,
         heartIcon,
         hourglassIcon,
+        hourglassLeft,
+        hourglassRight,
+        jackalope,
         logo,
         paypalLogo,
+        purpleStars,
+        stripeLogo,
+        subscriberFood,
         subscriberGems,
         subscriberHourglasses,
+        wordmark,
       }),
     };
   },
@@ -739,8 +884,7 @@ export default {
       return this.user.purchased.plan.customerId === 'group-plan';
     },
     hasConsecutiveSubscription () {
-      return Boolean(this.user.purchased.plan.consecutive.count)
-        || Boolean(this.user.purchased.plan.consecutive.offset);
+      return Boolean(this.user.purchased.plan.consecutive.count);
     },
     purchasedPlanExtraMonthsDetails () {
       return {
@@ -768,6 +912,12 @@ export default {
         && !this.hasGroupPlan
       );
     },
+    month () {
+      return moment().format('MMMM');
+    },
+    currentMysterySetName () {
+      return this.$t(`mysterySet${moment().format('YYYYMM')}`);
+    },
     currentMysterySet () {
       return `shop_set_mystery_${moment().format('YYYYMM')}`;
     },
@@ -776,22 +926,27 @@ 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 {
+            icon: this.icons.stripeLogo,
+            class: 'svg-stripe',
           };
         default:
           return {
@@ -809,7 +964,10 @@ export default {
       return currentPlanContext.nextHourglassDate;
     },
     nextHourGlass () {
-      const nextHourglassMonth = this.nextHourGlassDate.format('MMM YYYY');
+      if (!this.nextHourGlassDate) {
+        return null;
+      }
+      const nextHourglassMonth = this.nextHourGlassDate.format('MMMM');
 
       return nextHourglassMonth;
     },
diff --git a/website/client/src/components/settings/subscriptionOptions.vue b/website/client/src/components/settings/subscriptionOptions.vue
index 491bf18f960..d30f4d4b295 100644
--- a/website/client/src/components/settings/subscriptionOptions.vue
+++ b/website/client/src/components/settings/subscriptionOptions.vue
@@ -1,70 +1,167 @@
 <template>
   <div id="subscription-form">
-    <b-form-group class="mb-3 w-100 h-100">
+    <div
+      class="w-100 h-100"
+      :class="{'mb-2': userReceivingGift?._id}"
+    >
+      <strong
+        v-if="userReceivingGift?._id"
+        class="text-center d-block mb-3 mx-5"
+      >
+        {{ $t('giftSubscriptionLeadText') }}
+      </strong>
       <!-- eslint-disable vue/no-use-v-if-with-v-for -->
-      <b-form-radio
+      <div
         v-for="block in subscriptionBlocksOrdered"
         v-if="block.target !== 'group' && block.canSubscribe === true"
         :key="block.key"
-        v-model="subscription.key"
         :value="block.key"
-        class="subscribe-option pt-2 pl-5 pb-3 mb-0"
-        :class="{selected: subscription.key === block.key}"
-        @click.native="updateSubscriptionData(block.key)"
+        class="subscribe-option d-flex"
+        :class="{
+          selected: subscription.key === block.key,
+          'mb-2': block.months !== 12,
+          final: block.months === 12,
+          'mx-4': userReceivingGift?._id,
+        }"
+        @click="updateSubscriptionData(block.key)"
       >
-        <!-- eslint-enable vue/no-use-v-if-with-v-for -->
-        <div
-          v-if="userReceivingGift && userReceivingGift._id"
-          class="subscription-text ml-2 mb-1"
-          v-html="$t('giftSubscriptionRateText', {price: block.price, months: block.months})"
-        >
+        <div v-if="subscription.key === block.key">
+          <div class="selected-corner"></div>
+          <div
+            class="svg svg-icon svg-check color m-2"
+            v-html="icons.check"
+          >
+          </div>
         </div>
         <div
-          v-else
-          class="subscription-text ml-2 mb-1"
-          v-html="$t('subscriptionRateText', {price: block.price, months: block.months})"
+          v-if="block.months === 12"
+          class="ribbon mt-3 d-flex align-items-center"
         >
+          <small class="bold teal-1"> {{ $t('popular') }} </small>
         </div>
-        <div
-          class="ml-2"
-          v-html="subscriptionBubbles(block.key)"
-        >
+        <!-- eslint-enable vue/no-use-v-if-with-v-for -->
+        <div class="w-100">
+          <div
+            class="mx-5"
+            v-if="block.months < 12"
+          >
+            <h2
+              class="mt-3 mb-1"
+            > ${{ block.price }}.00 USD </h2>
+            <small
+              class="bold mb-2"
+            >
+              {{ recurrenceText(block.months) }}
+            </small>
+            <div class="d-flex flex-column mb-3">
+              <div class="d-flex align-items-center mb-1">
+                <div
+                  class="svg svg-icon svg-plus color mr-1"
+                  v-html="icons.plus"
+                >
+                </div>
+                <small
+                  v-html="userReceivingGift?._id ? $t('unlockNGemsGift', { count: 24 })
+                    : $t('unlockNGems', { count: 24 })"
+                ></small>
+              </div>
+              <div class="d-flex align-items-center">
+                <div
+                  class="svg svg-icon svg-plus color mr-1"
+                  v-html="icons.plus"
+                >
+                </div>
+                <small
+                  v-html="userReceivingGift?._id ? $t('earn2GemsGift') : $t('earn2Gems')"
+                ></small>
+              </div>
+            </div>
+          </div>
+          <div v-else>
+            <div
+              class="bg-white py-3 pl-5"
+              :class="{ round: userReceivingGift?._id }"
+            >
+              <div class="d-flex align-items-center mb-1">
+                <h2 class="mr-2 my-auto"> ${{ block.price }}.00 USD</h2>
+                <strike class="gray-200">$60.00 USD</strike>
+              </div>
+              <small class="bold mb-2">
+                {{ recurrenceText(block.months) }}
+              </small>
+              <div class="d-flex flex-column">
+                <div class="d-flex align-items-center mb-1">
+                  <div
+                    class="svg svg-icon svg-plus color mr-1"
+                    v-html="icons.plus"
+                  >
+                  </div>
+                  <small
+                    v-html="userReceivingGift?._id ? $t('unlockNGemsGift', { count: 50 })
+                      : $t('unlockNGems', { count: 50 })"
+                  ></small>
+                </div>
+                <div class="d-flex align-items-center">
+                  <div
+                    class="svg svg-icon svg-plus color mr-1"
+                    v-html="icons.plus"
+                  >
+                  </div>
+                  <small v-html="userReceivingGift?._id ? $t('maxGemCapGift') : $t('maxGemCap')">
+                  </small>
+                </div>
+              </div>
+            </div>
+            <div
+              class="gradient-banner text-center"
+              v-if="!userReceivingGift?._id && !user?.purchased?.plan?.hourglassPromoReceived"
+            >
+              <small class="my-3" v-html="$t('immediate12Hourglasses')"></small>
+            </div>
+          </div>
         </div>
-      </b-form-radio>
-    </b-form-group>
-    <div class="mx-4 mb-4 text-center">
+      </div>
+      <button
+        class="btn btn-primary"
+        :class="[canceled ? 'mt-4' : 'mt-3', userReceivingGift?._id ? 'mx-4' : 'w-100']"
+        @click="$root.$emit('bv::show::modal', 'buy-subscription')"
+      > {{ userReceivingGift?._id ? $t('selectPayment') : $t('subscribe') }} </button>
+    </div>
+    <div
+      v-if="note"
+      class="mx-4 my-3 text-center"
+    >
       <small
-        v-if="note"
         v-once
         class="font-italic"
       >
         {{ $t(note) }}
       </small>
     </div>
-    <!-- payment buttons first is for gift subs and the second is for renewing subs -->
-    <payments-buttons
-      v-if="userReceivingGift && userReceivingGift._id"
-      :disabled="!subscription.key"
-      :stripe-fn="() => redirectToStripe({gift, uuid: userReceivingGift._id, receiverName})"
-      :paypal-fn="() => openPaypalGift({
-        gift: gift, giftedTo: userReceivingGift._id, receiverName,
-      })"
-      :amazon-data="{type: 'single', gift, giftedTo: userReceivingGift._id, receiverName}"
-    />
-    <payments-buttons
-      v-else
-      :disabled="!subscription.key"
-      :stripe-fn="() => redirectToStripe({
-        subscription: subscription.key,
-        coupon: subscription.coupon,
-      })"
-      :paypal-fn="() => openPaypal({url: paypalPurchaseLink, type: 'subscription'})"
-      :amazon-data="{
-        type: 'subscription',
-        subscription: subscription.key,
-        coupon: subscription.coupon
-      }"
-    />
+    <b-modal
+      id="buy-subscription"
+      size="md"
+      :hide-header="true"
+      :hide-footer="true"
+    >
+      <payments-buttons
+        v-if="userReceivingGift?._id"
+        :disabled="!subscription.key"
+        :stripe-fn="() => redirectToStripe({gift, uuid: userReceivingGift._id, receiverName})"
+        :paypal-fn="() => openPaypalGift({
+          gift: gift, giftedTo: userReceivingGift._id, receiverName,
+        })"
+      />
+      <payments-buttons
+        v-else
+        :disabled="!subscription.key"
+        :stripe-fn="() => redirectToStripe({
+          subscription: subscription.key,
+          coupon: subscription.coupon,
+        })"
+        :paypal-fn="() => openPaypal({url: paypalPurchaseLink, type: 'subscription'})"
+      />
+    </b-modal>
   </div>
 </template>
 
@@ -77,9 +174,13 @@
       margin-top: 0.75rem;
     }
 
-    .selected {
-      background-color: rgba(213, 200, 255, 0.32);
+    .discount-bubble {
+      background-color: $green-10;
+      color: $white;
+    }
 
+    .selected {
+      outline: 2px solid $purple-300;
       .subscription-bubble {
         background-color: $purple-300;
         color: $white;
@@ -102,9 +203,12 @@
       color: $gray-200;
     }
 
-    .discount-bubble {
-      background-color: $green-10;
-      color: $white;
+    .selected strong {
+      color: $yellow-5;
+    }
+
+    .selected .gradient-banner strong {
+      color: $teal-1;
     }
   }
 </style>
@@ -112,20 +216,113 @@
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
-  small {
+  small, .small {
     color: $gray-100;
     display: inline-block;
     font-size: 12px ;
     font-weight: normal;
+    line-height: 16px;
+
+    &.bold {
+      font-weight: 700;
+    }
+  }
+
+  strike, strong {
+    line-height: 24px;
+  }
+
+  .btn-primary {
+    min-width: 400px;
+  }
+
+  .gradient-banner small {
+    color: $teal-1;
+    width: 61%;
+  }
+
+  .ribbon {
+    width: fit-content;
+    background: linear-gradient(90deg, rgba(119, 244, 199, 1), rgba(114, 207, 255, 1));
+    border-radius: 4px;
+    clip-path: polygon(0px 0px, calc(100% + 1px) 0px, calc(100% + 1px) calc(100% + 1px),
+      0px calc(100% + 3px), 4px 50%);
+    box-shadow: 0px 1px 3px 0px rgba(26, 24, 29, 0.12), 0px 1px 2px 0px rgba(26, 24, 29, 0.24);
+    position: absolute;
+    right: -4px;
     line-height: 1.33;
+    padding: 4px 10px 4px 12px;
+  }
+
+  .selected-corner {
+    border-color: $purple-300 transparent transparent transparent;
+    border-style: solid;
+    border-width: 48px 48px 0 0;
+    border-top-left-radius: 4px;
+    position: absolute;
   }
 
   .subscribe-option {
-    background-color: $gray-700;
+    max-width: 448px;
+    border-radius: 8px;
+    box-shadow: 0px 1px 3px 0px rgba($black, 0.12), 0px 1px 2px 0px rgba($black, 0.24);
+    position: relative;
+    background-color: $white;
+
+    .bg-white {
+      border-top-left-radius: 8px;
+      border-top-right-radius: 8px;
+
+      &.round {
+        border-bottom-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+      }
+    }
+
+    &.final h2 {
+      color: $teal-10;
+    }
+
+    &:hover, &.selected {
+      box-shadow: 0px 3px 6px 0px rgba($black, 0.16), 0px 3px 6px 0px rgba($black, 0.24);
+    }
+
+    &.selected {
+      &.final {
+        small {
+          color: $teal-1;
+        }
+      }
+      &:not(.final) {
+        h2, small {
+          color: $purple-200;
+        }
+      }
+      .svg-plus {
+        color: $yellow-10;
+      }
+    }
 
-    &:not(:last-of-type) {
-      border-bottom: 1px solid $gray-600;
+    &.final {
+      background: linear-gradient(90deg, rgba($green-500, 1), rgba(114, 207, 255, 1));
     }
+
+    h2 {
+      font-family: 'Roboto', sans-serif;
+      line-height: 24px;
+      color: $gray-50;
+    }
+  }
+
+  .svg-check {
+    width: 16px;
+    position: absolute;
+    color: $white;
+  }
+
+  .svg-plus {
+    color: $gray-300;
+    min-width: 10px;
   }
 </style>
 
@@ -136,6 +333,8 @@ import sortBy from 'lodash/sortBy';
 import subscriptionBlocks from '@/../../common/script/content/subscriptionBlocks';
 import paymentsButtons from '@/components/payments/buttons/list';
 import paymentsMixin from '../../mixins/payments';
+import check from '@/assets/svg/check.svg';
+import plus from '@/assets/svg/positive.svg';
 
 export default {
   components: {
@@ -157,15 +356,23 @@ export default {
       type: String,
       default: '',
     },
+    canceled: {
+      type: Boolean,
+      default: false,
+    },
   },
   data () {
     return {
-      subscription: {
-        key: 'basic_earned',
-      },
       gift: {
         type: 'subscription',
-        subscription: { key: 'basic_earned' },
+        subscription: { key: 'basic_12mo' },
+      },
+      icons: Object.freeze({
+        check,
+        plus,
+      }),
+      subscription: {
+        key: 'basic_12mo',
       },
     };
   },
@@ -179,6 +386,18 @@ export default {
     },
   },
   methods: {
+    recurrenceText (months) {
+      if (this.userReceivingGift?._id) {
+        if (months < 2) {
+          return this.$t('oneMonthGift');
+        }
+        return this.$t('nMonthsGift', { months });
+      }
+      if (months < 2) {
+        return this.$t('recurringMonthly');
+      }
+      return (this.$t('recurringNMonthly', { length: months }));
+    },
     subscriptionBubbles (subscription) {
       switch (subscription) {
         case 'basic_3mo':
@@ -193,7 +412,7 @@ export default {
     },
     updateSubscriptionData (key) {
       this.subscription.key = key;
-      if (this.userReceivingGift._id) this.gift.subscription.key = key;
+      if (this.userReceivingGift?._id) this.gift.subscription.key = key;
     },
   },
 };
diff --git a/website/client/src/pages/settings-overview.vue b/website/client/src/pages/settings-overview.vue
index 982ff742833..040cd062b4a 100644
--- a/website/client/src/pages/settings-overview.vue
+++ b/website/client/src/pages/settings-overview.vue
@@ -46,10 +46,13 @@
       </div>
     </div>
     <div
-      class="col-12 d-flex "
-      :class="{'justify-content-center': applyNarrowView}"
+      class="col-12 d-flex"
+      :class="{'justify-content-center': applyNarrowView || maxWidthView}"
     >
-      <div :class="{'settings-content': applyNarrowView, 'full-width-content': !applyNarrowView}">
+      <div :class="{
+        'settings-content': applyNarrowView,
+        'full-width-content': !applyNarrowView && !maxWidthView,
+      }">
         <router-view />
       </div>
     </div>
@@ -207,8 +210,11 @@ export default {
       if (!this.currentEvent || !this.currentEvent.promo) return 'none';
       return this.currentEvent.promo;
     },
+    maxWidthView () {
+      return this.$route.name === 'subscription';
+    },
     applyNarrowView () {
-      return !['subscription', 'transactions'].includes(this.$route.name);
+      return !this.maxWidthView && this.$route.name !== 'transactions';
     },
   },
   methods: {
diff --git a/website/client/src/router/handleRedirect.js b/website/client/src/router/handleRedirect.js
index 66b99b75efe..dbdd9f5b5ec 100644
--- a/website/client/src/router/handleRedirect.js
+++ b/website/client/src/router/handleRedirect.js
@@ -22,17 +22,15 @@ export default function handleRedirect (to, from, next) {
         newAppState.paymentCompleted = true;
         setLocalSetting(CONSTANTS.savedAppStateValues.SAVED_APP_STATE, JSON.stringify(newAppState));
 
-        if (newAppState.isStripeEdit) {
-          if (newAppState.paymentType === 'subscription') {
-            return next({ name: 'subscription' });
-          }
+        if (newAppState.isStripeEdit && newAppState.paymentType === 'groupPlan') {
+          return next({
+            name: 'groupPlanBilling',
+            params: { groupId: newAppState.groupId },
+          });
+        }
 
-          if (newAppState.paymentType === 'groupPlan') {
-            return next({
-              name: 'groupPlanBilling',
-              params: { groupId: newAppState.groupId },
-            });
-          }
+        if (newAppState.paymentType === 'subscription' || newAppState.paymentType === 'gift-subscription') {
+          return next({ name: 'subscription' });
         }
 
         const newGroup = newAppState.group;
diff --git a/website/common/locales/en/npc.json b/website/common/locales/en/npc.json
index 003693fd4be..85c9d779b30 100644
--- a/website/common/locales/en/npc.json
+++ b/website/common/locales/en/npc.json
@@ -98,7 +98,7 @@
   "paymentYouSentSubscription": "You sent <strong><%- name %></strong><br> a <%= months %> month(s) 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>.",
+  "paymentSubBillingWithMethod": "Your subscription will be billed<br><strong>$<%= amount %>.00 USD</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.",
diff --git a/website/common/locales/en/settings.json b/website/common/locales/en/settings.json
index b49fab745a8..d5f4078eee4 100644
--- a/website/common/locales/en/settings.json
+++ b/website/common/locales/en/settings.json
@@ -186,8 +186,8 @@
     "gemCapExtra": "Gem Cap Bonus",
     "mysticHourglasses": "Mystic Hourglasses:",
     "mysticHourglassesTooltip": "Mystic Hourglasses",
-    "nextHourglass": "Next Hourglass",
-    "nextHourglassDescription": "Subscribers receive Mystic Hourglasses within\nthe first three days of the month.",
+    "nextHourglass": "Next Mystic Hourglass Delivery",
+    "nextHourglassDescription": "Subscribers receive a Mystic Hourglass, a Mystery Gear Set, and Gems restocked in the Market within the first two days of the month",
     "paypal": "PayPal",
     "amazonPayments": "Amazon Payments",
     "amazonPaymentsRecurring": "Ticking the checkbox below is necessary for your subscription to be created. It allows your Amazon account to be used for ongoing payments for <strong>this</strong> subscription. It will not cause your Amazon account to be automatically used for any future purchases.",
@@ -253,6 +253,7 @@
     "transaction_release_mounts": "Released mounts",
     "transaction_reroll": "Used Fortify Potion",
     "transaction_subscription_perks": "<b>Subscription</b> perk",
+    "transaction_subscription_bonus": "<b>Subscription</b> bonus",
     "transaction_admin_update_balance": "<b>Admin</b> given",
     "transaction_admin_update_hourglasses": "<b>Admin</b> updated",
     "connected": "Connected",
diff --git a/website/common/locales/en/subscriber.json b/website/common/locales/en/subscriber.json
index 766dd2ea36f..747bb94110c 100644
--- a/website/common/locales/en/subscriber.json
+++ b/website/common/locales/en/subscriber.json
@@ -7,12 +7,12 @@
     "howManyGemsSend":"How many Gems would you like to send?",
     "needToPurchaseGems": "Need to purchase Gems as a gift?",
     "wantToSendOwnGems": "Want to send your own Gems?",
-    "buyGemsGold": "Buy Gems with Gold",
+    "buyGemsGold": "Free Monthly Gems",
     "mustSubscribeToPurchaseGems": "Must subscribe to purchase gems with GP",
     "reachedGoldToGemCapQuantity": "Your requested amount <%= quantity %> exceeds the amount you can buy for this month (<%= convCap %>). The full amount becomes available within the first three days of each month. Thanks for subscribing!",
     "mysteryItem": "Exclusive monthly items",
     "mysteryItemText": "Each month you will receive a unique cosmetic item for your avatar! Plus, for every three months of consecutive subscription, the Mysterious Time Travelers will grant you access to historic (and futuristic!) cosmetic items.",
-    "exclusiveJackalopePet": "Exclusive pet",
+    "exclusiveJackalopePet": "Special Pet",
     "giftSubscription": "Want to gift the benefits of a subscription to someone else?",
     "giftASubscription": "Gift a Subscription",
     "giftSubscriptionText4": "Thanks for supporting Habitica!",
@@ -20,7 +20,7 @@
     "groupPlans": "Group Plans",
     "nowSubscribed": "You are now subscribed to Habitica!",
     "cancelSub": "Cancel Subscription",
-    "cancelSubInfoGoogle": "Please go to the \"Account\" > \"Subscriptions\" section of the Google Play Store app to cancel your subscription or to see your subscription's termination date if you have already cancelled it. This screen is not able to show you whether your subscription has been cancelled.",
+    "cancelSubInfoGoogle": "To cancel your subscription or to view your subscription's termination date, please use the <a href='https://play.google.com/store/account/subscriptions'>Google Play Store</a>. Any leftover months of subscription credit will be added to your end date after cancellation.",
     "cancelSubInfoApple": "Please follow <a href=\"https://support.apple.com/en-us/HT202039\">Apple's official instructions</a> to cancel your subscription or to see your subscription's termination date if you have already cancelled it. This screen is not able to show you whether your subscription has been cancelled.",
     "cancelSubInfoGroupPlan": "Because you have a free subscription from a Group Plan, you cannot cancel it. It will end when you are no longer a member of the Group Plan. If you are the Group leader and want to cancel the Group Plan, you can do that from the Group Plan’s “Group Billing” tab.",
     "cancelingSubscription": "Canceling the subscription",
@@ -173,7 +173,7 @@
     "mysterySet301703": "Peacock Steampunk Set",
     "mysterySet301704": "Pheasant Steampunk Set",
     "mysterySetwondercon": "Wondercon",
-    "subUpdateCard": "Update Credit Card",
+    "subUpdateCard": "Edit Credit Card",
     "subUpdateTitle": "Update",
     "notEnoughHourglasses": "You don't have enough Mystic Hourglasses.",
     "backgroundAlreadyOwned": "Background already owned.",
@@ -200,22 +200,24 @@
     "choosePaymentMethod": "Choose your payment method",
     "support": "Support",
     "supportHabitica": "Support Habitica",
+    "subscribeTo": "Subscribe To",
     "gemBenefitLeadin": "What can you buy with Gems?",
     "gemBenefit1": "Unique and fashionable costumes for your avatar.",
     "gemBenefit2": "Backgrounds to immerse your avatar in the world of Habitica!",
     "gemBenefit3": "Exciting Quest chains that drop pet eggs.",
     "gemBenefit4": "Reset your avatar's Stat Points and change its Class.",
     "usuallyGems": "Usually <%= originalGems %>",
-    "subscriptionBenefit1": "Alexander the Merchant will now sell you Gems from the Market for 20 Gold each!",
-    "subscriptionBenefit3": "Discover even more items in Habitica with a 2x daily drop-cap.",
-    "subscriptionBenefit4": "Unique cosmetic item for you to decorate your avatar each month.",
-    "subscriptionBenefit5": "Receive the Royal Purple Jackalope pet when you become a new subscriber.",
-    "subscriptionBenefit6": "Earn Mystic Hourglasses to purchase items in the Time Traveler’s Shop!",
+    "subscriptionBenefit1": "Get up to 50 Gold-purchasable Gems in the Market to buy Quests, Customizations, Pets, and more!",
+    "subscriptionBenefit3": "Find double the Eggs, Hatching Potions, and Food each day to grow your Pet collection!",
+    "subscriptionBenefit4": "Stay decked out in the latest exclusive gear. Subscribe now to get <%= month %>’s <%= currentMysterySetName %>!",
+    "subscriptionBenefit5": "Get the exclusive Royal Purple Jackalope when you subscribe today!",
+    "subscriptionBenefit6": "Never miss an item with 1 Mystic Hourglass a month to use in the Time Travelers Shop!",
     "purchaseAll": "Purchase Set",
     "gemsRemaining": "remaining",
     "notEnoughGemsToBuy": "No more Gems available for purchase this month. More will become available within the first 3 days of each month.",
-    "subscribersReceiveBenefits": "Subscribers receive these useful benefits!",
-    "monthlyMysteryItems": "Monthly Mystery Items",
+    "subscribersReceiveBenefits": "Stay motivated with even more rewards when you subscribe",
+    "monthlyMysteryItems": "Limited Monthly Gear Sets",
+    "monthlyMysticHourglass": "Monthly Mystic Hourglass",
     "doubleDropCap": "Double the Drops",
     "youAreSubscribed": "You are subscribed to Habitica",
     "dropCapReached": "You found all items for the day!",
@@ -226,15 +228,33 @@
     "subscriptionCanceled": "Your subscription is canceled",
     "subscriptionInactiveDate": "Your subscription benefits will become inactive on <br><strong><%= date %></strong>",
     "subscriptionStats": "Subscription Stats",
-    "subMonths": "Sub Months",
+    "subMonths": "Months Subscribed",
     "needToUpdateCard": "Need to update your card?",
     "readyToResubscribe": "Are you ready to resubscribe?",
-    "cancelYourSubscription": "Cancel your subscription?",
+    "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",
     "haveNonRecurringSub": "You have a non-recurring gift subscription.",
     "switchToRecurring": "Switch to a recurring subscription?",
+    "recurringMonthly": "Recurring every month",
+    "recurringNMonthly": "Recurring every <%= length %> months",
+    "unlockNGems": "Unlock <strong><%= count %> Gems</strong> per month instantly",
+    "earn2Gems": "Earn <strong>+2 Gems</strong> every month you're subscribed",
+    "maxGemCap": "Max <strong>Gem Cap</strong>",
+    "monthlyGemsLabel": "Monthly Gems",
     "continueGiftSubBenefits": "Want to continue your benefits? You can start a new subscription before your gifted one runs out to keep your benefits active.",
     "subscriptionCreditConversion": "Starting a new subscription will convert any remaining months to credit that will be used after the recurring subscription is canceled.",
-    "monthlyGems": "Monthly Gems:"
+    "monthlyGems": "Monthly Gems:",
+    "popular": "Popular",
+    "immediate12Hourglasses": "Get <strong>12 Mystic Hourglasses</strong> immediately after your first 12-month subscription!",
+    "subscribe": "Subscribe",
+    "selectPayment": "Select Payment",
+    "giftSubscriptionLeadText": "Choose the subscription you'd like to gift below! This purchase will not automatically renew.",
+    "oneMonthGift": "For 1 month",
+    "nMonthsGift": "For <%= months %> months",
+    "unlockNGemsGift": "They'll unlock <strong><%= count %> Gems</strong> per month instantly",
+    "earn2GemsGift": "They'll earn <strong>+2 Gems</strong> every month they're subscribed",
+    "maxGemCapGift": "They'll have the max <strong>Gem Cap</strong>",
+    "subscribeAgainContinueHourglasses": "Subscribe again to continue receiving Mystic Hourglasses"
 }
diff --git a/website/common/script/content/constants/events.js b/website/common/script/content/constants/events.js
index e1b8b53c94b..35d25492823 100644
--- a/website/common/script/content/constants/events.js
+++ b/website/common/script/content/constants/events.js
@@ -103,8 +103,8 @@ export const REPEATING_EVENTS = {
     foodSeason: 'Pie',
   },
   giftOneGetOne: {
-    start: new Date('1970-12-19T04:00-05:00'),
-    end: new Date('1970-01-06T23:59-05:00'),
+    start: new Date('1970-10-19T04:00-05:00'),
+    end: new Date('1970-11-06T23:59-05:00'),
     promo: 'g1g1',
   },
 };
diff --git a/website/common/script/content/constants/gifSprites.js b/website/common/script/content/constants/gifSprites.js
index aaaef8e6e32..445095ad04b 100644
--- a/website/common/script/content/constants/gifSprites.js
+++ b/website/common/script/content/constants/gifSprites.js
@@ -37,4 +37,5 @@ export default [
   'stable_Pet-Gryphatrice-Jubilant',
   'back_special_heroicAureole',
   'Pet-HatchingPotion-Funghi',
+  'shop_armoire',
 ];
diff --git a/website/common/script/cron.js b/website/common/script/cron.js
index e66cd114e0d..cc568cfc5e8 100644
--- a/website/common/script/cron.js
+++ b/website/common/script/cron.js
@@ -8,7 +8,6 @@ import defaults from 'lodash/defaults';
 import invert from 'lodash/invert';
 import moment from 'moment';
 import 'moment-recur';
-import subscriptionBlocks from './content/subscriptionBlocks';
 
 export const DAY_MAPPING = {
   0: 'su',
@@ -287,23 +286,16 @@ export function getPlanContext (user, now) {
   const dateUpdatedMoment = moment(plan.dateUpdated).startOf('month');
   const elapsedMonths = moment(subscriptionEndDate).diff(dateUpdatedMoment, 'months');
 
-  const planMonths = subscriptionBlocks[plan.planId] ? subscriptionBlocks[plan.planId].months : 1;
-  let monthsTillNextHourglass;
-  if (planMonths > 1) {
-    monthsTillNextHourglass = Number(plan.consecutive.offset) + 1;
-  } else {
-    monthsTillNextHourglass = 3 - plan.perkMonthCount;
+  let nextHourglassDate = moment(nowMoment).add(1, 'month');
+  if (plan.dateTerminated && moment(plan.dateTerminated).isBefore(nextHourglassDate)) {
+    nextHourglassDate = null;
   }
 
-  const possibleNextHourglassDate = moment(plan.dateUpdated)
-    .add(monthsTillNextHourglass, 'months');
-
   return {
     plan,
     subscriptionEndDate,
     dateUpdatedMoment,
     elapsedMonths,
-    offset: plan.consecutive.offset, // months until the new hourglass is added
-    nextHourglassDate: possibleNextHourglassDate,
+    nextHourglassDate,
   };
 }
diff --git a/website/common/script/libs/planGemLimits.js b/website/common/script/libs/planGemLimits.js
index 28245989473..3ba341c8ef5 100644
--- a/website/common/script/libs/planGemLimits.js
+++ b/website/common/script/libs/planGemLimits.js
@@ -1,4 +1,4 @@
 export default {
   convRate: 20,
-  convCap: 25,
+  convCap: 24,
 };
diff --git a/website/server/controllers/api-v3/hall.js b/website/server/controllers/api-v3/hall.js
index c2580eefba7..0c3e6e00908 100644
--- a/website/server/controllers/api-v3/hall.js
+++ b/website/server/controllers/api-v3/hall.js
@@ -288,9 +288,6 @@ api.updateHero = {
       if (plan.dateTerminated !== hero.purchased.plan.dateTerminated) {
         hero.purchased.plan.dateTerminated = plan.dateTerminated;
       }
-      if (plan.perkMonthCount) {
-        hero.purchased.plan.perkMonthCount = plan.perkMonthCount;
-      }
       if (plan.consecutive) {
         if (plan.consecutive.trinkets) {
           const changedHourglassTrinkets = plan.consecutive.trinkets
@@ -313,9 +310,9 @@ api.updateHero = {
         if (plan.consecutive.count) {
           hero.purchased.plan.consecutive.count = plan.consecutive.count; // eslint-disable-line max-len
         }
-        if (plan.consecutive.offset) {
-          hero.purchased.plan.consecutive.offset = plan.consecutive.offset; // eslint-disable-line max-len
-        }
+      }
+      if (plan.cumulativeCount) {
+        hero.purchased.plan.cumulativeCount = plan.cumulativeCount;
       }
     }
 
diff --git a/website/server/libs/bug-report.js b/website/server/libs/bug-report.js
index 8f881437094..f5f6dc1dd42 100644
--- a/website/server/libs/bug-report.js
+++ b/website/server/libs/bug-report.js
@@ -16,7 +16,6 @@ export async function bugReportLogic (user, userEmail, message, BROWSER_UA, ques
     USER_PAYMENT_PLATFORM: user.purchased.plan.paymentMethod,
     USER_CUSTOMER_ID: user.purchased.plan.customerId,
     USER_CONSECUTIVE_MONTHS: user.purchased.plan.consecutive.count,
-    USER_OFFSET_MONTHS: user.purchased.plan.consecutive.offset,
     USER_HOURGLASSES: user.purchased.plan.consecutive.trinkets,
     REPORT_MSG: message,
     BROWSER_UA,
diff --git a/website/server/libs/cron.js b/website/server/libs/cron.js
index d434a1fe60d..1af449af4b8 100644
--- a/website/server/libs/cron.js
+++ b/website/server/libs/cron.js
@@ -15,7 +15,6 @@ const {
   shouldDo,
   i18n,
   getPlanContext,
-  getPlanMonths,
 } = common;
 const { scoreTask } = common.ops;
 const { loginIncentives } = common.content;
@@ -67,59 +66,12 @@ async function grantEndOfTheMonthPerks (user, now) {
 
   if (elapsedMonths > 0) {
     plan.dateUpdated = now;
-    // For every month, inc their "consecutive months" counter.
-    // Give perks based on consecutive blocks
-    // If they already got perks for those blocks (eg, 6mo subscription,
-    // subscription gifts, etc) - then dec the offset until it hits 0
-
     // Award mystery items
     revealMysteryItems(user, elapsedMonths);
 
-    // 1 for one-month recurring or gift subscriptions; later set to 3 for 3-month recurring, etc.
-    let planMonthsLength = 1;
-
-    for (let i = 0; i < elapsedMonths; i += 1) {
-      plan.consecutive.count += 1;
-
-      plan.consecutive.offset -= 1;
-      // If offset is now greater than 0, the user is within a period
-      // for which they have already been given the consecutive months perks.
-      //
-      // If offset now equals 0, this is the final month for which
-      // the user has already been given the consecutive month perks.
-      // We do not give them more perks yet because they might cancel
-      // the subscription before the next payment is taken.
-      //
-      // If offset is now less than 0, the user EITHER has
-      // a single-month recurring subscription and MIGHT be due for perks,
-      // OR has a multi-month subscription that renewed some time
-      // in the previous calendar month and so they are due for a new set of perks
-      // (strictly speaking, they should have been given the perks
-      // at the time that next payment was taken, but we don't have support for
-      // tracking payments like that - giving the perks when offset is < 0 is a workaround).
-
-      if (plan.consecutive.offset < 0) {
-        if (plan.planId) {
-          planMonthsLength = getPlanMonths(plan);
-        }
-
-        if (planMonthsLength === 1) {
-          plan.consecutive.offset = 0; // allow the same logic to be run next month
-        } else {
-          // User has a multi-month recurring subscription
-          // and it renewed in the previous calendar month.
-          // don't need to check for perks again for this many months
-          // (subtract 1 because we should have run this when the payment was taken last month)
-          plan.consecutive.offset = planMonthsLength - 1;
-        }
-        if (!plan.gift && plan.customerId.indexOf('Gift') === -1) {
-          // Don't process gifted subs here, since they already got their perks.
-
-          // eslint-disable-next-line no-await-in-loop
-          await plan.incrementPerkCounterAndReward(user._id, planMonthsLength);
-        }
-      }
-    }
+    plan.consecutive.count += elapsedMonths;
+    plan.cumulativeCount += elapsedMonths;
+    await plan.rewardPerks(user._id, elapsedMonths);
   }
 }
 
@@ -135,8 +87,6 @@ function removeTerminatedSubscription (user) {
 
   _.merge(plan.consecutive, {
     count: 0,
-    offset: 0,
-    gemCapExtra: 0,
   });
 
   user.markModified('purchased.plan');
@@ -283,8 +233,6 @@ export async function cron (options = {}) {
 
   if (user.isSubscribed()) {
     await grantEndOfTheMonthPerks(user, now);
-  } if (!user.isSubscribed() && user.purchased.plan.perkMonthCount > 0) {
-    user.purchased.plan.perkMonthCount = 0;
   }
 
   const { plan } = user.purchased;
diff --git a/website/server/libs/payments/stripe/oneTimePayments.js b/website/server/libs/payments/stripe/oneTimePayments.js
index 616d029f73b..f126d731e39 100644
--- a/website/server/libs/payments/stripe/oneTimePayments.js
+++ b/website/server/libs/payments/stripe/oneTimePayments.js
@@ -95,7 +95,10 @@ export async function applyGemPayment (session) {
   };
 
   if (gift) {
-    if (gift.type === 'subscription') method = 'createSubscription';
+    if (gift.type === 'subscription') {
+      method = 'createSubscription';
+      data.autoRenews = false;
+    }
     data.paymentMethod = 'Gift';
 
     const member = await User.findById(gift.uuid).exec();
diff --git a/website/server/libs/payments/stripe/subscriptions.js b/website/server/libs/payments/stripe/subscriptions.js
index 886a63df718..360ba64d8c3 100644
--- a/website/server/libs/payments/stripe/subscriptions.js
+++ b/website/server/libs/payments/stripe/subscriptions.js
@@ -35,7 +35,12 @@ export async function checkSubData (sub, isGroup = false, coupon) {
 
 export async function applySubscription (session) {
   const { metadata, customer: customerId, subscription: subscriptionId } = session;
-  const { sub: subStringified, userId, groupId } = metadata;
+  const {
+    sub: subStringified,
+    userId,
+    groupId,
+    gift,
+  } = metadata;
 
   const sub = subStringified ? JSON.parse(subStringified) : undefined;
 
@@ -49,6 +54,7 @@ export async function applySubscription (session) {
     sub,
     groupId,
     subscriptionId,
+    autoRenews: !gift,
   });
 }
 
diff --git a/website/server/libs/payments/subscriptions.js b/website/server/libs/payments/subscriptions.js
index 33dd3421e76..4936e2b19ef 100644
--- a/website/server/libs/payments/subscriptions.js
+++ b/website/server/libs/payments/subscriptions.js
@@ -155,10 +155,6 @@ async function prepareSubscriptionValues (data) {
 
   const { plan } = recipient.purchased;
 
-  if (isNewSubscription) {
-    plan.perkMonthCount = 0;
-  }
-
   if (data.gift || !autoRenews) {
     if (plan.customerId && !plan.dateTerminated) { // User has active plan
       plan.extraMonths += months;
@@ -204,18 +200,11 @@ async function prepareSubscriptionValues (data) {
       owner: data.user._id,
     });
 
-    // allow non-override if a plan was previously used
-    if (!plan.gemsBought) {
-      plan.gemsBought = 0;
-    }
-
-    if (!plan.dateCreated) {
-      plan.dateCreated = today;
-    }
-
-    if (!plan.mysteryItems) {
-      plan.mysteryItems = [];
-    }
+    _.defaults(plan, {
+      gemsBought: 0,
+      dateCreated: today,
+      mysteryItems: [],
+    });
 
     if (data.subscriptionId) {
       plan.subscriptionId = data.subscriptionId;
@@ -251,22 +240,6 @@ async function createSubscription (data) {
     emailType,
     isNewSubscription,
   } = await prepareSubscriptionValues(data);
-
-  // Block sub perks
-  if (months > 1 && (!data.gift || !isNewSubscription)) {
-    if (!data.gift && !groupId) {
-      plan.consecutive.offset = block.months;
-    }
-  } else if (months === 1) {
-    plan.consecutive.offset = 0;
-  }
-  if (months > 1 || data.gift) {
-    await plan.incrementPerkCounterAndReward(recipient._id, months);
-  } else {
-    // Make sure the perkMonthCount field is initialized.
-    await plan.incrementPerkCounterAndReward(recipient._id, 0);
-  }
-
   if (recipient !== group) {
     recipient.items.pets['Jackalope-RoyalPurple'] = 5;
     recipient.markModified('items.pets');
@@ -278,6 +251,23 @@ async function createSubscription (data) {
     txnEmail(data.user, emailType);
   }
 
+  if (months > 0) {
+    if (block.months === 12) {
+      recipient.purchased.plan.consecutive.gemCapExtra = 26;
+    }
+    const { lastHourglassReceived } = recipient.purchased.plan.consecutive;
+
+    if (block.months === 12 && autoRenews && !data.gift
+      && !recipient.purchased.plan.hourglassPromoReceived) {
+      recipient.purchased.plan.hourglassPromoReceived = new Date();
+      await plan.updateHourglasses(recipient._id, 12, 'subscription_bonus');
+    }
+    if (isNewSubscription
+      && (lastHourglassReceived === null || lastHourglassReceived === undefined || !moment().isSame(lastHourglassReceived, 'month'))) {
+      await plan.updateHourglasses(recipient._id, 1, 'subscription_perks');
+    }
+  }
+
   if (!group && !data.promo) data.user.purchased.txnCount += 1;
 
   if (!data.promo) {
diff --git a/website/server/models/subscriptionPlan.js b/website/server/models/subscriptionPlan.js
index a6c540a10cf..4943705e898 100644
--- a/website/server/models/subscriptionPlan.js
+++ b/website/server/models/subscriptionPlan.js
@@ -3,9 +3,6 @@ import validator from 'validator';
 import baseModel from '../libs/baseModel';
 import { TransactionModel as Transaction } from './transaction';
 
-// multi-month subscriptions are for multiples of 3 months
-const SUBSCRIPTION_BASIC_BLOCK_LENGTH = 3;
-
 export const schema = new mongoose.Schema({
   planId: String,
   subscriptionId: String,
@@ -18,7 +15,6 @@ export const schema = new mongoose.Schema({
   dateUpdated: Date,
   dateCurrentTypeCreated: Date,
   extraMonths: { $type: Number, default: 0 },
-  perkMonthCount: { $type: Number, default: -1 },
   gemsBought: { $type: Number, default: 0 },
   mysteryItems: { $type: Array, default: () => [] },
   lastReminderDate: Date, // indicates the last time a subscription reminder was sent
@@ -28,6 +24,8 @@ export const schema = new mongoose.Schema({
   // indicates when the queue server should process this subscription again.
   nextPaymentProcessing: Date,
   nextBillingDate: Date, // Next time google will bill this user.
+  hourglassPromoReceived: Date,
+  cumulativeCount: { $type: Number, default: 0 },
   consecutive: {
     count: { $type: Number, default: 0 },
     // when gifted subs, offset++ for each month. offset-- each new-month (cron).
@@ -35,6 +33,7 @@ export const schema = new mongoose.Schema({
     offset: { $type: Number, default: 0 },
     gemCapExtra: { $type: Number, default: 0 },
     trinkets: { $type: Number, default: 0 },
+    lastHourglassReceived: Date,
   },
 }, {
   strict: true,
@@ -50,36 +49,18 @@ schema.plugin(baseModel, {
   _id: false,
 });
 
-schema.methods.incrementPerkCounterAndReward = async function incrementPerkCounterAndReward
+schema.methods.rewardPerks = async function rewardPerks
 (userID, adding) {
-  let addingNumber = adding;
+  let perks = adding;
   if (typeof adding === 'string' || adding instanceof String) {
-    addingNumber = parseInt(adding, 10);
-  }
-  const isSingleMonthPlan = this.planId === 'basic_earned' || this.planId === 'group_plan_auto' || this.planId === 'group_monthly';
-  // if perkMonthCount wasn't used before, initialize it.
-  if (this.perkMonthCount === undefined || this.perkMonthCount === -1) {
-    if (isSingleMonthPlan && this.consecutive.count > 0) {
-      this.perkMonthCount = (this.consecutive.count - 1) % SUBSCRIPTION_BASIC_BLOCK_LENGTH;
-    } else {
-      this.perkMonthCount = 0;
-    }
-  } else if (isSingleMonthPlan) {
-    const expectedPerkMonthCount = (this.consecutive.count - 1) % SUBSCRIPTION_BASIC_BLOCK_LENGTH;
-    if (this.perkMonthCount === (expectedPerkMonthCount - 1)) {
-      // User was affected by a bug that makes their perkMonthCount off by one
-      this.perkMonthCount += 1;
-    }
+    perks = parseInt(adding, 10);
   }
-  this.perkMonthCount += addingNumber;
 
-  const perks = Math.floor(this.perkMonthCount / 3);
   if (perks > 0) {
-    this.consecutive.gemCapExtra += 5 * perks; // 5 extra Gems every 3 months
-    // cap it at 50 (hard 25 limit + extra 25)
-    if (this.consecutive.gemCapExtra > 25) this.consecutive.gemCapExtra = 25;
-    this.perkMonthCount -= (perks * 3);
-    // one Hourglass every 3 months
+    this.consecutive.gemCapExtra += 2 * perks; // 2 extra Gems every month
+    // cap it at 50 (hard 24 limit + extra 26)
+    if (this.consecutive.gemCapExtra > 26) this.consecutive.gemCapExtra = 26;
+    // one Hourglass every month
     await this.updateHourglasses(userID, perks, 'subscription_perks'); // eslint-disable-line no-await-in-loop
   }
 };
@@ -92,6 +73,7 @@ schema.methods.updateHourglasses = async function updateHourglasses (
   referenceText,
 ) {
   this.consecutive.trinkets += amount;
+  this.consecutive.lastHourglassReceived = new Date();
   await Transaction.create({
     currency: 'hourglasses',
     userId,
diff --git a/website/server/models/transaction.js b/website/server/models/transaction.js
index 608ddcae773..4356783c7f0 100644
--- a/website/server/models/transaction.js
+++ b/website/server/models/transaction.js
@@ -5,7 +5,7 @@ import baseModel from '../libs/baseModel';
 const { Schema } = mongoose;
 
 export const currencies = ['gems', 'hourglasses'];
-export const transactionTypes = ['buy_money', 'buy_gold', 'spend', 'gift_send', 'gifted_with_money', 'gift_receive', 'debug', 'create_challenge', 'create_bank_challenge', 'create_guild', 'change_class', 'rebirth', 'release_pets', 'release_mounts', 'reroll', 'contribution', 'subscription_perks', 'admin_update_balance', 'admin_update_hourglasses'];
+export const transactionTypes = ['buy_money', 'buy_gold', 'spend', 'gift_send', 'gifted_with_money', 'gift_receive', 'debug', 'create_challenge', 'create_bank_challenge', 'create_guild', 'change_class', 'rebirth', 'release_pets', 'release_mounts', 'reroll', 'contribution', 'subscription_perks', 'subscription_bonus', 'admin_update_balance', 'admin_update_hourglasses'];
 
 export const schema = new Schema({
   currency: { $type: String, enum: currencies, required: true },