diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index ce2e0d0..ea659a5 100755
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -5,6 +5,7 @@
 	export let type: 'primary' | 'outline' | 'fancyOutline' = 'primary'
 
 	export let href: string | undefined = undefined
+	export let newTab = false
 
 	$: classes = cn(
 		'animate rounded text-sm font-bold hover:scale-[1.01] active:scale-100',
@@ -26,6 +27,7 @@
 			{href}
 			role="button"
 			tabindex="0"
+			target={newTab ? '_blank' : undefined}
 			class={classes}
 			on:click
 		>
diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index 20fd533..a4be9f8 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -95,7 +95,9 @@
 	on:mouseenter
 	on:mouseleave
 >
-	<div class="z-10 h-full w-full">
+	<div
+		class="absolute inset-0 z-10 m-0.5 size-full min-h-0 min-w-0 grow overflow-hidden rounded-3xl"
+	>
 		<slot>Nothing in the slot here</slot>
 	</div>
 	<div class="gradient max-sm:hidden" style:opacity={gradientOpacity} />
@@ -107,7 +109,7 @@
 
 <style lang="postcss">
 	.card {
-		@apply relative flex items-end justify-end rounded-3xl transition-colors duration-300;
+		@apply relative flex items-end rounded-3xl transition-colors duration-300 md:justify-end;
 		z-index: 2;
 		contain: paint style layout;
 
@@ -137,6 +139,10 @@
 
 	/* This gradient is visible on the borders when hovering */
 	.border-gradient {
+		.isHoverCards & {
+			opacity: 100%;
+		}
+
 		position: absolute;
 		z-index: 1;
 		border-radius: inherit;
@@ -154,10 +160,6 @@
 			color-mix(in srgb, var(--color1, theme(colors.cyan.500)), transparent 50%),
 			transparent
 		);
-
-		.isHoverCards & {
-			opacity: 100%;
-		}
 	}
 
 	.gradient {
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index edd814a..eca3639 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -1,4 +1,5 @@
 export const discordLink = 'https://discord.com/invite/hQ9XvMUjjr'
 export const forgejoLink = 'https://code.hypr.land/'
 export const accountsLink = 'https://account.hypr.land/'
+export const hyprperksLink = 'https://account.hypr.land/pricing'
 export const forumLink = 'https://forum.hypr.land/'
diff --git a/src/lib/images/features/beautiful-perky.webp b/src/lib/images/features/beautiful-perky.webp
new file mode 100644
index 0000000..2ee831a
Binary files /dev/null and b/src/lib/images/features/beautiful-perky.webp differ
diff --git a/src/lib/images/features/easy.webp b/src/lib/images/features/easy.webp
new file mode 100644
index 0000000..4062e86
Binary files /dev/null and b/src/lib/images/features/easy.webp differ
diff --git a/src/lib/images/features/first-class_default.webp b/src/lib/images/features/first-class_default.webp
new file mode 100644
index 0000000..4bc166e
Binary files /dev/null and b/src/lib/images/features/first-class_default.webp differ
diff --git a/src/lib/images/features/first-class_hover.webp b/src/lib/images/features/first-class_hover.webp
new file mode 100644
index 0000000..d85dfd7
Binary files /dev/null and b/src/lib/images/features/first-class_hover.webp differ
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 452718a..471c84c 100755
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -26,10 +26,10 @@
 
 		<Community />
 
-		<NewsSlice news={data.news} />
-
 		<HyprPerks />
 
+		<NewsSlice news={data.news} />
+
 		<InstallSlice />
 	</div>
 </div>
diff --git a/src/routes/home-slices/HyprPerksSlice.svelte b/src/routes/home-slices/HyprPerksSlice.svelte
index 98c0239..609267a 100644
--- a/src/routes/home-slices/HyprPerksSlice.svelte
+++ b/src/routes/home-slices/HyprPerksSlice.svelte
@@ -6,32 +6,34 @@
 	import TitleSubtile from '$lib/components/Title/TitleSubtile.svelte'
 	import Title from '$lib/components/Title/TitleWrapper.svelte'
 	import Video from '$lib/components/Video.svelte'
-	import smoothDefaultImage from '$lib/images/features/smooth_default.webp'
-	import tileDefaultImage from '$lib/images/features/tiling_default.webp'
+	import firstClassDefaultImage from '$lib/images/features/first-class_default.webp'
+	import firstClassHoverImage from '$lib/images/features/first-class_hover.webp'
+	import easyImage from '$lib/images/features/easy.webp'
+	import beautifulImage from '$lib/images/features/beautiful-perky.webp'
 
-	import { accountsLink, forumLink } from '$lib/constants'
+	import { hyprperksLink } from '$lib/constants'
 	import Button from '$lib/components/Button.svelte'
 </script>
 
 <section class="relative w-full">
-	<div class="mb-10 md:mb-32">
-		<div class="h-[2px] w-full bg-gradient-to-l from-transparent via-white/20 to-transparent" />
+	<div class="mb-16 md:mb-32">
+		<div class="h-[2px] w-full bg-gradient-to-l from-transparent via-cyan-400/50 to-transparent" />
 	</div>
 	<div class="top-gradient"></div>
 
 	<div class="relative mx-auto mb-12 max-w-5xl px-8 md:mb-20">
-		<Title>
+		<Title class="mb-10">
 			<TitleHeading slot="title" class="">Hyprperks</TitleHeading>
 			<TitleSubtile class="max-w-[55ch]">
-				<a href={accountsLink} class=" text-primary hover:underline" target="_blank"
-					>Buy first-party configurations</a
+				<a href={hyprperksLink} class=" text-primary hover:underline" target="_blank"
+					>Subsribe for first-party configurations, priority support</a
 				>
-				and support the development.<br />Fully optional, but crafted with love
+				and to support the development. Fully optional, but crafted with love
 			</TitleSubtile>
 		</Title>
 
 		<CardsContainer
-			class="group grid w-full flex-wrap gap-6 text-lg font-medium text-white/70 lg:grid-cols-2 lg:grid-rows-2 lg:gap-4"
+			class="group flex w-full flex-col  gap-8 text-lg font-medium text-white/70 md:grid lg:grid-cols-2 lg:grid-rows-2 lg:gap-4"
 		>
 			<Card class="col-span-2 row-span-2 aspect-video min-h-[20rem]" color="cyan">
 				<div class="grid h-full">
@@ -54,38 +56,48 @@
 						Always working, actively developed, one-click-update
 					</p>
 
-					<div class="_wrapper absolute inset-0 select-none" aria-hidden="true">
-						<div class="feature-image">
-							<img
-								src={smoothDefaultImage}
-								class="feature-image_inner"
-								alt=""
-								aria-hidden="true"
-								loading="lazy"
-							/>
-						</div>
+					<div
+						class="_wrapper group/fc absolute bottom-0 right-0 top-0 size-1/2 select-none md:inset-0 md:size-full"
+						aria-hidden="true"
+					>
+						<img
+							src={firstClassDefaultImage}
+							class="absolute inset-0 transition-opacity duration-1000 group-hover/fc:opacity-0"
+							alt=""
+							aria-hidden="true"
+							loading="lazy"
+						/>
+						<img
+							src={firstClassHoverImage}
+							class="absolute inset-0 opacity-0 transition-opacity duration-1000 group-hover/fc:opacity-100"
+							alt=""
+							aria-hidden="true"
+							loading="lazy"
+						/>
 					</div>
 				</div>
 			</Card>
+
 			<Card class="min-h-[20rem]" color="purple">
 				<div class="flex h-full flex-col justify-end p-8 sm:p-12">
 					<div class="z-20 mix-blend-color-dodge">
-						<h2 class="mb-6 text-5xl font-bold text-slate-400">Easy</h2>
+						<h2 class="mb-6 text-5xl font-bold text-slate-300">Easy</h2>
 						<p class="max-w-[60ch]">Designed to stay out of your way, and let you do your thing.</p>
 					</div>
 
 					<img
-						src={configDefaultImage}
-						class="absolute inset-x-0 top-0 size-full object-contain"
+						src={easyImage}
+						class="absolute inset-x-0 top-0 size-full w-full object-cover bg-blend-screen"
 						alt=""
 						aria-hidden="true"
 						loading="lazy"
 					/>
 				</div>
 			</Card>
+
 			<Card class="min-h-[20rem]" color="purple">
-				<div class="flex h-full flex-col justify-end p-8 sm:p-12">
-					<div class="z-20 mix-blend-color-dodge">
+				<div class="flex h-full flex-col justify-end">
+					<div class="z-20 p-8 mix-blend-color-dodge sm:p-12">
 						<h2 class="mb-6 text-5xl font-bold text-slate-300">Beautiful</h2>
 						<p class="max-w-[60ch]">
 							Customizable, with automatic theming for everything. Crafted with love from the
@@ -94,8 +106,8 @@
 					</div>
 
 					<img
-						src={tileDefaultImage}
-						class="absolute -top-20 object-contain"
+						src={beautifulImage}
+						class="absolute size-full object-cover"
 						alt=""
 						aria-hidden="true"
 						loading="lazy"
@@ -103,21 +115,17 @@
 				</div>
 			</Card>
 
-			<Card class="col-span-full flex min-h-40 items-center  justify-center "
-				><div class="flex size-full justify-center self-center">
-					<div class="flex items-center justify-between gap-6">
-						<div class="flex flex-col gap-1">
-							<h3 class="text-white">Support the development</h3>
-							<p>Hyprland itself will always stay free and open-source</p>
-						</div>
-						<div
-							class="flex flex-col items-center justify-center rounded-2xl border border-cyan-200/30 bg-cyan-400/5 px-5 py-2 md:px-20 md:py-8"
-						>
-							<Button type="fancyOutline" size="xl">Buy now</Button>
-						</div>
-					</div>
-				</div></Card
+			<div
+				class=" col-span-full mt-8 flex size-full w-full items-center justify-center self-center"
 			>
+				<div class="flex items-center justify-between gap-6">
+					<div
+						class="flex flex-col items-center justify-center rounded-2xl border border-cyan-200/30 bg-cyan-400/5 px-20 py-8"
+					>
+						<Button type="fancyOutline" href={hyprperksLink} size="xl">Subscribe now</Button>
+					</div>
+				</div>
+			</div>
 		</CardsContainer>
 	</div>
 </section>