diff --git a/assets/js/components/TourTooltip.js b/assets/js/components/TourTooltip.js
index ea0beb2a920..826cd806d01 100644
--- a/assets/js/components/TourTooltip.js
+++ b/assets/js/components/TourTooltip.js
@@ -33,6 +33,7 @@ import { __ } from '@wordpress/i18n';
  */
 import { Button } from 'googlesitekit-components';
 import { createIncrementalArrayBySize } from '@/js/util/create-incremental-array-by-size';
+import { useFeature } from '@/js/hooks/useFeature';
 import CloseIcon from '@/svg/icons/close.svg';
 import Typography from './Typography';
 
@@ -45,6 +46,7 @@ export default function TourTooltip( {
 	step,
 	tooltipProps,
 } ) {
+	const setupFlowRefreshEnabled = useFeature( 'setupFlowRefresh' );
 	const indicatorArray = size > 1 ? createIncrementalArrayBySize( size ) : [];
 	function getIndicatorClassName( indicatorIndex ) {
 		return classnames( 'googlesitekit-tooltip-indicator', {
@@ -52,11 +54,18 @@ export default function TourTooltip( {
 		} );
 	}
 
+	// Determine close icon size based on feature flag.
+	const closeIconSize = setupFlowRefreshEnabled ? 10 : 14;
+
 	return (
 		<div
 			className={ classnames(
 				'googlesitekit-tour-tooltip',
-				step.className
+				step.className,
+				{
+					'googlesitekit-tour-tooltip--setupFlowRefresh':
+						setupFlowRefreshEnabled,
+				}
 			) }
 			{ ...tooltipProps }
 		>
@@ -75,21 +84,29 @@ export default function TourTooltip( {
 					</div>
 				</div>
 				<CardActions className="googlesitekit-tooltip-actions">
-					<ul className="googlesitekit-tooltip-indicators">
-						{ indicatorArray.map( ( indicatorIndex ) => (
-							<li
-								key={ `indicator-${ indicatorIndex }` }
-								className={ getIndicatorClassName(
-									indicatorIndex
-								) }
-							/>
-						) ) }
-					</ul>
+					{ ! setupFlowRefreshEnabled && (
+						<ul className="googlesitekit-tooltip-indicators">
+							{ indicatorArray.map( ( indicatorIndex ) => (
+								<li
+									key={ `indicator-${ indicatorIndex }` }
+									className={ getIndicatorClassName(
+										indicatorIndex
+									) }
+								/>
+							) ) }
+						</ul>
+					) }
+					{ setupFlowRefreshEnabled && (
+						<p className="googlesitekit-tooltip-steps">
+							{ index + 1 } / { size }
+						</p>
+					) }
 					<div className="googlesitekit-tooltip-buttons">
 						{ index !== 0 && (
 							<Button
 								className="googlesitekit-tooltip-button"
-								text
+								text={ ! setupFlowRefreshEnabled }
+								tertiary={ setupFlowRefreshEnabled }
 								{ ...backProps }
 							>
 								{ backProps.title }
@@ -98,8 +115,14 @@ export default function TourTooltip( {
 						{ step.cta }
 						{ primaryProps.title && (
 							<Button
-								className="googlesitekit-tooltip-button"
-								text
+								className={ classnames(
+									'googlesitekit-tooltip-button',
+									{
+										'googlesitekit-tooltip-button--primary':
+											setupFlowRefreshEnabled,
+									}
+								) }
+								text={ ! setupFlowRefreshEnabled }
 								{ ...primaryProps }
 							>
 								{ primaryProps.title }
@@ -109,7 +132,12 @@ export default function TourTooltip( {
 				</CardActions>
 				<Button
 					className="googlesitekit-tooltip-close"
-					icon={ <CloseIcon width="14" height="14" /> }
+					icon={
+						<CloseIcon
+							width={ closeIconSize }
+							height={ closeIconSize }
+						/>
+					}
 					onClick={ closeProps.onClick }
 					aria-label={ __( 'Close', 'google-site-kit' ) }
 					text
diff --git a/assets/js/components/TourTooltips.js b/assets/js/components/TourTooltips.js
index cd1a71cce1d..637482b52a3 100644
--- a/assets/js/components/TourTooltips.js
+++ b/assets/js/components/TourTooltips.js
@@ -35,6 +35,7 @@ import { useSelect, useDispatch, useRegistry } from 'googlesitekit-data';
 import { CORE_UI } from '@/js/googlesitekit/datastore/ui/constants';
 import { CORE_USER } from '@/js/googlesitekit/datastore/user/constants';
 import { trackEvent } from '@/js/util/tracking';
+import { useFeature } from '@/js/hooks/useFeature';
 import TourTooltip from './TourTooltip';
 import useViewContext from '@/js/hooks/useViewContext';
 
@@ -99,6 +100,7 @@ export default function TourTooltips( {
 	const registry = useRegistry();
 
 	const viewContext = useViewContext();
+	const setupFlowRefreshEnabled = useFeature( 'setupFlowRefresh' );
 
 	const stepIndex = useSelect(
 		( select ) => select( CORE_UI ).getValue( stepKey ) || 0
@@ -241,7 +243,7 @@ export default function TourTooltips( {
 		}
 	}
 
-	// Start tour on initial render
+	// Start tour on initial render.
 	useMount( startTour );
 
 	const parsedSteps = steps.map( ( step ) => ( {
@@ -251,20 +253,33 @@ export default function TourTooltips( {
 		...step,
 	} ) );
 
+	// Customize floater props based on feature flag.
+	const customFloaterProps = setupFlowRefreshEnabled
+		? {
+				...floaterProps,
+				styles: {
+					...floaterProps.styles,
+					floater: {
+						filter: 'drop-shadow(rgba(0, 0, 0, 0.25) 0px 4px 16px)',
+					},
+				},
+		  }
+		: floaterProps;
+
 	return (
 		<Joyride
 			callback={ handleJoyrideCallback }
-			floaterProps={ floaterProps }
+			floaterProps={ customFloaterProps }
 			locale={ joyrideLocale }
 			run={ run }
 			stepIndex={ stepIndex }
 			steps={ parsedSteps }
 			styles={ joyrideStyles }
 			tooltipComponent={ TourTooltip }
+			showProgress={ ! setupFlowRefreshEnabled }
 			continuous
 			disableOverlayClose
 			disableScrolling
-			showProgress
 		/>
 	);
 }
diff --git a/assets/js/components/TourTooltips.stories.js b/assets/js/components/TourTooltips.stories.js
index 72cebd5a885..1302f7b327d 100644
--- a/assets/js/components/TourTooltips.stories.js
+++ b/assets/js/components/TourTooltips.stories.js
@@ -375,50 +375,47 @@ function TourControls() {
 	);
 }
 
-export function Default() {
-	const steps = [
-		{
-			target: '.step-1',
-			title: 'See where your visitors are coming from',
-			content:
-				'Click on a slice of the chart to see how it changed over time just for that source',
-			placement: 'bottom-start',
-		},
-		{
-			target: '.step-2',
-			title: "It's now easier to see your site's traffic at a glance",
-			content:
-				'Check the trend graph to see how your traffic changed over time',
-			placement: 'top-end',
-		},
-		{
-			target: '.step-3',
-			title: 'Check how your traffic changed since you last looked',
-			content:
-				'Select a time frame to see the comparison with the previous time period',
-		},
-		{
-			target: '.step-4',
-			title: 'Generic step title for the fourth step',
-			content: (
-				<div>
-					{ createInterpolateElement(
-						'This is the fourth step with an external link that should go to Google, <a>link</a>.',
-						{
-							a: <Link href="http://google.com" external />,
-						}
-					) }
-				</div>
-			),
-			floaterProps: {
-				target: '.step-4-anchor',
-			},
+const steps = [
+	{
+		target: '.step-1',
+		title: 'See where your visitors are coming from',
+		content:
+			'Click on a slice of the chart to see how it changed over time just for that source',
+		placement: 'bottom-start',
+	},
+	{
+		target: '.step-2',
+		title: "It's now easier to see your site's traffic at a glance",
+		content:
+			'Check the trend graph to see how your traffic changed over time',
+		placement: 'top-end',
+	},
+	{
+		target: '.step-3',
+		title: 'Check how your traffic changed since you last looked',
+		content:
+			'Select a time frame to see the comparison with the previous time period',
+	},
+	{
+		target: '.step-4',
+		title: 'Generic step title for the fourth step',
+		content: (
+			<div>
+				{ createInterpolateElement(
+					'This is the fourth step with an external link that should go to Google, <a>link</a>.',
+					{
+						a: <Link href="http://google.com" external />,
+					}
+				) }
+			</div>
+		),
+		floaterProps: {
+			target: '.step-4-anchor',
 		},
-	];
-	fetchMock.post( /^\/google-site-kit\/v1\/core\/user\/data\/dismiss-tour/, {
-		body: JSON.stringify( [ 'feature' ] ),
-		status: 200,
-	} );
+	},
+];
+
+function Template() {
 	function setupRegistry( registry ) {
 		registry.dispatch( CORE_USER ).receiveGetDismissedTours( [] );
 	}
@@ -436,6 +433,8 @@ export function Default() {
 	);
 }
 
+export const Default = Template.bind( {} );
+
 function RepeatableTour() {
 	const tour = useSelect( ( select ) =>
 		select( CORE_USER ).getCurrentTour()
@@ -500,7 +499,28 @@ export function Repeatable() {
 	);
 }
 
+export const SetupFlowRefresh = Template.bind( {} );
+SetupFlowRefresh.storyName = 'Setup Flow Refresh';
+SetupFlowRefresh.parameters = {
+	features: [ 'setupFlowRefresh' ],
+};
+
 export default {
 	title: 'Components/TourTooltips',
 	component: TourTooltips,
+	decorators: [
+		( Story ) => {
+			// Set up fetchMock with overwriteRoutes to handle story switching.
+			fetchMock.post(
+				/^\/google-site-kit\/v1\/core\/user\/data\/dismiss-tour/,
+				{
+					body: JSON.stringify( [ 'feature' ] ),
+					status: 200,
+				},
+				{ overwriteRoutes: true }
+			);
+
+			return <Story />;
+		},
+	],
 };
diff --git a/assets/sass/components/tour-tooltip/_googlesitekit-tour-tooltip.scss b/assets/sass/components/tour-tooltip/_googlesitekit-tour-tooltip.scss
index 9fd0b0a124c..f72f1b250a7 100644
--- a/assets/sass/components/tour-tooltip/_googlesitekit-tour-tooltip.scss
+++ b/assets/sass/components/tour-tooltip/_googlesitekit-tour-tooltip.scss
@@ -64,26 +64,19 @@
 
 .googlesitekit-tooltip-title {
 	color: $c-content-on-primary;
-
-	// The tooltip title overrides the default Typography styles.
-	font-family: $f-secondary;
-	font-size: $fs-body-lg;
 	font-weight: $fw-medium;
-	letter-spacing: $ls-m;
-	line-height: $lh-body-lg;
-	margin-bottom: 4px;
+	margin-bottom: 8px;
 	margin-top: 0;
 }
 
 .googlesitekit-tooltip-body {
 	box-sizing: border-box;
-	font-family: $f-primary;
-	font-size: $fs-body-md;
-	font-weight: $fw-light;
-	letter-spacing: $ls-s;
-	line-height: $lh-body-md;
-	max-width: 352px;
-	padding: 24px 56px 2px 24px;
+	max-width: 332px;
+	padding: 32px $grid-gap-phone 0;
+}
+
+.googlesitekit-tooltip-content {
+	color: $c-content-on-primary;
 }
 
 .googlesitekit-tooltip-buttons {
@@ -98,15 +91,6 @@
 	min-width: initial;
 	padding: 0;
 	text-transform: none;
-
-	&:focus {
-		outline: 1px dotted $c-interactive-inverse-focus;
-		outline-offset: 6px;
-	}
-
-	&:not(:first-of-type) {
-		margin-left: 28px;
-	}
 }
 
 .googlesitekit-tooltip-button:not(:disabled) {
@@ -185,6 +169,132 @@
 	}
 }
 
+// Setup Flow Refresh variant styles.
+.googlesitekit-tour-tooltip--setupFlowRefresh {
+
+	.googlesitekit-tooltip-title {
+		font-family: $f-primary;
+		font-size: $fs-title-md;
+		letter-spacing: $ls-xxs;
+		line-height: $lh-title-md;
+	}
+
+	.googlesitekit-tooltip-content {
+		font-family: $f-primary;
+		font-size: $fs-body-sm;
+		font-weight: $fw-normal;
+		letter-spacing: $ls-xs;
+		line-height: $lh-body-sm;
+	}
+
+	.googlesitekit-tooltip-close {
+		right: $grid-gap-phone;
+		top: $grid-gap-phone;
+	}
+
+	.googlesitekit-tooltip-button {
+		border-radius: $br-lg;
+		line-height: $lh-label-md;
+		padding: 6px $grid-gap-phone;
+
+		&:not(:first-of-type) {
+			margin-left: 10px;
+		}
+
+		// Tertiary button (Back) states.
+		&:hover {
+			background-color: $c-site-kit-sk-400;
+		}
+
+		&:focus {
+			background-color: $c-site-kit-sk-300;
+			outline: none;
+		}
+
+		&:active {
+			background-color: $c-site-kit-sk-400;
+		}
+	}
+
+	.googlesitekit-tooltip-button--primary {
+		background-color: $c-site-kit-sk-50;
+		box-shadow: none;
+		color: $c-content-on-primary-container;
+
+		&:hover {
+			background-color: $c-site-kit-sk-100;
+		}
+
+		&:focus {
+			background-color: $c-site-kit-sk-200;
+		}
+
+		&:active {
+			background-color: $c-site-kit-sk-100;
+		}
+	}
+
+	.googlesitekit-tooltip-steps {
+		font-family: $f-primary;
+		font-size: $fs-body-sm;
+		font-weight: $fw-normal;
+		letter-spacing: $ls-xs;
+		line-height: $lh-body-sm;
+		margin: 0;
+	}
+
+	.googlesitekit-tooltip-actions {
+		padding: $grid-gap-phone;
+	}
+}
+
+// Old design styles - override Typography when setupFlowRefresh is disabled.
+.googlesitekit-tour-tooltip:not(.googlesitekit-tour-tooltip--setupFlowRefresh) {
+
+	.googlesitekit-tooltip-title {
+		font-family: $f-secondary;
+		font-size: $fs-body-lg;
+		letter-spacing: $ls-m;
+		line-height: $lh-body-lg;
+		margin-bottom: 4px;
+	}
+
+	.googlesitekit-tooltip-body {
+		font-family: $f-primary;
+		font-size: $fs-body-md;
+		font-weight: $fw-light;
+		letter-spacing: $ls-s;
+		line-height: $lh-body-md;
+		max-width: 352px;
+		padding: 24px 56px 2px 24px;
+	}
+
+	.googlesitekit-tooltip-button {
+
+		&:not(:first-of-type) {
+			margin-left: 28px;
+		}
+
+		&:focus {
+			outline: 1px dotted $c-interactive-inverse-focus;
+			outline-offset: 6px;
+		}
+	}
+
+	// Modal step overrides need higher specificity to override old design styles.
+	&.googlesitekit-tour-tooltip__modal_step {
+
+		.googlesitekit-tooltip-body {
+			max-width: 100%;
+			padding: 16px 16px 0;
+		}
+
+		.googlesitekit-tooltip-title {
+			margin-bottom: 10px;
+		}
+	}
+}
+
 // Fix AdminMenuTooltip jumping on scroll by using fixed positioning.
 // !important is required to override Joyride's inline styles.
 #react-joyride-step-0:has(.googlesitekit-tour-tooltip__fixed-settings-tooltip) > div.__floater {