diff --git a/src/components/main/MainSliderSlide.tsx b/src/components/main/MainSliderSlide.tsx
index 8bde1f8..2875fac 100644
--- a/src/components/main/MainSliderSlide.tsx
+++ b/src/components/main/MainSliderSlide.tsx
@@ -16,6 +16,7 @@ const MainSliderSlide = ({ id, img, header, txt }: SlideProps) => {
       <div className="swiper-bg">
         <img src={hosting + img} alt="" />
       </div>
+      <div className="swiper-darkener"></div>
       <div className="swiper-slide-content">
         <div className="container">
           <div className="swiper-slider-content-inner">
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
index 254905f..6ebf624 100644
--- a/src/styles/_main.scss
+++ b/src/styles/_main.scss
@@ -189,6 +189,15 @@
   align-items: center;
 }
 
+.swiper-darkener {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba($color: #000000, $alpha: 0.5);
+}
+
 // Adaptive
 
 @media screen and (max-width: 1700px) {