diff --git a/css/slideshow.css b/css/slideshow.css
new file mode 100644
index 0000000..b30a837
--- /dev/null
+++ b/css/slideshow.css
@@ -0,0 +1,53 @@
+* {
+    box-sizing: border-box;
+  }
+  
+  body {
+    font-family: Arial, sans-serif;
+    background-color: #f1f1f1;
+  }
+  
+  .slideshow-container {
+    position: relative;
+    width: 60%;
+    margin: auto;
+  }
+  
+  .text-slide {
+    display: none;
+    padding: 20px;
+  }
+  
+  .prev,
+  .next {
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    width: auto;
+    padding: 16px;
+    margin-top: -22px;
+    color: white;
+    font-weight: bold;
+    font-size: 18px;
+    user-select: none;
+  }
+  
+  .next {
+    right: 0;
+    border-radius: 3px 0 0 3px;
+  }
+  
+  .prev {
+    left: 0;
+    border-radius: 0 3px 3px 0;
+  }
+  
+  /* .prev:hover,
+  .next:hover {
+    border: 1px solid #f1f1f1;
+  } */
+  
+  .text-slide:first-of-type {
+    display: block;
+  }
+  
\ No newline at end of file
diff --git a/index.html b/index.html
index f2a804f..906a667 100644
--- a/index.html
+++ b/index.html
@@ -18,9 +18,10 @@
     <link rel="stylesheet" type="text/css" href="css/layout.css">
     <link rel="stylesheet" type="text/css" href="css/layout_mobile.css">
     <link rel="stylesheet" type="text/css" href="css/style.css">
+    <link rel="stylesheet" type="text/css" href="css/slideshow.css">
     <!-- script-->
     <script defer data-domain="ai-dojo.dev" src="https://plausible.io/js/script.js"></script>
-    
+
     <title>AI Dojo - artificial intelligence trainings</title>
 </head>
 <body>
@@ -48,12 +49,34 @@ <h2> GPT? RNN? AGI? FOMO? </h2>
     <h2> Relax, we've got you :-) </h2>
 
     <p>
-        The AI Dojo is *the* place to learn AI and data science in a calm and immersive atmosphere.
+        The AI Dojo is the place to learn AI and data science in a calm and immersive atmosphere. 
     </p>
 
+    <p>
+        We prepare you for getting the most out of AI in your role as...
+    </p>
+
+    <div class="slideshow-container">
+        <div class="text-slide">
+          <p><b>Data Scientist</b></p>
+        </div>
+        <div class="text-slide">
+          <p><b>Machine Learning Engineer</b></p>
+        </div>
+        <div class="text-slide">
+          <p><b>Data Engineer</b></p>
+        </div>
+    
+        <a class="prev">&#10094;</a>
+        <a class="next">&#10095;</a>
+        
+      </div>
+      <script src="script.js"></script>
+
+
     <p>
         We'll devise a training program, <a href="#tailored">just right for you</a>. Or, you can choose from
-        one of the <a href="#previous-trainings">existing programs</a> we have built for happy customers.
+        one of the <a href="#previous-trainings">existing programs</a> we have built for happy clients.
     </p>
 
     <p> Read on to learn more about our <a href="#teaching-philosophy">teaching method</a> and to get to know <a href="#trainers"> our trainers</a>.</p>
@@ -183,5 +206,9 @@ <h2>Contact</h2>
 <div id="imprint">
     <a href="imprint.html">Imprint</a>
 </div>
+
+<!-- slideshow JS-->
+<script src="slideshow.js"></script>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/script/slideshow.js b/script/slideshow.js
new file mode 100644
index 0000000..b79682b
--- /dev/null
+++ b/script/slideshow.js
@@ -0,0 +1,32 @@
+let slideIndex = 0;
+let slides = document.getElementsByClassName("text-slide");
+
+function changeSlide(n) {
+  slideIndex += n;
+
+  if (slideIndex < 0) {
+    slideIndex = slides.length - 1;
+  } else if (slideIndex >= slides.length) {
+    slideIndex = 0;
+  }
+
+  showSlides();
+}
+
+function showSlides() {
+  for (let i = 0; i < slides.length; i++) {
+    slides[i].style.display = "none";
+  }
+
+  slides[slideIndex].style.display = "block";
+}
+
+document.querySelector(".prev").addEventListener("click", () => {
+  changeSlide(-1);
+});
+
+document.querySelector(".next").addEventListener("click", () => {
+  changeSlide(1);
+});
+
+showSlides();
