diff --git a/src/app/branded/branded-checkout.component.js b/src/app/branded/branded-checkout.component.js
index 3c7b6e26a..4011bb267 100644
--- a/src/app/branded/branded-checkout.component.js
+++ b/src/app/branded/branded-checkout.component.js
@@ -182,6 +182,6 @@ export default angular
       onOrderFailed: '&',
       language: '@',
       showCoverFees: '@',
-      useV3: '@',
+      useV3: '@'
     }
   })
diff --git a/src/app/branded/step-1/branded-checkout-step-1.component.js b/src/app/branded/step-1/branded-checkout-step-1.component.js
index ae84fbe0a..017f8e1ed 100644
--- a/src/app/branded/step-1/branded-checkout-step-1.component.js
+++ b/src/app/branded/step-1/branded-checkout-step-1.component.js
@@ -189,6 +189,6 @@ export default angular
       onPaymentFailed: '&',
       radioStationApiUrl: '<',
       radioStationRadius: '<',
-      useV3: '<',
+      useV3: '<'
     }
   })
diff --git a/src/app/branded/step-1/branded-checkout-step-1.tpl.html b/src/app/branded/step-1/branded-checkout-step-1.tpl.html
index e2f85b2e2..6d6ff6fc8 100644
--- a/src/app/branded/step-1/branded-checkout-step-1.tpl.html
+++ b/src/app/branded/step-1/branded-checkout-step-1.tpl.html
@@ -11,7 +11,10 @@
                          submitted="$ctrl.submitted"
                          on-state-change="$ctrl.onGiftConfigStateChange(state)"
                          disable-session-restart="true"
-                         ng-if="!$ctrl.loadingProductConfig && !$ctrl.errorLoadingProductConfig">
+                         ng-if="!$ctrl.loadingProductConfig && !$ctrl.errorLoadingProductConfig"
+                         use-v3="$ctrl.useV3"
+                         >
+                         
     </product-config-form>
     <div ng-if="$ctrl.errorLoadingProductConfig" class="alert alert-danger" role="alert">
       <p translate='LOADING_ERROR' translate-values="{loadData: '$ctrl.loadData()'}" translate-compile></p>
diff --git a/src/app/productConfig/productConfigForm/productConfigForm.component.js b/src/app/productConfig/productConfigForm/productConfigForm.component.js
index e6193fe8c..6990128f1 100644
--- a/src/app/productConfig/productConfigForm/productConfigForm.component.js
+++ b/src/app/productConfig/productConfigForm/productConfigForm.component.js
@@ -416,6 +416,7 @@ export default angular
       disableSessionRestart: '@',
       updateQueryParam: '&',
       submitted: '<',
-      onStateChange: '&'
+      onStateChange: '&',
+      useV3: '<'
     }
   })
diff --git a/src/app/productConfig/productConfigForm/productConfigForm.tpl.html b/src/app/productConfig/productConfigForm/productConfigForm.tpl.html
index 583baab35..10fa6509b 100644
--- a/src/app/productConfig/productConfigForm/productConfigForm.tpl.html
+++ b/src/app/productConfig/productConfigForm/productConfigForm.tpl.html
@@ -47,172 +47,172 @@ <h4 class="panel-title border-bottom-small" translate>
   </div>
 
   <div ng-if="!$ctrl.loading && !$ctrl.errorLoading && !$ctrl.showGivingLinks">
-    <div class="panel panel-default panel-plain mt">
+    <div ng-class="{'give-selection-reverse-order': ($ctrl.useV3 === 'true')}">
+      <div class="panel panel-default panel-plain mt">
 
-        <div ng-if="$ctrl.errorChangingFrequency" class="alert alert-danger" role="alert">
-          <p translate>{{'FREQUENCY_ERROR'}}</p>
-        </div>
+          <div ng-if="$ctrl.errorChangingFrequency" class="alert alert-danger" role="alert">
+            <p translate>{{'FREQUENCY_ERROR'}}</p>
+          </div>
 
-        <div ng-if="$ctrl.errorSavingGeneric" role="alert" class="alert alert-danger">
-          <p translate>{{'ADDING_CART_ERROR'}}</p>
-        </div>
+          <div ng-if="$ctrl.errorSavingGeneric" role="alert" class="alert alert-danger">
+            <p translate>{{'ADDING_CART_ERROR'}}</p>
+          </div>
 
