diff --git a/apps/ui/src/lib/components/Usage.svelte b/apps/ui/src/lib/components/Usage.svelte
index 00915b767..66b201da3 100644
--- a/apps/ui/src/lib/components/Usage.svelte
+++ b/apps/ui/src/lib/components/Usage.svelte
@@ -22,9 +22,9 @@
 		usage: false,
 		cleanup: false
 	};
-	import { appSession } from '$lib/store';
+	import { addToast, appSession } from '$lib/store';
 	import { onDestroy, onMount } from 'svelte';
-	import { get } from '$lib/api';
+	import { get, post } from '$lib/api';
 	import { errorNotification } from '$lib/common';
 	async function getStatus() {
 		if (loading.usage) return;
@@ -48,13 +48,36 @@
 			return errorNotification(error);
 		}
 	});
+	async function manuallyCleanupStorage() {
+		try {
+			loading.cleanup = true;
+			await post('/internal/cleanup', {});
+			return addToast({
+				message: 'Cleanup done.',
+				type: 'success'
+			});
+		} catch (error) {
+			return errorNotification(error);
+		} finally {
+			loading.cleanup = false;
+		}
+	}
 </script>
 
 <div class="w-full">
-	<h1 class="title text-4xl">Hardware details</h1>
+	<div class="flex items-center">
+		<h1 class="title text-4xl">Hardware Details</h1>
+		{#if $appSession.teamId === '0'}
+			<button on:click={manuallyCleanupStorage} class:loading={loading.cleanup} class="btn btn-sm"
+				>Cleanup Storage</button
+			>
+		{/if}
+	</div>
 	<div class="divider" />
 	<div class="grid grid-flow-col gap-4 grid-rows-3 lg:grid-rows-1">
-		<div class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5 bg-coolgray-100 rounded">
+		<div
+			class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5 bg-coolgray-200 rounded"
+		>
 			<div class="stat">
 				<div class="stat-title">Total Memory</div>
 				<div class="stat-value text-2xl">
@@ -77,7 +100,9 @@
 			</div>
 		</div>
 
-		<div class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5 bg-coolgray-100 rounded">
+		<div
+			class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5 bg-coolgray-200 rounded"
+		>
 			<div class="stat">
 				<div class="stat-title">Total CPUs</div>
 				<div class="stat-value text-2xl">
@@ -98,7 +123,9 @@
 			</div>
 		</div>
 
-		<div class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5 bg-coolgray-100 rounded">
+		<div
+			class="stats stats-vertical lg:stats-horizontal shadow w-full mb-5 bg-coolgray-200 rounded"
+		>
 			<div class="stat">
 				<div class="stat-title">Total Disk</div>
 				<div class="stat-value text-2xl">
@@ -115,7 +142,9 @@
 
 			<div class="stat">
 				<div class="stat-title">Free Disk</div>
-				<div class="stat-value text-2xl">{usage?.disk.freePercentage}<span class="text-sm">%</span></div>
+				<div class="stat-value text-2xl">
+					{usage?.disk.freePercentage}<span class="text-sm">%</span>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/apps/ui/src/routes/index.svelte b/apps/ui/src/routes/index.svelte
index e5ba5c05e..dde8186c5 100644
--- a/apps/ui/src/routes/index.svelte
+++ b/apps/ui/src/routes/index.svelte
@@ -36,10 +36,6 @@
 	import ServiceIcons from '$lib/components/svg/services/ServiceIcons.svelte';
 	import { dev } from '$app/env';
 
-	let loading = {
-		cleanup: false
-	};
-
 	let numberOfGetStatus = 0;
 
 	function getRndInteger(min: number, max: number) {
@@ -75,253 +71,165 @@
 			numberOfGetStatus--;
 		}
 	}
-	async function manuallyCleanupStorage() {
-		try {
-			loading.cleanup = true;
-			await post('/internal/cleanup', {});
-			return addToast({
-				message: 'Cleanup done.',
-				type: 'success'
-			});
-		} catch (error) {
-			return errorNotification(error);
-		} finally {
-			loading.cleanup = false;
-		}
-	}
 </script>
 
 <div class="flex space-x-1 p-6 font-bold">
 	<div class="mr-4 text-2xl tracking-tight">{$t('index.dashboard')}</div>
