diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 20b8731d..8d86f888 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -175,14 +175,30 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 
 .slideshow-container {
 	position: relative;
+	padding-top: 53%;
+	overflow: hidden;
 }
 
 .slide {
-	display: none;
-	-webkit-animation-name: fade;
-	-webkit-animation-duration: 1.5s;
-	animation-name: fade;
-	animation-duration: 1.5s;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+
+	opacity: 0;
+	transition-property: opacity;
+	transition-duration: 1s;
+	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.slide.active {
+	opacity: 100;
+}
+
+.slide > img {
+	width: 100%;
+	height: 100%;
 }
 
 .slide-caption {
@@ -217,24 +233,6 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 	transition: background-color 0.6s ease;
 }
 
-.slide-active {
+.slide-dot.active {
 	background-color: #717171;
 }
-
-@-webkit-keyframes fade {
-	from {
-		opacity: 0.4;
-	}
-	to {
-		opacity: 1;
-	}
-}
-
-@keyframes fade {
-	from {
-		opacity: 0.4;
-	}
-	to {
-		opacity: 1;
-	}
-}
diff --git a/docs/src/pages/slideshow.jsx b/docs/src/pages/slideshow.jsx
index 41d558bb..eae8f7d3 100644
--- a/docs/src/pages/slideshow.jsx
+++ b/docs/src/pages/slideshow.jsx
@@ -1,60 +1,45 @@
-import React, { useEffect } from 'react';
+import React, {useEffect, useState} from 'react';
+import clsx from 'clsx'
+
+const slides = [
+	{
+		name:'Windows',
+		src:'/img/Xplorer%20win.png',
+		alt:'Xplorer on Windows'
+	},
+	{
+		name:'Garuda Linux',
+		src:'/img/Xplorer%20linux.png',
+		alt:'Xplorer on Linux'
+	},
+	{
+		name:'macOS Catalina',
+		src:'/img/Xplorer%20mac.png',
+		alt:'Xplorer on macOS'
+	},
+]
+
 export default function Slideshow() {
+	const [index, setIndex] = useState(0)
 	useEffect(() => {
-		var slideIndex = 0;
-
-		const showSlides = () => {
-			var i;
-			var slides = document.getElementsByClassName('slide');
-			var dots = document.getElementsByClassName('slide-dot');
-			for (i = 0; i < slides.length; i++) {
-				slides[i].style.display = 'none';
-			}
-			slideIndex++;
-			if (slideIndex > slides.length) {
-				slideIndex = 1;
-			}
-			for (i = 0; i < dots.length; i++) {
-				dots[i].className = dots[i].className.replace(
-					' slide-active',
-					''
-				);
-			}
-			slides[slideIndex - 1].style.display = 'block';
-			dots[slideIndex - 1].className += ' slide-active';
-			setTimeout(showSlides, 2000);
-		};
-		showSlides();
-	}, []);
+		const handle = setInterval(() => setIndex(i => (i + 1) % 3), 2000)
+		return () => clearInterval(handle)
+	}, [])
 	return (
 		<>
 			<div className="slideshow-container">
-				<div className="slide">
-					<div className="slide-numbertext">1 / 3</div>
-					<img
-						src="/img/Xplorer%20win.png"
-						alt="Xplorer on Windows"
-					/>
-					<div className="slide-caption">Windows</div>
-				</div>
-				<div className="slide">
-					<div className="slide-numbertext">2 / 3</div>
-					<img
-						src="/img/Xplorer%20linux.png"
-						alt="Xplorer on Linux"
-					/>
-					<div className="slide-caption">Garuda Linux</div>
-				</div>
-				<div className="slide">
-					<div className="slide-numbertext">3 / 3</div>
-					<img src="/img/Xplorer%20mac.png" alt="Xplorer on macOS" />
-					<div className="slide-caption">macOS Catalina</div>
-				</div>
+				{slides.map((e, i) => (
+					<div key={i} className={clsx("slide", index === i && 'active')}>
+						<div className="slide-numbertext">{i + 1} / {slides.length}</div>
+						<img src={e.src} alt={e.alt}/>
+						<div className="slide-caption">{e.name}</div>
+					</div>
+				))}
 			</div>
 			<div className="slide-dots">
-				<span className="slide-dot"></span>
-				<span className="slide-dot"></span>
-				<span className="slide-dot"></span>
+				{[0, 1, 2].map(e => (
+					<span key={e} className={clsx("slide-dot", index === e && 'active')}/>
+				))}
 			</div>
 		</>
 	);