diff --git a/auditoria.php b/auditoria.php
index 937710e..44f4fd6 100644
--- a/auditoria.php
+++ b/auditoria.php
@@ -416,27 +416,45 @@
                                     <span>{{clase_vista.nombre}}</span>
                                     <i :class="clase_vista.estado_icon" class="mx-3"></i>
                                 </div>
-                                <main>
-                                    <span class="supervisor">{{clase_vista.usuario_nombre}}</span>
-                                    <span class="supervisor_hora">{{clase_vista.registro_fecha_supervisor}}</span>
+                                <main class="supervisor">
+                                    <div v-if="clase_vista.usuario_nombre">
+                                        <span class="supervisor_nombre text-dark">
+                                            {{clase_vista.usuario_nombre}}
+                                        </span>
+                                        <span class="supervisor_hora">
+                                            {{`${new Date(clase_vista.registro_fecha_supervisor).toTimeString().slice(0,
+                                            5)}`}}
+                                        </span>
+                                    </div>
                                     <footer>Supervisor</footer>
                                 </main>
                             </div>
                             <div class="pp-card" style="grid-row: span 8">
                                 <div class="bg-primary text-white">{{clase_vista.carrera}}</div>
-                                <main>
-                                    <span class="materia">{{clase_vista.materia}}</span>
-                                    <span class="horario">
-                                        <section>
-                                            {{clase_vista.horario_hora}}
-                                            {{clase_vista.horario_fin}}
-                                        </section>
-                                        <section>
-                                            {{clase_vista.horario_grupo}}
+                                <main class="horario_clase d-flex flex-column justify-content-center px-4" style="gap: 1rem;">
+                                    <span class="materia_nombre">{{clase_vista.materia}}</span>
+                                    <span class="horario text-dark mb-2">
+                                        <section class="la-salle-regular">
+                                            <span class="font-weight-bold">
+                                                {{ new
+                                                Date(clase_vista.registro_fecha_ideal).toLocaleDateString('es-ES', {
+                                                weekday: 'long' }).replace(/^\w/, c => c.toUpperCase()) }}
+                                            </span>
+                                            <span class="font-italic font-weight-light">de</span>
+                                            <span class="font-weight-bold">{{clase_vista.horario_hora.slice(0,
+                                                5)}}</span>
+                                            <span class="font-italic font-weight-light">a</span>
+                                            <span class="font-weight-bold">{{clase_vista.horario_fin.slice(0,
+                                                5)}}</span>
                                         </section>
+                                        <span class="font-weight-bold la-salle-regular">
+                                            Grupo {{clase_vista.horario_grupo}}
+                                        </span>
+                                        <span class="salon font-italic font-weight-light">{{clase_vista.salon}}</span>
                                     </span>
-                                    <span class="salon">{{clase_vista.salon}}</span>
-                                    <footer>{{clase_vista.nivel}}</footer>
+                                    <footer>
+                                        {{clase_vista.nivel}}
+                                    </footer>
                                 </main>
                             </div>
                             <div class="pp-card" style="grid-row: span 3">
@@ -500,7 +518,7 @@
                                             class="text-muted">{{store.current.justificada.registro_fecha_ideal}}</span>
                                         a
                                         las <span
-                                            class="text-muted">{{store.current.justificada.horario_hora?.slice(0,5)}}</span>
+                                            class="text-muted">{{$`{store.current.justificada.horario_hora?.slice(0,5)}`}}</span>
                                         para el profesor <span
                                             class="text-muted">{{store.current.justificada.profesor_nombre}}</span>
                                     </div>
diff --git a/css/auditoria-ux.css b/css/auditoria-ux.css
index 360d726..44467be 100644
--- a/css/auditoria-ux.css
+++ b/css/auditoria-ux.css
@@ -10,9 +10,16 @@
     font-weight: normal;
 }
 
+.la-salle-regular {
+    font-family: 'La Salle Display Regular';
+}
+
+.la-salle-heavy {
+    font-family: 'La Salle Display Heavy';
+}
+
 .detalle {
     padding: 2rem;
-    padding-inline: 8rem;
 }
 
 .profesor {
@@ -26,8 +33,8 @@
     fill: #001d68;
 }
 
