diff --git a/src/app/productConfig/productConfigForm/productConfigForm.tpl.html b/src/app/productConfig/productConfigForm/productConfigForm.tpl.html
index dbde74819..c00f827f6 100644
--- a/src/app/productConfig/productConfigForm/productConfigForm.tpl.html
+++ b/src/app/productConfig/productConfigForm/productConfigForm.tpl.html
@@ -68,53 +68,54 @@ <h4 class="panel-title border-bottom-small" translate>
         <h4 class="panel-title border-bottom-small" translate>
           {{'GIFT_AMOUNT'}}
         </h4>
-        <div class="panel-body pt0">
+        <div class="panel-body p0">
           <div ng-if="$ctrl.useSuggestedAmounts">
             <div class="button-group">
-              <button 
-                  type="button"
+              <div 
+                  role="button"
                   class="suggested-button"
                   ng-click="$ctrl.changeAmount(suggested.amount)"
                   ng-class=" {'active': !$ctrl.customInputActive && $ctrl.itemConfig.AMOUNT === suggested.amount}"
                   ng-repeat="suggested in $ctrl.suggestedAmounts | orderBy:'order'">
-                  <span class="amount-box">
+                  <div class="amount-box">
                     {{$ctrl.suggestedAmount(suggested.amount)}}
-                  </span>
-                  <span class="label-text">
+                  </div>
+                  <div class="label-text">
                     {{suggested.label}}
-                  </span>
-              </button>
-            </div>
-            <div class="radio radio-custom-amount form-inline" ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}">
-              <div class="form-group">
+                  </div>
+              </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>
-                  <input name="suggestedAmount"
-                         type="radio"
-                         ng-checked="$ctrl.customInputActive" />
-                  <input class="form-control form-control-subtle"
-                         name="amount"
-                         type="text"
-                         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}}" />
+                  <input 
+                    name="suggestedAmount"
+                    type="radio"
+                    ng-checked="$ctrl.customInputActive" />
+                  <input
+                    name="amount"
+                    type="text"
+                    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 role="alert" ng-messages="$ctrl.itemConfigForm.amount.$error"
-                     ng-if="($ctrl.itemConfigForm.amount | showErrors)">
+              </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 class="help-block" ng-message="maximum" translate translate-values="{currencyLimit: (10000000 | currency)}">{{'AMOUNT_MAX_ERROR'}}</div>
                 </div>
-              </div>
             </div>
           </div>
-
           <div data-toggle="buttons"
                ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}"
                ng-if="!$ctrl.useSuggestedAmounts">
diff --git a/src/assets/scss/_give.scss b/src/assets/scss/_give.scss
index 6baea7413..6531f0f75 100644
--- a/src/assets/scss/_give.scss
+++ b/src/assets/scss/_give.scss
@@ -484,76 +484,140 @@ hr.horizontal-divider {
   }
 }
 
-/* Product Config Form - Suggested Amount Buttons Begin */
+/* Product Config Form Amounts Begin */
+
+/* Shared styles begin */
+.button-common {
+  font-size: 16px;
+  font-weight: 500;
+  border: none;
+  border-radius: 2px;
+  background-color: $colorGrayscale-pebble;
+  color: $colorCru-gray;
+  cursor: pointer;
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+}
+/* Shared styles end */
 
 .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;
+  }
 }
 
 .suggested-button {
+  @extend .button-common;
   display: flex;
   justify-content: flex-start;
+  gap: 10px;
   align-items: center;
-  padding: 0;
-  font-size: 16px;
-  font-weight: 500;
-  background-color: $colorGrayscale-pebble;
-  border: none;
-  border-radius: 5px;
-  overflow: hidden;
-  color: $colorCru-gray;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  width: 100%;
-  height: 60px;
-}
-
-.suggested-button.active {
-  background-color: #dddddd;
-  cursor: default;
-  height: 70px;
 
   .amount-box {
-    background-color: #3a3a3a;
-    color: #fff;
-    font-weight: normal;
+    @extend .flex-center;
+    min-width: 50px;
+    aspect-ratio: 1 / 1;
+    background-color: #ddd;
+    color: inherit;
+    border-radius: 2px 0 0 2px;
+    transition: all 0.3s ease;
   }
 
   .label-text {
-    font-weight: normal;
+    flex: 1;
+    color: inherit;
+  }
+
+  &.active {
+    cursor: default;
+    .amount-box {
+      background-color: #3a3a3a;
+      color: #fff;
+      font-weight: normal;
+      min-width: 55px;
+    }
   }
-}
 
-.suggested-button:hover {
-  background-color: #f5f5f5;
+  &:hover {
+    background-color: #f5f5f5;
+  }
 }
 
-.amount-box {
+.custom-amount-button {
+  @extend .button-common;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 20px;
-  min-width: 100px;
-  height: 100%;
-  background-color: $colorGrayscale-rock;
-  font-size: 16px;
-  font-weight: normal;
-  color: #333;
+  flex-direction: row;
+  height: 50px;
+  border: 1px solid #ddd;
+
+  .input-prepend {
+    @extend .flex-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;
+      }
+    }
+  }
 }
 
-.label-text {
-  flex-grow: 1;
-  padding: 0 15px;
-  text-align: left;
-  font-size: 16px;
-  font-weight: normal;
-  color: inherit;
-  line-height: 1.5;
+/* Check for custom amount input */
+.custom-amount-button:has(.ng-not-empty) {
+  border: 1px solid #3a3a3a;
+  font-weight: 700;
+  color: #3a3a3a;
 }
 
-/* Product Config Form - Suggested Amount Buttons End */
+.custom-amount-button:has(.ng-not-empty) .input-prepend {
+  // @extend .button-common;
+  @extend .input-prepend;
+  min-width: 55px;
+  aspect-ratio: 1 / 1;
+  background-color: #3a3a3a;
+  color: #fff;
+  transition: all 0.3s ease;
+}
+/* Product Config Form Amounts End */
 
 .btn-xs,
 .btn-sm {