-        <div ng-if="$ctrl.amountFormatError" role="alert" class="alert alert-danger">
-          <p translate>{{$ctrl.amountFormatError}}</p>
-        </div>
+          <div ng-if="$ctrl.amountFormatError" role="alert" class="alert alert-danger">
+            <p translate>{{$ctrl.amountFormatError}}</p>
+          </div>
 
-        <div ng-if="$ctrl.errorAlreadyInCart" class="alert alert-warning" role="alert">
-          <p translate>{{'GIFT_IN_CART_ERROR'}}</p>
-        </div>
+          <div ng-if="$ctrl.errorAlreadyInCart" class="alert alert-warning" role="alert">
+            <p translate>{{'GIFT_IN_CART_ERROR'}}</p>
+          </div>
 
-        <h4 class="panel-title border-bottom-small" translate>
-          {{'GIFT_AMOUNT'}}
-        </h4>
-        <div class="panel-body pt0">
-          <div ng-if="$ctrl.useSuggestedAmounts">
-            <div class="radio radio-custom-amount"
-                 ng-repeat="suggested in $ctrl.suggestedAmounts | orderBy:'order'">
-              <label>
-                <input name="suggestedAmount"
-                       type="radio"
-                       ng-click="$ctrl.changeAmount(suggested.amount)"
-                       ng-checked="!$ctrl.customInputActive && $ctrl.itemConfig.AMOUNT === suggested.amount" />
-                {{$ctrl.suggestedAmount(suggested.amount)}} {{suggested.label}}
-              </label>
-            </div>
-            <div class="radio radio-custom-amount form-inline" ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}">
-              <div class="form-group">
+          <h4 class="panel-title border-bottom-small" translate>
+            {{'GIFT_AMOUNT'}}
+          </h4>
+            <div ng-if="$ctrl.useSuggestedAmounts">
+              <div class="radio radio-custom-amount"
+                  ng-repeat="suggested in $ctrl.suggestedAmounts | orderBy:'order'">
                 <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}}" />
+                        type="radio"
+                        ng-click="$ctrl.changeAmount(suggested.amount)"
+                        ng-checked="!$ctrl.customInputActive && $ctrl.itemConfig.AMOUNT === suggested.amount" />
+                  {{$ctrl.suggestedAmount(suggested.amount)}} {{suggested.label}}
                 </label>
-                <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="radio radio-custom-amount form-inline" ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}">
+                <div class="form-group">
+                  <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}}" />
+                  </label>
+                  <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>
               </div>
             </div>
-          </div>
 
-          <div data-toggle="buttons"
-               ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}"
-               ng-if="!$ctrl.useSuggestedAmounts">
-            <label class="btn btn-radio"
-                   ng-click="$ctrl.changeAmount(a)"
-                   ng-class="{'active': $ctrl.itemConfig.AMOUNT === a && !$ctrl.customInputActive}"
-                   ng-repeat-start="a in $ctrl.selectableAmounts">
-              <span class="number">&dollar;{{a}}</span>
-            </label>
-            <span ng-repeat-end></span>
-            <label
-              ng-class="{active: $ctrl.customInputActive}"
-              class="btn btn-default-form u-textLeft custom-amount">
-              <div class="form-group form-group-default u-inline">
-                <input class="form-control form-control-subtle number"
-                       name="amount"
-                       type="text"
-                       step="1"
-                       ng-required="$ctrl.customInputActive"
-                       ng-model="$ctrl.customAmount"
-                       ng-change="$ctrl.changeCustomAmount($ctrl.customAmount)"
-                       ng-focus="$ctrl.customInputActive = true;"
-                       tabindex="-1"
-                       placeholder="{{'Other' | translate}}"
-                       required />
-              </div>
-            </label>
-            <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="AMOUNT_MIN_ERROR" translate-values="{currencyLimit: (1 | currency)}"></div>
-              <div class="help-block" ng-message="maximum" translate="AMOUNT_MAX_ERROR" translate-values="{currencyLimit: (10000000 | currency)}">
+            <div data-toggle="buttons"
+                ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}"
+                ng-if="!$ctrl.useSuggestedAmounts">
+              <label class="btn btn-radio"
+                    ng-click="$ctrl.changeAmount(a)"
+                    ng-class="{'active': $ctrl.itemConfig.AMOUNT === a && !$ctrl.customInputActive}"
+                    ng-repeat-start="a in $ctrl.selectableAmounts">
+                <span class="number">&dollar;{{a}}</span>
+              </label>
+              <span ng-repeat-end></span>
+              <label
+                ng-class="{active: $ctrl.customInputActive}"
+                class="btn btn-default-form u-textLeft custom-amount">
+                <div class="form-group form-group-default u-inline">
+                  <input class="form-control form-control-subtle number"
+                        name="amount"
+                        type="text"
+                        step="1"
+                        ng-required="$ctrl.customInputActive"
+                        ng-model="$ctrl.customAmount"
+                        ng-change="$ctrl.changeCustomAmount($ctrl.customAmount)"
+                        ng-focus="$ctrl.customInputActive = true;"
+                        tabindex="-1"
+                        placeholder="{{'Other' | translate}}"
+                        required />
+                </div>
+              </label>
+              <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="AMOUNT_MIN_ERROR" translate-values="{currencyLimit: (1 | currency)}"></div>
+                <div class="help-block" ng-message="maximum" translate="AMOUNT_MAX_ERROR" translate-values="{currencyLimit: (10000000 | currency)}">
+                </div>
               </div>
             </div>
