diff --git a/src/lib/components/news-thumb.svelte b/src/lib/components/news-thumb.svelte
index 4fdf2bf..77b75ed 100644
--- a/src/lib/components/news-thumb.svelte
+++ b/src/lib/components/news-thumb.svelte
@@ -7,18 +7,26 @@
 	$: link = `/news/${entry.slug}`
 </script>
 
-<li class="flex gap-14" use:animateIn={{ fade: 0, slide: 24 }}>
-	<article class="flex flex-col gap-4 rounded">
-		<div class="flex flex-col gap-4 text-sm font-medium text-slate-400">
-			<p class="font-bold text-slate-400">{formatDate(entry.date)}</p>
-		</div>
-		<h2 class="title text-3xl font-bold hover:text-slate-200 md:text-5xl lg:text-6xl">
-			<a href={link}>{entry.title}</a>
-		</h2>
-		<a
-			href={link}
-			class="group flex max-w-max items-center gap-4 font-medium text-slate-300 transition-all hover:text-white"
-			>Read up <ArrowRight class="transition-transform group-hover:translate-x-0.5" /></a
+<li class="flex" use:animateIn={{ fade: 0, slide: 24 }}>
+	<a href={link} class="w-full transition-transform hover:-translate-y-0.5">
+		<article
+			class="flex flex-col justify-between gap-3 rounded hover:outline-sky-500/80 md:flex-row md:rounded-3xl md:bg-gradient-to-tr md:from-cyan-500/10 md:to-transparent md:p-8 md:shadow-xl md:outline md:outline-1 md:outline-sky-500/30"
 		>
-	</article>
+			<div>
+				<div class="flex flex-col gap-4 font-medium text-slate-400">
+					<p class="font-bold text-slate-400">{formatDate(entry.date)}</p>
+				</div>
+				<h2 class="title text-xl font-bold hover:text-slate-200 md:text-2xl lg:text-3xl">
+					{entry.title}
+				</h2>
+			</div>
+			<p
+				class="group flex min-w-max max-w-max flex-row-reverse items-center justify-center gap-2 font-medium text-slate-300 transition-transform hover:text-white md:flex-col"
+			>
+				<ArrowRight
+					class="h-4 w-4 transition-transform group-hover:translate-y-0.5 md:h-9 md:w-9"
+				/> Read up
+			</p>
+		</article>
+	</a>
 </li>
diff --git a/src/routes/home-slices/NewsSlice.svelte b/src/routes/home-slices/NewsSlice.svelte
index 0073e45..cfd6b4e 100644
--- a/src/routes/home-slices/NewsSlice.svelte
+++ b/src/routes/home-slices/NewsSlice.svelte
@@ -13,7 +13,7 @@
 		<TitleHeading slot="title" class="">Latest news</TitleHeading>
 	</Title>
 
-	<ul class="flex flex-col gap-12">
+	<ul class="mt-8 flex flex-col gap-10">
 		{#each news as entry}
 			<NewsThumb {entry} />
 		{/each}
@@ -27,7 +27,7 @@
 		width: 200%;
 		min-height: 500px;
 		height: 220%;
-		translate: -25% 0%;
+		translate: -25% 0;
 		margin-top: -100px;
 
 		background: url('/imgs/grain.webp'),