diff --git a/api/js/login.js b/api/js/login.js
index b2f530fd90..e91cb8c308 100644
--- a/api/js/login.js
+++ b/api/js/login.js
@@ -24,8 +24,8 @@ egw_LAB.wait(function()
 
 		// lock the device orientation in portrait view
 		if (screen.orientation && typeof screen.orientation.lock == 'function') screen.orientation.lock('portrait');
-		jQuery('.closeBtn').click(function (){
-			setTimeout(function(){jQuery('.loginMessageBox').slideUp("slow");},100);
+		jQuery('.close').click(function (){
+			setTimeout(function(){jQuery('.egw_message_wrapper').slideUp("slow");},100);
 		});
 		function do_social(_data)
 		{
diff --git a/api/src/Framework/Login.php b/api/src/Framework/Login.php
index 96ad3e3a49..b4200ed522 100644
--- a/api/src/Framework/Login.php
+++ b/api/src/Framework/Login.php
@@ -115,7 +115,7 @@ class Login
 			}
 			$tmpl->set_var('cd', $cd_msg);
 			$tmpl->set_var('cd_class', isset($_GET['cd']) && $_GET['cd'] != 1 ||
-				!empty($GLOBALS['egw_info']['server']['login_message']) ? 'error' : '');
+				!empty($GLOBALS['egw_info']['server']['login_message']) ? 'error_message' : '');
 
 			$last_loginid = $_COOKIE['last_loginid'];
 			$last_domain  = $_COOKIE['last_domain'];
@@ -128,7 +128,7 @@ class Login
 			$tmpl->set_var('lang_new_password',lang('New password'));
 			$tmpl->set_var('lang_repeat_password',lang('Repeat password'));
 			$tmpl->set_var('cd', $change_passwd);
-			$tmpl->set_var('cd_class', 'error');
+			$tmpl->set_var('cd_class', 'error_message');
 			$last_loginid = $_POST['login'];
 			$last_domain  = $_POST['domain'];
 			$tmpl->set_var('passwd', $_POST['passwd']);
@@ -284,7 +284,7 @@ class Login
 		if (Api\Header\UserAgent::type() == 'msie' && Api\Header\UserAgent::version() < 12)
 		{
 			$tmpl->set_var('cd', lang('Browser %1 %2 is not recommended. You may experience issues and not working features. Please use the latest version of Chrome, Firefox or Edge. Thank You!',Api\Header\UserAgent::type(), Api\Header\UserAgent::version()));
-			$tmpl->set_var('cd_class', 'error');
+			$tmpl->set_var('cd_class', 'warning_message');
 		}
 		// load jquery for login screen too
 		Api\Framework::includeJS('jquery', 'jquery');
diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index c52603f7f3..7717b25a47 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -1936,18 +1936,17 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
 }
 #socialBox {
   display: inline-block;
-  width: 100%;
+  width: calc(100% - 24px);
 }
 #socialBox #socialMedia {
-  margin: 0 auto;
   width: 200px;
 }
 #socialBox #socialMedia a {
-  margin-left: 10px;
+  margin-right: 10px;
 }
 #socialBox #socialMedia a img {
   width: 24px;
