diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php
index 89867a34bb..b4676bb7da 100644
--- a/src/wp-admin/about.php
+++ b/src/wp-admin/about.php
@@ -9,6 +9,9 @@
 /** WordPress Administration Bootstrap */
 require_once __DIR__ . '/admin.php';
 
+wp_enqueue_script( 'wp-components' );
+wp_enqueue_style( 'wp-components' );
+
 /* translators: Page title of the About WordPress page in the admin. */
 $title = _x( 'About', 'page title' );
 
@@ -90,7 +93,8 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 			</div>
 			<div class="column about__image">
 				<video controls>
-					<source src="https://make.wordpress.org/core/files/2021/02/about-57-drag-drop-image.mp4" type="video/mp4" />
+					<source src="https://s.w.org/images/core/5.7/about-57-drag-drop-image.mp4" type="video/mp4" />
+					<source src="https://s.w.org/images/core/5.7/about-57-drag-drop-image.mp4" type="video/webm" />
 				</video>
 			</div>
 		</div>
@@ -112,12 +116,12 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 				</p>
 				<p>
 					<?php
-					_e( '<strong>Social Icons block:</strong> you can now change the size of the icons in the Social Icons block.' );
+					_e( '<strong>Social Icons block:</strong> now you can change the size of the icons.' );
 					?>
 				</p>
 			</div>
 			<div class="column about__image">
-				<img src="https://make.wordpress.org/core/files/2021/02/about-57-cover-1.jpg" alt="" />
+				<img src="https://s.w.org/images/core/5.7/about-57-cover.jpg" alt="" />
 			</div>
 		</div>
 
@@ -130,14 +134,15 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 		</div>
 
 		<div class="about__section has-subtle-background-color">
-			<div class="column about__image">
-				<div class="about__image-comparison">
+			<figure class="column about__image" id="about-image-comparison">
+				<div class="about__image-comparison no-js">
+					<img src="https://s.w.org/images/core/5.7/about-57-color-old.png" alt="<?php esc_attr_e( 'Dashboard with old color scheme.' ); ?>" />
 					<div class="about__image-comparison-resize">
-						<img src="https://make.wordpress.org/core/files/2021/02/about-57-color-new.png" />
+						<img src="https://s.w.org/images/core/5.7/about-57-color-new.png" alt="<?php esc_attr_e( 'Dashboard with new color scheme.' ); ?>" />
 					</div>
-					<img src="https://make.wordpress.org/core/files/2021/02/about-57-color-old.png" />
 				</div>
-			</div>
+				<figcaption><?php _e( 'Above, the Dashboard before and after the color update in 5.7.' ); ?></figcaption>
+			</figure>
 		</div>
 
 		<div class="about__section has-2-columns has-subtle-background-color">
@@ -193,14 +198,14 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 				<h3><?php _e( 'New Robots API' ); ?></h3>
 				<p>
 					<?php
-					_e( 'The new Robots API lets you include the filter directives in the robots meta tag, and the API includes the directive <code>max-image-preview: large</code> by default. That means search engines can show bigger image previews (unless the blog is marked as not public), which can boost your traffic.' )
+					_e( 'The new Robots API lets you include the filter directives in the robots meta tag, and the API includes the <code>max-image-preview: large</code> directive by default. That means search engines can show bigger image previews, which can boost your traffic (unless the site is marked <em>not-public</em>).' );
 					?>
 				</p>
 			</div>
 			<div class="column">
 				<h3><?php _e( 'Ongoing cleanup after update to jQuery 3.5.1' ); ?></h3>
 				<p><?php _e( 'For years jQuery helped make things move on the screen in ways the basic tools couldn’t—but that keeps changing, and so does jQuery.' ); ?></p>
-				<p><?php _e( 'One side effect: it generated a set of cryptic messages on the dashboard that informed only developers. In 5.7, you will get far fewer of those messages, and they will be in plain language.' ); ?></p>
+				<p><?php _e( 'In 5.7, jQuery gets more focused and less intrusive, with fewer messages in the console.' ); ?></p>
 				<h3><?php _e( 'Lazy-load your iframes' ); ?></h3>
 				<p><?php _e( 'Now it’s simple to let iframes lazy-load. Just add the <code>loading="lazy"</code> attribute to iframe tags on the front end.' ); ?></p>
 			</div>
@@ -234,9 +239,87 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 			<a href="<?php echo esc_url( self_admin_url() ); ?>"><?php is_blog_admin() ? _e( 'Go to Dashboard &rarr; Home' ) : _e( 'Go to Dashboard' ); ?></a>
 		</div>
 	</div>
