diff --git a/modules/overlay/ext.echo.overlay.init.js b/modules/overlay/ext.echo.overlay.init.js
index 49737c82c..f2bd3a490 100644
--- a/modules/overlay/ext.echo.overlay.init.js
+++ b/modules/overlay/ext.echo.overlay.init.js
@@ -28,11 +28,14 @@
 				function ( $overlay ) {
 					$overlay
 						.hide()
-						.appendTo( $( '#pt-notifications' ) );
-
-					// Create the pokey (aka chevron)
-					$overlay.before( $( '<div>' ).addClass( 'mw-echo-overlay-pokey' ) );
+						.appendTo( document.body );
 
+					function positionOverlay() {
+						var offset = $( '#pt-notifications' ).offset();
+						$overlay.css( { left: offset.left - 200 } );
+					}
+					positionOverlay();
+					$( window ).on( 'resize', positionOverlay );
 					mw.hook( 'ext.echo.overlay.beforeShowingOverlay' ).fire( $overlay );
 
 					// Show the notifications overlay
@@ -55,7 +58,7 @@
 		} );
 
 		$( 'body' ).click( function ( e ) {
-			if ( ! $( e.target ).is( '.mw-echo-overlay, .mw-echo-overlay *, .mw-echo-overlay-pokey, #pt-notifications a' ) ) {
+			if ( ! $( e.target ).is( '.mw-echo-overlay, .mw-echo-overlay *, #pt-notifications a' ) ) {
 				mw.echo.overlay.removeOverlay();
 			}
 		} );
diff --git a/modules/overlay/ext.echo.overlay.js b/modules/overlay/ext.echo.overlay.js
index 628f29f31..e27d3c9df 100644
--- a/modules/overlay/ext.echo.overlay.js
+++ b/modules/overlay/ext.echo.overlay.js
@@ -61,7 +61,7 @@
 					// If id is given mark that as read otherwise use all unread messages
 					data.list = id;
 				} else {
-					data.all = 1;
+					data.sections = this.name;
 				}
 
 				return this.api.post( mw.echo.desktop.appendUseLang( data ) ).then( function ( result ) {
@@ -402,7 +402,7 @@
 			} );
 		},
 		removeOverlay: function () {
-			$( '.mw-echo-overlay, .mw-echo-overlay-pokey' ).fadeOut( 'fast',
+			$( '.mw-echo-overlay' ).fadeOut( 'fast',
 				function () {
 					$( this ).remove();
 				}
diff --git a/modules/overlay/ext.echo.overlay.less b/modules/overlay/ext.echo.overlay.less
index ef96d1c44..0c82f5cb8 100644
--- a/modules/overlay/ext.echo.overlay.less
+++ b/modules/overlay/ext.echo.overlay.less
@@ -1,7 +1,14 @@
+.mw-echo-title {
+	a {
+		font-weight: bold;
+	}
+}
+
+@offset: 200px;
+@chevronHeight: 11px;
 .mw-echo-overlay {
 	position: absolute;
-	top: 30px;
-	left: -200px;
+	top: 30px + @chevronHeight;
 	border: 1px solid silver;
 	background-color: #fff;
 	width: 450px;
@@ -10,30 +17,20 @@
 	color: #6D6D6D;
 	z-index: 100;
 	box-shadow: 0 3px 8px rgba(50, 50, 50, 0.35);
-}
-.mw-echo-overlay-pokey {
-	/* @embed */
-	background-image: url('PokeyNorth.png');
-	background-repeat: no-repeat;
-	width: 21px;
-	height: 11px;
-	position: absolute;
-	z-index: 101;
-	top: 20px;
-	left: -5px;
-}
 
-
-#p-personal {
-	.mw-echo-overlay-title ul,
-	.mw-echo-notifications ul {
-		// override #p-personal ul in core
-		padding: 0;
-	}
-	// override #p-personal ul in core
-	li.mw-echo-notification {
-		margin: 0;
-		float: none;
+	// IE8
+	&:before,
+	&::before {
+		content: '';
+		background-image: url('PokeyNorth.png');
+		background-repeat: no-repeat;
+		width: 21px;
+		height: @chevronHeight;
+		position: absolute;
+		z-index: 101;
+		top: -@chevronHeight;
+		// subtract half the width from the offset and then add the left box shadow
+		left: @offset - 10px + 3px;
 	}
 }
 
@@ -71,6 +68,8 @@
 	.mw-echo-notifications,
 	ul {
 		overflow: auto;
+		padding: 0;
+		margin: 0;
 	}
 
 	li.mw-echo-notification {
@@ -127,7 +126,6 @@
 }
 
 .mw-echo-overlay-title {
-	/*border-bottom: 1px solid #A7D7F9;*/
 	font-size: 13px;
 	line-height: 15px;
 	padding: 15px 15px 15px 28px;
@@ -137,22 +135,20 @@
 		line-height: 15px;
 		font: inherit;
 	}
-}
 
-/* override #p-personal li*/
-#p-personal .mw-echo-overlay-title li {
-	font-size: 1em;
-	margin-left: 0;
-}
+	li {
+		display: inline;
+		font-size: 1em;
+		margin-left: 0;
 
-.mw-echo-overlay-title li {
-	&::after {
-		content: " · ";
-		padding: 0 .25em;
-	}
-	&:last-child {
 		&::after {
-			content: '';
+			content: " · ";
+			padding: 0 .25em;
+		}
+		&:last-child {
+			&::after {
+				content: '';
+			}
 		}
 	}
 }
@@ -227,10 +223,6 @@
 	}
 }
 
