diff --git a/dmp-frontend/src/app/ui/auth/login/img/login_bg.png b/dmp-frontend/src/app/ui/auth/login/img/login_bg.png
new file mode 100644
index 000000000..e87ad10a0
Binary files /dev/null and b/dmp-frontend/src/app/ui/auth/login/img/login_bg.png differ
diff --git a/dmp-frontend/src/app/ui/auth/login/img/open-dmp.png b/dmp-frontend/src/app/ui/auth/login/img/open-dmp.png
new file mode 100644
index 000000000..d7a2f8f53
Binary files /dev/null and b/dmp-frontend/src/app/ui/auth/login/img/open-dmp.png differ
diff --git a/dmp-frontend/src/app/ui/auth/login/login.component.html b/dmp-frontend/src/app/ui/auth/login/login.component.html
index cc8dca4a2..8150c12b6 100644
--- a/dmp-frontend/src/app/ui/auth/login/login.component.html
+++ b/dmp-frontend/src/app/ui/auth/login/login.component.html
@@ -1,28 +1,30 @@
-<div class="row">
-	<div class="col"></div>
-	<div class="card col-auto">
+<div class="login-screen login-bg d-flex flex-column align-items-center justify-content-center">
+	<div class="login-logo"></div>
+	<div class="card login-card">
 		<div class="card-header">
-			<h4>Login</h4>
-			<div class="social-btns">
-				<button *ngIf="hasGoogleOauth()" mat-icon-button id="googleSignInButton">
+			<div class="social-btns d-flex">
+				<button *ngIf="hasGoogleOauth()" mat-icon-button id="googleSignInButton" class="login-social-button">
 					<i class="fa fa-google"></i>
 				</button>
-				<button *ngIf="hasLinkedInOauth()" mat-icon-button>
+				<button *ngIf="hasLinkedInOauth()" mat-icon-button class="login-social-button">
 					<i class="fa fa-linkedin" (click)="linkedInLogin()"></i>
 				</button>
-				<button *ngIf="hasFacebookOauth()" mat-icon-button (click)="facebookLogin()">
+				<button *ngIf="hasFacebookOauth()" mat-icon-button (click)="facebookLogin()" class="login-social-button">
 					<i class="fa fa-facebook-square"></i>
 				</button>
-				<button *ngIf="hasTwitterOauth()" mat-icon-button (click)="twitterLogin()">
+				<button *ngIf="hasTwitterOauth()" mat-icon-button (click)="twitterLogin()" class="login-social-button">
 					<i class="fa fa-twitter"></i>
 				</button>
+				<button *ngIf="hasB2AccessOauth()" class="b2access-button" mat-icon-button (click)="b2AccessLogin()" class="login-social-button">
+					<span class="iconmedium"></span>
+					<span></span>
+				</button>
 			</div>
-			<button *ngIf="hasB2AccessOauth()" class="b2access-button" mat-icon-button (click)="b2AccessLogin()">
-				<span class="iconmedium"></span>
-				<span></span>
-			</button>
 		</div>
-		<p>You dont need to have a registered account for OpenDMP</p>
+		<div class="card-footer">
+			<h4 class="text-uppercase"><strong>Login</strong></h4>
+			<br />
+			<h5>You dont need to have a registered account for OpenDMP</h5>
+		</div>
 	</div>
-	<div class="col"></div>
 </div>