-  filter: contrast(0.6);
+  filter: contrast(0.3);
 }
 /* ##################################################################################
  *       login page
@@ -1964,6 +1963,18 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   background-position: 50% 50%;
   background-size: cover;
 }
+#loginMainDiv .egw_message_wrapper {
+  box-shadow: 2px 1px 6px #bbbbbb;
+  -moz-box-shadow: 2px 1px 6px #bbbbbb;
+  -webkit-box-shadow: 2px 1px 6px #bbbbbb;
+  -khtml-box-shadow: 2px 1px 6px #bbbbbb;
+}
+#loginMainDiv .egw_message_wrapper #egw_message {
+  font-size: 9pt;
+}
+#loginMainDiv .egw_message_wrapper #egw_message:not(.error_message):not(.warning_message) {
+  display: none;
+}
 #loginMainDiv .loginMessageBox {
   width: 100%;
   position: absolute;
@@ -2006,7 +2017,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   background: transparent;
   width: 100%;
   text-align: center;
-  height: 40%;
+  height: 30%;
   display: block;
   max-height: 40%;
 }
@@ -2150,9 +2161,9 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   width: 280px;
 }
 #loginMainDiv div#centerBox .egw_logo {
-  width: 100%;
+  width: 24px;
   height: 24px;
-  margin: 15px auto;
+  float: right;
 }
 #loginMainDiv div#centerBox .egw_logo a.logo_footer {
   margin: auto;
@@ -2287,12 +2298,12 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
 }
 #loginMainDiv div#centerBox form table.divLoginbox input[type="submit"],
 #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
-  background-color: #0a5ca5;
+  background-color: #3b7aa4;
   color: #ffffff;
   font-size: 20px;
   padding-left: 0;
   width: 250px;
-  margin-top: 25px;
+  margin-top: 15px;
 }
 #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
   padding-left: 25px;
diff --git a/pixelegg/css/monochrome.css b/pixelegg/css/monochrome.css
index c8016edc61..9b20aca6c8 100644
--- a/pixelegg/css/monochrome.css
+++ b/pixelegg/css/monochrome.css
@@ -1916,18 +1916,17 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
 }
 #socialBox {
   display: inline-block;
-  width: 100%;
+  width: calc(100% - 24px);
 }
 #socialBox #socialMedia {
-  margin: 0 auto;
   width: 200px;
 }
 #socialBox #socialMedia a {
-  margin-left: 10px;
+  margin-right: 10px;
 }
 #socialBox #socialMedia a img {
   width: 24px;
-  filter: contrast(0.6);
+  filter: contrast(0.3);
 }
 /* ##################################################################################
  *       login page
@@ -1944,6 +1943,18 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   background-position: 50% 50%;
   background-size: cover;
 }
+#loginMainDiv .egw_message_wrapper {
+  box-shadow: 2px 1px 6px #bbbbbb;
+  -moz-box-shadow: 2px 1px 6px #bbbbbb;
+  -webkit-box-shadow: 2px 1px 6px #bbbbbb;
+  -khtml-box-shadow: 2px 1px 6px #bbbbbb;
+}
+#loginMainDiv .egw_message_wrapper #egw_message {
+  font-size: 9pt;
+}
+#loginMainDiv .egw_message_wrapper #egw_message:not(.error_message):not(.warning_message) {
+  display: none;
+}
 #loginMainDiv .loginMessageBox {
   width: 100%;
   position: absolute;
@@ -1986,7 +1997,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   background: transparent;
   width: 100%;
   text-align: center;
-  height: 40%;
+  height: 30%;
   display: block;
   max-height: 40%;
 }
@@ -2130,9 +2141,9 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   width: 280px;
 }
 #loginMainDiv div#centerBox .egw_logo {
-  width: 100%;
+  width: 24px;
   height: 24px;
-  margin: 15px auto;
+  float: right;
 }
 #loginMainDiv div#centerBox .egw_logo a.logo_footer {
   margin: auto;
@@ -2267,12 +2278,12 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
 }
 #loginMainDiv div#centerBox form table.divLoginbox input[type="submit"],
 #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
-  background-color: #0a5ca5;
+  background-color: #3b7aa4;
   color: #ffffff;
   font-size: 20px;
   padding-left: 0;
   width: 250px;
-  margin-top: 25px;
+  margin-top: 15px;
 }
 #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
   padding-left: 25px;
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index c4343eefb5..2680c39075 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -1926,18 +1926,17 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
 }
 #socialBox {
   display: inline-block;
-  width: 100%;
+  width: calc(100% - 24px);
 }
 #socialBox #socialMedia {
-  margin: 0 auto;
   width: 200px;
 }
 #socialBox #socialMedia a {
-  margin-left: 10px;
+  margin-right: 10px;
 }
 #socialBox #socialMedia a img {
   width: 24px;
-  filter: contrast(0.6);
+  filter: contrast(0.3);
 }
 /* ##################################################################################
  *       login page
@@ -1954,6 +1953,18 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   background-position: 50% 50%;
   background-size: cover;
 }
+#loginMainDiv .egw_message_wrapper {
+  box-shadow: 2px 1px 6px #bbbbbb;
+  -moz-box-shadow: 2px 1px 6px #bbbbbb;
+  -webkit-box-shadow: 2px 1px 6px #bbbbbb;
+  -khtml-box-shadow: 2px 1px 6px #bbbbbb;
+}
+#loginMainDiv .egw_message_wrapper #egw_message {
+  font-size: 9pt;
+}
+#loginMainDiv .egw_message_wrapper #egw_message:not(.error_message):not(.warning_message) {
+  display: none;
+}
 #loginMainDiv .loginMessageBox {
   width: 100%;
   position: absolute;
@@ -1996,7 +2007,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   background: transparent;
   width: 100%;
   text-align: center;
-  height: 40%;
+  height: 30%;
   display: block;
   max-height: 40%;
 }
@@ -2140,9 +2151,9 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   width: 280px;
 }
 #loginMainDiv div#centerBox .egw_logo {
-  width: 100%;
+  width: 24px;
   height: 24px;
-  margin: 15px auto;
+  float: right;
 }
 #loginMainDiv div#centerBox .egw_logo a.logo_footer {
   margin: auto;
@@ -2277,12 +2288,12 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
 }
 #loginMainDiv div#centerBox form table.divLoginbox input[type="submit"],
 #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
-  background-color: #0a5ca5;
+  background-color: #3b7aa4;
   color: #ffffff;
   font-size: 20px;
   padding-left: 0;
   width: 250px;
-  margin-top: 25px;
+  margin-top: 15px;
 }
 #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
   padding-left: 25px;
diff --git a/pixelegg/less/layout_loginPage.less b/pixelegg/less/layout_loginPage.less
index cdfc102309..cd8cb01b31 100644
--- a/pixelegg/less/layout_loginPage.less
+++ b/pixelegg/less/layout_loginPage.less
@@ -58,15 +58,14 @@ div#loginMainDiv.stockLoginBackground {
 
 #socialBox {
 	display: inline-block;
-	width: 100%;
+	width: ~"calc(100% - 24px)";
 	#socialMedia {
-		margin: 0 auto;
 		width: 200px;
 		a {
-			margin-left: 10px;
+			margin-right: 10px;
 			img {
 				width: 24px;
-				filter:contrast(0.6);
+				filter:contrast(0.3);
 			}
 		}
 	}
@@ -88,7 +87,18 @@ div#loginMainDiv.stockLoginBackground {
 	background-repeat: no-repeat;
 	background-position: 50% 50%;
 	background-size: cover;
-
+	.egw_message_wrapper {
+		box-shadow: 2px 1px 6px #bbbbbb;
+		-moz-box-shadow: 2px 1px 6px #bbbbbb;
+		-webkit-box-shadow: 2px 1px 6px #bbbbbb;
+		-khtml-box-shadow: 2px 1px 6px #bbbbbb;
+		#egw_message{
+			&:not(.error_message):not(.warning_message) {
+				display: none;
+			}
+			font-size: 9pt;
+		}
+    }
 	.loginMessageBox {
 		width: 100%;
 		position: absolute;
@@ -134,7 +144,7 @@ div#loginMainDiv.stockLoginBackground {
 		background: transparent;
 		width: 100%;
 		text-align: center;
-		height: 40%;
+		height: 30%;
 		display: block;
 		max-height: 40%;
 		#divLogo {
@@ -276,9 +286,9 @@ div#loginMainDiv.stockLoginBackground {
 		width: 280px;
 
 		.egw_logo {
-			width: 100%;
+			width: 24px;
 			height: 24px;
-			margin: 15px auto;
+			float: right;
 			a.logo_footer {
 				margin: auto;
 				width: 24px;
@@ -377,14 +387,14 @@ div#loginMainDiv.stockLoginBackground {
 					width: auto;
 				}
 				input[type="submit"], select.onChangeSubmit {
-					background-color: #0a5ca5;
+					background-color: #3b7aa4;
 					.color_0_gray;
 					.fontsize_xxl;
 					padding-left:0;
 					width: 250px;
 					&:hover{}
 					&:focus {}
-					margin-top: 25px;
+					margin-top: 15px;
 				}
 				select.onChangeSubmit {
 					padding-left: 25px;
diff --git a/pixelegg/login.tpl b/pixelegg/login.tpl
index c970f4e441..12e1c0df1d 100644
--- a/pixelegg/login.tpl
+++ b/pixelegg/login.tpl
@@ -2,9 +2,9 @@
 
 
 <div id="loginMainDiv" style="background-image:url({background_file})" class="{stock_background_class}">
-	<div class="loginMessageBox">
-		<div id="loginCdMessage" class="{cd_class}">{cd}
-		<span class="closeBtn">X</span></div>
+	<div class="egw_message_wrapper">
+		<div id="egw_message" class="{cd_class}">{cd}
+		<span class="close"></span></div>
 	</div>
     <div id="divAppIconBar" style="position:relative;">
         <div id="divLogo">
@@ -109,15 +109,15 @@
 	            <tr>
 		            <td>
 			            <div id="socialBox"></div>
+			            <div class="egw_logo">
+				            <a href="https://www.egroupware.org" class="logo_footer" target="_blank">
+					            <img src="api/templates/default/images/login_logo.png">
+				            </a>
+			            </div>
 		            </td>
 	            </tr>
             </table>
         </form>
-	    <div class="egw_logo">
-		    <a href="https://www.egroupware.org" class="logo_footer" target="_blank">
-			    <img src="api/templates/default/images/login_logo.png">
-		    </a>
-	    </div>
     </div>
 
 	<div id="login_footer">
diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css
index 348a58fdde..ade27d8ac6 100644
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@@ -1947,18 +1947,17 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
 }
 #socialBox {
   display: inline-block;
-  width: 100%;
+  width: calc(100% - 24px);
 }
 #socialBox #socialMedia {
-  margin: 0 auto;
   width: 200px;
 }
 #socialBox #socialMedia a {
-  margin-left: 10px;
+  margin-right: 10px;
 }
 #socialBox #socialMedia a img {
   width: 24px;
-  filter: contrast(0.6);
+  filter: contrast(0.3);
 }
 /* ##################################################################################
  *       login page
@@ -1975,6 +1974,18 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   background-position: 50% 50%;
   background-size: cover;
 }
+#loginMainDiv .egw_message_wrapper {
+  box-shadow: 2px 1px 6px #bbbbbb;
+  -moz-box-shadow: 2px 1px 6px #bbbbbb;
+  -webkit-box-shadow: 2px 1px 6px #bbbbbb;
+  -khtml-box-shadow: 2px 1px 6px #bbbbbb;
+}
+#loginMainDiv .egw_message_wrapper #egw_message {
+  font-size: 9pt;
+}
+#loginMainDiv .egw_message_wrapper #egw_message:not(.error_message):not(.warning_message) {
+  display: none;
+}
 #loginMainDiv .loginMessageBox {
   width: 100%;
   position: absolute;
@@ -2017,7 +2028,7 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   background: transparent;
   width: 100%;
   text-align: center;
-  height: 40%;
+  height: 30%;
   display: block;
   max-height: 40%;
 }
@@ -2161,9 +2172,9 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
   width: 280px;
 }
 #loginMainDiv div#centerBox .egw_logo {
-  width: 100%;
+  width: 24px;
   height: 24px;
-  margin: 15px auto;
+  float: right;
 }
 #loginMainDiv div#centerBox .egw_logo a.logo_footer {
   margin: auto;
@@ -2298,12 +2309,12 @@ div#loginMainDiv.stockLoginBackground div#centerBox form {
 }
 #loginMainDiv div#centerBox form table.divLoginbox input[type="submit"],
 #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
-  background-color: #0a5ca5;
+  background-color: #3b7aa4;
   color: #ffffff;
   font-size: 20px;
   padding-left: 0;
   width: 250px;
-  margin-top: 25px;
+  margin-top: 15px;
 }
 #loginMainDiv div#centerBox form table.divLoginbox select.onChangeSubmit {
   padding-left: 25px;