diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/index.js b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
index acdc4fdc3dc557..30d00f05d951c0 100644
--- a/packages/edit-site/src/components/global-styles/screen-revisions/index.js
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/index.js
@@ -1,13 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	Button,
 	__experimentalUseNavigator as useNavigator,
 	__experimentalConfirmDialog as ConfirmDialog,
 	Spinner,
 	__experimentalSpacer as Spacer,
+	MenuItem,
+	VisuallyHidden,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useContext, useState, useEffect } from '@wordpress/element';
@@ -15,6 +18,7 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { external } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -55,6 +59,8 @@ function ScreenRevisions() {
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
+	const [ globalStylesDiffs, setGlobalStylesDiffs ] = useState( [] );
+	const [ diffModal, setDiffModal ] = useState( false );
 
 	useEffect( () => {
 		if ( editorCanvasContainerView !== 'global-styles-revisions' ) {
@@ -78,6 +84,7 @@ function ScreenRevisions() {
 	};
 
 	const selectRevision = ( revision ) => {
+		setGlobalStylesDiffs( deepCompare( revision, userConfig ) );
 		setGlobalStylesRevision( {
 			styles: revision?.styles,
 			settings: revision?.settings,
@@ -87,6 +94,51 @@ function ScreenRevisions() {
 		setSelectedRevisionId( revision?.id );
 	};
 
+	function deepCompare(
+		revisionValue,
+		configValue,
+		depth = 0,
+		parentPath = ''
+	) {
+		if (
+			typeof revisionValue !== 'object' ||
+			revisionValue === null ||
+			typeof configValue !== 'object' ||
+			configValue === null
+		) {
+			return [
+				{
+					path: parentPath,
+					revisionValue,
+					configValue,
+				},
+			];
+		}
+
+		const keys1 = Object.keys( revisionValue );
+		const keys2 = Object.keys( configValue );
+		const allKeys = new Set( [ ...keys1, ...keys2 ] );
+
+		let diffs = [];
+		for ( const key of allKeys ) {
+			const path = parentPath ? parentPath + '.' + key : key;
+			const subDiffs = deepCompare(
+				revisionValue[ key ],
+				configValue[ key ],
+				depth + 1,
+				path
+			);
+			diffs = diffs.concat( subDiffs );
+		}
+		diffs = diffs.filter(
+			( diff ) =>
+				diff.path.includes( 'behaviors' ) ||
+				diff.path.includes( 'settings' ) ||
+				diff.path.includes( 'styles' )
+		);
+		return diffs;
+	}
+
 	const isLoadButtonEnabled =
 		!! globalStylesRevision?.id &&
 		! areGlobalStyleConfigsEqual( globalStylesRevision, userConfig );
@@ -118,27 +170,48 @@ function ScreenRevisions() {
 						/>
 						{ isLoadButtonEnabled && (
 							<SidebarFixedBottom>
-								<Button
-									variant="primary"
-									className="edit-site-global-styles-screen-revisions__button"
-									disabled={
-										! globalStylesRevision?.id ||
-										globalStylesRevision?.id === 'unsaved'
-									}
-									onClick={ () => {
-										if ( hasUnsavedChanges ) {
-											setIsLoadingRevisionWithUnsavedChanges(
-												true
-											);
-										} else {
-											restoreRevision(
-												globalStylesRevision
-											);
+								<VStack>
+									<MenuItem
+										onClick={ () => setDiffModal( true ) }
+										target="_blank"
+										icon={ external }
+										disabled={
+											! globalStylesRevision?.id ||
+											globalStylesRevision?.id ===
+												'unsaved'
 										}
-									} }
-								>
-									{ __( 'Apply' ) }
-								</Button>
+									>
+										{ __( 'View revision changes' ) }
+										<VisuallyHidden as="span">
+											{
+												/* translators: accessibility text */
+												__( '(opens in a new tab)' )
+											}
+										</VisuallyHidden>
+									</MenuItem>
+									<Button
+										variant="primary"
+										className="edit-site-global-styles-screen-revisions__button"
+										disabled={
+											! globalStylesRevision?.id ||
+											globalStylesRevision?.id ===
+												'unsaved'
+										}
+										onClick={ () => {
+											if ( hasUnsavedChanges ) {
+												setIsLoadingRevisionWithUnsavedChanges(
+													true
+												);
+											} else {
+												restoreRevision(
+													globalStylesRevision
+												);
+											}
+										} }
+									>
+										{ __( 'Apply' ) }
+									</Button>
+								</VStack>
 							</SidebarFixedBottom>
 						) }
 					</div>
@@ -158,6 +231,23 @@ function ScreenRevisions() {
 							) }
 						</ConfirmDialog>
 					) }
+					{ diffModal && (
+						<ConfirmDialog
+							title={ __( 'Changes:' ) }
+							isOpen={ diffModal }
+							confirmButtonText={ __( 'Close modal' ) }
+							onConfirm={ () => setDiffModal( false ) }
+						>
+							<>
+								<h2>
+									{ sprintf(
+										'We will show the %s changes as soon as possible.',
+										globalStylesDiffs.length
+									) }
+								</h2>
+							</>
+						</ConfirmDialog>
+					) }
 				</>
 			) : (
 				<Spacer marginX={ 4 } data-testid="global-styles-no-revisions">