diff --git a/clockIn.html b/clockIn.html
index 74f0fcd..11c0078 100644
--- a/clockIn.html
+++ b/clockIn.html
@@ -27,7 +27,7 @@ and open the template in the editor.
             <div class="planPanel">
                 <div class="container">
                     <h2>Tus fichadas</h2>
-                    <h3>Situación de los ultimos 7 días</h3> 
+                    <h3>Situación de los últimos 7 días</h3> 
                     <div class="total"></div>
                     <ul class="listHorario">
                     </ul>
diff --git a/css/style.css b/css/style.css
index 05d4b4e..b4aed9b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -34,6 +34,7 @@ span {
     font-weight: bold;
     font-size: 1.4em;
     margin-top: -40px;
+    color: white;
 }
 
 ul {
@@ -75,7 +76,7 @@ ul {
 }
 
 #logo {
-    width: 25%;
+    width: 30%;
     padding-bottom: 20px;
 }
 
@@ -199,18 +200,21 @@ h3 {
     display: inline;
     position: static;
     width: 350px;
-    background: rgba(0, 204, 10, .90);
+    background: rgba(69, 171, 38, 0.9);
     padding: 20px 40px;
     font-size: 2em;
     color: #fff;
     text-align: center;
-    border-radius: 50%;
+    border-radius: 50px;
 }
 
 .in:active {
-    background: rgb(0, 204, 10);
+    background: rgb(69, 171, 38,);
 }
