diff --git a/src/Framework/FieldsAPI/PaymentGateways.php b/src/Framework/FieldsAPI/PaymentGateways.php
new file mode 100644
index 000000000..05b59ba04
--- /dev/null
+++ b/src/Framework/FieldsAPI/PaymentGateways.php
@@ -0,0 +1,10 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Give\Framework\FieldsAPI;
+
+class PaymentGateways extends Field
+{
+    const TYPE = 'gateways';
+}
diff --git a/src/NextGen/DonationForm/Blocks/DonationFormBlock/Block.php b/src/NextGen/DonationForm/Blocks/DonationFormBlock/Block.php
index 93ebca21e..826e0e63a 100644
--- a/src/NextGen/DonationForm/Blocks/DonationFormBlock/Block.php
+++ b/src/NextGen/DonationForm/Blocks/DonationFormBlock/Block.php
@@ -12,6 +12,7 @@
 use Give\Framework\FieldsAPI\Form;
 use Give\Framework\FieldsAPI\Hidden;
 use Give\Framework\FieldsAPI\Name;
+use Give\Framework\FieldsAPI\PaymentGateways;
 use Give\Framework\FieldsAPI\Radio;
 use Give\Framework\FieldsAPI\Section;
 use Give\Framework\FieldsAPI\Select;
