diff --git a/assets/components/src/card/style.scss b/assets/components/src/card/style.scss
index cd66707cd9..6d255c55fe 100644
--- a/assets/components/src/card/style.scss
+++ b/assets/components/src/card/style.scss
@@ -30,6 +30,7 @@
 		align-items: center;
 		display: flex;
 		flex-wrap: wrap;
+		gap: 8px;
 		justify-content: space-between;
 		margin-bottom: -16px;
 
@@ -37,6 +38,12 @@
 			margin-bottom: 0 !important;
 			margin-top: 0 !important;
 		}
+
+		.newspack-select-control {
+			.components-base-control__field {
+				margin-bottom: 0;
+			}
+		}
 	}
 
 	// Is Narrow
diff --git a/assets/components/src/select-control/ButtonGroupControl.js b/assets/components/src/select-control/ButtonGroupControl.js
index 4d50f12199..20f5fa55ac 100644
--- a/assets/components/src/select-control/ButtonGroupControl.js
+++ b/assets/components/src/select-control/ButtonGroupControl.js
@@ -16,6 +16,7 @@ import { hooks } from '..';
 
 const ButtonGroupControl = ( {
 	buttonOptions,
+	buttonSmall,
 	className,
 	hideLabelFromVision,
 	label,
@@ -42,7 +43,9 @@ const ButtonGroupControl = ( {
 						<Button
 							key={ option.value }
 							variant={ isSelected ? 'primary' : null }
+							isPressed={ isSelected }
 							onClick={ () => onChange( option.value ) }
+							isSmall={ buttonSmall }
 						>
 							<Label />
 						</Button>
diff --git a/assets/components/src/select-control/index.js b/assets/components/src/select-control/index.js
index eb519282bf..ed9c391b75 100644
--- a/assets/components/src/select-control/index.js
+++ b/assets/components/src/select-control/index.js
@@ -25,7 +25,7 @@ class SelectControl extends Component {
 	 * Render.
 	 */
 	render() {
-		const { className, optgroups, buttonOptions, ...otherProps } = this.props;
+		const { className, optgroups, buttonOptions, buttonSmall, ...otherProps } = this.props;
 		const classes = classNames(
 			'newspack-select-control',
 			optgroups && 'newspack-grouped-select-control',
@@ -38,7 +38,11 @@ class SelectControl extends Component {
 				{ optgroups ? (
 					<GroupedSelectControl optgroups={ optgroups } { ...otherProps } />
 				) : buttonOptions ? (
-					<ButtonGroupControl buttonOptions={ buttonOptions } { ...otherProps } />
+					<ButtonGroupControl
+						buttonOptions={ buttonOptions }
+						buttonSmall={ buttonSmall }
+						{ ...otherProps }
+					/>
 				) : (
 					<BaseComponent { ...otherProps } />
 				) }
diff --git a/assets/wizards/readerRevenue/components/money-input/style.scss b/assets/wizards/readerRevenue/components/money-input/style.scss
index 2b01cd4eca..80a912bf64 100644
--- a/assets/wizards/readerRevenue/components/money-input/style.scss
+++ b/assets/wizards/readerRevenue/components/money-input/style.scss
@@ -4,54 +4,49 @@
 
 @use '~@wordpress/base-styles/colors' as wp-colors;
 
-.newspack-donations-wizard__money-input-container {
-	margin-bottom: 10px;
-	p {
-		margin: 0 0 8px;
-	}
-	@media screen and ( min-width: 480px ) {
-		margin-bottom: 0;
-		& + & {
-			margin-left: 16px;
+.newspack-donations-wizard {
+	&__money-input {
+		align-items: stretch;
+		display: flex;
+		margin: 8px 0 0;
+
+		.currency {
+			border: 1px solid wp-colors.$gray-700;
+			border-right: 0;
+			align-items: center;
+			background: wp-colors.$gray-100;
+			border-radius: 2px 0 0 2px;
+			display: flex;
+			flex: 0 0 14px;
+			height: auto;
+			justify-content: center;
+			line-height: 1;
+			margin: 0;
+			padding: 0 8px;
+			text-align: center;
 		}
-	}
-}
 
-.newspack-donations-wizard__money-input {
-	align-items: stretch;
-	display: flex;
-	margin: 8px 0 0;
-
-	.currency {
-		border: 1px solid wp-colors.$gray-700;
-		border-right: 0;
-		align-items: center;
-		background: wp-colors.$gray-100;
-		border-radius: 2px 0 0 2px;
-		display: flex;
-		flex: 0 0 14px;
-		height: auto;
-		justify-content: center;
-		line-height: 1;
-		margin: 0;
-		padding: 0 8px;
-		text-align: center;
-	}
+		.newspack-text-control {
+			margin: 0 !important;
+			width: 100%;
 
-	.newspack-text-control {
-		margin: 0 !important;
-		width: 100%;
+			@media screen and ( min-width: 1128px ) {
+				max-width: 100%;
+			}
 
-		@media screen and ( min-width: 1128px ) {
-			max-width: 100%;
-		}
+			input[type='number'] {
+				border-radius: 0 2px 2px 0;
+			}
 
-		input[type='number'] {
-			border-radius: 0 2px 2px 0;
+			.components-base-control__field {
+				margin-bottom: 0;
+			}
 		}
 
-		.components-base-control__field {
-			margin-bottom: 0;
+		&-container {
+			p {
+				margin: 0 0 8px;
+			}
 		}
 	}
 }
diff --git a/assets/wizards/readerRevenue/views/donation/index.tsx b/assets/wizards/readerRevenue/views/donation/index.tsx
index 68752b5282..9d7a72bbb9 100644
--- a/assets/wizards/readerRevenue/views/donation/index.tsx
+++ b/assets/wizards/readerRevenue/views/donation/index.tsx
@@ -12,10 +12,11 @@ import { MoneyInput } from '../../components';
 import {
 	Button,
 	Card,
+	Grid,
 	Notice,
 	SectionHeader,
+	SelectControl,
 	Wizard,
-	ActionCard,
 } from '../../../../components/src';
 import { READER_REVENUE_WIZARD_SLUG } from '../../constants';
 
@@ -82,71 +83,88 @@ export const DonationAmounts = () => {
 
 	return (
 		<>
-			<SectionHeader
-				title={ __( 'Suggested Donations', 'newspack' ) }
-				description={ __(
-					'Set suggested donation amounts. These will be the default settings for the Donate block.',
-					'newspack'
-				) }
-			/>
-			<ToggleControl
-				label={ __( 'Tiered', 'newspack' ) }
-				checked={ tiered }
-				onChange={ changeHandler( [ 'tiered' ] ) }
-			/>
+			<Card headerActions noBorder>
+				<SectionHeader
+					title={ __( 'Suggested Donations', 'newspack' ) }
+					description={ __(
+						'Set suggested donation amounts. These will be the default settings for the Donate block.',
+						'newspack'
+					) }
+					noMargin
+				/>
+				<SelectControl
+					label={ __( 'Donation Type', 'newspack' ) }
+					onChange={ () => changeHandler( [ 'tiered' ] )( ! tiered ) }
+					buttonOptions={ [
+						{ value: true, label: __( 'Tiered', 'newspack' ) },
+						{ value: false, label: __( 'Untiered', 'newspack' ) },
+					] }
+					buttonSmall
+					value={ tiered }
+					hideLabelFromVision
+				/>
+			</Card>
 			{ tiered ? (
-				availableFrequencies.map( section => {
-					const isFrequencyDisabled = disabledFrequencies[ section.key ];
-					const isOneFrequencyActive =
-						Object.values( disabledFrequencies ).filter( Boolean ).length ===
-						FREQUENCY_SLUGS.length - 1;
-					return (
-						<ActionCard
-							key={ section.key }
-							toggleChecked={ ! isFrequencyDisabled }
-							toggleOnChange={ () =>
-								changeHandler( [ 'disabledFrequencies', section.key ] )( ! isFrequencyDisabled )
-							}
-							title={ section.tieredLabel }
-							disabled={ ! isFrequencyDisabled && isOneFrequencyActive }
-						>
-							{ ! isFrequencyDisabled && (
-								<div className="flex-ns">
-									<MoneyInput
-										currencySymbol={ currencySymbol }
-										label={ __( 'Low-tier' ) }
-										value={ amounts[ section.key ][ 0 ] }
-										onChange={ changeHandler( [ 'amounts', section.key, 0 ] ) }
-									/>
-									<MoneyInput
-										currencySymbol={ currencySymbol }
-										label={ __( 'Mid-tier' ) }
-										value={ amounts[ section.key ][ 1 ] }
-										onChange={ changeHandler( [ 'amounts', section.key, 1 ] ) }
+				<Grid columns={ 1 } gutter={ 16 }>
+					{ availableFrequencies.map( section => {
+						const isFrequencyDisabled = disabledFrequencies[ section.key ];
+						const isOneFrequencyActive =
+							Object.values( disabledFrequencies ).filter( Boolean ).length ===
+							FREQUENCY_SLUGS.length - 1;
+						return (
+							<Card isMedium key={ section.key }>
+								<Grid columns={ 1 } gutter={ 16 }>
+									<ToggleControl
+										checked={ ! isFrequencyDisabled }
+										onChange={ () =>
+											changeHandler( [ 'disabledFrequencies', section.key ] )(
+												! isFrequencyDisabled
+											)
+										}
+										label={ section.tieredLabel }
+										disabled={ ! isFrequencyDisabled && isOneFrequencyActive }
 									/>
-									<MoneyInput
-										currencySymbol={ currencySymbol }
-										label={ __( 'High-tier' ) }
-										value={ amounts[ section.key ][ 2 ] }
-										onChange={ changeHandler( [ 'amounts', section.key, 2 ] ) }
-									/>
-								</div>
-							) }
-						</ActionCard>
-					);
-				} )
+									{ ! isFrequencyDisabled && (
+										<Grid columns={ 3 } rowGap={ 16 }>
+											<MoneyInput
+												currencySymbol={ currencySymbol }
+												label={ __( 'Low-tier' ) }
+												value={ amounts[ section.key ][ 0 ] }
+												onChange={ changeHandler( [ 'amounts', section.key, 0 ] ) }
+											/>
+											<MoneyInput
+												currencySymbol={ currencySymbol }
+												label={ __( 'Mid-tier' ) }
+												value={ amounts[ section.key ][ 1 ] }
+												onChange={ changeHandler( [ 'amounts', section.key, 1 ] ) }
+											/>
+											<MoneyInput
+												currencySymbol={ currencySymbol }
+												label={ __( 'High-tier' ) }
+												value={ amounts[ section.key ][ 2 ] }
+												onChange={ changeHandler( [ 'amounts', section.key, 2 ] ) }
+											/>
+										</Grid>
+									) }
+								</Grid>
+							</Card>
+						);
+					} ) }
+				</Grid>
 			) : (
-				<div className="flex-ns">
-					{ availableFrequencies.map( section => (
-						<MoneyInput
-							currencySymbol={ currencySymbol }
-							label={ section.staticLabel }
-							value={ amounts[ section.key ][ 3 ] }
-							onChange={ changeHandler( [ 'amounts', section.key, 3 ] ) }
-							key={ section.key }
-						/>
-					) ) }
-				</div>
+				<Card isMedium>
+					<Grid columns={ 3 } rowGap={ 16 }>
+						{ availableFrequencies.map( section => (
+							<MoneyInput
+								currencySymbol={ currencySymbol }
+								label={ section.staticLabel }
+								value={ amounts[ section.key ][ 3 ] }
+								onChange={ changeHandler( [ 'amounts', section.key, 3 ] ) }
+								key={ section.key }
+							/>
+						) ) }
+					</Grid>
+				</Card>
 			) }
 		</>
 	);