+        </div><!-- // panel -->
+      <div class="panel panel-default give-modal-panel">
+        <h4 class="panel-title border-bottom-small mt" translate>
+          {{'GIFT_FREQUENCY'}}
+        </h4>
+        <div class="panel-body">
+          <div data-toggle="buttons">
+            <label class="btn btn-radio btn-wide"
+                  ng-repeat-start="f in $ctrl.productData.frequencies | orderBy: $ctrl.frequencyOrder track by $index"
+                  ng-if="f.name !== 'SEMIANNUAL'"
+                  ng-class="{'active': f.name === $ctrl.productData.frequency}"
+                  ng-click="$ctrl.changeFrequency(f)">
+                  <span class="giftsum-about giftsum-title" ng-switch="f.name">
+                    <span ng-switch-when="NA" translate>{{'SINGLE_GIFT'}}</span>
+                    <span ng-switch-default>{{f.display}}</span>
+                  </span>
+            </label>
+            <span ng-repeat-end></span>
           </div>
+          <loading inline="true" ng-if="$ctrl.changingFrequency" class="mt-- text-center">
+            <translate>{{'CHANGING_FREQUENCY'}}</translate>
+          </loading>
         </div><!-- // panel-body -->
       </div><!-- // panel -->
-    <div class="panel panel-default give-modal-panel">
-      <h4 class="panel-title border-bottom-small mt" translate>
-        {{'GIFT_FREQUENCY'}}
-      </h4>
-      <div class="panel-body">
-        <div data-toggle="buttons">
-          <label class="btn btn-radio btn-wide"
-                 ng-repeat-start="f in $ctrl.productData.frequencies | orderBy: $ctrl.frequencyOrder track by $index"
-                 ng-if="f.name !== 'SEMIANNUAL'"
-                 ng-class="{'active': f.name === $ctrl.productData.frequency}"
-                 ng-click="$ctrl.changeFrequency(f)">
-                <span class="giftsum-about giftsum-title" ng-switch="f.name">
-                  <span ng-switch-when="NA" translate>{{'SINGLE_GIFT'}}</span>
-                  <span ng-switch-default>{{f.display}}</span>
-                </span>
-          </label>
-          <span ng-repeat-end></span>
-        </div>
-        <loading inline="true" ng-if="$ctrl.changingFrequency" class="mt-- text-center">
-          <translate>{{'CHANGING_FREQUENCY'}}</translate>
-        </loading>
-      </div><!-- // panel-body -->
-    </div><!-- // panel -->
-    <div ng-if="$ctrl.productData.frequency !== 'NA'">
-      <div class="panel panel-default give-modal-panel">
-        <h4 class="panel-title border-bottom-small mt0 pt-" translate>
-          {{'RECURRING_START'}}
-        </h4>
-        <div class="panel-body pt0">
-          <div class="row">
-            <div class="col-sm-3">
-              <div class="form-group">
-                <label>
-                  <span translate>{{'MONTH'}}</span>
-                  <select class="form-control form-control-subtle"
-                          ng-model="$ctrl.itemConfig['RECURRING_START_MONTH']"
-                          ng-options="(m | date:'MM') as (m | date:'MMMM, yyyy') for m in $ctrl.possibleTransactionMonths($ctrl.nextDrawDate)"
-                          ng-change="$ctrl.changeStartDay($ctrl.itemConfig['RECURRING_DAY_OF_MONTH'], $ctrl.itemConfig['RECURRING_START_MONTH'])">
-                  </select>
-                </label>
+      <div ng-if="$ctrl.productData.frequency !== 'NA'">
+        <div class="panel panel-default give-modal-panel">
+          <h4 class="panel-title border-bottom-small mt0 pt-" translate>
+            {{'RECURRING_START'}}
+          </h4>
+          <div class="panel-body pt0">
+            <div class="row">
+              <div class="col-sm-3">
+                <div class="form-group">
+                  <label>
+                    <span translate>{{'MONTH'}}</span>
+                    <select class="form-control form-control-subtle"
+                            ng-model="$ctrl.itemConfig['RECURRING_START_MONTH']"
+                            ng-options="(m | date:'MM') as (m | date:'MMMM, yyyy') for m in $ctrl.possibleTransactionMonths($ctrl.nextDrawDate)"
+                            ng-change="$ctrl.changeStartDay($ctrl.itemConfig['RECURRING_DAY_OF_MONTH'], $ctrl.itemConfig['RECURRING_START_MONTH'])">
+                    </select>
+                  </label>
+                </div>
               </div>
