diff --git a/_sass/ioi-2024.scss b/_sass/ioi-2024.scss
new file mode 100644
index 0000000..df3dde8
--- /dev/null
+++ b/_sass/ioi-2024.scss
@@ -0,0 +1,114 @@
+.ioi-wrapper {
+
+  .ioi-hero {
+    background-image: url('/assets/images/ioi-2024/ioi-bg.gif');
+    background-size: cover;
+    height: 450px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 40px 0;
+    gap: 2rem;
+
+    .hero-title {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      background-color: white;
+      padding: 20px 5px;
+      height: fit-content;
+
+      img {
+        width: 550px;
+      }
+    }
+
+    .hero-count {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+
+      .countdown-wrapper {
+        padding: 15px 25px;
+        margin: auto;
+        color: white;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        border-radius: 16px;
+
+        .title {
+          font-size: 28px;
+          line-height: 28px;
+        }
+
+        .divider {
+          font-size: 34px;
+          font-weight: 600;
+          display: flex;
+        }
+
+        .countdown-item {
+          text-align: center;
+
+          .number {
+            font-size: 62px;
+            font-weight: 800;
+            line-height: 50px;
+            margin-bottom: 0;
+          }
+
+          .text {
+            font-size: 26px;
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+
+  }
+
+  .ioi-donate {
+    padding: 30px 100px;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    .donate-info {
+      display: flex;
+      gap: 2rem;
+    }
+
+    .donate-title {
+      font-size: 42px;
+      font-weight: 300;
+    }
+    .donate-text {
+      font-size: 20px;
+    }
+  }
+}
+
+@media (max-width: $breakpoint-lg) {
+  .ioi-wrapper {
+
+    .ioi-hero {
+      .hero-title {
+        img {
+          width: 380px;
+        }
+      }
+
+      .hero-count {
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+      }
+    }
+    .ioi-donate {
+      padding: 30px 35px;
+
+      .donate-info {
+        flex-direction: column;
+        gap: 1rem;
+      }
+    }
+  }
+}
diff --git a/_sass/main.scss b/_sass/main.scss
index 4442e62..14cf3a3 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -61,17 +61,14 @@ main.page-content {
     background-color: white;
 
     @media (max-width: $breakpoint-lg) {
-      padding: 0 5rem;
       margin: 0;
     }
 
     @media (max-width: $breakpoint-md) {
-      padding: 0 2.5rem;
       margin: 0;
     }
 
     @media (max-width: $breakpoint-sm) {
-      padding: 0 2rem;
       margin: 0;
     }
   }
diff --git a/_sass/sections/ioi-2024.scss b/_sass/sections/ioi-2024.scss
index 0220986..dbb9d7e 100644
--- a/_sass/sections/ioi-2024.scss
+++ b/_sass/sections/ioi-2024.scss
@@ -78,12 +78,6 @@
             border-radius: 12px;
             font-size: 20px;
 
-            // Remove this if you want to make the button clickable
-            cursor: not-allowed;
-            opacity: 0.5;
-            pointer-events: none;
-
-
             &:hover {
                 text-decoration: none;
                 background-color: $secondary-1;
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 0d0a1c1..918c0aa 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -20,5 +20,6 @@
 @import "sections/newsletter";
 @import "about";
 @import "promos";
+@import "ioi-2024";
 @import "utils/progressbar";
 @import "utils/modal";
diff --git a/ioi-2024.html b/ioi-2024.html
index 7b1ff7a..9a967c6 100644
--- a/ioi-2024.html
+++ b/ioi-2024.html
@@ -3,6 +3,115 @@
 permalink: /ioi-2024
 ---
 
-<div>
-  <h3>Página de sponsors</h3>
+<div class="ioi-wrapper">
+  <div class="ioi-hero">
+    <div class="hero-title">
+      <img src="/assets/images/ioi-2024/ioi-logo.svg" alt="">
+    </div>
+    <div class="hero-count">
+      <div class="countdown-wrapper">
+        <p class="title">Cuenta regresiva:</p>
+        <div style="display: flex; gap: 1rem;">
+          <div class="countdown-item">
+            <span id="countdown-days" class="number"></span>
+            <p class="text">Días</p>
+          </div>
+          <div class="divider">:</div>
+          <div class="countdown-item">
+            <span id="countdown-hours" class="number"></span>
+            <p class="text">Horas</p>
+          </div>
+          <div class="divider">:</div>
+          <div class="countdown-item">
+            <span id="countdown-minutes" class="number"></span>
+            <p class="text">Minutos</p>
+          </div>
+        </div>
+      </div>
+      <div></div>
+    </div>
+  </div>
+  <div class="ioi-donate">
+    <p class="donate-title">
+      ¡ Perú irá a la
+      <span style="color: red; font-weight: 500;">International Olympiad in Informatics (IOI)</span>
+      <span style="font-weight: 500;">2024</span>
+      !
+    </p>
+    <p class="donate-text">
+      Estamos encantados de anunciar que la Federación Olímpica Peruana de Informática (FOPI) ha sido seleccionada para representar a nuestro país en la International Olympiad in Informatics (IOI) 2024, que se llevará a cabo en Egipto. Este prestigioso evento reúne a los mejores talentos en programación de todo el mundo, y estamos emocionados de tener la oportunidad de mostrar el increíble potencial de nuestros estudiantes peruanos.
+    </p>
+    <p style="font-size: 36px;">
+      <span style="color: red; font-weight: 500;">¿</span>
+      Qué debo saber de la IOI 2024
+      <span style="color: red; font-weight: 500;">?</span>
+    </p>
+    <p style="font-size: 18px;">
+      La 36.ª Olimpiada Internacional de Informática (IOI 2024) se celebrará en Egipto del 1 al 8 de septiembre de 2024, como la competición de informática más prestigiosa para estudiantes de secundaria y bachillerato de todo el mundo. La competencia es una de las cinco olimpiadas científicas internacionales que se celebran anualmente. IOI 2024 será organizado y albergado por la Academia Árabe de Ciencia, Tecnología y Transporte Marítimo (AASTMT) en Alejandría. El concurso cuenta con el apoyo del Ministerio de Comunicaciones y Tecnologías de la Información, el Ministerio de Juventud y Deportes y la Biblioteca de Alejandría.
+    </p>
+    <div class="donate-info">
+      <div>
+        <p style="font-size: 36px;">¡ Ayúdanos a llegar a
+          <span style="color: red; font-weight: 500;">Egipto</span>
+          !
+        </p>
+        <p style="font-size: 18px;">
+          Organizar la participación en un evento de esta magnitud conlleva importantes costos, que incluyen
+          <span style="font-weight: 600;">viajes, alojamiento, inscripciones y otros gastos asociados.</span>
+          Es por eso que estamos haciendo un llamado a nuestra comunidad y a todos aquellos que creen en el poder de la educación y la tecnología para que nos apoyen con una donación económica. Tu contribución nos ayudará a garantizar que nuestros brillantes jóvenes tengan la oportunidad de competir a nivel internacional y representar a Perú con orgullo.
+        </p>
+        <div style="border: 1px solid; border-color: rgb(158, 158, 158); margin-bottom: 12px;"></div>
+        <p style="font-size: 19px;">
+          ¡Únete a nosotros en este emocionante viaje y sé parte del equipo que hace posible que nuestros estudiantes alcancen sus sueños! Cada donación, por pequeña que sea, marca la diferencia y nos acerca un paso más a nuestro objetivo. Juntos, podemos inspirar y empoderar a la próxima generación de líderes en informática.
+        </p>
+        <p style="font-size: 20px;">
+          También puedes apoyarnos en el
+          <a href="https://www.paypal.com/donate?campaign_id=YZ3DJ76CB9Q6L" target="_blank">
+            siguiente enlace
+          </a>
+        </p>
+      </div>
+      <div style="display: flex; margin:auto;">
+        <iframe
+          src="https://www.paypal.com/giving/campaigns?campaign_id=YZ3DJ76CB9Q6L"
+          title="PayPal donate campaign card"
+          frameborder="0"
+          width=382
+          height=550
+          scrolling="no"
+        ></iframe>
+      </div>
+    </div>
+  </div>
+  <script>
+    // Set the date we're counting down to
+    var countDownDate = new Date("Sep 1, 2024 00:00:00").getTime();
+
+    // Update the count down every 1 second
+    var x = setInterval(function() {
+
+      // Get today's date and time
+      var now = new Date().getTime();
+
+      // Find the distance between now and the count down date
+      var distance = countDownDate - now;
+
+      // Time calculations for days, hours, minutes and seconds
+      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+      var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+      document.getElementById("countdown-days").innerHTML = days;
+      document.getElementById("countdown-hours").innerHTML = hours;
+      document.getElementById("countdown-minutes").innerHTML = minutes;
+      document.getElementById("countdown-seconds").innerHTML = seconds;
+
+      // If the count down is over, write some text
+      if (distance < 0) {
+        clearInterval(x);
+        document.getElementById("countdown").innerHTML = "EXPIRED";
+      }
+    }, 2000);
+  </script>
 </div>