diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index 7440eb6..0000000
--- a/.prettierrc
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-	"useTabs": true,
-	"singleQuote": true,
-	"semi": false,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"pluginSearchDirs": ["."],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
-}
diff --git a/package.json b/package.json
index 8e9a458..85a9429 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
 		"@fontsource/ibm-plex-mono": "^5.0.7",
 		"clsx": "^2.0.0",
 		"interactjs": "^1.10.18",
+		"prettier-plugin-tailwindcss": "^0.4.1",
 		"remeda": "^1.24.0",
 		"simplex-noise": "^4.0.1",
 		"svelte-inview": "^4.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 02b0daa..956336d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ dependencies:
   interactjs:
     specifier: ^1.10.18
     version: 1.10.18
+  prettier-plugin-tailwindcss:
+    specifier: ^0.4.1
+    version: 0.4.1(prettier-plugin-svelte@3.0.3)(prettier@3.0.1)
   remeda:
     specifier: ^1.24.0
     version: 1.24.0
@@ -1984,7 +1987,62 @@ packages:
     dependencies:
       prettier: 3.0.1
       svelte: 4.1.2
-    dev: true
+
+  /prettier-plugin-tailwindcss@0.4.1(prettier-plugin-svelte@3.0.3)(prettier@3.0.1):
+    resolution: {integrity: sha512-hwn2EiJmv8M+AW4YDkbjJ6HlZCTzLyz1QlySn9sMuKV/Px0fjwldlB7tol8GzdgqtkdPtzT3iJ4UzdnYXP25Ag==}
+    engines: {node: '>=12.17.0'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@shufo/prettier-plugin-blade': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      prettier: ^2.2 || ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+      prettier-plugin-twig-melody: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@shufo/prettier-plugin-blade':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      prettier-plugin-twig-melody:
+        optional: true
+    dependencies:
+      prettier: 3.0.1
+      prettier-plugin-svelte: 3.0.3(prettier@3.0.1)(svelte@4.1.2)
+    dev: false
 
   /prettier@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
@@ -1996,7 +2054,6 @@ packages:
     resolution: {integrity: sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==}
     engines: {node: '>=14'}
     hasBin: true
-    dev: true
 
   /prompts@2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
diff --git a/prettier.config.cjs b/prettier.config.cjs
new file mode 100644
index 0000000..09d42c1
--- /dev/null
+++ b/prettier.config.cjs
@@ -0,0 +1,10 @@
+module.exports = {
+	useTabs: true,
+	singleQuote: true,
+	semi: false,
+	trailingComma: 'none',
+	printWidth: 100,
+	plugins: ['prettier-plugin-svelte', 'prettier-plugin-tailwindcss'],
+	tailwindFunctions: ['clsx'],
+	overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }]
+}
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 8d0e8e1..7f04a41 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -15,10 +15,10 @@
 </script>
 
 <footer
-	class="bg-black/50 border-t border-blue-500 relative flex items-center justify-center w-screen _shadow"
+	class="bg-black/50 mt-16 md:mt-24 lg:mt-32 border-t border-blue-500 relative flex items-center justify-center w-screen"
 >
 	<div
-		class=" flex flex-wrap gap-12 justify-between px-8 py-14 max-w-5xl text-slate-300 items-start"
+		class="flex flex-wrap gap-12 justify-between px-8 py-14 max-w-5xl text-slate-300 items-start"
 	>
 		<div class="flex flex-col gap-4">
 			<div class="text-cyan-600 text-sm uppercase font-bold">> Developers</div>
