diff --git a/src/app/productConfig/productConfigForm/productConfigForm.tpl.html b/src/app/productConfig/productConfigForm/productConfigForm.tpl.html
index 39c9dc713..8e7dd47a5 100644
--- a/src/app/productConfig/productConfigForm/productConfigForm.tpl.html
+++ b/src/app/productConfig/productConfigForm/productConfigForm.tpl.html
@@ -66,10 +66,65 @@ <h4 class="panel-title border-bottom-small" translate>
             <p translate>{{'GIFT_IN_CART_ERROR'}}</p>
           </div>
 
-          <h4 class="panel-title border-bottom-small" translate>
-            {{'GIFT_AMOUNT'}}
-          </h4>
-            <div ng-if="$ctrl.useSuggestedAmounts">
+        <h4 class="panel-title border-bottom-small" translate>
+          {{'GIFT_AMOUNT'}}
+        </h4>
+        <div class="panel-body pt0">
+          
+          <div ng-if="$ctrl.useSuggestedAmounts">
+            <div ng-if="$ctrl.useV3 === 'true'">
+              <fieldset aria-label="Suggested Gift Amounts. Tab for Custom Amount">
+                <div class="button-group">
+                  <div ng-repeat="suggested in $ctrl.suggestedAmounts | orderBy:'order'">
+                    <input 
+                      type="radio"
+                      name="suggestedAmount"
+                      id="sa-{{$index}}"
+                      ng-click="$ctrl.changeAmount(suggested.amount)"
+                      ng-class=" {'active': !$ctrl.customInputActive && $ctrl.itemConfig.AMOUNT === suggested.amount}"
+                      ng-checked="$first"
+                    />
+                    <label for="sa-{{$index}}">
+                      <span class="amount-box">{{$ctrl.suggestedAmount(suggested.amount)}}</span>
+                      <span class="amount-description">{{suggested.label}}</span>
+                    </label>
+                  </div>
+                  <div class="custom-amount-button" ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}">
+                    <div class="input-prepend">
+                      <span class="input-prepend-text">$</span>
+                    </div>
+                    <label for="ca">
+                      <input 
+                        name="suggestedAmount"
+                        type="radio"
+                        ng-checked="$ctrl.customInputActive"
+                      />
+                      <input
+                        name="amount"
+                        type="text"
+                        id="ca"
+                        step="1"
+                        tabindex="-1"
+                        ng-model="$ctrl.customAmount"
+                        ng-change="$ctrl.changeCustomAmount($ctrl.customAmount)"
+                        ng-focus="$ctrl.customInputActive = true;"
+                        ng-required="$ctrl.customInputActive"
+                        placeholder="{{'OTHER_PLACEHOLDER' | translate}}" />
+                    </label>
+                  </div>
+                  <div 
+                    role="alert" 
+                    ng-messages="$ctrl.itemConfigForm.amount.$error"
+                    ng-if="($ctrl.itemConfigForm.amount | showErrors)">
+                      <div class="help-block" ng-message="pattern" translate>{{'VALID_DOLLAR_AMOUNT_ERROR'}}</div>
+                      <div class="help-block" ng-message="required" translate>{{'AMOUNT_EMPTY_ERROR'}}</div>
+                      <div class="help-block" ng-message="minimum" translate translate-values="{currencyLimit: (1 | currency)}">{{'AMOUNT_MIN_ERROR'}}</div>
+                      <div class="help-block" ng-message="maximum" translate translate-values="{currencyLimit: (10000000 | currency)}">{{'AMOUNT_MAX_ERROR'}}</div>
+                  </div>
+                </div>            
+              </fieldset>
+            </div>
+            <div ng-if="$ctrl.useV3 !== 'true'">
               <div class="radio radio-custom-amount"
                   ng-repeat="suggested in $ctrl.suggestedAmounts | orderBy:'order'">
                 <label>
@@ -108,7 +163,8 @@ <h4 class="panel-title border-bottom-small" translate>
                   </div>
                 </div>
               </div>
-            </div>
+            </div> 
+          </div>
 
             <div data-toggle="buttons"
                 ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}"
diff --git a/src/assets/scss/_give.scss b/src/assets/scss/_give.scss
index 7b03e67c4..c62de2281 100644
--- a/src/assets/scss/_give.scss
+++ b/src/assets/scss/_give.scss
@@ -498,6 +498,137 @@ hr.horizontal-divider {
   font-weight: 700;
 }
 
+.button-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .help-block {
+    padding: 10px;
+    color: #715927;
+    background-color: #f4d89d;
+    border: 2px solid #f9b625;
+    border-radius: 2px;
+  }
+
+  input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  label {
+    display: flex;
+    flex: 1;
+    cursor: pointer;
+    margin: 0;
+  
+    .amount-box {
+      margin: 0;
+      min-width: 50px;
+      text-align: center;
+      align-content: center;
+      aspect-ratio: 1 / 1;
+      background-color: #ddd;
+      color: inherit;
+      border-radius: 2px 0 0 2px;
+      transition: all 0.3s ease;
+    }
+
+    .amount-description {
+      width: 100%;
+      margin: 0;
+      padding: 5px 10px;
+      align-content: center;
+      background-color: #f0f0f0;
+      font-weight: normal;
+    }
+  }
+
+  input[type="radio"]:hover + label {
+    .amount-description {
+      background-color: #e4e4e4;
+    }
+  }
+  input[type="radio"]:focus + label {
+    .amount-box {
+      min-width: 55px;
+      color:#ddd;
+      background-color:#3a3a3a;
+    }
+  }
+  input[type="radio"]:checked + label {
+    .amount-box {
+      min-width: 55px;
+      color: #ddd;
+      background-color: #3a3a3a;
+    }
+  }
+}
+
+.custom-amount-button {
+  
+  display: flex;
+  flex-direction: row;
+  height: 50px;
+  border: 1px solid #ddd;
+
+  .input-prepend {
+    margin: 0;
+    min-width: 50px;
+    text-align: center;
+    align-content: center;
+    min-width: 50px;
+    aspect-ratio: 1 / 1;
+    background-color: #ddd;
+    cursor: default;
+  }
+
+  label {
+    all: unset;
+    width: 100%;
+    height: 100%;
+
+    input[type="radio"] {
+      position: absolute;
+      opacity: 0;
+    }
+
+    input[type="text"] {
+      width: 100%;
+      height: 100%;
+      padding: 0 7px;
+      border: none;
+      border-radius: 2px;
+      transition: all 0.3s ease;
+
+      &::placeholder {
+        color: $colorCru-gray;
+      }
+
+      &:focus {
+        border: 1px solid #3eb1c8;
+        outline: none;
+      }
+    }
+  }
+}
+
+/* Check for custom amount input */
+.custom-amount-button:has(input:checked) {
+  border: 1px solid #3a3a3a;
+  font-weight: 700;
+  color: #3a3a3a;
+}
+
+.custom-amount-button:has(input:checked) .input-prepend {
+  min-width: 55px;
+  aspect-ratio: 1 / 1;
+  background-color: #3a3a3a;
+  color: #fff;
+  transition: all 0.3s ease;
+}
+
 .table-payment-history {
   thead {
     th {