diff --git a/includes/templates/Menu.mustache b/includes/templates/Menu.mustache
index 16882916..e4ad5ed0 100644
--- a/includes/templates/Menu.mustache
+++ b/includes/templates/Menu.mustache
@@ -31,13 +31,13 @@
 		Portal menus also require a label
 	}}
 	{{#is-portal}}
-	<p
+	<div
 		id="{{id}}-label"
 		class="vector-menu-heading{{#heading-class}} {{.}}{{/heading-class}}"
 		{{#aria-label}}aria-label="{{.}}"{{/aria-label}}
 	>
 		{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
-	</p>
+	</div>
 	{{/is-portal}}
 	<div class="vector-menu-content">
 		{{{html-before-portal}}}
diff --git a/includes/templates/SidebarAction.mustache b/includes/templates/SidebarAction.mustache
index a98576cc..3ef03dc8 100644
--- a/includes/templates/SidebarAction.mustache
+++ b/includes/templates/SidebarAction.mustache
@@ -1,9 +1,9 @@
 {{! `heading` is optional. }}
-<div class="mw-sidebar-action">
-	<div class="mw-sidebar-action-item">
-		{{#heading}}<h3 class="mw-sidebar-action-heading">{{.}}</h3>{{/heading}}
-		<div class="mw-sidebar-action-content">
-		{{{html-content}}}
+<div class="mw-sidebar-action ">
+	<div class="mw-sidebar-action-item vector-menu-portal">
+		{{#heading}}<div class="mw-sidebar-action-heading vector-menu-heading">{{.}}</div>{{/heading}}
+		<div class="mw-sidebar-action-content vector-menu-content">
+			{{{html-content}}}
 		</div>
 	</div>
 </div>
diff --git a/resources/common/components/MenuPortal.less b/resources/common/components/MenuPortal.less
index 59f90eae..9c1f8734 100644
--- a/resources/common/components/MenuPortal.less
+++ b/resources/common/components/MenuPortal.less
@@ -8,10 +8,6 @@
 
 	.vector-menu-heading {
 		display: block;
-		background-image: linear-gradient( to right, @border-color-portal-heading-transparent 0, @border-color-portal-heading 33%, @border-color-portal-heading 66%, @border-color-portal-heading-transparent 100% ); // Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+)
-		background-position: center bottom;
-		background-repeat: no-repeat;
-		background-size: 100% @border-width-base;
 		color: @color-base--subtle;
 		margin: 0.5em 0 0 ( @margin-start-nav-main-body / @font-size-nav-main-heading );
 		border: 0;
diff --git a/resources/skins.vector.styles.legacy/components/MenuPortal.less b/resources/skins.vector.styles.legacy/components/MenuPortal.less
new file mode 100644
index 00000000..9fb06b94
--- /dev/null
+++ b/resources/skins.vector.styles.legacy/components/MenuPortal.less
@@ -0,0 +1,8 @@
+.vector-menu-portal {
+	.vector-menu-heading {
+		background-image: linear-gradient( to right, @border-color-portal-heading-transparent 0, @border-color-portal-heading 33%, @border-color-portal-heading 66%, @border-color-portal-heading-transparent 100% ); // Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+)
+		background-position: center bottom;
+		background-repeat: no-repeat;
+		background-size: 100% @border-width-base;
+	}
+}
diff --git a/resources/skins.vector.styles.legacy/skin-legacy.less b/resources/skins.vector.styles.legacy/skin-legacy.less
index 87eb872e..a5de62bf 100644
--- a/resources/skins.vector.styles.legacy/skin-legacy.less
+++ b/resources/skins.vector.styles.legacy/skin-legacy.less
@@ -10,6 +10,7 @@
 	// Legacy specific components
 	@import './components/MenuDropdown.less';
 	@import './components/MenuTabs.less';
+	@import './components/MenuPortal.less';
 	@import './components/SearchBox.less';
 	@import './components/Sidebar.less';
 	@import './components/TabWatchstarLink.less';
diff --git a/resources/skins.vector.styles/components/MenuPortal.less b/resources/skins.vector.styles/components/MenuPortal.less
new file mode 100644
index 00000000..43664c79
--- /dev/null
+++ b/resources/skins.vector.styles/components/MenuPortal.less
@@ -0,0 +1,5 @@
+.vector-menu-portal {
+	.vector-menu-heading {
+		border-bottom: 1px solid @border-color-portal-heading;
+	}
+}
diff --git a/resources/skins.vector.styles/components/Sidebar.less b/resources/skins.vector.styles/components/Sidebar.less
index 42592b1f..daa593d0 100644
--- a/resources/skins.vector.styles/components/Sidebar.less
+++ b/resources/skins.vector.styles/components/Sidebar.less
@@ -66,25 +66,15 @@
 }
 
 .mw-sidebar-action {
-	// Align with the portal heading/links
-	// `.portal` + `.portal .body`
-	margin: 8px @margin-end-portal 8px @margin-start-portal + @margin-start-portal-body;
-
 	// Styles for SidebarAction template.
 	.mw-sidebar-action-item {
-		h3.mw-sidebar-action-heading {
-			display: block;
-			background-image: linear-gradient( to right, @border-color-portal-heading-transparent 0, @border-color-portal-heading 33%, @border-color-portal-heading 66%, @border-color-portal-heading-transparent 100% ); // Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+)
-			background-position: center bottom;
-			background-repeat: no-repeat;
-			background-size: 100% @border-width-base;
-			color: @color-base--subtle;
-			margin: 0.75em 0;
-			border: 0;
-			padding: 0.3em 0;
-			font-size: @font-size-nav-main-heading;
-			font-weight: normal;
-			cursor: default;
+		// Align with the portal heading/links
+		// `.portal` + `.portal .body`
+		margin-top: 4px;
+		margin-bottom: 4px;
+
+		.mw-sidebar-action-heading {
+			margin-bottom: 0.75em;
 		}
 
 		.mw-sidebar-action-content {
diff --git a/resources/skins.vector.styles/skin.less b/resources/skins.vector.styles/skin.less
index f7d3f766..6f3a63bf 100644
--- a/resources/skins.vector.styles/skin.less
+++ b/resources/skins.vector.styles/skin.less
@@ -20,6 +20,7 @@
 	@import './components/Header.less';
 	@import './components/MenuDropdown.less';
 	@import './components/MenuTabs.less';
+	@import './components/MenuPortal.less';
 	@import './components/StickyHeader.less';
 	@import './components/TabWatchstarLink.less';
 	@import './components/TableOfContents.less';