-.profesor-nombre {
-    font-size: 2rem;
+.profesor-nombre, .materia_nombre {
+    font-size: 1.5rem;
     font-weight: 900;
     font-family: 'La Salle Display Regular';
     color: black;
@@ -69,7 +76,7 @@
     background-color: #969696;
 }
 
-.detalle main {
+.detalle > main {
     display: grid;
     gap: 2rem;
     grid-template-columns: repeat(2, 1fr);
@@ -84,11 +91,15 @@
 .pp-card-icon {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: space-around;
     align-items: center;
 }
 
 .pp-card div {
+    padding: 1rem;
+}
+
+.pp-card > div {
     border-start-start-radius: 1rem;
     border-start-end-radius: 1rem;
     padding-inline: 1.5rem;
@@ -128,6 +139,28 @@
     }
 }
 
+.supervisor div {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    
+    .supervisor_nombre {
+        font-size: 1.5rem;
+        font-weight: bolder;
+    }
+    
+    .supervisor_hora {
+        font-size: 1rem;
+        color: #3f3f3f;
+    }
+}
+
+.horario {
+    font-size: 1rem;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
 .facultad {
     font-family: 'La Salle Display Heavy';
     font-size: 1.4rem;
diff --git a/fonts/svg/presentation.svg b/fonts/svg/presentation.svg
new file mode 100644
index 0000000..471f45d
--- /dev/null
+++ b/fonts/svg/presentation.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M464.867 0H239.934C213.945 0 192.8 21.145 192.8 47.133v144.293l-41.766-20.77a90.857 90.857 0 0 0-4.289-1.996c12.262-12.8 19.82-30.144 19.82-49.226 0-39.278-31.953-71.235-71.23-71.235-39.281 0-71.234 31.957-71.234 71.235 0 21.343 9.449 40.515 24.37 53.582C20.993 188.476 0 218.636 0 256v48.2c0 20.75 13.473 38.41 32.133 44.687v83.847c0 8.282 6.715 15 15 15h96.398c8.285 0 15-6.718 15-15V264.2l48.024 24.008c18.379 9.188 43.308 3.711 54.582-17.207h53.781l-56.95 156.605c-2.831 7.786 1.188 16.395 8.973 19.223 8.899 3.238 16.813-2.344 19.223-8.969L346.84 271h10.515l61.297 166.906c2.328 6.332 10.184 12.239 19.254 8.906 7.774-2.855 11.766-11.472 8.907-19.25L389.313 271h75.554C490.352 271 512 250.441 512 223.867V47.133C512 20.555 490.352 0 464.867 0zM54.102 119.434c0-22.739 18.496-41.235 41.23-41.235 22.738 0 41.234 18.496 41.234 41.235 0 22.734-18.496 41.23-41.234 41.23-22.734 0-41.23-18.496-41.23-41.23zM235.5 254.96c-.04.11-.078.223-.113.336-1.024 2.855-3.336 5.262-6.168 6.426a11.232 11.232 0 0 1-9.246-.348c-28.524-14.27-69.739-34.86-69.739-34.86-9.953-4.976-21.703 2.274-21.703 13.419v177.8H62.133v-81.402c0-8.281-6.719-15-15-15-9.45 0-17.133-7.684-17.133-17.133V256c0-36.652 29.844-65.332 65.332-65.332h13.254c10.055 0 20.098 2.36 29.07 6.84 0 0 74.403 37 93.352 46.437 4.058 2.016 5.988 6.75 4.492 11.016zM482 223.867c0 4.582-1.777 8.883-5.012 12.117-3.183 3.188-7.601 5.016-12.12 5.016h-200.47c-.027-.082-.046-.164-.074-.242l37.227-74.45c3.703-7.41.703-16.417-6.707-20.124-7.406-3.704-16.418-.704-20.125 6.707l-31.75 63.496c-5.918-2.95-12.797-6.375-20.168-10.04V47.134c0-9.446 7.683-17.133 17.133-17.133h224.933c4.52 0 8.938 1.828 12.125 5.023 3.23 3.227 5.008 7.528 5.008 12.11zm0 0" fill="#000000" opacity="0.5411764705882353" data-original="#000000" class=""/><path d="M432.734 64.266H272.066c-8.285 0-15 6.714-15 15s6.715 15 15 15h160.668c8.282 0 15-6.715 15-15s-6.714-15-15-15zM432.734 120.5h-80.336c-8.28 0-15 6.715-15 15s6.72 15 15 15h80.336c8.282 0 15-6.715 15-15s-6.714-15-15-15zM432.734 176.734h-80.336c-8.28 0-15 6.715-15 15 0 8.282 6.72 15 15 15h80.336c8.282 0 15-6.718 15-15 0-8.285-6.714-15-15-15zm0 0" fill="#000000" opacity="0.5411764705882353" data-original="#000000" class=""/></g></svg>
\ No newline at end of file
diff --git a/js/auditoría.js b/js/auditoría.js
index 683dc0d..42d0201 100644
--- a/js/auditoría.js
+++ b/js/auditoría.js
@@ -353,6 +353,7 @@ const detalle = reactive({
 
             this.registro_fecha =
             store.current.clase_vista = resultado
+            store.current.clase_vista.supervisor_hora = resultado
         }
         catch (error) {
             console.log('Error:', error)