diff --git a/src/lib/components/Title.svelte b/src/lib/components/Title.svelte
new file mode 100644
index 0000000..5841f3e
--- /dev/null
+++ b/src/lib/components/Title.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { animateIn } from '$lib/Helper.mjs'
+</script>
+
+<div use:animateIn={{ slide: 24, fade: 0 }} class="text-center {$$restProps.class}">
+	<div class="font-extrabold mb-3 text-slate-300">
+		<slot name="pre" />
+	</div>
+
+	<h1 class="text-6xl md:text-8xl font-bold text-center mb-8">
+		<slot name="title">No title given!!!</slot>
+	</h1>
+
+	<div class="text-center text-lg font-extrabold text-slate-300"><slot name="subtitle" /></div>
+
+	<slot />
+</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index efa3907..253fd9a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,7 +6,7 @@
 	import '@fontsource/ibm-plex-mono/500.css'
 </script>
 
-<div class="flex flex-col min-h-screen">
+<div class="flex flex-col min-h-screen overflow-x-hidden">
 	<Navbar />
 
 	<main class="mx-auto w-full flex flex-col">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0da6c55..37d2296 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -14,12 +14,10 @@
 
 <Hero />
 
-<div class="-mt-8 mx-auto gap-[16rem] flex flex-col items-center">
-	<div class="px-8 mx-auto flex flex-col items-center lg:px-32">
-		<PreviewRiceSlice class="mb-52" />
+<div class="-mt-8 gap-20 md:gap-[16rem] flex flex-col items-center">
+	<PreviewRiceSlice class="mb-52" />
 
-		<FeaturesSlice />
-	</div>
+	<FeaturesSlice />
 
 	<HallOfFameSlice />
 
@@ -28,7 +26,5 @@
 	<InstallSlice />
 </div>
 
-<div class="mt-[16rem]" />
-
 <style>
 </style>
diff --git a/src/routes/CommunitySlice.svelte b/src/routes/CommunitySlice.svelte
index 1f2b2bf..3dc69d4 100644
--- a/src/routes/CommunitySlice.svelte
+++ b/src/routes/CommunitySlice.svelte
@@ -8,6 +8,7 @@
 	import DiscordProfilePicture from './DiscordProfilePicture.svelte'
 	import { animateIn } from '$lib/Helper.mjs'
 	import { setContext } from 'svelte'
+	import Title from '$lib/components/Title.svelte'
 
 	let sectionElement
 	let isDraggingChan = false
@@ -176,12 +177,13 @@
 	class="relative flex flex-col items-center w-screen overflow-hidden min-h-max h-[1100px] -mb-[200px] max-w-[100vw]"
 	bind:this={sectionElement}
 >
-	<div use:animateIn={{ slide: 24, fade: 0 }}>
-		<h1 class="text-8xl font-bold text-center mb-8">Join a great<br />community</h1>
-		<div class="text-center text-lg font-extrabold text-slate-300">
+	<Title>
+		<span slot="title">Join a great<br />community</span>
+
+		<span slot="subtitle">
 			Get help from Distro Hoppers, Haiku writers,<br />Hydrohomies and human_(probably)
-		</div>
-	</div>
+		</span>
+	</Title>
 
 	<div class="flex flex-col items-center gap-2 group mt-16">
 		<a
diff --git a/src/routes/FeatureCard.svelte b/src/routes/FeatureCard.svelte
index ab9d65f..8e58f61 100644
--- a/src/routes/FeatureCard.svelte
+++ b/src/routes/FeatureCard.svelte
@@ -3,6 +3,7 @@
 	import { getContext } from 'svelte'
 	import { mouseContext } from './FeaturesSlice.svelte'
 	import { spring } from 'svelte/motion'
+	import Title from '$lib/components/Title.svelte'
 	export let title
 	export let color = 'cyan'
 
@@ -69,7 +70,7 @@
 	class:purpleGradient={color === 'purple'}
 	role="contentinfo"
 >
-	<div class="p-12 z-10 w-full h-full">
+	<div class="p-8 md:p-12 z-10 w-full h-full">
 		<h1 class="text-5xl font-bold mb-6 text-white">{title}</h1>
 
 		<slot>Nothing in the slot here</slot>