@@ -108,11 +109,6 @@ public function render(array $attributes)
      */
     private function createForm(int $formId): Form
     {
-        $gatewayOptions = [];
-        foreach ($this->getEnabledPaymentGateways($formId) as $gateway) {
-            $gatewayOptions[] = Radio::make($gateway->getId())->label($gateway->getPaymentMethodLabel());
-        }
-
         $donationForm = new Form($formId);
 
         $formBlockData = json_decode(get_post($formId)->post_content, false);
@@ -124,8 +120,6 @@ private function createForm(int $formId): Form
         /** @var Section $paymentDetails */
         $paymentDetails = $donationForm->getNodeByName('payment-details');
 
-        $paymentDetails->append(...$gatewayOptions);
-
         $paymentDetails->append(
             Hidden::make('formId')
                 ->defaultValue($formId),
@@ -204,6 +198,8 @@ protected function convertBlockToNode(stdClass $block): Node
             });
         } elseif ($block->name === "custom-block-editor/email-field") {
             $node = Email::make('email')->emailTag('email');
+        } elseif ($block->name === "custom-block-editor/payment-gateways") {
+            $node = PaymentGateways::make('gatewayId');
         } elseif ($block->name === "custom-block-editor/donation-summary") {
             $node = DonationSummary::make('donation-summary');
         } elseif ($block->name === "custom-block-editor/company-field") {
diff --git a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/fields/PaymentDetails.tsx b/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/fields/PaymentDetails.tsx
deleted file mode 100644
index 1fa0c20f4..000000000
--- a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/fields/PaymentDetails.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import {useFormState} from 'react-hook-form';
-import {ErrorMessage} from '@hookform/error-message';
-import PaymentGatewayOption from './PaymentGatewayOption';
-import type {Gateway} from '@givewp/forms/types';
-
-type Props = {
-    name: string;
-    label: string;
-    gateways: Gateway[];
-};
-
-export default function PaymentDetails({name, label, gateways}: Props) {
-    const {errors} = useFormState();
-
-    return (
-        <section className={`givewp-layouts givewp-layouts-section givewp-layouts-section-payment-gateways`}>
-            <fieldset aria-labelledby={name}>
-                <div>
-                    <legend id={name}>{label}</legend>
-                </div>
-                <ul style={{listStyleType: 'none', padding: 0}}>
-                    {gateways.map((gateway, index) => (
-                        <PaymentGatewayOption gateway={gateway} index={index} key={gateway.id}/>
-                    ))}
-                </ul>
-
-                <ErrorMessage
-                    errors={errors}
-                    name={'gatewayId'}
-                    render={({message}) => <span className="give-next-gen__error-message">{message}</span>}
-                />
-            </fieldset>
-        </section>
-    );
-}
diff --git a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/fields/PaymentGatewayOption.tsx b/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/fields/PaymentGatewayOption.tsx
deleted file mode 100644
index ffe85d4c8..000000000
--- a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/fields/PaymentGatewayOption.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import {useFormContext} from 'react-hook-form';
-import {Gateway} from '@givewp/forms/types';
-
-type Props = {
-    gateway: Gateway;
-    index: number;
-};
-
-export default function PaymentGatewayOption({gateway, index}: Props) {
-    const {register} = useFormContext();
-    const Fields = gateway.Fields;
-
-    return (
-        <li>
-            <input
-                {...register('gatewayId', {required: true})}
-                type="radio"
-                value={gateway.id}
-                id={gateway.id}
-                defaultChecked={index === 0}
-            />
-            <label htmlFor={gateway.id}> Donate with {gateway.settings.label}</label>
-            <div className="givewp-fields-payment-gateway">
-                <Fields/>
-            </div>
-        </li>
-    );
-}
diff --git a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/fields/SectionNode.tsx b/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/fields/SectionNode.tsx
index bdd91f394..7a449bb5d 100644
--- a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/fields/SectionNode.tsx
+++ b/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/fields/SectionNode.tsx
@@ -1,22 +1,21 @@
 import {isElement, isField, isGroup, Node} from '@givewp/forms/types';
-import FieldNode from "./FieldNode";
-import ElementNode from "./ElementNode";
-import GroupNode from "./GroupNode";
+import FieldNode from './FieldNode';
+import ElementNode from './ElementNode';
+import GroupNode from './GroupNode';
 
 /**
  * Determine which node template to render
  *
  * @unreleased
  */
-export default function SectionNode({node}: { node: Node }) {
+export default function SectionNode({node}: {node: Node}) {
     if (isField(node)) {
-        return <FieldNode node={node}/>
+        return <FieldNode node={node} />;
     } else if (isElement(node)) {
-        return <ElementNode node={node}/>
+        return <ElementNode node={node} />;
     } else if (isGroup(node)) {
-        return <GroupNode node={node}/>
+        return <GroupNode node={node} />;
     } else {
         return null;
     }
 }
-
diff --git a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/form/Form.tsx b/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/form/Form.tsx
index b67ffe901..616599f1e 100644
--- a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/form/Form.tsx
+++ b/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/form/Form.tsx
@@ -9,9 +9,8 @@ import {useGiveDonationFormStore} from '../store';
 import type {Gateway, Section} from '@givewp/forms/types';
 import postData from '../utilities/postData';
 import {getFormTemplate, getSectionTemplate} from '../templates';
-import {useCallback} from "react";
-import PaymentDetails from "../fields/PaymentDetails";
-import SectionNode from "../fields/SectionNode";
+import {useCallback} from 'react';
+import SectionNode from '../fields/SectionNode';
 
 window.givewp.form = {
     useFormContext,
@@ -33,7 +32,7 @@ const schema = Joi.object({
     gatewayId: Joi.string().required().label('Payment Gateway').messages(messages),
     formId: Joi.number().required(),
     currency: Joi.string().required(),
-    company: Joi.string().optional().allow(null, '')
+    company: Joi.string().optional().allow(null, ''),
 }).unknown();
 
 const handleSubmitRequest = async (values, setError, gateway: Gateway) => {
@@ -75,12 +74,7 @@ export default function Form({defaultValues, sections}: PropTypes) {
         resolver: joiResolver(schema),
     });
 
-    const {
-        handleSubmit,
-        setError,
-        getValues,
-        control
-    } = methods;
+    const {handleSubmit, setError, getValues, control} = methods;
 
     const {errors, isSubmitting, isSubmitSuccessful} = useFormState({control});
 
@@ -117,13 +111,11 @@ export default function Form({defaultValues, sections}: PropTypes) {
             >
                 <>
                     {sections.map((section) => {
-                        if (section.name === 'payment-details') {
-                            return <PaymentDetails gateways={gateways} key={section.name} {...section} />;
-                        }
-
                         return (
                             <FormSectionTemplate key={section.name} section={section}>
-                                {section.nodes.map((node) => <SectionNode key={node.name} node={node}/>)}
+                                {section.nodes.map((node) => (
+                                    <SectionNode key={node.name} node={node} />
+                                ))}
                             </FormSectionTemplate>
                         );
                     })}
diff --git a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/elements/DonationSummary.tsx b/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/elements/DonationSummary.tsx
index 86f9b1dd8..09cbb3e2f 100644
--- a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/elements/DonationSummary.tsx
+++ b/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/elements/DonationSummary.tsx
@@ -1,5 +1,5 @@
-import {useMemo} from "react";
-import {__} from "@wordpress/i18n";
+import {useMemo} from 'react';
+import {__} from '@wordpress/i18n';
 
 export default function DonationSummary() {
     const {useWatch} = window.givewp.form;
@@ -12,23 +12,25 @@ export default function DonationSummary() {
                 currency: currency,
             }),
         [currency, navigator.language]
-    )
+    );
 
     return (
-        <ul className="givewp-elements-donationSummary__list">
-            <LineItem label={__('Payment Amount', 'give')} value={formatter.format(Number(amount))}/>
-            <LineItem label={__('Giving Frequency', 'give')} value={__('One time', 'give')}/>
-            <LineItem label={__('Donation Total', 'give')} value={formatter.format(Number(amount))}/>
-        </ul>
+        <>
+            <strong>Donation Summary</strong>
+            <ul className="givewp-elements-donationSummary__list">
+                <LineItem label={__('Payment Amount', 'give')} value={formatter.format(Number(amount))} />
+                <LineItem label={__('Giving Frequency', 'give')} value={__('One time', 'give')} />
+                <LineItem label={__('Donation Total', 'give')} value={formatter.format(Number(amount))} />
+            </ul>
+        </>
     );
-
 }
 
-const LineItem = ({label, value}: { label: string, value: string }) => {
+const LineItem = ({label, value}: {label: string; value: string}) => {
     return (
         <li className="givewp-elements-donationSummary__list-item">
             <div>{label}</div>
             <div>{value}</div>
         </li>
-    )
-}
+    );
+};
diff --git a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/Amount.tsx b/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/Amount.tsx
index 2b1d25306..8daf690e3 100644
--- a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/Amount.tsx
+++ b/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/Amount.tsx
@@ -33,7 +33,11 @@ export default function Amount({name, label, inputProps, levels, allowCustomAmou
                 {label}
                 <input type={allowCustomAmount ? 'text' : 'hidden'} {...inputProps} />
             </label>
-            {fieldError && <p>{fieldError}</p>}
+            {fieldError && (
+                <div className="error-message">
+                    <p role="alert">{fieldError}</p>
+                </div>
+            )}
         </div>
     );
 }
