diff --git a/resources/common/variables.less b/resources/common/variables.less
index 7c2d1f0..3c842e2 100644
--- a/resources/common/variables.less
+++ b/resources/common/variables.less
@@ -116,6 +116,7 @@
 // Derived from @spacing-start-typeahead-search-figure + @spacing-end-typeahead-search-figure in WVUI
 // https://gerrit.wikimedia.org/g/wvui/+/refs/changes/93/650593/10/src/components/typeahead-search/TypeaheadSearch.vue#645
 @size-search-expand: 24px;
+@margin-end-search: 12px;
 
 // language button
 @height-lang-button: unit( 32 / @font-size-browser, em );
diff --git a/resources/skins.vector.styles/components/Header.less b/resources/skins.vector.styles/components/Header.less
new file mode 100644
index 0000000..0951e53
--- /dev/null
+++ b/resources/skins.vector.styles/components/Header.less
@@ -0,0 +1,89 @@
+@import '../../common/variables.less';
+@import 'mediawiki.mixins.less';
+
+// Header sizes defined in the description of T246170 and comment T246170#5957100
+@padding-vertical-header: 0.125em;
+@margin-top-header: 0.625em;
+@margin-bottom-header: 0.3125em;
+
+// Logo sizes per specification in T245190.
+@height-logo-icon: 3.125em;
+
+// Canonical version of spec: T270202
+@min-width-search: unit( 150px / @font-size-browser / @font-size-base, em ); // 10.71428571em @ 16 & 0.875em
+@min-width-search-desktop: unit( 350px / @font-size-browser / @font-size-base, em ); // 25em @ 16 & 0.875em
+@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em
+
+.mw-header {
+	// A min-height is set to account for projects where no icon is set.
+	min-height: @height-logo-icon;
+	margin: @margin-top-header 0 @margin-bottom-header;
+	padding: @padding-vertical-header 0;
+	// Vertical centering of header elements (IE>=11), requires flex.
+	// Non-flex fallback for IE<=9: float rule on the child elements.
+	.flex-display();
+	flex-wrap: nowrap;
+	// https://caniuse.com/#search=align-items
+	align-items: center;
+
+	.vector-search-box {
+		float: left;
+		z-index: @z-index-menu;
+		flex-grow: 1;
+	}
+
+	@media ( min-width: @width-breakpoint-desktop ) {
+		.vector-search-box {
+			margin-left: unit( 40px / @font-size-browser / @font-size-base, em ); // 2.85714286em @ 16 & 0.875em
+			margin-right: @margin-end-search;
+
+			// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
+			width: 13.2em;
+			// Support: Modern browsers, responsive width.
+			width: 20vw;
+			max-width: 100%;
+			min-width: @min-width-search-desktop;
+			flex-basis: @min-width-search;
+
+			> div > #searchform,
+			.wvui-typeahead-search {
+				max-width: @max-width-search;
+			}
+		}
+	}
+
+	/**
+	 * Toggles the visibility of the search box at lower resolutions.
+	 */
+	@media ( max-width: @width-breakpoint-desktop ) {
+		&.vector-header-search-toggled {
+			#mw-sidebar-button,
+			.mw-logo,
+			.search-toggle {
+				display: none;
+			}
+
+			.vector-search-box-collapses > div {
+				display: block;
+			}
+
+			.vector-search-box {
+				// T284242#7206507: Widen the suggestion results to the edge of the search
+				// button at small resolutions.
+				position: relative;
+				margin-left: @padding-horizontal-tabs;
+				margin-right: @margin-end-search;
+			}
+
+			// Increase the start margin of the search box to account for the input
+			// expanding on focus.
+			.vector-search-box-show-thumbnail {
+				margin-left: @size-search-expand + @padding-horizontal-tabs;
+			}
+
+			.wvui-typeahead-search__wrapper {
+				position: static;
+			}
+		}
+	}
+}
diff --git a/resources/skins.vector.styles/components/VueEnhancedSearchBox.less b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less
index 944d140..0cb1c10 100644
--- a/resources/skins.vector.styles/components/VueEnhancedSearchBox.less
+++ b/resources/skins.vector.styles/components/VueEnhancedSearchBox.less
@@ -18,7 +18,7 @@
 // Search container
 // We have to put those styles outside `.skin-vector-search-vue`,
 // as we can't address no-JS modern and Vue enhanced otherwise.
-#p-search {
+.vector-search-box {
 	// Use Vector's base font-size, as this is a component outside of `.vector-body`.
 	font-size: @font-size-base;
 	// Support IE 9-11, Trident cuts values 2 digits after decimal point.
diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less
index c3bb551..5782891 100644
--- a/resources/skins.vector.styles/layouts/screen.less
+++ b/resources/skins.vector.styles/layouts/screen.less
@@ -8,44 +8,17 @@
 @import '../../common/variables.less';
 @import 'mediawiki.mixins.less';
 
-// Header
-
-// Header sizes defined in the description of T246170 and comment T246170#5957100
+// Sidebar
 @width-grid-column-one: 11em;
-@padding-vertical-header: 0.125em;
-@margin-top-header: 0.625em;
-@margin-bottom-header: 0.3125em;
-@height-header:
-	@height-logo-icon +
-	@margin-top-header +
-	@margin-bottom-header +
-	2 * @padding-vertical-header;
-// 3.125em + 0.625em + 0.3125em + 0.25em = 4.3125em
 
 // Menu button
 @margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em); // 0.75em @ 16
 
