diff --git a/website/client/src/assets/scss/form.scss b/website/client/src/assets/scss/form.scss
index c5cf0b61f7..8e21bc06a4 100644
--- a/website/client/src/assets/scss/form.scss
+++ b/website/client/src/assets/scss/form.scss
@@ -82,7 +82,7 @@ input, textarea, input.form-control, textarea.form-control {
   }
 }
 
-/** Colored Input-Groups, ignoring checklist */
+// Colored Input-Groups, ignoring checklist
 .input-group:not(.checklist-group) {
   border-radius: 2px;
   border: solid 1px $gray-400;
@@ -100,7 +100,7 @@ input, textarea, input.form-control, textarea.form-control {
   }
 }
 
-/** Generic Input Group Styles */
+// Generic Input Group Styles
 .input-group {
   height: 2rem;
 
@@ -179,10 +179,11 @@ input, textarea, input.form-control, textarea.form-control {
   padding-left: 0px;
 }
 
-// Checkboxes and radios
+// used in checkboxes and radios
 $bg-focused-active-control: #4f2993;
 $bg-disabled-control: #34303a;
 
+// custom control
 .custom-control {
   margin-bottom: .5rem;
 
@@ -205,6 +206,7 @@ $bg-disabled-control: #34303a;
   }
 }
 
