diff --git a/packages/components/src/navigation/back-button/index.js b/packages/components/src/navigation/back-button/index.js
index 3752dcfa635f7e..c4e10ab6f157be 100644
--- a/packages/components/src/navigation/back-button/index.js
+++ b/packages/components/src/navigation/back-button/index.js
@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, chevronLeft } from '@wordpress/icons';
 
@@ -15,13 +16,10 @@ import { Icon, chevronLeft } from '@wordpress/icons';
 import { useNavigationContext } from '../context';
 import { MenuBackButtonUI } from '../styles/navigation-styles';
 
-export default function NavigationBackButton( {
-	backButtonLabel,
-	className,
-	href,
-	onClick,
-	parentMenu,
-} ) {
+function NavigationBackButton(
+	{ backButtonLabel, className, href, onClick, parentMenu },
+	ref
+) {
 	const { setActiveMenu, navigationTree } = useNavigationContext();
 
 	const classes = classnames(
@@ -34,14 +32,17 @@ export default function NavigationBackButton( {
 	return (
 		<MenuBackButtonUI
 			className={ classes }
-			isTertiary
 			href={ href }
+			isTertiary
 			onClick={ () =>
 				parentMenu ? setActiveMenu( parentMenu, 'right' ) : onClick
 			}
+			ref={ ref }
 		>
 			<Icon icon={ chevronLeft } />
 			{ backButtonLabel || parentMenuTitle || __( 'Back' ) }
 		</MenuBackButtonUI>
 	);
 }
+
+export default forwardRef( NavigationBackButton );
diff --git a/packages/edit-site/src/components/header/navigation-toggle/index.js b/packages/edit-site/src/components/header/navigation-toggle/index.js
index 8a382823fe5508..59107570866113 100644
--- a/packages/edit-site/src/components/header/navigation-toggle/index.js
+++ b/packages/edit-site/src/components/header/navigation-toggle/index.js
@@ -35,7 +35,7 @@ function NavigationToggle( { icon, isOpen, onClick } ) {
 		return null;
 	}
 
-	let buttonIcon = <Icon size="32px" icon={ wordpress } />;
+	let buttonIcon = <Icon size="36px" icon={ wordpress } />;
 
 	if ( siteIconUrl ) {
 		buttonIcon = (
@@ -48,7 +48,7 @@ function NavigationToggle( { icon, isOpen, onClick } ) {
 	} else if ( isRequestingSiteIcon ) {
 		buttonIcon = null;
 	} else if ( icon ) {
-		buttonIcon = <Icon size="32px" icon={ icon } />;
+		buttonIcon = <Icon size="36px" icon={ icon } />;
 	}
 
 	return (
diff --git a/packages/edit-site/src/components/header/navigation-toggle/style.scss b/packages/edit-site/src/components/header/navigation-toggle/style.scss
index d09ba381b481ed..1cabaef56c0c59 100644
--- a/packages/edit-site/src/components/header/navigation-toggle/style.scss
+++ b/packages/edit-site/src/components/header/navigation-toggle/style.scss
@@ -2,43 +2,64 @@
 	display: none;
 
 	@include break-medium() {
-		display: flex;
 		align-items: center;
-		background-color: #1e1e1e;
-		height: 61px;
+		background: $gray-900;
 		border-radius: 0;
+		display: flex;
+		height: $header-height + $border-width; // Cover header border
+		width: $header-height;
 	}
 }
 
 .edit-site-navigation-toggle.is-open {
+	flex-shrink: 0;
+	height: $header-height + $border-width; // Cover header border
 	width: 300px;
+
+	// Delay to sync with `NavigationPanel` animation
+	transition: width 80ms linear;
+	transition-delay: 20ms;
+	@include reduce-motion("transition");
+
+	.edit-site-navigation-toggle__button {
+		background: $gray-900;
+	}
 }
 
 .edit-site-navigation-toggle__button {
-	color: #fff;
-	margin-left: 14px;
-	margin-right: 14px;
+	align-items: center;
+	background: #23282e; // WP-admin gray.
+	color: $white;
+	height: $header-height + $border-width; // Cover header border
+	width: $header-height;
+
+	&.has-icon {
+		min-width: $header-height;
 
-	&:hover {
-		color: #ddd;
+		&:hover {
+			background: #32373d; // WP-admin light-gray.
+			color: $white;
+		}
+		&:active {
+			color: $white;
+		}
+		&:focus {
+			box-shadow: inset 0 0 0 $border-width-focus var(--wp-admin-theme-color), inset 0 0 0 3px $white;
+		}
 	}
 }
 
-.edit-site-navigation-toggle.components-button.has-icon {
-	justify-content: flex-start;
-	padding: 0;
-	height: 32px;
-	width: 32px;
-	min-width: 32px;
+.edit-site-navigation-toggle__site-icon {
+	width: 36px;
 }
 
 .edit-site-navigation-toggle__site-title {
 	font-style: normal;
 	font-weight: 600;
-	font-size: 13px;
-	line-height: 16px;
-	color: #ddd;
-	margin-right: 14px;
+	font-size: $default-font-size;
+	line-height: $default-line-height;
+	color: $gray-300;
+	margin: 0 $grid-unit-20 0 $grid-unit-10;
 
 	display: -webkit-box;
 	-webkit-line-clamp: 2;
diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js
index 9f3e2c5c120ac2..2e48ec5e041121 100644
--- a/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js
+++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/index.js
@@ -1,29 +1,36 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import {
 	__experimentalNavigation as Navigation,
+	__experimentalNavigationBackButton as NavigationBackButton,
 	__experimentalNavigationGroup as NavigationGroup,
 	__experimentalNavigationItem as NavigationItem,
 	__experimentalNavigationMenu as NavigationMenu,
 } from '@wordpress/components';
 import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
 import { BlockPreview } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 const NavigationPanel = () => {
 	const [ showPreview, setShowPreview ] = useState( false );
+	const ref = useRef();
+
+	useEffect( () => {
+		ref.current.focus();
+	}, [ ref ] );
 
 	return (
 		<div className="edit-site-navigation-panel">
 			<Navigation>
+				<NavigationBackButton
+					backButtonLabel={ __( 'Dashboard' ) }
+					className="edit-site-navigation-panel__back-to-dashboard"
+					href="index.php"
+					ref={ ref }
+				/>
 				<NavigationMenu title="Home">
-					<NavigationItem
-						item="item-back"
-						title="Back to dashboard"
-						href="index.php"
-					/>
-
 					<NavigationGroup title="Example group">
 						<NavigationItem
 							item="item-preview"
diff --git a/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss b/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss
index 59a115aee48f16..5265d5d982514a 100644
--- a/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss
+++ b/packages/edit-site/src/components/left-sidebar/navigation-panel/style.scss
@@ -1,13 +1,38 @@
 .edit-site-navigation-panel {
-	position: relative;
+	animation: edit-site-navigation-panel__slide-in 0.1s linear;
 	height: 100%;
+	position: relative;
 	width: 300px;
+	@include reduce-motion("animation");
+
+	@keyframes edit-site-navigation-panel__slide-in {
+		from {
+			transform: translateX(-100%);
+		}
+		to {
+			transform: translateX(0%);
+		}
+	}
 
 	.components-navigation {
 		height: 100%;
 	}
 }
 
+.edit-site-navigation-panel__back-to-dashboard.components-button.is-tertiary {
+	border-radius: 0;
+	border-bottom: $border-width solid $gray-700;
+	height: auto;
+	margin-left: -6px; // +2px to display the focus box-shadow
+	margin-top: 2px; // +2px to display the focus box-shadow
+	padding: $grid-unit $grid-unit-20;
+	width: calc(100% + #{$grid-unit-15});
+
+	&:focus:not(:disabled) {
+		border-bottom-color: transparent;
+	}
+}
+
 .edit-site-navigation-panel__preview {
 	display: none;
 	border: $border-width solid $gray-400;