diff --git a/src/App/Playbook/content/Showroom/index.js b/src/App/Playbook/content/Showroom/index.js
index 12a8efe6a3..b3ac7ea68e 100644
--- a/src/App/Playbook/content/Showroom/index.js
+++ b/src/App/Playbook/content/Showroom/index.js
@@ -8,11 +8,25 @@ const Showroom = () => (
 		<div className="container px-0 playbook-mozaic">
 			<div className="row">
 				<div className="col-sm">
-					<img
-						className=""
-						src={`${basename}img/documentation/playbook/playbook-showroom-1.png`}
-						alt="illustration swedbankpay playbook showroom"
-					/>
+					<video
+						playsInline
+						autoPlay
+						muted
+						loop
+						style={{ aspectRatio: "16 / 9" }}
+						height={399}
+						width={710}
+						poster={`${basename}designguide/assets/playbook/playbook-showroom-1.avif`}
+					>
+						<source
+							src={`${basename}designguide/assets/playbook/playbook-showroom-1.av1`}
+							type="video/webm"
+						/>
+						<source
+							src={`${basename}designguide/assets/playbook/playbook-showroom-1.mp4`}
+							type="video/mp4"
+						/>
+					</video>
 				</div>
 			</div>
 			<div className="row mt-4">
@@ -21,6 +35,7 @@ const Showroom = () => (
 						className=""
 						src={`${basename}img/documentation/playbook/playbook-showroom-2.png`}
 						alt="illustration swedbankpay playbook showroom"
+						style={{ "aspect-ratio": "16 / 9" }}
 					/>
 				</div>
 				<div className="col-sm">
@@ -28,6 +43,7 @@ const Showroom = () => (
 						className=""
 						src={`${basename}img/documentation/playbook/playbook-showroom-3.png`}
 						alt="illustration swedbankpay playbook showroom"
+						style={{ "aspect-ratio": "16 / 9" }}
 					/>
 				</div>
 				<div className="col-sm">
@@ -35,6 +51,7 @@ const Showroom = () => (
 						className=""
 						src={`${basename}img/documentation/playbook/playbook-showroom-4.png`}
 						alt="illustration swedbankpay playbook showroom"
+						style={{ "aspect-ratio": "16 / 9" }}
 					/>
 				</div>
 			</div>
@@ -44,6 +61,7 @@ const Showroom = () => (
 						className=""
 						src={`${basename}img/documentation/playbook/playbook-showroom-5.png`}
 						alt="illustration swedbankpay playbook showroom"
+						style={{ "aspect-ratio": "16 / 9" }}
 					/>
 				</div>
 			</div>
@@ -53,6 +71,7 @@ const Showroom = () => (
 						className=""
 						src={`${basename}img/documentation/playbook/playbook-showroom-6.png`}
 						alt="illustration swedbankpay playbook showroom"
+						style={{ "aspect-ratio": "16 / 9" }}
 					/>
 				</div>
 			</div>
@@ -71,6 +90,7 @@ const Showroom = () => (
 						src={`${basename}img/documentation/playbook/playbook-showroom-8.png`}
 						alt="illustration swedbankpay playbook showroom"
 						loading="lazy"
+						style={{ "aspect-ratio": "16 / 9" }}
 					/>
 				</div>
 			</div>
@@ -115,6 +135,7 @@ const Showroom = () => (
 						src={`${basename}img/documentation/playbook/playbook-showroom-13.png`}
 						alt="illustration swedbankpay playbook showroom"
 						loading="lazy"
+						style={{ "aspect-ratio": "16 / 9" }}
 					/>
 				</div>
 				<div className="col-sm">
@@ -123,6 +144,7 @@ const Showroom = () => (
 						src={`${basename}img/documentation/playbook/playbook-showroom-14.png`}
 						alt="illustration swedbankpay playbook showroom"
 						loading="lazy"
+						style={{ "aspect-ratio": "16 / 9" }}
 					/>
 				</div>
 				<div className="col-sm">
@@ -131,6 +153,7 @@ const Showroom = () => (
 						src={`${basename}img/documentation/playbook/playbook-showroom-15.png`}
 						alt="illustration swedbankpay playbook showroom"
 						loading="lazy"
+						style={{ "aspect-ratio": "16 / 9" }}
 					/>
 				</div>
 			</div>
@@ -141,6 +164,7 @@ const Showroom = () => (
 						src={`${basename}img/documentation/playbook/playbook-showroom-16.png`}
 						alt="illustration swedbankpay playbook showroom"
 						loading="lazy"
+						style={{ "aspect-ratio": "16 / 9" }}
 					/>
 				</div>
 			</div>
@@ -154,12 +178,18 @@ const Showroom = () => (
 					/>
 				</div>
 				<div className="col-sm-8">
-					<img
-						className=""
-						src={`${basename}img/documentation/playbook/playbook-showroom-18.png`}
-						alt="illustration swedbankpay playbook showroom"
-						loading="lazy"
-					/>
+					<picture>
+						<source
+							type="image/avif"
+							srcSet={`${basename}img/documentation/playbook/playbook-showroom-18.avif`}
+						/>
+						<img
+							src={`${basename}img/documentation/playbook/playbook-showroom-18.png`}
+							alt="illustration swedbankpay playbook showroom"
+							style={{ "aspect-ratio": "16 / 9" }}
+							loading="lazy"
+						/>
+					</picture>
 				</div>
 			</div>
 			<div className="row mt-4">
@@ -168,6 +198,7 @@ const Showroom = () => (
 						className=""
 						src={`${basename}img/documentation/playbook/playbook-showroom-19.png`}
 						alt="illustration swedbankpay playbook showroom"
+						style={{ "aspect-ratio": "16 / 9" }}
 						loading="lazy"
 					/>
 				</div>
@@ -178,6 +209,7 @@ const Showroom = () => (
 						className=""
 						src={`${basename}img/documentation/playbook/playbook-showroom-20.png`}
 						alt="illustration swedbankpay playbook showroom"
+						style={{ "aspect-ratio": "16 / 9" }}
 						loading="lazy"
 					/>
 				</div>
@@ -186,6 +218,7 @@ const Showroom = () => (
 						className=""
 						src={`${basename}img/documentation/playbook/playbook-showroom-21.png`}
 						alt="illustration swedbankpay playbook showroom"
+						style={{ "aspect-ratio": "16 / 9" }}
 						loading="lazy"
 					/>
 				</div>
@@ -197,6 +230,7 @@ const Showroom = () => (
 						src={`${basename}img/documentation/playbook/playbook-showroom-22.png`}
 						alt="illustration swedbankpay playbook showroom"
 						loading="lazy"
+						style={{ "aspect-ratio": "16 / 9" }}
 					/>
 				</div>
 				<div className="col-sm">
@@ -205,6 +239,7 @@ const Showroom = () => (
 						src={`${basename}img/documentation/playbook/playbook-showroom-23.png`}
 						alt="illustration swedbankpay playbook showroom"
 						loading="lazy"
+						style={{ "aspect-ratio": "16 / 9" }}
 					/>
 				</div>
 			</div>
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.av1 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.av1
new file mode 100644
index 0000000000..baea4736fb
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.av1 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.avif
new file mode 100644
index 0000000000..5cc53c67cc
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.avif differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.mp4 b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.mp4
new file mode 100644
index 0000000000..b66a74f6a0
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-1.mp4 differ
diff --git a/src/img/swedbankpay/documentation/playbook/playbook-showroom-18.avif b/src/img/swedbankpay/documentation/playbook/playbook-showroom-18.avif
new file mode 100644
index 0000000000..20ea848958
Binary files /dev/null and b/src/img/swedbankpay/documentation/playbook/playbook-showroom-18.avif differ