+// checkboxes
 .custom-checkbox {
   .custom-control-label::before {
     border-radius: 2px;
@@ -280,11 +282,26 @@ $bg-disabled-control: #34303a;
   padding-left: 36px;
 }
 
+// radio buttons
+$bg-color: $purple-400;
+
+// svg for the purple dot
 @mixin custom-radio-checked-icon ($bg-color) {
   background-image: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$bg-color}'/%3E%3C/svg%3E"), "#", "%23");
 }
 
 .custom-radio .custom-control-input {
+  opacity: 0;
+  margin: 15px 25px 34px 25px;
+
+  // outside circle
+  &:checked~.custom-control-label::before {
+    background-color: $gray-700;
+    background-size: 12px 12px;
+    border-color: $purple-400;
+  }
+
+  // checked indicator
   &:checked~.custom-control-label::after {
     @include custom-radio-checked-icon($purple-400);
     width: 18px;
@@ -292,51 +309,84 @@ $bg-disabled-control: #34303a;
     background-size: 12px 12px;
   }
 
-  &:checked~.custom-control-label::before {
-    background-color: $gray-700;
-    background-size: 12px 12px;
-    border-color: $purple-400;
-  }
-
   &:active~.custom-control-label::before {
     background-color: inherit;
   }
 
-  &:focus:not(:checked):not(:disabled)~.custom-control-label::before, &:active:not(:checked):not(:disabled)~.custom-control-label::before  {
-    box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1);
+// focus / not checked / not disabled
+  &:focus:not(:checked):not(:disabled)~.custom-control-label::before,
+  &:active:not(:checked):not(:disabled)~.custom-control-label::before  {
+    border: 2px solid $gray-300;
+    box-shadow: 0 0 0 2px rgba(146, 92, 243, 0.5);
   }
 
-  &:focus:checked:not(:disabled)~.custom-control-label::before, &:active:checked:not(:disabled)~.custom-control-label::before  {
-    box-shadow: 0 0 0 6px rgba($bg-focused-active-control, 0.1);
-    border-color: $purple-400;
-    background-color: rgba($bg-focused-active-control, 0.1);
+// focus / checked / not disabled
+  &:focus:checked:not(:disabled)~.custom-control-label::before,
+  &:active:checked:not(:disabled)~.custom-control-label::before  {
+    border: 2px solid $purple-400;
+    box-shadow: 0 0 0 2px rgba(146, 92, 243, 0.5);
   }
 
-  &:disabled:checked~.custom-control-label::before {
-    border-color: $gray-400;
-    background-color: transparent;
+// hover / not checked / not disabled
+  &:hover:not(:checked):not(:disabled)~.custom-control-label::before,
+  &:active:not(:checked):not(:disabled)~.custom-control-label::before  {
+    width: 18px;
+    height: 18px;
+    background: 50%/50% 50% no-repeat;
+    @include custom-radio-checked-icon($purple-400);
+    background-size: 12px 12px;
+    border: solid 2px $purple-400;
   }
 
-  &:disabled:checked~.custom-control-label::after {
+// hover / checked / not disabled
+    &:hover:checked:not(:disabled)~.custom-control-label::before,
+    &:active::checked:not(:disabled)~.custom-control-label::before  {
+    width: 18px;
+    height: 18px;
+    background: 50%/50% 50% no-repeat;
     @include custom-radio-checked-icon($gray-400);
+    background-size: 12px 12px;
+    border: solid 2px $purple-300;
+  }
+
+// disabled / checked / before
+  &:disabled:checked~.custom-control-label::before {
+    background: 50%/50% 50% no-repeat;
+    @include custom-radio-checked-icon($gray-300);
+    border: 2px solid $gray-200;
+    background-color: transparent;
+    opacity: 0.75;
+  }
+
+// disabled / checked / after
+  &:disabled:checked~.custom-control-label::after {
+    background: 50%/50% 50% no-repeat;
+    @include custom-radio-checked-icon($gray-300);
     width: 18px;
     height: 18px;
     background-size: 12px 12px;
   }
 
+// disabled / not checked / before
   &:disabled:not(:checked)~.custom-control-label::before {
-    border-color: $gray-300;
-    background-color: transparent;
+    background-color: $gray-600;
+    border: 2px solid $gray-200;
   }
 
-  &:focus:disabled~.custom-control-label::before, &:active:disabled~.custom-control-label::before  {
-    box-shadow: 0 0 0 6px rgba($bg-disabled-control, 0.1);
-    border-color: $gray-300;
+// focus and disabled / not checked / before
+  &:focus:disabled~.custom-control-label::before,
+  &:active:disabled~.custom-control-label::before  {
     background-color: rgba($bg-disabled-control, 0.1);
+    box-shadow: 0 0 0 6px rgba($bg-disabled-control, 0.1);
+    border: 2px solid $gray-200;
   }
 
-  &:focus:disabled:checked~.custom-control-label::before, &:active:disabled:checked~.custom-control-label::before  {
-    border-color: $gray-400;
+// focus and disabled / checked / before
+  &:focus:disabled:checked~.custom-control-label::before,
+  &:active:disabled:checked~.custom-control-label::before  {
+    background: 50%/50% 50% no-repeat;
+    @include custom-radio-checked-icon($gray-300);
+    border: 2px solid $gray-200;
   }
 }
 
diff --git a/website/client/src/assets/svg/big-gift.svg b/website/client/src/assets/svg/big-gift.svg
new file mode 100644
index 0000000000..1d756e4dfa
--- /dev/null
+++ b/website/client/src/assets/svg/big-gift.svg
@@ -0,0 +1,27 @@
+<svg width="176" height="67" viewBox="0 0 176 67" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#77F4C7" d="M35.667 11.667 40 9.5l-4.333-2.167L33.5 3l-2.167 4.333L27 9.5l4.333 2.167L33.5 16z"/>
+        <path fill="#BDA8FF" d="M24.667 38.667 30 36l-5.333-2.667L22 28l-2.667 5.333L14 36l5.333 2.667L22 44z"/>
+        <path fill="#8EEDF6" d="M35.667 63.667 39 62l-3.333-1.667L34 57l-1.667 3.333L29 62l3.333 1.667L34 67z"/>
+        <path fill="#FFBE5D" d="M6.667 49.667 10 48l-3.333-1.667L5 43l-1.667 3.333L0 48l3.333 1.667L5 53z"/>
+        <path fill="#FFB6B8" d="M5.667 20.667 8 19.5l-2.333-1.167L4.5 16l-1.167 2.333L1 19.5l2.333 1.167L4.5 23z"/>
+        <g>
+            <path fill="#77F4C7" d="M140.333 11.667 136 9.5l4.333-2.167L142.5 3l2.167 4.333L149 9.5l-4.333 2.167L142.5 16z"/>
+            <path fill="#BDA8FF" d="M151.333 38.667 146 36l5.333-2.667L154 28l2.667 5.333L162 36l-5.333 2.667L154 44z"/>
+            <path fill="#8EEDF6" d="M140.333 63.667 137 62l3.333-1.667L142 57l1.667 3.333L147 62l-3.333 1.667L142 67z"/>
+            <path fill="#FFBE5D" d="M169.333 49.667 166 48l3.333-1.667L171 43l1.667 3.333L176 48l-3.333 1.667L171 53z"/>
+            <path fill="#FFB6B8" d="M170.333 20.667 168 19.5l2.333-1.167L171.5 16l1.167 2.333L175 19.5l-2.333 1.167L171.5 23z"/>
+        </g>
+        <g>
+            <path d="M81.117 13.904c-2.139-4.838-6.274-9.113-11.25-9.324-4.976-.211-7.828 3.779-6.367 7.309 1.461 3.53 4.94 4.177 16.227 7.202 3.204.858 3.528-.35 1.39-5.187z" stroke="#22AEB7" stroke-width="4"/>
+            <path d="M93.833 13.904c2.138-4.838 6.273-9.113 11.25-9.324 4.975-.211 7.828 3.779 6.367 7.309-1.462 3.53-4.94 4.177-16.227 7.202-3.205.858-3.528-.35-1.39-5.187z" stroke="#38C9C6" stroke-width="4"/>
+            <path d="M87.128 11c-9.738 0-3.907 11.145 0 11.145 3.908 0 9.74-11.145 0-11.145z" fill="#46DDDA"/>
+            <path fill="#6133B4" d="M62 33h52v34H62zM56 21h64v12H56z"/>
+            <path fill-opacity=".5" fill="#FFF" style="mix-blend-mode:soft-light" d="M32 30h26v34H32z" transform="translate(56 3)"/>
+            <path fill="#8EEDF6" d="M88 33h6v34h-6z"/>
+            <path fill="#3BCAD7" d="M82 33h6v34h-6zM76 21h12v12H76z"/>
+            <path fill="#8EEDF6" d="M88 21h12v12H88z"/>
+            <path fill-opacity=".2" fill="#000" style="mix-blend-mode:multiply" d="M6 30h26v6H6zM20 18h12v6H20zM0 24h20v6H0zM44 24h20v6H44zM32 18h12v6H32zM6 58h26v6H6zM32 30h26v6H32zM32 58h26v6H32z" transform="translate(56 3)"/>
+        </g>
+    </g>
+</svg>
diff --git a/website/client/src/assets/svg/close.svg b/website/client/src/assets/svg/close.svg
index 5070218c06..398440da99 100644
--- a/website/client/src/assets/svg/close.svg
+++ b/website/client/src/assets/svg/close.svg
@@ -1,5 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
-    <g fill="none" fill-rule="evenodd" stroke="#A5A1AC" stroke-width="2">
-        <path d="M1 11L11 1M11 11L1 1"/>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icon/Close</title>
+    <g id="Modals" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Shop-Modals" transform="translate(-183.000000, -655.000000)" fill="#878190" fill-rule="nonzero">
+            <g id="Icon/Close" transform="translate(183.000000, 655.000000)">
+                <polygon id="Mask" points="12.1973467 2 14 3.80265326 9.80187117 8 14 12.1973467 12.1973467 14 8 9.80187117 3.80265326 14 2 12.1973467 6.19812883 8 2 3.80265326 3.80265326 2 8 6.19812883"></polygon>
+            </g>
+        </g>
     </g>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/website/client/src/components/group-plans/createGroupModalPages.vue b/website/client/src/components/group-plans/createGroupModalPages.vue
index 2b314834ad..b354f6ac63 100644
--- a/website/client/src/components/group-plans/createGroupModalPages.vue
+++ b/website/client/src/components/group-plans/createGroupModalPages.vue
@@ -122,6 +122,11 @@
     font-weight: bold;
   }
 
+  .custom-control-input {
+    z-index: -1;
+    opacity: 0;
+  }
+
   .box:hover {
     cursor: pointer;
     opacity: 0.7;
diff --git a/website/client/src/components/header/menu.vue b/website/client/src/components/header/menu.vue
index d77c6f8e0d..fbfdaed141 100644
--- a/website/client/src/components/header/menu.vue
+++ b/website/client/src/components/header/menu.vue
@@ -3,7 +3,7 @@
     <creator-intro />
     <profileModal />
     <report-flag-modal />
-    <send-gems-modal />
+    <send-gift-modal />
     <select-user-modal />
     <b-navbar
       id="habitica-menu"
@@ -747,7 +747,7 @@ import creatorIntro from '../creatorIntro';
 import notificationMenu from './notificationsDropdown';
 import profileModal from '../userMenu/profileModal';
 import reportFlagModal from '../chat/reportFlagModal';
-import sendGemsModal from '@/components/payments/sendGemsModal';
+import sendGiftModal from '@/components/payments/sendGiftModal';
 import selectUserModal from '@/components/payments/selectUserModal';
 import sync from '@/mixins/sync';
 import userDropdown from './userDropdown';
@@ -759,7 +759,7 @@ export default {
     notificationMenu,
     profileModal,
     reportFlagModal,
-    sendGemsModal,
+    sendGiftModal,
     selectUserModal,
     userDropdown,
   },
diff --git a/website/client/src/components/payments/buttons/list.vue b/website/client/src/components/payments/buttons/list.vue
index 5f06500061..d8e5f7952d 100644
--- a/website/client/src/components/payments/buttons/list.vue
+++ b/website/client/src/components/payments/buttons/list.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="payments-column mx-auto mt-auto">
+    <h4>{{ $t('choosePaymentMethod') }}</h4>
     <button
       v-if="stripeAvailable"
       class="btn btn-primary payment-button payment-item with-icon"
@@ -80,6 +81,13 @@
       cursor: default !important;
     }
   }
+
+  h4 {
+    font-size: 0.875rem;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 1rem;
+  }
 </style>
 
 <script>
diff --git a/website/client/src/components/payments/selectUserModal.vue b/website/client/src/components/payments/selectUserModal.vue
index 16a624dd0a..818b98c621 100644
--- a/website/client/src/components/payments/selectUserModal.vue
+++ b/website/client/src/components/payments/selectUserModal.vue
@@ -14,15 +14,44 @@
     </div>
     <h2
       v-else
-      class="ml-2"
+      class="d-flex flex-column mx-auto align-items-center"
     >
-      {{ $t('sendGift') }}
+      {{ $t('sendAGift') }}
     </h2>
+    <div
+      v-if="currentEvent && currentEvent.promo === 'g1g1'"
+      class="g1g1-margin d-flex flex-column align-items-center"
+    >
+    <div
+      class="svg-big-gift"
+      v-once
+      v-html="icons.bigGift"
+    ></div>
+    </div>
+    <div
+    v-else
+    class="d-flex flex-column align-items-center">
+      <div
+        class="svg-big-gift"
+        v-once
+        v-html="icons.bigGift"
+      ></div>
+    </div>
     <div class="d-flex flex-column align-items-center">
       <div
-        class="modal-close"
+        v-if="currentEvent && currentEvent.promo === 'g1g1'"
+        class="g1g1-modal-close"
         @click="close()"
       >
+        <div
+          class="g1g1-svg-icon"
+          v-html="icons.close"
+        ></div>
+      </div>
+      <div
+      v-else
+      class="modal-close"
+      @click="close()">
         <div
           class="svg-icon"
           v-html="icons.close"
@@ -42,6 +71,7 @@
             v-model="userSearchTerm"
             class="form-control"
             type="text"
+            ref="textBox"
             :placeholder="$t('usernameOrUserId')"
             :class="{
               'input-valid': foundUser._id,
@@ -70,15 +100,20 @@
             <div
               v-else
             >
-              {{ $t('selectGift') }}
+              {{ $t('next') }}
             </div>
           </button>
-          <a
-            class="cancel-link mx-auto mt-3"
-            @click="close()"
+          <div
+          v-if="currentEvent && currentEvent.promo ==='g1g1'"
+          class="g1g1-cancel d-flex justify-content-center"
+          v-html="$t('cancel')"
+          @click="close()"
           >
-            {{ $t('cancel') }}
-          </a>
+          {{ $t('cancel') }}
+        </div>
+        <div
+        v-else>
+        </div>
         </div>
       </div>
     </div>
@@ -110,13 +145,16 @@
   @import '~@/assets/scss/mixins.scss';
 
   #select-user-modal {
+    .modal-content {
+      width:448px;
+    }
+
     .input-group {
       margin-top: 0rem;
     }
 
     .modal-dialog {
-      width: 29.5rem;
-      margin-top: 25vh;
+      width: 448px;
     }
 
     .modal-footer {
@@ -126,7 +164,16 @@
         margin: 0rem 0.25rem 0.25rem 0.25rem;
       }
     }
-  }
+
+    body.modal-open .modal {
+      display: flex !important;
+      height: 100%;
+    }
+
+    body.modal-open .modal .modal-dialog {
+        margin: auto;
+    }
+}
 </style>
 
 <style lang="scss" scoped>
