diff --git a/public/feriasex.jpg b/public/feriasex.jpg
new file mode 100644
index 0000000..a4c93ca
Binary files /dev/null and b/public/feriasex.jpg differ
diff --git a/src/app/(public)/registro/[slug]/page.tsx b/src/app/(public)/registro/[slug]/page.tsx
index 7d7d660..76dbfe4 100644
--- a/src/app/(public)/registro/[slug]/page.tsx
+++ b/src/app/(public)/registro/[slug]/page.tsx
@@ -52,9 +52,9 @@ export default function Page() {
       <Button icon="arrow-left" onClick={() => router.back()}>
         Volver
       </Button>
-      <div className="text-center mb-4">
+      <div className="text-center mb-4 mt-2">
         <Image
-          src={'/banner1.png'}
+          src={'/feriasex.jpg'}
           width={1000}
           height={300}
           alt="Ejemplo de banner"
diff --git a/src/components/carousel.tsx b/src/components/carousel.tsx
index 5362d13..ff52449 100644
--- a/src/components/carousel.tsx
+++ b/src/components/carousel.tsx
@@ -13,11 +13,7 @@ export default function Carousel({
   id = 'carouselExample',
   images = [
     {
-      src: '/banner1.png',
-      alt: 'Imagen de ejemplo',
-    },
-    {
-      src: '/banner2.png',
+      src: '/feriasex.jpg',
       alt: 'Imagen de ejemplo',
     },
   ],
@@ -36,14 +32,10 @@ export default function Carousel({
           >
             <Image
               src={img.src}
-              width={1000}
-              height={400}
+              width={1600}
+              height={535}
               alt="Ejemplo de banner"
-              className="d-block w-100 rounded-3"
-              style={{
-                objectFit: 'cover',
-                objectPosition: 'center',
-              }}
+              className="d-block w-100 rounded-3 img-fluid"
             />
           </div>
         ))}
diff --git a/src/components/formulario-card.tsx b/src/components/formulario-card.tsx
index b7df933..d600d44 100644
--- a/src/components/formulario-card.tsx
+++ b/src/components/formulario-card.tsx
@@ -38,7 +38,7 @@ export default function FormularioCard({
                 width={400}
                 height={300}
                 className="img"
-                src="/banner1.png"
+                src="/feriasex.jpg"
                 alt="Banner formulario"
               />
               <div className="card-caption">{cuestionario.nombre_form}</div>
@@ -63,7 +63,12 @@ export default function FormularioCard({
               )}
             </p>
             {button_message && (
-              <Button onClick={() => router.push(link)} outline className='mt-3 w-100 py-1 rounded' variant='primary'>
+              <Button
+                onClick={() => router.push(link)}
+                outline
+                className="mt-3 w-100 py-1 rounded"
+                variant="primary"
+              >
                 {button_message}
               </Button>
             )}
diff --git a/src/styles/sass/bootstrap.scss b/src/styles/sass/bootstrap.scss
index 5cb1d25..d096ab4 100644
--- a/src/styles/sass/bootstrap.scss
+++ b/src/styles/sass/bootstrap.scss
@@ -75,6 +75,18 @@ ul.list-unstyled li {
     @extend .rounded;
     @extend .shadow;
 
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 50%; // ajusta según el tamaño deseado
+      background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
+      pointer-events: none;
+      z-index: 1;
+    }
+
     img {
       @extend .img-fluid, .rounded;
       width: 100%;
@@ -90,6 +102,7 @@ ul.list-unstyled li {
       color: #fff;
       font-size: 1.25rem;
       text-shadow: 0 2px 5px rgba(33, 33, 33, 0.5);
+      z-index: 2;
     }
   }