diff --git a/api/js/login.js b/api/js/login.js
index b5bf04e0c8..82bc5d7f18 100644
--- a/api/js/login.js
+++ b/api/js/login.js
@@ -17,7 +17,9 @@ 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);
+		});
 		function do_social(_data)
 		{
 			var social = jQuery(document.createElement('div'))
diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css
index 64447194ce..fa54c5bbda 100644
--- a/pixelegg/css/mobile.css
+++ b/pixelegg/css/mobile.css
@@ -1675,14 +1675,56 @@ body {
   background-position: 50% 50%;
   background-size: cover;
 }
+#loginMainDiv .loginMessageBox {
+  width: 100%;
+  position: absolute;
+  z-index: 100;
+}
+#loginMainDiv .loginMessageBox #loginCdMessage:not(.error) {
+  display: none;
+}
+#loginMainDiv .loginMessageBox #loginCdMessage.error {
+  border: 3px solid #d2a453;
+  color: red;
+  text-align: center;
+  font-size: 12pt;
+  white-space: pre-wrap;
+  height: auto;
+  background: white;
+  opacity: 0.94;
+  margin-left: 20px;
+  border-radius: 5px;
+  margin-right: 20px;
+  border-top-left-radius: 0;
+  border-top: none;
+  border-top-right-radius: 0;
+  padding-bottom: 20px;
+}
+#loginMainDiv .loginMessageBox .closeBtn {
+  position: absolute;
+  right: 30px;
+  border: 2px solid #d2a453;
+  border-radius: 100%;
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  line-height: 20px;
+  font-size: 13pt;
+  font-weight: bold;
+  bottom: 10px;
+}
+#loginMainDiv .loginMessageBox .closeBtn:hover {
+  color: white;
+  background: black;
+  cursor: pointer;
+}
 #loginMainDiv #divAppIconBar {
   background: transparent;
   width: 100%;
   text-align: center;
-  height: 35%;
+  height: 45%;
   display: block;
-  max-height: 35%;
-  overflow-y: auto;
+  max-height: 45%;
 }
 #loginMainDiv #divAppIconBar #divLogo {
   position: relative;
@@ -1704,7 +1746,6 @@ body {
 }
 #loginMainDiv #loginScreenMessage:not([class $= "error"]) {
   margin: 1em;
-  color: #0a5ca5;
   font-size: 12pt;
 }
 #loginMainDiv #loginScreenMessage:not([class $= "error"]) img {
@@ -1733,18 +1774,6 @@ body {
   padding: 0;
   width: 280px;
 }
-#loginMainDiv div#centerBox #loginCdMessage:not(.error) {
-  display: none;
-}
-#loginMainDiv div#centerBox #loginCdMessage.error {
-  margin: 1em;
-  border: none;
-  background: transparent;
-  color: red;
-  text-align: center;
-  font-size: 12pt;
-  white-space: pre-wrap;
-}
 #loginMainDiv div#centerBox form {
   border-radius: 5px;
   opacity: 0.94;
diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css
index c88b23b3a1..598cd75da5 100644
--- a/pixelegg/css/pixelegg.css
+++ b/pixelegg/css/pixelegg.css
@@ -1664,14 +1664,56 @@ body {
   background-position: 50% 50%;
   background-size: cover;
 }
+#loginMainDiv .loginMessageBox {
+  width: 100%;
+  position: absolute;
+  z-index: 100;
+}
+#loginMainDiv .loginMessageBox #loginCdMessage:not(.error) {
+  display: none;
+}
+#loginMainDiv .loginMessageBox #loginCdMessage.error {
+  border: 3px solid #d2a453;
+  color: red;
+  text-align: center;
+  font-size: 12pt;
+  white-space: pre-wrap;
+  height: auto;
+  background: white;
+  opacity: 0.94;
+  margin-left: 20px;
+  border-radius: 5px;
+  margin-right: 20px;
+  border-top-left-radius: 0;
+  border-top: none;
+  border-top-right-radius: 0;
+  padding-bottom: 20px;
+}
+#loginMainDiv .loginMessageBox .closeBtn {
+  position: absolute;
+  right: 30px;
+  border: 2px solid #d2a453;
+  border-radius: 100%;
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  line-height: 20px;
+  font-size: 13pt;
+  font-weight: bold;
+  bottom: 10px;
+}
+#loginMainDiv .loginMessageBox .closeBtn:hover {
+  color: white;
+  background: black;
+  cursor: pointer;
+}
 #loginMainDiv #divAppIconBar {
   background: transparent;
   width: 100%;
   text-align: center;