@@ -146,12 +193,12 @@
 
   .g1g1 {
     background-image: url('~@/assets/images/g1g1-send.png');
-    background-size: 472px 152px;
-    width: 470px;
+    background-size: 446px 152px;
+    width: 446px;
     height: 152px;
-    margin: -1rem 0rem 0rem -1rem;
-    border-radius: 0.3rem 0.3rem 0rem 0rem;
-    padding: 1.5rem;
+    margin: -16px 0px 0px -16px;
+    border-radius: 4.8px 4.8px 0px 0px;
+    padding: 24px;
     color: $white;
 
     h1 {
@@ -169,6 +216,16 @@
     }
   }
 
+  .g1g1-margin {
+    margin-top: 24px;
+  }
+
+  .g1g1-cancel {
+    margin-top: 16px;
+    color: $blue-10;
+    cursor: pointer;
+  }
+
   .g1g1-fine-print {
     color: $gray-100;
     background-color: $gray-700;
@@ -176,6 +233,29 @@
     line-height: 1.33;
   }
 
+  .g1g1-modal-close {
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    padding: 4px;
+    right: 16px;
+    top: 16px;
+    cursor: pointer;
+
+    .g1g1-svg-icon {
+      width: 12px;
+      height: 12px;
+
+      & ::v-deep svg path {
+        fill: #FFFFFF;
+      }
+    }
+  }
+
+  .g1g1-modal-dialog {
+    margin-top: 10vh;
+  }
+
   .input-error {
     color: $red-50;
     font-size: 90%;
@@ -192,6 +272,18 @@
     border-color: $purple-500;
   }
 