diff --git a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/Email.tsx b/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/Email.tsx
index a24f2f521..459d311c9 100644
--- a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/Email.tsx
+++ b/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/Email.tsx
@@ -4,11 +4,13 @@ export default function Email({label, fieldError, inputProps}: FieldProps) {
     return (
         <label>
             <span>{label}</span>
-            <input type="email" aria-invalid={fieldError ? "true" : "false"} {...inputProps} />
+            <input type="email" aria-invalid={fieldError ? 'true' : 'false'} {...inputProps} />
 
-            <div className="error-message">
-                {fieldError && <p role="alert">{fieldError}</p>}
-            </div>
+            {fieldError && (
+                <div className="error-message">
+                    <p role="alert">{fieldError}</p>
+                </div>
+            )}
         </label>
     );
 }
diff --git a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/Gateways.tsx b/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/Gateways.tsx
new file mode 100644
index 000000000..7e319cfa4
--- /dev/null
+++ b/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/Gateways.tsx
@@ -0,0 +1,46 @@
+import {UseFormRegisterReturn, useFormState} from 'react-hook-form';
+import {ErrorMessage} from '@hookform/error-message';
+import {useGiveDonationFormStore} from '../../store';
+import {FieldProps} from '@givewp/forms/propTypes';
+import {Gateway} from '@givewp/forms/types';
+
+export default function Gateways({inputProps}: FieldProps) {
+    const {errors} = useFormState();
+    const {gateways} = useGiveDonationFormStore();
+
+    return (
+        <>
+            <ul style={{listStyleType: 'none', padding: 0}}>
+                {gateways.map((gateway, index) => (
+                    <GatewayOption gateway={gateway} index={index} key={gateway.id} inputProps={inputProps} />
+                ))}
+            </ul>
+
+            <ErrorMessage
+                errors={errors}
+                name={'gatewayId'}
+                render={({message}) => <span className="give-next-gen__error-message">{message}</span>}
+            />
+        </>
+    );
+}
+
+type GatewayOptionProps = {
+    inputProps: UseFormRegisterReturn;
+    gateway: Gateway;
+    index: number;
+};
+
+function GatewayOption({gateway, index, inputProps}: GatewayOptionProps) {
+    const Fields = gateway.Fields;
+
+    return (
+        <li>
+            <input type="radio" value={gateway.id} id={gateway.id} defaultChecked={index === 0} {...inputProps} />
+            <label htmlFor={gateway.id}> Donate with {gateway.settings.label}</label>
+            <div className="givewp-fields-payment-gateway">
+                <Fields />
+            </div>
+        </li>
+    );
+}
diff --git a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/Text.tsx b/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/Text.tsx
index 2991f3176..4caafea57 100644
--- a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/Text.tsx
+++ b/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/Text.tsx
@@ -4,11 +4,13 @@ export default function Text({label, fieldError, inputProps}: FieldProps) {
     return (
         <label>
             <span>{label}</span>
-            <input type="text" aria-invalid={fieldError ? "true" : "false"} {...inputProps} />
+            <input type="text" aria-invalid={fieldError ? 'true' : 'false'} {...inputProps} />
 
-            <div className="error-message">
-                {fieldError && <p role="alert">{fieldError}</p>}
-            </div>
+            {fieldError && (
+                <div className="error-message">
+                    <p role="alert">{fieldError}</p>
+                </div>
+            )}
         </label>
     );
 }
