diff --git a/AfRApay.Web/Pages/EditUser.cshtml b/AfRApay.Web/Pages/EditUser.cshtml
index 5666f88..e26b0dd 100644
--- a/AfRApay.Web/Pages/EditUser.cshtml
+++ b/AfRApay.Web/Pages/EditUser.cshtml
@@ -36,17 +36,34 @@
 </div>
 
 <form id="change_user" method="POST">
-	<h3>Account</h3>
+	<div class="d-flex flex-row align-items-center my-3">
+		<h3>Account</h3>
+		<button type="button" class="btn btn-lg btn-danger mx-3" name="action" data-bs-toggle="modal" data-bs-target="#deleteConfirmModal">Delete</button> <!-- Calls the below modal dialog to confirm user deletetion -->
+	</div>
 	<div class="mb-3">
 		<label for="nickname" class="form-label">Nickname</label>
 		<input type="text" maxlength="10" class="form-control" id="nickname" name="nickname" value="@user.Nickname" required>
 	</div>
-	<div class="mb-3">
+	<div class="my-3">
 		<label for="balance" class="form-label">Balance (&euro;)</label>
 		<input type="number" max="999.50" min="-99.50" step=".50" class="form-control" id="balance" name="balance" value="@formattedBalance" required>
 	</div>
-	<button type="submit" class="btn btn-lg btn-primary" name="action" value="save">Save</button>
-	<button type="button" class="btn btn-lg btn-danger" name="action" data-bs-toggle="modal" data-bs-target="#deleteConfirmModal">Delete</button> <!-- Calls the below modal dialog to confirm user deletetion -->
+
+	<div class="d-flex justify-content-evenly mx-1">
+		<button type="submit" class="btn btn-lg m-1 btn-primary" name="action" value="save">Save</button>
+		<div class="d-flex justify-content-center flex-wrap" role="group">
+			<button type="submit" class="btn transact-btn btn-danger" name="amount" value="-150">-1.50&euro;</button>
+			<button type="submit" class="btn transact-btn btn-danger" name="amount" value="-200">-2&euro;</button>
+			<button type="submit" class="btn transact-btn btn-danger" name="amount" value="-500">-5&euro;</button>
+			<button type="submit" class="btn transact-btn btn-danger" name="amount" value="-1000">-10&euro;</button>
+		</div>
+		<div class="d-flex justify-content-center flex-wrap" role="group">
+			<button type="submit" class="btn transact-btn btn-success" name="amount" value="150">+1.50&euro;</button>
+			<button type="submit" class="btn transact-btn btn-success" name="amount" value="200">+2&euro;</button>
+			<button type="submit" class="btn transact-btn btn-success" name="amount" value="500">+5&euro;</button>
+			<button type="submit" class="btn transact-btn btn-success" name="amount" value="1000">+10&euro;</button>
+		</div>
+	</div>
 </form>
 
 <!-- Modal dialog to confirm user deletion -->
diff --git a/AfRApay.Web/Pages/EditUser.cshtml.cs b/AfRApay.Web/Pages/EditUser.cshtml.cs
index 4de196f..70bb285 100644
--- a/AfRApay.Web/Pages/EditUser.cshtml.cs
+++ b/AfRApay.Web/Pages/EditUser.cshtml.cs
@@ -77,6 +77,21 @@ public class EditUserModel : PageModel {
 			await db.SaveChangesAsync();
 		}
 
+		if (Request.Form.ContainsKey("amount")) {
+			var amount = int.Parse(Request.Form["amount"].ToString());
+			switch (user.Balance + amount) {
+				case < -9999:
+					Response.Redirect("/ErrorRedirect?message=" + WebUtility.UrlEncode("Balance too low!"));
+					return;
+				case > 99999:
+					Response.Redirect("/ErrorRedirect?message=" + WebUtility.UrlEncode("Balance too high!"));
+					return;
+			}
+
+			user.Balance += amount;
+			await db.SaveChangesAsync();
+		}
+
 		Response.Redirect($"/#{user.Nickname}");
 	}
 
diff --git a/AfRApay.Web/Pages/Index.cshtml b/AfRApay.Web/Pages/Index.cshtml
index fb81ae2..0d0150c 100644
--- a/AfRApay.Web/Pages/Index.cshtml
+++ b/AfRApay.Web/Pages/Index.cshtml
@@ -10,46 +10,21 @@
 	<link rel="stylesheet" href="~/lib/datatables/dataTables.bootstrap5.min.css"/>
 }
 
