diff --git a/src/DonorDashboards/resources/js/app/components/button/index.js b/src/DonorDashboards/resources/js/app/components/button/index.tsx
similarity index 60%
rename from src/DonorDashboards/resources/js/app/components/button/index.js
rename to src/DonorDashboards/resources/js/app/components/button/index.tsx
index 1053528d4a..e74d7e198f 100644
--- a/src/DonorDashboards/resources/js/app/components/button/index.js
+++ b/src/DonorDashboards/resources/js/app/components/button/index.tsx
@@ -1,8 +1,20 @@
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import cx from 'classnames';
+
 import './style.scss';
 
-const Button = ({icon, children, onClick, href, type, variant, ...rest}) => {
+type ButtonProps = {
+    classnames?: string;
+    icon?: any;
+    children: React.ReactNode;
+    onClick?: () => void;
+    href?: string;
+    type?: 'button' | 'submit' | 'reset';
+    variant?: boolean;
+    disabled?: boolean;
+};
+
+const Button = ({icon, children, onClick, href, type, variant,classnames, ...rest}: ButtonProps) => {
     const handleHrefClick = (e) => {
         e.preventDefault();
         window.parent.location = href;
@@ -23,14 +35,15 @@ const Button = ({icon, children, onClick, href, type, variant, ...rest}) => {
     }
     return (
         <button
-            className={cx('give-donor-dashboard-button', 'give-donor-dashboard-button--primary', {
-                'give-donor-dashboard-button--variant': variant,
+            className={cx('give-donor-dashboard-button', classnames, {
+                ['give-donor-dashboard-button--primary']: !variant,
+                ['give-donor-dashboard-button--variant']: variant,
             })}
             onClick={onClick ? () => onClick() : null}
             type={type}
             {...rest}
         >
-            {children}
+            <span>{children}</span>
             {icon && <FontAwesomeIcon icon={icon} />}
         </button>
     );
diff --git a/src/DonorDashboards/resources/js/app/components/button/style.scss b/src/DonorDashboards/resources/js/app/components/button/style.scss
index e9e8db6123..201cadf4cb 100644
--- a/src/DonorDashboards/resources/js/app/components/button/style.scss
+++ b/src/DonorDashboards/resources/js/app/components/button/style.scss
@@ -6,9 +6,10 @@
     padding: 12px 20px;
     font-size: 16px;
     font-weight: 600;
-    border: 1px solid #0073aa;
+    border: 1px solid var(--give-donor-dashboard-accent-color);
     border-radius: 3px;
     display: inline-flex;
+    width: fit-content;
     align-items: center;
     box-shadow: 0 0 0 0 #7ec980, 0 0 0 0 #4fa651;
     transition: box-shadow 0.1s ease, background-color ease-in 0.3s;
@@ -28,28 +29,53 @@
     }
 
     &.give-donor-dashboard-button--primary {
-        flex: 1;
-        max-width: 240px;
-        border: 1px solid #0073aa;
         color: #fff !important;
-        background: #0073aa;
+        position: relative;
+        background: none;
         box-shadow: none;
         justify-content: center;
+        overflow: hidden;
+
+        &:before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            background: var(--give-donor-dashboard-accent-color);
+            z-index: 0;
+            transition: filter 0.3s ease;
+        }
+
+        &:hover:before {
+            filter: brightness(90%); // Darkens the background on hover
+        }
+
+        &.disabled:before {
+            display: none;
+        }
+
+        span {
+            position: relative;
+            z-index: 1;
+        }
     }
 
     &.give-donor-dashboard-button--variant {
-        flex: 1;
-        width: 240px;
-        color: #0073aa !important;
+        color: var(--give-donor-dashboard-accent-color) !important;
         background: var(--givewp-shades-white);
         box-shadow: none;
-        border: 1px solid #0073aa;
+        border: 1px solid var(--give-donor-dashboard-accent-color);
         margin: 0;
         justify-content: center;
 
         &:hover {
-            background: #0073aa;
-            color: #fff !important;
+            filter: brightness(90%);
+        }
+
+        span {
+            color: inherit;
         }
     }
 }
diff --git a/src/DonorDashboards/resources/js/app/components/select-control/index.js b/src/DonorDashboards/resources/js/app/components/select-control/index.js
index f641589889..778fc0cb86 100644
--- a/src/DonorDashboards/resources/js/app/components/select-control/index.js
+++ b/src/DonorDashboards/resources/js/app/components/select-control/index.js
@@ -22,6 +22,10 @@ const SelectControl = ({value, options, isLoading, label = null, onChange = null
 
     const selectedOptionValue = options !== null ? options.filter((option) => option.value === value) : null;
     const selectStyles = {
+        menu: (provided) => ({
+            ...provided,
+           zIndex: '9999',
+        }),
         control: (provided) => ({
             ...provided,
             fontSize: '14px',
diff --git a/src/DonorDashboards/resources/js/app/components/select-control/style.scss b/src/DonorDashboards/resources/js/app/components/select-control/style.scss
index fd32a75f92..042ea3cdc1 100644
--- a/src/DonorDashboards/resources/js/app/components/select-control/style.scss
+++ b/src/DonorDashboards/resources/js/app/components/select-control/style.scss
@@ -1,5 +1,7 @@
 /* stylelint-disable  function-url-quotes, selector-class-pattern */
 .give-donor-dashboard-select-control {
+    display: flex;
+    flex-direction: column;
     margin-top: 10px;
 
     .give-donor-dashboard-select-control__label {
diff --git a/src/DonorDashboards/resources/js/app/components/subscription-cancel-modal/index.js b/src/DonorDashboards/resources/js/app/components/subscription-cancel-modal/index.js
deleted file mode 100644
index 777ae0b589..0000000000
--- a/src/DonorDashboards/resources/js/app/components/subscription-cancel-modal/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import {__} from '@wordpress/i18n';
-import Button from '../button';
-
-import './style.scss';
-
-const SubscriptionCancel = ({onRequestClose, handleCancel, cancelling}) => {
-    return (
-        <div className="give-donor-dashboard-cancel-modal__buttons">
-            <Button disabled={cancelling} onClick={() => handleCancel()}>
-                {!cancelling ? __('Yes, cancel', 'give') : __('Cancelling...', 'give')}
-            </Button>
-            <a className="give-donor-dashboard-cancel-modal__cancel" onClick={() => onRequestClose()}>
-                {__('Nevermind', 'give')}
-            </a>
-        </div>
-    );
-};
-
-export default SubscriptionCancel;
diff --git a/src/DonorDashboards/resources/js/app/components/subscription-cancel-modal/index.tsx b/src/DonorDashboards/resources/js/app/components/subscription-cancel-modal/index.tsx
new file mode 100644
index 0000000000..b0845929e6
--- /dev/null
+++ b/src/DonorDashboards/resources/js/app/components/subscription-cancel-modal/index.tsx
@@ -0,0 +1,59 @@
+import {useState} from 'react';
+import {__} from '@wordpress/i18n';
+import Button from '../button';
+import {cancelSubscriptionWithAPI} from './utils';
+
+import ModalDialog from '@givewp/components/AdminUI/ModalDialog';
+import DashboardLoadingSpinner from '../dashboard-loading-spinner';
+import './style.scss';
+
+type SubscriptionCancelProps = {
+    isOpen: boolean;
+    toggleModal: () => void;
+    id: number;
+};
+
+const SubscriptionCancelModal = ({isOpen, toggleModal, id}: SubscriptionCancelProps) => {
+    const [loading, setLoading] = useState<boolean>(false);
+
+    const handleCancel = async () => {
+        setLoading(true);
+        await cancelSubscriptionWithAPI(id);
+        setLoading(false);
+        toggleModal();
+    };
+
+    return (
+        <ModalDialog
+            wrapperClassName={'give-donor-dashboard-cancel-modal'}
+            icon={
+                <svg width="20" height="20" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M11 0.5C13.7848 0.5 16.4555 1.60625 18.4246 3.57538C20.3938 5.54451 21.5 8.21523 21.5 11C21.5 13.7848 20.3938 16.4555 18.4246 18.4246C16.4555 20.3938 13.7848 21.5 11 21.5C8.21523 21.5 5.54451 20.3938 3.57538 18.4246C1.60625 16.4555 0.5 13.7848 0.5 11C0.5 8.21523 1.60625 5.54451 3.57538 3.57538C5.54451 1.60625 8.21523 0.5 11 0.5ZM11 5C10.8096 4.99984 10.6212 5.0394 10.4469 5.11615C10.2726 5.1929 10.1162 5.30516 9.98778 5.44575C9.85933 5.58635 9.76161 5.75218 9.70086 5.93268C9.64012 6.11317 9.61769 6.30435 9.635 6.494L10.1825 12.503C10.2037 12.705 10.299 12.892 10.45 13.028C10.6009 13.1639 10.7969 13.2391 11 13.2391C11.2031 13.2391 11.3991 13.1639 11.55 13.028C11.701 12.892 11.7963 12.705 11.8175 12.503L12.3635 6.494C12.3808 6.30447 12.3584 6.11342 12.2978 5.93303C12.2371 5.75264 12.1395 5.58688 12.0112 5.4463C11.8829 5.30573 11.7267 5.19344 11.5526 5.1166C11.3785 5.03976 11.1903 5.00005 11 5ZM11 17C11.3183 17 11.6235 16.8736 11.8485 16.6485C12.0736 16.4235 12.2 16.1183 12.2 15.8C12.2 15.4817 12.0736 15.1765 11.8485 14.9515C11.6235 14.7264 11.3183 14.6 11 14.6C10.6817 14.6 10.3765 14.7264 10.1515 14.9515C9.92643 15.1765 9.8 15.4817 9.8 15.8C9.8 16.1183 9.92643 16.4235 10.1515 16.6485C10.3765 16.8736 10.6817 17 11 17Z"
+                        fill="#E6301B"
+                    />
+                </svg>
+            }
+            title={__('Cancel Subscription', 'give')}
+            showHeader={true}
+            isOpen={isOpen}
+            handleClose={toggleModal}
+        >
+            <p className={'give-donor-dashboard-cancel-modal__description'}>
+                {__('Are you sure you want to cancel your subscription?', 'give')}
+            </p>
+            <div className={'give-donor-dashboard-cancel-modal__buttons'}>
+                <Button classnames={'give-donor-dashboard-cancel-modal__buttons__button'} disabled={loading} onClick={toggleModal} variant>
+                    {__('Nevermind', 'give')}
+                </Button>
+                <Button classnames={'give-donor-dashboard-cancel-modal__buttons__button'} disabled={loading} onClick={handleCancel}>
+                    {__('Yes, cancel', 'give')}
+                </Button>
+            </div>
+
+            {loading && <DashboardLoadingSpinner />}
+        </ModalDialog>
+    );
+};
+
+export default SubscriptionCancelModal;
diff --git a/src/DonorDashboards/resources/js/app/components/subscription-cancel-modal/style.scss b/src/DonorDashboards/resources/js/app/components/subscription-cancel-modal/style.scss
index 74ece8149a..36a637dcfd 100644
--- a/src/DonorDashboards/resources/js/app/components/subscription-cancel-modal/style.scss
+++ b/src/DonorDashboards/resources/js/app/components/subscription-cancel-modal/style.scss
@@ -1,7 +1,4 @@
 /* stylelint-disable selector-class-pattern */
-
-/* stylelint-disable selector-class-pattern */
-
 .givewp-modal-wrapper.give-donor-dashboard-cancel-modal {
     -webkit-backdrop-filter: blur(4px);
     backdrop-filter: blur(4px);
@@ -21,30 +18,54 @@
         }
 
         .givewp-modal-content {
-            padding: 1.5rem 1.5rem 2rem 1.5rem;
+            padding: 1.5rem;
+
+            .give-donor-dashboard-cancel-modal__description {
+                margin: 0 0 1.5rem 0;
+                font-size: 1rem;
+                font-weight: 500;
+                color: #1F2937;
+            }
 
             .give-donor-dashboard-cancel-modal__buttons {
                 display: flex;
-                justify-content: space-between;
                 align-items: center;
                 gap: 2rem;
+                width: auto;
+                margin: 0;
 
-                .give-donor-dashboard-cancel-modal__cancel {
+                &__button.give-donor-dashboard-button.give-donor-dashboard-button--primary {
                     flex: 1;
-                    display: inline-flex;
-                    align-items: center;
-                    justify-content: center;
-                    max-width: 240px;
-                    padding: 12px 20px;
-                    font-size: 16px;
-                    font-weight: 600;
-                    border-radius: 3px;
-                    color: var(--give-donor-dashboard-accent-color) !important;
-                    background: var(--givewp-shades-white);
-                    box-shadow: none;
-                    border: 1px solid var(--give-donor-dashboard-accent-color);
                     margin: 0;
-                    cursor: pointer;
+                    background-color: #d92d0b;
+                    border-color: inherit;
+                    color: #fff;
+
+                    &:before {
+                        display: none;
+                    }
+
+                    &:hover {
+                        background-color: #F2320C;
+                    }
+                }
+
+                &__button.give-donor-dashboard-button.give-donor-dashboard-button--variant {
+                    flex: 1;
+                    margin: 0;
+                    border-color: #9CA0AF;
+                    color: #000 !important;
+                    filter: none;
+
+                    &:before {
+                        display: none;
+                    }
+
+                    &:hover {
+                        background-color: #F9FAFB;
+                        border-color: #9CA0AF;
+                        color: #000 !important;
+                    }
                 }
             }
         }
diff --git a/src/DonorDashboards/resources/js/app/components/subscription-manager/amount-control/index.js b/src/DonorDashboards/resources/js/app/components/subscription-manager/amount-control/index.js
index 084749b3da..9bd9b56346 100644
--- a/src/DonorDashboards/resources/js/app/components/subscription-manager/amount-control/index.js
+++ b/src/DonorDashboards/resources/js/app/components/subscription-manager/amount-control/index.js
@@ -99,14 +99,12 @@ const AmountControl = ({currency, onChange, value, options, min, max}) => {
     return (
         <div className="give-donor-dashboard-amount-inputs">
             <FieldRow>
-                <div>
-                    <SelectControl
+                <SelectControl
                         label={__('Subscription Amount', 'give')}
                         options={options}
                         value={selectValue}
                         onChange={setSelectValue}
                     />
-                </div>
                 <div>
                     {selectValue === CUSTOM_AMOUNT && (
                         <div className="give-donor-dashboard-currency-control">
diff --git a/src/DonorDashboards/resources/js/app/components/subscription-manager/amount-control/style.scss b/src/DonorDashboards/resources/js/app/components/subscription-manager/amount-control/style.scss
index cf0f2ec23f..0c8a143597 100644
--- a/src/DonorDashboards/resources/js/app/components/subscription-manager/amount-control/style.scss
+++ b/src/DonorDashboards/resources/js/app/components/subscription-manager/amount-control/style.scss
@@ -9,6 +9,23 @@ $errorColor: #c91f1f;
     color: $errorColor;
 }
 
+.give-donor-dashboard-amount-inputs {
+    display: flex;
+    flex-direction: column;
+
+
+    .give-donor-dashboard-field-row {
+        display: flex;
+        padding: 0;
+
+        .give-donor-dashboard-select-control {
+            display: flex;
+            min-width: 100%;
+            margin: 0;
+        }
+    }
+}
+
 .give-donor-dashboard-currency-control {
     margin-top: 10px;
 
diff --git a/src/DonorDashboards/resources/js/app/components/subscription-manager/field-content/index.tsx b/src/DonorDashboards/resources/js/app/components/subscription-manager/field-content/index.tsx
deleted file mode 100644
index 7398ddc2dc..0000000000
--- a/src/DonorDashboards/resources/js/app/components/subscription-manager/field-content/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import './style.scss';
-
-export function FieldContent({classNames, children}) {
-    return <div className={`give-donor-dashboard-field-content ${classNames}`}>{children}</div>;
-}
diff --git a/src/DonorDashboards/resources/js/app/components/subscription-manager/field-content/style.scss b/src/DonorDashboards/resources/js/app/components/subscription-manager/field-content/style.scss
deleted file mode 100644
index b9375a67de..0000000000
--- a/src/DonorDashboards/resources/js/app/components/subscription-manager/field-content/style.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.give-donor-dashboard-field-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 22.5rem;
-    padding-bottom: 5rem;
-}
diff --git a/src/DonorDashboards/resources/js/app/components/subscription-manager/hooks/pause-subscription.ts b/src/DonorDashboards/resources/js/app/components/subscription-manager/hooks/pause-subscription.ts
new file mode 100644
index 0000000000..c3f41b3f3c
--- /dev/null
+++ b/src/DonorDashboards/resources/js/app/components/subscription-manager/hooks/pause-subscription.ts
@@ -0,0 +1,46 @@
+import {useState} from 'react';
+import {managePausingSubscriptionWithAPI} from '../utils';
+
+export type pauseDuration = number;
+type id = string;
+
+const usePauseSubscription = (id: id) => {
+    const [loading, setLoading] = useState<boolean>(false);
+
+    const handlePause = async (pauseDuration: pauseDuration) => {
+        setLoading(true);
+        try {
+            await managePausingSubscriptionWithAPI({
+                id,
+                intervalInMonths: pauseDuration,
+            });
+        } catch (error) {
+            console.error('Error pausing subscription:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleResume = async () => {
+        setLoading(true);
+        try {
+            await managePausingSubscriptionWithAPI({
+                id,
+                action: 'resume',
+            });
+        } catch (error) {
+            console.error('Error resuming subscription:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return {
+        loading,
+        setLoading,
+        handlePause,
+        handleResume,
+    };
+};
+
+export default usePauseSubscription;
diff --git a/src/DonorDashboards/resources/js/app/components/subscription-manager/index.js b/src/DonorDashboards/resources/js/app/components/subscription-manager/index.js
deleted file mode 100644
index 5a75b4de09..0000000000
--- a/src/DonorDashboards/resources/js/app/components/subscription-manager/index.js
+++ /dev/null
@@ -1,191 +0,0 @@
-import {Fragment, useMemo, useRef, useState} from 'react';
-import FieldRow from '../field-row';
-import {FieldContent} from './field-content';
-import Button from '../button';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {__} from '@wordpress/i18n';
-import AmountControl from './amount-control';
-import PaymentMethodControl from './payment-method-control';
-import ModalDialog from '@givewp/components/AdminUI/ModalDialog';
-import {managePausingSubscriptionWithAPI, updateSubscriptionWithAPI} from './utils';
-import PauseDurationDropdown from './pause-duration-dropdown';
-import DashboardLoadingSpinner from '../dashboard-loading-spinner';
-
-import './style.scss';
-
-/**
- * Normalize an amount
- *
- * @param {string} float
- * @param {number} decimals
- * @return {string|NaN}
- */
-const normalizeAmount = (float, decimals) => Number.parseFloat(float).toFixed(decimals);
-
-const SubscriptionManager = ({id, subscription}) => {
-    const gatewayRef = useRef();
-    const [isOpen, setIsOpen] = useState(false);
-    const [loading, setLoading] = useState(false);
-
-    const [amount, setAmount] = useState(() =>
-        normalizeAmount(subscription.payment.amount.raw, subscription.payment.currency.numberDecimals)
-    );
-    const [isUpdating, setIsUpdating] = useState(false);
-    const [updated, setUpdated] = useState(false);
-
-    const showPausingControls =
-        subscription.gateway.can_pause && !['Quarterly', 'Yearly'].includes(subscription.payment.frequency);
-
-    // Prepare data for amount control
-    const {max, min, options} = useMemo(() => {
-        const {numberDecimals} = subscription.payment.currency;
-        const {custom_amount} = subscription.form;
-
-        const options = subscription.form.amounts.map((amount) => ({
-            value: normalizeAmount(amount.raw, numberDecimals),
-            label: amount.formatted,
-        }));
-
-        if (custom_amount) {
-            options.push({
-                value: 'custom_amount',
-                label: __('Custom Amount', 'give'),
-            });
-        }
-
-        return {
-            max: normalizeAmount(custom_amount?.maximum, numberDecimals),
-            min: normalizeAmount(custom_amount?.minimum, numberDecimals),
-            options,
-        };
-    }, [subscription]);
-
-    const handleUpdate = async () => {
-        if (isUpdating) {
-            return;
-        }
-
-        setIsUpdating(true);
-
-        const paymentMethod = gatewayRef.current ? await gatewayRef.current.getPaymentMethod() : {};
-
-        if ('error' in paymentMethod) {
-            setIsUpdating(false);
-            return;
-        }
-
-        await updateSubscriptionWithAPI({
-            id,
-            amount,
-            paymentMethod,
-        });
-
-        setUpdated(true);
-        setIsUpdating(false);
-    };
-
-    const handlePause = async (pauseDuration) => {
-        setLoading(true);
-        await managePausingSubscriptionWithAPI({
-            id,
-            intervalInMonths: pauseDuration,
-        });
-        setLoading(false);
-    };
-
-    const handleResume = async () => {
-        setLoading(true);
-        await managePausingSubscriptionWithAPI({
-            id,
-            action: 'resume',
-        });
-        setLoading(false);
-    };
-
-    const toggleModal = () => {
-        setIsOpen(!isOpen);
-    };
-
-    return (
-        <Fragment>
-            <AmountControl
-                currency={subscription.payment.currency}
-                options={options}
-                max={max}
-                min={min}
-                value={amount}
-                onChange={setAmount}
-            />
-            <PaymentMethodControl
-                forwardedRef={gatewayRef}
-                label={__('Payment Method', 'give')}
-                gateway={subscription.gateway}
-            />
-            <FieldContent classNames={'give-donor-dashboard__subscription-manager'}>
-                <FieldRow>
-                    <div>
-                        <Button onClick={handleUpdate}>
-                            {updated ? (
-                                <Fragment>
-                                    {__('Updated', 'give')} <FontAwesomeIcon icon="check" fixedWidth />
-                                </Fragment>
-                            ) : (
-                                <Fragment>
-                                    {__('Update Subscription', 'give')}{' '}
-                                    <FontAwesomeIcon
-                                        className={
-                                            isUpdating ? 'give-donor-dashboard__subscription-manager-spinner' : ''
-                                        }
-                                        icon={isUpdating ? 'spinner' : 'save'}
-                                        fixedWidth
-                                    />
-                                </Fragment>
-                            )}
-                        </Button>
-                    </div>
-                </FieldRow>
-
-                {loading && <DashboardLoadingSpinner />}
-
-                {showPausingControls && (
-                    <FieldRow>
-                        <div className={'give-donor-dashboard__subscription-manager-pause-content'}>
-                            <p className={'give-donor-dashboard__subscription-manager-resume-header'}>
-                                {__('Subscription Renewal', 'give')}
-                            </p>
-                            <ModalDialog
-                                wrapperClassName={'give-donor-dashboard__subscription-manager-modal'}
-                                title={__('Pause Subscription', 'give')}
-                                showHeader={true}
-                                isOpen={isOpen}
-                                handleClose={toggleModal}
-                            >
-                                <PauseDurationDropdown handlePause={handlePause} closeModal={toggleModal} />
-                            </ModalDialog>
-                            {subscription.payment.status.id === 'active' ? (
-                                <div className={'give-donor-dashboard__subscription-manager-pause-container'}>
-                                    <Button variant onClick={toggleModal}>
-                                        {__('Pause', 'give')}
-                                    </Button>
-                                </div>
-                            ) : (
-                                <>
-                                    <Button variant onClick={handleResume}>
-                                        {__('Resume', 'give')}{' '}
-                                    </Button>
-                                    <span className={'give-donor-dashboard__subscription-manager-resume-description'}>
-                                        {__(
-                                            'When you resume, your donations will resume on the next scheduled renewal date.',
-                                            'give'
-                                        )}
-                                    </span>
-                                </>
-                            )}
-                        </div>
-                    </FieldRow>
-                )}
-            </FieldContent>
-        </Fragment>
-    );
-};
-export default SubscriptionManager;
diff --git a/src/DonorDashboards/resources/js/app/components/subscription-manager/index.tsx b/src/DonorDashboards/resources/js/app/components/subscription-manager/index.tsx
new file mode 100644
index 0000000000..f7d8793ad0
--- /dev/null
+++ b/src/DonorDashboards/resources/js/app/components/subscription-manager/index.tsx
@@ -0,0 +1,172 @@
+import {Fragment, useMemo, useRef, useState} from 'react';
+import FieldRow from '../field-row';
+import Button from '../button';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {__} from '@wordpress/i18n';
+import AmountControl from './amount-control';
+import PaymentMethodControl from './payment-method-control';
+import ModalDialog from '@givewp/components/AdminUI/ModalDialog';
+import {updateSubscriptionWithAPI} from './utils';
+import PauseDurationDropdown from './pause-duration-dropdown';
+import DashboardLoadingSpinner from '../dashboard-loading-spinner';
+import usePauseSubscription from './hooks/pause-subscription';
+import {cancelSubscriptionWithAPI} from '../subscription-cancel-modal/utils';
+
+import './style.scss';
+import SubscriptionCancelModal from '../subscription-cancel-modal';
+
+/**
+ * Normalize an amount
+ *
+ * @param {string} float
+ * @param {number} decimals
+ * @return {string|NaN}
+ */
+const normalizeAmount = (float, decimals) => Number.parseFloat(float).toFixed(decimals);
+
+const SubscriptionManager = ({id, subscription}) => {
+    const gatewayRef = useRef();
+    const [isPauseModalOpen, setIsPauseModalOpen] = useState(false);
+    const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
+
+    const [amount, setAmount] = useState(() =>
+        normalizeAmount(subscription.payment.amount.raw, subscription.payment.currency.numberDecimals)
+    );
+    const [isUpdating, setIsUpdating] = useState(false);
+    const [updated, setUpdated] = useState(false);
+    const {handlePause, handleResume, loading} = usePauseSubscription(id);
+
+    const subscriptionStatus = subscription.payment.status.id;
+
+    const showPausingControls =
+        subscription.gateway.can_pause && !['Quarterly', 'Yearly'].includes(subscription.payment.frequency);
+
+    // Prepare data for amount control
+    const {max, min, options} = useMemo(() => {
+        const {numberDecimals} = subscription.payment.currency;
+        const {custom_amount} = subscription.form;
+
+        const options = subscription.form.amounts.map((amount) => ({
+            value: normalizeAmount(amount.raw, numberDecimals),
+            label: amount.formatted,
+        }));
+
+        if (custom_amount) {
+            options.push({
+                value: 'custom_amount',
+                label: __('Custom Amount', 'give'),
+            });
+        }
+
+        return {
+            max: normalizeAmount(custom_amount?.maximum, numberDecimals),
+            min: normalizeAmount(custom_amount?.minimum, numberDecimals),
+            options,
+        };
+    }, [subscription]);
+
+    const handleUpdate = async () => {
+        if (isUpdating) {
+            return;
+        }
+
+        setIsUpdating(true);
+
+        // @ts-ignore
+        const paymentMethod = gatewayRef.current ? await gatewayRef.current.getPaymentMethod() : {};
+
+        if ('error' in paymentMethod) {
+            setIsUpdating(false);
+            return;
+        }
+
+        await updateSubscriptionWithAPI({
+            id,
+            amount,
+            paymentMethod,
+        });
+
+        setUpdated(true);
+        setIsUpdating(false);
+    };
+
+    const toggleModal = () => {
+        setIsPauseModalOpen(!isPauseModalOpen);
+    };
+
+    return (
+        <div className={'give-donor-dashboard__subscription-manager'}>
+            <AmountControl
+                currency={subscription.payment.currency}
+                options={options}
+                max={max}
+                min={min}
+                value={amount}
+                onChange={setAmount}
+            />
+            <PaymentMethodControl
+                forwardedRef={gatewayRef}
+                label={__('Payment Method', 'give')}
+                gateway={subscription.gateway}
+            />
+
+            {loading && <DashboardLoadingSpinner />}
+
+            <FieldRow>
+                {showPausingControls && (
+                    <>
+                        <ModalDialog
+                            wrapperClassName={'give-donor-dashboard__subscription-manager-modal'}
+                            title={__('Pause Subscription', 'give')}
+                            showHeader={true}
+                            isOpen={isPauseModalOpen}
+                            handleClose={toggleModal}
+                        >
+                            <PauseDurationDropdown handlePause={handlePause} closeModal={toggleModal} />
+                        </ModalDialog>
+                        {subscriptionStatus === 'active' ? (
+                            <Button variant onClick={toggleModal}>
+                                {__('Pause Subscription', 'give')}
+                            </Button>
+                        ) : (
+                            <Button variant onClick={handleResume}>
+                                {__('Resume Subscription', 'give')}
+                            </Button>
+                        )}
+                    </>
+                )}
+
+                <Button disabled={subscriptionStatus !== 'active'} classnames={subscriptionStatus !== 'active' && 'disabled'} onClick={handleUpdate}>
+                    {updated ? (
+                        <Fragment>
+                            {__('Updated', 'give')} <FontAwesomeIcon icon="check" fixedWidth />
+                        </Fragment>
+                    ) : (
+                        <Fragment>
+                            {__('Update Subscription', 'give')}
+                            <FontAwesomeIcon
+                                className={isUpdating ? 'give-donor-dashboard__subscription-manager-spinner' : ''}
+                                icon={isUpdating ? 'spinner' : 'save'}
+                                fixedWidth
+                            />
+                        </Fragment>
+                    )}
+                </Button>
+            </FieldRow>
+            {isCancelModalOpen && (
+                <SubscriptionCancelModal
+                    isOpen={isCancelModalOpen}
+                    toggleModal={() => setIsCancelModalOpen(!isCancelModalOpen)}
+                    id={id}
+                />
+            )}
+            <button
+                className={'give-donor-dashboard__subscription-manager__cancel'}
+                onClick={() => setIsCancelModalOpen(true)}
+            >
+                {__('Cancel Subscription', 'give')}
+            </button>
+        </div>
+    );
+};
+export default SubscriptionManager;
diff --git a/src/DonorDashboards/resources/js/app/components/subscription-manager/pause-duration-dropdown/index.tsx b/src/DonorDashboards/resources/js/app/components/subscription-manager/pause-duration-dropdown/index.tsx
index e6f51e422a..db48f4fdb3 100644
--- a/src/DonorDashboards/resources/js/app/components/subscription-manager/pause-duration-dropdown/index.tsx
+++ b/src/DonorDashboards/resources/js/app/components/subscription-manager/pause-duration-dropdown/index.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import './style.scss';
 
 type PauseDurationDropDownProps = {
-    handlePause: (pauseDuration: number | null) => void;
+    handlePause: (pauseDuration: number) => void;
     closeModal: () => void;
 };
 
diff --git a/src/DonorDashboards/resources/js/app/components/subscription-manager/pause-duration-dropdown/style.scss b/src/DonorDashboards/resources/js/app/components/subscription-manager/pause-duration-dropdown/style.scss
index 579993d3dd..d53f971ce5 100644
--- a/src/DonorDashboards/resources/js/app/components/subscription-manager/pause-duration-dropdown/style.scss
+++ b/src/DonorDashboards/resources/js/app/components/subscription-manager/pause-duration-dropdown/style.scss
@@ -1,4 +1,4 @@
-.givewp-modal-wrapper.give-donor-dashboard__subscription-manager-modal {
+.givewp-modal-wrapper.give-donor-dashboard__subscription-manager-modal, .givewp-modal-wrapper.give-donor-dashboard-cancel-modal {
     -webkit-backdrop-filter: blur(4px);
     backdrop-filter: blur(4px);
     background-color: rgba(0, 0, 0, 0.5) !important;
@@ -48,7 +48,7 @@
                     padding: 0.75rem 1rem;
                     background: none;
                     font-size: 1rem;
-                    font-weight: 600;
+                    font-weight: 500;
                     border-radius: 4px;
                     border: none;
                     outline: none;
@@ -65,13 +65,17 @@
                     margin-top: 3rem;
                     padding: 1rem 2rem;
                     border-radius: 4px;
-                    background: #0073aa;
+                    background: #2271B1;
                     color: #fff;
                     font-size: 1rem;
                     font-weight: 500;
                     border: none;
                     outline: none;
                     cursor: pointer;
+
+                    &:hover {
+                        background-color: #135E96;
+                    }
                 }
             }
         }
diff --git a/src/DonorDashboards/resources/js/app/components/subscription-manager/style.scss b/src/DonorDashboards/resources/js/app/components/subscription-manager/style.scss
index b7b3ed1cc4..9cfef69f19 100644
--- a/src/DonorDashboards/resources/js/app/components/subscription-manager/style.scss
+++ b/src/DonorDashboards/resources/js/app/components/subscription-manager/style.scss
@@ -1,29 +1,58 @@
 /* stylelint-disable selector-class-pattern */
 
 .give-donor-dashboard__subscription-manager {
+    display: flex;
+    flex-direction: column;
+
     &-spinner {
         animation: spin infinite 1s linear;
     }
 
-    .give-donor-dashboard__subscription-manager-pause-container {
-        margin-bottom: 44px;
-        
+    .give-donor-dashboard-button--primary, .give-donor-dashboard-button--variant {
+        max-width: fit-content;
+    }
+
+    .give-donor-dashboard-button.give-donor-dashboard-button--variant{
+        position: relative;
+
+        &:hover:before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            background: var(--give-donor-dashboard-accent-color);
+            z-index: 0;
+            transition: filter 0.3s ease;
+            filter: brightness(125%);
+            opacity: .15;
+        }
+
+        span {
+            position: relative;
+            z-index: 1;
+            color: var(--give-donor-dashboard-accent-color);
+        }
     }
 
-    &-resume-header {
-        margin: 0 0 10px 0;
-        color: #555;
-        font-size: .875rem;
-        font-weight: 500;
+    &__cancel {
+        color: #d92d0b;
+        padding: 0;
+        margin: 2rem 0 1.75rem 0;
+        background: none;
+        font-size: .873rem;
+        font-weight: 600;
+        text-align: right;
+        border: none;
+        outline: none;
+        cursor: pointer;
     }
 
-    &-resume-description {
-        display: block;
-        width: 70%;
-        margin-top: 10px;
-        color: #888;
-        font-size: .875rem;
-        font-weight: normal;
+    .give-donor-dashboard-field-row {
+        display: flex;
+        justify-content: flex-end;
+        margin: 10px 0;
     }
 }
 
diff --git a/src/DonorDashboards/resources/js/app/components/subscription-manager/subscription-status/index.tsx b/src/DonorDashboards/resources/js/app/components/subscription-manager/subscription-status/index.tsx
index 6c01b3481f..1bfbc3e892 100644
--- a/src/DonorDashboards/resources/js/app/components/subscription-manager/subscription-status/index.tsx
+++ b/src/DonorDashboards/resources/js/app/components/subscription-manager/subscription-status/index.tsx
@@ -5,16 +5,12 @@ import {__} from '@wordpress/i18n';
 import './style.scss';
 
 export default function SubscriptionStatus({subscription}) {
-    const isActive = subscription.payment.status.id === 'active';
+    const status = subscription.payment.status.id;
+    const label = subscription.payment.status.label;
 
     return (
-        <div
-            className={cx('givewp-dashboard-subscription-status', {
-                ['givewp-dashboard-subscription-status--active']: isActive,
-                ['givewp-dashboard-subscription-status--paused']: !isActive,
-            })}
-        >
-            {isActive ? __('Active', 'give') : __('Paused', 'give')}
+        <div className={`givewp-dashboard-subscription-status givewp-dashboard-subscription-status--${status}`}>
+            {label}
         </div>
     );
 }
diff --git a/src/DonorDashboards/resources/js/app/components/subscription-manager/subscription-status/style.scss b/src/DonorDashboards/resources/js/app/components/subscription-manager/subscription-status/style.scss
index f6a31d4f90..b5d73afef8 100644
--- a/src/DonorDashboards/resources/js/app/components/subscription-manager/subscription-status/style.scss
+++ b/src/DonorDashboards/resources/js/app/components/subscription-manager/subscription-status/style.scss
@@ -1,19 +1,24 @@
 .givewp-dashboard-subscription-status {
     position: absolute;
-    // content container padding
     right: 30px;
-    color: #fff;
-    padding: .5rem 0;
-    min-width: 8rem;
-    border-radius: 3px;
+    color: #000;
+    padding: .25rem .75rem;
+    width: fit-content;
+    border-radius: 50px;
+    font-size: 12px;
     font-weight: normal;
     text-align: center;
 
     &--paused {
-        background: #0073aa;
+        background-color: #e6e6e6;
     }
 
     &--active {
-        background: rgb(104, 187, 108);
+        background-color: #cef2cf;
+    }
+
+    &--cancelled {
+        background-color: #FFB5A6;
+
     }
 }
diff --git a/src/DonorDashboards/resources/js/app/components/subscription-row/index.js b/src/DonorDashboards/resources/js/app/components/subscription-row/index.tsx
similarity index 68%
rename from src/DonorDashboards/resources/js/app/components/subscription-row/index.js
rename to src/DonorDashboards/resources/js/app/components/subscription-row/index.tsx
index 756286b726..ade63a9017 100644
--- a/src/DonorDashboards/resources/js/app/components/subscription-row/index.js
+++ b/src/DonorDashboards/resources/js/app/components/subscription-row/index.tsx
@@ -4,30 +4,16 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {__} from '@wordpress/i18n';
 
 import {useWindowSize} from '../../hooks';
-import {cancelSubscriptionWithAPI} from '../subscription-cancel-modal/utils';
+import SubscriptionCancelModal from '../subscription-cancel-modal';
 
-import SubscriptionCancel from '../subscription-cancel-modal';
-import ModalDialog from '@givewp/components/AdminUI/ModalDialog';
-import DashboardLoadingSpinner from '../dashboard-loading-spinner';
+import "./style.scss";
 
 const SubscriptionRow = ({subscription}) => {
-    const [cancelModalOpen, setCancelModalOpen] = useState(false);
-    const [loading, setLoading] = useState(false);
+    const [isCancelModalOpen, setIsCancelModalOpen] = useState<boolean>(false);
 
     const {width} = useWindowSize();
     const {id, payment, form, gateway} = subscription;
 
-    const toggleModal = () => {
-        setCancelModalOpen(!cancelModalOpen);
-    };
-
-    const handleCancel = async () => {
-        setLoading(true);
-        await cancelSubscriptionWithAPI(id);
-        toggleModal();
-        setLoading(false);
-    };
-
     return (
         <div className="give-donor-dashboard-table__row">
             <div className="give-donor-dashboard-table__column">
@@ -73,24 +59,17 @@ const SubscriptionRow = ({subscription}) => {
                         </Link>
                     </div>
                 )}
-                {gateway.can_cancel && (
+                {gateway.can_cancel && !gateway.can_update && (
                     <>
-                        <ModalDialog
-                            wrapperClassName={'give-donor-dashboard-cancel-modal'}
-                            title={__('Cancel Subscription', 'give')}
-                            showHeader={true}
-                            isOpen={cancelModalOpen}
-                            handleClose={toggleModal}
-                        >
-                            <SubscriptionCancel
-                                onRequestClose={toggleModal}
-                                handleCancel={handleCancel}
-                                cancelling={loading}
+                        {isCancelModalOpen && (
+                            <SubscriptionCancelModal
+                                id={id}
+                                isOpen={isCancelModalOpen}
+                                toggleModal={() => setIsCancelModalOpen(!isCancelModalOpen)}
                             />
-                        </ModalDialog>
-                        {loading && <DashboardLoadingSpinner />}
+                        )}
                         <div className="give-donor-dashboard-table__donation-receipt">
-                            <a onClick={toggleModal}>{__('Cancel Subscription', 'give')}</a>
+                            <a className={'give-donor-dashboard-table__donation-receipt__cancel'} onClick={() => setIsCancelModalOpen(true)}>{__('Cancel Subscription', 'give')}</a>
                         </div>
                     </>
                 )}
diff --git a/src/DonorDashboards/resources/js/app/components/subscription-row/style.scss b/src/DonorDashboards/resources/js/app/components/subscription-row/style.scss
new file mode 100644
index 0000000000..256364540c
--- /dev/null
+++ b/src/DonorDashboards/resources/js/app/components/subscription-row/style.scss
@@ -0,0 +1,5 @@
+#give-donor-dashboard {
+    .give-donor-dashboard-table__donation-receipt__cancel {
+        color: #d92d0b;
+    }
+}