diff --git a/src/main/resources/messages.properties b/src/main/resources/messages.properties
index fbf68e22..59f22b3f 100644
--- a/src/main/resources/messages.properties
+++ b/src/main/resources/messages.properties
@@ -28,8 +28,9 @@ error.message=Mensaje de error:
error.error=Error:
# -------------------Statements for the index.html file---------------------
-index.heading=Bienvenidos a la página principal
-index.development=En desarrollo
+index.heading=WIQ
+index.subtitle=Responde las preguntas correctamente y GANA!!!
+index.button=JUGAR
# -------------------Statements for the home.html file---------------------
home.heading=Bienvenido
diff --git a/src/main/resources/messages_en.properties b/src/main/resources/messages_en.properties
index 69a1f387..1d11ec42 100644
--- a/src/main/resources/messages_en.properties
+++ b/src/main/resources/messages_en.properties
@@ -27,8 +27,9 @@ error.message=Error message:
error.error=Error:
# -------------------Statements for the index.html file---------------------
-index.heading=Welcome to the main page
-index.development=Under development
+index.heading=WIQ
+index.subtitle=Answer the questions correctly and WIN!!!
+index.button=PLAY
# -------------------Statements for the home.html file---------------------
home.heading=Welcome
diff --git a/src/main/resources/messages_es.properties b/src/main/resources/messages_es.properties
index ca856285..30eeeb9f 100644
--- a/src/main/resources/messages_es.properties
+++ b/src/main/resources/messages_es.properties
@@ -28,8 +28,9 @@ error.message=Mensaje de error:
error.error=Error:
# -------------------Statements for the index.html file---------------------
-index.heading=Bienvenidos a la página principal
-index.development=En desarrollo
+index.heading=WIQ
+index.subtitle=Responde las preguntas correctamente y GANA!!!
+index.button=JUGAR
# -------------------Statements for the home.html file---------------------
home.heading=Bienvenido
diff --git a/src/main/resources/static/css/footer.css b/src/main/resources/static/css/footer.css
new file mode 100644
index 00000000..de408628
--- /dev/null
+++ b/src/main/resources/static/css/footer.css
@@ -0,0 +1,26 @@
+/* footer.css */
+
+/* Estilo para el pie de página */
+.footer {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 60px;
+ margin: 0; /* Eliminar margen */
+ background: linear-gradient(45deg, #283048, #586776); /* Gradiente de fondo */
+ color: #fff; /* Texto blanco */
+ padding: 0; /* Eliminar relleno */
+ text-align: center; /* Alineación del texto */
+ display: flex; /* Usar flexbox para centrar verticalmente */
+ align-items: center; /* Centrar verticalmente */
+}
+
+/* Estilo para el texto del pie de página */
+.footer .container {
+ max-width: 960px; /* Ancho máximo del contenido */
+ margin: 0 auto; /* Centrar el contenido */
+}
+
+.bg-primary {
+ background-color: transparent !important;
+}
diff --git a/src/main/resources/static/css/nav.css b/src/main/resources/static/css/nav.css
new file mode 100644
index 00000000..96983c07
--- /dev/null
+++ b/src/main/resources/static/css/nav.css
@@ -0,0 +1,60 @@
+/* nav.css */
+
+/* Estilo para el menú de navegación */
+.navbar {
+ background: linear-gradient(45deg, #283048, #586776); /* Gradiente de fondo */
+ /* border-bottom: 1px solid #333; /* Borde inferior */
+}
+
+/* Estilo para el botón del menú desplegable */
+.navbar-toggler {
+ border: none;
+ background-color: transparent; /* Fondo transparente */
+}
+
+/* Estilo para el ícono del botón del menú desplegable */
+.navbar-toggler-icon {
+ background-image: url('data:image/svg+xml;charset=utf8,'); /* Ícono blanco */
+}
+
+/* Estilo para los elementos de la barra de navegación */
+.navbar-nav .nav-link {
+ color: #fff; /* Texto blanco */
+ font-size: 16px;
+ padding: 0.5rem 1rem;
+ transition: color 0.3s ease-in-out;
+}
+
+/* Estilo para los elementos de la barra de navegación al pasar el ratón */
+.navbar-nav .nav-link:hover {
+ color: #ccc; /* Texto gris claro al pasar el ratón */
+}
+
+/* Estilo para los menús desplegables */
+.dropdown-menu {
+ background-color: #1a1a1a; /* Color de fondo más oscuro */
+}
+
+/* Estilo para los elementos dentro de los menús desplegables */
+.dropdown-item {
+ color: #fff; /* Texto blanco */
+ transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+
+/* Estilo para los elementos dentro de los menús desplegables al pasar el ratón */
+.dropdown-item:hover {
+ background-color: #333; /* Fondo más oscuro al pasar el ratón */
+}
+
+/* Animación para los menús desplegables */
+.dropdown-menu {
+ display: none;
+ opacity: 0;
+ transition: opacity 0.3s ease-in-out;
+}
+
+.dropdown:hover .dropdown-menu {
+ display: block;
+ opacity: 1;
+}
+
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
new file mode 100644
index 00000000..4b741f5a
--- /dev/null
+++ b/src/main/resources/static/css/style.css
@@ -0,0 +1,61 @@
+/* Sticky footer styles-------------------------------------------------- */
+html {
+ position: relative;
+ min-height: 100%;
+}
+
+/* style.css */
+
+/* Estilo para el contenedor principal */
+.container {
+ max-width: 960px; /* Ancho máximo del contenido */
+ margin: 50px auto; /* Centrar el contenido y agregar un margen superior e inferior */
+}
+
+/* Estilo para los títulos */
+h2 {
+ color: #283048; /* Color de texto azul oscuro */
+}
+
+/* Estilo para los títulos */
+h3 {
+ color: #283048; /* Color de texto azul oscuro */
+}
+
+/* Estilo para las etiquetas 'span' dentro de los párrafos */
+p span {
+ font-weight: bold; /* Texto en negrita */
+}
+
+/* Estilo para los campos de entrada */
+.form-control {
+ border: 1px solid #ced4da; /* Borde gris */
+ border-radius: 4px; /* Borde redondeado */
+ padding: 10px; /* Agregar relleno */
+}
+
+/* Estilo para los labels */
+.control-label {
+ color: #283048; /* Color de texto azul oscuro */
+}
+
+/* Estilo para los mensajes de error */
+.text-danger {
+ color: #721c24; /* Color de texto rojo oscuro */
+}
+
+/* Estilo para el botón de envío */
+.btn-primary {
+ background-color: #283048; /* Color de fondo azul oscuro */
+ border-color: #283048; /* Color del borde */
+ color: #fff; /* Texto blanco */
+ padding: 10px 20px; /* Agregar relleno */
+ border-radius: 4px; /* Borde redondeado */
+ cursor: pointer; /* Cambiar el cursor al pasar el ratón */
+}
+
+/* Estilo para el botón de envío al pasar el ratón */
+.btn-primary:hover {
+ background-color: #1c2530; /* Color de fondo azul más oscuro */
+ border-color: #1c2530; /* Color del borde más oscuro */
+}
diff --git a/src/main/resources/templates/fragments/head.html b/src/main/resources/templates/fragments/head.html
index e977c69e..f870e837 100644
--- a/src/main/resources/templates/fragments/head.html
+++ b/src/main/resources/templates/fragments/head.html
@@ -14,6 +14,8 @@
-
+
+
+