-@section Scripts {
-	<script src="~/lib/datatables/jquery.dataTables.min.js"></script>
-	<script src="~/lib/datatables/dataTables.bootstrap5.min.js"></script>
-	<script>
-	$(document).ready(function () {
-		let search = "";
-		if (window.location.hash.startsWith("#")) {
-			if (window.location.hash === "#add_user")
-				$("#add_user_modal").modal('show');
-			else
-				search = decodeURI(window.location.hash.substring(1));
-		}
-		
-		$('#add_user_modal').on('shown.bs.modal', function() {
-			$(this).find('input:first').focus();
-		});
-
-		$('#users').DataTable({
-			// Setting the DOM for dataTables. Using default with adjustments for margin. See here for syntax details https://datatables.net/reference/option/dom
-			dom: "<'row'<'col-sm-12 col-md-6 my-1'l><'col-sm-12 col-md-6 my-1'f>>" +
-				 "<'row'<'col-sm-12'tr>>" +
-				 "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
-			lengthMenu: [10, 25, 50, 100, -1],
-			pageLength: 25,
-			search: {
-				search: search,
-			}
-		});
-	});
-	</script>
+@section HeaderAddUser {
+	<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add_user_modal">
+		Add User
+	</button>
+}
+@section HeaderAddSearch {
+	<input
+		type="search"
+		class="form-control me-2 align-self-center"
+		placeholder="Search"
+		oninput="liveSearch()"
+		id="searchbox"
+		style="width: 40vw;"
+	>
 }
-
-<div class="text-center">
-	<h1 class="display-5">
-		Users
-		<button type="button" class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#add_user_modal">
-  			Add
-  		</button>
-	</h1>
-</div>
 
 <!-- Modal dialog for adding a user -->
 <div class="modal fade" id="add_user_modal" tabindex="-1" aria-labelledby="add_user_modal_label" aria-hidden="true">
@@ -59,72 +34,53 @@
 				<h5 class="modal-title" id="add_user_modal_label">Add User</h5>
 				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 			</div>
-			<div class="modal-body">
-				<form method="POST" id="add_user">
-						<label for="nickname" class="form-label">Nickname</label>
-						<input type="text" maxlength="10" class="form-control" id="nickname" name="nickname" placeholder="nick" required autofocus>
-				</form>
-			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Cancel</button>
-				<button type="submit" form="add_user" class="btn btn-lg btn-primary" name="action" value="add_user">Save</button>
+				<div class="modal-body">
+					<form method="POST" id="add_user">
+							<label for="nickname" class="form-label">Nickname</label>
+							<input type="text" maxlength="10" class="form-control" id="nickname" name="nickname" placeholder="nick" required autofocus>
+					</form>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Cancel</button>
+					<button type="submit" form="add_user" class="btn btn-lg btn-primary" name="action" value="add_user">Save</button>
 			</div>
 		</div>
 	</div>
 </div>
 
-<div>
-	<table class="table table-striped table-hover" id="users">
-		<thead>
-		<tr>
-			<th scope="col">Nickname</th>
-			<th scope="col">Balance</th>
-			<th scope="col">Actions</th>
-		</tr>
-		</thead>
-		<tbody>
-		@foreach (var user in db.Users.OrderBy(p => p.Nickname.ToLower())) {
-			<tr id="user_@user.Id">
-				<td>
-					<b>@user.Nickname</b>
-				</td>
-				<td>
-					@($"{user.Balance / 100M:C}")
-				</td>
-				<td>
-					<!-- Displayed when in big layout -->
-					<form method="POST">
-						<input type="hidden" name="action" value="transaction">
-						<input type="hidden" name="userId" value="@user.Id">
-						<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 -->
-							<button type="submit" class="btn px-3 btn-danger" name="amount" value="-150">-1.50&euro;</button>
-							<button type="submit" class="btn px-3 btn-danger" name="amount" value="-200">-2&euro;</button>
-							<button type="submit" class="btn px-3 btn-success" name="amount" value="500">+5&euro;</button>
-							<button type="submit" class="btn px-3 btn-success" name="amount" value="1000">+10&euro;</button>
-							<a class="btn px-2 btn-primary" href="/EditUser/@user.Id">Edit</a>
-						</div>
-						<!-- Displayed when in compact/phone layout -->
-						<div class="dropdown d-md-none">
-							<a class="btn btn-lg px-1 btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
-								Actions
-							</a>
-							<div class="dropdown-menu p-1 mw-max-content" aria-labelledby="dropdownMenuLink">
-								<!-- Inline CSS, sets minimum width of drop down to maxium size of content -->
-								<div class="d-grid gap-1">
-									<!-- Make sure these buttons match the big layout ones above-->
-									<button type="submit" class="btn btn-lg btn-danger" name="amount" value="-150">-1.50&euro;</button>
-									<button type="submit" class="btn btn-lg btn-danger" name="amount" value="-200">-2&euro;</button>
-									<button type="submit" class="btn btn-lg btn-success" name="amount" value="500">+5&euro;</button>
-									<button type="submit" class="btn btn-lg btn-success" name="amount" value="1000">+10&euro;</button>
-									<a class="btn btn-lg btn-primary" href="/EditUser/@user.Id">Edit</a>
-								</div>
-							</div>
-						</div>
-					</form>
-				</td>
-			</tr>
+<script>
+	function liveSearch() {
+		let cards = document.getElementsByClassName("user-card-container")
+		let search_query = document.getElementById("searchbox").value;
+		for (var i = 0; i < cards.length; i++) {
+		// If the text is within the card...
+		if(cards[i].innerText.toLowerCase()
+		// ...and the text matches the search query...
+		.includes(search_query.toLowerCase())) {
+			// ...remove the `.is-hidden` class.
+			cards[i].classList.remove("is-hidden");
+		} else {
+		// Otherwise, add the class.
+		cards[i].classList.add("is-hidden");
 		}
-		</tbody>
-	</table>
+	}
+}
+</script>
+
+<div class="row row-cols-auto justify-content-start g-0">
+	@foreach (var user in db.Users.OrderBy(p => p.Nickname.ToLower())) {
+		<div class="col user-card-container" id="user_@user.Id">
+			<a href="/EditUser/@user.Id">
+				<div class="d-flex flex-column align-items-center justify-content-center bg-light user-card">
+						<div class="text-dark">@user.Nickname</div>
+						@if (user.Balance < 0) {
+							<div class ="balance-neg">@($"{user.Balance / 100M:C}")</div>
+						}
+						else {
+							<div class ="balance-pos">@($"{user.Balance / 100M:C}")</div>
+						}
+				</div>
+			</a>
+		</div>
+	}
 </div>
diff --git a/AfRApay.Web/Pages/Shared/_Layout.cshtml b/AfRApay.Web/Pages/Shared/_Layout.cshtml
index 2035a2d..de911fd 100644
--- a/AfRApay.Web/Pages/Shared/_Layout.cshtml
+++ b/AfRApay.Web/Pages/Shared/_Layout.cshtml
@@ -6,12 +6,13 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 	<title>@ViewData["Title"] - AfRApay</title>
 	<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css"/>
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
 	<link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>
 	@await RenderSectionAsync("Header", false)
 </head>
 <body class="d-flex flex-column min-vh-100">
 <header>
-	<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
+	<nav class="navbar fixed-top navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
 		<div class="container">
 			<a class="navbar-brand" asp-area="" asp-page="/Index">AfRApay</a>
 			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
@@ -24,6 +25,10 @@
 						<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
 					</li>
 				</ul>
+				<div class="d-flex">
+					@await RenderSectionAsync("HeaderAddSearch", false)
+					@await RenderSectionAsync("HeaderAddUser", false)
+				</div>
 			</div>
 		</div>
 	</nav>
diff --git a/AfRApay.Web/wwwroot/css/site.css b/AfRApay.Web/wwwroot/css/site.css
index 2923f52..e15f22d 100644
--- a/AfRApay.Web/wwwroot/css/site.css
+++ b/AfRApay.Web/wwwroot/css/site.css
@@ -13,6 +13,10 @@ html {
   min-height: 100%;
 }
 
+body {
+  padding-top: 75px;
+}
+
 /* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
 for details on configuring this project to bundle and minify static web assets. */
 
@@ -538,3 +542,37 @@ button.accept-policy {
   color: transparent;
   text-shadow: 0 0 15px #fff;
 }
+
+.user-card-container a:link {
+  text-decoration: none;
+}
+.user-card {
+  font-size: 1.5em;
+  width: 7em;
+  height: 5em;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.balance-pos {
+  color:  #25be77;
+}
+
+.balance-neg {
+  color:  #e02639;
+}
+
+.is-hidden {
+  display: none;
+}
+
+.transact-btn {
+  width: 5em;
+  height: 3.5em;
+  margin-right: 0.2em;
+  margin-left: 0.2em;
+  margin-top: 0.2em;
+  margin-bottom: 0.2em;
+}
\ No newline at end of file