-  height: 35%;
+  height: 45%;
   display: block;
-  max-height: 35%;
-  overflow-y: auto;
+  max-height: 45%;
 }
 #loginMainDiv #divAppIconBar #divLogo {
   position: relative;
@@ -1693,7 +1735,6 @@ body {
 }
 #loginMainDiv #loginScreenMessage:not([class $= "error"]) {
   margin: 1em;
-  color: #0a5ca5;
   font-size: 12pt;
 }
 #loginMainDiv #loginScreenMessage:not([class $= "error"]) img {
@@ -1722,18 +1763,6 @@ body {
   padding: 0;
   width: 280px;
 }
-#loginMainDiv div#centerBox #loginCdMessage:not(.error) {
-  display: none;
-}
-#loginMainDiv div#centerBox #loginCdMessage.error {
-  margin: 1em;
-  border: none;
-  background: transparent;
-  color: red;
-  text-align: center;
-  font-size: 12pt;
-  white-space: pre-wrap;
-}
 #loginMainDiv div#centerBox form {
   border-radius: 5px;
   opacity: 0.94;
diff --git a/pixelegg/less/layout_loginPage.less b/pixelegg/less/layout_loginPage.less
index d7eb5839b8..b4b40c7c21 100644
--- a/pixelegg/less/layout_loginPage.less
+++ b/pixelegg/less/layout_loginPage.less
@@ -43,15 +43,60 @@
 	background-repeat: no-repeat;
 	background-position: 50% 50%;
 	background-size: cover;
+
+	.loginMessageBox {
+		width: 100%;
+		position: absolute;
+		z-index: 100;
+		// Message
+		#loginCdMessage:not(.error) {
+			display: none;
+		}
+
+		#loginCdMessage.error {
+			border: 3px solid #d2a453;
+			color: red;
+			text-align: center;
+			font-size: 12pt;
+			white-space: pre-wrap;
+			height: auto;
+			background: white;
+			opacity: 0.94;
+			margin-left: 20px;
+			border-radius: 5px;
+			margin-right: 20px;
+			border-top-left-radius: 0;
+			border-top: none;
+			border-top-right-radius: 0;
+			padding-bottom: 20px;
+		}
+		.closeBtn {
+			position: absolute;
+			right: 30px;
+			border: 2px solid #d2a453;
+			border-radius: 100%;
+			width: 20px;
+			height: 20px;
+			text-align: center;
+			line-height: 20px;
+			font-size: 13pt;
+			font-weight: bold;
+			bottom: 10px;
+			&:hover {
+				color: white;
+				background:black;
+				cursor: pointer;
+			}
+		}
+	}
 	// Logo Leiste
 	#divAppIconBar {
 		background: transparent;
 		width: 100%;
 		text-align: center;
-		height: 35%;
+		height: 45%;
 		display: block;
-		max-height: 35%;
-		overflow-y: auto;
+		max-height: 45%;
 		#divLogo {
 			position: relative;
 		    padding-top: 2%;
@@ -78,7 +123,6 @@
 	// Meldung
 	#loginScreenMessage:not([class $= "error"]) {
 		margin: 1em;
-		color: #0a5ca5;
 		font-size: 12pt;
 		img {max-width: 100%;}
 	}
@@ -106,20 +150,7 @@
 		padding: 0;
 		width: 280px;
 
-		// Message
-		#loginCdMessage:not(.error) {
-			display: none;
-		}
 
