diff --git a/bundlesize.config.json b/bundlesize.config.json
index 146df7427..80a489c2a 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -5,7 +5,7 @@
 	},
 	{
 		"resourceModule": "skins.vector.styles",
-		"maxSize": "10.4 kB"
+		"maxSize": "10.7 kB"
 	},
 	{
 		"resourceModule": "skins.vector.legacy.js",
diff --git a/includes/templates/ArticleToolbar.mustache b/includes/templates/ArticleToolbar.mustache
new file mode 100644
index 000000000..b71255336
--- /dev/null
+++ b/includes/templates/ArticleToolbar.mustache
@@ -0,0 +1,15 @@
+<nav class="vector-article-toolbar" aria-label="{{msg-vector-article-tools-nav-label}}"
+	role="navigation">
+	<div class="mw-article-toolbar-container">
+		{{#data-portlets}}
+		<div id="left-navigation">
+			{{#data-namespaces}}{{>Menu}}{{/data-namespaces}}
+			{{#data-variants}}{{>Menu}}{{/data-variants}}
+		</div>
+		<div id="right-navigation" class="vector-collapsible {{#data-views.is-empty}}{{#data-actions.is-empty}}right-navigation-empty{{/data-actions.is-empty}}{{/data-views.is-empty}}">
+			{{#data-views}}{{>Menu}}{{/data-views}}
+			{{#data-actions}}{{>Menu}}{{/data-actions}}
+		</div>
+		{{/data-portlets}}
+	</div>
+</nav>
diff --git a/includes/templates/Navigation.mustache b/includes/templates/Navigation.mustache
index bfd3ccaca..04c32cbc9 100644
--- a/includes/templates/Navigation.mustache
+++ b/includes/templates/Navigation.mustache
@@ -1,17 +1,4 @@
 <div id="mw-navigation">
-	<nav id="mw-head" aria-label="{{msg-vector-article-tools-nav-label}}" role="navigation" >
-		<div class="mw-article-toolbar-container">
-			{{#data-portlets}}
-			<div id="left-navigation">
-				{{#data-namespaces}}{{>Menu}}{{/data-namespaces}}
-				{{#data-variants}}{{>Menu}}{{/data-variants}}
-			</div>
-			<div id="right-navigation">
-				{{#data-views}}{{>Menu}}{{/data-views}}
-				{{#data-actions}}{{>Menu}}{{/data-actions}}
-			</div>
-			{{/data-portlets}}
-		</div>
-	</nav>
+	{{>ArticleToolbar}}
 	{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
 </div>
diff --git a/resources/common/components/MenuDropdown.less b/resources/common/components/MenuDropdown.less
index b74283ddf..6086ffa8e 100644
--- a/resources/common/components/MenuDropdown.less
+++ b/resources/common/components/MenuDropdown.less
@@ -97,6 +97,8 @@
 	}
 }
 
+// FIXME: For cached CSS. can be dropped to legacy stylesheet when
+// Ia261ea53931217f32a21b33c2ab3d4ec64efa48a has been in production for a week.
 #mw-head .vector-menu-dropdown .vector-menu-heading {
 	// Tab separator: Outer end (right in LTR) border of "Actions" menu.
 	background-position: right bottom;
@@ -114,6 +116,7 @@
 // `.vector-menu-tabs`: Outer start border (left in LTR) of tab row.
 // `.vector-menu-tabs a`: Border between tabs and outer end (right in LTR) border.
 // `#mw-head .vector-menu-dropdown .vector-menu-heading`: // Outer end (right in LTR) border of "Actions" menu.
+// #mw-head rule is legacy Vector only.
 .vector-menu-tabs,
 .vector-menu-tabs a,
 #mw-head .vector-menu-dropdown .vector-menu-heading {
diff --git a/resources/skins.vector.styles/components/ArticleToolbar.less b/resources/skins.vector.styles/components/ArticleToolbar.less
index cfc1c0831..150dd0a86 100644
--- a/resources/skins.vector.styles/components/ArticleToolbar.less
+++ b/resources/skins.vector.styles/components/ArticleToolbar.less
@@ -26,3 +26,67 @@
 		}
 	}
 }
+
+// FIXME: This can be merged with the above when cached HTML contains the vector-article-toolbar class.
+.vector-article-toolbar .mw-article-toolbar-container {
+	display: flex;
+	@border-base-ems: unit( @border-width-base / @font-size-browser / @font-size-base, em );
+
+	@media ( min-width: @width-breakpoint-desktop-wide ) {
+		padding-right: @padding-horizontal-tabs - 1px;
+	}
+
+	.vector-menu-tabs {
+		// Account for background-image gradient.
+		margin-top: -1px;
+	}
+
+	.vector-menu-dropdown .vector-menu-heading {
+		background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% );
+		background-repeat: no-repeat;
+		// Contain gradient to 1px × 100% size and draw from top to bottom-left or -right corner.
+		background-size: @border-width-base 100%;
+		background-position: right bottom;
+		height: 100%;
+	}
+
+	#right-navigation {
+		display: flex;
+		flex-grow: 1;
+		justify-content: end;
+		border-bottom: @border-width-base @border-style-base @border-color-content;
+		// Layout correction - as it was before introduce of flex box.
+		margin-right: -1px;
+
+		@media ( min-width: @width-breakpoint-desktop-wide ) {
+			margin-right: -@border-base-ems * 3;
+		}
+	}
+
+	#left-navigation {
+		display: flex;
+		border-bottom: @border-width-base @border-style-base @border-color-content;
+
+		// Layout correction - as it was before introduce of flex box.
+		@media ( min-width: @width-breakpoint-desktop-wide ) {
+			margin-left: @border-base-ems * 3;
+		}
+	}
+
+	.vector-menu-tabs li {
+		margin-top: 1px;
+
+		&.selected {
+			background: #fff;
+		}
+	}
+}
+
+// Currently when right navigation is empty and sidebar is open no
+// border is shown. This can intentionally be removed at a later date but
+// is preserved to reduce number of UI regressions in current release.
+@media ( max-width: @width-breakpoint-tablet ) {
+	#mw-sidebar-checkbox:checked ~ .mw-workspace-container #right-navigation.right-navigation-empty {
+		border-bottom: 0;
+	}
+}
diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less
index 3478b7ac9..363cccee7 100644
--- a/resources/skins.vector.styles/layouts/screen.less
+++ b/resources/skins.vector.styles/layouts/screen.less
@@ -77,7 +77,7 @@ body {
 }
 
 .mw-body {
-	border-top: @border-width-base @border-style-base @border-color-content;
+	border-top: @border-width-base @border-style-base transparent;
 	/* Merge the border with tabs' one (in their background image) */
 	margin-top: -@border-width-base;
 	padding: @padding-content;