diff --git a/package-lock.json b/package-lock.json
index 6729081a9..3a90fb6a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19277,9 +19277,9 @@
 			}
 		},
 		"node_modules/hls.js": {
-			"version": "1.5.9",
-			"resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.5.9.tgz",
-			"integrity": "sha512-CZBc086Ljw7Ie1IGOGUPLiINBPuJcv53O3jPRjH9aJJcbaOxAm7+jf3/TKpNZlCjCjXIz0GhmQCVAyraF7/SkA=="
+			"version": "1.5.11",
+			"resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.5.11.tgz",
+			"integrity": "sha512-q3We1izi2+qkOO+TvZdHv+dx6aFzdtk3xc1/Qesrvto4thLTT/x/1FK85c5h1qZE4MmMBNgKg+MIW8nxQfxwBw=="
 		},
 		"node_modules/hoist-non-react-statics": {
 			"version": "3.3.2",
diff --git a/website/src/app/[lang]/[region]/v2/(home)/(components)/mux-video.tsx b/website/src/app/[lang]/[region]/v2/(home)/(components)/mux-video.tsx
index b2bc3dc58..24d6d3712 100644
--- a/website/src/app/[lang]/[region]/v2/(home)/(components)/mux-video.tsx
+++ b/website/src/app/[lang]/[region]/v2/(home)/(components)/mux-video.tsx
@@ -1,19 +1,65 @@
 'use client';
 
+import { PauseIcon, PlayIcon, SpeakerWaveIcon, SpeakerXMarkIcon } from '@heroicons/react/24/solid';
 import MuxVideo from '@mux/mux-video-react';
+import { Button } from '@socialincome/ui';
+import { useEffect, useRef, useState } from 'react';
 
 const MuxVideoComponent = () => {
+	const ref = useRef<HTMLVideoElement>(null);
+	const [muted, setMuted] = useState(true);
+	const [playing, setPlaying] = useState(false);
+
+	useEffect(() => {
+		if (playing) {
+			ref.current?.play();
+		} else {
+			ref.current?.pause();
+		}
+	}, [playing]);
+
 	return (
-		<MuxVideo
-			className="h-full w-full object-cover"
-			playbackId="KHN8ZJ7Zn7noPy8AHUToA4VSf017EdoKpkKmyp02Wr13o"
-			// playbackId="QAjK00JKjEY9lojsht02VLckXDzrETx02glBSQ2WR9y3nk" //Portrait video
-			poster="https://image.mux.com/KHN8ZJ7Zn7noPy8AHUToA4VSf017EdoKpkKmyp02Wr13o/thumbnail.jpg?time=0"
-			loop
-			muted
-			autoPlay
-			playsInline
-		/>
+		<>
+			<MuxVideo
+				ref={ref}
+				className="h-full w-full object-cover"
+				playbackId="KHN8ZJ7Zn7noPy8AHUToA4VSf017EdoKpkKmyp02Wr13o"
+				// playbackId="QAjK00JKjEY9lojsht02VLckXDzrETx02glBSQ2WR9y3nk" //Portrait video
+				poster="https://image.mux.com/KHN8ZJ7Zn7noPy8AHUToA4VSf017EdoKpkKmyp02Wr13o/thumbnail.jpg?time=0"
+				loop
+				muted={muted}
+				autoPlay={playing}
+				playsInline
+			/>
+			<div className="absolute bottom-16 left-8 z-10">
+				<div className="flex flex-row space-x-2">
+					<Button
+						variant="ghost"
+						size="icon"
+						className="bg-muted rounded-full p-2.5"
+						onClick={() => setPlaying((prevState) => !prevState)}
+					>
+						{playing ? (
+							<PauseIcon className="text-muted-foreground h-6 w-6" />
+						) : (
+							<PlayIcon className="text-muted-foreground h-6 w-6" />
+						)}
+					</Button>
+					<Button
+						variant="ghost"
+						size="icon"
+						className="bg-muted rounded-full p-2.5"
+						onClick={() => setMuted((prevState) => !prevState)}
+					>
+						{muted ? (
+							<SpeakerXMarkIcon className="text-muted-foreground h-6 w-6" />
+						) : (
+							<SpeakerWaveIcon className="text-muted-foreground h-6 w-6" />
+						)}
+					</Button>
+				</div>
+			</div>
+		</>
 	);
 };
 
diff --git a/website/src/app/[lang]/[region]/v2/(home)/(sections)/hero-video.tsx b/website/src/app/[lang]/[region]/v2/(home)/(sections)/hero-video.tsx
index 10374e295..f1e9a7f18 100644
--- a/website/src/app/[lang]/[region]/v2/(home)/(sections)/hero-video.tsx
+++ b/website/src/app/[lang]/[region]/v2/(home)/(sections)/hero-video.tsx
@@ -13,18 +13,19 @@ export async function HeroVideo({ lang }: DefaultParams) {
 	return (
 		<div className="relative h-screen w-full">
 			<MuxVideoComponent />
-			<div className="absolute left-2 right-2 top-[10%] mx-auto max-w-4xl md:top-[30%]">
-				<div className="flex flex-col items-center">
-					<div className="text-center text-white">
+			<div className="absolute inset-2">
+				<div className=" flex h-full flex-col justify-around">
+					<div className="hidden md:block" />
+					<div className="mx-auto max-w-4xl text-center text-white">
 						{translator.t<{ text: string; color?: FontColor }[]>('section-1.title-1').map((title, index) => (
-							<Typography as="span" size="6xl" weight="medium" key={index} lineHeight="normal" color={title.color}>
+							<Typography as="span" size="6xl" weight="medium" key={index} lineHeight="tight" color={title.color}>
 								{title.text}{' '}
 							</Typography>
 						))}
 					</div>
+					<Button className="mx-auto hidden md:block">Handle Jetzt</Button>
 				</div>
 			</div>
-			<Button className="absolute inset-x-0 bottom-16 mx-auto w-48">Handle Jetzt</Button>
 		</div>
 	);
 }