diff --git a/includes/Hooks.php b/includes/Hooks.php
index d21b2b484..332c6dff2 100644
--- a/includes/Hooks.php
+++ b/includes/Hooks.php
@@ -149,6 +149,8 @@ class Hooks {
 			if ( $sk->loggedin ) {
 				// Remove user page from personal menu dropdown for logged in users.
 				unset( $content_navigation['user-menu']['userpage'] );
+				// Remove logout link from user-menu and recreate it in SkinVector,
+				unset( $content_navigation['user-menu']['logout'] );
 			} else {
 				// Remove "Not logged in" from personal menu dropdown for anon users.
 				unset( $content_navigation['user-menu']['anonuserpage'] );
diff --git a/includes/SkinVector.php b/includes/SkinVector.php
index 92a84655b..b710249e7 100644
--- a/includes/SkinVector.php
+++ b/includes/SkinVector.php
@@ -212,6 +212,25 @@ class SkinVector extends SkinMustache {
 		] );
 	}
 
+	/**
+	 * Returns HTML for the logout button that should be placed in the user (personal) menu
+	 * after the menu itself.
+	 * @return string
+	 */
+	private function getLogoutHTML() {
+		$logoutLinkData = $this->buildLogoutLinkData();
+		$templateParser = $this->getTemplateParser();
+		$logoutLinkData['class'] = [
+			'vector-menu-content-item',
+			'mw-ui-icon mw-ui-icon-before',
+			'mw-ui-icon-wikimedia-logOut'
+		];
+
+		return $templateParser->processTemplate( 'UserLinks__logout', [
+			'htmlLogout' => $this->makeLink( 'logout', $logoutLinkData )
+		] );
+	}
+
 	/**
 	 * Returns template data for UserLinks.mustache
 	 * @param array $menuData existing menu template data to be transformed and copied for UserLinks
@@ -225,6 +244,11 @@ class SkinVector extends SkinMustache {
 		$userMenuData = $menuData[ 'data-user-menu' ];
 		$userMenuData[ 'html-before-portal' ] = $this->getLoginHTML( $returnto, $useCombinedLoginLink );
 
+		if ( !$isAnon ) {
+			// Appending as to not override data potentially set by the onSkinAfterPortlet hook.
+			$userMenuData[ 'html-after-portal' ] .= $this->getLogoutHTML();
+		}
+
 		return [
 			'is-anon' => $isAnon,
 			'html-create-account' => $htmlCreateAccount,
diff --git a/includes/templates/UserLinks__logout.mustache b/includes/templates/UserLinks__logout.mustache
new file mode 100644
index 000000000..0ab757c0d
--- /dev/null
+++ b/includes/templates/UserLinks__logout.mustache
@@ -0,0 +1,4 @@
+{{!-- The #pt-logout ID is required for the AJAX enabled logout in mediawiki.page.ready to work.}}
+<div id="pt-logout" class="vector-user-menu-login">
+    {{{htmlLogout}}}
+</div>
\ No newline at end of file
diff --git a/resources/skins.vector.styles/components/UserLinks.less b/resources/skins.vector.styles/components/UserLinks.less
index 849bddfe5..df7a7ff74 100644
--- a/resources/skins.vector.styles/components/UserLinks.less
+++ b/resources/skins.vector.styles/components/UserLinks.less
@@ -69,26 +69,26 @@
 			font-size: @font-size-tabs;
 		}
 
-		// "Login" link in anonymous user menus
+		// "Login" and "Logout" links in user menu
 		.vector-user-menu-login {
-			border-bottom: 1px solid @border-color-base;
-
 			&:hover {
 				background-color: @background-color-secondary;
 			}
 
+			&:first-child {
+				border-bottom: 1px solid @border-color-base;
+			}
+
+			&:last-child {
+				border-top: 1px solid @border-color-base;
+			}
+
 			a {
 				display: block;
 				color: #000;
 				text-decoration: none;
 			}
 		}
-
-		// "Log out" link in logged in user menus
-		// FIXME: Should not use ID selector. To be fixed as part of T281791.
-		#pt-logout {
-			border-top: 1px solid @border-color-base;
-		}
 	}
 
 	.mw-portlet-notifications {