-.out,.outMiddle {
+.out {
+    margin-left: 30px;
+}
+.out, .outMiddle {
     display: inline;
     position: static;
     width: 350px;
@@ -219,7 +223,7 @@ h3 {
     font-size: 2em;
     color: #fff;
     text-align: center;
-    border-radius: 50%;
+    border-radius: 50px;
 }
 
 .out:active {
@@ -267,56 +271,71 @@ header {
     margin-top: 10px;
 }
 
-
-
 .listHorario {
     margin-top: 20px;
     width: 100%;
     overflow: hidden;
+    text-align: center;
+    justify-content: center; /* Esto alinea horizontalmente en el centro */
+    align-items: center; /* Esto alinea verticalmente en el centro */
 }
-.listHorario .headerLi {
+.listHorario .hrTop {
     width: 100%;
     overflow: hidden;
     border-top: 1px solid #9EA7AC;
     padding-bottom: 10px;
-
 }
-
+/* Transparent borders because <hr> doesn't allow margin */
+.listHorario hr {
+    padding-top: 5px;
+    margin-bottom: 15px;
+    border-bottom: 1px solid #9EA7AC;
+    border-left: 1px solid transparent;
+    border-right: 1px solid transparent;
+    border-top: 1px solid transparent;
+}
 .listHorario label {
     float: left;
     width: calc(100% / 7);
     text-align: center;
     font-weight: bold;
     padding: 5px 0;
+    color: white;
 
 }
 .hoy {
     background: #9EA7AC;
-    color: #fff;
+    border-radius: 25px 25px 0px 0px;
+    color: black !important;
 }
-
 .listHorario .time {
     float: left;
     width: calc(100% / 7);
-    text-align: center;
     padding: 5px 0;
     font-size: 1.2em;
     overflow: hidden;
-
+    color: white;
 }
+.listHorario .time div {
+    display: inline-block;
+}
+
 .listHorario .time img {
     width: 20px;
     float: left;
     margin-right: 5px;
-    margin-left: 15px;
-    margin-top: 7px;
+    margin-top: 8.5px;
+    filter: invert(100%);
 }
 
 .listHorario .time p {
     float: left;
-    background: #8DD202;
+    background: #121212;
     padding: 5px;
-    border-radius: 7px;
+    border-radius: 24px;
+    color: white;
+    width: 72.5px;
+    box-shadow: 0 1px 5px #0003,0 2px 2px #00000024,0 3px 1px -2px #0000001f;
 }
 
 .impar {
diff --git a/js/clockIn.js b/js/clockIn.js
index 909c2bf..ec6e2cd 100644
--- a/js/clockIn.js
+++ b/js/clockIn.js
@@ -55,7 +55,7 @@ function fichar(direction) {
                 }, 3000);
             }else {
                 $(".confirm").fadeIn(200);
-                $(".txtConfirm").append('FICHADA REGISTRADA');
+                $(".txtConfirm").append('Fichada registrada correctamente');
                 setTimeout(function () {
                     cerrar();
                 }, 1000);
@@ -102,52 +102,64 @@ function printTimetable(timetable) {
         dated.setDate(dated.getDate() + 1);
     }
    $(".listHorario").append('<label class="hoy">HOY</label>');
-   $(".listHorario").append('<li class="headerLi"></li>');
+   $(".listHorario").append('<li class="hrTop"></li>');
    
     for (var i = 0; i < timetable.length; i++) {
          
         $(".listHorario").append(
             '<li>' +
                 '<div class="time ' + ifIsEmpty(timetable[i]["6daysAgo"]) + '">' +
-                    '<img src="' + ifIsEmptyImage(timetable[i]["6daysAgoDirection"]) + '" />' +
-                    '<p>' + ifIsEmptyText(timetable[i]["6daysAgo"]) + '</p>' +
+                    '<div>' +
+                        '<img src="' + ifIsEmptyImage(timetable[i]["6daysAgoDirection"]) + '" />' +
+                        '<p>' + ifIsEmptyText(timetable[i]["6daysAgo"]) + '</p>' +
+                    '</div>' +
                 '</div>' +
                 '<div class="time ' + ifIsEmpty(timetable[i]["5daysAgo"]) + '">' +
-                    '<img src="' + ifIsEmptyImage(timetable[i]["5daysAgoDirection"]) + '" />' +
-                    '<p>' + ifIsEmptyText(timetable[i]["5daysAgo"]) + '</p>'+
+                    '<div>' +
+                        '<img src="' + ifIsEmptyImage(timetable[i]["5daysAgoDirection"]) + '" />' +
+                        '<p>' + ifIsEmptyText(timetable[i]["5daysAgo"]) + '</p>'+
+                    '</div>' +
                 '</div>' +
                 '<div class="time ' + ifIsEmpty(timetable[i]["4daysAgo"]) + '">' +
-                    '<img src="' + ifIsEmptyImage(timetable[i]["4daysAgoDirection"]) + '" />' +
-                    '<p>' + ifIsEmptyText(timetable[i]["4daysAgo"]) + '</p>'+
+                    '<div>' +
+                        '<img src="' + ifIsEmptyImage(timetable[i]["4daysAgoDirection"]) + '" />' +
+                        '<p>' + ifIsEmptyText(timetable[i]["4daysAgo"]) + '</p>'+
+                    '</div>' +
                 '</div>' +
                 '<div class="time ' + ifIsEmpty(timetable[i]["3daysAgo"]) + '">' +
-                    '<img src="' + ifIsEmptyImage(timetable[i]["3daysAgoDirection"]) + '" />' +
-                    '<p>' + ifIsEmptyText(timetable[i]["3daysAgo"]) + '</p>'+
+                    '<div>' +
+                        '<img src="' + ifIsEmptyImage(timetable[i]["3daysAgoDirection"]) + '" />' +
+                        '<p>' + ifIsEmptyText(timetable[i]["3daysAgo"]) + '</p>'+
+                    '</div>' +
                 '</div>' +
                 '<div class="time ' + ifIsEmpty(timetable[i]["2daysAgo"]) + '">' +
-                    '<img src="' + ifIsEmptyImage(timetable[i]["2daysAgoDirection"]) + '" />' +
-                    '<p>' + ifIsEmptyText(timetable[i]["2daysAgo"]) + '</p>'+
+                    '<div>' +
+                        '<img src="' + ifIsEmptyImage(timetable[i]["2daysAgoDirection"]) + '" />' +
+                        '<p>' + ifIsEmptyText(timetable[i]["2daysAgo"]) + '</p>'+
+                    '</div>' +
                 '</div>' + 
                 '<div class="time ' + ifIsEmpty(timetable[i]["1daysAgo"]) + '">' +
-                    '<img src="' + ifIsEmptyImage(timetable[i]["1daysAgoDirection"]) + '" />' +
-                    '<p>' + ifIsEmptyText(timetable[i]["1daysAgo"]) + '</p>'+
+                    '<div>' +
+                        '<img src="' + ifIsEmptyImage(timetable[i]["1daysAgoDirection"]) + '" />' +
+                        '<p>' + ifIsEmptyText(timetable[i]["1daysAgo"]) + '</p>'+
+                    '</div>' +
                 '</div>' +
                 '<div class="time ' + ifIsEmpty(timetable[i]["0daysAgo"]) + '">' +
-                    '<img src="' + ifIsEmptyImage(timetable[i]["0daysAgoDirection"]) + '" />' +
-                    '<p>' + ifIsEmptyText(timetable[i]["0daysAgo"]) + '</p>'+
+                    '<div>' +
+                        '<img src="' + ifIsEmptyImage(timetable[i]["0daysAgoDirection"]) + '" />' +
+                        '<p>' + ifIsEmptyText(timetable[i]["0daysAgo"]) + '</p>'+
+                    '</div>' +
                 '</div>' +
             '</li>'
         );
-        
     }
     printTotalHours(timetable);
-   
 }
 
 function printTotalHours(timetable) {
-    if(timetable.length>0) {
+    if(timetable.length > 0) {
 
-        $(".listHorario").append('<li class="headerLi"></li>');
+        $(".listHorario").append('<hr>');
         $(".listHorario").append('<li><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["6daysAgoTotal"]))
                 + '</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["5daysAgoTotal"]))
                 + '</div><div class="time">' + secondsToHm(ifIsEmptyText(timetable[0]["4daysAgoTotal"]))
@@ -158,16 +170,17 @@ function printTotalHours(timetable) {
                 + '</div></li>');
     
         $(".total").text('Total: ' + 
-            secondsToHm(Number(timetable[0]["6daysAgoTotal"] == null)+
-            Number(timetable[0]["5daysAgoTotal"])+            
-            Number(timetable[0]["4daysAgoTotal"]) +
-            Number(timetable[0]["3daysAgoTotal"]) +
-            Number(timetable[0]["2daysAgoTotal"]) +
-            Number(timetable[0]["1daysAgoTotal"]) +
-            Number(timetable[0]["0daysAgoTotal"]) 
+            secondsToHm(
+                Number(timetable[0]["6daysAgoTotal"] == null) +
+                Number(timetable[0]["5daysAgoTotal"]) +            
+                Number(timetable[0]["4daysAgoTotal"]) +
+                Number(timetable[0]["3daysAgoTotal"]) +
+                Number(timetable[0]["2daysAgoTotal"]) +
+                Number(timetable[0]["1daysAgoTotal"]) +
+                Number(timetable[0]["0daysAgoTotal"]) 
             ) + 'h');
     } else{
-        $(".total").text('Total: 0h ');     
+        $(".total").text('Total: 0h');     
     }
 
 }
@@ -223,7 +236,6 @@ function ifIsEmptyText(value) {
 }
 
 function cerrar(){
-    $(".loading").fadeIn(200); 
     localStorage.removeItem("userData");
     setTimeout(function () {
     window.location='index.html';
diff --git a/js/index.js b/js/index.js
index 1a7e28a..577cbaa 100644
--- a/js/index.js
+++ b/js/index.js
@@ -31,12 +31,10 @@ function setEvents() {
         setTimeout(function () {
             window.location = "clockIn.html";
             }, 200);
-        $(".loading").fadeOut(200);     
     });
 }
 
 function login() {
-    $(".loading").fadeIn(200);
     $.post({
         urlPath: 'login',
         jsonData: [pin],
@@ -46,7 +44,6 @@ function login() {
             window.location = "clockIn.html";
         },
         error: function() {
-            $(".loading").fadeOut(200);
             $("#txtPin").text("ID USUARIO");
             pin = "";
         }