+  h2 {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+    color: $purple-300;
+    padding-top: 1rem;
+  }
+
+  .svg-big-gift {
+    width: 176px;
+    height: 64px;
+  }
+
   .modal-close {
     position: absolute;
     width: 18px;
@@ -206,14 +298,17 @@
       height: 12px;
     }
   }
+
 </style>
 
 <script>
+// import { nextTick } from 'vue'; // may not need this? I don't know!
 import debounce from 'lodash/debounce';
 import find from 'lodash/find';
 import isUUID from 'validator/lib/isUUID';
 import { mapState } from '@/libs/store';
 import closeIcon from '@/assets/svg/close.svg';
+import bigGiftIcon from '@/assets/svg/big-gift.svg';
 
 export default {
   data () {
@@ -223,6 +318,7 @@ export default {
       foundUser: {},
       icons: Object.freeze({
         close: closeIcon,
+        bigGift: bigGiftIcon,
       }),
     };
   },
@@ -281,7 +377,7 @@ export default {
       this.foundUser = result;
     }, 500),
     selectUser () {
-      this.$root.$emit('habitica::send-gems', this.foundUser);
+      this.$root.$emit('habitica::send-gift', this.foundUser);
       this.close();
     },
     onHide () {
diff --git a/website/client/src/components/payments/sendGiftModal.vue b/website/client/src/components/payments/sendGiftModal.vue
new file mode 100644
index 0000000000..838015fe6a
--- /dev/null
+++ b/website/client/src/components/payments/sendGiftModal.vue
@@ -0,0 +1,659 @@
+<template>
+  <b-modal
+    id="send-gift"
+    :hide-footer="true"
+    :hide-header="true"
+    size="md"
+    @hide="onHide()"
+  >
+    <div>
+      <!-- header -->
+      <div
+        class="modal-close"
+        @click="close()"
+      >
+        <div
+          class="icon-close"
+          v-html="icons.closeIcon"
+        >
+        </div>
+      </div>
+      <div>
+        <h2 class="d-flex flex-column mx-auto align-items-center">
+          {{ $t('sendAGift') }}
+        </h2>
+      </div>
+
+      <!-- user avatar -->
+      <div
+        v-if="userReceivingGift"
+        class="modal-body"
+      >
+        <avatar
+          :member="userReceivingGift"
+          :hideClassBadge="true"
+          class="d-flex flex-column mx-auto align-items-center"
+        />
+        <div class="avatar-spacer"></div>
+        <div class="d-flex flex-column mx-auto align-items-center display-name">
+          <!-- user display name and username -->
+          <user-link
+            :user-id="displayName"
+            :name="displayName"
+            :backer="userBacker"
+            :contributor="userContributor"
+            :class="display-name"
+          />
+        </div>
+        <div class="d-flex flex-column mx-auto align-items-center user-name">
+          @{{ userName }}
+        </div>
+      </div>
+
+      <!-- menu area -->
+      <div class="row">
+        <div class="col-md-8 offset-md-2 text-center nav">
+          <div
+            class="nav-link"
+            :class="{active: selectedPage === 'subscription'}"
+            @click="selectPage('subscription')"
+          >
+            {{ $t('subscription') }}
+          </div>
+          <div
+            class="nav-link"
+            :class="{active: selectedPage !== 'subscription'}"
+            @click="selectPage('buyGems')"
+          >
+            {{ $t('gems') }}
+          </div>
+        </div>
+      </div>
+
+      <!-- subscriber block -->
+      <subscription-options
+        v-show="selectedPage === 'subscription'"
+        class="subscribe-option"
+        :userReceivingGift="userReceivingGift"
+      />
+
+      <!-- gem block -->
+      <div
+        v-show="selectedPage === 'buyGems'"
+      >
+        <div class="gem-group">
+          <!-- buy gems with money -->
+          <label v-once>
+            {{ $t('howManyGemsPurchase') }}
+          </label>
+          <div class="d-flex flex-row align-items-center justify-content-center">
+            <div
+              class="gray-circle"
+              @click="gift.gems.amount <= 0
+                ? gift.gems.amount = 0
+                : gift.gems.amount--"
+            >
+              <div
+                class="icon-negative"
+                v-html="icons.negativeIcon"
+              ></div>
+            </div>
+            <div class="input-group">
+              <div class="input-group-prepend input-group-icon align-items-center">
+                <div
+                  class="icon-gem"
+                  v-html="icons.gemIcon"
+                ></div>
+              </div>
+              <input
+                id="gemsForm"
+                v-model.number="gift.gems.amount"
+                class="form-control"
+                max="9999"
+              >
+            </div>
+            <div
+              class="gray-circle"
+              @click="gift.gems.amount++"
+            >
+              <div
+                class="icon-positive"
+                v-html="icons.positiveIcon"
+              ></div>
+            </div>
+          </div>
+
+          <!-- the word "total" -->
+          <div class="buy-gem-total">
+            {{ $t('sendGiftTotal') }}
+          </div>
+
+          <!-- the actual dollar amount -->
+          <div class="buy-gem-amount">
+            <span>
+              {{ formatter.format(totalGems) }}
+            </span>
+          </div>
+
+          <!-- change to sending own gems page -->
+          <div
+            :class="{active: selectedPage === 'ownGems'}"
+            class="gem-state-change"
+            @click="selectPage('ownGems')"
+          >
+            {{ $t('wantToSendOwnGems') }}
+          </div>
+        </div>
+
+        <!-- paying for gems -->
+        <payments-buttons
+          class="payment-buttons"
+          :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}"
+        />
+      </div>
+    </div>
+    <!-- send gems from balance -->
+    <div
+      v-show="selectedPage === 'ownGems'"
+    >
+      <div class="gem-group">
+        <label v-once>
+          {{ $t('howManyGemsSend') }}
+        </label>
+        <div class="d-flex align-items-center justify-content-center">
+          <div
+            class="gray-circle"
+            @click="gift.gems.amount <= 0
+              ? gift.gems.amount = 0
+              : gift.gems.amount--"
+          >
+            <div
+              class="icon-negative"
+              v-html="icons.negativeIcon"
+            ></div>
+          </div>
+          <div class="input-group">
+            <div class="input-group-prepend input-group-icon align-items-center">
+              <div
+                class="icon-gem"
+                v-html="icons.gemIcon"
+              ></div>
+            </div>
+            <input
+              id="gemsForm"
+              v-model="gift.gems.amount"
+              class="form-control"
+              :max="maxGems"
+            >
+          </div>
+          <div
+            class="gray-circle"
+            @click="gift.gems.amount < maxGems
+              ? gift.gems.amount++
+              : gift.gems.amount = maxGems"
+          >
+            <div
+              class="icon-positive"
+              v-html="icons.positiveIcon"
+            ></div>
+          </div>
+        </div>
+        <div class="align-items-middle">
+          <div class="d-flex justify-content-center align-items-middle">
+            <span class="balance-text">
+              {{ $t('yourBalance') }}
+            </span>
+            <span
+              class="icon-gem balance-gem-margin"
+              style="display: inline-block;"
+              v-html="icons.gemIcon"
+            ></span>
+            <span
+              class="balance-gems"
+            >
+              {{ maxGems }}
+            </span>
+          </div>
+        </div>
+        <div class="d-flex flex-column justify-content-center align-items-middle mt-3">
+          <button
+            v-if="fromBal"
+            class="btn btn-primary mx-auto mt-2"
+            type="submit"
+            :disabled="sendingInProgress"
+            @click="sendGift()"
+          >
+            {{ $t("send") }}
+          </button>
+        </div>
+
+        <!-- change to buying gems page -->
+        <div
+          :class="{active: selectedPage === 'buyGems'}"
+          class="gem-state-change"
+          @click="selectPage('buyGems')"
+        >
+          {{ $t('needToPurchaseGems') }}
+        </div>
+      </div>
+    </div>
+  </b-modal>
+</template>
+
+<style lang="scss">
+  @import '~@/assets/scss/mixins.scss';
+  #send-gift {
+    .modal-dialog {
+      max-width: 448px;
+    }
+
+    .modal-content {
+      width: 448px;
+      border-radius: 8px;
+      box-shadow: 0 14px 28px 0 rgba(26, 24, 29, 0.24), 0 10px 10px 0 rgba(26, 24, 29, 0.28);
+    }
+    .modal-body{
+      padding: 0px;
+    }
+
+    .modal-close {
+      position: absolute;
+      right: 16px;
+      top: 16px;
+      cursor: pointer;
+
+      .icon-close {
+        width: 18px;
+        height: 18px;
+        vertical-align: middle;
+
+        & ::v-deep svg path {
+          fill: #878190;
+        }
+         & :hover {
+          fill: #686274;
+        }
+      }
+    }
+    #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';
+
+  h2 {
+    color: $purple-300;
+    padding-top: 2rem;
+  }
+
+  .avatar-spacer {
+    height: 9px;
+  }
+
+  .display-name {
+    font-size: 0.875rem;
+    font-weight: bold;
+    line-height: 1.71;
+    margin: 0px 6px 0 20px;
+  }
+
+  .display-name a:hover{
+    text-decoration: none;
+  }
+
+  .user-name {
+    font-size: 0.75rem;
+    line-height: 1.33;
+    text-align: center;
+    color: $gray-100;
+    padding-bottom: 16px;
+  }
+
+  .row {
+    background-color: $gray-700;
+    margin: 0 0 0 0;
+    min-height: 32px;
+  }
+
+  .nav {
+    font-weight: bold;
+    font-size: 0.75rem;
+    min-height: 32px;
+    padding: 16px 0 0 0;
+    justify-content: center;
+  }
+
+  .nav-link {
+    color: $gray-100;
+    display: inline-block;
+    padding: 0px 8px 6px 8px;
+
+    &.active {
+    color: $purple-300;
+    border-bottom: 2px solid $purple-400;
+    }
+
+    &:hover {
+    color: $purple-300;
+    border-bottom: 2px solid $purple-400;
+    cursor: pointer;
+    }
+  }
+
+  .gem-group {
+    padding: 0 0 24px 0;
+    background-color: $gray-700;
+    margin: 0 0 0 0;
+    border-bottom-right-radius: 8px;
+    border-bottom-left-radius: 8px
+  }
+
+  label {
+    color: $gray-50;
+    font-size: 0.875rem;
+    font-weight: bold;
+    line-height: 1.71;
+    margin: 12px 0 16px 0;
+    width: 100%;
+    text-align: center;
+  }
+
+  .input-group {
+    width: 94px;
+    height: 32px;
+    margin: 0px 16px 0px 16px;
+    padding: 0;
+    border-radius: 2px;
+    border: solid 1px $gray-400;
+    background-color: $white;
+  }
+
+  .gray-circle {
+    border-radius: 100%;
+    border: solid 2px $gray-300;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+
+    &:hover {
+      border-color: $purple-400;
+    }
+  }
+
+  .gray-circle:hover{
+    .icon-positive, .icon-negative {
+      & ::v-deep svg path {
+        fill: $purple-400;
+      }
+    }
+  }
+
+  .icon-gem {
+    width: 16px;
+    height: 16px;
+    margin-bottom: 4px;
+  }
+
+  .icon-positive, .icon-negative {
+    width: 10px;
+    height: 10px;
+    margin: 4px auto;
+
+    & ::v-deep svg path {
+      fill: $gray-300;
+    }
+  }
+
+  .buy-gem-total {
+    font-size: 0.875rem;
+    font-weight: bold;
+    line-height: 1.71;
+    padding-top: 24px;
+    text-align: center;
+    height: 28px;
+  }
+
+  .buy-gem-amount {
+    font-size: 1.25rem;
+    font-weight: bold;
+    line-height: 1.4;
+    margin: 16px 0 24px 0;
+    text-align: center;
+    height: 28px;
+    color: $green-10;
+  }
+
+  .balance-text {
+    font-size: 0.75rem;
+    font-weight: bold;
+    color: $gray-100;
+    line-height: 1.33;
+    margin: 12px 0px 0px 70px;
+  }
+
+  .balance-gem-margin {
+    margin: 8px 4px 0px 8px;
+  }
+
+  .balance-gems {
+    font-size: 0.75rem;
+    color: $gray-100;
+    line-height: 1.33;
+    margin: 12px 71px 0px 4px;
+  }
+
+  .gem-state-change {
+    color: $blue-10;
+    font-size: 0.875rem;
+    min-height: 24px;
+    margin: 16px 0 0;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .subscribe-option {
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+    padding-bottom: 24px;
+  }
+
+  .payment-buttons {
+    padding: 24px 0;
+  }
+
+</style>
+
+<script>
+
+// libs imports
+import { mapState } from '@/libs/store';
+
+// mixins imports
+import paymentsMixin from '../../mixins/payments';
+
+// component imports
+import avatar from '../avatar';
+import userLink from '../userLink';
+import subscriptionOptions from '../settings/subscriptionOptions.vue';
+import paymentsButtons from '@/components/payments/buttons/list';
+
+// svg imports
+import closeIcon from '@/assets/svg/close.svg';
+import gemIcon from '@/assets/svg/gem.svg';
+import positiveIcon from '@/assets/svg/positive.svg';
+import negativeIcon from '@/assets/svg/negative.svg';
+
+export default {
+  components: {
+    avatar,
+    subscriptionOptions,
+    paymentsButtons,
+    userLink,
+  },
+  mixins: [
+    paymentsMixin,
+  ],
+  data () {
+    return {
+      subscription: {
+        key: '',
+      },
+      icons: Object.freeze({
+        closeIcon,
+        gemIcon,
+        positiveIcon,
+        negativeIcon,
+      }),
+      userReceivingGift: {
+        profile: '',
+      },
+      name: '',
+      display: '',
+      selectedPage: 'subscription',
+      gift: {
+        type: 'gems',
+        gems: {
+          amount: 0,
+          fromBalance: true,
+        },
+      },
+      sendingInProgress: false,
+      amazonPayments: {},
+      gemCost: 1,
+    };
+  },
+  computed: {
+    ...mapState({
+      userLoggedIn: 'user.data',
+    }),
+    userName () {
+      const userName = this.userReceivingGift.auth
+      && this.userReceivingGift.auth.local
+      && this.userReceivingGift.auth.local.username;
+      return userName;
+    },
+    displayName () {
+      const displayName = this.userReceivingGift.profile.name;
+      return displayName;
+    },
+    userBacker () {
+      const userBacker = this.userReceivingGift.backer;
+      return userBacker;
+    },
+    userContributor () {
+      const userContributor = this.userReceivingGift.contributor;
+      return userContributor;
+    },
+    tierIcon () {
+      if (this.isNPC) {
+        return this.icons.tierNPC;
+      }
+      return this.icons[`tier${this.level}`];
+    },
+    fromBal () {
+      return this.gift.type === 'gems' && this.gift.gems.fromBalance;
+    },
+    maxGems () {
+      const maxGems = this.fromBal ? this.userLoggedIn.balance * 4 : 9999;
+      return maxGems;
+    },
+    formatter () {
+      const formatter = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        minimumFractionDigits: 2,
+      });
+      return formatter;
+    },
+    totalGems () {
+      const totalGems = this.gift.gems.amount * 0.25;
+      return totalGems;
+    },
+    receiverName () {
+      if (
+        this.userReceivingGift.auth
+        && this.userReceivingGift.auth.local
+        && this.userReceivingGift.auth.local.username
+      ) {
+        return this.userReceivingGift.auth.local.username;
+      }
+      return this.userReceivingGift.profile.name;
+    },
+  },
+  watch: {
+    startingPage () {
+      this.selectedPage = this.startingPage;
+    },
+  },
+  mounted () {
+    this.$root.$on('habitica::send-gift', data => {
+      this.userReceivingGift = data;
+      if (this.$store.state.giftModalOptions.startingPage) {
+        this.selectedPage = this.$store.state.giftModalOptions.startingPage;
+        this.$store.state.giftModalOptions.startingPage = '';
+        this.selectPage(this.selectedPage);
+      } else {
+        this.selectPage(this.startingPage);
+      }
+      this.setGemDefaults();
+      this.$root.$emit('bv::show::modal', 'send-gift');
+    });
+  },
+  methods: {
+    close () {
+      this.$root.$emit('bv::hide::modal', 'send-gift');
+    },
+    setGemDefaults () {
+      if (this.selectedPage === 'buyGems') {
+        this.gift.gems.amount = 20;
+      } else if (this.selectedPage === 'ownGems') {
+        this.gift.gems.amount = 1;
+      } else {
+        this.gift.gems.amount = 0;
+      }
+    },
+    selectPage (page) {
+      if (page === this.selectedPage) return;
+      if (page === 'buyGems') this.selectedPage = 'buyGems';
+      if (page === 'buyGems' && this.selectedPage === 'ownGems') return;
+      this.selectedPage = page || 'subscription';
+      this.setGemDefaults();
+    },
+    async sendGift () {
+      this.sendingInProgress = true;
+      await this.$store.dispatch('members:transferGems', {
+        toUserId: this.userReceivingGift._id,
+        gemAmount: this.gift.gems.amount,
+      });
+      this.close();
+      setTimeout(() => { // wait for the send gem modal to be closed
+        this.$root.$emit('habitica:payment-success', {
+          paymentMethod: 'balance',
+          paymentCompleted: true,
+          paymentType: 'gift-gems-balance',
+          gift: {
+            gems: {
+              amount: this.gift.gems.amount,
+            },
+          },
+          giftReceiver: this.receiverName,
+        });
+      }, 500);
+    },
+    onHide () {
+      this.sendingInProgress = false;
+    },
+  },
+};
+</script>
diff --git a/website/client/src/components/settings/subscription.vue b/website/client/src/components/settings/subscription.vue
index 1bc59834d0..5a02860fc8 100644
--- a/website/client/src/components/settings/subscription.vue
+++ b/website/client/src/components/settings/subscription.vue
@@ -450,10 +450,6 @@
     background-color: $white;
   }
 
