diff --git a/src/app/shared/components/hero-banner/hero-banner.component.html b/src/app/shared/components/hero-banner/hero-banner.component.html
index db655a8..e544c02 100644
--- a/src/app/shared/components/hero-banner/hero-banner.component.html
+++ b/src/app/shared/components/hero-banner/hero-banner.component.html
@@ -34,13 +34,13 @@
           <div class="event-details d-flex flex-column flex-md-row justify-content-center align-items-center gap-3 gap-md-5 text-muted">
             @if (eventConfig.dates && eventConfig.dates.length > 0) {
               <div class="d-flex align-items-center gap-2">
-                <i class="bi bi-calendar event-icon"></i>
+                <i class="fa-regular fa-calendar event-icon"></i>
                 <span class="event-info-text">{{ formattedDates }}</span>
               </div>
             }
             @if (eventConfig.location) {
               <div class="d-flex align-items-center gap-2">
-                <i class="bi bi-geo-alt event-icon"></i>
+                <i class="fa-solid fa-location-dot event-icon"></i>
                 <span class="event-info-text">{{ eventConfig.location }}</span>
               </div>
             }
diff --git a/src/app/shared/components/hero-banner/hero-banner.component.scss b/src/app/shared/components/hero-banner/hero-banner.component.scss
index ed430c3..b999bc4 100644
--- a/src/app/shared/components/hero-banner/hero-banner.component.scss
+++ b/src/app/shared/components/hero-banner/hero-banner.component.scss
@@ -10,6 +10,18 @@
   min-height: 400px;
   display: flex;
   flex-direction: column;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.95) 100%);
+    border-radius: inherit;
+    z-index: 1;
+  }
 }
 
 .hero-text-box {
@@ -18,8 +30,15 @@
   background: transparent;
 }
 
+.hero-content {
+  position: relative;
+  z-index: 2;
+  flex-grow: 1;
+}
+
+
 ::ng-deep .hero-title, .hero-title {
-  color: #555;
+  color: #666666;
   font-size: 1.5rem;
   margin-bottom: 1rem;
   strong {
@@ -28,7 +47,7 @@
 }
 
 ::ng-deep .hero-description, .hero-description {
-  color: #666;
+  color: #666666;
   font-size: 1.1rem;
   line-height: 1.5;
   strong {
@@ -58,17 +77,22 @@
 
 .event-icon {
   font-size: 1.3rem;
-  color: #888;
+  color: #8a8a8a;
 }
 
 .event-info-text {
-  color: #777;
+  color: #8a8a8a;
   font-weight: 500;
 }
 
 @media (max-width: 768px) {
+  .hero-banner::before {
+    background: none;
+  }
+
   .hero-content {
     justify-content: center !important;
+    background: none;
   }
   
   .hero-text-box {