diff --git a/modules/overlay/ext.echo.overlay.js b/modules/overlay/ext.echo.overlay.js
index 302cfcb2b..079ae17a1 100644
--- a/modules/overlay/ext.echo.overlay.js
+++ b/modules/overlay/ext.echo.overlay.js
@@ -314,7 +314,6 @@
 		_getTitleElement: function() {
 			var $title = $( '<div>' ).addClass( 'mw-echo-overlay-title' )
 				.append( this._getTabsElement() );
-			this._showTabList( this._activeTab );
 			return $title;
 		},
 
@@ -364,6 +363,8 @@
 
 			$overlay.prepend( this._getTitleElement() );
 			$overlay.append( this._getFooterElement() );
+			// Show the active tab.
+			this._showTabList( this._activeTab );
 		}
 	};
 
diff --git a/tests/qunit/overlay/test_ext.echo.overlay.js b/tests/qunit/overlay/test_ext.echo.overlay.js
index bc8f2e33d..047f931bd 100644
--- a/tests/qunit/overlay/test_ext.echo.overlay.js
+++ b/tests/qunit/overlay/test_ext.echo.overlay.js
@@ -12,12 +12,14 @@
 			};
 			ApiStub.prototype = {
 				post: function( data ) {
-					return new $.Deferred().resolve( this.getNewNotificationCountData( data ) );
+					return new $.Deferred().resolve( this.getNewNotificationCountData( data,
+							this.mode === 'with-new-messages' ) );
 				},
 				get: function() {
 					var i, id,
 						index = [], listObj = {},
 						data = this.getData();
+					// a response which contains 0 unread messages and 1 read alert
 					if ( this.mode === 'no-new-messages' ) {
 						data.query.notifications.message = {
 							index: [ 100 ],
@@ -33,6 +35,7 @@
 							rawcount: 0,
 							count: '0'
 						};
+					// a response which contains 8 unread messages and 1 read alert
 					} else if ( this.mode === 'with-new-messages' ) {
 						for ( i = 0; i < 7; i++ ) {
 							id = 500 + i;
@@ -51,7 +54,7 @@
 					}
 					return $.Deferred().resolve( data );
 				},
-				getNewNotificationCountData: function( data ) {
+				getNewNotificationCountData: function( data, hasNewMessages ) {
 					var alertCount, messageCount,
 						rawCount = 0,
 						count = 0;
@@ -60,26 +63,37 @@
 						count: '0',
 						rawcount: 0
 					};
+					alertCount = {
+						count: '0',
+						rawcount: 0
+					};
 					if ( data.list === '100' ) {
-						alertCount = {
-							count: '1',
-							rawcount: 1
-						};
-						count = 1;
-						rawCount = 1;
-					} else if ( data.list === 500 ) {
-						messageCount = {
-							count: '6',
-							rawcount: 6
-						};
-						rawCount = 7;
-						count = 7;
-					} else {
 						alertCount = {
 							count: '0',
 							rawcount: 0
 						};
+						count = 1;
+						rawCount = 1;
 					}
+
+					if ( hasNewMessages && data.sections === 'alert' ) {
+						messageCount = {
+							count: '7',
+							rawcount: 7
+						};
+						rawCount = 7;
+						count = 7;
+					}
+
+					if ( data.list === 500 ) {
+						messageCount = {
+							count: '6',
+							rawcount: 6
+						};
+						rawCount = 6;
+						count = 6;
+					}
+
 					data = {
 						query: {
 							echomarkread: {
@@ -158,26 +172,47 @@
 			false, 'The badge no longer indicates new messages.' );
 	} );
 
-	QUnit.test( 'Switch tabs on overlay. No unread messages, 1 unread alert.', 4, function( assert ) {
+	QUnit.test( 'mw.echo.overlay.buildOverlay with messages', 5, function( assert ) {
+		var $overlay;
+		this.sandbox.stub( mw.echo.overlay, 'api', new this.ApiStub( 'no-new-messages' ) );
+		mw.echo.overlay.buildOverlay( function( $o ) {
+			$overlay = $o;
+		} );
+		assert.strictEqual( $overlay.find( '.mw-echo-overlay-title ul li' ).length, 2, 'There are two tabs in header' );
+		assert.strictEqual( $overlay.find( '.mw-echo-notifications' ).length, 2, 'Overlay contains 2 lists of notifications.' );
+		assert.strictEqual( $overlay.find( '.mw-echo-overlay-title a' ).eq( 0 ).hasClass( 'mw-ui-active' ),
+			true, 'First tab is the selected tab upon opening.' );
+		assert.strictEqual( this.$badge.text(),
+			'0', 'The label updates to 0 as alerts tab is default and now alerts have been read.' );
+		assert.strictEqual( this.$badge.hasClass( 'mw-echo-unread-notifications' ),
+			false, 'The notification button class is updated with the default switch to alert tab.' );
+	} );
+
+	QUnit.test( 'Switch tabs on overlay. No unread messages, 1 unread alert.', 7, function( assert ) {
 		var $overlay, $tabs;
 
 		this.sandbox.stub( mw.echo.overlay, 'api', new this.ApiStub( 'no-new-messages' ) );
 		mw.echo.overlay.buildOverlay( function( $o ) {
 			$overlay = $o;
-			$tabs = $overlay.find( '.mw-echo-overlay-title li a' );
+			// switch to 1st tab
+			$overlay.find( '.mw-echo-overlay-title li a' ).eq( 0 ).trigger( 'click' );
 		} );
 
-		// switch to 2nd tab
-		$overlay.find( '.mw-echo-overlay-title li a' ).eq( 1 ).trigger( 'click' );
+		$tabs = $overlay.find( '.mw-echo-overlay-title li a' );
 
-		assert.strictEqual( $tabs.eq( 0 ).hasClass( 'mw-ui-quiet' ),
-			false, 'First tab is now the selected tab.' );
 		assert.strictEqual( $tabs.eq( 1 ).hasClass( 'mw-ui-quiet' ),
-			true, 'Second tab is now the selected tab.' );
+			false, 'Second tab is now the selected tab.' );
+		assert.strictEqual( $tabs.eq( 0 ).hasClass( 'mw-ui-quiet' ),
+			true, 'First tab is now the selected tab.' );
 		assert.strictEqual( this.$badge.text(),
 			'0', 'The label is now set to 0.' );
 		assert.strictEqual( this.$badge.hasClass( 'mw-echo-unread-notifications' ),
 			false, 'There are now zero unread notifications.' );
+
+		assert.strictEqual( $tabs.eq( 0 ).text(), 'Messages (0)', 'Check the label has a count in it.' );
+		assert.strictEqual( $tabs.eq( 1 ).text(), 'Alerts (0)', 'Check the label has an updated count in it.' );
+		assert.strictEqual( $tabs.eq( 1 ).hasClass( 'mw-ui-active' ),
+			true, 'Second tab has active class .as it is the only clickable tab' );
 	} );
 
 	QUnit.test( 'Unread message behaviour', 5, function( assert ) {
@@ -203,6 +238,35 @@
 			'There are no notifications now so no need for button.' );
 	} );
 
+	QUnit.test( 'Mark as read.', 8, function( assert ) {
+		var $overlay;
+		this.$badge.text( '8' );
+		this.sandbox.stub( mw.echo.overlay, 'api', new this.ApiStub( 'with-new-messages' ) );
+		mw.echo.overlay.buildOverlay( function( $o ) {
+			$overlay = $o;
+		} );
+
+		// Test initial state
+		assert.strictEqual( $overlay.find( '.mw-echo-overlay-title li a' ).eq( 0 ).text(), 'Messages (7)',
+			'Check the label has a count in it and it is not automatically reset when tab is open.' );
+		assert.strictEqual( $overlay.find( '.mw-echo-unread' ).length, 8,
+			'There are 7 unread message notifications and although the alert is marked as read on server is displays as unread in overlay.' );
+		assert.strictEqual( this.$badge.text(), '7', '7 unread notifications in badge (alerts get marked automatically).' );
+		assert.strictEqual( $overlay.find( '.mw-echo-notifications li button' ).length, 7,
+			'There are 7 mark as read button.' );
+
+		// Click first mark as read
+		$overlay.find( '.mw-echo-notifications li button' ).eq( 0 ).trigger( 'click' );
+
+		assert.strictEqual( $overlay.find( '.mw-echo-overlay-title li a' ).eq( 0 ).text(), 'Messages (6)',
+			'Check the notification was marked as read.' );
+		assert.strictEqual( $overlay.find( '.mw-echo-unread' ).length, 7,
+			'There are now 6 unread message notifications in UI and 1 unread alert.' );
+		assert.strictEqual( $overlay.find( '.mw-echo-notifications li button' ).length, 6,
+			'There are now 6 mark as read buttons.' );
+		assert.strictEqual( this.$badge.text(), '6', 'Now 6 unread notifications.' );
+	} );
+
 	QUnit.test( 'Tabs when there is overflow.', 2, function( assert ) {
 		var $overlay;
 		this.sandbox.stub( mw.echo.overlay, 'api', new this.ApiStub( 'with-new-messages', 50 ) );
@@ -227,11 +291,11 @@
 
 		// Test initial state
 		assert.strictEqual( $overlay.find( '.mw-echo-notifications' ).eq( 0 ).is( ':visible' ),
-			false, 'First tab starts hidden.' );
+			false, 'First tab (messages) starts hidden.' );
 		assert.strictEqual( $overlay.find( '.mw-echo-notifications' ).eq( 1 ).is( ':visible' ),
-			true, 'Second tab is visible.' );
+			true, 'Second tab (alerts) starts visibile.' );
 
-		// Switch to first tab
+		// Switch to second tab
 		$overlay.find( '.mw-echo-overlay-title li a' ).eq( 0 ).trigger( 'click' );
 
 		// check new tab visibility