diff --git a/src/config.yml b/src/config.yml
index 6d777db..e62075d 100644
--- a/src/config.yml
+++ b/src/config.yml
@@ -17,22 +17,16 @@ services:
       icon: 'fas fa-photo-film'
       items:
           - title: 'Jellyfin'
-            subtitle: 'Media server'
-            target: '_blank'
             url: 'https://eagle.tuleu.me'
             type: jellyfin
             keywords: 'cloud storage files'
 
           - title: 'Sonarr'
-            subtitle: 'Shows tracker'
-            target: '_blank'
             url: 'http://sonarr.lan'
             type: sonarr
             keywords: 'shows tracker torrent usenet'
 
           - title: 'Radarr'
-            subtitle: 'Movie tracker'
-            target: '_blank'
             url: 'http://radarr.lan'
             type: radarr
             keywords: 'movies tracker torrent usenet'
@@ -43,7 +37,6 @@ services:
           - title: 'NAS'
             subtitle: 'Network Attached Storage'
             icon: 'fas fa-hard-drive'
-            target: '_blank'
             url: 'https://owl.tuleu.me'
             keywords: 'cloud nas files storage'
 
@@ -51,8 +44,6 @@ services:
       icon: 'fas fa-network-wired'
       items:
           - title: 'PiHole'
-            subtitle: 'A DNS to send telemetry and ads to the void'
-            target: '_blank'
             url: 'http://pihole.lan/admin'
             type: 'pihole'
             keywords: 'dns ads blocker internet'
diff --git a/src/lib/components/ServiceCard.svelte b/src/lib/components/ServiceCard.svelte
index 915fd60..131fa95 100644
--- a/src/lib/components/ServiceCard.svelte
+++ b/src/lib/components/ServiceCard.svelte
@@ -15,24 +15,40 @@
 		}
 		return service;
 	}
+
+	function computeClasses(): string {
+		switch (data.status) {
+			case 'offline':
+				return 'bg-error-400';
+			case 'online':
+				return 'bg-success-400';
+			default:
+				return 'bg-warning-400 animate-pulse';
+		}
+	}
+	$: statusClasses = computeClasses();
 </script>
 
 <a
-	class="min-h-24 flex w-full flex-row gap-2 rounded-2xl bg-neutral-600 bg-opacity-30 p-6 transition-all hover:-translate-y-2 focus:-translate-y-2 focus:outline-none"
+	class="min-h-24 flex w-full flex-col overflow-hidden rounded-2xl bg-neutral-600 bg-opacity-30 p-0 transition-all hover:-translate-y-2 focus:-translate-y-2 focus:outline-none"
 	href={service.url}
 	target={service.target || ''}
 >
-	<div class="flex flex h-12 w-12 flex-row text-4xl">
-		<Brand brand={brand()} />
-	</div>
-	<div>
-		<p class="text-xl">{service.title}</p>
-		<p class="text-md">
-			{#if component != undefined}
-				<svelte:component this={component} {data} />
-			{:else}
+	<div class="flex flex-row gap-2 px-6 pt-6">
+		<div class="flex flex h-12 w-12 flex-row text-4xl">
+			<Brand brand={brand()} />
+		</div>
+		<div>
+			<p class="text-xl">{service.title}</p>
+			<p class="text-md">
 				{service.subtitle}
-			{/if}
-		</p>
+			</p>
+		</div>
 	</div>
+	<div class="mt-2 h-8 w-full px-6">
+		{#if component != undefined}
+			<svelte:component this={component} {data} />
+		{/if}
+	</div>
+	<div class={'h-0.5 w-full ' + statusClasses} />
 </a>
diff --git a/tailwind.config.js b/tailwind.config.js
index 2394d87..3ec0dbf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,7 +8,10 @@ export default {
 		colors: {
 			primary: colors.teal,
 			secondary: colors.sky,
-			neutral: colors.slate
+			neutral: colors.slate,
+			success: colors.lime,
+			error: colors.red,
+			warning: colors.amber
 		}
 	},
 	plugins: [],