-// Logo
-
-// Logo sizes per specification in T245190.
-@height-logo-icon: 3.125em;
-
 // The logo is variable width but typically consists of:
 // - a icon (50x50)
 // - a wordmark (approx 120px)
 @min-width-logo: unit( 180px / @font-size-browser, em ); // 11.25em @ 16
 
-// Search
-
-// Canonical version of spec: T270202
-// This assumes the presence of variables inside screen.less. DO NOT import it separately.
-// Assumes various variables defined there.
-@min-width-search: unit( 150px / @font-size-browser / @font-size-base, em ); // 10.71428571em @ 16 & 0.875em
-@min-width-search-desktop: unit( 350px / @font-size-browser / @font-size-base, em ); // 25em @ 16 & 0.875em
-@max-width-search: unit( 500px / @font-size-browser / @font-size-base, em ); // 35.71428571em @ 16 & 0.875em
-@margin-horizontal-search: unit( 40px / @font-size-browser / @font-size-base, em ); // 2.85714286em @ 16 & 0.875em
-@margin-end-search: 12px;
-
 // Sidebar
 
 @margin-top-sidebar: 0.5em;
@@ -128,44 +101,11 @@ body {
 }
 
 .mw-header {
-	// A min-height is set to account for projects where no icon is set.
-	min-height: @height-logo-icon;
-	margin: @margin-top-header 0 @margin-bottom-header;
-	padding: @padding-vertical-header 0;
-	// Vertical centering of header elements (IE>=11), requires flex.
-	// Non-flex fallback for IE<=9: float rule on the child elements.
-	.flex-display();
-	flex-wrap: nowrap;
-	// https://caniuse.com/#search=align-items
-	align-items: center;
 	// allow z-index to apply so search results overlay article
 	position: relative;
 	z-index: @z-index-header;
 }
 
-/* Searchbox */
-#p-search {
-	float: left;
-	margin: 0 0 0 @margin-horizontal-search;
-	z-index: @z-index-menu;
-	flex-grow: 1;
-
-	// #searchform is only a direct child of #p-search before wvui-loads. After
-	// wvui loads, `.wvui-typeahead-search` becomes the direct child and is the
-	// element where these styles should apply.
-	// FIXME: The first selector (> #searchform)
-	// is for cached HTML. Should be removed when T276566 has been in production.
-	> #searchform,
-	> div > #searchform,
-	.wvui-typeahead-search {
-		// Border-box sizing is used for a smooth transition from legacy to Vue
-		// search. The width of the container should stay the same before/after the
-		// transition.
-		.box-sizing( border-box );
-		margin-left: 0;
-	}
-}
-
 /* Main column */
 .mw-body,
 #mw-data-after-content,
@@ -378,64 +318,12 @@ body {
 }
 
 @media ( min-width: @width-breakpoint-desktop ) {
-	#p-search {
-		margin: 0 @margin-end-search 0 @margin-horizontal-search;
-		// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
-		width: 13.2em;
-		// Support: Modern browsers, responsive width.
-		width: 20vw;
-		max-width: 100%;
-		min-width: @min-width-search-desktop;
-		flex-basis: @min-width-search;
-		flex-grow: 1;
-
-		> div > #searchform,
-		.wvui-typeahead-search {
-			max-width: @max-width-search;
-		}
-	}
-
 	.mw-page-container {
 		padding-left: @padding-horizontal-page-container;
 		padding-right: @padding-horizontal-page-container;
 	}
 }
 
-/**
- * Toggles the visibility of the search box at lower resolutions.
- */
-@media ( max-width: @width-breakpoint-desktop ) {
-	.vector-header-search-toggled {
-		#mw-sidebar-button,
-		.mw-logo,
-		.search-toggle {
-			display: none;
-		}
-
-		.vector-search-box-collapses > div {
-			display: block;
-		}
-
-		#p-search {
-			// T284242#7206507: Widen the suggestion results to the edge of the search
-			// button at small resolutions.
-			position: relative;
-			margin-left: @padding-horizontal-tabs;
-			margin-right: @margin-end-search;
-		}
-
-		// Increase the start margin of the search box to account for the input
-		// expanding on focus.
-		#p-search.vector-search-box-show-thumbnail {
-			margin-left: @size-search-expand + @padding-horizontal-tabs;
-		}
-
-		.wvui-typeahead-search__wrapper {
-			position: static;
-		}
-	}
-}
-
 /**
  * Makes the sidebar full screen at lower resolutions.
  */
diff --git a/resources/skins.vector.styles/skin.less b/resources/skins.vector.styles/skin.less
index d5e91d4..4d51e9e 100644
--- a/resources/skins.vector.styles/skin.less
+++ b/resources/skins.vector.styles/skin.less
@@ -16,6 +16,7 @@
 	@import './components/Sidebar.less';
 	@import './components/LanguageButton.less';
 	@import './components/UserLinks.less';
+	@import './components/Header.less';
 	@import './components/StickyHeader.less';
 }