@@ -81,7 +82,7 @@
 
 <style lang="postcss">
 	.card {
-		@apply rounded-3xl relative w-full h-full bg-slate-900 hover:bg-blue-900 duration-300 transition-colors  flex items-center justify-center;
+		@apply relative flex h-full w-full items-center justify-center rounded-3xl bg-slate-900  transition-colors duration-300 hover:bg-blue-900;
 		z-index: 2;
 		contain: paint style layout;
 	}
@@ -126,7 +127,7 @@
 	}
 
 	.gradient {
-		@apply absolute inset-0  pointer-events-none w-full h-full;
+		@apply pointer-events-none absolute  inset-0 h-full w-full;
 		width: calc(100% - 2px);
 		border-radius: inherit;
 		height: calc(100% - 2px);
diff --git a/src/routes/FeaturesSlice.svelte b/src/routes/FeaturesSlice.svelte
index 967850e..164997f 100644
--- a/src/routes/FeaturesSlice.svelte
+++ b/src/routes/FeaturesSlice.svelte
@@ -10,7 +10,7 @@
 	import ActiveGitIcon from '~icons/gg/git-branch'
 	import ShortcutsIcon from '~icons/gg/push-chevron-right-o'
 	import BleedingEdgeIcon from '~icons/gg/controller'
-	import { animateIn } from '$lib/Helper.mjs'
+	import Title from '$lib/components/Title.svelte'
 
 	/**
 	 * type {{name: string, github: string}}
@@ -40,11 +40,11 @@
 	}
 </script>
 
-<section class="flex flex-col items-center">
-	<div class="text-center" use:animateIn={{ fade: 0, slide: 24, duration: 1480, threshold: 0.4 }}>
-		<div class="font-extrabold mb-3 text-slate-300">TLDR</div>
-		<h1 class="text-8xl font-bold mb-14">Features</h1>
-	</div>
+<section class="px-3 md:px-8 flex flex-col items-center">
+	<Title>
+		<span slot="pre">TLDR</span>
+		<span slot="title">Features</span>
+	</Title>
 
 	<div
 		class="grid lg:grid-cols-2 lg:grid-rows-2 w-full gap-6 text-lg text-white/70 font-medium flex-wrap group"
@@ -92,6 +92,6 @@
 
 <style lang="postcss">
 	.icon-feature {
-		@apply flex gap-3 items-center justify-center font-bold opacity-60;
+		@apply flex items-center justify-center gap-3 font-bold opacity-60;
 	}
 </style>
diff --git a/src/routes/HallOfFameSlice.svelte b/src/routes/HallOfFameSlice.svelte
index d877bb0..98b2278 100644
--- a/src/routes/HallOfFameSlice.svelte
+++ b/src/routes/HallOfFameSlice.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { animateIn } from '$lib/Helper.mjs'
 	import Button from '$lib/components/Button.svelte'
+	import Title from '$lib/components/Title.svelte'
 	import FameRicePreview from './FameRicePreview.svelte'
 </script>
 
@@ -8,15 +9,15 @@
 	class="w-full relative flex flex-col items-center"
 	use:animateIn={{ fade: 0, slide: 24, duration: 3000, threshold: 0.1 }}
 >
-	<div class="absolute top-0 inset-x-0 z-30">
-		<div class="text-center font-extrabold mb-3 text-slate-300">
-			Memorials of the ricing legends
-		</div>
-		<h1 class="text-8xl font-bold text-center">Hall of Fame</h1>
+	<div class="px-4 -mb-40 z-20">
+		<Title>
+			<span slot="pre"> Memorials of the ricing legends </span>
+			<span slot="title">Hall of Fame</span>
+		</Title>
 	</div>
 
 	<div
-		class="w-full -mt-24 max-w-[1100px] flex relative flex-col gap-16 lg:gap-24 items-center justify-end overflow-hidden px-16 [perspective:100px]"
+		class="w-full -mt-24 max-w-[1100px] flex relative flex-col gap-16 lg:gap-24 items-center justify-end overflow-hidden md:px-16 [perspective:100px]"
 		use:animateIn={{ slide: 24, fade: 0.5, duration: 800 }}
 	>
 		<a class="absolute bottom-24 left-1/2 z-20 -translate-x-1/2" href="/#">
diff --git a/src/routes/InstallButton.svelte b/src/routes/InstallButton.svelte
index 29aef3e..b954512 100644
--- a/src/routes/InstallButton.svelte
+++ b/src/routes/InstallButton.svelte
@@ -23,14 +23,14 @@
 	})
 </script>
 
-<div class="flex gap-4 items-center">
+<div class="flex flex-col md:flex-row md:gap-4 gap-2 items-center">
 	<div
-		class="flex flex-col gap-1 justify-center items-center text-primary text-lg font-medium rounded-full w-32 h-32"
+		class="flex flex-col gap-3 justify-center items-center text-primary text-lg font-medium rounded-full w-32 h-32"
 	>
 		<img src={image} alt="Arch Logo" />{name}
 	</div>
 
-	<div class="flex flex-col relative font-mono">
+	<div class="flex flex-col relative font-mono mb-2">
 		<button
 			class="flex text-base transition-all min-w-[18rem] items-center font-medium rounded-full border-primary border py-3 pl-6 pr-6 gap-4 justify-center group active:scale-[1.01]"
 			on:click={$$slots.default ? undefined : copyCommand}
@@ -47,12 +47,14 @@
 				</div></slot
 			>
 		</button>
+
 		<div
 			class="text-green-400 [translate:-50%_0px] select-none pointer-events-none absolute -top-8 w-full left-1/2 hidden max-w-max"
 			class:copy={isShowingCopied}
 		>
 			Copied to clipboard ✔
 		</div>
+
 		{#if $$slots.extra}
 			<div class="text-xs font-sans opacity-80 absolute -bottom-6 w-full flex justify-center">
 				<slot name="extra" />
diff --git a/src/routes/InstallSlice.svelte b/src/routes/InstallSlice.svelte
index 3933e7f..7f22a4d 100644
--- a/src/routes/InstallSlice.svelte
+++ b/src/routes/InstallSlice.svelte
@@ -7,17 +7,15 @@
 	import LinkOutIcon from '~icons/akar-icons/link-out'
 	import InstallButton from './InstallButton.svelte'
 	import Button from '$lib/components/Button.svelte'
+	import Title from '$lib/components/Title.svelte'
 </script>
 
 <section>
-	<div use:animateIn={{ slide: 24, fade: 0 }}>
-		<h1 class="text-8xl mb-6 font-bold text-center">Install now</h1>
-		<div class="text-center text-lg mb-20 font-extrabold text-slate-300">
-			For your favourite distro
-		</div>
-	</div>
+	<Title class="mb-8">
+		<span slot="title">Install now</span><span slot="subtitle"> For your favourite distro </span>
+	</Title>
 
-	<div class="flex flex-col gap-6 items-center" use:animateIn={{ slide: 24, fade: 0 }}>
+	<div class="flex flex-col md:gap-6 gap-12 items-center" use:animateIn={{ slide: 24, fade: 0 }}>
 		<InstallButton name="Arch" command="pacman -S hyprland" image={archLogo}
 			><div slot="extra">
 				AUR git version: <a href="https://aur.archlinux.org/packages/hyprland-git/">hyprland-git</a>
diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index 2465b54..5cc8fe6 100644
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -3,39 +3,63 @@
 	import logo from '$lib/images/logo.png'
 	import GithubIcon from '~icons/ri/github-fill'
 	import DiscordIcon from '~icons/prime/discord'
+	import MenuIcon from '~icons/mingcute/menu-line'
+	import CloseIcon from '~icons/mingcute/close-line'
+
+	let isExpanded = false
+
+	function toggleExpanded() {
+		isExpanded = !isExpanded
+	}
 </script>
 
 <header
-	class="flex items-center z-30 justify-between fixed top-4 inset-x-6 rounded-full animate-in slide-in-from-top-1 [animation-delay:1250ms] fade-in-0 duration-1000 fill-mode-backwards"
+	class="flex items-center z-50 justify-between fixed top-0 inset-x-0 rounded-full animate-in slide-in-from-top-1 [animation-delay:0ms] lg:[animation-delay:1250ms] fade-in-0 duration-1000 fill-mode-backwards pt-2 px-6"
 >
 	<a
 		href="/"
-		class="flex gap-2 font-london tracking-wider px-4 py-1 text-sm rounded-full bg-black/50 items-center font-bold text-white"
+		class="flex gap-2 font-london tracking-wider lg:px-4 py-1 text-sm rounded-full lg:bg-black/50 items-center font-bold text-white"
 	>
-		<img src={logo} alt="Hyprland Logo" class="w-6" />Hyprland</a
+		<img src={logo} alt="Hyprland Logo" class="w-6" /><span class="lg:block hidden">Hyprland</span
+		></a
 	>
 
-	<nav class="flex font-semibold items-center backdrop-blur pl-5 rounded-full bg-black/50">
-		<ul class="flex gap-5 rounded-full items-center max-h-full h-full hover:[&_li]:text-cyan-300">
+	<button
+		class="lg:hidden rounded-full p-2 bg-black/10 z-50 backdrop-blur"
+		on:click={toggleExpanded}
+	>
+		{#if isExpanded}
+			<CloseIcon class="h-6 w-6 text-slate-200" />
+		{:else}
+			<MenuIcon class="h-6 w-6 text-slate-200 " />
+		{/if}
+	</button>
+
+	<nav class="nav" class:!flex={isExpanded}>
+		<ul
+			class="flex lg:flex-row flex-col gap-5 rounded-full items-center lg:max-h-full lg:h-full hover:[&_li]:text-cyan-300"
+		>
 			<li>
-				<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get_started</a>
+				<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get started</a>
 			</li>
 			<li>
 				<a href="https://wiki.hyprland.org">Wiki</a>
 			</li>
 			<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
-				<a href="/#">Wall_of_fame</a>
+				<a href="/#">Wall of fame</a>
 			</li>
 		</ul>
-		<ul class="border-purple-400 border mr-2 ml-4 rounded-full flex items-center gap-3 px-4">
+		<ul
+			class="lg:border-purple-400 lg:border lg:mr-2 lg:ml-4 lg:rounded-full flex items-center flex-row gap-3 px-4"
+		>
 			<li>
-				<a href="https://discord.com/invite/hQ9XvMUjjr">
-					<DiscordIcon class="w-8 h-8 p-1 rounded-full hover:bg-purple-500 hover:text-white" />
+				<a href="https://discord.com/invite/hQ9XvMUjjr" class="social-icon">
+					<DiscordIcon class="w-full h-full" />
 				</a>
 			</li>
 			<li>
-				<a href="https://github.com/hyprwm/Hyprland">
-					<GithubIcon class="w-8 h-8 p-1 hover:bg-purple-500 rounded-full hover:text-white" />
+				<a href="https://github.com/hyprwm/Hyprland" class="social-icon">
+					<GithubIcon class="w-full h-full" />
 				</a>
 			</li>
 		</ul>
@@ -45,3 +69,41 @@
 		>
 	</nav>
 </header>
+
+<style lang="postcss">
+	.nav {
+		/* Base classes */
+		font-weight: 600;
+
+		/* Mobile classes */
+		position: absolute;
+		width: 100vw;
+		height: 100vh;
+		inset: 0 0 0 0;
+		background: rgba(0, 0, 0, 0.6);
+		flex-direction: column;
+		align-items: center;
+		gap: 1rem;
+		backdrop-filter: blur(8px);
+		padding: 3rem 1rem;
+		display: none;
+
+		/* Desktop classes */
+		@media screen(lg) {
+			@apply relative flex-row rounded-full p-6 pl-5;
+		}
+	}
+
+	.social-icon {
+		width: 2.5rem;
+		height: 2.5rem;
+		display: block;
+
+		@apply rounded-full p-1 hover:bg-purple-500 hover:text-white;
+
+		@media screen(lg) {
+			width: 2rem;
+			height: 2rem;
+		}
+	}
+</style>
diff --git a/src/routes/PreviewRiceSlice.svelte b/src/routes/PreviewRiceSlice.svelte
index 8e9210d..966879c 100644
--- a/src/routes/PreviewRiceSlice.svelte
+++ b/src/routes/PreviewRiceSlice.svelte
@@ -2,22 +2,38 @@
 	import { inview } from 'svelte-inview'
 	import previewRice from '$lib/videos/end_4_rice_intro.mp4'
 	import previewRiceThumbnail from '$lib/videos/end_4_thumbnail.png'