-#pt-notifications {
-	position: relative;
-}
-
 .mw-echo-overlay-none {
 	font-size: 13px;
 	border-bottom: 1px solid #DDDDDD;
diff --git a/modules/overlay/ext.echo.overlay.modern.css b/modules/overlay/ext.echo.overlay.modern.css
index f86bd29af..005e6d9e9 100644
--- a/modules/overlay/ext.echo.overlay.modern.css
+++ b/modules/overlay/ext.echo.overlay.modern.css
@@ -9,9 +9,6 @@ body #p-personal {
 	left: -20px;
 	top: 31px;
 }
-#p-personal .mw-echo-overlay-pokey {
-	left: -6px;
-}
 #p-personal #pt-notifications ul,
 #p-personal #pt-notifications li {
 	text-transform: none;
diff --git a/tests/browser/features/messages.feature b/tests/browser/features/messages.feature
new file mode 100644
index 000000000..7df0f1c64
--- /dev/null
+++ b/tests/browser/features/messages.feature
@@ -0,0 +1,15 @@
+@chrome @en.wikipedia.beta.wmflabs.org @firefox @login
+Feature: Notification types
+
+  # Scenarios which trigger notifications
+  Scenario: Mark all as unread
+    Given I am logged in with no notifications
+      And I have a Flow message
+      And another user mentions me on the wiki
+      And I am on the "Selenium Echo flyout test page" page
+      And I click the notification flyout button
+      And I see the notification flyout
+      And I have unread alert notifications
+    When I click the mark all as read button
+      And I am on the "Selenium Echo flyout test page" page
+    Then I have new notifications
diff --git a/tests/browser/features/step_definitions/common_steps.rb b/tests/browser/features/step_definitions/common_steps.rb
index 744899737..657b13160 100644
--- a/tests/browser/features/step_definitions/common_steps.rb
+++ b/tests/browser/features/step_definitions/common_steps.rb
@@ -2,6 +2,10 @@ def get_session_username
   return "#{ENV["MEDIAWIKI_USER"]}_#{@browser.name}"
 end
 