-            </div>
-            <div class="col-sm-2">
-              <div class="form-group">
-                <label>
-                  <span translate>{{'DAY'}}</span>
-                  <select class="form-control form-control-subtle"
-                          ng-model="$ctrl.itemConfig['RECURRING_DAY_OF_MONTH']"
-                          ng-options="o as (o | ordinal) for o in $ctrl.possibleTransactionDays($ctrl.itemConfig['RECURRING_START_MONTH'], $ctrl.nextDrawDate)"
-                          ng-change="$ctrl.changeStartDay($ctrl.itemConfig['RECURRING_DAY_OF_MONTH'], $ctrl.itemConfig['RECURRING_START_MONTH'])">
-                  </select>
-                </label>
+              <div class="col-sm-2">
+                <div class="form-group">
+                  <label>
+                    <span translate>{{'DAY'}}</span>
+                    <select class="form-control form-control-subtle"
+                            ng-model="$ctrl.itemConfig['RECURRING_DAY_OF_MONTH']"
+                            ng-options="o as (o | ordinal) for o in $ctrl.possibleTransactionDays($ctrl.itemConfig['RECURRING_START_MONTH'], $ctrl.nextDrawDate)"
+                            ng-change="$ctrl.changeStartDay($ctrl.itemConfig['RECURRING_DAY_OF_MONTH'], $ctrl.itemConfig['RECURRING_START_MONTH'])">
+                    </select>
+                  </label>
+                </div>
               </div>
-            </div>
-            <div class="col-sm-4">
-              <div class="form-group">
-                <label translate>{{'GIFT_START_DATE'}}</label>
+              <div class="col-sm-4">
                 <div class="form-group">
-                  {{$ctrl.startMonth( $ctrl.itemConfig['RECURRING_DAY_OF_MONTH'], $ctrl.itemConfig['RECURRING_START_MONTH'], $ctrl.nextDrawDate ).format('ll')}}
+                  <label translate>{{'GIFT_START_DATE'}}</label>
+                  <div class="form-group">
+                    {{$ctrl.startMonth( $ctrl.itemConfig['RECURRING_DAY_OF_MONTH'], $ctrl.itemConfig['RECURRING_START_MONTH'], $ctrl.nextDrawDate ).format('ll')}}
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        </div><!-- // panel-body -->
-      </div><!-- // panel -->
+          </div><!-- // panel-body -->
+        </div><!-- // panel -->
+      </div>
     </div>
     <div class="panel panel-default give-modal-panel">
       <h4 class="panel-title border-bottom-small mt" translate>
diff --git a/src/assets/scss/_gift-config.scss b/src/assets/scss/_gift-config.scss
index 8888cf81c..fc1ff1f0a 100644
--- a/src/assets/scss/_gift-config.scss
+++ b/src/assets/scss/_gift-config.scss
@@ -25,8 +25,6 @@ label.custom-amount {
   width: auto;
 }
 
-
-
 .radio,
 .checkbox {
   label {
@@ -217,6 +215,11 @@ label.btn.btn-default-form.active {
   }
 }
 
+.give-selection-reverse-order {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
 @media (max-width: 549px) {
   .give-modal-recipient {
     margin-top: 5px;
@@ -340,4 +343,3 @@ label.btn.btn-default-form.active {
     }
   }
 }
-