+	import AudioIcon from '~icons/mingcute/volume-line'
+	import MuteIcon from '~icons/mingcute/volume-mute-line'
+	import clsx from 'clsx'
 
 	/** @type HTMLVideoElement */
 	let videoElement
+
+	let isShowingControls = false
+	let isMuted = true
+
+	function toggleMute() {
+		isMuted = !isMuted
+	}
+	function togglePlay() {
+		videoElement.paused ? videoElement.play() : videoElement.pause()
+	}
 </script>
 
 <section
-	class="max-w-7xl relative animate-in [animation-delay:1700ms] fade-in-0 fill-mode-backwards [animation-duration:2000ms] slide-in-from-bottom-10 z-20 {$$restProps.class}"
+	class="max-w-7xl px-1 -mb-4 lg:px-8 w-full relative animate-in [animation-delay:1700ms] fade-in-0 fill-mode-backwards [animation-duration:2000ms] slide-in-from-bottom-10 z-20 {$$restProps.class}"
 >
 	<div
-		class="rounded-xl opacity-20 overflow-hidden border-sky-400 border-2 scale-90 transition-all [transition-duration:1460ms]"
+		class="rounded-xl group opacity-20 overflow-hidden border-sky-400 border-2 scale-90 transition-all [transition-duration:1460ms] mx-3"
+		role="banner"
 		use:inview={{ unobserveOnEnter: true, threshold: 0.8 }}
 		on:inview_enter={({ detail: { node } }) => {
 			node.classList.remove('opacity-20')
 			node.classList.remove('scale-90')
 			videoElement.play()
 		}}