-<?php
 
-require_once ABSPATH . 'wp-admin/admin-footer.php';
+<?php require_once ABSPATH . 'wp-admin/admin-footer.php'; ?>
+
+<script>
+	wp.domReady( function() {
+		var createElement = wp.element.createElement;
+		var Fragment = wp.element.Fragment;
+		var render = wp.element.render;
+		var useState = wp.element.useState;
+		var ResizableBox = wp.components.ResizableBox;
+
+		var container = document.getElementById( 'about-image-comparison' );
+		var images = container ? container.querySelectorAll( 'img' ) : [];
+		if ( ! images.length ) {
+			// Something's wrong, return early.
+			return;
+		}
+
+		var beforeImage = images.item( 0 );
+		var afterImage = images.item( 1 );
+		var caption = container.querySelector( 'figcaption' ).innerText;
+
+		function ImageComparison( props ) {
+			var stateHelper = useState( props.width );
+			var width = stateHelper[0];
+			var setWidth = stateHelper[1];
+
+			return createElement(
+				'div',
+				{
+					className: 'about__image-comparison'
+				},
+				createElement( 'img', { src: beforeImage.src, alt: beforeImage.alt } ),
+				createElement(
+					ResizableBox,
+					{
+						size: {
+							width: width,
+							height: props.height
+						},
+						onResizeStop: function( event, direction, elt, delta ) {
+							setWidth( parseInt( width + delta.width, 10 ) );
+						},
+						showHandle: true,
+						enable: {
+							top: false,
+							right: ! wp.i18n.isRTL(),
+							bottom: false,
+							left: wp.i18n.isRTL(),
+						},
+						className: 'about__image-comparison-resize'
+					},
+					createElement(
+						'div',
+						{
+							style: { width: '100%', height: '100%', overflow: 'hidden' }
+						},
+						createElement('img', { src: afterImage.src, alt: afterImage.alt } )
+					)
+				)
+			);
+		}
+
+		render(
+			createElement(
+				Fragment,
+				{},
+				createElement(
+					ImageComparison,
+					{
+						width: beforeImage.clientWidth / 2,
+						height: beforeImage.clientHeight
+					}
+				),
+				createElement( 'figcaption', {}, caption )
+			),
+			container
+		);
+	} );
+</script>
+<?php
 
 // These are strings we may use to describe maintenance/security releases, where we aim for no new strings.
 return;
diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css
index 018042a9f3..d77b6d7385 100644
--- a/src/wp-admin/css/about.css
+++ b/src/wp-admin/css/about.css
@@ -112,6 +112,11 @@
 	color: var(--text-light);
 }
 
+.about__container .has-accent-background-color a {
+	color: #fff;
+	color: var(--text-light);
+}
+
 .about__container .has-transparent-background-color {
 	background-color: transparent;
 }
@@ -551,6 +556,11 @@
 	height: auto;
 }
 
+.about__container .about__image figcaption {
+	margin-top: 0.5em;
+	text-align: center;
+}
+
 .about__container .about__image .wp-video {
 	margin-left: auto;
 	margin-right: auto;
@@ -559,7 +569,6 @@
 .about__container .about__image-comparison {
 	position: relative;
 	display: inline-block;
-	line-height: 0;
 	max-width: 100%;
 }
 
@@ -575,29 +584,26 @@
 }
 
 .about__container .about__image-comparison-resize {
-	position: absolute;
+	position: absolute !important; /* Needed to override inline style on ResizableBox */
 	top: 0;
 	bottom: 0;
 	left: 0;
 	width: 50%;
 	max-width: 100%;
-	overflow: hidden;
-	resize: horizontal;
-	border-right: 2px solid white;
 }
 
-.about__container .about__image-comparison-resize:after {
-	content: "";
-	display: block;
-	position: absolute;
-	right: 0;
-	bottom: 0;
-	width: 20px;
-	height: 20px;
-	font-family: dashicons;
-	font-size: 20px;
-	line-height: 1;
+.about__container .about__image-comparison.no-js .about__image-comparison-resize {
 	overflow: hidden;
+	border-right: 2px solid #007cba;
+	border-right: 2px solid var(--wp-admin-theme-color);
+}
+
+.about__container .about__image-comparison-resize .components-resizable-box__side-handle::before {
+	width: 4px;
+	right: calc(50% - 2px);
+	transition: none;
+	animation: none;
+	opacity: 1;
 }
 
 .about__container .about__image + h3 {