diff --git a/src/app.css b/src/app.css
index 99f2157..d2f6977 100644
--- a/src/app.css
+++ b/src/app.css
@@ -7,5 +7,6 @@ html {
 }
 
 body {
+	height: 100%;
 	min-height: 100%;
 }
diff --git a/src/app.html b/src/app.html
index d294652..fe5ad2c 100644
--- a/src/app.html
+++ b/src/app.html
@@ -7,7 +7,9 @@
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
-		<div class="bg-neutral-400 p-4 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-400">
+		<div
+			class="h-full bg-neutral-400 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-400"
+		>
 			<div class="container mx-auto">%sveltekit.body%</div>
 		</div>
 	</body>
diff --git a/src/config.yml b/src/config.yml
index ea9d04e..e2325d0 100644
--- a/src/config.yml
+++ b/src/config.yml
@@ -17,7 +17,7 @@ services:
       icon: 'fas fa-photo-film'
       items:
           - title: 'Jellyfin'
-            subtitle: 'Media server for movies and shows'
+            subtitle: 'Media server'
             target: '_blank'
             url: 'https://eagle.tuleu.me'
             type: jellyfin
diff --git a/src/lib/components/Brand.svelte b/src/lib/components/Brand.svelte
index dfab94f..3699e1d 100644
--- a/src/lib/components/Brand.svelte
+++ b/src/lib/components/Brand.svelte
@@ -25,10 +25,13 @@
 		width: 100%;
 		color: var(--mask-color);
 		display: flex;
+		justify-content: center;
+		align-items: center;
 	}
 
 	img {
-		width: 100%;
+		max-width: 100%;
+		max-height: 100%;
 	}
 
 	.masked {
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index a78e261..dfd7a2d 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -8,7 +8,7 @@
 	export let links: Array<LinkConfig>;
 </script>
 
-<header class="flex flex-col gap-4">
+<header class="bg-red-300 flex flex-col justify-between gap-8 pt-12">
 	<section class="flex h-16 flex-row items-center gap-4">
 		<div class="h-16 w-16">
 			<a href="/">
diff --git a/src/lib/components/ServiceCard.svelte b/src/lib/components/ServiceCard.svelte
index 1c0de3a..2d5ccfa 100644
--- a/src/lib/components/ServiceCard.svelte
+++ b/src/lib/components/ServiceCard.svelte
@@ -16,24 +16,22 @@
 	}
 </script>
 
-<a href={service.url} target={service.target || ''}>
-	<div class="card">
-		<div class="card-content">
-			<div class="media">
-				<div class="media-left">
-					<figure class="image">
-						<Brand brand={brand()} />
-					</figure>
-				</div>
-				<div class="media-content">
-					<p class="title is-4">{service.title}</p>
-					{#if component != undefined}
-						<p class="subtitle is-6"><svelte:component this={component} {data} /></p>
-					{:else}
-						<p class="subtitle is-6">{service.subtitle}</p>
-					{/if}
-				</div>
-			</div>
-		</div>
+<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"
+	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}
+				{service.subtitle}
+			{/if}
+		</p>
 	</div>
 </a>
diff --git a/src/lib/components/ServiceGroup.svelte b/src/lib/components/ServiceGroup.svelte
index dd03a95..30a7940 100644
--- a/src/lib/components/ServiceGroup.svelte
+++ b/src/lib/components/ServiceGroup.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
 	import type { ServiceGroupConfig } from '$lib/config';
 	import { layoutDirection } from '$lib/stores/layout';
-	import Brand from './Brand.svelte';
 	import ServiceCard from './ServiceCard.svelte';
 
 	export let group: ServiceGroupConfig;
 	export let groupData: Array<unknown>;
+	export let columns: number;
 </script>
 
-<div class="group">
-	<div class="header">
+<div>
+	<div class="mb-6 text-2xl">
 		<h3>
 			{#if group.icon}
 				<i class={group.icon} />
@@ -18,9 +18,20 @@
 		</h3>
 	</div>
 
-	<div class="services layout-{$layoutDirection}">
+	<div class={'gap-4' + ' layout-' + $layoutDirection} style={'--columns: ' + columns}>
 		{#each group.items as service, i}
 			<ServiceCard {service} data={groupData[i]} />
 		{/each}
 	</div>
 </div>
+
+<style>
+	.layout-row {
+		display: grid;
+		grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+	}
+	.layout-column {
+		display: flex;
+		flex-flow: row wrap;
+	}
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e711dc9..ea55503 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,60 +1,32 @@
 <script lang="ts">
-	import Brand from '$lib/components/Brand.svelte';
 	import Header from '$lib/components/Header.svelte';
 	import ServiceGroup from '$lib/components/ServiceGroup.svelte';
-	import type { ColorConfig } from '$lib/config';
 	import { layoutDirection } from '$lib/stores/layout';
 	import type { PageData } from './$types';
 
 	export let data: PageData;
-
-	function colorVariables(colors: ColorConfig): string {
-		const cssVars: Array<string> = [];
-		for (const [key, value] of Object.entries(colors)) {
-			cssVars.push(`--${key}:${value}`);
-		}
-		return cssVars.join(';');
-	}
-
-	function renderCssVariables() {
-		return `<style>
-:root, body.is-light {
-  ${colorVariables(data.config.colors.light)}
-}
-@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
-  :root, body {
-    ${colorVariables(data.config.colors.light)}
-  }
-}
-:root, body.is-dark {
-  ${colorVariables(data.config.colors.dark)}
-}
-@media (prefers-color-scheme: dark) {
-  :root, body {
-    ${colorVariables(data.config.colors.dark)}
-  }
-}
-:root {
---layout-template: repeat(${data.config.columns},1fr);
-}
-</style>`;
-	}
 </script>
 
-<svelte:head>
-	<!-- it is safe here because config is comming from config.yml and thus is trusted. -->
-	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-	{@html renderCssVariables()}
-</svelte:head>
-
 <Header section={data.config} links={data.config.links} />
 
-<main class="section">
-	<div class="container layout-{$layoutDirection}">
-		{#each data.config.services as group, i}
-			<ServiceGroup {group} groupData={data.serviceData[i]} />
-		{/each}
-	</div>
+<main
+	class={'container mt-20 gap-12 transition-all ' + ' layout-' + $layoutDirection}
+	style={'--columns:' + data.config.columns}
+>
+	{#each data.config.services as group, i}
+		<ServiceGroup {group} groupData={data.serviceData[i]} columns={data.config.columns} />
+	{/each}
 </main>
 
 <footer />
+
+<style>
+	.layout-column {
+		display: grid;
+		grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+	}
+	.layout-row {
+		display: grid;
+		grid-template-rows: repeat(var(--columns), minmax(0, 1fr));
+	}
+</style>