-  .subscribe-option {
-    border-bottom: 1px solid $gray-600;
-  }
-
   .svg-amazon-pay {
     width: 208px;
   }
diff --git a/website/client/src/components/settings/subscriptionOptions.vue b/website/client/src/components/settings/subscriptionOptions.vue
index ca218662fe..13fa363ae3 100644
--- a/website/client/src/components/settings/subscriptionOptions.vue
+++ b/website/client/src/components/settings/subscriptionOptions.vue
@@ -10,10 +10,17 @@
         :value="block.key"
         class="subscribe-option pt-2 pl-5 pb-3 mb-0"
         :class="{selected: subscription.key === block.key}"
-        @click.native="subscription.key = block.key"
+        @click.native="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>
+        <div
+          v-else
           class="subscription-text ml-2 mb-1"
           v-html="$t('subscriptionRateText', {price: block.price, months: block.months})"
         >
@@ -25,7 +32,18 @@
         </div>
       </b-form-radio>
     </b-form-group>
+    <!-- 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,
@@ -43,6 +61,7 @@
 
 <style lang="scss">
   @import '~@/assets/scss/colors.scss';
+
   #subscription-form {
     .custom-control .custom-control-label::before,
     .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
@@ -101,11 +120,22 @@ export default {
   mixins: [
     paymentsMixin,
   ],
+  props: {
+    userReceivingGift: {
+      type: Object,
+      default () {},
+    },
+  },
   data () {
     return {
       subscription: {
-        key: null,
+        key: 'basic_earned',
       },
+      gift: {
+        type: 'subscription',
+        subscription: { key: 'basic_earned' },
+      },
+      receiverName: '',
     };
   },
   computed: {
@@ -114,7 +144,6 @@ export default {
     },
     subscriptionBlocksOrdered () {
       const subscriptions = filter(subscriptionBlocks, o => o.discount !== true);
-
       return sortBy(subscriptions, [o => o.months]);
     },
   },
@@ -131,6 +160,10 @@ export default {
           return '<span class="subscription-bubble px-2 py-1">Gem cap at 25</span>';
       }
     },
