diff --git a/src/components/base-control2/index.js b/src/components/base-control2/index.js
index 26068c186c..9e1c2ba9e0 100644
--- a/src/components/base-control2/index.js
+++ b/src/components/base-control2/index.js
@@ -109,7 +109,7 @@ export const BaseControl = props => {
 						{ props.after }
 					</div>
 				</div>
-				<div className="stk-control-content">
+				<div className="stk-control-content" data-attribute={ props.attribute }>
 					{ props.children }
 				</div>
 			</VisualGuide>
diff --git a/src/components/block-styles-control/index.js b/src/components/block-styles-control/index.js
index 3d88056da1..47649feabf 100644
--- a/src/components/block-styles-control/index.js
+++ b/src/components/block-styles-control/index.js
@@ -221,6 +221,8 @@ export const BlockStylesControl = props => {
 		} else {
 			setOpenProNotice( value => ! value )
 		}
+
+		setOpenPopover( false )
 	}
 
 	const SaveUpdateModal = applyFilters( 'stackable.global-settings.global-block-styles.save-update-modal', Fragment )
@@ -233,11 +235,13 @@ export const BlockStylesControl = props => {
 				>
 					<Button
 						variant="tertiary"
-						className="ugb-block-styles-controls__block-style-button"
+						className={ classnames( 'ugb-block-styles-controls__block-style-button', {
+							'is-opened': openPopover,
+						} ) }
 						size="small"
 						icon="edit"
 						iconSize={ 12 }
-						onMouseDown={ () => setOpenPopover( isOpen => ! isOpen ) }
+						onClick={ () => setOpenPopover( isOpen => ! isOpen ) }
 						ref={ buttonRef }
 					>
 						{ `${ __( 'Block Style', i18n ) }:` } <wbr /> { blockStyleLabel }{ isModified && inBlockStyleOptions ? <span className="stk-panel-modified-indicator stk--visible"></span> : '' }
@@ -267,7 +271,6 @@ export const BlockStylesControl = props => {
 					className="ugb-button-icon-control__popover ugb-block-styles-controls__popover"
 					anchor={ buttonRef.current }
 					onEscape={ () => setOpenPopover( false ) }
-					onClose={ () => setOpenPopover( false ) }
 					focusOnMount={ false }
 					placement="left-start"
 					resize={ false }
@@ -297,6 +300,8 @@ export const BlockStylesControl = props => {
 										onClick={ () => onSelectBlockStyle( option.slug, index + 1 ) }
 										className={ blockStyle === option.slug ? 'ugb-block-styles-controls__selected' : '' }
 										tabIndex={ 0 }
+										data-slug={ option.slug }
+										data-name={ option.name }
 									>
 										{ blockStyle === option.slug && <span className="ugb-block-styles-controls__selected-icon"> <Dashicon icon="saved" /> </span> }
 										<span className="ugb-block-styles-controls__label">
@@ -313,6 +318,7 @@ export const BlockStylesControl = props => {
 								blockStyle={ blockStyle }
 								inOptions={ inBlockStyleOptions }
 								isModified={ isModified }
+								buttonClassName={ `${ openSaveModal ? 'is-opened' : '' }` }
 								setOpenSaveModal={ setOpenSaveModal }
 								onAddBlockStyle={ onAddBlockStyle }
 							/>
@@ -347,6 +353,8 @@ const SaveUpdateButtons = props => {
 					variant="primary"
 					onClick={ () => onAddBlockStyle() }
 					size="small"
+					data-action="save-style"
+					className={ props.buttonClassName }
 				>
 					{ __( 'Save New Block Style', i18n ) }
 					{ ! isPro && <span className="stk-pulsating-circle" role="presentation" /> }
diff --git a/src/components/color-palette-control/index.js b/src/components/color-palette-control/index.js
index 58aba8a174..1e245c6a69 100644
--- a/src/components/color-palette-control/index.js
+++ b/src/components/color-palette-control/index.js
@@ -213,6 +213,7 @@ const ColorPaletteControl = memo( props => {
 			{ ...controlProps }
 			className={ classnames( [ className, 'editor-color-palette-control', 'stk-color-palette-control' ] ) }
 			label={ label }
+			data-attribute={ props.attribute }
 		>
 			{ props.isExpanded && colorPalette }
 			{ ! props.isExpanded && (
diff --git a/src/components/guided-modal-tour/editor.scss b/src/components/guided-modal-tour/editor.scss
index 1bbde732e9..5e3bd03850 100644
--- a/src/components/guided-modal-tour/editor.scss
+++ b/src/components/guided-modal-tour/editor.scss
@@ -127,7 +127,8 @@
 			}
 		}
 	}
-	&.ugb-tour-modal--left-top {
+	&.ugb-tour-modal--left-top,
+	&.ugb-tour-modal--right-top {
 		.components-modal__content {
 			&::after {
 				top: 30px;
diff --git a/src/components/guided-modal-tour/index.js b/src/components/guided-modal-tour/index.js
index 71d631fb61..f5b1e1a45a 100644
--- a/src/components/guided-modal-tour/index.js
+++ b/src/components/guided-modal-tour/index.js
@@ -22,6 +22,7 @@ import { models } from '@wordpress/api'
 import {
 	useEffect, useState, lazy, Suspense, memo,
 } from '@wordpress/element'
+import { applyFilters } from '@wordpress/hooks'
 
 // The main tour component.
 const GuidedModalTour = memo( props => {
@@ -59,7 +60,8 @@ const GuidedModalTour = memo( props => {
 	// condition can be true, false, or null. true will show the tour (even if
 	// it's already done), false will not show the tour, null will show the tour
 	// only once (normal behavior).
-	const condition = TOUR_CONDITIONS[ tourId ]
+	const conditions = applyFilters( 'stackable.guided-tour.conditions', TOUR_CONDITIONS )
+	const condition = conditions[ tourId ]
 	const conditionResult = condition ? condition() : null
 	if ( conditionResult === false ) {
 		return null
diff --git a/src/components/guided-modal-tour/tour-conditions.js b/src/components/guided-modal-tour/tour-conditions.js
index 27f2cc0e8b..383b8a05e8 100644
--- a/src/components/guided-modal-tour/tour-conditions.js
+++ b/src/components/guided-modal-tour/tour-conditions.js
@@ -27,4 +27,24 @@ export const TOUR_CONDITIONS = {
 		// Force show the tour if there is a GET parameter tour=site-kit
 		return window?.location?.search?.includes( 'tour=site-kit' ) ? true : null
 	},
+	'block-backgrounds': () => {
+		// Force show the tour if there is a GET parameter tour=block-backgrounds
+		return window?.location?.search?.includes( 'tour=block-backgrounds' ) ? true : null
+	},
+	'responsive-controls': () => {
+		// Force show the tour if there is a GET parameter tour=responsive-controls
+		return window?.location?.search?.includes( 'tour=responsive-controls' ) ? true : null
+	},
+	'hover-states': () => {
+		// Force show the tour if there is a GET parameter tour=hover-states
+		return window?.location?.search?.includes( 'tour=hover-states' ) ? true : null
+	},
+	'advanced-hover-states': () => {
+		// Force show the tour if there is a GET parameter tour=advanced-hover-states
+		return window?.location?.search?.includes( 'tour=advanced-hover-states' ) ? true : null
+	},
+	'global-color-schemes': () => {
+		// Force show the tour if there is a GET parameter tour=global-color-schemes
+		return window?.location?.search?.includes( 'tour=global-color-schemes' ) ? true : null
+	},
 }
diff --git a/src/components/sortable-picker/index.js b/src/components/sortable-picker/index.js
index 5e53c6a338..7f68ccde5e 100644
--- a/src/components/sortable-picker/index.js
+++ b/src/components/sortable-picker/index.js
@@ -207,6 +207,7 @@ const LabeledItemIndicator = props => {
 								}
 							} }
 							isPressed={ isOpen }
+							data-item-key={ item.key || item.slug || item.name }
 						>
 							<HStack justify="flex-start">
 								<ItemPreview item={ item } />
diff --git a/src/lazy-components/modal-tour/index.js b/src/lazy-components/modal-tour/index.js
index 6acae65a97..d6aac5fe6d 100644
--- a/src/lazy-components/modal-tour/index.js
+++ b/src/lazy-components/modal-tour/index.js
@@ -74,11 +74,17 @@ const ModalTour = memo( props => {
 		// eslint-disable-next-line no-unused-vars
 		postStep = NOOP, // If provided, this is a function to run after the step is shown.
 		skipIf = NOOP, // If provided, this is a function to check if the step should be skipped.
+		modalDelay = 200, // If provided, this is the delay in milliseconds to show the modal.
+		anchorInIframe = false,
+		glowTargetInIframe = false,
 	} = steps[ currentStep ]
 
 	useEffect( () => {
 		setTimeout( () => {
 			initialize()
+			if ( currentStep === 0 && preStep ) {
+				preStep( currentStep )
+			}
 		}, 50 )
 	}, [ initialize ] )
 
@@ -146,7 +152,7 @@ const ModalTour = memo( props => {
 					setIsVisibleDelayed( true )
 					setIsTransitioning( false )
 				}, 150 )
-			}, 200 )
+			}, modalDelay )
 		}, 100 )
 
 		setTimeout( () => {
@@ -285,47 +291,60 @@ const ModalTour = memo( props => {
 
 		// Based on the anchor and position, calculate the X and Y offsets of the modal relative to the anchor.
 		// We have the modalRef.current which we can use to get the modal's bounding client rect.
-		const anchorRect = document.querySelector( anchor )?.getBoundingClientRect()
+		let anchorRect = null
+
+		let iframeRect = null
+		if ( anchorInIframe ) {
+			const iframe = document.querySelector( 'iframe[name="editor-canvas"]' )
+			iframeRect = iframe?.getBoundingClientRect()
+			anchorRect = iframe?.contentDocument?.querySelector( anchor )?.getBoundingClientRect()
+		} else {
+			anchorRect = document.querySelector( anchor )?.getBoundingClientRect()
+		}
 
 		if ( ! anchorRect ) {
 			return defaultOffset
 		}
 
+		const offsetCoord = ( x, y ) => {
+			if ( anchorInIframe && iframeRect ) {
+				return [ `${ x + iframeRect.left }px`, `${ y + iframeRect.top }px` ]
+			}
+			return [ `${ x }px`, `${ y }px` ]
+		}
+
 		switch ( position ) {
 			case 'left':
 				// Left, middle
-				return [ `${ anchorRect.left - modalRect.width - 16 }px`, `${ anchorRect.top + ( anchorRect.height / 2 ) - ( modalRect.height / 2 ) }px` ]
+				return offsetCoord( anchorRect.left - modalRect.width - 16, anchorRect.top + ( anchorRect.height / 2 ) - ( modalRect.height / 2 ) )
 			case 'left-top':
-				return [ `${ anchorRect.left - modalRect.width - 16 }px`, `${ anchorRect.top + 16 }px` ]
+				return offsetCoord( anchorRect.left - modalRect.width - 16, anchorRect.top + 16 )
 			case 'left-bottom':
-				return [ `${ anchorRect.left - modalRect.width - 16 }px`, `${ anchorRect.bottom - modalRect.height - 16 }px` ]
+				return offsetCoord( anchorRect.left - modalRect.width - 16, anchorRect.bottom - modalRect.height - 16 )
 			case 'right':
-				// Right, middle
-				return [ `${ anchorRect.right + 16 }px`, `${ anchorRect.top + ( anchorRect.height / 2 ) - ( modalRect.height / 2 ) }px` ]
+				return offsetCoord( anchorRect.right + 16, anchorRect.top + ( anchorRect.height / 2 ) - ( modalRect.height / 2 ) )
 			case 'right-top':
-				return [ `${ anchorRect.right + 16 }px`, `${ anchorRect.top + 16 }px` ]
+				return offsetCoord( anchorRect.right + 16, anchorRect.top + 16 )
 			case 'right-bottom':
-				return [ `${ anchorRect.right + 16 }px`, `${ anchorRect.bottom - modalRect.height - 16 }px` ]
+				return offsetCoord( anchorRect.right + 16, anchorRect.bottom - modalRect.height - 16 )
 			case 'top':
-				// Center, top
-				return [ `${ anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ) }px`, `${ anchorRect.top - modalRect.height - 16 }px` ]
+				return offsetCoord( anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ), anchorRect.top - modalRect.height - 16 )
 			case 'top-left':
-				return [ `${ anchorRect.left + 16 }px`, `${ anchorRect.top - modalRect.height - 16 }px` ]
+				return offsetCoord( anchorRect.left + 16, anchorRect.top - modalRect.height - 16 )
 			case 'top-right':
-				return [ `${ anchorRect.right - modalRect.width - 16 }px`, `${ anchorRect.top - modalRect.height - 16 }px` ]
+				return offsetCoord( anchorRect.right - modalRect.width - 16, anchorRect.top - modalRect.height - 16 )
 			case 'bottom':
-				// Center, bottom
-				return [ `${ anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ) }px`, `${ anchorRect.bottom + 16 }px` ]
+				return offsetCoord( anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ), anchorRect.bottom + 16 )
 			case 'bottom-left':
-				return [ `${ anchorRect.left + 16 }px`, `${ anchorRect.bottom + 16 }px` ]
+				return offsetCoord( anchorRect.left + 16, anchorRect.bottom + 16 )
 			case 'bottom-right':
-				return [ `${ anchorRect.right - modalRect.width - 16 }px`, `${ anchorRect.bottom + 16 }px` ]
+				return offsetCoord( anchorRect.right - modalRect.width - 16, anchorRect.bottom + 16 )
 			case 'center':
-				return [ `${ anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ) }px`, `${ anchorRect.top + ( anchorRect.height / 2 ) - ( modalRect.height / 2 ) }px` ]
+				return offsetCoord( anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ), anchorRect.top + ( anchorRect.height / 2 ) - ( modalRect.height / 2 ) )
 			case 'center-top':
-				return [ `${ anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ) }px`, `${ anchorRect.top + 16 }px` ]
+				return offsetCoord( anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ), anchorRect.top + 16 )
 			case 'center-bottom':
-				return [ `${ anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ) }px`, `${ anchorRect.bottom - modalRect.height - 16 }px` ]
+				return offsetCoord( anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ), anchorRect.bottom - modalRect.height - 16 )
 			default:
 				return defaultOffset
 		}
@@ -335,7 +354,12 @@ const ModalTour = memo( props => {
 	useEffect( () => {
 		if ( glowTarget && isVisibleDelayed ) {
 			// Get the top, left, width, and height of the target.
-			const target = document.querySelector( glowTarget )
+			let target = null
+			if ( glowTargetInIframe ) {
+				target = document.querySelector( 'iframe[name="editor-canvas"]' )?.contentDocument?.querySelector( glowTarget )
+			} else {
+				target = document.querySelector( glowTarget )
+			}
 			if ( target ) {
 				const targetRect = target.getBoundingClientRect()
 
@@ -347,8 +371,18 @@ const ModalTour = memo( props => {
 				// Create the element.
 				if ( glowElementRef.current ) {
 					glowElementRef.current.className = `ugb-tour-modal__glow ugb-tour-modal__glow--${ glowTargetSize }`
-					glowElementRef.current.style.top = `${ targetRect.top - 8 }px`
-					glowElementRef.current.style.left = `${ targetRect.left - 8 }px`
+					let top = targetRect.top - 8
+					let left = targetRect.left - 8
+					if ( glowTargetInIframe ) {
+						const iframe = document.querySelector( 'iframe[name="editor-canvas"]' )
+						if ( iframe ) {
+							const iframeRect = iframe.getBoundingClientRect()
+							left += iframeRect.left
+							top += iframeRect.top
+						}
+					}
+					glowElementRef.current.style.top = `${ top }px`
+					glowElementRef.current.style.left = `${ left }px`
 					glowElementRef.current.style.width = `${ targetRect.width + 16 }px`
 					glowElementRef.current.style.height = `${ targetRect.height + 16 }px`
 				}
diff --git a/src/lazy-components/modal-tour/tours/advanced-hover-states.js b/src/lazy-components/modal-tour/tours/advanced-hover-states.js
new file mode 100644
index 0000000000..d82d414d60
--- /dev/null
+++ b/src/lazy-components/modal-tour/tours/advanced-hover-states.js
@@ -0,0 +1,339 @@
+import { __ } from '@wordpress/i18n'
+import { i18n } from 'stackable'
+import { dispatch, select } from '@wordpress/data'
+import { createInterpolateElement } from '@wordpress/element'
+
+export const advancedHoverStates = {
+	initialize: () => {
+		// Add some default content that we will select
+
+		const blockObject = wp.blocks.createBlock(
+			'stackable/columns',
+			{
+				uniqueId: '1dbe04e',
+				blockMargin: { bottom: '' },
+				align: 'full',
+				contentAlign: 'center',
+			},
+			[
+				wp.blocks.createBlock(
+					'stackable/column',
+					{
+						uniqueId: 'f957abc',
+						hasContainer: true,
+						columnSpacing: {
+							top: '', right: '', bottom: '', left: '',
+						},
+					},
+					[
+						wp.blocks.createBlock(
+							'stackable/heading',
+							{
+								uniqueId: 'a8ebea7',
+								// Retain our text
+								text: 'Explore the World with Us',
+								textTag: 'h2',
+							}
+						),
+						wp.blocks.createBlock(
+							'stackable/text',
+							{
+								uniqueId: '57e76a1',
+								// Retain our text
+								text: 'Discover breathtaking destinations, plan your next adventure, and make unforgettable memories with our travel guides and tips.',
+							}
+						),
+					]
+				),
+			]
+		)
+
+		// Insert our block
+		dispatch( 'core/block-editor' ).insertBlocks( [ blockObject ], 0 )
+
+		// Select the inner columns block for the tour
+		dispatch( 'core/block-editor' ).selectBlock( blockObject.innerBlocks[ 0 ].clientId )
+	},
+	steps: [
+		{
+			title: __( 'Styling Containers with Hover Styles', i18n ),
+			description: createInterpolateElement(
+				__( 'Styling the container with hover styles is a great way to add interactivity to your designs. Click the <strong>hover toggle</strong> next to <strong>Background Color</strong> to start.', i18n ),
+				{ strong: <strong /> }
+			),
+			help: createInterpolateElement( __( 'Click the <strong>hover toggle</strong> next to <strong>Background Color</strong> to start.', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '.stk-control:has([data-attribute="containerBackgroundColor"])',
+			position: 'left',
+			glowTarget: '.stk-control:has([data-attribute="containerBackgroundColor"]) .stk-control-label button[data-value="normal"]',
+			nextEventTarget: '.stk-control:has([data-attribute="containerBackgroundColor"]) .stk-control-label button',
+			preStep: () => {
+				setTimeout( () => {
+					// Click the tab
+					document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' )?.click()
+
+					setTimeout( () => {
+						document.querySelector( '.ugb-panel--container:not(.is-opened) .stk-panel' )?.click()
+					}, 100 )
+				}, 100 )
+			},
+		},
+		{
+			title: __( 'Selecting the Hover State', i18n ),
+			description: createInterpolateElement(
+				__( 'Now select the <strong>hover button</strong>. This lets you adjust how the container will look when hovered.', i18n ),
+				{ strong: <strong /> }
+			),
+			anchor: '.stk-control:has([data-attribute="containerBackgroundColor"]) .stk-label-unit-toggle__wrapper',
+			position: 'left',
+			glowTarget: '.stk-control:has([data-attribute="containerBackgroundColor"]) .stk-label-unit-toggle__wrapper',
+			nextEventTarget: '.stk-control:has([data-attribute="containerBackgroundColor"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="hover"]',
+			nextEvent: 'mousedown',
+			preStep: () => {
+				document.querySelector( '.stk-control:has([data-attribute="containerBackgroundColor"]) .stk-label-unit-toggle__wrapper:not(.is-open) button' )?.click()
+			},
+			postStep: () => {
+				document.querySelector( '.stk-control:has([data-attribute="containerBackgroundColor"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="hover"]' )?.click()
+			},
+		},
+		{
+			title: __( 'Adjusting the Background Color on Hover', i18n ),
+			description: createInterpolateElement(
+				__( 'The controls now affect the <strong>Hover</strong> state only. Try adjusting the <strong>Background Color</strong> value and see how the preview changes when hovered.', i18n ),
+				{ strong: <strong /> }
+			),
+			help: createInterpolateElement( __( 'Click on <strong>Background Color</strong> to open the color picker and select a color.', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '.stk-control:has([data-attribute="containerBackgroundColor"])',
+			position: 'left',
+			glowTarget: '.stk-control:has([data-attribute="containerBackgroundColor"]) .stk-control-content',
+			nextEventTarget: '.stk-control-content[data-attribute="containerBackgroundColor"] button',
+			preStep: () => {
+				document.querySelector( '.stk-control:has([data-attribute="containerBackgroundColor"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="hover"]' )?.click()
+			},
+			postStep: () => {
+				document.querySelector( '.stk-control-content[data-attribute="containerBackgroundColor"] button:not(.is-open)' )?.click()
+			},
+		},
+		{
+			title: __( 'Pick a Color', i18n ),
+			description: __( 'Select a color from the palette to apply it.', i18n ),
+			anchor: '.components-popover__content:has(.stk-color-palette-control__popover-content)',
+			position: 'left',
+			glowTarget: '.components-popover__content:has(.stk-color-palette-control__popover-content)',
+			nextEvent: 'mousedown',
+			nextEventTarget: '.stk-color-palette-control__popover-content *',
+			postStep: () => {
+				const allBlocks = select( 'core/block-editor' ).getBlocks()
+				const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
+				if ( columnsBlock?.innerBlocks?.[ 0 ] && ! columnsBlock.innerBlocks[ 0 ].attributes?.containerBackgroundColorHover ) {
+					dispatch( 'core/block-editor' ).updateBlockAttributes( columnsBlock.innerBlocks[ 0 ].clientId, {
+						containerBackgroundColorHover: '#2b2b2b',
+					} )
+				}
+
+				document.querySelector( '.stk-control:has([data-attribute="containerBackgroundColor"]) .block-editor-panel-color-gradient-settings__dropdown.is-open' )?.click()
+			},
+		},
+		{
+			title: __( 'Preview Your Hover Effect', i18n ),
+			description: __( 'Now the background will turn dark when your mouse hovers over the container, however the text is now hard to read, let\'s change it.', i18n ),
+			help: createInterpolateElement( __( 'Select the <strong>Heading Block</strong> to continue.', i18n ), {
+				strong: <strong />,
+			} ),
+			offsetX: '300px',
+			postStep: () => {
+				const allBlocks = select( 'core/block-editor' ).getBlocks()
+				const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
+				if ( columnsBlock?.innerBlocks?.[ 0 ]?.innerBlocks?.[ 0 ] ) {
+					dispatch( 'core/block-editor' ).selectBlock( columnsBlock.innerBlocks[ 0 ].innerBlocks[ 0 ].clientId )
+				}
+			},
+		},
+		{
+			title: __( 'Selecting the Parent Container Hover State', i18n ),
+			description: createInterpolateElement( __( 'Now select the <strong>parent container hover state</strong>. This lets you adjust how the heading text will look when the parent container is hovered.', i18n ), {
+				strong: <strong />,
+			} ),
+			help: createInterpolateElement( __( 'Select the <strong>parent container hover state</strong> to continue.', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '.stk-control:has([data-attribute="textColor1"]) .stk-label-unit-toggle__wrapper button[data-value="parent-hover"]',
+			position: 'left',
+			glowTarget: '.stk-control:has([data-attribute="textColor1"]) .stk-label-unit-toggle__wrapper button[data-value="parent-hover"]',
+			nextEventTarget: '.stk-control:has([data-attribute="textColor1"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="parent-hover"]',
+			modalDelay: 150,
+			preStep: () => {
+				setTimeout( () => {
+					const targetElTop = document.querySelector( '.stk-control:has([data-attribute="textColor1"])' )?.getBoundingClientRect()?.top
+					const editorSidebar = document.querySelector( '.editor-sidebar.ugb--has-panel-tabs' )
+					if ( editorSidebar && typeof targetElTop === 'number' ) {
+						editorSidebar.scrollTo( {
+							top: targetElTop - editorSidebar.getBoundingClientRect().top - 100,
+							behavior: 'smooth',
+						} )
+					}
+
+					document.querySelector( '.stk-control:has([data-attribute="textColor1"]) .stk-label-unit-toggle__wrapper:not(.is-open) button' )?.click()
+				}, 100 )
+			},
+			postStep: () => {
+				document.querySelector( '.stk-control:has([data-attribute="textColor1"]) .stk-label-unit-toggle__wrapper:not(.is-open) button' )?.click()
+				setTimeout( () => {
+					document.querySelector( '.stk-control:has([data-attribute="textColor1"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="parent-hover"]' )?.click()
+				}, 100 )
+			},
+		},
+		{
+			title: __( 'Selecting the Heading Color', i18n ),
+			description: createInterpolateElement( __( 'Now select the <strong>heading color</strong> to open the color picker.', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '.stk-control:has([data-attribute="textColor1"])',
+			position: 'left',
+			glowTarget: '.stk-control:has([data-attribute="textColor1"])',
+			nextEventTarget: '.stk-control:has([data-attribute="textColor1"]) .stk-control-content button',
+			preStep: () => {
+				setTimeout( () => {
+					const targetElTop = document.querySelector( '.stk-control:has([data-attribute="textColor1"])' )?.getBoundingClientRect()?.top
+					const editorSidebar = document.querySelector( '.editor-sidebar.ugb--has-panel-tabs' )
+					editorSidebar.scrollTo( {
+						top: targetElTop - editorSidebar.getBoundingClientRect().top - 100,
+						behavior: 'smooth',
+					} )
+				}, 100 )
+			},
+			postStep: () => {
+				document.querySelector( '.stk-control-content[data-attribute="textColor1"] button:not(.is-open)' )?.click()
+			},
+		},
+		{
+			title: __( 'Pick a Text Color', i18n ),
+			description: __( 'Select a text color from the palette to apply it.', i18n ),
+			anchor: '.components-popover__content:has(.stk-color-palette-control__popover-content)',
+			position: 'left',
+			glowTarget: '.components-popover__content:has(.stk-color-palette-control__popover-content)',
+			nextEvent: 'mousedown',
+			nextEventTarget: '.stk-color-palette-control__popover-content *',
+			postStep: () => {
+				const allBlocks = select( 'core/block-editor' ).getBlocks()
+				const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
+				if ( columnsBlock?.innerBlocks?.[ 0 ]?.innerBlocks?.[ 0 ] && ! columnsBlock.innerBlocks[ 0 ].innerBlocks[ 0 ].attributes?.textColor1ParentHover ) {
+					dispatch( 'core/block-editor' ).updateBlockAttributes( columnsBlock.innerBlocks[ 0 ].innerBlocks[ 0 ].clientId, {
+						textColor1ParentHover: '#ffffff',
+					} )
+				}
+
+				document.querySelector( '.stk-control:has([data-attribute="textColor1"]) .block-editor-panel-color-gradient-settings__dropdown.is-open' )?.click()
+			},
+		},
+		{
+			title: __( 'Heading Block is Now Readable', i18n ),
+			description: __( 'Now the heading block is readable when your mouse hovers over the container. Let\'s do the same for the text color in the text block.', i18n ),
+			offsetX: '300px',
+			postStep: () => {
+				const allBlocks = select( 'core/block-editor' ).getBlocks()
+				const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
+				if ( columnsBlock?.innerBlocks?.[ 0 ]?.innerBlocks?.[ 1 ] ) {
+					dispatch( 'core/block-editor' ).selectBlock( columnsBlock.innerBlocks[ 0 ].innerBlocks[ 1 ].clientId )
+				}
+			},
+		},
+		{
+			title: __( 'Selecting the Text Color for Parent Hover State', i18n ),
+			description: createInterpolateElement( __( 'Now select the <strong>parent container hover state</strong>. This lets you adjust how the text block will look when the parent container is hovered.', i18n ), {
+				strong: <strong />,
+			} ),
+			help: createInterpolateElement( __( 'Select the <strong>parent container hover state</strong> to continue.', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '.stk-control:has([data-attribute="textColor1"])',
+			position: 'left',
+			glowTarget: '.stk-control:has([data-attribute="textColor1"])',
+			nextEventTarget: '.stk-control:has([data-attribute="textColor1"]) .stk-control-content button',
+			modalDelay: 150,
+			preStep: () => {
+				setTimeout( () => {
+					const targetElTop = document.querySelector( '.stk-control:has([data-attribute="textColor1"])' )?.getBoundingClientRect()?.top
+					const editorSidebar = document.querySelector( '.editor-sidebar.ugb--has-panel-tabs' )
+
+					if ( editorSidebar && typeof targetElTop === 'number' ) {
+						editorSidebar.scrollTo( {
+							top: targetElTop - editorSidebar.getBoundingClientRect().top - 100,
+							behavior: 'smooth',
+						} )
+					}
+				}, 100 )
+			},
+			postStep: () => {
+				document.querySelector( '.stk-control-content[data-attribute="textColor1"] button:not(.is-open)' )?.click()
+			},
+		},
+		{
+			title: __( 'Pick a Text Color', i18n ),
+			description: __( 'Select a text color from the palette to apply it.', i18n ),
+			anchor: '.components-popover__content:has(.stk-color-palette-control__popover-content)',
+			position: 'left',
+			glowTarget: '.components-popover__content:has(.stk-color-palette-control__popover-content)',
+			nextEvent: 'mousedown',
+			nextEventTarget: '.stk-color-palette-control__popover-content *',
+			postStep: () => {
+				const allBlocks = select( 'core/block-editor' ).getBlocks()
+				const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
+				if ( columnsBlock?.innerBlocks?.[ 0 ]?.innerBlocks?.[ 1 ] && ! columnsBlock.innerBlocks[ 0 ].innerBlocks[ 1 ].attributes?.textColor1ParentHover ) {
+					dispatch( 'core/block-editor' ).updateBlockAttributes( columnsBlock.innerBlocks[ 0 ].innerBlocks[ 1 ].clientId, {
+						textColor1ParentHover: '#ffffff',
+					} )
+				}
+
+				document.querySelector( '.stk-control:has([data-attribute="textColor1"]) .block-editor-panel-color-gradient-settings__dropdown.is-open' )?.click()
+			},
+		},
+		{
+			title: __( 'Text Block is also now readable', i18n ),
+			description: __( 'Now the text block is also readable when your mouse hovers over the container.', i18n ),
+			offsetX: '300px',
+		},
+		{
+			title: __( 'Return to Normal State', i18n ),
+			description: createInterpolateElement(
+				__( 'Switch back to the normal state by clicking the <strong>cursor icon</strong> to test the hover states in action.', i18n ),
+				{ strong: <strong /> }
+			),
+			anchor: '.stk-control:has([data-attribute="textColor1"]) .stk-label-unit-toggle__wrapper button[data-value="normal"]',
+			position: 'left',
+			glowTarget: '.stk-control:has([data-attribute="textColor1"]) .stk-label-unit-toggle__wrapper button[data-value="normal"]',
+			nextEventTarget: '.stk-control:has([data-attribute="textColor1"]) .stk-label-unit-toggle__wrapper button[data-value="normal"]',
+			nextEvent: 'mousedown',
+			preStep: () => {
+				document.querySelector( '.stk-control:has([data-attribute="textColor1"]) .stk-label-unit-toggle__wrapper:not(.is-open) button' )?.click()
+			},
+			postStep: () => {
+				document.querySelector( '.stk-control:has([data-attribute="textColor1"]) .stk-label-unit-toggle__wrapper:not(.is-open) button' )?.click()
+				setTimeout( () => {
+					document.querySelector( '.stk-control:has([data-attribute="textColor1"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="normal"]' )?.click()
+				}, 100 )
+			},
+		},
+		{
+			title: __( 'Back on Normal State', i18n ),
+			description: createInterpolateElement(
+				__( 'You are now back on the <strong>normal</strong> state. You can now test the hover states in action.', i18n ),
+				{ strong: <strong /> }
+			),
+			offsetX: '300px',
+		},
+		{
+			title: __( 'Prop Tip: The Levels of Hover States', i18n ),
+			description: createInterpolateElement(
+				__( 'There are <strong>three levels of hover states</strong> you can style: <ul><li><strong>Normal State</strong>: when the mouse is not over any block</li><li><strong>Container Hover</strong>: when the mouse is hovering over a container</li><li><strong>Block Hover</strong>: when the mouse is directly over a block</li></ul>With Stackable, you can customize the appearance for all these states, making your designs more interactive and visually appealing.', i18n ),
+				{
+					strong: <strong />, ul: <ul />, li: <li />,
+				}
+			),
+			offsetX: '300px',
+		},
+	],
+}
diff --git a/src/lazy-components/modal-tour/tours/block-backgrounds.js b/src/lazy-components/modal-tour/tours/block-backgrounds.js
new file mode 100644
index 0000000000..ad290a35c8
--- /dev/null
+++ b/src/lazy-components/modal-tour/tours/block-backgrounds.js
@@ -0,0 +1,212 @@
+import { __ } from '@wordpress/i18n'
+import { i18n } from 'stackable'
+import { dispatch, select } from '@wordpress/data'
+import { createInterpolateElement } from '@wordpress/element'
+import { waitForElement } from '../utils'
+
+export const blockBackgrounds = {
+	initialize: () => {
+		// Add some default content that we will select
+
+		const blockObject = wp.blocks.createBlock(
+			'stackable/columns',
+			{
+				uniqueId: '1dbe04e',
+				blockMargin: { bottom: '' },
+				align: 'full',
+				containerWidth: 50,
+				containerHorizontalAlign: 'flex-start',
+				containerWidthUnit: '%',
+			},
+			[
+				wp.blocks.createBlock(
+					'stackable/column',
+					{
+						uniqueId: 'f957abc',
+						columnSpacing: {
+							top: '', right: '', bottom: '', left: '',
+						},
+					},
+					[
+						wp.blocks.createBlock(
+							'stackable/heading',
+							{
+								uniqueId: 'a8ebea7',
+								// Retain our text
+								text: 'Explore the World with Us',
+								textTag: 'h2',
+							}
+						),
+						wp.blocks.createBlock(
+							'stackable/text',
+							{
+								uniqueId: '57e76a1',
+								// Retain our text
+								text: 'Discover breathtaking destinations, plan your next adventure, and make unforgettable memories with our travel guides and tips.',
+							}
+						),
+						wp.blocks.createBlock(
+							'stackable/button-group',
+							{ uniqueId: 'e063798' },
+							[
+								wp.blocks.createBlock(
+									'stackable/button',
+									{
+										uniqueId: '5d04ca8',
+										// Retain our text
+										text: 'Start your journey',
+										url: '',
+									}
+								),
+							]
+						),
+					]
+				),
+			]
+		)
+		// Insert our block
+		dispatch( 'core/block-editor' ).insertBlocks( [ blockObject ], 0 )
+
+		// Select the inner columns block for the tour
+		dispatch( 'core/block-editor' ).selectBlock( blockObject.clientId )
+	},
+	steps: [
+		{
+			title: __( 'Discover Stackable Block Backgrounds & Containers', i18n ),
+			description: __( 'Welcome! Let\'s enhance your page by first adding a background to the Columns block. The Style Tab lets you tweak backgrounds, colors, borders, and typography for a custom look.', i18n ),
+			help: createInterpolateElement( __( 'Click the <strong>Style Tab</strong> in the sidebar to get started.', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '.edit-post-sidebar__panel-tab.ugb-tab--style',
+			position: 'left',
+			glowTarget: '.edit-post-sidebar__panel-tab.ugb-tab--style',
+			nextEventTarget: '.edit-post-sidebar__panel-tab.ugb-tab--style',
+			preStep: () => {
+				// Open the inspector sidebar
+				dispatch( 'core/edit-post' ).openGeneralSidebar( 'edit-post/block' )
+
+				// Look for the first "stackable/columns" block
+				const allBlocks = select( 'core/block-editor' ).getBlocks()
+				const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
+				if ( columnsBlock ) {
+					dispatch( 'core/block-editor' ).selectBlock( columnsBlock.clientId )
+				}
+			},
+			postStep: () => {
+				// Click the tab
+				document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' )?.click()
+			},
+		},
+		{
+			title: __( 'Enable a Block Background', i18n ),
+			description: __( 'Turn on the background option to instantly add a background layer to your section. Watch as your design transforms with a single toggle.', i18n ),
+			help: createInterpolateElement( __( 'Toggle ON the <strong>Background</strong> option to continue.', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '.ugb-block-background-panel .components-panel__body-title',
+			position: 'left',
+			glowTarget: '.ugb-block-background-panel .components-panel__body-title',
+			nextEventTarget: '.ugb-block-background-panel .components-panel__body-title input[type="checkbox"]',
+			nextEvent: 'mousedown',
+			preStep: () => {
+				// Open the inspector sidebar
+				dispatch( 'core/edit-post' ).openGeneralSidebar( 'edit-post/block' )
+
+				// Look for the first "stackable/columns" block
+				const allBlocks = select( 'core/block-editor' ).getBlocks()
+				const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
+				if ( columnsBlock ) {
+					dispatch( 'core/block-editor' ).selectBlock( columnsBlock.clientId )
+				}
+
+				waitForElement( '.edit-post-sidebar__panel-tab.ugb-tab--style' ).then( () => {
+					// Click the tab
+					document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' )?.click()
+				} )
+			},
+		},
+		{
+			title: __( 'Customize the Background Color', i18n ),
+			description: __( 'Now let\'s personalize your section. Choose a background color to help your content stand out or integrate it seamlessly into your page design.', i18n ),
+			help: createInterpolateElement( __( 'Open the <strong>Background Color</strong> panel to select a color.', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '.stk-color-palette-control',
+			position: 'left',
+			glowTarget: '.ugb-block-background-panel .block-editor-panel-color-gradient-settings__dropdown',
+			nextEventTarget: '.ugb-block-background-panel .block-editor-panel-color-gradient-settings__dropdown',
+			nextEvent: 'mousedown',
+			preStep: () => {
+				// Toggle background on
+				document.querySelector( '.ugb-block-background-panel:not(is-opened) button' )?.click()
+				document.querySelector( '.ugb-block-background-panel .ugb-toggle-panel-form-toggle:not(is-checked) input' )?.click()
+			},
+			postStep: () => {
+				// Click the tab
+				document.querySelector( '.ugb-block-background-panel .stk-color-palette-control .block-editor-panel-color-gradient-settings__dropdown:not(is-open)' )?.click()
+			},
+		},
+		{
+			title: __( 'Pick Your Brand Color', i18n ),
+			description: __( 'Select a color that matches your brand or mood. Try out different colors and instantly see the changes on your block.', i18n ),
+			help: createInterpolateElement( __( 'Choose a <strong>Color</strong> from the palette to apply it.', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '.components-popover__content:has(.stk-color-palette-control__popover-content)',
+			position: 'left',
+			glowTarget: '.components-popover__content:has(.stk-color-palette-control__popover-content)',
+			nextEvent: 'mousedown',
+			nextEventTarget: '.stk-color-palette-control__popover-content *',
+			postStep: () => {
+				// Click the color picker
+				document.querySelector( '.ugb-block-background-panel .stk-color-palette-control .block-editor-panel-color-gradient-settings__dropdown.is-open' )?.click()
+			},
+		},
+		{
+			title: __( 'Add a Container for Better Layout', i18n ),
+			description: __( 'Turn on the Container option to give your columns content a background, padding, and improved alignment for a polished look.', i18n ),
+			help: createInterpolateElement( __( 'Toggle ON the <strong>Container</strong> to proceed.', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '.ugb-panel--container-size .components-panel__body-title',
+			position: 'left',
+			glowTarget: '.ugb-panel--container-size .components-panel__body-title',
+			nextEventTarget: '.ugb-panel--container-size .components-panel__body-title input[type="checkbox"]',
+			nextEvent: 'mousedown',
+			preStep: () => {
+				// Click the tab
+				document.querySelector( '.ugb-block-background-panel .stk-color-palette-control .block-editor-panel-color-gradient-settings__dropdown.is-open' )?.click()
+
+				const allBlocks = select( 'core/block-editor' ).getBlocks()
+				const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
+				if ( columnsBlock && columnsBlock.innerBlocks[ 0 ] ) {
+					dispatch( 'core/block-editor' ).selectBlock( columnsBlock.innerBlocks[ 0 ].clientId )
+					document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--layout:not(.is-active)' )?.click()
+					waitForElement( '.ugb-panel--layout.is-opened .components-panel__body-title button' ).then( () => {
+						document.querySelector( '.ugb-panel--layout.is-opened .components-panel__body-title button' )?.click()
+					} )
+				}
+			},
+		},
+		{
+			title: __( 'Block Backgrounds & Containers Recap', i18n ),
+			description: __( 'Great job! You\'ve learned how to add and customize block backgrounds and containers. These features are available in most Stackable blocks, helping you create beautiful, consistent layouts with ease.', i18n ),
+			preStep: () => {
+				// Toggle background on
+				document.querySelector( '.ugb-panel--container-size:not(is-opened)' )?.click()
+				document.querySelector( '.ugb-panel--container-size .ugb-toggle-panel-form-toggle:not(is-checked) input' )?.click()
+			},
+		},
+		{
+			title: __( 'Tip: Style All Blocks Efficiently', i18n ),
+			description: createInterpolateElement( __( 'Use the <strong>Stackable Design System</strong> to manage styles for all Stackable blocks globally. Perfect for a unified look and quick design changes!', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '[aria-controls="stackable-global-settings:sidebar"]',
+			position: 'left-top',
+			offsetY: '-30px',
+			offsetX: '-8px',
+			glowTarget: '[aria-controls="stackable-global-settings:sidebar"]',
+		},
+	],
+}
diff --git a/src/lazy-components/modal-tour/tours/global-color-schemes.js b/src/lazy-components/modal-tour/tours/global-color-schemes.js
new file mode 100644
index 0000000000..e6ad4def44
--- /dev/null
+++ b/src/lazy-components/modal-tour/tours/global-color-schemes.js
@@ -0,0 +1,231 @@
+import { __ } from '@wordpress/i18n'
+import { i18n } from 'stackable'
+import { dispatch, select } from '@wordpress/data'
+import { createInterpolateElement } from '@wordpress/element'
+import { waitForElement } from '../utils'
+
+export const globalColorSchemes = {
+	initialize: () => {
+		// Add some default content that we will select
+
+		const headingBlock = wp.blocks.createBlock(
+			'stackable/heading',
+			{
+				uniqueId: '3dcffca',
+				// Retain our text
+				text: 'The World is Yours to Explore',
+				textTag: 'h1',
+			}
+		)
+
+		const columnsBlock = wp.blocks.createBlock(
+			'stackable/columns',
+			{
+				uniqueId: '1dbe04e',
+				blockMargin: { bottom: '' },
+				align: 'full',
+				hasBackground: true,
+			},
+			[
+				wp.blocks.createBlock(
+					'stackable/column',
+					{
+						uniqueId: 'f957abc',
+					},
+					[
+						wp.blocks.createBlock(
+							'stackable/heading',
+							{
+								uniqueId: 'a8ebea7',
+								// Retain our text
+								text: 'Explore the World with Us',
+								textTag: 'h2',
+							}
+						),
+						wp.blocks.createBlock(
+							'stackable/text',
+							{
+								uniqueId: '57e76a1',
+								// Retain our text
+								text: 'Discover breathtaking destinations, plan your next adventure, and make unforgettable memories with our travel guides and tips.',
+							}
+						),
+						wp.blocks.createBlock(
+							'stackable/button-group',
+							{ uniqueId: 'e063798' },
+							[
+								wp.blocks.createBlock(
+									'stackable/button',
+									{
+										uniqueId: '5d04ca8',
+										// Retain our text
+										text: 'Start your journey',
+										url: '',
+									}
+								),
+							]
+						),
+					]
+				),
+			]
+		)
+
+		// Insert our block
+		dispatch( 'core/block-editor' ).insertBlocks( [ headingBlock, columnsBlock ], 0 )
+		// Open the global settings sidebar.
+		dispatch( 'core/edit-post' )?.openGeneralSidebar( 'stackable-global-settings/sidebar' )
+
+		setTimeout( () => {
+			document.querySelector( '.ugb-global-color-schemes__panel:not(.is-opened) .components-panel__body-title button' )?.click()
+		}, 200 )
+	},
+	steps: [
+		{
+			title: '👋 ' + __( 'Welcome to Your Global Color Schemes', i18n ),
+			description: __( 'You can use the Global Color Schemes to easily apply consistent color themes across your entire website for effortless branding.', i18n ),
+			size: 'medium',
+			anchor: '.ugb-global-color-schemes__panel .components-panel__body-title',
+			position: 'left',
+		},
+		{
+			title: __( 'Default Color Scheme', i18n ),
+			description: __( 'The default color scheme is the color scheme that is applied to your entire website by default.', i18n ),
+			help: createInterpolateElement( __( 'Click the <strong>Default Color Scheme</strong> button to continue.', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '.ugb-global-color-schemes__panel .stk-global-color-scheme__color-scheme-item[data-item-key="scheme-default-1"]',
+			position: 'left',
+			nextEventTarget: '.ugb-global-color-schemes__panel .stk-global-color-scheme__color-scheme-item[data-item-key="scheme-default-1"]',
+			glowTarget: '.ugb-global-color-schemes__panel .stk-global-color-scheme__color-scheme-item[data-item-key="scheme-default-1"]',
+			postStep: () => {
+				document.querySelector( '.ugb-global-color-schemes__panel .stk-global-color-scheme__color-scheme-item[data-item-key="scheme-default-1"]' )?.click()
+			},
+		},
+		{
+			title: __( 'Setting the Default Color Scheme', i18n ),
+			description: __( 'To make things easy, we\'ve added some color scheme presets. Pick the 2nd one to quickly see how your entire design system will instantly change in the Style Guide preview below.', i18n ),
+			help: createInterpolateElement( __( 'Click this <strong>color scheme preset</strong> to continue.', i18n ), {
+				strong: <strong />,
+			} ),
+			size: 'medium',
+			anchor: '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(2)',
+			position: 'left',
+			nextEventTarget: '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(2)',
+			glowTarget: '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(2)',
+			postStep: () => {
+				document.querySelector( '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(2) button' )?.click()
+			},
+		},
+		{
+			title: __( 'See the Stackable Blocks Change Colors', i18n ),
+			description: __( 'Notice how all Stackable blocks changed their colors across your site. You can further customize the colors below to match your brand or style.', i18n ),
+			offsetX: '300px',
+		},
+		{
+			title: __( 'Go Back to Color Schemes', i18n ),
+			description: __( 'Let\'s see another way that color schemes can help with your site\'s design. Click the back button to return to the list of color schemes.', i18n ),
+			help: createInterpolateElement( __( 'Click the <strong>Back</strong> button to continue.', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '.stk-inspector-sub-header button',
+			position: 'left',
+			glowTarget: '.stk-inspector-sub-header button',
+			nextEventTarget: '.stk-inspector-sub-header button',
+			postStep: () => {
+				document.querySelector( '.stk-inspector-sub-header button' )?.click()
+			},
+		},
+		{
+			title: __( 'Background Schemes', i18n ),
+			description: __( 'The columns block on this page has its block background enabled. You can assign a different color scheme to blocks with backgrounds turned on.', i18n ),
+			help: createInterpolateElement( __( 'Click the <strong>Background Scheme</strong> button to continue.', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '.ugb-global-color-schemes__panel .stk-global-color-scheme__color-scheme-item[data-item-key="scheme-default-2"]',
+			position: 'left',
+			nextEventTarget: '.ugb-global-color-schemes__panel .stk-global-color-scheme__color-scheme-item[data-item-key="scheme-default-2"]',
+			glowTarget: '.ugb-global-color-schemes__panel .stk-global-color-scheme__color-scheme-item[data-item-key="scheme-default-2"]',
+			postStep: () => {
+				document.querySelector( '.ugb-global-color-schemes__panel .stk-global-color-scheme__color-scheme-item[data-item-key="scheme-default-2"]' )?.click()
+			},
+		},
+		{
+			title: __( 'Pick a Darker Background Color Scheme', i18n ),
+			description: __( 'Let\'s choose a darker color scheme preset for the background. This background color scheme will be used on blocks when the block background is enabled, giving your design more contrast and customization.', i18n ),
+			help: createInterpolateElement( __( 'Click this <strong>color scheme preset</strong> to continue.', i18n ), {
+				strong: <strong />,
+			} ),
+			size: 'medium',
+			anchor: '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(8)',
+			position: 'left',
+			nextEventTarget: '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(8)',
+			glowTarget: '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(8)',
+			modalDelay: 150,
+			preStep: () => {
+				setTimeout( () => {
+					const targetElTop = document.querySelector( '.stk-preset-color-schemes__preset-wrapper' )?.getBoundingClientRect()?.top
+					const editorSidebar = document.querySelector( '.interface-complementary-area.editor-sidebar' )
+					if ( editorSidebar && typeof targetElTop === 'number' ) {
+						editorSidebar.scrollTo( {
+							top: targetElTop - editorSidebar.getBoundingClientRect().top - 300,
+							behavior: 'smooth',
+						} )
+					}
+				}, 100 )
+			},
+			postStep: () => {
+				document.querySelector( '.stk-preset-color-schemes__preset-wrapper > .stk-global-color-scheme__preview:nth-child(8) button' )?.click()
+			},
+		},
+		{
+			title: __( 'Looking Good! Background Scheme Updated', i18n ),
+			description: __( 'The columns block now uses your chosen darker background, and its content colors automatically follow the scheme for a nice, coordinated look.', i18n ),
+			offsetX: '300px',
+		},
+		{
+			title: __( 'Open the Inspector Sidebar', i18n ),
+			description: __( 'Now let\'s open the Inspector sidebar so you can see where to further customize this color scheme.', i18n ),
+			help: createInterpolateElement( __( 'Click the <strong>Inspector Controls</strong> button to continue.', i18n ), {
+				strong: <strong />,
+			} ),
+			anchor: '[aria-controls="edit-post:block"]',
+			position: 'left-top',
+			offsetY: '-30px',
+			offsetX: '-8px',
+			glowTarget: '[aria-controls="edit-post:block"]',
+			nextEventTarget: '[aria-controls="edit-post:block"]',
+			postStep: async () => {
+				dispatch( 'core/edit-post' ).openGeneralSidebar( 'edit-post/block' )
+				// Make sure the Inner Column is selected.
+				const block = select( 'core/block-editor' ).getSelectedBlock()
+				if ( block?.name !== 'stackable/column' ) {
+					// Look for the first "stackable/columns" block
+					const allBlocks = select( 'core/block-editor' ).getBlocks()
+					const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
+					if ( columnsBlock ) {
+						dispatch( 'core/block-editor' ).selectBlock( columnsBlock.clientId )
+						await waitForElement( '.edit-post-sidebar__panel-tab.ugb-tab--style' )
+						document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' )?.click()
+
+						await waitForElement( '.ugb-block-background-panel button' )
+						document.querySelector( '.ugb-block-background-panel:not(.is-opened) button' )?.click()
+					}
+				}
+			},
+		},
+		{
+			title: __( 'Switch Between Color Schemes Anytime', i18n ),
+			description: __( 'If you have multiple global color schemes set up, you can easily change your block\'s style by switching the color scheme option here to instantly apply a new look.', i18n ),
+			anchor: '.stk-control:has([data-attribute="backgroundColorScheme"])',
+			position: 'left',
+			glowTarget: '.stk-control:has([data-attribute="backgroundColorScheme"])',
+			nextEventTarget: '.stk-control:has([data-attribute="backgroundColorScheme"]) select',
+		},
+		{
+			title: __( 'Global Color Schemes Ready!', i18n ),
+			description: __( 'You\'re all set! Start customizing and applying your global color schemes to make your site look great.', i18n ),
+			offsetX: '300px',
+			offsetY: '100px',
+		},
+	],
+}
diff --git a/src/lazy-components/modal-tour/tours/hover-states.js b/src/lazy-components/modal-tour/tours/hover-states.js
new file mode 100644
index 0000000000..44c420d159
--- /dev/null
+++ b/src/lazy-components/modal-tour/tours/hover-states.js
@@ -0,0 +1,141 @@
+import { __ } from '@wordpress/i18n'
+import { i18n } from 'stackable'
+import { dispatch, select } from '@wordpress/data'
+import { createInterpolateElement } from '@wordpress/element'
+import { waitForElement } from '../utils'
+
+export const hoverStates = {
+	initialize: () => {
+		// Add some default content that we will select
+
+		const blockObject = wp.blocks.createBlock(
+			'stackable/image',
+			{
+				uniqueId: 'e063798',
+				imageExternalUrl: 'https://picsum.photos/id/177/500/700.jpg',
+			}
+		)
+
+		// Insert our block
+		dispatch( 'core/block-editor' ).insertBlocks( [ blockObject ], 0 )
+
+		// Select the inner columns block for the tour
+		dispatch( 'core/block-editor' ).selectBlock( blockObject.clientId )
+
+		waitForElement( '.edit-post-sidebar__panel-tab.ugb-tab--style' ).then( () => {
+			document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--style:not(.is-active)' )?.click()
+			setTimeout( () => {
+				document.querySelector( '.ugb-panel--image:not(.is-opened)' )?.click()
+				const target = document.querySelector( '.stk-control:has([data-attribute="imageZoom"])' )
+				target?.scrollIntoView( { behavior: 'auto', block: 'center' } )
+			}, 100 )
+		} )
+	},
+	steps: [
+		{
+			title: __( 'Using the Hover Effect Controls', i18n ),
+			description: createInterpolateElement(
+				__( 'Locate the <strong>hover toggle</strong> next to <strong> Zoom</strong>. Click it to show the different hover state options.', i18n ),
+				{ strong: <strong /> }
+			),
+			anchor: '.stk-control:has([data-attribute="imageZoom"])',
+			position: 'left',
+			glowTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-control-label button[data-value="normal"]',
+			nextEventTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-control-label button',
+			preStep: () => {
+				waitForElement( '.stk-control:has([data-attribute="imageZoom"])', 3000 ).then( () => {
+					const target = document.querySelector( '.stk-control:has([data-attribute="imageZoom"])' )
+					target?.scrollIntoView( { behavior: 'auto', block: 'center' } )
+				} )
+			},
+		},
+		{
+			title: __( 'Different Hover States', i18n ),
+			description: createInterpolateElement(
+				__( 'Now select the <strong>hover button</strong>. This lets you adjust how the image will look when hovered.', i18n ),
+				{ strong: <strong /> }
+			),
+			anchor: '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper',
+			position: 'left',
+			glowTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper',
+			nextEventTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="hover"]',
+			nextEvent: 'mousedown',
+			preStep: () => {
+				document.querySelector( '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper:not(.is-open) button' )?.click()
+			},
+			postStep: () => {
+				document.querySelector( '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="hover"]' )?.click()
+			},
+		},
+		{
+			title: __( 'Adjusting Zoom on Hover', i18n ),
+			description: createInterpolateElement(
+				__( 'The controls now affect the <strong>Hover</strong> state only. Try adjusting the <strong>Image Zoom</strong> value and see how the preview changes when hovered.', i18n ),
+				{ strong: <strong /> }
+			),
+			anchor: '.stk-control:has([data-attribute="imageZoom"])',
+			position: 'left',
+			glowTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-control-content',
+			preStep: () => {
+				document.querySelector( '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="hover"]' )?.click()
+			},
+			postStep: () => {
+				// Update the order of the columns for mobile by dispatching an attribute update.
+				const allBlocks = select( 'core/block-editor' ).getBlocks()
+				const imageBlock = allBlocks.find( block => block.name === 'stackable/image' )
+				if ( imageBlock && ! imageBlock.attributes?.imageZoomHover ) {
+					dispatch( 'core/block-editor' ).updateBlockAttributes( imageBlock.clientId, {
+						imageZoomHover: 1.5,
+					} )
+				}
+			},
+		},
+		{
+			title: __( 'Preview Your Hover Effect', i18n ),
+			description: createInterpolateElement(
+				__( 'The image on the canvas is now showing your <strong>new hover zoom effect</strong>. No need to hover—this view already reflects the hover state.', i18n ),
+				{ strong: <strong /> }
+			),
+			offsetX: '300px',
+		},
+		{
+			title: __( 'Return to Normal State', i18n ),
+			description: createInterpolateElement(
+				__( 'Switch back to the normal state by clicking the <strong>cursor icon</strong> to test the hover effect in action.', i18n ),
+				{ strong: <strong /> }
+			),
+			anchor: '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button[data-value="normal"]',
+			position: 'left',
+			glowTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button[data-value="normal"]',
+			nextEventTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button[data-value="normal"]',
+			nextEvent: 'mousedown',
+			preStep: () => {
+				document.querySelector( '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper:not(.is-open) button' )?.click()
+			},
+			postStep: () => {
+				document.querySelector( '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper:not(.is-open) button' )?.click()
+				waitForElement( '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button[data-value="normal"]' ).then( () => {
+					document.querySelector( '.stk-control:has([data-attribute="imageZoom"]) .stk-label-unit-toggle__wrapper button:not(.is-active)[data-value="normal"]' )?.click()
+				} )
+			},
+		},
+		{
+			title: __( 'Back on Normal State', i18n ),
+			description: createInterpolateElement(
+				__( 'You are now back on the <strong>normal</strong> state. Notice the hover toggle is <strong>yellow</strong> - that means a custom hover effect has been saved!', i18n ),
+				{ strong: <strong /> }
+			),
+			anchor: '.stk-control:has([data-attribute="imageZoom"]) .stk-control-label button',
+			position: 'left',
+			glowTarget: '.stk-control:has([data-attribute="imageZoom"]) .stk-control-label button',
+		},
+		{
+			title: __( 'Pro Tip: Only Some Controls Feature Hover Toggle', i18n ),
+			description: createInterpolateElement(
+				__( 'Tip: Watch out—for some controls you <strong>won\'t see the hover state toggle</strong>. Only certain options support hover states. If you don\'t see the toggle, that control doesn\'t have hover customization!', i18n ),
+				{ strong: <strong /> }
+			),
+			offsetX: '300px',
+		},
+	],
+}
diff --git a/src/lazy-components/modal-tour/tours/index.js b/src/lazy-components/modal-tour/tours/index.js
index e47c7ab697..9e5cb6dd0d 100644
--- a/src/lazy-components/modal-tour/tours/index.js
+++ b/src/lazy-components/modal-tour/tours/index.js
@@ -1,9 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { applyFilters } from '@wordpress/hooks'
+
 // This file automatically imports all tour files from the tours directory
 // and exports them as a single object for use in TOUR_STEPS
 
 // Dynamically import all tour files from the tours directory
 const tourContext = require.context( './', false, /\.js$/ )
-const tours = {}
+let tours = {}
 
 // Import all tour files and populate the tours object using the filename as the key
 tourContext.keys().forEach( fileName => {
@@ -30,5 +35,7 @@ tourContext.keys().forEach( fileName => {
 	}
 } )
 
+tours = applyFilters( 'stackable.guided-tour.tours', tours )
+
 // Export all tours as a single object
 export { tours }
diff --git a/src/lazy-components/modal-tour/tours/responsive-controls.js b/src/lazy-components/modal-tour/tours/responsive-controls.js
new file mode 100644
index 0000000000..de41f80e21
--- /dev/null
+++ b/src/lazy-components/modal-tour/tours/responsive-controls.js
@@ -0,0 +1,201 @@
+import { __ } from '@wordpress/i18n'
+import { i18n } from 'stackable'
+import { dispatch, select } from '@wordpress/data'
+import { createInterpolateElement } from '@wordpress/element'
+import { waitForElement } from '../utils'
+
+export const responsiveControls = {
+	initialize: () => {
+		// Add some default content that we will select
+
+		const blockObject = wp.blocks.createBlock(
+			'stackable/columns',
+			{
+				uniqueId: '1dbe04e',
+				blockMargin: { bottom: '' },
+				align: 'full',
+			},
+			[
+				wp.blocks.createBlock(
+					'stackable/column',
+					{
+						uniqueId: 'f957abc',
+						hasContainer: true,
+						columnSpacing: {
+							top: '', right: '', bottom: '', left: '',
+						},
+					},
+					[
+						wp.blocks.createBlock(
+							'stackable/heading',
+							{
+								uniqueId: 'a8ebea7',
+								// Retain our text
+								text: 'Explore the World with Us',
+								textTag: 'h2',
+							}
+						),
+						wp.blocks.createBlock(
+							'stackable/text',
+							{
+								uniqueId: '57e76a1',
+								// Retain our text
+								text: 'Discover breathtaking destinations, plan your next adventure, and make unforgettable memories with our travel guides and tips.',
+							}
+						),
+					]
+				),
+				wp.blocks.createBlock(
+					'stackable/column',
+					{
+						uniqueId: '3dcffca',
+					},
+					[
+						wp.blocks.createBlock(
+							'stackable/image',
+							{
+								uniqueId: 'e063798',
+								imageExternalUrl: 'https://picsum.photos/id/177/500/700.jpg',
+							}
+						),
+					]
+				),
+			]
+		)
+
+		// Delete all blocks
+		// const allBlocks = select( 'core/block-editor' ).getBlocks()
+		// dispatch( 'core/block-editor' ).removeBlocks( allBlocks.map( block => block.clientId ) )
+
+		// Insert our block
+		dispatch( 'core/block-editor' ).insertBlocks( [ blockObject ], 0 )
+
+		// Select the inner columns block for the tour
+		dispatch( 'core/block-editor' ).selectBlock( blockObject.clientId )
+	},
+	steps: [
+		{
+			title: __( 'Enable Responsive Controls', i18n ),
+			description: createInterpolateElement(
+				__( 'Click the <strong>responsive toggle</strong> beside <strong>Column Arrangement</strong> to open the device options.', i18n ),
+				{ strong: <strong /> }
+			),
+			anchor: '.ugb-sort-control .stk-control-responsive-toggle',
+			position: 'left',
+			glowTarget: '.ugb-sort-control.components-base-control .stk-control-responsive-toggle',
+			nextEventTarget: '.ugb-sort-control.components-base-control .stk-control-responsive-toggle button',
+			preStep: async () => {
+				dispatch( 'core/edit-post' ).openGeneralSidebar( 'edit-post/block' )
+				// Make sure the Columns block is selected
+				const allBlocks = select( 'core/block-editor' ).getBlocks()
+				const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
+				if ( columnsBlock ) {
+					dispatch( 'core/block-editor' ).selectBlock( columnsBlock.clientId )
+				}
+				await waitForElement( '.edit-post-sidebar__panel-tab.ugb-tab--layout' )
+				// Open Layout tab if it's not open
+				document.querySelector( '.edit-post-sidebar__panel-tab.ugb-tab--layout:not(.is-active)' )?.click()
+
+				await waitForElement( '.ugb-panel--layout' )
+				document.querySelector( '.ugb-panel--layout:not(.is-opened)' )?.click()
+			},
+			postStep: () => {
+				document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle:not(.is-open) button' )?.click()
+			},
+		},
+		{
+			title: __( 'Switch to Mobile', i18n ),
+			description: createInterpolateElement(
+				__( 'Let\'s customize for mobile! Click the <strong>mobile button</strong> — this lets you change how your columns are arranged <strong>just for mobile screens</strong>.', i18n ),
+				{ strong: <strong /> }
+			),
+			anchor: '.ugb-sort-control .stk-control-responsive-toggle',
+			position: 'left',
+			glowTarget: '.ugb-sort-control.components-base-control .stk-control-responsive-toggle .stk-label-unit-toggle__wrapper',
+			nextEventTarget: '.ugb-sort-control .stk-control-responsive-toggle.is-open button[aria-label="Mobile"]',
+			nextEvent: 'mousedown',
+			preStep: () => {
+				document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle:not(.is-open) button' )?.click()
+			},
+			postStep: () => {
+				document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle button:not(.is-active)[data-value="mobile"]' )?.click()
+			},
+		},
+		{
+			title: __( 'Now Editing Mobile Layout', i18n ),
+			description: createInterpolateElement(
+				__( 'See how the editor preview changed size? The responsive toggle now shows a <strong>mobile icon</strong>, meaning you\'re adjusting <strong>only for mobile</strong>.', i18n ),
+				{ strong: <strong /> }
+			),
+			anchor: '.ugb-sort-control .stk-control-responsive-toggle',
+			position: 'left',
+			glowTarget: '.ugb-sort-control.components-base-control .stk-control-responsive-toggle',
+			preStep: () => {
+				document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle button:not(.is-active)[data-value="mobile"]' )?.click()
+			},
+		},
+		{
+			title: __( 'Change Column Order for Mobile', i18n ),
+			description: createInterpolateElement(
+				__( 'On mobile, it usually looks better to show the <strong>image before the text</strong>. Drag the first column below the second to rearrange them for mobile devices.', i18n ),
+				{ strong: <strong /> }
+			),
+			anchor: '.ugb-sort-control .stk-control-content',
+			position: 'left',
+			glowTarget: '.ugb-sort-control .stk-control-content .ugb-sort-control__container',
+			postStep: () => {
+			// Update the order of the columns for mobile by dispatching an attribute update.
+				const allBlocks = select( 'core/block-editor' ).getBlocks()
+				const columnsBlock = allBlocks.find( block => block.name === 'stackable/columns' )
+				if ( columnsBlock ) {
+				// Reverse the order of columns for mobile by updating the mobileOrder attribute.
+				// The default order is [0, 1]. Swapping makes it [1, 0].
+					dispatch( 'core/block-editor' ).updateBlockAttributes( columnsBlock.clientId, {
+						columnArrangementMobile: '2,1',
+					} )
+				}
+			},
+		},
+		{
+			title: __( 'Switching back to Desktop', i18n ),
+			description: createInterpolateElement(
+				__( 'Notice the arrangement now reflects <strong>your mobile order</strong>. If you want to switch back to desktop, click the responsive toggle and select the desktop icon.', i18n ),
+				{ strong: <strong /> }
+			),
+			anchor: '.ugb-sort-control .stk-control-responsive-toggle button[data-value="desktop"]',
+			position: 'left',
+			glowTarget: '.ugb-sort-control .stk-control-responsive-toggle button[data-value="desktop"]',
+			nextEventTarget: '.ugb-sort-control .stk-control-responsive-toggle button[data-value="desktop"]',
+			nextEvent: 'mousedown',
+			preStep: () => {
+				document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle:not(.is-open) button' )?.click()
+			},
+			postStep: async () => {
+				document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle:not(.is-open) button' )?.click()
+
+				await waitForElement( '.ugb-sort-control .stk-control-responsive-toggle button[data-value="desktop"]' )
+				document.querySelector( '.ugb-sort-control .stk-control-responsive-toggle button:not(.is-active)[data-value="desktop"]' )?.click()
+			},
+		},
+		{
+			title: __( 'Desktop Settings Are Preserved', i18n ),
+			description: createInterpolateElement(
+				__( "You're now back on the <strong>desktop</strong> view and your original column order has been preserved. Notice the responsive toggle is <strong>yellow</strong> — that means a custom layout for mobile has been saved!", i18n ),
+				{ strong: <strong /> }
+			),
+			anchor: '.ugb-sort-control .stk-control-responsive-toggle',
+			position: 'left',
+			glowTarget: '.ugb-sort-control.components-base-control .stk-control-responsive-toggle',
+		},
+		{
+			title: __( 'Tip: Preview Responsively!', i18n ),
+			description: createInterpolateElement(
+				__( 'You can use the <strong>preview button</strong> at the top of the editor to instantly see how your arrangement looks in desktop, tablet, and mobile. Try it out!', i18n ),
+				{ strong: <strong /> }
+			),
+			anchor: '.editor-header__settings .editor-preview-dropdown',
+			position: 'bottom',
+			glowTarget: '.editor-header__settings .editor-preview-dropdown',
+		},
+	],
+}
diff --git a/src/lazy-components/modal-tour/utils.js b/src/lazy-components/modal-tour/utils.js
new file mode 100644
index 0000000000..904139aa00
--- /dev/null
+++ b/src/lazy-components/modal-tour/utils.js
@@ -0,0 +1,16 @@
+export const waitForElement = ( selector, timeout = 2000 ) => {
+	return new Promise( ( resolve, reject ) => {
+		const startTime = Date.now()
+		const check = () => {
+			const element = document.querySelector( selector )
+			if ( element ) {
+				resolve( element )
+			} else if ( Date.now() - startTime > timeout ) {
+				reject( false )
+			} else {
+				requestAnimationFrame( check )
+			}
+		}
+		check()
+	} )
+}
diff --git a/src/plugins/guided-modal-tour/editor-block-tour.js b/src/plugins/guided-modal-tour/editor-block-tour.js
index 99afe45251..ac13bf0a59 100644
--- a/src/plugins/guided-modal-tour/editor-block-tour.js
+++ b/src/plugins/guided-modal-tour/editor-block-tour.js
@@ -1,9 +1,23 @@
 
 import { registerPlugin } from '@wordpress/plugins'
+import { useEffect, useState } from '@wordpress/element'
 import { GuidedModalTour } from '~stackable/components'
 
 const EditorBlockTour = () => {
-	return <GuidedModalTour tourId="blocks" />
+	const [ tourId, setTourId ] = useState( 'blocks' )
+	useEffect( () => {
+		// Check the GET parameter for the tour ID.
+		const params = new URLSearchParams( window?.location?.search || '' )
+		const _tourId = params.get( 'tour' )
+
+		if ( _tourId !== 'blocks' ) {
+			setTourId( _tourId )
+		}
+	}, [] )
+
+	return <>
+		<GuidedModalTour tourId={ tourId } />
+	</>
 }
 
 registerPlugin( 'stackable-editor-block-tour', {
diff --git a/src/welcome/getting-started.js b/src/welcome/getting-started.js
index ff598abd6d..9e847dd583 100644
--- a/src/welcome/getting-started.js
+++ b/src/welcome/getting-started.js
@@ -9,6 +9,8 @@ import SVGArrowUpRightIcon from './images/arrow-up-right.svg'
 import SVGDivider from './images/divider.svg'
 import SVGQuickButtonsArrow from './images/quick-buttons-arrow.svg'
 import SVGCheck from './images/check.svg'
+import SVGStateHoverIcon from '../components/base-control2/images/state-hover.svg'
+import SVGStateParentHoverIcon from '../components/base-control2/images/state-parent-hover.svg'
 
 /**
  * WordPress dependencies
@@ -21,12 +23,23 @@ import {
 	scheduled as scheduledIcon,
 	brush as brushIcon,
 	blockDefault as blockDefaultIcon,
+	desktop as desktopIcon,
+	cog as cogIcon,
+	column as columnIcon,
+	copy as copyIcon,
+	filter as filterIcon,
+	reusableBlock as reusableBlockIcon,
+	symbol as symbolIcon,
+	archive as archiveIcon,
+	globe as globeIcon,
 } from '@wordpress/icons'
 
 /**
  * External dependencies
  */
-import { i18n, guidedTourStates } from 'stackable'
+import {
+	i18n, guidedTourStates, isPro,
+} from 'stackable'
 import classNames from 'classnames'
 
 const generalProps = [
@@ -112,141 +125,195 @@ const EssentialsCard = ( {
 	</div>
 }
 
+const QUICK_BUTTONS = [ {
+	id: 'design-library',
+	icon: addTemplateIcon,
+	title: __( 'Build Pages in Seconds', i18n ),
+	description: __( 'Jump straight into our Design Library and insert polished, pre-built sections; no more blank-page overwhelm.', i18n ),
+	link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=design-library`,
+	cta: __( 'Build Now', i18n ),
+},
+{
+	id: 'blocks',
+	icon: blockDefaultIcon,
+	title: __( 'Stackable Block Settings', i18n ),
+	description: __( 'Learn how to use Stackable blocks and get more out of them.', i18n ),
+	link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=blocks`,
+	cta: __( 'Use Blocks', i18n ),
+},
+{
+	id: 'design-system',
+	icon: stylesIcon,
+	title: __( 'Apply Global Styles Instantly', i18n ),
+	description: __( 'Set your brand\'s colors, fonts, and spacing once in the Design System; every Stackable block updates automatically.', i18n ),
+	link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=design-system`,
+	cta: __( 'Try Now', i18n ),
+},
+{
+	id: 'site-kit',
+	icon: scheduledIcon,
+	title: __( 'Start with a Complete Site Kit', i18n ),
+	description: __( 'Pick a ready-made website template to kickstart your project — fully built layouts and styles, just swap in your content.', i18n ),
+	link: '/wp-admin/post-new.php?post_type=page',
+	cta: __( 'Select Kit', i18n ),
+	display: false,
+},
+{
+	id: 'design-system-picker',
+	icon: brushIcon,
+	title: __( 'Pre-set Design Systems', i18n ),
+	description: __( 'Browse curated Design System presets — apply a professional look instantly without building from scratch.', i18n ),
+	link: '/wp-admin/post-new.php?post_type=page',
+	cta: __( 'Pick A System', i18n ),
+	display: false,
+},
+{
+	id: 'block-backgrounds',
+	icon: columnIcon,
+	title: __( 'Block Backgrounds & Containers', i18n ),
+	description: __( 'Use backgrounds to create stunning full-width sections, and containers to add boxed content for organizing your page.', i18n ),
+	link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=block-backgrounds`,
+	cta: __( 'Try Now', i18n ),
+},
+{
+	id: 'responsive-controls',
+	icon: desktopIcon,
+	title: __( 'Responsive Controls', i18n ),
+	description: __( 'Adjust styles for desktop, tablet, and mobile — easily control layout, spacing, and appearance for a seamless experience on any device.', i18n ),
+	link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=responsive-controls`,
+	cta: __( 'Try Now', i18n ),
+},
+{
+	id: 'hover-states',
+	icon: <span className="s-custom-icon-wrapper"><SVGStateHoverIcon /></span>,
+	title: __( 'Styling Hover States', i18n ),
+	description: __( 'Adjust styles for different hover states — create engaging effects when users interact with your designs.', i18n ),
+	link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=hover-states`,
+	cta: __( 'Try Now', i18n ),
+},
+{
+	id: 'advanced-hover-states',
+	icon: <span className="s-custom-icon-wrapper"><SVGStateParentHoverIcon /></span>,
+	title: __( 'Styling Hover States - Advanced', i18n ),
+	description: __( 'Style containers and their contents together—apply hover effects to multiple blocks at once for seamless interactive designs.', i18n ),
+	link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=advanced-hover-states`,
+	cta: __( 'Try Now', i18n ),
+},
+{
+	id: 'global-color-schemes',
+	icon: globeIcon,
+	title: __( 'Global Color Schemes', i18n ),
+	description: __( 'Create and apply color schemes to your entire website—maintain consistent branding across all pages with ease.', i18n ),
+	link: `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=global-color-schemes`,
+	cta: __( 'Try Now', i18n ),
+},
+{
+	id: 'block-styles',
+	icon: reusableBlockIcon,
+	title: __( 'Re-using Block Styles', i18n ),
+	description: __( 'Re-use block styles sitewide for consistent branding. Save and quickly apply your favorite style combinations to any block.', i18n ),
+	link: isPro ? `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=block-styles` : '',
+	cta: __( 'Try Now', i18n ),
+	premium: true,
+},
+{
+	id: 'dynamic-content',
+	icon: archiveIcon,
+	title: __( 'Dynamic Content', i18n ),
+	description: __( 'Dynamically display content based on user interactions, site conditions, or time-based triggers.', i18n ),
+	link: isPro ? `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=dynamic-content` : '',
+	cta: __( 'Try Now', i18n ),
+	premium: true,
+},
+{
+	id: 'conditional-display',
+	icon: cogIcon,
+	title: __( 'Conditional Display', i18n ),
+	description: __( 'Show or hide blocks based on specific conditions, such as user roles, device type, or custom criteria.', i18n ),
+	link: isPro ? `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=conditional-display` : '',
+	cta: __( 'Try Now', i18n ),
+	premium: true,
+},
+{
+	id: 'motion-effects',
+	icon: symbolIcon,
+	title: __( 'Motion Effects', i18n ),
+	description: __( 'Add animations and transitions to your blocks for a more engaging and interactive user experience.', i18n ),
+	link: isPro ? `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=motion-effects` : '',
+	cta: __( 'Try Now', i18n ),
+	premium: true,
+},
+{
+	id: 'custom-css',
+	icon: filterIcon,
+	title: __( 'Applying CSS per Block', i18n ),
+	description: __( 'Add custom CSS to your blocks for precise control over their appearance and behavior.', i18n ),
+	link: isPro ? `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=custom-css` : '',
+	cta: __( 'Try Now', i18n ),
+	premium: true,
+},
+{
+	id: 'copy-paste-styles',
+	icon: copyIcon,
+	title: __( 'Copy & Paste Styles', i18n ),
+	description: __( 'Quickly apply styles from one block to another for consistent design and branding.', i18n ),
+	link: isPro ? `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=copy-paste-styles` : '',
+	cta: __( 'Try Now', i18n ),
+	premium: true,
+} ]
+
 export const GettingStarted = () => {
 	return <>
-
 		<div className="s-body">
 			<div className="s-getting-started__centered">
 				<div className="tag">{ __( 'Welcome to Stackable', i18n ) }</div>
-				{ /* <h2 className="title">{ __( 'Let\'s build something amazing!', i18n ) }</h2> */ }
 				<h2 className="title">{ __( 'Welcome to Your New Block Editor Workflow!', i18n ) }</h2>
 			</div>
 			<div className="s-getting-started__quick-start-wrapper">
-
-				<div className="s-quick-buttons-wrapper">
-					<div className="s-quick-buttons-arrow">
-						<SVGQuickButtonsArrow />
-						<span>{ __( 'Quick Start', i18n ) }</span>
-					</div>
-					<div className="s-card">
-						<div className="s-quick-button-icon">
-							<Icon icon={ addTemplateIcon } />
-						</div>
-						<div className="s-quick-button-description">
-							<h3>{ __( 'Build Pages in Seconds', i18n ) }</h3>
-							<p>{ __( 'Jump straight into our Design Library and insert polished, pre-built sections; no more blank-page overwhelm.', i18n ) }</p>
-						</div>
-						<div className="s-quick-button-button">
-							<a
-								href={ `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=design-library` }
-								className={ classNames( 's-button s-secondary-button uppercase', {
-									's-button--checked': guidedTourStates?.includes( 'design-library' ),
-								} ) }
-							>
-								<span className="s-quick-button-toggle-indicator">
-									<SVGCheck />
-								</span>
-								{ __( 'Build Now', i18n ) }
-							</a>
-						</div>
-					</div>
-
-					<div className="s-card">
-						<div className="s-quick-button-icon">
-							<Icon icon={ blockDefaultIcon } />
-						</div>
-						<div className="s-quick-button-description">
-							<h3>{ __( 'Stackable Block Settings', i18n ) }</h3>
-							<p>{ __( 'Learn how to use Stackable blocks and get more out of them.', i18n ) }</p>
-						</div>
-						<div className="s-quick-button-button">
-							<a
-								href={ `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=blocks` }
-								className={ classNames( 's-button s-secondary-button uppercase', {
-									's-button--checked': guidedTourStates?.includes( 'blocks' ),
-								} ) }
-							>
-								<span className="s-quick-button-toggle-indicator">
-									<SVGCheck />
-								</span>
-								{ __( 'Use Blocks', i18n ) }
-							</a>
-						</div>
+				<div className="s-getting-started-video s-card">
+					<div className="s-video-wrapper s-card-top">
+						<iframe className="s-video" src="https://www.youtube.com/embed/WP2LHxGulps" title={ __( 'Getting Started', i18n ) } allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;" allowFullScreen></iframe>
 					</div>
+					<h3>{ __( 'Getting Started with Stackable', i18n ) }</h3>
+					<p>{ __( 'Watch this video to get started with Stackable in within 5 minutes.', i18n ) }</p>
+				</div>
+				{ QUICK_BUTTONS.map( ( item, i ) => {
+					if ( item.display === false ) {
+						return null
+					}
 
-					<div className="s-card">
+					return <div className="s-card" key={ item.id }>
+						{ i === 0 && <div className="s-quick-buttons-arrow">
+							<SVGQuickButtonsArrow />
+							<span>{ __( 'Quick Start', i18n ) }</span>
+						</div> }
 						<div className="s-quick-button-icon">
-							<Icon icon={ stylesIcon } />
+							<Icon icon={ item.icon } />
 						</div>
 						<div className="s-quick-button-description">
-							<h3>{ __( 'Apply Global Styles Instantly', i18n ) }</h3>
-							<p>{ __( 'Set your brand\'s colors, fonts, and spacing once in the Design System; every Stackable block updates automatically.', i18n ) }</p>
+							<h3>
+								{ ! isPro && item.premium && <span className="stk-pulsating-circle" role="presentation" /> }
+								<span>{ item.title }</span>
+							</h3>
+							<p>{ item.description }</p>
 						</div>
 						<div className="s-quick-button-button">
 							<a
-								href={ `/wp-admin/post-new.php?post_type=page&content=${ __( 'Welcome to Stackable', i18n ) }&tour=design-system` }
+								href={ item.premium && ! isPro ? undefined : item.link }
+								aria-disabled={ item.premium && ! isPro }
 								className={ classNames( 's-button s-secondary-button uppercase', {
-									's-button--checked': guidedTourStates?.includes( 'design-system' ),
+									's-button--checked': guidedTourStates?.includes( item.id ),
+									's-button--disabled': item.premium && ! isPro,
 								} ) }
 							>
 								<span className="s-quick-button-toggle-indicator">
 									<SVGCheck />
 								</span>
-								{ __( 'Try Now', i18n ) }
-							</a>
-						</div>
-					</div>
-
-					{ /* TODO: Hide this for now */ }
-					<div className="s-card" style={ { display: 'none' } }>
-						<div className="s-quick-button-icon">
-							<Icon icon={ scheduledIcon } />
-						</div>
-						<div className="s-quick-button-description">
-							<h3>{ __( 'Start with a Complete Site Kit', i18n ) }</h3>
-							<p>{ __( 'Pick a ready-made website template to kickstart your project — fully built layouts and styles, just swap in your content.', i18n ) }</p>
-						</div>
-						<div className="s-quick-button-button">
-							<a
-								href="/wp-admin/post-new.php?post_type=page"
-								className={ classNames( 's-button s-secondary-button uppercase', {
-									's-button--checked': guidedTourStates?.includes( 'site-kit' ),
-								} ) }
-							>
-								{ __( 'Select Kit', i18n ) }
-							</a>
-						</div>
-					</div>
-
-					{ /* TODO: Hide this for now */ }
-					<div className="s-card" style={ { display: 'none' } }>
-						<div className="s-quick-button-icon">
-							<Icon icon={ brushIcon } />
-						</div>
-						<div className="s-quick-button-description">
-							<h3>{ __( 'Pre-set Design Systems', i18n ) }</h3>
-							<p>{ __( 'Browse curated Design System presets — apply a professional look instantly without building from scratch.', i18n ) }</p>
-						</div>
-						<div className="s-quick-button-button">
-							<a
-								href="/wp-admin/post-new.php?post_type=page"
-								className={ classNames( 's-button s-secondary-button uppercase', {
-									's-button--checked': guidedTourStates?.includes( 'design-system-picker' ),
-								} ) }
-							>
-								{ __( 'Pick A System', i18n ) }
+								{ item.cta }
 							</a>
 						</div>
 					</div>
-				</div>
-
-				<div className="s-getting-started-video s-card">
-					<div className="s-video-wrapper s-card-top">
-						<iframe className="s-video" src="https://www.youtube.com/embed/WP2LHxGulps" title={ __( 'Getting Started', i18n ) } allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;" allowFullScreen></iframe>
-					</div>
-					<h3>{ __( 'Getting Started with Stackable', i18n ) }</h3>
-					<p>{ __( 'Watch this video to get started with Stackable in within 5 minutes.', i18n ) }</p>
-				</div>
+				} ) }
 			</div>
 
 			<SVGDivider className="s-divider" />
diff --git a/src/welcome/getting-started.scss b/src/welcome/getting-started.scss
index f955d5e539..9e548829f4 100644
--- a/src/welcome/getting-started.scss
+++ b/src/welcome/getting-started.scss
@@ -181,7 +181,7 @@ body.settings_page_stackable-getting-started .s-body-container > .s-getting-star
 .s-getting-started__quick-start-wrapper {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
-	gap: 40px;
+	gap: 24px;
 	margin: 1em 0 64px;
 	align-items: flex-start;
 
@@ -190,24 +190,25 @@ body.settings_page_stackable-getting-started .s-body-container > .s-getting-star
 		border-radius: 16px;
 		@include s-shadow;
 		overflow: hidden;
+		grid-row: 1/4;
+		grid-column: 2/3;
 	}
 
-	.s-quick-buttons-wrapper {
+	.s-card:not(.s-getting-started-video) {
 		position: relative;
 		display: flex;
-		flex-direction: column;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
 		gap: 24px;
-		.s-card {
-			display: flex;
-			flex-direction: row;
-			justify-content: center;
-			align-items: center;
-			gap: 24px;
 
-			@media screen and (max-width: 1200px) {
-				flex-direction: column;
-				align-items: flex-start;
-			}
+		@media screen and (max-width: 1200px) {
+			flex-direction: column;
+			align-items: flex-start;
+		}
+
+		&:nth-child(2) {
+			overflow: visible;
 		}
 	}
 	.s-quick-button-icon {
@@ -218,28 +219,43 @@ body.settings_page_stackable-getting-started .s-body-container > .s-getting-star
 		border-radius: 8px;
 	}
 	// Succeeding icon colors are different.
-	.s-card:nth-child(3) {
+	.s-card:nth-child(5n + 3) {
 		.s-quick-button-icon {
 			background: #f00069;
 		}
 	}
-	.s-card:nth-child(4) {
+	.s-card:nth-child(5n + 4) {
 		.s-quick-button-icon {
 			background: #d000ff;
 		}
 	}
-	.s-card:nth-child(5) {
+	.s-card:nth-child(5n) {
 		.s-quick-button-icon {
 			background: #f89347;
 		}
 	}
+
+	.s-card:nth-child(5n + 6) {
+		.s-quick-button-icon {
+			background: #00c49a;
+		}
+	}
 	.s-quick-button-button {
 		white-space: nowrap;
+
+		.s-button--disabled,
+		.s-button--disabled:hover {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
 	}
 
 	.s-quick-button-description {
 		> *:first-child {
 			margin-top: 0;
+			display: inline-flex;
+			align-items: center;
+			gap: 8px;
 		}
 		> *:last-child {
 			margin-bottom: 0;
@@ -255,6 +271,7 @@ body.settings_page_stackable-getting-started .s-body-container > .s-getting-star
 		right: 69px;
 		svg {
 			width: 64px;
+			height: auto;
 			transform: scaleX(-1);
 		}
 		span {
@@ -297,3 +314,16 @@ body.settings_page_stackable-getting-started .s-body-container > .s-getting-star
 		}
 	}
 }
+
+.s-custom-icon-wrapper {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+
+	svg {
+		height: 16px !important;
+		width: 16px;
+	}
+}