diff --git a/src/lib/components/ServiceCard.svelte b/src/lib/components/ServiceCard.svelte
index 97005bf..6e1997a 100644
--- a/src/lib/components/ServiceCard.svelte
+++ b/src/lib/components/ServiceCard.svelte
@@ -5,10 +5,12 @@
 	import { quintInOut } from 'svelte/easing';
 	import { slide } from 'svelte/transition';
 	import { IconType, type Service } from '$lib/types/data-types';
-	import { onMount } from 'svelte';
 	import { Skeleton } from '$lib/components/ui/skeleton';
+	import type {Heartbeat} from "$lib/types/uptime-kuma-types";
 
-	let { service, icons } = $props<{ service: Service; icons: Array<string> }>();
+	let { service, icons, monitor } = $props<{ service: Service; icons: Array<string>, monitor: Heartbeat }>();
+
+	let status = $state(4);
 
 	let hover = $state({
 		title: false,
@@ -30,6 +32,12 @@
 	}
 
 	$effect(() => {
+		if (typeof monitor !== "undefined") {
+			if (monitor.monitorID == 9) {
+				console.log("Vaultwarden: ", monitor.status)
+			}
+			status = monitor.status;
+		}
 		if (icons.length != 0) {
 			const rootSplit = service.icon.split('/');
 			const root = rootSplit[rootSplit.length - 1];
@@ -48,7 +56,9 @@
 </script>
 
 <div
-	class="flex h-48 w-[30rem] flex-col gap-y-2 rounded-xl border-t-4 border-maintenance bg-black/55 p-4"
+	class="flex h-48 w-[28rem] flex-col gap-y-2 rounded-xl border-t-4
+		{status == 0 ? 'border-offline' : status == 1 ? 'border-online' : status == 2 ? 'border-pending' : status == 3 ? 'border-maintenance' : 'border-maintenance'}
+		bg-black/55 p-4"
 >
 	<div class="flex flex-row justify-between pb-4">
 		<div
@@ -86,8 +96,11 @@
 			{/if}
 		</div>
 
-		<h1 class="w-16 rounded-md border-b-2 border-maintenance text-center text-sm text-maintenance">
-			Loading
+		<h1 class="w-16 rounded-md border-b-2
+			{status == 0 ? 'border-offline' : status == 1 ? 'border-online' : status == 2 ? 'border-pending' : status == 3 ? 'border-maintenance' : 'border-maintenance'}
+			text-center text-sm
+			{status == 0 ? 'text-offline' : status == 1 ? 'text-online' : status == 2 ? 'text-pending' : status == 3 ? 'text-maintenance' : 'text-maintenance'}">
+			{status == 0 ? 'Offline' : status == 1 ? 'Online' : status == 2 ? 'Pending' : status == 3 ? 'Maint.' : 'Loading'}
 		</h1>
 	</div>
 	<p class="text-wrap text-center text-sm text-accent">{service.desc}</p>
diff --git a/src/lib/types/uptime-kuma-types.ts b/src/lib/types/uptime-kuma-types.ts
new file mode 100644
index 0000000..1ff8908
--- /dev/null
+++ b/src/lib/types/uptime-kuma-types.ts
@@ -0,0 +1,9 @@
+export type Heartbeat = {
+	readonly monitorID: number;
+	readonly status: number;
+	readonly time: string;
+	readonly msg: string;
+	readonly ping: number;
+	readonly important: boolean;
+	readonly duration: number;
+};
diff --git a/src/routes/services/+page.server.ts b/src/routes/services/+page.server.ts
new file mode 100644
index 0000000..f990af2
--- /dev/null
+++ b/src/routes/services/+page.server.ts
@@ -0,0 +1,38 @@
+import { io } from 'socket.io-client';
+import * as fs from 'fs';
+
+export async function load() {
+	const credFile = './credentials.json';
+	const socket = io('https://status.neshweb.net/');
+
+	let credentials: { username: string; password: string };
+	if (fs.existsSync(credFile)) {
+		let buf = fs.readFileSync(credFile);
+		credentials = JSON.parse(buf.toString());
+	} else {
+		console.error('Credentials File does not exist, Socket.io connection will not work.');
+	}
+
+	console.log(credentials);
+
+	let token = '';
+
+	socket.on('connect', () => {
+		socket.emit(
+			'login',
+			{ username: credentials.username, password: credentials.password, token: '' },
+			(res) => {
+				token = res.token;
+				console.log('Token is:', token);
+			}
+		);
+	});
+
+	while (token == '') {
+		await new Promise((resolve) => setTimeout(resolve, 10));
+	}
+
+	return {
+		token
+	};
+}
diff --git a/src/routes/services/+page.svelte b/src/routes/services/+page.svelte
index d3a484a..4934ec2 100644
--- a/src/routes/services/+page.svelte
+++ b/src/routes/services/+page.svelte
@@ -3,11 +3,57 @@
 <script lang="ts">
 	import ServiceCard from '$lib/components/ServiceCard.svelte';
 	import type { Service } from '$lib/types/data-types';
+	import {io} from "socket.io-client";
+	import type {Heartbeat} from "$lib/types/uptime-kuma-types";
+
+	let { data }: { data: { token: string } } = $props();
+
+	$effect(() => {
+		console.log("Data:", data.token)
+	})
 
 	let services: readonly Service[] = $state.frozen([]);
 
 	let icons: readonly string[] = $state.frozen([]);
 
+	let monitorList: Map<number, Heartbeat> = $state(new Map());
+
+	//let token = $props();
+
+	$effect(() => {
+		if (data.token) {
+			const socket = io('https://status.neshweb.net/');
+
+			socket.on('connect', () => {
+				socket.emit("loginByToken", data.token, (res) => {
+					console.log(data.token)
+					console.log(res);
+				})
+			});
+
+			socket.on('heartbeatList', (idString: string, data) => {
+				let recent = data[data.length - 1];
+				let monitor: Heartbeat = {
+					monitorID: recent.monitor_id,
+					status: recent.status,
+					time: recent.time,
+					msg: recent.msg,
+					ping: recent.ping,
+					important: recent.important,
+					duration: recent.duration
+				}
+				monitorList.set(monitor.monitorID, monitor);
+				monitorList = new Map(monitorList.entries());
+			})
+
+			socket.on('heartbeat', (data) => {
+				monitorList.set(data.monitorID, data);
+				monitorList = new Map(monitorList.entries());
+			})
+		}
+	})
+
+
 	async function get(url: string): Promise<any> {
 		let res = await fetch(url);
 		if (res.ok) {
@@ -36,8 +82,8 @@
 	<meta name="description" content="Overview of Services running on neshweb.net" />
 </svelte:head>
 
-<div class="flex h-full flex-row flex-wrap justify-center gap-10 overflow-auto p-8">
+<div class="flex max-h-full flex-row flex-wrap justify-center gap-10 overflow-auto p-8">
 	{#each services as service}
-		<ServiceCard {service} {icons} />
+		<ServiceCard {service} {icons} monitor={monitorList.get(service.id)} />
 	{/each}
 </div>