diff --git a/edit-post/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss
index f4b4455078897f..40d41e208d018b 100644
--- a/edit-post/assets/stylesheets/_variables.scss
+++ b/edit-post/assets/stylesheets/_variables.scss
@@ -29,7 +29,7 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 // Visuals
 $shadow-popover: 0 3px 30px rgba( $dark-gray-900, .1 );
 $shadow-toolbar: 0 2px 10px rgba( $dark-gray-900, .1 ), 0 0 2px rgba( $dark-gray-900, .1 );
-$shadow-below-only: 0 5px 10px rgba( $dark-gray-900, .1 ), 0 2px 2px rgba( $dark-gray-900, .1 );
+$shadow-below-only: 0 5px 10px rgba( $dark-gray-900, .05 ), 0 2px 2px rgba( $dark-gray-900, .05 );
 
 // Editor Widths
 $sidebar-width: 280px;
diff --git a/edit-post/components/header/header-toolbar/style.scss b/edit-post/components/header/header-toolbar/style.scss
index fd6245e5dd299a..3afa02aa5f7cfd 100644
--- a/edit-post/components/header/header-toolbar/style.scss
+++ b/edit-post/components/header/header-toolbar/style.scss
@@ -1,4 +1,4 @@
-// hide all action buttons except the inserter on mobile
+// Hide all action buttons except the inserter on mobile.
 .edit-post-header-toolbar > .components-button {
 	display: none;
 
@@ -18,15 +18,26 @@
 	}
 }
 
+// Block toolbar when fixed to the top of the screen.
 .edit-post-header-toolbar__block-toolbar {
-	// stacked toolbar
+	// Stack toolbar below Editor Bar.
 	position: absolute;
 	top: $header-height;
 	left: 0;
 	right: 0;
+	width: 100%;
 	background: $white;
-	border-bottom: 1px solid $light-gray-500;
 	min-height: $block-toolbar-height;
+	border-bottom: 1px solid $light-gray-500;
+
+	.editor-block-toolbar  {
+		border-left: none;
+	}
+
+	.editor-block-toolbar .components-toolbar {
+		border-top: none;
+		border-bottom: none;
+	}
 
 	.is-sidebar-opened & {
 		display: none;
@@ -39,8 +50,8 @@
 		}
 	}
 