-	{#if $appSession.teamId === '0'}
-		<button on:click={manuallyCleanupStorage} class:loading={loading.cleanup} class="btn btn-sm"
-			>Cleanup Storage</button
-		>
-	{/if}
 </div>
 <div class="container lg:mx-auto lg:p-0 p-5">
 	{#if $appSession.teamId === '0'}
 		<Usage />
 	{/if}
 	{#if applications.length > 0}
-		<h1 class="title text-4xl mt-10">Resources</h1>
+		<h1 class="title text-4xl mt-10">Applications</h1>
 		<div class="divider" />
 		<div class="grid grid-col gap-4 auto-cols-max grid-cols-1 lg:grid-cols-3">
 			{#each applications as application}
-				<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-coolgray-300 indicator mb-5">
-					{#await getStatus(application)}
-						<span class="indicator-item badge bg-yellow-500 badge-xs" />
-					{:then status}
-						{#if status === 'Running'}
-							<span class="indicator-item badge bg-success badge-xs" />
-						{:else}
-							<span class="indicator-item badge bg-error badge-xs" />
-						{/if}
-					{/await}
-					<div class="w-full flex flex-row">
-						<ApplicationsIcons {application} isAbsolute={false} />
-						<div class="w-full flex flex-col ml-5">
-							<span>
-								Application
-								{#if application.settings.isBot}
-									| BOT
-								{/if}
-							</span>
-							<h1 class="font-bold text-lg">{application.name}</h1>
-							<div class="divider" />
-							<div class="flex justify-end space-x-2">
-								{#if application.fqdn}
-									<a href={application.fqdn} target="_blank" class="icons">
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="h-6 w-6"
-											viewBox="0 0 24 24"
-											stroke-width="1.5"
-											stroke="currentColor"
-											fill="none"
-											stroke-linecap="round"
-											stroke-linejoin="round"
+				<a class="no-underline mb-5" href={`/applications/${application.id}`}>
+					<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-coolgray-300 indicator">
+						{#await getStatus(application)}
+							<span class="indicator-item badge bg-yellow-500 badge-xs" />
+						{:then status}
+							{#if status === 'Running'}
+								<span class="indicator-item badge bg-success badge-xs" />
+							{:else}
+								<span class="indicator-item badge bg-error badge-xs" />
+							{/if}
+						{/await}
+						<div class="w-full flex flex-row">
+							<ApplicationsIcons {application} isAbsolute={false} />
+							<div class="w-full flex flex-col ml-5">
+								<span>
+									Application
+									{#if application.settings.isBot}
+										| BOT
+									{/if}
+								</span>
+								<h1 class="font-bold text-lg">{application.name}</h1>
+								<div class="divider" />
+								<div class="flex justify-end space-x-2">
+									{#if application.fqdn}
+										<a href={application.fqdn} target="_blank" class="icons">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												class="h-6 w-6"
+												viewBox="0 0 24 24"
+												stroke-width="1.5"
+												stroke="currentColor"
+												fill="none"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+											>
+												<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+												<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+												<line x1="10" y1="14" x2="20" y2="4" />
+												<polyline points="15 4 20 4 20 9" />
+											</svg>
+										</a>
+									{/if}
+									{#if application.settings.isBot && application.exposePort}
+										<a
+											href={`http://${dev ? 'localhost' : settings.ipv4}:${application.exposePort}`}
+											target="_blank"
+											class="icons"
 										>
-											<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-											<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-											<line x1="10" y1="14" x2="20" y2="4" />
-											<polyline points="15 4 20 4 20 9" />
-										</svg>
-									</a>
-								{/if}
-								{#if application.settings.isBot && application.exposePort}
-									<a
-										href={`http://${dev ? 'localhost' : settings.ipv4}:${application.exposePort}`}
-										target="_blank"
-										class="icons"
-									>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="h-6 w-6"
-											viewBox="0 0 24 24"
-											stroke-width="1.5"
-											stroke="currentColor"
-											fill="none"
-											stroke-linecap="round"
-											stroke-linejoin="round"
-										>
-											<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-											<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-											<line x1="10" y1="14" x2="20" y2="4" />
-											<polyline points="15 4 20 4 20 9" />
-										</svg>
-									</a>
-								{/if}
-								<a class="icons" href={`/applications/${application.id}`}>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										class="h-6 w-6"
-										viewBox="0 0 24 24"
-										stroke-width="1.5"
-										stroke="currentColor"
-										fill="none"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-									>
-										<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-										<rect x="4" y="8" width="4" height="4" />
-										<line x1="6" y1="4" x2="6" y2="8" />
-										<line x1="6" y1="12" x2="6" y2="20" />
-										<rect x="10" y="14" width="4" height="4" />
-										<line x1="12" y1="4" x2="12" y2="14" />
-										<line x1="12" y1="18" x2="12" y2="20" />
-										<rect x="16" y="5" width="4" height="4" />
-										<line x1="18" y1="4" x2="18" y2="5" />
-										<line x1="18" y1="9" x2="18" y2="20" />
-									</svg>
-								</a>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												class="h-6 w-6"
+												viewBox="0 0 24 24"
+												stroke-width="1.5"
+												stroke="currentColor"
+												fill="none"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+											>
+												<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+												<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+												<line x1="10" y1="14" x2="20" y2="4" />
+												<polyline points="15 4 20 4 20 9" />
+											</svg>
+										</a>
+									{/if}
+								</div>
 							</div>
 						</div>
 					</div>
-				</div>
+				</a>
 			{/each}
 		</div>
 		<h1 class="title text-4xl mt-10">Services</h1>
 		<div class="divider" />
 		<div class="grid grid-col gap-4 auto-cols-max grid-cols-1 lg:grid-cols-3">
 			{#each services as service}
-				<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-coolgray-300 indicator mb-5">
-					{#await getStatus(service)}
-						<span class="indicator-item badge bg-yellow-500 badge-xs" />
-					{:then status}
-						{#if status === 'Running'}1
-							<span class="indicator-item badge bg-success badge-xs" />
-						{:else}
-							<span class="indicator-item badge bg-error badge-xs" />
-						{/if}
-					{/await}
-					<div class="w-full flex flex-row">
-						<ServiceIcons type={service.type} isAbsolute={false} />
-						<div class="w-full flex flex-col ml-5">
-							<span>
-								Service
-							</span>
-							<h1 class="font-bold text-lg">{service.name}</h1>
-							<div class="divider" />
-							<div class="flex justify-end space-x-2">
-								{#if service.fqdn}
-									<a href={service.fqdn} target="_blank" class="icons">
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="h-6 w-6"
-											viewBox="0 0 24 24"
-											stroke-width="1.5"
-											stroke="currentColor"
-											fill="none"
-											stroke-linecap="round"
-											stroke-linejoin="round"
-										>
-											<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-											<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-											<line x1="10" y1="14" x2="20" y2="4" />
-											<polyline points="15 4 20 4 20 9" />
-										</svg>
-									</a>
-								{/if}
-								<a class="icons" href={`/services/${service.id}`}>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										class="h-6 w-6"
-										viewBox="0 0 24 24"
-										stroke-width="1.5"
-										stroke="currentColor"
-										fill="none"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-									>
-										<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-										<rect x="4" y="8" width="4" height="4" />
-										<line x1="6" y1="4" x2="6" y2="8" />
-										<line x1="6" y1="12" x2="6" y2="20" />
-										<rect x="10" y="14" width="4" height="4" />
-										<line x1="12" y1="4" x2="12" y2="14" />
-										<line x1="12" y1="18" x2="12" y2="20" />
-										<rect x="16" y="5" width="4" height="4" />
-										<line x1="18" y1="4" x2="18" y2="5" />
-										<line x1="18" y1="9" x2="18" y2="20" />
-									</svg>
-								</a>
+				<a class="no-underline mb-5" href={`/services/${service.id}`}>
+					<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-coolgray-300 indicator">
+						{#await getStatus(service)}
+							<span class="indicator-item badge bg-yellow-500 badge-xs" />
+						{:then status}
+							{#if status === 'Running'}1
+								<span class="indicator-item badge bg-success badge-xs" />
+							{:else}
+								<span class="indicator-item badge bg-error badge-xs" />
+							{/if}
+						{/await}
+						<div class="w-full flex flex-row">
+							<ServiceIcons type={service.type} isAbsolute={false} />
+							<div class="w-full flex flex-col ml-5">
+								<span> Service </span>
+								<h1 class="font-bold text-lg">{service.name}</h1>
+								<div class="divider" />
+								<div class="flex justify-end space-x-2">
+									{#if service.fqdn}
+										<a href={service.fqdn} target="_blank" class="icons">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												class="h-6 w-6"
+												viewBox="0 0 24 24"
+												stroke-width="1.5"
+												stroke="currentColor"
+												fill="none"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+											>
+												<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+												<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+												<line x1="10" y1="14" x2="20" y2="4" />
+												<polyline points="15 4 20 4 20 9" />
+											</svg>
+										</a>
+									{/if}
+								</div>
 							</div>
 						</div>
 					</div>
-				</div>
+				</a>
 			{/each}
 		</div>
 		<h1 class="title text-4xl mt-10">Databases</h1>
 		<div class="divider" />
 		<div class="grid grid-col gap-4 auto-cols-max grid-cols-1 lg:grid-cols-3">
 			{#each databases as database}
-				<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-coolgray-300 indicator mb-5">
-					{#await getStatus(database)}
-						<span class="indicator-item badge bg-yellow-500 badge-xs" />
-					{:then status}
-						{#if status === 'Running'}1
-							<span class="indicator-item badge bg-success badge-xs" />
-						{:else}
-							<span class="indicator-item badge bg-error badge-xs" />
-						{/if}
-					{/await}
-					<div class="w-full flex flex-row">
-						<DatabaseIcons type={database.type} isAbsolute={false} />
-						<div class="w-full flex flex-col ml-5">
-							<span>
-								Service
-							</span>
-							<h1 class="font-bold text-lg">{database.name}</h1>
-							<div class="divider" />
-							<div class="flex justify-end space-x-2">
-								<a class="icons" href={`/databases/${database.id}`}>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										class="h-6 w-6"
-										viewBox="0 0 24 24"
-										stroke-width="1.5"
-										stroke="currentColor"
-										fill="none"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-									>
-										<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-										<rect x="4" y="8" width="4" height="4" />
-										<line x1="6" y1="4" x2="6" y2="8" />
-										<line x1="6" y1="12" x2="6" y2="20" />
-										<rect x="10" y="14" width="4" height="4" />
-										<line x1="12" y1="4" x2="12" y2="14" />
-										<line x1="12" y1="18" x2="12" y2="20" />
-										<rect x="16" y="5" width="4" height="4" />
-										<line x1="18" y1="4" x2="18" y2="5" />
-										<line x1="18" y1="9" x2="18" y2="20" />
-									</svg>
-								</a>
+				<a class="no-underline mb-5" href={`/databases/${database.id}`}>
+					<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-coolgray-300 indicator">
+						{#await getStatus(database)}
+							<span class="indicator-item badge bg-yellow-500 badge-xs" />
+						{:then status}
+							{#if status === 'Running'}1
+								<span class="indicator-item badge bg-success badge-xs" />
+							{:else}
+								<span class="indicator-item badge bg-error badge-xs" />
+							{/if}
+						{/await}
+						<div class="w-full flex flex-row">
+							<DatabaseIcons type={database.type} isAbsolute={false} />
+							<div class="w-full flex flex-col ml-5">
+								<span> Service </span>
+								<h1 class="font-bold text-lg">{database.name}</h1>
+								<div class="divider" />
 							</div>
 						</div>
 					</div>
-				</div>
+				</a>
 			{/each}
 		</div>
 	{:else if $appSession.teamId !== '0'}