+		on:mouseenter={() => (isShowingControls = true)}
+		on:mouseleave={() => (isShowingControls = false)}
 	>
 		<video
 			bind:this={videoElement}
@@ -25,18 +41,36 @@
 			disablepictureinpicture="true"
 			disableremoteplayback="true"
 			loop
-			muted
+			muted={isMuted}
 			preload="auto"
 			poster={previewRiceThumbnail}
+			on:click={togglePlay}
 		/>
+		<div
+			class={clsx(
+				'opacity-0 transition-opacity z-20  ',
+				isShowingControls ? 'opacity-100' : 'pointer-events-none'
+			)}
+		>
+			<button
+				class="absolute p-2 h-10 bg-black/5 rounded-full w-10 bottom-4 right-8 opacity-70 hover:opacity-100"
+				on:click|stopPropagation={toggleMute}
+			>
+				{#if isMuted}
+					<MuteIcon class="h-full w-full" />
+				{:else}
+					<AudioIcon class="h-full w-full" />
+				{/if}
+			</button>
+		</div>
 	</div>
 	<div class="preview-rice-bg" aria="hidden" />
 </section>
 
 <style lang="postcss">
 	.preview-rice-bg {
-		@apply w-screen max-w-7xl h-full absolute -z-10 -top-20 left-1/2 -translate-x-1/2 opacity-50;
+		@apply absolute inset-0  -top-20 -z-10 w-screen opacity-50;
 		/* background-color: red; */
-		background-image: radial-gradient(closest-side, theme(colors.sky.500), transparent);
+		background-image: radial-gradient(min(150vw, 1400px) 50%, theme(colors.sky.500), transparent);
 	}
 </style>