diff --git a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/TextArea.tsx b/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/TextArea.tsx
index ae195407f..a9f522c81 100644
--- a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/TextArea.tsx
+++ b/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/fields/TextArea.tsx
@@ -5,7 +5,11 @@ export default function TextArea({label, fieldError, inputProps}: FieldProps) {
         <label>
             {label}
             <textarea {...inputProps} />
-            {fieldError && <p>{fieldError}</p>}
+            {fieldError && (
+                <div className="error-message">
+                    <p role="alert">{fieldError}</p>
+                </div>
+            )}
         </label>
     );
 }
diff --git a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/index.tsx b/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/index.tsx
index c4d0526cc..8b9208a44 100644
--- a/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/index.tsx
+++ b/src/NextGen/DonationForm/Blocks/DonationFormBlock/app/templates/index.tsx
@@ -7,28 +7,33 @@ import TextAreaField from './fields/TextArea';
 import EmailField from './fields/Email';
 import HiddenField from './fields/Hidden';
 import HtmlElement from './elements/Html';
-import DonationSummaryElement from './elements/DonationSummary'
+import DonationSummaryElement from './elements/DonationSummary';
 import NameGroup from './groups/Name';
 import SectionLayout, {SectionProps} from './layouts/Section';
 import Form, {FormProps} from './layouts/Form';
 import AmountField from './fields/Amount';