-		#loginCdMessage.error {
-			margin: 1em;
-			border:none;
-			background: transparent;
-			color: red;
-			text-align: center;
-			font-size: 12pt;
-			white-space: pre-wrap;
-		}
 
 		// Formular
 		form {
diff --git a/pixelegg/login.tpl b/pixelegg/login.tpl
index ef16e5d352..d16aa2ead8 100644
--- a/pixelegg/login.tpl
+++ b/pixelegg/login.tpl
@@ -2,6 +2,10 @@
 
 
 <div id="loginMainDiv" style="background-image:url({background_file})">
+	<div class="loginMessageBox">
+		<div id="loginCdMessage" class="{cd_class}">{cd}</div>
+		<span class="closeBtn">X</span>
+	</div>
     <div id="divAppIconBar" style="position:relative;">
         <div id="divLogo">
 			<div class="login_logo_container">
@@ -24,11 +28,6 @@
                         <input type="hidden" name="account_type" value="u" />
                     </td>
                 </tr>
-				<tr>
-					<td>
-						<div id="loginCdMessage" class="{cd_class}">{cd}</div>
-					</td>
-				</tr>
                 <tr>
                     <td>
 						<span class="field_icons username"></span>
diff --git a/pixelegg/login_mobile.tpl b/pixelegg/login_mobile.tpl
index f0a0536a60..5ab3d300af 100644
--- a/pixelegg/login_mobile.tpl
+++ b/pixelegg/login_mobile.tpl
@@ -2,6 +2,10 @@
 
 
 <div id="loginMainDiv" style="background-image:url({background_file})">
+	<div class="loginMessageBox">
+		<div id="loginCdMessage" class="{cd_class}">{cd}</div>
+		<span class="closeBtn">X</span>
+	</div>
     <div id="divAppIconBar" style="position:relative;">
         <div id="divLogo">
 			<div class="login_logo_container">
@@ -28,11 +32,6 @@
                 </tr>
 				<tr>
 					<td>
-						<div id="loginCdMessage" class="{cd_class}">{cd}</div>
-					</td>
-				</tr>
-				<tr>
-                    <td>
 						<span class="field_icons username"></span>
 						<input name="login" tabindex="4" value="{login}" size="30" placeholder="{lang_username}" {autofocus_login}/>
 					</td>
@@ -86,6 +85,7 @@
                         <input tabindex="8" type="submit" value="  {lang_login}  " name="submitit" />
                     </td>
                 </tr>
+
                 <!-- BEGIN registration -->
                 <tr>
                     <td colspan="3" height="20" align="center" class="registration">
diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css
index 267597ed03..099651c348 100644
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@@ -1686,14 +1686,56 @@ body {
   background-position: 50% 50%;
   background-size: cover;
 }
+#loginMainDiv .loginMessageBox {
+  width: 100%;
+  position: absolute;
+  z-index: 100;
+}
+#loginMainDiv .loginMessageBox #loginCdMessage:not(.error) {
+  display: none;
+}
+#loginMainDiv .loginMessageBox #loginCdMessage.error {
+  border: 3px solid #d2a453;
+  color: red;
+  text-align: center;
+  font-size: 12pt;
+  white-space: pre-wrap;
+  height: auto;
+  background: white;
+  opacity: 0.94;
+  margin-left: 20px;
+  border-radius: 5px;
+  margin-right: 20px;
+  border-top-left-radius: 0;
+  border-top: none;
+  border-top-right-radius: 0;
+  padding-bottom: 20px;
+}
+#loginMainDiv .loginMessageBox .closeBtn {
+  position: absolute;
+  right: 30px;
+  border: 2px solid #d2a453;
+  border-radius: 100%;
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  line-height: 20px;
+  font-size: 13pt;
+  font-weight: bold;
+  bottom: 10px;
+}
+#loginMainDiv .loginMessageBox .closeBtn:hover {
+  color: white;
+  background: black;
+  cursor: pointer;
+}
 #loginMainDiv #divAppIconBar {
   background: transparent;
   width: 100%;
   text-align: center;
-  height: 35%;
+  height: 45%;
   display: block;
-  max-height: 35%;
-  overflow-y: auto;
+  max-height: 45%;
 }
 #loginMainDiv #divAppIconBar #divLogo {
   position: relative;
@@ -1715,7 +1757,6 @@ body {
 }
 #loginMainDiv #loginScreenMessage:not([class $= "error"]) {
   margin: 1em;
