diff --git a/index.html b/index.html
index a5b098b..a82968d 100644
--- a/index.html
+++ b/index.html
@@ -49,9 +49,14 @@
     </nav>
     <div id="container">
         <main id="content">
-            <div class="showcase content-spacing">
-                <h1 style="color: white; font: 500 45px Montserrat, sans-serif;">Güvenilir alışverişin<br>merkezine<br>hoşgeldiniz! </h1>
-            </div>
+            <h1 class="welcome">Güvenilir alışverişin<br>merkezine<br>hoşgeldiniz!</h1>
+            <ul class="slideshow">
+                <li><span></span></li>
+                <li><span></span></li>
+                <li><span></span></li>
+                <li><span></span></li>
+                <li><span></span></li>
+            </ul>
             <!-- TODO <section class="araclar">
                 <a href="https://ugurgaleri1.sahibinden.com/">Araçlarımızı incelemek için tıklayınız.</a>
             </section>-->
diff --git a/resources/css/views/index.scss b/resources/css/views/index.scss
index 9f1e8c2..ac44d64 100644
--- a/resources/css/views/index.scss
+++ b/resources/css/views/index.scss
@@ -1,6 +1,7 @@
 @use "../variables.scss";
 @use "../mixins.scss";
 @use "../urls.scss";
+@use "../keyframes";
 @use "sass:math";
 
 $table-item_img_width_l: 150px;
@@ -11,30 +12,71 @@ $table-item_margin_between_items: 10px;
 $social-button_img_width: 32px;
 $social-button_inner_margin: 10px;
 
-.showcase {
-  display: flex;
-  height: 90vh;
-  background-image: urls.$index_showcase_bg_day;
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
+.welcome {
+  position: absolute;
+  color: white;
+  font: 500 50px Montserrat, sans-serif;
+  z-index: 5;
+  bottom: 200px;
+  left: 200px;
+  text-shadow: 2px 2px 15px black;
 
   @include mixins.header_overflow2 {
-    height: 95vh;
+    bottom: 300px;
+    left: 50px;
+  }
+
+  @include mixins.mx_mobile {
+    font-size: 32px;
   }
 }
 
-.showcase-animation {
-  animation: slideshow-appear 1000ms;
+.slideshow {
+  list-style-type: none;
+
+  @include mixins.header_overflow2 {
+    height: calc(100vh - 45px);
+  }
 }
 
-@keyframes slideshow-appear {
-  from {
+.slideshow {
+  margin: 0;
+  padding: 0;
+  height: 80vh;
+  z-index: 0;
+
+  li span {
+    position: absolute;
+    width: 100%;
+    height: 80vh;
+    left: 0;
+    color: transparent;
+    background-size: cover;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
     opacity: 0;
+    z-index: 0;
+    animation: slideshow 30s linear infinite 0s;
   }
 
-  to {
-    opacity: 1;
+  li:nth-child(1) span {
+    background-image: urls.$index_slide1;
+  }
+  li:nth-child(2) span {
+    background-image: urls.$index_slide2;
+    animation-delay: 6s;
+  }
+  li:nth-child(3) span {
+    background-image: urls.$index_slide3;
+    animation-delay: 12s;
+  }
+  li:nth-child(4) span {
+    background-image: urls.$index_slide4;
+    animation-delay: 18s;
+  }
+  li:nth-child(5) span {
+    background-image: urls.$index_slide5;
+    animation-delay: 24s;
   }
 }