diff --git a/src/renderer/components/slideshow/slideshow.component.css b/src/renderer/components/slideshow/slideshow.component.css
new file mode 100644
index 00000000..67361de0
--- /dev/null
+++ b/src/renderer/components/slideshow/slideshow.component.css
@@ -0,0 +1,24 @@
+.slide{
+  overflow: hidden;
+}
+
+.slide > img{
+  animation: slide 50s infinite linear;
+  opacity: 0;
+  position: absolute;
+}
+
+@keyframes slide {
+  5% {
+    opacity: 1;
+  }
+  20% {
+    opacity: 1;
+  }
+  30% {
+    opacity: 0;
+  }
+  40% {
+    transform: scale(1.2);
+  }
+}
diff --git a/src/renderer/components/slideshow/slideshow.component.tsx b/src/renderer/components/slideshow/slideshow.component.tsx
new file mode 100644
index 00000000..37d44681
--- /dev/null
+++ b/src/renderer/components/slideshow/slideshow.component.tsx
@@ -0,0 +1,11 @@
+import './slideshow.component.css';
+
+export function Slideshow(props: {className: string, images: string[]}) {
+  return (
+    <div className={`slide ${props.className}`}>
+      {
+        props.images.map((i, index) => <img key={index} className='w-full h-full object-cover' src={i} style={{animationDelay: `${index * 10}s`}}></img>)
+      }
+    </div>
+  )
+}