-  color: #0a5ca5;
   font-size: 12pt;
 }
 #loginMainDiv #loginScreenMessage:not([class $= "error"]) img {
@@ -1744,18 +1785,6 @@ body {
   padding: 0;
   width: 280px;
 }
-#loginMainDiv div#centerBox #loginCdMessage:not(.error) {
-  display: none;
-}
-#loginMainDiv div#centerBox #loginCdMessage.error {
-  margin: 1em;
-  border: none;
-  background: transparent;
-  color: red;
-  text-align: center;
-  font-size: 12pt;
-  white-space: pre-wrap;
-}
 #loginMainDiv div#centerBox form {
   border-radius: 5px;
   opacity: 0.94;
@@ -6948,9 +6977,52 @@ form[id^="tracker-"] .dialogHeadbar {
     background-color: #486F93;
     overflow: auto;
   }
+  div#loginMainDiv .loginMessageBox {
+    width: 100%;
+    position: absolute;
+    z-index: 100;
+  }
+  div#loginMainDiv .loginMessageBox #loginCdMessage:not(.error) {
+    display: none;
+  }
+  div#loginMainDiv .loginMessageBox #loginCdMessage.error {
+    border: 3px solid #d2a453;
+    color: red;
+    text-align: center;
+    font-size: 12pt;
+    white-space: pre-wrap;
+    height: auto;
+    background: white;
+    opacity: 0.94;
+    margin-left: 20px;
+    border-radius: 5px;
+    margin-right: 20px;
+    border-top-left-radius: 0;
+    border-top: none;
+    border-top-right-radius: 0;
+    padding-bottom: 20px;
+  }
+  div#loginMainDiv .loginMessageBox .closeBtn {
+    position: absolute;
+    right: 30px;
+    border: 2px solid #d2a453;
+    border-radius: 100%;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    line-height: 20px;
+    font-size: 13pt;
+    font-weight: bold;
+    bottom: 10px;
+  }
+  div#loginMainDiv .loginMessageBox .closeBtn:hover {
+    color: white;
+    background: black;
+    cursor: pointer;
+  }
   div#loginMainDiv #divAppIconBar {
-    max-height: 20%;
-    height: 20%;
+    max-height: 35%;
+    height: 35%;
   }
   div#loginMainDiv #divAppIconBar #divLogo .login_logo_container {
     width: 200px;
diff --git a/pixelegg/mobile/fw_mobile.less b/pixelegg/mobile/fw_mobile.less
index 424aaf565c..ffb3eddc7d 100644
--- a/pixelegg/mobile/fw_mobile.less
+++ b/pixelegg/mobile/fw_mobile.less
@@ -55,9 +55,54 @@
 	div#loginMainDiv{
 			.mob-bg-login;
 			overflow:auto;
+			.loginMessageBox {
+				width: 100%;
+				position: absolute;
+				z-index: 100;
+				// Message
+				#loginCdMessage:not(.error) {
+					display: none;
+				}
+
+				#loginCdMessage.error {
+					border: 3px solid #d2a453;
+					color: red;
+					text-align: center;
+					font-size: 12pt;
+					white-space: pre-wrap;
+					height: auto;
+					background: white;
+					opacity: 0.94;
+					margin-left: 20px;
+					border-radius: 5px;
+					margin-right: 20px;
+					border-top-left-radius: 0;
+					border-top: none;
+					border-top-right-radius: 0;
+					padding-bottom: 20px;
+				}
+				.closeBtn {
+					position: absolute;
+					right: 30px;
+					border: 2px solid #d2a453;
+					border-radius: 100%;
+					width: 20px;
+					height: 20px;
+					text-align: center;
+					line-height: 20px;
+					font-size: 13pt;
+					font-weight: bold;
+					bottom: 10px;
+					&:hover {
+						color: white;
+						background:black;
+						cursor: pointer;
+					}
+				}
+			}
 			#divAppIconBar {
-				max-height:20%;
-				height:20%;
+				max-height:35%;
+				height:35%;
 				#divLogo {
 					.login_logo_container {
 						width:200px;