diff --git a/AfRApay.Web/Pages/EditUser.cshtml b/AfRApay.Web/Pages/EditUser.cshtml
index 743d31e..83c2049 100644
--- a/AfRApay.Web/Pages/EditUser.cshtml
+++ b/AfRApay.Web/Pages/EditUser.cshtml
@@ -48,18 +48,13 @@
 
 <br/>
 <h3 class="text-center">Cards</h3>
-@if (!cards.Any()) {
-	<div>
-		No linked cards found.
-	</div>
-}
-else {
+@{
 	<div class="row justify-content-center">
 		@foreach (var card in cards) {
-			<div class="fake-card-wrapper m-2">
+			<div class="fake-card-wrapper blur-true m-2">
 				<div class="fake-card">
 					<div class="hover-overlay"></div>
-					<button type="button" class="btn btn-danger btn-lg hover-button">Delete</button>
+					<a class="btn btn-danger btn-lg hover-button">Delete</a>
 					<div class="face-card front">
 						<div class="chip">
 							<div>
@@ -87,5 +82,35 @@ else {
 				</div>
 			</div>
 		}
+	<!-- Here we display a faded placholder card, with the add button at its center -->
+		<div class="fake-card-wrapper m-2">
+				<div class="fake-card">
+					<a class="btn btn-success btn-lg add-card-button" href="/LinkCard/@user.Id">Add Card</a>
+					<div class="face-card ghost-card  front">
+						<div class="chip">
+							<div>
+								<div>
+									<div>
+									</div>
+								</div>
+							</div>
+						</div>
+						<h2 class="card-number">PLACEHOLDER</h2>
+						<h3 class="card-holder">PLACEHOLDER</h3>
+						<span class="validity">
+							<span class="small">VALID<br>THRU</span>
+							<span>01/2038</span>
+						</span>
+
+						<div class="fake-card-logo-top">
+							<img src="/img/afra.png" class="fake-card-logo-inner" alt="">
+						</div>
+						<div class="fake-card-logo-bottom">
+							<img src="/img/matecard.png" class="fake-card-logo-inner" alt="">
+						</div>
+
+					</div>
+				</div>
+			</div>
 	</div>
 }
diff --git a/AfRApay.Web/Pages/Index.cshtml b/AfRApay.Web/Pages/Index.cshtml
index 173d203..db87af1 100644
--- a/AfRApay.Web/Pages/Index.cshtml
+++ b/AfRApay.Web/Pages/Index.cshtml
@@ -67,10 +67,9 @@
 				<td> <!-- Displayed when in big layout -->
 					<div class="d-none d-md-flex btn-group btn-group-lg" role="group">
 						<!-- Make sure these buttons match the small/mobile layout ones below -->
-						<a class="btn px-auto btn-danger" href="/UpdateBalance/@user.Id/-1.50">-1.50&euro;</a>
-						<a class="btn px-auto btn-success" href="/UpdateBalance/@user.Id/5">+5&euro;</a>
-						<a class="btn px-auto btn-success" href="/UpdateBalance/@user.Id/10">+10&euro;</a>
-						<a class="btn px-2 btn-secondary text-nowrap" href="/LinkCard/@user.Id">Link card</a>
+						<a class="btn px-3 btn-danger" href="/UpdateBalance/@user.Id/-1.50">-1.50&euro;</a>
+						<a class="btn px-3 btn-success" href="/UpdateBalance/@user.Id/5">+5&euro;</a>
+						<a class="btn px-3 btn-success" href="/UpdateBalance/@user.Id/10">+10&euro;</a>
 						<a class="btn px-2 btn-primary" href="/EditUser/@user.Id">Edit</a>
 					</div>
 					<!-- Displayed when in compact/phone layout -->
@@ -84,7 +83,6 @@
 								<a class="btn btn-lg btn-danger" href="/UpdateBalance/@user.Id/-1.50">-1.50&euro;</a>
 								<a class="btn btn-lg btn-success" href="/UpdateBalance/@user.Id/5">+5&euro;</a>
 								<a class="btn btn-lg btn-success" href="/UpdateBalance/@user.Id/10">+10&euro;</a>
-								<a class="btn btn-lg btn-secondary" href="/LinkCard/@user.Id">Link card</a>
 								<a class="btn btn-lg btn-primary" href="/EditUser/@user.Id">Edit</a>
 							</div>
 						</div>
diff --git a/AfRApay.Web/wwwroot/css/site.css b/AfRApay.Web/wwwroot/css/site.css
index 3c89c70..92c4761 100644
--- a/AfRApay.Web/wwwroot/css/site.css
+++ b/AfRApay.Web/wwwroot/css/site.css
@@ -258,6 +258,17 @@ button.accept-policy {
   margin-bottom: 60px;
 }
 
+.ghost-card {
+  filter:grayscale(100%) blur(4px);
+}
+.add-card-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  filter: grayscale(0%)
+}
 .hover-button {
   position: absolute;
   top: 50%;
@@ -268,20 +279,13 @@ button.accept-policy {
   transition: .5s ease;
   z-index: 2;
 }
-.hover-overlay {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  opacity: 0;
-  border-radius: 15px;
-  transition: .5s ease;
-  background-color: #808080;
-  z-index: 1;
-}
+
 .fake-card-wrapper:hover .hover-button {
   opacity: 1;
   visibility: visible;
 }
-.fake-card-wrapper:hover .hover-overlay {
-  opacity: 0.75;
+
+.fake-card-wrapper:hover.blur-true .face-card{
+  transition: 0.3s ease;
+  filter:blur(4px) grayscale(100%);
 }
\ No newline at end of file