-	// merge toolbars after this breakpoint
-	@include break-large {	// we should try and lower this breakpoint through an ellipsis overflow feature
+	// Move toolbar into top Editor Bar.
+	@include break-large {
 		padding-left: $item-spacing;
 		position: static;
 		left: auto;
diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
index b1dfb0ef42d5ed..0b63c3e30c69f6 100644
--- a/edit-post/components/visual-editor/style.scss
+++ b/edit-post/components/visual-editor/style.scss
@@ -50,11 +50,18 @@
 			margin-right: -$block-side-ui-width;
 		}
 
-		&[data-align="full"] > .editor-block-contextual-toolbar,
-		&[data-align="wide"] > .editor-block-contextual-toolbar { // don't affect nested block toolbars
-			max-width: $content-width + 2;	// 1px border left and right
-			margin-left: auto;
-			margin-right: auto;
+		// Center the block toolbar on wide and full-wide blocks.
+		&[data-align="full"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar,
+		&[data-align="wide"] > .editor-block-list__block-edit > .editor-block-contextual-toolbar { // Don't affect nested block toolbars.
+			width: calc( 100% + #{ $parent-block-padding + $parent-block-padding + $border-width + $border-width } );
+			height: 0px; // This collapses the container to an invisible element without margin.
+			text-align: center;
+
+			.editor-block-toolbar {
+				max-width: $content-width + $block-padding + $block-padding;
+				width: 100%;
+				position: relative;
+			}
 		}
 	}
 
diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index 1f136a0765ae77..02cb3270c55203 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -131,19 +131,20 @@
 		margin-bottom: -$block-padding;
 	}
 
+	// Adjust the spacing of the appender, or the first block, to sit near the title.
+	.editor-default-block-appender__content,
+	.editor-block-list__block:first-child .editor-block-list__block-edit {
+		margin-top: $block-padding - $block-spacing / 2;
+	}
+
 	// Space every block, and the default appender, using margins.
 	// This allows margins to collapse, which gives a better representation of how it looks on the frontend.
 	.editor-default-block-appender__content,
-	.editor-block-list__block .editor-block-list__block-edit {
+	.editor-block-list__block .editor-block-list__block-edit,
+	.editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit { // Explicitly target nested blocks, as those need to override the preceeding rule.
 		margin-top: $block-padding * 2 + $block-spacing;
 		margin-bottom: $block-padding * 2 + $block-spacing;
 	}
-
-	// Adjust the spacing of the appender, or the first block, to sit near the title.
-	.editor-default-block-appender__content,
-	.editor-block-list__block:first-child .editor-block-list__block-edit {
-		margin-top: $block-padding - $block-spacing / 2;
-	}
 }
 
 .editor-block-list__layout .editor-block-list__block {
@@ -220,14 +221,14 @@
 			transition: outline .1s linear;
 			pointer-events: none;
 
-			// show wider padding for top level blocks
+			// Show wider padding for top level blocks.
 			right: -$parent-block-padding;
 			left: -$parent-block-padding;
 			top: -$block-padding;
 			bottom: -$block-padding;
 		}
 
-		// show smaller padding for child blocks
+		// Show smaller padding for child blocks.
 		.editor-block-list__block-edit:before {
 			right: -$block-padding;
 			left: -$block-padding;
@@ -241,8 +242,6 @@
 	&.is-selected > .editor-block-list__block-edit:before {
 		// use opacity to work in various editor styles
 		outline: $border-width solid $dark-opacity-light-500;
-		top: -$block-padding;
-		bottom: -$block-padding;
 
 		.is-dark-theme & {
 			outline-color: $light-opacity-light-500;
@@ -390,7 +389,7 @@
 		// Mover and settings above
 		> .editor-block-mover,
 		> .editor-block-settings-menu {
-			top: -$block-side-ui-width - $border-width; // This moves the menu up by the height of the button + border.
+			top: -$block-side-ui-width - $block-padding - $border-width;
 			bottom: auto;
 			min-height: 0;
 			height: auto;
@@ -403,11 +402,11 @@
 		}
 
 		> .editor-block-mover {
-			left: 10px;
+			left: $parent-block-padding;
 		}
 
 		> .editor-block-settings-menu {
-			right: 10px;
+			right: $parent-block-padding;
 			width: $block-side-ui-width * 2;
 			flex-direction: row;
 		}
@@ -514,7 +513,7 @@
 
 
 /**
- * Left and right side UI
+ * Left and right side UI, & Unified toolbar on Mobile
  */
 
 .editor-block-list__block {
@@ -589,11 +588,13 @@
 	.editor-block-list__block-mobile-toolbar {
 		display: flex;
 		flex-direction: row;
-		margin-top: $item-spacing + $block-toolbar-height; // Make room for the height of the block toolbar above. 
+		margin-top: $item-spacing + $block-toolbar-height - $block-padding; // Make room for the height of the block toolbar above. 
 		margin-right: -$block-padding;
-		margin-bottom: -$block-padding - $border-width;
 		margin-left: -$block-padding;
 		border-top: $border-width solid $light-gray-500;
+		height: $block-toolbar-height;
+
+		transform: translateY( #{ $block-padding + $border-width } );
 
 		@include break-small() {
 			display: none;
@@ -601,7 +602,7 @@
 
 		// Show a shadow below the selected block to imply separation.
 		box-shadow: $shadow-below-only;
-		@include break-mobile() {
+		@include break-small() {
 			box-shadow: none;
 		}
 
@@ -775,12 +776,28 @@
 
 	// Position toolbar below the block on mobile.
 	position: absolute;
-	bottom: $block-toolbar-height;
-	left: $block-padding;
-	right: $block-padding;
+	bottom: $block-toolbar-height - $block-padding;
+	left: 0;
+	right: 0;
+
+	// Paint the borders on the toolbar itself on mobile.
+	border-top: 1px solid $light-gray-500;
+	.components-toolbar {
+		border-top: none;
+		border-bottom: none;
+
+	}
+
+	@include break-small() {
+		border-top: none;
+		.components-toolbar {
+			border-top: 1px solid $light-gray-500;
+			border-bottom: 1px solid $light-gray-500;
+		}
+	}
 
 	// Position the contextual toolbar above the block.
-	@include break-mobile() {
+	@include break-small() {
 		position: sticky;
 		bottom: auto;
 		left: auto;
@@ -834,10 +851,9 @@
 	}
 }
 
+// Position the block toolbar when contextual.
 .editor-block-contextual-toolbar .editor-block-toolbar {
 	width: 100%;
-	background: $white;
-	border: $border-width solid $light-gray-500;
 
 	// Hide right border on desktop, where the .components-toolbar instead has a right border.
 	@include break-small() {
@@ -845,8 +861,10 @@
 	}
 
 	// This prevents floats from messing up the position.
-	position: absolute;
-	left: 0;
+	@include break-small() {
+		position: absolute;
+		left: 0;
+	}
 
 	.editor-block-list__block[data-align="right"] & {
 		left: auto;
diff --git a/editor/components/block-toolbar/style.scss b/editor/components/block-toolbar/style.scss
index 1fedaad2e9d6fd..dee5d69ddf12a7 100644
--- a/editor/components/block-toolbar/style.scss
+++ b/editor/components/block-toolbar/style.scss
@@ -2,7 +2,6 @@
 	display: inline-flex;
 	flex-grow: 1;
 	width: 100%;
-	background: $white;
 	overflow: auto; // Allow horizontal scrolling on mobile.
 	position: relative;
 
@@ -11,8 +10,14 @@
 		overflow: inherit;
 	}
 
+	// Show a left border on the parent container.
+	border-left: $border-width solid $light-gray-500;
+
+	// The component is born with a border, but we only need some of them.
 	.components-toolbar {
-		border: none;
+		border: 0; 
+		border-top: $border-width solid $light-gray-500;
+		border-bottom: $border-width solid $light-gray-500;
 
 		// Add a right border to show as separator in the block toolbar.
 		border-right: $border-width solid $light-gray-500;