diff --git a/src/routes/DiscordProfilePicture.svelte b/src/routes/DiscordProfilePicture.svelte
index 33c3c64..4ad277a 100755
--- a/src/routes/DiscordProfilePicture.svelte
+++ b/src/routes/DiscordProfilePicture.svelte
@@ -75,22 +75,22 @@
 </script>
 
 <div
-	class={clsx('absolute top-0 left-0 select-none touch-none ', containerClass)}
+	class={clsx('absolute left-0 top-0 touch-none select-none ', containerClass)}
 	style:translate={coordinates.map((xy) => xy + 'px').join(' ')}
 	style="width: {size}px; height: {size}px;--delay: {delay}ms;"
 >
 	<div
 		class={clsx(
-			'absolute inset-0 w-full h-full group  select-none touch-none',
+			'group absolute inset-0 h-full w-full  touch-none select-none',
 			isAnimating && 'opacity-0'
 		)}
 		style:translate={`calc( ${$dragCoordinates[0]}px  ) ${$dragCoordinates[1]}px`}
 		use:inview={{ unobserveOnEnter: true, threshold: 0.4 }}
 		class:_animate={isAnimating && hasEnteredView}
-		on:inview_enter={() => setTimeout(() => (hasEnteredView = true), 750)}
+		on:inview_enter={() => setTimeout(() => (hasEnteredView = true), 550)}
 	>
 		<img
-			class="w-full h-full group select-none touch-none outline-4 outline rounded-[50%] {$$restProps.class}"
+			class="group h-full w-full touch-none select-none rounded-[50%] outline outline-4 {$$restProps.class}"
 			bind:this={imageElement}
 			src={image}
 			alt={'community profile picture'}
@@ -101,7 +101,7 @@
 
 		{#if quote}
 			<div
-				class="absolute tracking-wide opacity-0 -top-6 px-2 py-1 rounded left-1/2 -translate-x-1/2 bg-slate-800/50 pointer-events-none font-medium text-sm group-hover:opacity-100 select-none duration-150"
+				class="pointer-events-none absolute -top-6 left-1/2 -translate-x-1/2 select-none rounded bg-slate-800/50 px-2 py-1 text-sm font-medium tracking-wide opacity-0 duration-150 group-hover:opacity-100"
 			>
 				{quote}
 			</div>
diff --git a/src/routes/Hero.svelte b/src/routes/Hero.svelte
index 45199a4..5f55da4 100755
--- a/src/routes/Hero.svelte
+++ b/src/routes/Hero.svelte
@@ -23,25 +23,27 @@
 	}}
 >
 	<!-- Hero text and logo -->
-	<div class="x z-10 flex h-screen min-h-max flex-col items-center justify-center">
+	<div
+		class="pointer-events-none z-10 flex h-screen min-h-max flex-col items-center justify-center"
+	>
 		<div class="-mt-20 mb-8 flex flex-col items-center gap-6 text-center">
 			<img src={Logo} alt="Hyprland Logo" class="ani-in mb-6 h-48 fill-mode-backwards" />
 			<div class="ani-in relative fill-mode-backwards [animation-delay:384ms]">
 				<h1
-					class="hyprgradient bg-clip-text p-2 font-london text-6xl font-bold tracking-wider text-transparent md:text-7xl md:tracking-widest"
+					class="hyprgradient pointer-events-auto bg-clip-text p-2 font-london text-6xl font-bold tracking-wider text-transparent md:text-7xl md:tracking-widest"
 				>
 					Hyprland
 				</h1>
 			</div>
 		</div>
 		<h2
-			class="ani-in mb-10 text-center text-2xl font-medium leading-9 text-blue-200/80 fill-mode-backwards [animation-delay:944ms]"
+			class="ani-in pointer-events-auto mb-10 text-center text-2xl font-medium leading-9 text-blue-200/80 fill-mode-backwards [animation-delay:944ms]"
 		>
 			Dynamic tiling Wayland compositor<br />with the looks
 		</h2>
 
 		<div
-			class="flex items-center gap-6 duration-500 animate-in fade-in-0 slide-in-from-bottom-4 fill-mode-backwards [animation-delay:1390ms]"
+			class="pointer-events-auto flex items-center gap-6 duration-500 animate-in fade-in-0 slide-in-from-bottom-4 fill-mode-backwards [animation-delay:1390ms]"
 		>
 			<a href="https://wiki.hyprland.org/Getting-Started/Installation/">
 				<Button size="lg">Install</Button>
@@ -68,31 +70,9 @@
 			{/each}
 		</div>
 	{/if} -->
