diff --git a/src/routes/_Trend.svelte b/src/routes/_Trend.svelte
new file mode 100644
index 000000000..140ac6d6d
--- /dev/null
+++ b/src/routes/_Trend.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	export let trend;
+</script>
+
+{#if trend === 'up'}
+	<span class="px-2 text-green-500">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="h-8 w-8"
+			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" />
+			<line x1="17" y1="7" x2="7" y2="17" />
+			<polyline points="8 7 17 7 17 16" />
+		</svg></span
+	>
+{:else if trend === 'down'}
+	<span class="text-red-500 px-2">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="w-8 h-8"
+			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" />
+			<line x1="7" y1="7" x2="17" y2="17" />
+			<polyline points="17 8 17 17 8 17" />
+		</svg>
+	</span>
+{/if}
diff --git a/src/routes/applications/[id]/logs/_Loading.svelte b/src/routes/applications/[id]/logs/_Loading.svelte
index 73fbe709e..7add70c19 100644
--- a/src/routes/applications/[id]/logs/_Loading.svelte
+++ b/src/routes/applications/[id]/logs/_Loading.svelte
@@ -1,4 +1,8 @@
-<div class="lds-ripple absolute left-0">
+<script>
+	export let position = 'absolute';
+</script>
+
+<div class="lds-ripple {position} left-0">
 	<div />
 	<div />
 </div>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 224b796b1..40d78899c 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -24,6 +24,7 @@
 	import { get } from '$lib/api';
 	import { onDestroy, onMount } from 'svelte';
 	import Loading from './applications/[id]/logs/_Loading.svelte';
+	import Trend from './_Trend.svelte';
 
 	export let applicationsCount: number;
 	export let sourcesCount: number;
@@ -67,7 +68,6 @@
 		try {
 			loading.usage = true;
 			const data = await get(`/dashboard.json?usage=true`);
-			console.log(usage.memory.freeMemPercentage);
 			if (data.memory.freeMemPercentage === usage.memory.freeMemPercentage) {
 				trends.memory = 'stable';
 			} else {
@@ -135,7 +135,6 @@
 <div class="mt-10 pb-12 tracking-tight sm:pb-16">
 	<div class="mx-auto max-w-4xl">
 		<div class="title font-bold">Server Usage</div>
-
 		<dl class="relative mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
 			<Loading />
 			<div class="overflow-hidden rounded-lg px-4 py-5 sm:p-6">
@@ -156,56 +155,8 @@
 				<dt class="truncate text-sm font-medium text-white">Free Memory</dt>
 				<dd class="mt-1 flex items-center text-3xl font-semibold text-white">
 					{usage?.memory.freeMemPercentage}%
-					{#if trends.memory === 'stable' || trends.memory === '' || usage.memory.freeMemPercentage === 0}
-						<span class="px-2 text-yellow-400"
-							><svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="h-8 w-8"
-								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="M5 9h14m-14 6h14" />
-							</svg></span
-						>
-					{:else if trends.memory === 'up'}
-						<span class="text-green-500 px-2">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="w-8 h-8"
-								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" />
-								<line x1="17" y1="7" x2="7" y2="17" />
-								<polyline points="8 7 17 7 17 16" />
-							</svg></span
-						>
-					{:else if trends.memory === 'down'}
-						<span class="text-red-500 px-2">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="w-8 h-8"
-								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" />
-								<line x1="7" y1="7" x2="17" y2="17" />
-								<polyline points="17 8 17 17 8 17" />
-							</svg>
-						</span>
+					{#if !memoryWarning}
+						<Trend trend={trends.memory} />
 					{/if}
 				</dd>
 			</div>
@@ -214,69 +165,21 @@
 			<div class="overflow-hidden rounded-lg px-4 py-5 sm:p-6">
 				<dt class="truncate text-sm font-medium text-white">Total CPUs</dt>
 				<dd class="mt-1 text-3xl font-semibold text-white">
-					{(usage?.cpu.count).toFixed(0)}
+					{usage?.cpu.count}
 				</dd>
 			</div>
 			<div class="overflow-hidden rounded-lg px-4 py-5 sm:p-6">
-				<dt class="truncate text-sm font-medium text-white">Load Average</dt>
+				<dt class="truncate text-sm font-medium text-white">Load Average (5/10/30mins)</dt>
 				<dd class="mt-1 text-3xl font-semibold text-white">
-					{usage?.cpu.load}
+					{usage?.cpu.load.join('/')}
 				</dd>
 			</div>
 			<div class="overflow-hidden rounded-lg px-4 py-5 sm:p-6" class:bg-red-500={cpuWarning}>
 				<dt class="truncate text-sm font-medium text-white">CPU Usage</dt>
 				<dd class="mt-1 flex items-center text-3xl  font-semibold text-white">
-					{(usage?.cpu.usage).toFixed(0)}%
-					{#if trends.cpu === 'stable' || trends.cpu === '' || usage.cpu.usage === 0}
-						<span class="px-2 text-yellow-400"
-							><svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="h-8 w-8"
-								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="M5 9h14m-14 6h14" />
-							</svg></span
-						>
-					{:else if trends.cpu === 'up'}
-						<span class="text-green-500 px-2">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="w-8 h-8"
-								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" />
-								<line x1="17" y1="7" x2="7" y2="17" />
-								<polyline points="8 7 17 7 17 16" />
-							</svg></span
-						>
-					{:else if trends.cpu === 'down'}
-						<span class="text-red-500 px-2">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="w-8 h-8"
-								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" />
-								<line x1="7" y1="7" x2="17" y2="17" />
-								<polyline points="17 8 17 17 8 17" />
-							</svg>
-						</span>
+					{usage?.cpu.usage}%
+					{#if !cpuWarning}
+						<Trend trend={trends.cpu} />
 					{/if}
 				</dd>
 			</div>
@@ -298,56 +201,8 @@
 				<dt class="truncate text-sm font-medium text-white">Free Disk</dt>
 				<dd class="mt-1 flex items-center text-3xl font-semibold text-white">
 					{usage?.disk.freePercentage}%
-					{#if trends.disk === 'stable' || trends.disk === '' || usage.disk.freePercentage === 0}
-						<span class="px-2 text-yellow-400"
-							><svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="h-8 w-8"
-								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="M5 9h14m-14 6h14" />
-							</svg></span
-						>
-					{:else if trends.disk === 'up'}
-						<span class="text-green-500 px-2">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="w-8 h-8"
-								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" />
-								<line x1="17" y1="7" x2="7" y2="17" />
-								<polyline points="8 7 17 7 17 16" />
-							</svg></span
-						>
-					{:else if trends.disk === 'down'}
-						<span class="text-red-500 px-2">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="w-8 h-8"
-								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" />
-								<line x1="7" y1="7" x2="17" y2="17" />
-								<polyline points="17 8 17 17 8 17" />
-							</svg>
-						</span>
+					{#if !diskWarning}
+						<Trend trend={trends.disk} />
 					{/if}
 				</dd>
 			</div>