-import classNames from "classnames";
+import classNames from 'classnames';
+import Gateways from './fields/Gateways';
 
 export function NodeWrapper({
-                                type,
-                                nodeType,
-                                htmlTag: Element = 'div',
-                                name,
-                                children,
-                            }: { type: string; nodeType: string; htmlTag?: ElementType; name?: string; children: ReactNode }) {
+    type,
+    nodeType,
+    htmlTag: Element = 'div',
+    name,
+    children,
+}: {
+    type: string;
+    nodeType: string;
+    htmlTag?: ElementType;
+    name?: string;
+    children: ReactNode;
+}) {
     return (
-        <Element className={
-            classNames(
-                `givewp-${nodeType}`,
-                `givewp-${nodeType}-${type}`,
-                {[`givewp-${nodeType}-${type}-${name}`]: name},
-            )
-        }>
+        <Element
+            className={classNames(`givewp-${nodeType}`, `givewp-${nodeType}-${type}`, {
+                [`givewp-${nodeType}-${type}-${name}`]: name,
+            })}
+        >
             {children}
         </Element>
     );
@@ -51,6 +56,7 @@ const defaultTemplate = {
         textarea: TextAreaField,
         email: EmailField,
         hidden: HiddenField,
+        gateways: Gateways,
     },
     elements: {
         html: HtmlElement,
@@ -70,24 +76,26 @@ const activeTemplate = window.givewp.template.get();
 const template = {
     fields: {
         ...defaultTemplate.fields,
-        ...activeTemplate?.fields
+        ...activeTemplate?.fields,
     },
     elements: {
         ...defaultTemplate.elements,
-        ...activeTemplate?.elements
+        ...activeTemplate?.elements,
     },
     groups: {
         ...defaultTemplate.groups,
-        ...activeTemplate?.groups
+        ...activeTemplate?.groups,
     },
     layouts: {
         ...defaultTemplate.layouts,
-        ...activeTemplate?.layouts
+        ...activeTemplate?.layouts,
     },
-}
+};
 
 function getTemplate<NodeProps>(type: string, section: string, htmlTag?: string): FC<NodeProps> {
-    const Node = template[section].hasOwnProperty(type) ? withWrapper(template[section][type], section, type, htmlTag) : null;
+    const Node = template[section].hasOwnProperty(type)
+        ? withWrapper(template[section][type], section, type, htmlTag)
+        : null;
 
     let FilteredNode = applyFilters(`givewp/form/${section}/${type}`, Node);
     FilteredNode = applyFilters(`givewp/form/${section}`, Node, type);
diff --git a/src/NextGen/DonationForm/FormTemplates/ClassicFormTemplate/css/_donation-summary.scss b/src/NextGen/DonationForm/FormTemplates/ClassicFormTemplate/css/_donation-summary.scss
index 3afb10e0f..759658550 100644
--- a/src/NextGen/DonationForm/FormTemplates/ClassicFormTemplate/css/_donation-summary.scss
+++ b/src/NextGen/DonationForm/FormTemplates/ClassicFormTemplate/css/_donation-summary.scss
@@ -1,12 +1,24 @@
 .givewp-elements-donationSummary {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1.5rem;
+    margin-top: 2rem;
+    background-color: #f2f2f2;
+
+    & > strong {
+        font-size: clamp(1.25rem, 0.8rem + 1.3vw, 1.5rem);
+        font-weight: 400;
+    }
+
     &__list {
         list-style-type: none;
 
         &-item {
             display: flex;
-            padding: 15px 0;
+            padding: 1rem 0;
             justify-content: space-between;
-            border-block-start: 0.0625rem solid #ddd;
+            border-block-start: 0.0625rem solid #ccc;
 
             &:last-child {
                 font-weight: bold;
diff --git a/src/NextGen/DonationForm/FormTemplates/ClassicFormTemplate/css/_gateways.scss b/src/NextGen/DonationForm/FormTemplates/ClassicFormTemplate/css/_gateways.scss
index f2f37a219..8dd1cb3a6 100644
--- a/src/NextGen/DonationForm/FormTemplates/ClassicFormTemplate/css/_gateways.scss
+++ b/src/NextGen/DonationForm/FormTemplates/ClassicFormTemplate/css/_gateways.scss
@@ -1,4 +1,4 @@
-.givewp-layouts-section-payment-gateways {
+.givewp-fields-gateways {
     ul {
         display: flex;
         flex-direction: column;
diff --git a/src/NextGen/DonationForm/FormTemplates/ClassicFormTemplate/css/_inputs.scss b/src/NextGen/DonationForm/FormTemplates/ClassicFormTemplate/css/_inputs.scss
index 9c7505af0..8a4c17deb 100644
--- a/src/NextGen/DonationForm/FormTemplates/ClassicFormTemplate/css/_inputs.scss
+++ b/src/NextGen/DonationForm/FormTemplates/ClassicFormTemplate/css/_inputs.scss
@@ -14,6 +14,10 @@
     flex-basis: 15%;
 }
 
+.givewp-fields-hidden {
+    display: none;
+}
+
 input[type="text"]:not([name="amount"]), input[type="email"] {
     border-width: 0.078rem;
     border-style: solid;
diff --git a/src/NextGen/DonationForm/FormTemplates/ClassicFormTemplate/css/_sections.scss b/src/NextGen/DonationForm/FormTemplates/ClassicFormTemplate/css/_sections.scss
index a40a10866..14b42c728 100644
--- a/src/NextGen/DonationForm/FormTemplates/ClassicFormTemplate/css/_sections.scss
+++ b/src/NextGen/DonationForm/FormTemplates/ClassicFormTemplate/css/_sections.scss
@@ -36,3 +36,9 @@
         }
     }
 }
+
+.givewp-section-nodes {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}