+def get_session_username_b()
+  return "EchoUser"
+end
+
 # For use in Firefox browser tests only
 Given /^I am using user agent "(.+)"$/ do |user_agent|
   @user_agent = user_agent
diff --git a/tests/browser/features/step_definitions/messages_steps.rb b/tests/browser/features/step_definitions/messages_steps.rb
new file mode 100644
index 000000000..a79a1d605
--- /dev/null
+++ b/tests/browser/features/step_definitions/messages_steps.rb
@@ -0,0 +1,12 @@
+Given(/^I have a Flow message$/) do
+  client = on(APIPage).client
+  username = get_session_username_b()
+  step 'the user "' + username + '" exists'
+  client.log_in(username, ENV["MEDIAWIKI_PASSWORD"])
+  client.action( 'flow', token_type: 'edit', submodule: 'new-topic', page: 'Talk:Flow QA',
+    nttopic:'Mention #1', ntcontent: '[[User:' + get_session_username() + ']] I wanted to say hello.' )
+end
+
+When(/^I click the mark all as read button$/) do
+  on(ArticlePage).mark_as_read_element.when_present.click
+end
diff --git a/tests/browser/features/step_definitions/notifications_steps.rb b/tests/browser/features/step_definitions/notifications_steps.rb
index 99340932a..02ce5a316 100644
--- a/tests/browser/features/step_definitions/notifications_steps.rb
+++ b/tests/browser/features/step_definitions/notifications_steps.rb
@@ -5,7 +5,7 @@ def make_page_with_user( title, text, username )
 end
 
 def make_page_with_user_b( title, text )
-  username = "EchoUser"
+  username = get_session_username_b()
   step 'the user "' + username + '" exists'
   make_page_with_user( title, text, username )
 end
@@ -38,26 +38,17 @@ Given(/^another user mentions me on the wiki$/) do
 end
 
 Given(/^I am logged in with no notifications$/) do
+  # Mark all messages as read
+  client = on(APIPage).client
+  username = get_session_username()
+  step 'the user "' + username + '" exists'
+  client.log_in(username, ENV["MEDIAWIKI_PASSWORD"])
+  client.action( 'echomarkread', token_type: 'edit', all: '1' )
+
   step 'I am logged in my non-shared account'
-  # wait for JavaScript to have fully loaded
-  sleep 5
-  on(ArticlePage).flyout_link_element.click
-  # wait for the API call that marks these as read and for UI to refresh
-  sleep 5
   on(ArticlePage).flyout_link_element.class_name.should_not match 'mw-echo-unread-notifications'
 end
 
 Then(/^I have new notifications$/) do
   on(ArticlePage).flyout_link_element.when_present.class_name.should match 'mw-echo-unread-notifications'
 end
-
-Then(/^I have no new notifications$/) do
-  on(ArticlePage).flyout_link_element.when_present.class_name.should_not match 'mw-echo-unread-notifications'
-end
-
-Then(/^another user has linked to a page I created from another page$/) do
-  title = 'Selenium Echo link test ' + @random_string
-  make_page_with_user_a(title, "Selenium test page. Feel free to delete me.")
-  title2 = title + ' ' + @random_string
-  make_page_with_user_b(title2, "I am linking to [[" + title + "]].")
-end
diff --git a/tests/browser/features/support/pages/article_page.rb b/tests/browser/features/support/pages/article_page.rb
index 7deb09213..75891cdd3 100644
--- a/tests/browser/features/support/pages/article_page.rb
+++ b/tests/browser/features/support/pages/article_page.rb
@@ -5,4 +5,8 @@ class ArticlePage
   li("flyout_link_container", css: "#pt-notifications")
   a("flyout_link", css: "#pt-notifications a")
   div("flyout", css: ".mw-echo-overlay")
+
+  # Overlay header
+  a("alert_tab_link", css: '.mw-echo-overlay-title ul li a', index: 1)
+  button("mark_as_read", css: '.mw-echo-notifications > button')
 end