+    updateSubscriptionData (key) {
+      this.subscription.key = key;
+      if (this.userReceivingGift._id) this.gift.subscription.key = key;
+    },
   },
 };
 </script>
diff --git a/website/client/src/components/tasks/taskModal.vue b/website/client/src/components/tasks/taskModal.vue
index 3720543d0f..04ba15a181 100644
--- a/website/client/src/components/tasks/taskModal.vue
+++ b/website/client/src/components/tasks/taskModal.vue
@@ -662,6 +662,11 @@
       margin-bottom: 0;
     }
 
+    .custom-control-input {
+      z-index: -1;
+      opacity: 0;
+    }
+
     .modal-header {
       .form-group {
         margin-bottom: 1rem;
diff --git a/website/client/src/components/userMenu/profile.vue b/website/client/src/components/userMenu/profile.vue
index 0f7be55d50..b270d6cf69 100644
--- a/website/client/src/components/userMenu/profile.vue
+++ b/website/client/src/components/userMenu/profile.vue
@@ -992,7 +992,8 @@ export default {
       axios.post(`/api/v4/user/block/${this.user._id}`);
     },
     openSendGemsModal () {
-      this.$root.$emit('habitica::send-gems', this.user);
+      this.$store.state.giftModalOptions.startingPage = 'buyGems';
+      this.$root.$emit('habitica::send-gift', this.user);
     },
     adminTurnOnShadowMuting () {
       if (!this.hero.flags) {
diff --git a/website/client/src/store/index.js b/website/client/src/store/index.js
index 67e5978306..dd3a0e28dd 100644
--- a/website/client/src/store/index.js
+++ b/website/client/src/store/index.js
@@ -124,6 +124,9 @@ export default function () {
       profileOptions: {
         startingPage: '',
       },
+      giftModalOptions: {
+        startingPage: '',
+      },
       rageModalOptions: {
         npc: '',
       },
diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json
index dac19498fe..e5186a08f8 100644
--- a/website/common/locales/en/groups.json
+++ b/website/common/locales/en/groups.json
@@ -129,6 +129,7 @@
   "sendGiftHeading": "Send Gift to <%= name %>",
   "sendGiftGemsBalance": "From <%= number %> Gems",
   "sendGiftCost": "Total: $<%= cost %> USD",
+  "sendGiftTotal": "Total:",
   "sendGiftFromBalance": "From Balance",
   "sendGiftPurchase": "Purchase",
   "sendGiftMessagePlaceholder": "Personal message (optional)",
diff --git a/website/common/locales/en/settings.json b/website/common/locales/en/settings.json
index d0f842a8e7..59b6fd492a 100644
--- a/website/common/locales/en/settings.json
+++ b/website/common/locales/en/settings.json
@@ -125,6 +125,7 @@
     "unsubscribeAllPush": "Check to Unsubscribe from all Push Notifications",
     "correctlyUnsubscribedEmailType": "Correctly unsubscribed from \"<%= emailType %>\" emails.",
     "subscriptionRateText": "Recurring <strong>$<%= price %> USD</strong> every <strong><%= months %> months</strong>",
+    "giftSubscriptionRateText": "<strong>$<%= price %> USD</strong> for <strong><%= months %> months</strong>",
     "benefits": "Benefits",
     "coupon": "Coupon",
     "couponText": "We sometimes have events and give out promo codes for special gear. (eg, those who stop by our Wondercon booth)",
diff --git a/website/common/locales/en/subscriber.json b/website/common/locales/en/subscriber.json
index 0519601aaa..cd2707c74a 100644
--- a/website/common/locales/en/subscriber.json
+++ b/website/common/locales/en/subscriber.json
@@ -3,6 +3,10 @@
     "subscriptions": "Subscriptions",
     "viewSubscriptions": "View Subscriptions",
     "sendGems": "Send Gems",
+    "howManyGemsPurchase": "How many Gems would you like to purchase?",
+    "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",
     "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!",
@@ -198,5 +202,6 @@
     "needToUpdateCard": "Need to update your card?",
     "readyToResubscribe": "Are you ready to resubscribe?",
     "cancelYourSubscription": "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."
+    "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"
 }