diff --git a/apps/admin-x-framework/src/api/offers.ts b/apps/admin-x-framework/src/api/offers.ts
index 922b5294a59..ba0124be661 100644
--- a/apps/admin-x-framework/src/api/offers.ts
+++ b/apps/admin-x-framework/src/api/offers.ts
@@ -1,5 +1,6 @@
 import {Meta, createMutation, createQuery, createQueryWithId} from '../utils/api/hooks';
 import {updateQueryCache, insertToQueryCache} from '../utils/api/update-queries';
+import {useQueryClient} from '@tanstack/react-query';
 
 export type Offer = {
     id: string;
@@ -44,6 +45,14 @@ export interface OfferAddResponseType {
 
 const dataType = 'OffersResponseType';
 
+export const useInvalidateOffers = () => {
+    const queryClient = useQueryClient();
+
+    return () => {
+        return queryClient.invalidateQueries([dataType]);
+    };
+};
+
 export const useBrowseOffers = createQuery<OffersResponseType>({
     dataType,
     path: '/offers/',
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/add-offer-modal.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/add-offer-modal.tsx
index f17ea40cf46..923e73d3f99 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/add-offer-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/add-offer-modal.tsx
@@ -579,7 +579,8 @@ const AddOfferModal = () => {
             durationInMonths: formState.durationInMonths || 0,
             currency: formState.currency || 'USD',
             status: formState.status || 'active',
-            tierId: formState.tierId || activeTiers[0]?.id
+            tierId: formState.tierId || activeTiers[0]?.id,
+            redemptionType: 'signup'
         };
     }, [formState, activeTiers]);
 
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/edit-offer-modal.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/edit-offer-modal.tsx
index 45897ad1680..695347f0fe9 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/edit-offer-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/edit-offer-modal.tsx
@@ -243,7 +243,8 @@ const EditOfferModal: React.FC<{id: string}> = ({id}) => {
             durationInMonths: formState?.duration_in_months || 0,
             currency: formState?.currency || '',
             status: formState?.status || '',
-            tierId: formState?.tier?.id || ''
+            tierId: formState?.tier?.id || '',
+            redemptionType: 'signup'
         };
 
         const newHref = getOfferPortalPreviewUrl(dataset, siteData.url);
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/edit-retention-offer-modal.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/edit-retention-offer-modal.tsx
index 6ed78e5a6bd..9caf92aee94 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/edit-retention-offer-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/edit-retention-offer-modal.tsx
@@ -1,13 +1,21 @@
+import PortalFrame from '../../membership/portal/portal-frame';
+import toast from 'react-hot-toast';
 import {ButtonSelect, type OfferType} from './add-offer-modal';
-import {Form, PreviewModalContent, Select, type SelectOption, TextArea, TextField, Toggle} from '@tryghost/admin-x-design-system';
-import {useForm} from '@tryghost/admin-x-framework/hooks';
+import {type ErrorMessages, useForm} from '@tryghost/admin-x-framework/hooks';
+import {Form, PreviewModalContent, Select, type SelectOption, TextArea, TextField, Toggle, showToast} from '@tryghost/admin-x-design-system';
+import {JSONError} from '@tryghost/admin-x-framework/errors';
+import {type Offer, useAddOffer, useBrowseOffers, useEditOffer, useInvalidateOffers} from '@tryghost/admin-x-framework/api/offers';
+import {getOfferPortalPreviewUrl, type offerPortalPreviewUrlTypes} from '../../../../utils/get-offers-portal-preview-url';
+import {getPaidActiveTiers, useBrowseTiers} from '@tryghost/admin-x-framework/api/tiers';
+import {useEffect, useMemo, useState} from 'react';
+import {useGlobalData} from '../../../providers/global-data-provider';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
 
 type RetentionOfferFormState = {
     enabled: boolean;
     displayTitle: string;
     displayDescription: string;
-    type: 'percent' | 'trial';
+    type: 'percent' | 'free_months';
     percentAmount: number;
     duration: string;
     durationInMonths: number;
@@ -25,36 +33,155 @@ const durationOptions: SelectOption[] = [
     {value: 'forever', label: 'Forever'}
 ];
 
-const getDefaultState = (id: string): RetentionOfferFormState => {
-    if (id === 'monthly') {
-        return {
-            enabled: true,
-            displayTitle: '',
-            displayDescription: '',
-            type: 'percent',
-            percentAmount: 20,
-            duration: 'once',
-            durationInMonths: 1,
-            freeMonths: 1
-        };
+const MAX_PERCENT_AMOUNT = 100;
+
+type RetentionOfferTerms = {
+    type: 'percent' | 'free_months';
+    amount: number;
+    duration: string;
+    durationInMonths: number;
+};
+
+const getResolvedAmount = ({
+    type,
+    percentAmount,
+    freeMonths,
+    lastPercentAmount,
+    lastFreeMonths
+}: {
+    type: 'percent' | 'free_months';
+    percentAmount: number;
+    freeMonths: number;
+    lastPercentAmount: number;
+    lastFreeMonths: number;
+}) => {
+    if (type === 'free_months') {
+        return freeMonths > 0 ? freeMonths : lastFreeMonths;
     }
+
+    return percentAmount > 0 ? percentAmount : lastPercentAmount;
+};
+
+const getDefaultState = (): RetentionOfferFormState => {
     return {
         enabled: false,
         displayTitle: '',
         displayDescription: '',
-        type: 'percent',
-        percentAmount: 0,
+        type: 'free_months',
+        percentAmount: 20,
         duration: 'once',
         durationInMonths: 1,
         freeMonths: 1
     };
 };
 
+const getRetentionOfferFormState = (offer: Offer | null): RetentionOfferFormState => {
+    const defaultState = getDefaultState();
+
+    if (!offer) {
+        return defaultState;
+    }
+
+    const isPercentOffer = offer.type === 'percent';
+    const isFreeMonthsOffer = offer.type === 'free_months';
+    const repeatingDurationInMonths = offer.duration === 'repeating' && offer.duration_in_months ? offer.duration_in_months : defaultState.durationInMonths;
+
+    return {
+        enabled: offer.status === 'active',
+        displayTitle: offer.display_title || '',
+        displayDescription: offer.display_description || '',
+        type: isFreeMonthsOffer ? 'free_months' : 'percent',
+        percentAmount: isPercentOffer ? offer.amount : defaultState.percentAmount,
+        duration: isPercentOffer ? offer.duration : defaultState.duration,
+        durationInMonths: repeatingDurationInMonths,
+        freeMonths: isFreeMonthsOffer ? offer.amount : defaultState.freeMonths
+    };
+};
+
+const getFormOfferTerms = ({
+    formState,
+    lastPercentAmount,
+    lastFreeMonths
+}: {
+    formState: RetentionOfferFormState;
+    lastPercentAmount: number;
+    lastFreeMonths: number;
+}): RetentionOfferTerms => {
+    const amount = getResolvedAmount({
+        type: formState.type,
+        percentAmount: formState.percentAmount,
+        freeMonths: formState.freeMonths,
+        lastPercentAmount,
+        lastFreeMonths
+    });
+
+    if (formState.type === 'free_months') {
+        return {
+            type: 'free_months',
+            amount,
+            duration: 'free_months',
+            durationInMonths: 0
+        };
+    }
+
+    const duration = formState.duration;
+    const durationInMonths = duration === 'repeating' ? Math.max(1, formState.durationInMonths) : 0;
+
+    return {
+        type: 'percent',
+        amount,
+        duration,
+        durationInMonths
+    };
+};
+
+const getOfferTerms = (offer: Offer | null): RetentionOfferTerms | null => {
+    if (!offer) {
+        return null;
+    }
+
+    const type = offer.type === 'free_months' ? 'free_months' : 'percent';
+    const duration = type === 'free_months' ? 'free_months' : offer.duration;
+    const durationInMonths = duration === 'repeating' ? offer.duration_in_months || 0 : 0;
+
+    return {
+        type,
+        amount: offer.amount,
+        duration,
+        durationInMonths
+    };
+};
+
+const getTermsSignature = (terms: RetentionOfferTerms | null): string => {
+    if (!terms) {
+        return '';
+    }
+
+    return `${terms.type}:${terms.amount}:${terms.duration}:${terms.durationInMonths}`;
+};
+
+const hasFormChangesFromDefault = (formState: RetentionOfferFormState, defaultState: RetentionOfferFormState): boolean => {
+    return formState.displayTitle !== defaultState.displayTitle ||
+        formState.displayDescription !== defaultState.displayDescription ||
+        formState.type !== defaultState.type ||
+        formState.percentAmount !== defaultState.percentAmount ||
+        formState.duration !== defaultState.duration ||
+        formState.durationInMonths !== defaultState.durationInMonths ||
+        formState.freeMonths !== defaultState.freeMonths;
+};
+
 const RetentionOfferSidebar: React.FC<{
     formState: RetentionOfferFormState;
     updateForm: (updater: (state: RetentionOfferFormState) => RetentionOfferFormState) => void;
+    clearError: (field: string) => void;
+    errors: ErrorMessages;
     cadence: 'monthly' | 'yearly';
-}> = ({formState, updateForm, cadence}) => {
+    redemptions: number;
+}> = ({formState, updateForm, clearError, errors, cadence, redemptions}) => {
+    const availableDurationOptions = cadence === 'yearly'
+        ? durationOptions.filter(option => option.value !== 'repeating')
+        : durationOptions;
+
     return (
         <div className='flex grow flex-col pt-2'>
             <Form className='grow'>
@@ -62,12 +189,13 @@ const RetentionOfferSidebar: React.FC<{
                     <div className='flex flex-col gap-5 rounded-md border border-grey-300 p-4 pb-3.5 dark:border-grey-800'>
                         <div className='flex flex-col gap-1.5'>
                             <span className='text-xs font-semibold leading-none text-grey-700'>Performance</span>
-                            <span>0 redemptions</span>
+                            <span>{redemptions} redemptions</span>
                         </div>
                     </div>
                 </section>
                 <section className='mt-4'>
                     <Toggle
+                        key={`retention-toggle-${cadence}-${formState.enabled ? 'enabled' : 'disabled'}`}
                         checked={formState.enabled}
                         direction='rtl'
                         hint={cadence === 'monthly' ? 'Applied to monthly plans' : 'Applied to annual plans'}
@@ -83,12 +211,15 @@ const RetentionOfferSidebar: React.FC<{
                             <h2 className='mb-4 text-lg'>General</h2>
                             <div className='flex flex-col gap-6'>
                                 <TextField
+                                    error={Boolean(errors.displayTitle)}
+                                    hint={errors.displayTitle}
                                     placeholder='Before you go...'
                                     title='Display title'
                                     value={formState.displayTitle}
                                     onChange={(e) => {
                                         updateForm(state => ({...state, displayTitle: e.target.value}));
                                     }}
+                                    onKeyDown={() => clearError('displayTitle')}
                                 />
                                 <TextArea
                                     placeholder='We&#39;d hate to see you go! How about a special offer to stay?'
@@ -108,60 +239,80 @@ const RetentionOfferSidebar: React.FC<{
                                         checked={formState.type === 'percent'}
                                         type={typeOptions[0]}
                                         onClick={() => {
-                                            updateForm(state => ({...state, type: 'percent'}));
+                                            clearError('amount');
+                                            clearError('durationInMonths');
+                                            updateForm((state) => {
+                                                return {...state, type: 'percent', percentAmount: state.percentAmount};
+                                            });
                                         }}
                                     />
                                     <ButtonSelect
-                                        checked={formState.type === 'trial'}
+                                        checked={formState.type === 'free_months'}
                                         type={typeOptions[1]}
                                         onClick={() => {
-                                            updateForm(state => ({...state, type: 'trial'}));
+                                            clearError('amount');
+                                            clearError('durationInMonths');
+                                            updateForm(state => ({...state, type: 'free_months'}));
                                         }}
                                     />
                                 </div>
                                 {formState.type === 'percent' && (
                                     <>
                                         <TextField
+                                            error={Boolean(errors.amount)}
+                                            hint={errors.amount}
                                             rightPlaceholder='%'
                                             title='Amount off'
                                             type='number'
                                             value={formState.percentAmount === 0 ? '' : String(formState.percentAmount)}
                                             onChange={(e) => {
-                                                updateForm(state => ({...state, percentAmount: Number(e.target.value)}));
+                                                const nextValue = Number(e.target.value);
+                                                const safeValue = Number.isNaN(nextValue) ? 0 : nextValue;
+                                                updateForm(state => ({...state, percentAmount: safeValue}));
                                             }}
+                                            onKeyDown={() => clearError('amount')}
                                         />
                                         <Select
-                                            options={durationOptions}
-                                            selectedOption={durationOptions.find(option => option.value === formState.duration)}
+                                            options={availableDurationOptions}
+                                            selectedOption={availableDurationOptions.find(option => option.value === formState.duration)}
                                             title='Duration'
                                             onSelect={(e) => {
                                                 if (e) {
+                                                    clearError('durationInMonths');
                                                     updateForm(state => ({...state, duration: e.value}));
                                                 }
                                             }}
                                         />
                                         {formState.duration === 'repeating' && (
                                             <TextField
+                                                error={Boolean(errors.durationInMonths)}
+                                                hint={errors.durationInMonths}
                                                 rightPlaceholder={`${formState.durationInMonths === 1 ? 'month' : 'months'}`}
                                                 title='Duration in months'
                                                 type='number'
                                                 value={formState.durationInMonths === 0 ? '' : String(formState.durationInMonths)}
                                                 onChange={(e) => {
-                                                    updateForm(state => ({...state, durationInMonths: Number(e.target.value)}));
+                                                    const nextValue = Number(e.target.value);
+                                                    updateForm(state => ({...state, durationInMonths: Number.isNaN(nextValue) ? 0 : nextValue}));
                                                 }}
+                                                onKeyDown={() => clearError('durationInMonths')}
                                             />
                                         )}
                                     </>
                                 )}
-                                {formState.type === 'trial' && (
+                                {formState.type === 'free_months' && (
                                     <TextField
+                                        error={Boolean(errors.amount)}
+                                        hint={errors.amount}
                                         rightPlaceholder={`${formState.freeMonths === 1 ? 'month' : 'months'}`}
                                         title='Free months'
                                         type='number'
                                         value={formState.freeMonths === 0 ? '' : String(formState.freeMonths)}
                                         onChange={(e) => {
-                                            updateForm(state => ({...state, freeMonths: Number(e.target.value)}));
+                                            const nextValue = Number(e.target.value);
+                                            updateForm(state => ({...state, freeMonths: Number.isNaN(nextValue) ? 0 : nextValue}));
                                         }}
+                                        onKeyDown={() => clearError('amount')}
                                     />
                                 )}
                             </div>
@@ -175,21 +326,195 @@ const RetentionOfferSidebar: React.FC<{
 
 const EditRetentionOfferModal: React.FC<{id: string}> = ({id}) => {
     const {updateRoute} = useRouting();
+    const {siteData} = useGlobalData();
+    const {data: {tiers = []} = {}} = useBrowseTiers();
+    const {data: {offers: allOffers = []} = {}, isFetched: hasFetchedOffers, isFetching: isFetchingOffers} = useBrowseOffers();
+    const {mutateAsync: addOffer} = useAddOffer();
+    const {mutateAsync: editOffer} = useEditOffer();
+    const invalidateOffers = useInvalidateOffers();
+    const [href, setHref] = useState<string>('');
     const cadence = id === 'monthly' ? 'monthly' : 'yearly' as const;
     const breadcrumbTitle = cadence === 'monthly' ? 'Monthly retention' : 'Yearly retention';
+    const offerCadence = cadence === 'monthly' ? 'month' : 'year';
+    const activePaidTiers = getPaidActiveTiers(tiers || []);
+    const retentionOffersByCadence = useMemo(() => {
+        return allOffers
+            .filter((offer) => {
+                return offer.redemption_type === 'retention' && offer.cadence === offerCadence;
+            })
+            .sort((left, right) => {
+                const leftTimestamp = left.created_at ? new Date(left.created_at).getTime() : 0;
+                const rightTimestamp = right.created_at ? new Date(right.created_at).getTime() : 0;
+                return rightTimestamp - leftTimestamp;
+            });
+    }, [allOffers, offerCadence]);
+    const activeRetentionOffer = useMemo(() => {
+        return retentionOffersByCadence.find(offer => offer.status === 'active') || null;
+    }, [retentionOffersByCadence]);
+    const latestRetentionOffer = retentionOffersByCadence[0] || null;
+    const editableRetentionOffer = activeRetentionOffer || latestRetentionOffer;
+    const retentionRedemptions = useMemo(() => {
+        return retentionOffersByCadence.reduce((total, offer) => {
+            return total + (offer.redemption_count || 0);
+        }, 0);
+    }, [retentionOffersByCadence]);
+    const [lastPreviewPercentAmount, setLastPreviewPercentAmount] = useState(20);
+    const [lastPreviewFreeMonths, setLastPreviewFreeMonths] = useState(1);
+    const [initializedOfferKey, setInitializedOfferKey] = useState<string | null>(null);
+    const handleSaveError = (error: unknown) => {
+        let message = 'Please try again later';
+
+        if (error instanceof JSONError && error.data && error.data.errors[0]) {
+            message = error.data.errors[0].context || error.data.errors[0].message || message;
+        }
 
-    const {formState, updateForm, saveState, okProps} = useForm({
-        initialState: getDefaultState(id),
+        toast.remove();
+        showToast({
+            title: 'Failed to save offer',
+            type: 'error',
+            message
+        });
+    };
+
+    const {formState, setFormState, updateForm, handleSave, saveState, okProps, errors, clearError} = useForm({
+        initialState: getDefaultState(),
         savingDelay: 500,
         onSave: async () => {
-            // No-op for now — API wiring will be added later
+            let didMutate = false;
+            const formTerms = getFormOfferTerms({
+                formState,
+                lastPercentAmount: lastPreviewPercentAmount,
+                lastFreeMonths: lastPreviewFreeMonths
+            });
+            const existingTerms = getOfferTerms(editableRetentionOffer);
+            const termsChanged = getTermsSignature(existingTerms) !== getTermsSignature(formTerms);
+            const nextStatus = formState.enabled ? 'active' : 'archived';
+            const displayTitle = formState.displayTitle || '';
+            const displayDescription = formState.displayDescription || '';
+            const hasDisplayChanges = editableRetentionOffer
+                ? displayTitle !== (editableRetentionOffer.display_title || '') ||
+                    displayDescription !== (editableRetentionOffer.display_description || '')
+                : displayTitle !== '' || displayDescription !== '';
+            const defaultState = getDefaultState();
+            const shouldCreateInactiveDraft = !formState.enabled && !editableRetentionOffer && hasFormChangesFromDefault(formState, defaultState);
+
+            const createRetentionOffer = async (status: 'active' | 'archived') => {
+                // Generate a random 8-character hex string
+                const hash = Array.from(crypto.getRandomValues(new Uint8Array(4)), b => b.toString(16).padStart(2, '0')).join('');
+
+                await addOffer({
+                    name: `Special offer ${hash}`,
+                    code: hash,
+                    display_title: displayTitle,
+                    display_description: displayDescription,
+                    cadence: offerCadence,
+                    amount: formTerms.amount,
+                    duration: formTerms.duration,
+                    duration_in_months: formTerms.durationInMonths,
+                    currency: null,
+                    status,
+                    redemption_type: 'retention',
+                    tier: null,
+                    type: formTerms.type,
+                    currency_restriction: false
+                });
+                didMutate = true;
+            };
+
+            const invalidateOffersIfNeeded = async () => {
+                if (didMutate) {
+                    await invalidateOffers();
+                }
+            };
+
+            if (!editableRetentionOffer && !formState.enabled && !shouldCreateInactiveDraft) {
+                return;
+            }
+
+            if (termsChanged) {
+                if (!formState.enabled && activeRetentionOffer) {
+                    await editOffer({...activeRetentionOffer, status: 'archived'});
+                    didMutate = true;
+                }
+
+                await createRetentionOffer(nextStatus);
+                await invalidateOffersIfNeeded();
+                return;
+            }
+
+            if (editableRetentionOffer) {
+                const hasStatusChange = editableRetentionOffer.status !== nextStatus;
+                if (hasDisplayChanges || hasStatusChange) {
+                    await editOffer({
+                        ...editableRetentionOffer,
+                        display_title: displayTitle,
+                        display_description: displayDescription,
+                        status: nextStatus
+                    });
+                    didMutate = true;
+                }
+                await invalidateOffersIfNeeded();
+                return;
+            }
+
+            if (formState.enabled || shouldCreateInactiveDraft) {
+                await createRetentionOffer(nextStatus);
+            }
+
+            await invalidateOffersIfNeeded();
         },
-        onSaveError: () => {},
+        onSaveError: handleSaveError,
         onValidate: () => {
-            return {};
+            const newErrors: Record<string, string> = {};
+
+            if (!formState.enabled) {
+                return newErrors;
+            }
+
+            if (formState.type === 'percent') {
+                if (formState.percentAmount < 1 || formState.percentAmount > MAX_PERCENT_AMOUNT) {
+                    newErrors.amount = `Enter an amount between 1 and ${MAX_PERCENT_AMOUNT}%.`;
+                }
+
+                if (formState.duration === 'repeating' && formState.durationInMonths < 1) {
+                    newErrors.durationInMonths = 'Enter a duration greater than 0.';
+                }
+            }
+
+            if (formState.type === 'free_months') {
+                if (formState.freeMonths < 1) {
+                    newErrors.amount = 'Enter a number of free months greater than 0.';
+                }
+            }
+
+            return newErrors;
         }
     });
 
+    const activeRetentionOfferId = editableRetentionOffer?.id || 'none';
+    const currentOfferKey = `${id}:${activeRetentionOfferId}`;
+
+    useEffect(() => {
+        if (!hasFetchedOffers || isFetchingOffers || saveState === 'unsaved' || initializedOfferKey === currentOfferKey) {
+            return;
+        }
+
+        setFormState(() => getRetentionOfferFormState(editableRetentionOffer));
+        setInitializedOfferKey(currentOfferKey);
+    }, [currentOfferKey, editableRetentionOffer, hasFetchedOffers, initializedOfferKey, isFetchingOffers, saveState, setFormState]);
+
+    useEffect(() => {
+        if (formState.percentAmount > 0) {
+            setLastPreviewPercentAmount(formState.percentAmount);
+        }
+    }, [formState.percentAmount]);
+
+    useEffect(() => {
+        if (formState.freeMonths > 0) {
+            setLastPreviewFreeMonths(formState.freeMonths);
+        }
+    }, [formState.freeMonths]);
+
     const goBack = () => {
         updateRoute('offers/edit/retention');
     };
@@ -197,15 +522,73 @@ const EditRetentionOfferModal: React.FC<{id: string}> = ({id}) => {
     const sidebar = (
         <RetentionOfferSidebar
             cadence={cadence}
+            clearError={clearError}
+            errors={errors}
             formState={formState}
+            redemptions={retentionRedemptions}
             updateForm={updateForm}
         />
     );
 
-    const preview = (
-        <div className='flex h-full items-center justify-center text-sm text-grey-400'>
-        </div>
-    );
+    const handleSaveClick = async () => {
+        try {
+            if (await handleSave({force: true})) {
+                goBack();
+            }
+        } catch {
+            // Error toast is handled in onSaveError
+        }
+    };
+
+    const previewData: offerPortalPreviewUrlTypes = useMemo(() => {
+        const isFreeMonthsOffer = formState.type === 'free_months';
+        const previewAmount = getResolvedAmount({
+            type: formState.type,
+            percentAmount: formState.percentAmount,
+            freeMonths: formState.freeMonths,
+            lastPercentAmount: lastPreviewPercentAmount,
+            lastFreeMonths: lastPreviewFreeMonths
+        });
+        const previewTier = activePaidTiers.find((tier) => {
+            if (offerCadence === 'month') {
+                return tier.monthly_price;
+            }
+
+            return tier.yearly_price;
+        });
+
+        return {
+            enabled: formState.enabled,
+            name: `${cadence} retention`,
+            code: `${cadence}-retention`,
+            displayTitle: formState.displayTitle || '',
+            displayDescription: formState.displayDescription || '',
+            type: isFreeMonthsOffer ? 'free_months' : 'percent',
+            cadence: offerCadence,
+            amount: previewAmount,
+            duration: isFreeMonthsOffer ? 'free_months' : formState.duration,
+            durationInMonths: formState.durationInMonths,
+            currency: '',
+            status: 'active',
+            tierId: previewTier?.id || '',
+            redemptionType: 'retention'
+        };
+    }, [activePaidTiers, cadence, formState, lastPreviewFreeMonths, lastPreviewPercentAmount, offerCadence]);
+
+    useEffect(() => {
+        if (!siteData.url) {
+            setHref('');
+            return;
+        }
+
+        const newHref = getOfferPortalPreviewUrl(previewData, siteData.url);
+        setHref(newHref);
+    }, [previewData, siteData.url]);
+
+    const preview = <PortalFrame
+        href={href || ''}
+        portalParent='offers'
+    />;
 
     return (
         <PreviewModalContent
@@ -229,9 +612,7 @@ const EditRetentionOfferModal: React.FC<{id: string}> = ({id}) => {
             width={1140}
             onBreadcrumbsBack={goBack}
             onCancel={goBack}
-            onOk={async () => {
-                // No-op for now — API wiring will be added later
-            }}
+            onOk={handleSaveClick}
         />
     );
 };
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/offers-retention.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/offers-retention.tsx
index d11e38dbc1f..1e18a6419f9 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/offers-retention.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/offers-retention.tsx
@@ -1,6 +1,7 @@
+import {type Offer, useBrowseOffers} from '@tryghost/admin-x-framework/api/offers';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
 
-// TODO: Replace placeholder data with real retention offer data from API
+type RetentionCadence = 'month' | 'year';
 
 type RetentionOffer = {
     id: string;
@@ -12,29 +13,98 @@ type RetentionOffer = {
     status: 'active' | 'inactive';
 };
 
-const placeholderRetentionOffers: RetentionOffer[] = [
-    {
-        id: 'monthly',
-        name: 'Monthly retention',
-        description: 'Applied to monthly plans',
-        terms: '50% OFF',
-        termsDetail: 'Next payment',
-        redemptions: 3,
-        status: 'active'
-    },
-    {
-        id: 'yearly',
-        name: 'Yearly retention',
-        description: 'Applied to annual plans',
-        terms: null,
-        termsDetail: null,
-        redemptions: 0,
-        status: 'inactive'
+const getActiveRetentionOfferByCadence = (offers: Offer[], cadence: RetentionCadence): Offer | null => {
+    return offers.find((offer) => {
+        return offer.redemption_type === 'retention' &&
+            offer.cadence === cadence &&
+            offer.status === 'active';
+    }) || null;
+};
+
+const getRetentionRedemptionsByCadence = (offers: Offer[], cadence: RetentionCadence): number => {
+    return offers.reduce((total, offer) => {
+        if (offer.redemption_type !== 'retention' || offer.cadence !== cadence) {
+            return total;
+        }
+
+        return total + (offer.redemption_count || 0);
+    }, 0);
+};
+
+const getRetentionTerms = (offer: Offer | null): string | null => {
+    if (!offer) {
+        return null;
+    }
+
+    if (offer.type === 'free_months') {
+        const monthLabel = offer.amount === 1 ? 'month' : 'months';
+        return `${offer.amount} ${monthLabel} free`;
+    }
+
+    if (offer.type === 'percent') {
+        return `${offer.amount}% OFF`;
+    }
+
+    return null;
+};
+
+const getRetentionTermsDetail = (offer: Offer | null): string | null => {
+    if (!offer) {
+        return null;
     }
-];
+
+    if (offer.type === 'free_months') {
+        return '';
+    }
+
+    if (offer.duration === 'once') {
+        return 'First payment';
+    }
+
+    if (offer.duration === 'repeating' && offer.duration_in_months) {
+        const monthLabel = offer.duration_in_months === 1 ? 'month' : 'months';
+        return `For ${offer.duration_in_months} ${monthLabel}`;
+    }
+
+    if (offer.duration === 'forever') {
+        return 'Forever';
+    }
+
+    return null;
+};
+
+const getRetentionOffers = (offers: Offer[]): RetentionOffer[] => {
+    const monthlyOffer = getActiveRetentionOfferByCadence(offers, 'month');
+    const yearlyOffer = getActiveRetentionOfferByCadence(offers, 'year');
+    const monthlyRedemptions = getRetentionRedemptionsByCadence(offers, 'month');
+    const yearlyRedemptions = getRetentionRedemptionsByCadence(offers, 'year');
+
+    return [
+        {
+            id: 'monthly',
+            name: 'Monthly retention',
+            description: 'Applied to monthly plans',
+            terms: getRetentionTerms(monthlyOffer),
+            termsDetail: getRetentionTermsDetail(monthlyOffer),
+            redemptions: monthlyRedemptions,
+            status: monthlyOffer ? 'active' : 'inactive'
+        },
+        {
+            id: 'yearly',
+            name: 'Yearly retention',
+            description: 'Applied to annual plans',
+            terms: getRetentionTerms(yearlyOffer),
+            termsDetail: getRetentionTermsDetail(yearlyOffer),
+            redemptions: yearlyRedemptions,
+            status: yearlyOffer ? 'active' : 'inactive'
+        }
+    ];
+};
 
 const OffersRetention: React.FC = () => {
     const {updateRoute} = useRouting();
+    const {data: {offers: allOffers = []} = {}} = useBrowseOffers();
+    const retentionOffers = getRetentionOffers(allOffers);
 
     const handleRetentionOfferClick = (id: string) => {
         updateRoute(`offers/edit/retention/${id}`);
@@ -50,7 +120,7 @@ const OffersRetention: React.FC = () => {
                     <col className='w-[220px]' />
                     <col className='w-[80px]' />
                 </colgroup>
-                {placeholderRetentionOffers.map(offer => (
+                {retentionOffers.map(offer => (
                     <tr key={offer.id} className='group relative scale-100 border-b border-b-grey-200 dark:border-grey-800' data-testid='retention-offer-item'>
                         <td className='p-0'>
                             <a className='block cursor-pointer p-5 pl-0' onClick={() => handleRetentionOfferClick(offer.id)}>
diff --git a/apps/admin-x-settings/src/utils/get-offers-portal-preview-url.ts b/apps/admin-x-settings/src/utils/get-offers-portal-preview-url.ts
index c31f902f5c5..c7c90344533 100644
--- a/apps/admin-x-settings/src/utils/get-offers-portal-preview-url.ts
+++ b/apps/admin-x-settings/src/utils/get-offers-portal-preview-url.ts
@@ -12,6 +12,7 @@ export type offerPortalPreviewUrlTypes = {
     currency: string;
     status: string;
     tierId: string;
+    redemptionType: 'signup' | 'retention';
 };
 
 export const getOfferPortalPreviewUrl = (overrides:offerPortalPreviewUrlTypes, baseUrl: string) : string => {
@@ -28,7 +29,8 @@ export const getOfferPortalPreviewUrl = (overrides:offerPortalPreviewUrlTypes, b
         durationInMonths,
         currency = 'usd',
         status,
-        tierId
+        tierId,
+        redemptionType = 'signup'
     } = overrides;
 
     baseUrl = baseUrl.replace(/\/$/, '');
@@ -48,6 +50,7 @@ export const getOfferPortalPreviewUrl = (overrides:offerPortalPreviewUrlTypes, b
     settingsParam.append('currency', encodeURIComponent(currency));
     settingsParam.append('status', encodeURIComponent(status));
     settingsParam.append('tier_id', encodeURIComponent(tierId));
+    settingsParam.append('redemption_type', encodeURIComponent(redemptionType));
 
     if (disableBackground) {
         settingsParam.append('disableBackground', 'true');
diff --git a/apps/admin-x-settings/test/acceptance/membership/offers.test.ts b/apps/admin-x-settings/test/acceptance/membership/offers.test.ts
index 1153c9dd0ce..58f55a3fc84 100644
--- a/apps/admin-x-settings/test/acceptance/membership/offers.test.ts
+++ b/apps/admin-x-settings/test/acceptance/membership/offers.test.ts
@@ -1,4 +1,4 @@
-import {expect, test} from '@playwright/test';
+import {type Page, expect, test} from '@playwright/test';
 import {globalDataRequests, mockApi, responseFixtures, settingsWithStripe} from '@tryghost/admin-x-framework/test/acceptance';
 
 test.describe('Offers Modal', () => {
@@ -256,4 +256,483 @@ test.describe('Offers Modal', () => {
             }]
         });
     });
+
+    test.describe('Retention offers', () => {
+        type MockRequest = {
+            method: string;
+            path: string | RegExp;
+            response: unknown;
+            responseStatus?: number;
+            responseHeaders?: {[key: string]: string};
+        };
+
+        type RetentionOffer = {
+            id: string;
+            name: string;
+            code: string;
+            display_title: string;
+            display_description: string;
+            type: 'percent' | 'free_months';
+            cadence: 'month' | 'year';
+            amount: number;
+            duration: 'forever' | 'once' | 'repeating' | 'free_months';
+            duration_in_months: number | null;
+            currency_restriction: boolean;
+            currency: string | null;
+            status: 'active' | 'archived';
+            redemption_count: number;
+            redemption_type: 'retention';
+            tier: null;
+        };
+
+        const signupOffers = (responseFixtures.offers.offers || []).filter(offer => offer.redemption_type === 'signup');
+        const defaultRetentionOffer: RetentionOffer = {
+            id: 'retention-offer',
+            name: 'Monthly retention',
+            code: 'monthly-retention',
+            display_title: '',
+            display_description: '',
+            type: 'percent',
+            cadence: 'month',
+            amount: 20,
+            duration: 'forever',
+            duration_in_months: null,
+            currency_restriction: false,
+            currency: null,
+            status: 'active',
+            redemption_count: 0,
+            redemption_type: 'retention',
+            tier: null
+        };
+
+        const createRetentionOffer = (overrides: Partial<RetentionOffer> = {}) => {
+            return {
+                ...defaultRetentionOffer,
+                ...overrides
+            };
+        };
+
+        const getRetentionRequests = <ExtraRequests extends Record<string, MockRequest> = Record<string, never>>({
+            retentionOffers,
+            extraRequests = {} as ExtraRequests
+        }: {
+            retentionOffers: Array<ReturnType<typeof createRetentionOffer>>;
+            extraRequests?: ExtraRequests;
+        }) => {
+            return {
+                browseOffers: {
+                    method: 'GET',
+                    path: '/offers/',
+                    response: {
+                        offers: [...signupOffers, ...retentionOffers]
+                    }
+                },
+                ...globalDataRequests,
+                browseConfig: {
+                    method: 'GET',
+                    path: '/config/',
+                    response: {
+                        config: {
+                            ...responseFixtures.config.config,
+                            labs: {
+                                ...responseFixtures.config.config?.labs,
+                                retentionOffers: true
+                            }
+                        }
+                    }
+                },
+                browseSettings: {...globalDataRequests.browseSettings, response: settingsWithStripe},
+                browseTiers: {method: 'GET', path: '/tiers/', response: responseFixtures.tiers},
+                ...extraRequests
+            };
+        };
+
+        const openRetentionTab = async (page: Page) => {
+            await page.goto('/');
+            const section = page.getByTestId('offers');
+            await section.getByRole('button', {name: 'Manage offers'}).click();
+
+            const modal = page.getByTestId('offers-modal');
+            await modal.getByRole('tab', {name: 'Retention'}).click();
+            return modal;
+        };
+
+        const openRetentionModal = async (page: Page, name: 'Monthly retention' | 'Yearly retention') => {
+            const modal = await openRetentionTab(page);
+            await modal.getByText(name).click();
+            const retentionModal = page.getByTestId('retention-offer-modal');
+            await expect(retentionModal).toBeVisible();
+            return {modal, retentionModal};
+        };
+
+        test('Lists monthly and yearly retention offers', async ({page}) => {
+            await mockApi({page, requests: getRetentionRequests({
+                retentionOffers: [
+                    createRetentionOffer({
+                        id: 'retention-month-active',
+                        name: 'Monthly retention active',
+                        code: 'monthly-retention-active',
+                        display_title: 'Before you go',
+                        amount: 25,
+                        duration: 'once',
+                        redemption_count: 7
+                    }),
+                    createRetentionOffer({
+                        id: 'retention-year-archived',
+                        name: 'Yearly retention archived',
+                        code: 'yearly-retention-archived',
+                        display_title: 'Stay with us',
+                        type: 'free_months',
+                        cadence: 'year',
+                        amount: 2,
+                        duration: 'free_months',
+                        status: 'archived',
+                        redemption_count: 9
+                    }),
+                    createRetentionOffer({
+                        id: 'retention-month-archived',
+                        name: 'Monthly retention archived',
+                        code: 'monthly-retention-archived',
+                        amount: 30,
+                        status: 'archived',
+                        redemption_count: 3
+                    })
+                ]
+            })});
+
+            const modal = await openRetentionTab(page);
+            const rows = modal.getByTestId('retention-offer-item');
+            await expect(rows).toHaveCount(2);
+
+            const monthlyRow = rows.nth(0);
+            await expect(monthlyRow).toContainText('Monthly retention');
+            await expect(monthlyRow).toContainText('25% OFF');
+            await expect(monthlyRow).toContainText('First payment');
+            await expect(monthlyRow).toContainText('10');
+            await expect(monthlyRow).toContainText('Active');
+
+            const yearlyRow = rows.nth(1);
+            await expect(yearlyRow).toContainText('Yearly retention');
+            await expect(yearlyRow).toContainText('Inactive');
+            await expect(yearlyRow).toContainText('9');
+            await expect(yearlyRow).not.toContainText('2 MONTHS FREE');
+        });
+
+        test('Renders existing retention offers in edit mode', async ({page}) => {
+            await mockApi({page, requests: getRetentionRequests({
+                retentionOffers: [
+                    createRetentionOffer({
+                        id: 'retention-month-active',
+                        name: 'Monthly retention active',
+                        code: 'monthly-retention-active',
+                        display_title: 'Stay monthly',
+                        display_description: 'Monthly description',
+                        amount: 40,
+                        duration: 'repeating',
+                        duration_in_months: 3,
+                        redemption_count: 7
+                    }),
+                    createRetentionOffer({
+                        id: 'retention-year-active',
+                        name: 'Yearly retention active',
+                        code: 'yearly-retention-active',
+                        display_title: 'Stay yearly',
+                        display_description: 'Yearly description',
+                        type: 'free_months',
+                        cadence: 'year',
+                        amount: 2,
+                        duration: 'free_months',
+                        redemption_count: 4
+                    }),
+                    createRetentionOffer({
+                        id: 'retention-month-archived',
+                        name: 'Monthly retention archived',
+                        code: 'monthly-retention-archived',
+                        display_title: 'Older monthly retention',
+                        amount: 30,
+                        duration: 'once',
+                        status: 'archived',
+                        redemption_count: 4
+                    }),
+                    createRetentionOffer({
+                        id: 'retention-year-archived',
+                        name: 'Yearly retention archived',
+                        code: 'yearly-retention-archived',
+                        display_title: 'Older yearly retention',
+                        type: 'free_months',
+                        cadence: 'year',
+                        amount: 1,
+                        duration: 'free_months',
+                        status: 'archived',
+                        redemption_count: 5
+                    })
+                ]
+            })});
+
+            const {modal, retentionModal: monthlyModal} = await openRetentionModal(page, 'Monthly retention');
+            await expect(monthlyModal).toContainText('11 redemptions');
+            await expect(monthlyModal.getByLabel('Enable monthly retention')).toBeChecked();
+            await expect(monthlyModal.getByLabel('Display title')).toHaveValue('Stay monthly');
+            await expect(monthlyModal.getByLabel('Display description')).toHaveValue('Monthly description');
+            await expect(monthlyModal.getByLabel('Amount off')).toHaveValue('40');
+            await expect(monthlyModal.getByLabel('Duration in months')).toHaveValue('3');
+
+            await monthlyModal.getByRole('button', {name: 'Cancel'}).click();
+            await modal.getByText('Yearly retention').click();
+
+            const yearlyModal = page.getByTestId('retention-offer-modal');
+            await expect(yearlyModal).toBeVisible();
+            await expect(yearlyModal).toContainText('9 redemptions');
+            await expect(yearlyModal.getByLabel('Enable yearly retention')).toBeChecked();
+            await expect(yearlyModal.getByLabel('Display title')).toHaveValue('Stay yearly');
+            await expect(yearlyModal.getByLabel('Display description')).toHaveValue('Yearly description');
+            await expect(yearlyModal.getByLabel('Free months')).toHaveValue('2');
+        });
+
+        test('Shows validation errors for invalid retention values on save', async ({page}) => {
+            await mockApi({page, requests: getRetentionRequests({
+                retentionOffers: [createRetentionOffer({id: 'retention-month-active'})]
+            })});
+
+            const {retentionModal} = await openRetentionModal(page, 'Monthly retention');
+            const saveButton = retentionModal.getByRole('button', {name: /Save|Retry/});
+            await expect(saveButton).toBeEnabled();
+
+            await retentionModal.getByLabel('Amount off').fill('0');
+            await saveButton.click();
+            await expect(retentionModal.getByText('Enter an amount between 1 and 100%.')).toBeVisible();
+            await expect(saveButton).toBeEnabled();
+
+            await retentionModal.getByLabel('Amount off').fill('150');
+            await saveButton.click();
+            await expect(retentionModal.getByText('Enter an amount between 1 and 100%.')).toBeVisible();
+            await expect(saveButton).toBeEnabled();
+        });
+
+        test('Shows save error toast when retention save fails', async ({page}) => {
+            await mockApi({page, requests: getRetentionRequests({
+                retentionOffers: [createRetentionOffer({id: 'retention-month-active'})],
+                extraRequests: {
+                    addOffer: {method: 'POST', path: '/offers/', responseStatus: 400, responseHeaders: {'content-type': 'json'}, response: {
+                        errors: [{
+                            message: 'Validation error, cannot create offer.',
+                            context: 'Offer `code` must be unique. Please change and try again.'
+                        }]
+                    }}
+                }
+            })});
+
+            const {retentionModal} = await openRetentionModal(page, 'Monthly retention');
+            await retentionModal.getByLabel('Amount off').fill('35');
+            await retentionModal.getByRole('button', {name: 'Save'}).click();
+
+            await expect(page.getByTestId('toast-error')).toContainText(/Offer `code` must be unique. Please change and try again./);
+        });
+
+        test('Hides repeating duration option for yearly retention offers', async ({page}) => {
+            await mockApi({page, requests: getRetentionRequests({
+                retentionOffers: [
+                    createRetentionOffer({
+                        id: 'retention-year-active',
+                        name: 'Yearly retention',
+                        code: 'yearly-retention',
+                        display_title: 'Stay yearly',
+                        cadence: 'year',
+                        duration: 'once'
+                    })
+                ]
+            })});
+
+            const {retentionModal} = await openRetentionModal(page, 'Yearly retention');
+            const sidebarScrollContainer = retentionModal.locator('div.overflow-y-auto').first();
+            await sidebarScrollContainer.evaluate((element) => {
+                element.scrollTop = element.scrollHeight;
+            });
+
+            const durationSelectTrigger = retentionModal.getByText('First-payment', {exact: true}).first();
+            await durationSelectTrigger.click();
+            const durationOptions = await page.locator('[data-testid="select-option"]').allTextContents();
+            expect(durationOptions).toContain('First-payment');
+            expect(durationOptions).toContain('Forever');
+            expect(durationOptions).not.toContain('Multiple-months');
+            await page.keyboard.press('Escape');
+        });
+
+        test('Renders preview for retention offers', async ({page}) => {
+            await mockApi({page, requests: getRetentionRequests({
+                retentionOffers: [createRetentionOffer({id: 'retention-month-active'})]
+            })});
+
+            const {retentionModal} = await openRetentionModal(page, 'Monthly retention');
+            await retentionModal.getByLabel('Display title').fill('Before you go');
+            await retentionModal.getByLabel('Display description').fill('Please stay <script>alert(1)</script>');
+            await retentionModal.getByRole('button', {name: /Free month\(s\)/}).click();
+            await retentionModal.getByLabel('Free months').fill('2');
+
+            const iframe = retentionModal.getByTestId('portal-preview');
+            const getPreviewParams = async () => {
+                const src = await iframe.getAttribute('src');
+                expect(src).toBeTruthy();
+
+                const srcUrl = new URL(src!);
+                const [,hashQuery = ''] = srcUrl.hash.split('?');
+                return new URLSearchParams(hashQuery);
+            };
+
+            let params = await getPreviewParams();
+            expect(decodeURIComponent(params.get('display_title') || '')).toBe('Before you go');
+            expect(decodeURIComponent(params.get('display_description') || '')).toBe('Please stay <script>alert(1)</script>');
+            expect(params.get('redemption_type')).toBe('retention');
+            expect(params.get('type')).toBe('free_months');
+            expect(params.get('amount')).toBe('2');
+            expect(params.get('cadence')).toBe('month');
+            expect(params.get('tier_id')).toBeTruthy();
+
+            await retentionModal.getByLabel('Free months').fill('');
+            params = await getPreviewParams();
+            expect(params.get('type')).toBe('free_months');
+            expect(params.get('amount')).toBe('2');
+
+            await retentionModal.getByRole('button', {name: /Percentage discount/}).click();
+            await retentionModal.getByLabel('Amount off').fill('35');
+            params = await getPreviewParams();
+            expect(params.get('type')).toBe('percent');
+            expect(params.get('amount')).toBe('35');
+        });
+
+        test('Creates a new retention offer when terms change', async ({page}) => {
+            const {lastApiRequests} = await mockApi({page, requests: getRetentionRequests({
+                retentionOffers: [createRetentionOffer({id: 'retention-month-active'})],
+                extraRequests: {
+                    addOffer: {method: 'POST', path: '/offers/', response: {
+                        offers: [{
+                            id: 'retention-offer-monthly',
+                            name: 'Monthly retention',
+                            code: 'monthly-retention'
+                        }]
+                    }}
+                }
+            })});
+
+            const {retentionModal} = await openRetentionModal(page, 'Monthly retention');
+            await retentionModal.getByLabel('Display title').fill('Before you go');
+            await retentionModal.getByLabel('Display description').fill('Stay for a little longer');
+            await retentionModal.getByRole('button', {name: /Percentage discount/}).click();
+            await retentionModal.getByLabel('Amount off').fill('35');
+            await retentionModal.getByRole('button', {name: 'Save'}).click();
+
+            await expect.poll(() => lastApiRequests.addOffer?.body).toBeTruthy();
+            expect(lastApiRequests.addOffer?.body).toMatchObject({
+                offers: [{
+                    display_title: 'Before you go',
+                    display_description: 'Stay for a little longer',
+                    cadence: 'month',
+                    amount: 35,
+                    duration: 'forever',
+                    duration_in_months: 0,
+                    currency: null,
+                    status: 'active',
+                    redemption_type: 'retention',
+                    tier: null,
+                    type: 'percent',
+                    currency_restriction: false
+                }]
+            });
+
+            const createdOffer = (lastApiRequests.addOffer?.body as {offers: Array<{name: string; code: string}>})?.offers?.[0];
+            expect(createdOffer?.name).toMatch(/^Special offer [a-f0-9]{8}$/);
+            expect(createdOffer?.code).toMatch(/^[a-f0-9]{8}$/);
+        });
+
+        test('Edits existing retention offer when only display fields change', async ({page}) => {
+            const {lastApiRequests} = await mockApi({page, requests: getRetentionRequests({
+                retentionOffers: [
+                    createRetentionOffer({
+                        id: 'retention-month-active',
+                        display_title: 'Old title',
+                        display_description: 'Old description'
+                    })
+                ],
+                extraRequests: {
+                    addOffer: {method: 'POST', path: '/offers/', response: {offers: []}},
+                    editOffer: {method: 'PUT', path: '/offers/retention-month-active/', response: {
+                        offers: [{
+                            id: 'retention-month-active',
+                            name: 'Monthly retention',
+                            code: 'monthly-retention'
+                        }]
+                    }}
+                }
+            })});
+
+            const {retentionModal} = await openRetentionModal(page, 'Monthly retention');
+            await retentionModal.getByLabel('Display title').fill('New title');
+            await retentionModal.getByLabel('Display description').fill('New description');
+            await retentionModal.getByRole('button', {name: 'Save'}).click();
+
+            await expect.poll(() => lastApiRequests.editOffer?.body).toBeTruthy();
+            expect(lastApiRequests.editOffer?.body).toMatchObject({
+                offers: [{
+                    id: 'retention-month-active',
+                    display_title: 'New title',
+                    display_description: 'New description',
+                    status: 'active'
+                }]
+            });
+            expect(lastApiRequests.addOffer).toBeUndefined();
+        });
+
+        test('Creates archived retention draft and archives active offer when disabled', async ({page}) => {
+            const {lastApiRequests} = await mockApi({page, requests: getRetentionRequests({
+                retentionOffers: [createRetentionOffer({
+                    id: 'retention-month-active',
+                    display_title: 'Before you go'
+                })],
+                extraRequests: {
+                    addOffer: {method: 'POST', path: '/offers/', response: {
+                        offers: [{
+                            id: 'retention-offer-monthly-archived',
+                            name: 'Monthly retention',
+                            code: 'monthly-retention'
+                        }]
+                    }},
+                    editOffer: {method: 'PUT', path: '/offers/retention-month-active/', response: {
+                        offers: [{
+                            id: 'retention-month-active',
+                            status: 'archived'
+                        }]
+                    }}
+                }
+            })});
+
+            const {retentionModal} = await openRetentionModal(page, 'Monthly retention');
+            await retentionModal.getByLabel('Amount off').fill('35');
+            await retentionModal.getByRole('switch', {name: 'Enable monthly retention'}).click();
+            await retentionModal.getByRole('button', {name: 'Save'}).click();
+
+            await expect.poll(() => lastApiRequests.editOffer?.body).toBeTruthy();
+            await expect.poll(() => lastApiRequests.addOffer?.body).toBeTruthy();
+
+            expect(lastApiRequests.editOffer?.body).toMatchObject({
+                offers: [{
+                    id: 'retention-month-active',
+                    status: 'archived'
+                }]
+            });
+
+            expect(lastApiRequests.addOffer?.body).toMatchObject({
+                offers: [{
+                    cadence: 'month',
+                    amount: 35,
+                    duration: 'forever',
+                    duration_in_months: 0,
+                    status: 'archived',
+                    redemption_type: 'retention',
+                    tier: null,
+                    type: 'percent',
+                    currency_restriction: false
+                }]
+            });
+        });
+    });
 });
diff --git a/apps/portal/package.json b/apps/portal/package.json
index 93a628ef7ce..aca281ed1f0 100644
--- a/apps/portal/package.json
+++ b/apps/portal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tryghost/portal",
-  "version": "2.64.3",
+  "version": "2.64.4",
   "license": "MIT",
   "repository": "https://github.com/TryGhost/Ghost",
   "author": "Ghost Foundation",
diff --git a/apps/portal/src/app.js b/apps/portal/src/app.js
index 80960853f08..9c90b3ee979 100644
--- a/apps/portal/src/app.js
+++ b/apps/portal/src/app.js
@@ -335,8 +335,24 @@ export default class App extends React.Component {
                 data.tier = {
                     id: value || Fixtures.offer.tier.id
                 };
+            } else if (key === 'redemption_type') {
+                data.redemption_type = value || 'signup';
             }
         }
+
+        if (data.redemption_type === 'retention') {
+            const previewSubscriptionId = Fixtures.member.preview?.subscriptions?.[0]?.id;
+
+            return {
+                page: 'accountPlan',
+                offers: [data],
+                pageData: {
+                    action: 'cancel',
+                    subscriptionId: previewSubscriptionId
+                }
+            };
+        }
+
         return {
             page: 'offer',
             pageData: data
diff --git a/apps/portal/src/components/pages/account-plan-page.js b/apps/portal/src/components/pages/account-plan-page.js
index 8229a4ee235..4a6ae99fae0 100644
--- a/apps/portal/src/components/pages/account-plan-page.js
+++ b/apps/portal/src/components/pages/account-plan-page.js
@@ -51,7 +51,7 @@ export const AccountPlanPageStyles = `
     }
 `;
 
-function getConfirmationPageTitle({confirmationType}) {
+function getConfirmationPageTitle({confirmationType, pendingOffer}) {
     if (confirmationType === 'changePlan') {
         return t('Confirm subscription');
     } else if (confirmationType === 'cancel') {
@@ -59,15 +59,15 @@ function getConfirmationPageTitle({confirmationType}) {
     } else if (confirmationType === 'subscribe') {
         return t('Subscribe');
     } else if (confirmationType === 'offerRetention') {
-        return 'Before you go';
+        return pendingOffer?.display_title || 'Before you go';
     }
 }
 
-const Header = ({showConfirmation, confirmationType}) => {
+const Header = ({showConfirmation, confirmationType, pendingOffer}) => {
     const {member} = useContext(AppContext);
     let title = isPaidMember({member}) ? t('Change plan') : t('Choose a plan');
     if (showConfirmation) {
-        title = getConfirmationPageTitle({confirmationType});
+        title = getConfirmationPageTitle({confirmationType, pendingOffer});
     }
     return (
         <header className='gh-portal-detail-header'>
@@ -279,6 +279,7 @@ function getOfferMessage(offer, originalPrice, currency, amountOff) {
     return '';
 }
 
+// TODO: Add i18n once copy is finalized
 const RetentionOfferSection = ({offer, product, price, onAcceptOffer, onDeclineOffer}) => {
     const {brandColor, action} = useContext(AppContext);
     const isAcceptingOffer = action === 'applyOffer:running';
@@ -288,6 +289,9 @@ const RetentionOfferSection = ({offer, product, price, onAcceptOffer, onDeclineO
     const discountedPrice = formatNumber(getUpdatedOfferPrice({offer, price}));
     const amountOff = getOfferOffAmount({offer});
     const discountText = offer.type === 'free_months' ? `${amountOff} free` : `${amountOff} off`;
+    const cadenceLabel = offer.cadence === 'month' ? 'Monthly' : 'Yearly';
+    const productCadenceLabel = `${product.name} - ${cadenceLabel}`;
+    const displayDescription = offer.display_description || 'We\'d hate to see you go! How about a special offer to stay?';
 
     const offerMessage = getOfferMessage(offer, originalPrice, currency, amountOff);
 
@@ -295,12 +299,12 @@ const RetentionOfferSection = ({offer, product, price, onAcceptOffer, onDeclineO
     return (
         <div className="gh-portal-logged-out-form-container gh-portal-offer gh-portal-retention-offer">
             <p className="gh-portal-text-center">
-                {'We\'d hate to see you go! How about a special offer to stay?'}
+                {displayDescription}
             </p>
 
             <div className="gh-portal-offer-bar">
                 <div className="gh-portal-offer-title">
-                    <h4>{product.name} - {offer.cadence === 'month' ? 'Monthly' : 'Yearly'}</h4>
+                    <h4>{productCadenceLabel}</h4>
                     <h5 className="gh-portal-discount-label">{discountText}</h5>
                 </div>
 
@@ -323,6 +327,7 @@ const RetentionOfferSection = ({offer, product, price, onAcceptOffer, onDeclineO
                     </p>
                 </div>
 
+                {/* TODO: Add i18n once copy is finalized */}
                 <ActionButton
                     dataTestId={'accept-retention-offer'}
                     onClick={onAcceptOffer}
@@ -330,7 +335,7 @@ const RetentionOfferSection = ({offer, product, price, onAcceptOffer, onDeclineO
                     disabled={isAcceptingOffer}
                     isPrimary={true}
                     brandColor={brandColor}
-                    label="Accept offer"
+                    label="Continue subscription"
                     style={{
                         width: '100%',
                         height: '40px',
@@ -339,6 +344,7 @@ const RetentionOfferSection = ({offer, product, price, onAcceptOffer, onDeclineO
                 />
             </div>
 
+            {/* TODO: Add i18n once copy is finalized */}
             <ActionButton
                 dataTestId={'decline-retention-offer'}
                 onClick={onDeclineOffer}
@@ -454,7 +460,7 @@ export default class AccountPlanPage extends React.Component {
     }
 
     componentDidMount() {
-        const {member, pageData} = this.context;
+        const {member} = this.context;
         if (!member) {
             this.context.doAction('switchPage', {
                 page: 'signin'
@@ -462,18 +468,60 @@ export default class AccountPlanPage extends React.Component {
             return;
         }
 
-        // If opened from a custom cancel button with a subscription ID, trigger the cancellation flow
-        if (pageData?.action === 'cancel' && pageData?.subscriptionId) {
-            this.onCancelSubscription({subscriptionId: pageData.subscriptionId});
-            // Clear the action so it doesn't re-trigger if the user dismisses and reopens Portal
-            pageData.action = null;
-        }
+        this.handleCancelActionFromPageData();
+    }
+
+    componentDidUpdate() {
+        this.handleCancelActionFromPageData();
     }
 
     componentWillUnmount() {
         clearTimeout(this.timeoutId);
     }
 
+    getRetentionOfferSignature(offer) {
+        if (!offer) {
+            return '';
+        }
+
+        return [
+            offer.id,
+            offer.display_title || '',
+            offer.display_description || '',
+            offer.type || '',
+            offer.cadence || '',
+            offer.amount || 0,
+            offer.duration || '',
+            offer.duration_in_months || 0,
+            offer.currency || '',
+            offer.status || '',
+            offer.tier?.id || ''
+        ].join('|');
+    }
+
+    handleCancelActionFromPageData() {
+        const {member, pageData, offers} = this.context;
+
+        if (!member || pageData?.action !== 'cancel' || !pageData?.subscriptionId) {
+            return;
+        }
+
+        const nextRetentionOffer = (offers || []).find(offer => offer.redemption_type === 'retention') || null;
+        const nextRetentionOfferSignature = this.getRetentionOfferSignature(nextRetentionOffer);
+        const currentRetentionOfferSignature = this.getRetentionOfferSignature(this.state.pendingOffer);
+
+        const shouldRefreshRetentionFlow = this.state.targetSubscriptionId !== pageData.subscriptionId ||
+            this.state.confirmationType !== 'offerRetention' ||
+            nextRetentionOfferSignature !== currentRetentionOfferSignature;
+
+        if (shouldRefreshRetentionFlow) {
+            this.onCancelSubscription({subscriptionId: pageData.subscriptionId});
+        }
+
+        // Clear action so normal navigation doesn't continuously re-trigger
+        pageData.action = null;
+    }
+
     getInitialState() {
         const {member, site} = this.context;
 
@@ -662,6 +710,7 @@ export default class AccountPlanPage extends React.Component {
                     <Header
                         onBack={e => this.onBack(e)}
                         confirmationType={confirmationType}
+                        pendingOffer={pendingOffer}
                         showConfirmation={showConfirmation}
                     />
                     <PlansContainer
diff --git a/apps/portal/test/app.test.js b/apps/portal/test/app.test.js
index de10c0ead5d..a2dd17e1d92 100644
--- a/apps/portal/test/app.test.js
+++ b/apps/portal/test/app.test.js
@@ -79,4 +79,24 @@ describe('App', function () {
             expect(call[0]).toBe('en');
         });
     });
+
+    test('parses retention offer preview query data into account cancellation flow', () => {
+        const app = new App({siteUrl: 'http://example.com'});
+        const previewData = app.fetchOfferQueryStrData('redemption_type=retention&display_title=Before%2520you%2520go&display_description=Please%2520stay&type=free_months&amount=2&cadence=month&tier_id=product_123&enabled=false');
+
+        expect(previewData.page).toBe('accountPlan');
+        expect(previewData.pageData).toMatchObject({
+            action: 'cancel'
+        });
+        expect(previewData.offers).toHaveLength(1);
+        expect(previewData.offers[0]).toMatchObject({
+            display_title: 'Before you go',
+            display_description: 'Please stay',
+            redemption_type: 'retention',
+            type: 'free_months',
+            amount: 2,
+            cadence: 'month'
+        });
+        expect(previewData.offers[0].tier).toMatchObject({id: 'product_123'});
+    });
 });
diff --git a/apps/portal/test/unit/components/pages/account-plan-page.test.js b/apps/portal/test/unit/components/pages/account-plan-page.test.js
index 24e8225d57e..f1828f2c3d9 100644
--- a/apps/portal/test/unit/components/pages/account-plan-page.test.js
+++ b/apps/portal/test/unit/components/pages/account-plan-page.test.js
@@ -101,10 +101,30 @@ describe('Account Plan Page', () => {
         expect(confirmCancelButton).toBeInTheDocument();
     });
 
-    test('shows retention offer when opened with cancel pageData and retention offers exist', () => {
-        const overrides = generateAccountPlanFixture();
-        const subscriptionId = overrides.member.subscriptions[0].id;
-        const paidProduct = overrides.site.products.find(p => p.type === 'paid');
+    test('shows retention offer when opened with cancel pageData and retention offers exist', async () => {
+        const paidProduct = getProductData({
+            name: 'Basic',
+            monthlyPrice: getPriceData({interval: 'month', amount: 1000, currency: 'usd'}),
+            yearlyPrice: getPriceData({interval: 'year', amount: 10000, currency: 'usd'})
+        });
+        const products = [paidProduct, getProductData({type: 'free'})];
+        const site = getSiteData({
+            products,
+            portalProducts: [paidProduct.id]
+        });
+        const member = getMemberData({
+            paid: true,
+            subscriptions: [
+                getSubscriptionData({
+                    status: 'active',
+                    interval: 'month',
+                    amount: paidProduct.monthlyPrice.amount,
+                    currency: 'USD',
+                    priceId: paidProduct.monthlyPrice.id
+                })
+            ]
+        });
+        const subscriptionId = member.subscriptions[0].id;
         const retentionOffer = getOfferData({
             redemptionType: 'retention',
             name: 'Stay with us',
@@ -114,15 +134,76 @@ describe('Account Plan Page', () => {
             tierId: paidProduct.id,
             tierName: paidProduct.name
         });
-        const {queryByText} = customSetup({
-            ...overrides,
+        const {findByRole} = customSetup({
+            site,
+            member,
             offers: [retentionOffer],
             pageData: {action: 'cancel', subscriptionId}
         });
 
-        // Should show retention offer message instead of cancellation confirmation
-        const offerMessage = queryByText(/We'd hate to see you go/i);
-        expect(offerMessage).toBeInTheDocument();
+        // Should show retention offer section instead of cancellation confirmation
+        const acceptOfferButton = await findByRole('button', {name: 'Continue subscription'});
+        expect(acceptOfferButton).toBeInTheDocument();
+    });
+
+    test('refreshes retention preview details when offer context changes', () => {
+        const paidProduct = getProductData({
+            name: 'Basic',
+            monthlyPrice: getPriceData({interval: 'month', amount: 1000, currency: 'usd'}),
+            yearlyPrice: getPriceData({interval: 'year', amount: 10000, currency: 'usd'})
+        });
+        const products = [paidProduct, getProductData({type: 'free'})];
+        const site = getSiteData({
+            products,
+            portalProducts: [paidProduct.id]
+        });
+        const member = getMemberData({
+            paid: true,
+            subscriptions: [
+                getSubscriptionData({
+                    status: 'active',
+                    interval: 'month',
+                    amount: paidProduct.monthlyPrice.amount,
+                    currency: 'USD',
+                    priceId: paidProduct.monthlyPrice.id
+                })
+            ]
+        });
+        const subscriptionId = member.subscriptions[0].id;
+
+        const firstOffer = getOfferData({
+            redemptionType: 'retention',
+            displayTitle: 'First retention title',
+            displayDescription: 'First retention description',
+            type: 'percent',
+            amount: 10,
+            cadence: 'month',
+            tierId: paidProduct.id,
+            tierName: paidProduct.name
+        });
+        const secondOffer = {
+            ...firstOffer,
+            amount: 25,
+            display_title: 'Second retention title',
+            display_description: 'Second retention description'
+        };
+
+        const {queryByText, context, rerender} = customSetup({
+            site,
+            member,
+            offers: [firstOffer],
+            pageData: {action: 'cancel', subscriptionId}
+        });
+
+        expect(queryByText('First retention title')).toBeInTheDocument();
+        expect(queryByText('10% off')).toBeInTheDocument();
+
+        context.offers = [secondOffer];
+        context.pageData = {action: 'cancel', subscriptionId};
+        rerender(<AccountPlanPage />);
+
+        expect(queryByText('Second retention title')).toBeInTheDocument();
+        expect(queryByText('25% off')).toBeInTheDocument();
     });
 
     test('clears pageData after triggering cancellation so it does not re-trigger on remount', () => {
diff --git a/ghost/core/core/server/services/offers/application/offers-api.js b/ghost/core/core/server/services/offers/application/offers-api.js
index 6ca5d454ce6..b393d99d11d 100644
--- a/ghost/core/core/server/services/offers/application/offers-api.js
+++ b/ghost/core/core/server/services/offers/application/offers-api.js
@@ -23,6 +23,29 @@ class OffersAPI {
         this.repository = repository;
     }
 
+    /**
+     * Archives all previous retention offers on a given cadence.
+     * As retention offers exist per cadence ("Monthly retention", "Yearly retention"), we allow for at most 1 active retention offer per cadence.
+     * @param {string} offerId
+     * @param {'month'|'year'} cadence
+     * @param {Object} [options]
+     */
+    async archiveActiveRetentionOffers(offerId, cadence, options = {}) {
+        const activeRetentionOffers = await this.repository.getAll({
+            transacting: options.transacting,
+            filter: 'status:active+redemption_type:retention'
+        });
+
+        for (const activeRetentionOffer of activeRetentionOffers) {
+            if (activeRetentionOffer.id === offerId || activeRetentionOffer.cadence.value !== cadence) {
+                continue;
+            }
+
+            activeRetentionOffer.status = OfferStatus.create('archived');
+            await this.repository.save(activeRetentionOffer, options);
+        }
+    }
+
     /**
      * @param {object} data
      * @param {string} data.id
@@ -62,6 +85,14 @@ class OffersAPI {
 
             await this.repository.save(offer, saveOptions);
 
+            if (offer.redemptionType.value === 'retention' && offer.status.value === 'active') {
+                await this.archiveActiveRetentionOffers(
+                    offer.id,
+                    offer.cadence.value,
+                    saveOptions
+                );
+            }
+
             return OfferMapper.toDTO(offer);
         });
     }
@@ -116,6 +147,14 @@ class OffersAPI {
 
             await this.repository.save(offer, updateOptions);
 
+            if (offer.redemptionType.value === 'retention' && offer.status.value === 'active') {
+                await this.archiveActiveRetentionOffers(
+                    offer.id,
+                    offer.cadence.value,
+                    updateOptions
+                );
+            }
+
             return OfferMapper.toDTO(offer);
         });
     }
diff --git a/ghost/core/test/e2e-api/admin/offers.test.js b/ghost/core/test/e2e-api/admin/offers.test.js
index 1cc977b2b4a..30d2e3684f6 100644
--- a/ghost/core/test/e2e-api/admin/offers.test.js
+++ b/ghost/core/test/e2e-api/admin/offers.test.js
@@ -811,4 +811,110 @@ describe('Offers API', function () {
                 assert.equal(body.offers[0].tier.id, defaultTier.id);
             });
     });
+
+    it('Keeps one active retention offer per cadence on create', async function () {
+        const suffix = Date.now().toString(16).slice(-6);
+
+        const firstOffer = {
+            name: `Yearly retention one ${suffix}`,
+            code: `yearly-retention-${suffix}-1`,
+            display_title: '',
+            display_description: '',
+            type: 'percent',
+            cadence: 'year',
+            amount: 20,
+            duration: 'once',
+            duration_in_months: null,
+            currency_restriction: false,
+            currency: null,
+            status: 'active',
+            redemption_type: 'retention',
+            tier: null
+        };
+
+        const secondOffer = {
+            ...firstOffer,
+            name: `Yearly retention two ${suffix}`,
+            code: `yearly-retention-${suffix}-2`,
+            amount: 25
+        };
+
+        const firstCreateResponse = await agent
+            .post('offers/')
+            .body({offers: [firstOffer]})
+            .expectStatus(200);
+        const firstOfferId = firstCreateResponse.body.offers[0].id;
+
+        const secondCreateResponse = await agent
+            .post('offers/')
+            .body({offers: [secondOffer]})
+            .expectStatus(200);
+        const secondOfferId = secondCreateResponse.body.offers[0].id;
+
+        const firstReadResponse = await agent
+            .get(`offers/${firstOfferId}/`)
+            .expectStatus(200);
+        const secondReadResponse = await agent
+            .get(`offers/${secondOfferId}/`)
+            .expectStatus(200);
+
+        assert.equal(firstReadResponse.body.offers[0].status, 'archived');
+        assert.equal(secondReadResponse.body.offers[0].status, 'active');
+    });
+
+    it('Keeps one active retention offer per cadence on activate', async function () {
+        const suffix = (Date.now() + 1).toString(16).slice(-6);
+
+        const activeOffer = {
+            name: `Yearly retention active ${suffix}`,
+            code: `yearly-retention-${suffix}-active`,
+            display_title: '',
+            display_description: '',
+            type: 'percent',
+            cadence: 'year',
+            amount: 20,
+            duration: 'once',
+            duration_in_months: null,
+            currency_restriction: false,
+            currency: null,
+            status: 'active',
+            redemption_type: 'retention',
+            tier: null
+        };
+
+        const archivedOffer = {
+            ...activeOffer,
+            name: `Yearly retention archived ${suffix}`,
+            code: `yearly-retention-${suffix}-archived`,
+            status: 'archived',
+            amount: 30
+        };
+
+        const activeCreateResponse = await agent
+            .post('offers/')
+            .body({offers: [activeOffer]})
+            .expectStatus(200);
+        const activeOfferId = activeCreateResponse.body.offers[0].id;
+
+        const archivedCreateResponse = await agent
+            .post('offers/')
+            .body({offers: [archivedOffer]})
+            .expectStatus(200);
+        const archivedOfferId = archivedCreateResponse.body.offers[0].id;
+
+        await agent
+            .put(`offers/${archivedOfferId}/`)
+            .body({offers: [{status: 'active'}]})
+            .expectStatus(200);
+
+        const activeReadResponse = await agent
+            .get(`offers/${activeOfferId}/`)
+            .expectStatus(200);
+        const archivedReadResponse = await agent
+            .get(`offers/${archivedOfferId}/`)
+            .expectStatus(200);
+
+        assert.equal(activeReadResponse.body.offers[0].status, 'archived');
+        assert.equal(archivedReadResponse.body.offers[0].status, 'active');
+    });
 });