diff --git a/dmp-frontend/src/app/ui/auth/login/login.component.scss b/dmp-frontend/src/app/ui/auth/login/login.component.scss
index 3695e9d37..1a3eab545 100644
--- a/dmp-frontend/src/app/ui/auth/login/login.component.scss
+++ b/dmp-frontend/src/app/ui/auth/login/login.component.scss
@@ -1,167 +1,199 @@
+.login-screen {
+	margin-top: 70px;
+	height: calc(100vh - 10px);
+}
+
+.login-card {
+	width: auto;
+	margin-top: 0;
+}
+
 .container {
-  padding: 15px 30px;
+	padding: 15px 30px;
 }
 
 .card {
-  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
-  border-radius: 6px;
-  color: rgba(0, 0, 0, 0.87);
-  background: #fff;
+	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
+	border-radius: 6px;
+	color: rgba(0, 0, 0, 0.87);
+	background: #fff;
 }
 
 .card-raised {
-  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
+	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
 }
 
 .page-title {
-  margin-top: 40px;
+	margin-top: 40px;
 }
 
 @media (min-width: 1200px) {
-  .container {
-    width: 100%;
-  }
+	.container {
+		width: 100%;
+	}
 }
 
 @media (min-width: 992px) {
-  .container {
-    width: 100%;
-  }
+	.container {
+		width: 100%;
+	}
 }
 
 @media (min-width: 768px) {
-  .container {
-    width: 100%;
-  }
+	.container {
+		width: 100%;
+	}
 }
 
 .container {
-  height: 100%;
-  position: relative;
-  z-index: 1;
+	height: 100%;
+	position: relative;
+	z-index: 1;
 }
 
 .card {
-  position: relative;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 90px;
-  top: -90px;
-  -webkit-animation-name: card;
-  -moz-animation-name: card;
-  -o-animation-name: card;
-  animation-name: card;
-  -webkit-animation-duration: 600ms;
-  -moz-animation-duration: 600ms;
-  -o-animation-duration: 600ms;
-  animation-duration: 600ms;
-  -webkit-animation-fill-mode: forwards;
-  -moz-animation-fill-mode: forwards;
-  -o-animation-fill-mode: forwards;
-  animation-fill-mode: forwards;
+	position: relative;
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-top: 50px;
+	top: -50px;
+	-webkit-animation-name: card;
+	-moz-animation-name: card;
+	-o-animation-name: card;
+	animation-name: card;
+	-webkit-animation-duration: 600ms;
+	-moz-animation-duration: 600ms;
+	-o-animation-duration: 600ms;
+	animation-duration: 600ms;
+	-webkit-animation-fill-mode: forwards;
+	-moz-animation-fill-mode: forwards;
+	-o-animation-fill-mode: forwards;
+	animation-fill-mode: forwards;
 }
 
 @-webkit-keyframes card {
-  from {
-    top: -40px;
-  }
-  to {
-    top: 0;
-  }
+	from {
+		top: -40px;
+	}
+
+	to {
+		top: 0;
+	}
 }
 
 @keyframes card {
-  from {
-    top: -40px;
-  }
-  to {
-    top: 0;
-  }
+	from {
+		top: -40px;
+	}
+
+	to {
+		top: 0;
+	}
 }
 
 .card-header {
-  position: relative;
-  overflow: hidden;
-  top: -40px;
-  width: 100%;
-  padding: 25px;
-  border-radius: 3px;
-  background: linear-gradient(60deg, #ec407a, #d81b60);
-  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+	position: relative;
+	overflow: hidden;
+	top: -40px;
+	width: 100%;
+	padding: 25px;
+	border-radius: 3px;
+	background: rgb(0, 112, 192);
+	// box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }
 
 .card-header h4 {
-  font-weight: 400;
-  color: #fff;
-  margin-bottom: 25px;
-  margin-top: 5px;
+	font-weight: 400;
+	color: #fff;
+	margin-bottom: 25px;
+	margin-top: 5px;
 }
 
 .social-btns i {
-  font-size: 21px;
-  color: #fff;
-}
-
-.social-btns button {
-  margin: 0 8px;
+	font-size: 2.5em;
+	padding: 1em;
+	color: #fff;
 }
 
 .tip {
-  margin-top: -20px;
+	margin-top: -20px;
 }
 
 .form-row,
 .card-form,
 .mat-form-field {
-  width: 100%;
+	width: 100%;
 }
 
 .card-form {
-  padding: 5px;
+	padding: 5px;
 }
 
 .form-row {
-  position: relative;
-  display: flex;
-  align-items: center;
-  margin-top: 13px;
+	position: relative;
+	display: flex;
+	align-items: center;
+	margin-top: 13px;
 }
 
 .form-row i {
-  position: relative;
-  top: -5px;
-  margin-right: 15px;
-  color: #555;
+	position: relative;
+	top: -5px;
+	margin-right: 15px;
+	color: #555;
 }
 
 .card-footer {
-  margin: 10px;
+  padding: 0;
+  border-radius: 0;
+  align-items: start;
+  flex-direction: column;
 }
 
 .card-footer button {
-  color: #e91e63;
+	color: #e91e63;
 }
 
 .btn span.icon {
-  background: url(img/b2access_small.png) no-repeat;
-  float: left;
-  width: 45px;
-  height: 25px;
+	background: url(img/b2access_small.png) no-repeat;
+	float: left;
+	width: 45px;
+	height: 25px;
 }
 
 span.iconmedium {
-  background: url(img/b2access_medium.png) no-repeat;
-  float: left;
-  width: 100px;
-  height: 56px;
+	background: url(img/b2access_medium.png) no-repeat;
+	float: left;
+	width: 100px;
+	height: 56px;
+	margin-left: 2em;
+	margin-right: 2em;
 }
 
-.b2access-button{
-  margin-top: 10px;
-  width: fit-content;
+.b2access-button {
+	margin-top: 10px;
+	width: fit-content;
+}
+
+.login-logo {
+	background: url(img/open-dmp.png) no-repeat;
+	width: 370px;
+	height: 300px;
+	background-size: cover;
+	margin-top: -10em;
+}
+
+.login-bg {
+	background: url(img/login_bg.png) no-repeat;
+	background-size: cover;
+}
+
+.login-social-button {
+	width: auto;
+	height: auto;
 }