-
-	<!-- Gradient background -->
-	<div
-		class="max-w-screen absolute right-0 top-0 -z-50 h-full min-h-screen w-screen overflow-hidden"
-	>
-		<div class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
-			<div
-				class="bg bg-gradient-radial from-sky-400/20 via-emerald-300/0 to-emerald-200/0"
-				style="--seed: 20;"
-			/>
-		</div>
-		<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
-			<div
-				class="bg bg-gradient-radial from-blue-500/10 to-cyan-400/0"
-				style="--offset: -3s; --seed: 4; --duration:102s"
-			/>
-		</div>
-	</div>
 </section>
 
 <style lang="postcss">
-	.bg {
-		width: calc(120vw + 500px);
-		height: calc(120vh + 500px);
-	}
 
 	@keyframes slidein {
 		from {
diff --git a/src/routes/HeroBackground.svelte b/src/routes/HeroBackground.svelte
index 1c2018c..fa21f35 100755
--- a/src/routes/HeroBackground.svelte
+++ b/src/routes/HeroBackground.svelte
@@ -1,15 +1,16 @@
 <script>
 	import baseColors from 'tailwindcss/colors'
 
-	const amountTiles = 4 // Has to be an even number as the tiles get "mirrored"
-	const workspaceHeight = 150
-	const gapLength = 24
+	const workspacesPerRow = 4
+	const workspaceHeight = 240
+	const gapLength = 32
 	const colors = [baseColors.blue[500], baseColors.cyan[400], baseColors.sky[500]]
-	const leftColumns = Array.from({ length: 3 }, () => generateRow(amountTiles))
-	const rightColumns = Array.from({ length: 3 }, () => generateRow(amountTiles))
-	const leftTotalLength = leftColumns
-		.slice(0, leftColumns.length / 2)
-		.reduce((total, current, index, array) => total + workspaceHeight + gapLength, 0)
+	const leftColumns = Array.from({ length: 3 }, () => generateRow(workspacesPerRow))
+	const rightColumns = Array.from({ length: 3 }, () => generateRow(workspacesPerRow))
+	/** Used to transform the rows by their own lenght*/
+	const height = workspacesPerRow * (workspaceHeight + gapLength)
+
+	let wrapperElement, mouseX, mouseY
 
 	function generateRow(amount) {
 		const base = Array.from({ length: amount }).map(generateWorkspace)
@@ -36,12 +37,15 @@
 	}
 </script>
 
-<div class="wrapper" aria-hidden="true">
+<div class="wrapper" aria-hidden="true" bind:this={wrapperElement}>
 	<div
 		class="inner-wrapper"
-		style={`--amount: ${amountTiles}; --workspace-gap: ${gapLength}px;--workspace-height: ${workspaceHeight}px;`}
+		style={`--amount: ${workspacesPerRow}; --workspace-gap: ${gapLength}px;--workspace-height: ${workspaceHeight}px; --length: ${height}px;`}
 	>
-		<div class="columns left" style={`--length: ${leftTotalLength}; `}>
+		<!-- Gradient background -->
+		<div class="top-light" />
+
+		<div class="columns left" aria-hidden="true">
 			{#each leftColumns as column}
 				<div class="column">
 					{#each column as workspace}
@@ -59,7 +63,7 @@
 			{/each}
 		</div>
 
-		<div class="columns right" style={`--length: ${leftTotalLength}; `}>
+		<div class="columns right" aria-hidden="true">
 			{#each rightColumns as column}
 				<div class="column">
 					{#each column as workspace}
@@ -81,13 +85,10 @@
 
 <style lang="postcss">
 	.left {
-		transform: rotateY(10deg);
-		mask-image: linear-gradient(to right, black, transparent);
-		/* margin-left: -2200px; */
+		transform: rotateY(10deg) rotateZ(90deg);
 	}
 	.right {
-		transform: rotateY(-10deg);
-		/* margin-left: -2200px; */
+		transform: rotateY(-10deg) rotateZ(-90deg);
 	}
 
 	.wrapper {
@@ -95,47 +96,66 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		height: 100%;
-		/* margin-top: -200px; */
+		height: calc(100vh - 48px);
+		contain: strict;
+
+		@apply max-sm:hidden;
 	}
 
 	.inner-wrapper {
 		position: absolute;
 		perspective: 100px;
 		height: 100%;
-		width: max(100vw, 1100px);
-		/* translate: -50% 0px; */
-		/* overflow: visible; */
+		width: max(100vw, 2200px);
 		contain: strict;
 		display: flex;
-		border: red solid 1px;
-		mask-image: radial-gradient(circle, transparent 10%, black 50%);
+		mask-image: linear-gradient(to top, transparent 0%, black 20%);
+
+		&::after {
+			content: ' ';
+			background: radial-gradient(80% 250%, theme(colors.black) 10%, transparent 50%);
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			translate: -50% -50%;
+			width: 100%;
+			height: 100%;
+			z-index: -10;
+			pointer-events: none;
+		}
 	}
 
 	.columns {
 		display: flex;
 		gap: 2rem;
 		flex-grow: 1;
-		mask-image: linear-gradient(to top, transparent 10%, black);
-		/* border: cyan solid 1px; */
+		mask-image: linear-gradient(to top, transparent 0%, black 30%);
+		z-index: -10;
+		height: var(--length);
+		min-height: var(--length);
+		max-height: var(--length);
 	}
 
 	.column {
 		display: flex;
 		flex-direction: column;
-		height: 100%;
+		height: 200%;
 		width: 100%;
-		animation: loop 20s infinite linear;
 		gap: var(--workspace-gap);
-		/* width: 400px; */
+		z-index: -50;
+		animation: loop 98s infinite linear;
+
+		@media (prefers-reduced-motion) {
+			animation: none;
+		}
 	}
 
 	.workspace {
 		display: flex;
 		gap: 8px;
-		height: var(--workspace-height);
+		min-height: var(--workspace-height);
+		max-height: var(--workspace-height);
 		width: 100%;
-		/* border: red solid 1px; */
 	}
 
 	.tiles {
@@ -143,35 +163,44 @@
 		flex-direction: column;
 		gap: 8px;
 		flex-grow: 1;
-		/* border: blue 1px solid; */
 	}
 
 	.tile {
-		border: var(--color) 1px solid;
+		border: var(--color) 2px solid;
 		flex-grow: 1;
 		height: var(--height);
 		border-radius: 12px;
 		pointer-events: auto;
-		transition: all 140ms ease-in-out;
+		transition: all 280ms ease-in-out;
 
 		&:hover {
-			animation: flicker infinite 800ms;
+			background: color-mix(in hsl, var(--color), transparent 20%);
+			box-shadow:
+				0px 0px 10px var(--color),
+				0px 0px 40px var(--color);
 		}
 	}
 
+	.top-light {
+		background: radial-gradient(
+			100% 80% at top,
+			theme(colors.cyan.500 / 60%) 0%,
+			theme(colors.sky.500 / 20%),
+			transparent
+		);
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		z-index: 10;
+		top: 0;
+		left: 0;
+		pointer-events: none;
+	}
+
 	@keyframes loop {
 		100% {
-			translate: 0px calc(-1px * var(--length));
-		}
-	}
-
-	@keyframes flicker {
-		0% {
-			background: mix-color(var(--color), transparent 0%);
-		}
-		100% {
-			background: var(--color);
-			box-shadow: 0px 0px 10px var(--color);
+			translate: 0px calc(-1 * var(--length));
+			/* translate: 0px -50%; */
 		}
 	}
 </style>
diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index 2a8647f..8d0e995 100755
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -25,7 +25,7 @@
 		class="flex items-center gap-4 rounded-full py-1 font-london text-sm font-bold tracking-wider text-white lg:bg-black/50 lg:px-4 lg:py-2 lg:backdrop-blur"
 	>
 		<img src={logo} alt="Hyprland Logo" class="w-6" /><span
-			class="hidden text-xl tracking-widest lg:mt-1 lg:block">Hyprland</span
+			class="hidden text-lg tracking-widest lg:mt-1 lg:block">Hyprland</span
 		></a
 	>
 
diff --git a/src/routes/PreviewRiceSlice.svelte b/src/routes/PreviewRiceSlice.svelte
index c8fc7b0..0324062 100755
--- a/src/routes/PreviewRiceSlice.svelte
+++ b/src/routes/PreviewRiceSlice.svelte
@@ -40,7 +40,7 @@
 </script>
 
 <section
-	class="relative -mb-4 -mt-8 w-full max-w-[1400px] px-1 animate-in fade-in-0 slide-in-from-bottom-10 fill-mode-backwards [animation-delay:1700ms] [animation-duration:2000ms] lg:px-8 {$$restProps.class}"
+	class="relative -mb-4 -mt-8 w-full max-w-[1400px] px-1 animate-in fade-in-0 slide-in-from-bottom-10 fill-mode-backwards [animation-delay:1700ms] [animation-duration:2000ms] lg:px-8 z-10{$$restProps.class}"
 	class:isVisible
 >
 	<div
@@ -78,6 +78,7 @@
 				isShowingControls ? 'opacity-100' : 'pointer-events-none'
 			)}
 		>
+			<!-- Currently there is no audio. Component might get refractored into a stand-alone player, so lets leave that here -->
 			<!-- <button
 				class="absolute bottom-4 right-4 h-10 w-10 rounded-full bg-black/5 p-2 opacity-70 hover:opacity-100"
 				on:click|stopPropagation={toggleMute}