diff --git a/resources/skins.vector.zebra.styles/components/Dropdown.less b/resources/skins.vector.zebra.styles/components/Dropdown.less
index eb16ddf93..c9839bbed 100644
--- a/resources/skins.vector.zebra.styles/components/Dropdown.less
+++ b/resources/skins.vector.zebra.styles/components/Dropdown.less
@@ -26,6 +26,8 @@
 	font-weight: normal;
 	cursor: default;
 	padding: @padding-vertical-dropdown-menu-item 0;
+	margin: @padding-vertical-dropdown-menu-item 0;
+	border-bottom: @border-width-base @border-style-base @border-color-content-box;
 }
 
 .vector-pinnable-element .mw-list-item a,
diff --git a/resources/skins.vector.zebra.styles/components/PinnableHeader.less b/resources/skins.vector.zebra.styles/components/PinnableHeader.less
index dd44d7490..349c773aa 100644
--- a/resources/skins.vector.zebra.styles/components/PinnableHeader.less
+++ b/resources/skins.vector.zebra.styles/components/PinnableHeader.less
@@ -1,34 +1,36 @@
+.vector-pinnable-header {
+	padding-bottom: @padding-vertical-dropdown-menu-item;
+	margin-bottom: @padding-vertical-dropdown-menu-item;
+	border-bottom: @border-width-base @border-style-base @border-color-content-box;
+	// Line height helps space label & button when spanning multiple lines,
+	// while still keeping them vertically centered when on one line.
+	line-height: @line-height-medium;
+}
+
 .vector-pinnable-header-label {
 	display: inline-block;
-	color: @color-subtle;
-	font-size: unit( 14 / @font-size-browser, rem );
-	margin: 0;
+	vertical-align: middle;
+	font-size: @font-size-dropdown;
+	margin: 0 @size-50 0 0;
 	padding: 0;
 	border: 0;
+	font-weight: bold;
 }
 
 // Styles for the "move to sidebar/hide" buttons, hidden by default.
 .vector-pinnable-header-toggle-button {
 	display: none;
 	border: 0;
-	padding: 0;
-	background-color: transparent;
-	color: @color-progressive;
+	padding: @spacing-25 @spacing-50;
+	background-color: @background-color-interactive;
+	color: @color-base;
 	cursor: pointer;
 	text-align: left;
+	font-size: unit( 12 / @font-size-browser, rem );
+	border-radius: @border-radius-base;
 
 	&:hover {
-		color: @color-progressive--hover;
-	}
-
-	&::before {
-		content: '@{msg-brackets-start}';
-		color: @color-subtle;
-	}
-
-	&::after {
-		content: '@{msg-brackets-end}';
-		color: @color-subtle;
+		background-color: @background-color-secondary--modern;
 	}
 }
 
diff --git a/resources/skins.vector.zebra.styles/components/TableOfContents.less b/resources/skins.vector.zebra.styles/components/TableOfContents.less
index 859eb69d0..09d0db969 100644
--- a/resources/skins.vector.zebra.styles/components/TableOfContents.less
+++ b/resources/skins.vector.zebra.styles/components/TableOfContents.less
@@ -8,6 +8,10 @@
 }
 
 .vector-toc {
+	.vector-pinnable-header {
+		padding-left: @toc-list-item-padding-start;
+	}
+
 	.vector-toc-numb {
 		display: none;
 	}
@@ -70,7 +74,7 @@
 	.vector-toc-list-item {
 		position: relative;
 		list-style-type: none;
-		padding-left: @toc-list-item-padding-left;
+		padding-left: @toc-list-item-padding-start;
 		margin: 0;
 	}
 }
diff --git a/resources/skins.vector.zebra.styles/variables.less b/resources/skins.vector.zebra.styles/variables.less
index 139672806..1fe63b358 100644
--- a/resources/skins.vector.zebra.styles/variables.less
+++ b/resources/skins.vector.zebra.styles/variables.less
@@ -117,7 +117,7 @@
 // TOC
 @size-toc-subsection-toggle: 22px;
 @size-toc-subsection-toggle-icon: 0.7rem;
-@toc-list-item-padding-left: 12px;
+@toc-list-item-padding-start: 12px;
 
 // Search
 @max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em T270202