diff --git a/includes/SkinVector.php b/includes/SkinVector.php
index 729741c2..1d1f004e 100644
--- a/includes/SkinVector.php
+++ b/includes/SkinVector.php
@@ -337,12 +337,14 @@ class SkinVector extends SkinMustache {
 		];
 		$portletData['heading-class'] = 'vector-menu-heading';
 		// Add target class to apply different icon to personal menu dropdown for logged in users.
-		if ( $portletData['id'] === 'p-personal' && $this->shouldConsolidateUserLinks() &&
-			!$this->getUser()->isAnon()
-		) {
-			$portletData['heading-class'] .= ' mw-portlet-personal-page__heading--auth';
-			// Replace dropdown arrow with ellipsis icon if feature flag is enabled and user is logged in.
-			$portletData['heading-class'] .= ' mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-ellipsis';
+		if ( $portletData['id'] === 'p-personal' ) {
+			if ( $this->shouldConsolidateUserLinks() ) {
+				$portletData['class'] .= ' vector-user-menu';
+				// Replace dropdown arrow with ellipsis icon if feature flag is enabled and user is logged in.
+				$portletData['heading-class'] .= ' mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-ellipsis';
+			} else {
+				$portletData['class'] .= ' vector-user-menu-legacy';
+			}
 		}
 		if ( $portletData['id'] === 'p-lang' && $this->isLanguagesInHeader() ) {
 			$portletData = $this->createULSLanguageButton( $portletData );
diff --git a/resources/skins.vector.styles.legacy/components/UserMenu.less b/resources/skins.vector.styles.legacy/components/UserMenu.less
index 4a87023f..c72d3354 100644
--- a/resources/skins.vector.styles.legacy/components/UserMenu.less
+++ b/resources/skins.vector.styles.legacy/components/UserMenu.less
@@ -3,18 +3,24 @@
 // Legacy overrides for the UserMenu
 
 /* Personal Menu */
+.vector-user-menu-legacy li,
+/* FIXME: the following selector is for cached HTML. It can be removed when
+I068c5233bb25a7b141e66a6726b5761841f83eb2 is in production. */
 #p-personal li {
 	font-size: @font-size-nav-personal;
 }
 
 /* Icon for registered user names & anonymous message */
+/* FIXME: the following selector is for cached HTML. It can be removed when
+I068c5233bb25a7b141e66a6726b5761841f83eb2 is in production */
 #pt-anonuserpage,
-#pt-userpage a {
+.vector-user-menu-legacy #pt-anonuserpage,
+.vector-user-menu-legacy #pt-userpage a {
 	background-position: @background-position-nav-personal-icon;
 	padding-top: 0.5em;
 }
 
-#pt-userpage {
+.vector-user-menu-legacy #pt-userpage {
 	padding-top: 0;
 
 	a {
@@ -23,6 +29,9 @@
 }
 
 /* Show anonymous "Not logged in" text in gray */
-#pt-anonuserpage {
+/* FIXME: the following selector is for cached HTML. It can be removed when
+I068c5233bb25a7b141e66a6726b5761841f83eb2 is in production. */
+#pt-anonuserpage,
+.vector-user-menu-legacy #pt-anonuserpage {
 	color: #54595d;
 }
diff --git a/resources/skins.vector.styles/components/UserMenu.less b/resources/skins.vector.styles/components/UserMenu.less
index 36b3e422..b5ea6b82 100644
--- a/resources/skins.vector.styles/components/UserMenu.less
+++ b/resources/skins.vector.styles/components/UserMenu.less
@@ -1,12 +1,12 @@
 @import '../../common/variables.less';
 
 // Overrides personal menu styles for consolidated user links.
-.mw-portlet-personal.vector-menu-dropdown h3:after {
+.vector-user-menu.vector-menu-dropdown h3:after {
 	padding: 0.4em 0 0.4em 0;
 	content: none;
 }
 
-#p-personal.vector-menu-dropdown {
+.vector-user-menu.vector-menu-dropdown {
 	.vector-menu-checkbox {
 		&:hover + h3 {
 			background-color: @colorGray14;
@@ -24,7 +24,10 @@
 		justify-content: flex-start;
 
 		li {
-			font-size: 100%;
+			// FIXME: the following font-size rule is for cached HTML. It can be removed when
+			// I068c5233bb25a7b141e66a6726b5761841f83eb2 is in production.
+			// stylelint-disable-next-line declaration-no-important
+			font-size: 100% !important;
 			width: 100%;
 
 			&:hover {
@@ -47,6 +50,8 @@
 
 // Since user-page is pulled out of the personal menu for modern vector,
 // apply styles for the top-level user-page menu.
+// FIXME: This is currently not isolated to the UserMenu component
+// as it is rendered separately outside the `.vector-user-menu` class.
 #p-user-page {
 	li {
 		padding-bottom: 0.5em;
diff --git a/resources/skins.vector.styles/skin.less b/resources/skins.vector.styles/skin.less
index 18f40305..212946a6 100644
--- a/resources/skins.vector.styles/skin.less
+++ b/resources/skins.vector.styles/skin.less
@@ -15,6 +15,8 @@
 	@import './components/VueEnhancedSearchBox.less';
 	@import './components/Sidebar.less';
 	@import './components/LanguageButton.less';
+	// This import can be removed when $wgVectorConsolidateUserLinks feature flag is removed.
+	@import '../skins.vector.styles.legacy/components/UserMenu.less';
 	@import './components/UserMenu.less';
 }
 
diff --git a/tests/phpunit/integration/SkinVectorTest.php b/tests/phpunit/integration/SkinVectorTest.php
index 0c56a77b..9189de62 100644
--- a/tests/phpunit/integration/SkinVectorTest.php
+++ b/tests/phpunit/integration/SkinVectorTest.php
@@ -110,7 +110,7 @@ class SkinVectorTest extends MediaWikiIntegrationTestCase {
 			$actions['class']
 		);
 		$this->assertSame(
-			'mw-portlet mw-portlet-personal vector-menu',
+			'mw-portlet mw-portlet-personal vector-user-menu-legacy vector-menu',
 			$props['data-personal']['class']
 		);
 	}