diff --git a/services/web/app/views/layout.pug b/services/web/app/views/layout.pug
index 87a42c3f45..c8140d24b2 100644
--- a/services/web/app/views/layout.pug
+++ b/services/web/app/views/layout.pug
@@ -111,22 +111,6 @@ html(itemscope, itemtype='http://schema.org/Product')
 				data-badge="inline"
 			)
 
-		- if(typeof(suppressSystemMessages) == "undefined")
-			.system-messages(
-				ng-cloak
-				ng-controller="SystemMessagesController"
-			)
-				.system-message(
-					ng-repeat="message in messages"
-					ng-controller="SystemMessageController"
-					ng-hide="hidden"
-				)
-					a(href, ng-click="hide()").pull-right ×
-					.system-message-content(ng-bind-html="htmlContent")
-	
-			include translations/translation_message
-
-
 		- if(typeof(suppressNavbar) == "undefined")
 			include layout/navbar
 
diff --git a/services/web/app/views/project/list.pug b/services/web/app/views/project/list.pug
index 2728cb87d5..d2001c5483 100644
--- a/services/web/app/views/project/list.pug
+++ b/services/web/app/views/project/list.pug
@@ -57,8 +57,24 @@ block content
 							ng-click="showAll();"
 						) Show all
 	.content.content-alt.project-list-page(ng-controller="ProjectPageController")
-		.project-list-content
+		- if(typeof(suppressSystemMessages) == "undefined")
+			.system-messages(
+				ng-cloak
+				ng-controller="SystemMessagesController"
+			)
+				.system-message(
+					ng-repeat="message in messages"
+					ng-controller="SystemMessageController"
+					ng-hide="hidden"
+				)
+					button(ng-click="hide()").close.pull-right
+						span(aria-hidden="true") ×
+						span.sr-only #{translate("close")}
+					.system-message-content(ng-bind-html="htmlContent")
+			
+			include ../translations/translation_message
 
+		.project-list-content
 			.row.project-list-row(ng-cloak)
 				.project-list-container(ng-if="projects.length > 0")
 					.project-list-sidebar-wrapper.col-md-2.col-xs-3
diff --git a/services/web/public/stylesheets/app/base.less b/services/web/public/stylesheets/app/base.less
index 2f7b939fda..9fb7348612 100644
--- a/services/web/public/stylesheets/app/base.less
+++ b/services/web/public/stylesheets/app/base.less
@@ -1,8 +1,14 @@
 .system-message {
-    padding: (@line-height-computed / 4) (@line-height-computed / 2);
-    background-color: @state-warning-bg;
-    color: #333;
-    border-bottom: 1px solid @common-border-color;
+  padding: (@line-height-computed / 4) (@line-height-computed / 2);
+  background-color: @sys-msg-background;
+  color: @sys-msg-color;
+  border-bottom: @sys-msg-border;
+}
+
+.system-message .close when (@is-overleaf = true) {
+  color: #FFF;
+  opacity: 1;
+  text-shadow: none;
 }
 
 .clickable {
diff --git a/services/web/public/stylesheets/app/translations.less b/services/web/public/stylesheets/app/translations.less
index 7ae7532b6c..b217f88d06 100644
--- a/services/web/public/stylesheets/app/translations.less
+++ b/services/web/public/stylesheets/app/translations.less
@@ -1,14 +1,23 @@
-
 .translations-message {
-    padding: (@line-height-computed / 4) (@line-height-computed / 2);
-    background-color: @state-warning-bg;
-    color: #333;
-    border-bottom: 1px solid @common-border-color;
+    .system-message;
 	text-align:center;
-    
     img {
     	vertical-align: text-bottom;
         margin-bottom: -1px;
     }
+}
 
-}
\ No newline at end of file
+.translations-message when (@is-overleaf = true) {
+	.close {
+		color: #FFF;
+		opacity: 1;
+		text-shadow: none;
+	}
+	a {
+		color: #FFF;
+		&:hover,
+		&:focus {
+			color: #FFF;
+		}
+	}
+}
diff --git a/services/web/public/stylesheets/components/navbar.less b/services/web/public/stylesheets/components/navbar.less
index a25727412c..f88b7c651d 100755
--- a/services/web/public/stylesheets/components/navbar.less
+++ b/services/web/public/stylesheets/components/navbar.less
@@ -576,10 +576,3 @@
     padding: @navbar-default-padding-v 0;
   }
 }
-
-.system-messages {
-  padding-top: @header-height;
-  position: absolute;
-  width: 100%;
-  z-index: 1;
-}
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index d5a79947df..ff25eaf25c 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -959,4 +959,9 @@
 @tag-max-width      : 150px;
 @tag-bg-hover-color : darken(@label-default-bg, 10%);
 @tag-top-adjustment : -2px;
-@labels-font-size   : 75%;
\ No newline at end of file
+@labels-font-size   : 75%;
+
+// System messages
+@sys-msg-background : @state-warning-bg;
+@sys-msg-color      : #333;
+@sys-msg-border     : 1px solid @common-border-color;
\ No newline at end of file
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 45dd0232dd..b232367338 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -256,6 +256,11 @@
 @log-line-no-color              : #FFF;
 @log-hints-color                : @ol-blue-gray-4;
 
+// System messages
+@sys-msg-background             : @ol-blue;
+@sys-msg-color                  : #FFF;
+@sys-msg-border                 : solid 1px lighten(@ol-blue, 10%);
+
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.