diff --git a/core/templates/core/index.html b/core/templates/core/index.html
index 97cca49..2780766 100644
--- a/core/templates/core/index.html
+++ b/core/templates/core/index.html
@@ -3,11 +3,10 @@
 
 {% block content %}
 {% get_current_language as CURRENT_LANG %}
-
 {% if banners %}
 <!-- Carousel Section -->
 <section class="banner-carousel mb-4 mt-n1">
-    <div id="mainBannerCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-pause="hover" data-bs-interval="{% if CURRENT_LANG == 'ar' %}15000{% else %}10000{% endif %}">
+    <div id="mainBannerCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-pause="hover">
         <div class="carousel-indicators">
             {% for banner in banners %}
             <button type="button" data-bs-target="#mainBannerCarousel" data-bs-slide-to="{{ forloop.counter0 }}" {% if forloop.first %}class="active" aria-current="true"{% endif %} aria-label="Slide {{ forloop.counter }}"></button>
@@ -15,10 +14,10 @@
         </div>
         <div class="carousel-inner">
             {% for banner in banners %}
-            <div class="carousel-item {% if forloop.first %}active{% endif %}" data-bs-interval="{% if CURRENT_LANG == 'ar' %}15000{% else %}10000{% endif %}">
-                <div class="banner-wrapper position-relative" style="height: 450px; overflow: hidden;">
+            <div class="carousel-item {% if forloop.first %}active{% endif %}" data-bs-interval="{% if 'ar' in CURRENT_LANG %}15000{% else %}10000{% endif %}">
+                <div class="banner-wrapper position-relative" style="height: 450px; overflow: hidden; background-color: #000;">
                     <img src="{{ banner.image.url }}" class="d-block w-100 h-100" style="object-fit: cover;" alt="{{ banner.display_title }}">
-                    <div class="carousel-caption d-none d-md-block text-start start-0 bottom-0 mb-5 ms-5 p-4 rounded" style="background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); max-width: 600px;">
+                    <div class="carousel-caption d-none d-md-block p-4 rounded" style="background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); max-width: 600px; position: absolute; bottom: 50px; {% if 'ar' in CURRENT_LANG %}right: 50px; text-align: right;{% else %}left: 50px; text-align: left;{% endif %}">
                         <h2 class="fw-bold display-6">{{ banner.display_title }}</h2>
                         <p class="lead">{{ banner.display_subtitle }}</p>
                         {% if banner.link %}
@@ -49,6 +48,26 @@
         {% endif %}
     </div>
 </section>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    var myCarousel = document.querySelector('#mainBannerCarousel');
+    if (myCarousel) {
+        var carouselInstance = new bootstrap.Carousel(myCarousel, {
+            interval: {% if 'ar' in CURRENT_LANG %}15000{% else %}10000{% endif %},
+            ride: 'carousel',
+            pause: 'hover'
+        });
+        
+        // Force the first slide to show immediately
+        var firstItem = myCarousel.querySelector('.carousel-item.active');
+        if (firstItem) {
+            firstItem.style.display = 'block';
+            firstItem.style.opacity = '1';
+        }
+    }
+});
+</script>
 {% endif %}
 
 <!-- Hero Section (Only show if no banners) -->
diff --git a/static/css/custom.css b/static/css/custom.css
index f2bf94d..5889869 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -82,18 +82,22 @@ body {
 
 /* Carousel Adjustments - Minimalist */
 .carousel-item {
-    transition: transform 1.2s ease-in-out; /* Slightly slower for elegance */
+    transition: transform 1.2s ease-in-out, opacity 1.2s ease-in-out !important;
 }
 
-/* Fix for captions in RTL if needed, but B5 RTL usually handles it */
-[dir="rtl"] .carousel-caption {
+/* Ensure active slide is visible */
+.carousel-item.active {
+    display: block !important;
+    opacity: 1 !important;
+}
+
+/* RTL Support for Carousel */
+[dir="rtl"] .carousel-item {
     text-align: right;
-    right: 5%;
-    left: auto;
 }
 
-.carousel-caption {
-    z-index: 10;
+[dir="rtl"] .carousel-caption {
+    right: auto;
 }
 
 footer {
diff --git a/staticfiles/css/custom.css b/staticfiles/css/custom.css
index f2bf94d..5889869 100644
--- a/staticfiles/css/custom.css
+++ b/staticfiles/css/custom.css
@@ -82,18 +82,22 @@ body {
 
 /* Carousel Adjustments - Minimalist */
 .carousel-item {
-    transition: transform 1.2s ease-in-out; /* Slightly slower for elegance */
+    transition: transform 1.2s ease-in-out, opacity 1.2s ease-in-out !important;
 }
 
-/* Fix for captions in RTL if needed, but B5 RTL usually handles it */
-[dir="rtl"] .carousel-caption {
+/* Ensure active slide is visible */
+.carousel-item.active {
+    display: block !important;
+    opacity: 1 !important;
+}
+
+/* RTL Support for Carousel */
+[dir="rtl"] .carousel-item {
     text-align: right;
-    right: 5%;
-    left: auto;
 }
 
-.carousel-caption {
-    z-index: 10;
+[dir="rtl"] .carousel-caption {
+    right: auto;
 }
 
 footer {