diff --git a/src/app.js b/src/app.js
index f129d1c9e..f8082ee1f 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,11 +1,22 @@
-/* eslint-disable */
-import "bootstrap";
-import "./style.css";
-
-import "./assets/img/rigo-baby.jpg";
-import "./assets/img/4geeks.ico";
-
-window.onload = function() {
-  //write your code here
-  console.log("Hello Rigo from the console!");
-};
+// Función para generar excusas
+window.onload = function () {
+  generarExcusa();
+};
+
+function generarExcusa() {
+  let who = ['The dog', 'My grandma', 'The mailman', 'My bird'];
+  let action = ['ate', 'peed', 'crushed', 'broke'];
+  let what = ['my homework', 'my phone', 'the car'];
+  let when = ['before the class', 'when I was sleeping', 'while I was exercising', 'during my lunch', 'while I was praying'];
+
+  let rnd1 = Math.floor(Math.random() * who.length);
+  let rnd2 = Math.floor(Math.random() * action.length);
+  let rnd3 = Math.floor(Math.random() * what.length);
+  let rnd4 = Math.floor(Math.random() * when.length);
+
+  // Genera la excusa combinando las partes
+  let excuse = `${who[rnd1]} ${action[rnd2]} ${what[rnd3]} ${when[rnd4]}`;
+
+  // Muestra la excusa en el elemento con id "excuse"
+  document.querySelector("#excuse").innerHTML = excuse;
+}
diff --git a/src/index.html b/src/index.html
index e275741cf..1cfab9b8f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,29 +1,24 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Hello Rigo with Vanilla.js</title>
-    <link
-      rel="stylesheet"
-      href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
-      integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
-      crossorigin="anonymous"
-    />
-    <link rel="shortcut icon" href="./4geeks.ico" />
-  </head>
-  <body>
-    <div class="container-fluid text-center">
-      <h1 class="mt-5">Hello Rigo!</h1>
-      <img src="./rigo-baby.jpg" />
-      <p class="alert alert-warning mt-4">
-        If this text is <b>not</b> centered and <b>yellow</b>, you probably have
-        an error
-      </p>
-      <div class="fixed-bottom p-4">
-        Made with ❤️ by
-        <a href="https://www.4geeksacademy.com">4Geeks Academy</a>
-      </div>
-    </div>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Excusa Segura!</title>
+  
+  <!-- Enlace a Bootstrap desde un CDN -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
+  
+  <!-- Enlace a la hoja de estilo local -->
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+  <div class="container-fluid text-center">
+    <h1 class="mt-5" id="titulo">No te lo vas a creer pero...</h1>
+    <img src="./assets/img/rigo-baby.jpg" alt="Rigo baby" class="img-fluid rounded-circle" style="max-width: 200px; margin-top: 20px;">
+    <h2 id="excuse" style="margin-top: 20px;">My dog ate my homework</h2>
+  </div>
+
+  <!-- Enlace al archivo de JavaScript -->
+  <script src="./app.js"></script>
+</body>
+</html>
diff --git a/src/style.css b/src/style.css
index 9ba1b2987..2a03c63bc 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1 +1,11 @@
-@import "~bootstrap/dist/css/bootstrap.min.css";
+@import "~bootstrap/dist/css/bootstrap.min.css";
+
+#titulo{
+    text-decoration: solid;
+    color: brown;
+}
+
+#excuse{
+    text-decoration: solid;
+    color: rgb(19, 4, 228);
+}
\ No newline at end of file
