diff --git a/src/lib/components/ServerCard.svelte b/src/lib/components/ServerCard.svelte
new file mode 100644
index 0000000..cc05270
--- /dev/null
+++ b/src/lib/components/ServerCard.svelte
@@ -0,0 +1,185 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { OpenInNewWindow } from 'radix-icons-svelte';
+	import { quintInOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import { IconType, type Service } from '$lib/types/data-types';
+	import { Skeleton } from '$lib/components/ui/skeleton';
+	import type { Heartbeat } from '$lib/types/uptime-kuma-types';
+
+	let { service, icons, monitor } = $props<{
+		service: Service;
+		icons: Array<string>;
+		monitor: Heartbeat;
+	}>();
+
+	let status = $state(4);
+
+	let hover = $state({
+		title: false,
+		link: false,
+		ext: false
+	});
+
+	let img_source: string = $state('');
+
+	function checkForImage(service: Service) {
+		const rootSplit = service.icon.split('/');
+		const root = rootSplit[rootSplit.length - 1];
+
+		if (icons.includes(`${root}.${service.iconType}`)) {
+			img_source = `${service.icon}.${service.iconType}`;
+		} else {
+			img_source = '';
+		}
+	}
+
+	$effect(() => {
+		if (typeof monitor !== 'undefined') {
+			status = monitor.status;
+		}
+		if (icons.length != 0) {
+			const rootSplit = service.icon.split('/');
+			const root = rootSplit[rootSplit.length - 1];
+
+			if (service.iconType === IconType.SVG) {
+				checkForImage(service);
+			} else {
+				if (icons.includes(`${root}-36.${service.iconType}`)) {
+					img_source = `${service.icon}-36.${service.iconType}`;
+				} else {
+					checkForImage(service);
+				}
+			}
+		}
+	});
+</script>
+
+<div
+	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'}
+		z-0 bg-black/55 p-4 backdrop-blur-sm"
+>
+	<div class="flex flex-row justify-between pb-4">
+		<div
+			class="flex flex-row items-center gap-1"
+			on:mouseover={() => (hover.title = true)}
+			on:mouseleave={() => (hover.title = false)}
+		>
+			{#if service.icon}
+				{#if img_source != ''}
+					<img
+						width="24px"
+						class="h-6 w-6 cursor-pointer"
+						src={img_source}
+						alt="{service.name} Logo"
+					/>
+				{:else}
+					<Skeleton class="h-6 w-6 rounded-full" />
+				{/if}
+			{:else}{/if}
+			<a
+				href={service.href}
+				class="font-bold {!hover.title || 'text-secondary'}"
+				>{service.name}</a
+			>
+			{#if hover.title}
+				<div
+					transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
+					class="grid items-center"
+				>
+					<OpenInNewWindow
+						color={hover.title ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
+						class="self-center"
+					/>
+				</div>
+			{/if}
+		</div>
+
+		<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">{service.desc}</p>
+	<p class="text-center text-sm font-bold text-destructive">{service.warn}</p>
+	<div class="grid {service.extLink ? 'grid-cols-2' : 'grid-cols-1'} mt-auto justify-items-center">
+		<a
+			class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
+			href={service.href}
+			on:mouseover={() => (hover.link = true)}
+			on:mouseleave={() => (hover.link = false)}
+		>
+			Open
+			{#if hover.link}
+				<div
+					transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
+					class="grid items-center pl-1 pr-0"
+				>
+					<OpenInNewWindow
+						color={hover.link ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
+						class="self-center"
+					/>
+				</div>
+			{/if}
+		</a>
+		{#if service.extLink}
+			<a
+				class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
+				href={service.extLink}
+				on:mouseover={() => (hover.ext = true)}
+				on:mouseleave={() => (hover.ext = false)}
+			>
+				Official Site
+				{#if hover.ext}
+					<div
+						transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
+						class="grid items-center pl-1 pr-0"
+					>
+						<OpenInNewWindow
+							color={hover.ext ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
+							class="self-center"
+						/>
+					</div>
+				{/if}
+			</a>
+		{/if}
+	</div>
+</div>
diff --git a/src/routes/data/servers/+server.ts b/src/routes/data/servers/+server.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/servers/+page.server.ts b/src/routes/servers/+page.server.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/services/+page.server.ts b/src/routes/services/+page.server.ts
index cb944e6..f9ba6b5 100644
--- a/src/routes/services/+page.server.ts
+++ b/src/routes/services/+page.server.ts
@@ -50,6 +50,7 @@ async function login(socket: Socket): Promise<string> {
 		{ username: process.env.KUMA_USERNAME, password: process.env.KUMA_PASSWORD, token: '' },
 		(res: { token: string }) => {
 			token = res.token;
+			socket.close();
 		}
 	);