diff --git a/src/main/java/com/example/proyectofinal/configuration/SecurityConfig.java b/src/main/java/com/example/proyectofinal/configuration/SecurityConfig.java
index b96c155..2a0270a 100644
--- a/src/main/java/com/example/proyectofinal/configuration/SecurityConfig.java
+++ b/src/main/java/com/example/proyectofinal/configuration/SecurityConfig.java
@@ -155,19 +155,18 @@ public class SecurityConfig{
         jdbcTemplate.execute("INSERT INTO familias (nombre) VALUES ('SANIDAD')");
         jdbcTemplate.execute("INSERT INTO familias (nombre) VALUES ('ADMINISTRACION Y GESTION')");
 
-        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.S. DESARROLLO DE APLICACIONES MULTIPLATAFORMA','GSDAM', 1)");
-        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.S. DESARROLLO DE APLICACIONES WEB','GSDAW', 1)");
-        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.S. ADMINISTRACIÓN DE SISTEMAS INFORMÁTICOS EN RED','GSASIX', 1)");
-        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.M. SISTEMAS MICROINFORMÁTICOS Y REDES','GMSMX', 1)");
-        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.M. EMERGENCIAS SANITARIAS','GMES', 2)");
-        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.M. CUIDADOS AUXILIARES DE ENFERMERÍA','GMAE', 2)");
-        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.S. DIETÉTICA','GSDIE', 2)");
-        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.M. Emergencias Sanitarias (SEMIPRESENCIAL)','GMESSEMI', 2)");
-        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('F.P. BÁSICA - SERVICIOS ADMINISTRATIVOS','FPBSA', 3)");
-        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.M. GESTIÓN ADMINISTRATIVA','GMGADM', 3)");
-        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.S. ADMINISTRACIÓN Y FINANZAS','GSADMFIN', 3)");
-        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.M. GESTIÓN ADMINISTRATIVA SEMIPRESENCIAL','GMGADMSEMI', 3)");
-    }
+        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.S. Desarrollo de Aplicaciones Multiplataforma','GSDAM', 1)");
+        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.S. Desarrollo de Aplicaciones Web','GSDAW', 1)");
+        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.S. Administración de Sistemas Informáticos en Red','GSASIX', 1)");
+        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.M. Sistemas Microinformáticos y Redes','GMSMX', 1)");
+        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.M. Emergencias Sanitarias','GMES', 2)");
+        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.M. Cuidados Auxiliares de Enfermería','GMAE', 2)");
+        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.S. Dietética','GSDIE', 2)");
+        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.M. Emergencias Sanitarias (Semipresencial)','GMESSEMI', 2)");
+        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('F.P. Básica - Servicios Administrativos','FPBSA', 3)");
+        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.M. Gestión Administrativa','GMGADM', 3)");
+        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.S. Administración y Finanzas','GSADMFIN', 3)");
+        jdbcTemplate.execute("INSERT INTO ciclos (nombre, codigo, fk_familia) VALUES ('G.M. Gestión Administrativa Semipresencial','GMGADMSEMI', 3)");}
 
     private void triggerCreate() {
         String createTriggerSql = "CREATE DEFINER=`projfin`@`%` TRIGGER `new_user` AFTER INSERT ON `alumnos` " +
diff --git a/src/main/resources/static/style_lista_alu.css b/src/main/resources/static/style_lista_alu.css
new file mode 100644
index 0000000..779efb9
--- /dev/null
+++ b/src/main/resources/static/style_lista_alu.css
@@ -0,0 +1,501 @@
+.header {
+    font-size: 2em;
+    display: flex;
+    background-color: blue;
+    color: white;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+}
+
+.header::before,
+.header::after {
+    content: '';
+    flex: 1;
+}
+
+.header::before {
+    order: -1;
+}
+
+.logout-button {
+    order: 2;
+}
+.logout-button{
+    color: white;
+    background-color: #ed4040;
+    font-size: 1.5em;
+    margin: auto;
+}
+/* TOOLBABR-INPUT-PDF*/
+.toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.2vw;
+    box-sizing: border-box;
+}
+.toolbar .button-group{
+    display: flex;
+    justify-content: right;
+}
+.pdfButton {
+    font-size: 0.5em; /* Adjust as needed */
+    padding: 1em;
+    margin : 0.25em;
+    width: auto;
+    white-space: normal;
+    text-align: center;
+}
+
+/*--TABLE --*/
+.table {
+    width: 100%;
+    table-layout: fixed;
+    border: black 2px;
+}
+.scrollable-cell {
+    overflow: auto;
+    white-space: normal;
+}
+.table td, .table th {
+    overflow: auto;
+    white-space: normal;
+}
+.table-container{
+    display: block;
+    width: 100%;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+.table td, .table th {
+    font-size: 0.5em; /* Adjust as needed */
+    padding: 10px;
+}
+.table td.scrollable-cell .scrollable-content {
+    white-space: normal;
+    max-height: 70px;
+    overflow-x: hidden;
+}
+/* TALBE SIZES */
+@media screen and (min-width: 1900px) {
+    .header h1 {
+        font-size: 2.5em;
+    }
+    .logout-button {
+        font-size: 3em;
+    }
+    .toolbar h1 {
+        font-size: 1.2em;
+    }
+
+    .pdfButton {
+        font-size: 1.2em;
+    }
+    #create-icon{
+        font-size: 2.5em;
+    }
+    input{
+        font-size: 2em;
+    }
+
+    .table td.scrollable-cell .scrollable-content {
+        max-height: 140px;
+    }
+    .edit-icon {
+        font-size: 2em;
+    }
+    .delete-icon {
+        font-size: 2em;
+    }
+}
+
+@media screen and (min-width: 1500px) {
+    .header h1 {
+        font-size: 3em;
+    }
+    .logout-button {
+        font-size: 2.5em;
+    }
+    .toolbar h1 {
+        font-size: 1em;
+    }
+
+    .pdfButton {
+        font-size: 1em;
+    }
+    #create-icon{
+        font-size: 2em;
+    }
+    input{
+        font-size: 1.5em;
+    }
+    .table td.scrollable-cell .scrollable-content {
+        max-height: 120px;
+    }
+    .edit-icon {
+        font-size: 2em;
+    }
+    .delete-icon {
+        font-size: 2em;
+    }
+}
+
+@media screen and (min-width: 1000px) {
+    .header h1 {
+        font-size: 2.5em;
+    }
+    .logout-button {
+        font-size: 2em;
+    }
+    .toolbar h1 {
+        font-size: 0.75em;
+    }
+
+    .pdfButton {
+        font-size: 0.75em;
+    }
+    #create-icon{
+        font-size: 1.75em;
+    }
+    input{
+        font-size: 1em;
+    }
+    .table td.scrollable-cell .scrollable-content {
+        max-height: 100px;
+    }
+    .edit-icon {
+        font-size: 1.25em;
+    }
+    .delete-icon {
+        font-size: 1.25em;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .header h1 {
+        font-size: 1em;
+    }
+    .logout-button {
+        font-size: 0.8em;
+    }
+    .toolbar h1 {
+        font-size: 0.3em;
+    }
+
+    .pdfButton {
+        font-size: 0.3em;
+    }
+    #create-icon{
+        font-size: 0.7em;
+    }
+    input{
+        font-size: 0.5em;
+    }
+    .table td.scrollable-cell .scrollable-content {
+        max-height: 30px;
+    }
+    .edit-icon {
+        font-size: 0.75em;
+    }
+    .delete-icon {
+        font-size:  0.75em;
+    }
+    .table td, .table th{
+        width: 90%;
+    }
+}
+
+@media screen and (max-width: 700px) {
+    .header h1 {
+        font-size: 0.9em;
+    }
+
+    .logout-button {
+        font-size: 0.6em;
+    }
+    .toolbar h1 {
+        font-size: 0.3em;
+    }
+
+    .pdfButton {
+        font-size: 0.3em;
+    }
+    #create-icon{
+        font-size: 0.6em;
+    }
+    input{
+        font-size: 0.6em;
+    }
+    .table td.scrollable-cell .scrollable-content {
+        max-height: 25px;
+    }
+    .edit-icon {
+        font-size: 0.5em;
+    }
+    .delete-icon {
+        font-size:  0.5em;
+    }
+    .table td, .table th{
+        width: 80%;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .header h1 {
+        font-size: 0.8em;
+    }
+
+    .logout-button {
+        font-size: 0.5em;
+    }
+    .toolbar h1 {
+        font-size: 0.2em;
+    }
+
+    .pdfButton {
+        font-size: 0.2em;
+    }
+    #create-icon{
+        font-size: 0.5em;
+    }
+    input{
+        font-size: 0.4em;
+    }
+    .table td.scrollable-cell .scrollable-content {
+        max-height: 18px;
+    }
+    .edit-icon {
+        font-size: 0.25em;
+    }
+    .delete-icon {
+        font-size:  0.25em;
+    }
+    .table td, .table th{
+        width: 70%;
+    }
+}
+
+@media screen and (max-width: 500px) {
+    .header h1 {
+        font-size: 0.7em;
+    }
+
+    .logout-button {
+        font-size: 0.4em;
+    }
+    .toolbar h1 {
+        font-size: 0.18em;
+    }
+
+    .pdfButton {
+        font-size: 0.18em;
+    }
+    #create-icon{
+        font-size: 0.4em;
+    }
+    input{
+        font-size: 0.3em;
+    }
+    .table td.scrollable-cell .scrollable-content {
+        max-height: 17px;
+    }
+    .edit-icon {
+        font-size: 0.225em;
+    }
+    .delete-icon {
+        font-size: 0.225em;
+    }
+    .table td, .table th{
+        width: 60%;
+    }
+}
+
+@media screen and (max-width: 400px) {
+    .header h1 {
+        font-size: 0.6em;
+    }
+    .logout-button {
+        font-size: 0.35em;
+    }
+    .toolbar h1 {
+        font-size: 0.15em;
+    }
+
+    .pdfButton {
+        font-size: 0.15em;
+    }
+    #create-icon{
+        font-size: 0.35em;
+    }
+    input{
+        font-size: 0.3em;
+    }
+
+    .table td.scrollable-cell .scrollable-content {
+        max-height: 20px;
+    }
+    .edit-icon {
+        font-size: 0.2em;
+    }
+    .delete-icon {
+        font-size: 0.2em;
+    }
+    .table td, .table th{
+        width: 30%;
+    }
+}
+
+@media screen and (max-width: 300px) {
+    .header h1 {
+        font-size: 0.5em;
+    }
+    .logout-button {
+        font-size: 0.3em;
+    }
+    .toolbar h1 {
+        font-size: 0.13em;
+    }
+
+    .pdfButton {
+        font-size: 0.13em;
+    }
+    #create-icon{
+        font-size: 0.3em;
+    }
+    input{
+        font-size: 0.2em;
+    }
+    .table td.scrollable-cell .scrollable-content {
+        max-height: 20px;
+    }
+    .edit-icon {
+        font-size: 0.175em;
+    }
+    .delete-icon {
+        font-size: 0.175em;
+    }
+    .table td, .table th{
+        width: 30%;
+    }
+}
+
+@media screen and (max-width: 200px) {
+    .header h1 {
+        font-size: 0.4em;
+    }
+    .logout-button {
+        font-size: 0.25em;
+    }
+    .toolbar h1 {
+        font-size: 0.1em;
+    }
+
+    .pdfButton {
+        font-size: 0.1em;
+    }
+    #create-icon{
+        font-size: 0.25em;
+    }
+    input{
+        font-size: 0.1em;
+    }
+    .table td.scrollable-cell .scrollable-content {
+        max-height: 15px;
+    }
+    .edit-icon {
+        font-size: 0.15em;
+    }
+    .delete-icon {
+        font-size: 0.15em;
+    }
+    .table td, .table th{
+        width: 20%;
+    }
+}
+
+.edit-icon {
+    color: #ffa600;
+    margin-right: 2px;
+    margin-left: 2px;
+    font-size: 1em;
+}
+.delete-icon {
+    color: red;
+    margin-left: 2px;
+    font-size: 1em;
+}
+#create-icon {
+    color: green;
+    font-size: 1em;
+}
+.inactive {
+    pointer-events: none;
+    color: grey;
+}
+.no-link-style {
+    color: inherit;
+    text-decoration: none;
+}
+
+.modal{
+    display: none;
+    position: fixed;
+    z-index: 1001;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
+}
+.modal-content{
+    background-color: #fefefe;
+    margin: 20% auto;
+    padding: 20px;
+    border: 2px solid #888;
+    width: 25%;
+}
+
+.delete{
+    background-color: #f8f9fa;
+    color: red;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    padding: 10px;
+}
+.close{
+    background-color: #f8f9fa;
+    color: black;
+    float: right;
+    font-size: 28px;
+    padding: 10px;
+    font-weight: bold;
+}
+
+.close:hover{
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.delete:hover{
+    color: #ed4040;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.modal p{
+    font-size: 20px;
+}
+.page{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20px;
+}
+.page a{
+    padding:10px;
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/list/empresas.html b/src/main/resources/templates/list/empresas.html
index c417fbe..c64c1ad 100644
--- a/src/main/resources/templates/list/empresas.html
+++ b/src/main/resources/templates/list/empresas.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
-     <link rel="stylesheet" type="text/css" th:href="@{/style.css}">
+    <!-- <link rel="stylesheet" type="text/css" th:href="@{/style.css}">-->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
@@ -12,7 +12,535 @@
     <style>
 
         /*-- HEADER--*/
+        .header {
+            font-size: 2em;
+            display: flex;
+            background-color: blue;
+            color: white;
+            justify-content: space-between;
+            align-items: center;
+            position: relative;
+        }
+
+        .header::before,
+        .header::after {
+            content: '';
+            flex: 1;
+        }
+
+        .header::before {
+            order: -1;
+        }
+
+        .logout-button {
+            order: 2;
+        }
+        .logout-button{
+            color: white;
+            background-color: #ed4040;
+            font-size: 1.5em;
+            margin: auto;
+        }
+        /* TOOLBABR-INPUT-PDF*/
+        .toolbar {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0.2vw;
+            box-sizing: border-box;
+        }
+        .toolbar .button-group{
+            display: flex;
+            justify-content: right;
+        }
+        .pdfButton {
+            font-size: 0.5em; /* Adjust as needed */
+            padding: 1em;
+            margin : 0.25em;
+            width: auto;
+            white-space: normal;
+            text-align: center;
+        }
+
+        /*--TABLE --*/
+        .table {
+            width: 100%;
+            table-layout: fixed;
+            border: black 2px;
+        }
+        .scrollable-cell {
+            overflow: auto;
+            white-space: normal;
+        }
+        .table td, .table th {
+            overflow: auto;
+            white-space: normal;
+        }
+        .table-container{
+            display: block;
+            width: 100%;
+            overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
+        }
+        .table td, .table th {
+            font-size: 1em; /* Adjust as needed */
+            padding: 10px;
+        }
+        .table td.scrollable-cell .scrollable-content {
+            white-space: normal;
+            max-height: 70px;
+            overflow-x: hidden;
+        }
+        /* TALBE SIZES */
+        @media screen and (min-width: 1900px) {
+            .header h1 {
+                font-size: 3.5em;
+            }
+            .logout-button {
+                font-size: 3em;
+            }
+            .toolbar h1 {
+                font-size: 1.2em;
+            }
+
+            .pdfButton {
+                font-size: 1.2em;
+            }
+            #create-icon{
+                font-size: 2.5em;
+            }
+            input{
+                font-size: 2.5em;
+            }
+            .table td, .table th {
+                font-size: 2.2em;
+            }
+            .table td.scrollable-cell .scrollable-content {
+                max-height: 140px;
+            }
+            .edit-icon {
+                font-size: 2.5em;
+            }
+            .delete-icon {
+                font-size: 2.5em;
+            }
+        }
+
+        @media screen and (min-width: 1500px) {
+            .header h1 {
+                font-size: 3em;
+            }
+            .logout-button {
+                font-size: 2.5em;
+            }
+            .toolbar h1 {
+                font-size: 1em;
+            }
+
+            .pdfButton {
+                font-size: 1em;
+            }
+            #create-icon{
+                font-size: 2em;
+            }
+            input{
+                font-size: 2em;
+            }
+            .table td, .table th {
+                font-size: 1.8em;
+            }
+            .table td.scrollable-cell .scrollable-content {
+                max-height: 120px;
+            }
+            .edit-icon {
+                font-size: 2em;
+            }
+            .delete-icon {
+                font-size: 2em;
+            }
+        }
+
+        @media screen and (min-width: 1000px) {
+            .header h1 {
+                font-size: 2.5em;
+            }
+            .logout-button {
+                font-size: 2em;
+            }
+            .toolbar h1 {
+                font-size: 0.75em;
+            }
+
+            .pdfButton {
+                font-size: 0.75em;
+            }
+            #create-icon{
+                font-size: 1.75em;
+            }
+            input{
+                font-size: 1.75em;
+            }
+            .table td, .table th {
+                font-size: 1.5em;
+            }
+            .table td.scrollable-cell .scrollable-content {
+                max-height: 100px;
+            }
+            .edit-icon {
+                font-size: 1.25em;
+            }
+            .delete-icon {
+                font-size: 1.25em;
+            }
+        }
+
+        @media screen and (max-width: 800px) {
+            .header h1 {
+                font-size: 1em;
+            }
+            .logout-button {
+                font-size: 0.8em;
+            }
+            .toolbar h1 {
+                font-size: 0.3em;
+            }
+
+            .pdfButton {
+                font-size: 0.3em;
+            }
+            #create-icon{
+                font-size: 0.7em;
+            }
+            input{
+                font-size: 0.7em;
+            }
+            .table td, .table th {
+                font-size: 0.7em;
+            }
+            .table td.scrollable-cell .scrollable-content {
+                max-height: 30px;
+            }
+            .edit-icon {
+                font-size: 0.75em;
+            }
+            .delete-icon {
+                font-size:  0.75em;
+            }
+            .table td, .table th{
+                width: 90%;
+            }
+        }
+
+        @media screen and (max-width: 700px) {
+            .header h1 {
+                font-size: 0.9em;
+            }
+
+            .logout-button {
+                font-size: 0.6em;
+            }
+            .toolbar h1 {
+                font-size: 0.3em;
+            }
+
+            .pdfButton {
+                font-size: 0.3em;
+            }
+            #create-icon{
+                font-size: 0.6em;
+            }
+            input{
+                font-size: 0.6em;
+            }
+            .table td, .table th {
+                font-size: 0.6em;
+            }
+            .table td.scrollable-cell .scrollable-content {
+                max-height: 25px;
+            }
+            .edit-icon {
+                font-size: 0.5em;
+            }
+            .delete-icon {
+                font-size:  0.5em;
+            }
+            .table td, .table th{
+                width: 80%;
+            }
+        }
+
+        @media screen and (max-width: 600px) {
+            .header h1 {
+                font-size: 0.8em;
+            }
+
+            .logout-button {
+                font-size: 0.5em;
+            }
+            .toolbar h1 {
+                font-size: 0.2em;
+            }
 
+            .pdfButton {
+                font-size: 0.2em;
+            }
+            #create-icon{
+                font-size: 0.5em;
+            }
+            input{
+                font-size: 0.5em;
+            }
+            .table td, .table th {
+                font-size: 0.5em;
+            }
+            .table td.scrollable-cell .scrollable-content {
+                max-height: 18px;
+            }
+            .edit-icon {
+                font-size: 0.25em;
+            }
+            .delete-icon {
+                font-size:  0.25em;
+            }
+            .table td, .table th{
+                width: 70%;
+            }
+        }
+
+        @media screen and (max-width: 500px) {
+            .header h1 {
+                font-size: 0.7em;
+            }
+
+            .logout-button {
+                font-size: 0.4em;
+            }
+            .toolbar h1 {
+                font-size: 0.18em;
+            }
+
+            .pdfButton {
+                font-size: 0.18em;
+            }
+            #create-icon{
+                font-size: 0.4em;
+            }
+            input{
+                font-size: 0.4em;
+            }
+            .table td, .table th {
+                font-size: 0.4em;
+            }
+            .table td.scrollable-cell .scrollable-content {
+                max-height: 17px;
+            }
+            .edit-icon {
+                font-size: 0.225em;
+            }
+            .delete-icon {
+                font-size: 0.225em;
+            }
+            .table td, .table th{
+                width: 60%;
+            }
+        }
+
+        @media screen and (max-width: 400px) {
+            .header h1 {
+                font-size: 0.6em;
+            }
+            .logout-button {
+                font-size: 0.35em;
+            }
+            .toolbar h1 {
+                font-size: 0.15em;
+            }
+
+            .pdfButton {
+                font-size: 0.15em;
+            }
+            #create-icon{
+                font-size: 0.35em;
+            }
+            input{
+                font-size: 0.35em;
+            }
+            .table td, .table th {
+                font-size: 0.35em;
+            }
+            .table td.scrollable-cell .scrollable-content {
+                max-height: 20px;
+            }
+            .edit-icon {
+                font-size: 0.2em;
+            }
+            .delete-icon {
+                font-size: 0.2em;
+            }
+            .table td, .table th{
+                width: 30%;
+            }
+        }
+
+        @media screen and (max-width: 300px) {
+            .header h1 {
+                font-size: 0.5em;
+            }
+            .logout-button {
+                font-size: 0.3em;
+            }
+            .toolbar h1 {
+                font-size: 0.13em;
+            }
+
+            .pdfButton {
+                font-size: 0.13em;
+            }
+            #create-icon{
+                font-size: 0.3em;
+            }
+            input{
+                font-size: 0.3em;
+            }
+            .table td, .table th {
+                font-size: 0.3em;
+            }
+            .table td.scrollable-cell .scrollable-content {
+                max-height: 20px;
+            }
+            .edit-icon {
+                font-size: 0.175em;
+            }
+            .delete-icon {
+                font-size: 0.175em;
+            }
+            .table td, .table th{
+                width: 30%;
+            }
+        }
+
+        @media screen and (max-width: 200px) {
+            .header h1 {
+                font-size: 0.4em;
+            }
+            .logout-button {
+                font-size: 0.25em;
+            }
+            .toolbar h1 {
+                font-size: 0.1em;
+            }
+
+            .pdfButton {
+                font-size: 0.1em;
+            }
+            #create-icon{
+                font-size: 0.25em;
+            }
+            input{
+                font-size: 0.25em;
+            }
+            .table td, .table th {
+                font-size: 0.25em;
+            }
+            .table td.scrollable-cell .scrollable-content {
+                max-height: 15px;
+            }
+            .edit-icon {
+                font-size: 0.15em;
+            }
+            .delete-icon {
+                font-size: 0.15em;
+            }
+            .table td, .table th{
+                width: 20%;
+            }
+        }
+
+        .edit-icon {
+            color: #ffa600;
+            margin-right: 2px;
+            margin-left: 2px;
+            font-size: 1em;
+        }
+        .delete-icon {
+            color: red;
+            margin-left: 2px;
+            font-size: 1em;
+        }
+        #create-icon {
+            color: green;
+            font-size: 1em;
+        }
+        .inactive {
+            pointer-events: none;
+            color: grey;
+        }
+        .no-link-style {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        .modal{
+            display: none;
+            position: fixed;
+            z-index: 1001;
+            left: 0;
+            top: 0;
+            width: 100vw;
+            height: 100%;
+            overflow: auto;
+            background-color: rgb(0,0,0);
+            background-color: rgba(0,0,0,0.4);
+        }
+        .modal-content{
+            background-color: #fefefe;
+            margin: 20% auto;
+            padding: 20px;
+            border: 2px solid #888;
+            width: 25%;
+        }
+
+        .delete{
+            background-color: #f8f9fa;
+            color: red;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+            padding: 10px;
+        }
+        .close{
+            background-color: #f8f9fa;
+            color: black;
+            float: right;
+            font-size: 28px;
+            padding: 10px;
+            font-weight: bold;
+        }
+
+        .close:hover{
+            color: black;
+            text-decoration: none;
+            cursor: pointer;
+        }
+
+        .delete:hover{
+            color: #ed4040;
+            text-decoration: none;
+            cursor: pointer;
+        }
+
+        .modal p{
+            font-size: 20px;
+        }
+        .page{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 20px;
+        }
+        .page a{
+            padding:10px;
+        }
     </style>
 </head>
 <body>
@@ -87,8 +615,8 @@
             <td>[[${empresa.correo}]]</td>
             <td>[[${empresa.telefono}]]</td>
             <td class="scrollable-cell">
-                <div class="scrollable-content" th:utext="${#strings.replace(empresa.keywords, ',', ',&lt;br&gt;')}">
-                    <!-- Keywords will be inserted here with <br> tags after each comma -->
+                <div class="scrollable-content" th:utext="${#strings.replace(empresa.keywords, ',', '&lt;br&gt;')}">
+                    [[${empresa.keywords}]]
                 </div>
             </td>
             <td class="scrollable-cell">
@@ -251,6 +779,8 @@
                     tableBody.innerHTML = '';
                     data.forEach(empresa => {
                         var row = document.createElement('tr');
+                        var keywords = empresa.keywords;
+                        keywords = keywords.replace(/,/g, '\n');
                         row.dataset.id = empresa.id;
                         var iconHtml = '';
                         if (isAdmin) {
@@ -266,8 +796,8 @@
                 <td>${empresa.correo}</td>
                 <td>${empresa.telefono}</td>
                <td class="scrollable-cell">
-                <div class="scrollable-content" th:utext="${#strings.replace(empresa.keywords, ',', ',&lt;br&gt;')}">
-                    [[${empresa.keywords}]]
+                <div class="scrollable-content">
+                    ${keywords}
                   </div>
                 </td>
                 <td>${empresa.sector.nombre}</td>
@@ -383,6 +913,8 @@
                 data.forEach(empresa => {
                     var row = document.createElement('tr');
                     row.dataset.id = empresa.id;
+                    var keywords = empresa.keywords;
+                    keywords = keywords.replace(/,/g, '\n');
                     row.innerHTML = `
                     <td>${empresa.nombre}</td>
                     <td>${empresa.cif}</td>
@@ -390,7 +922,7 @@
                     <td>${empresa.telefono}</td>
                     <td class="scrollable-cell">
                         <div class="scrollable-content">
-                            ${empresa.keywords}
+                            ${keywords}
                         </div>
                     </td>
                     <td class="scrollable-cell">
diff --git a/src/main/resources/templates/list/ofertas.html b/src/main/resources/templates/list/ofertas.html
index bbb89dd..64f5e45 100644
--- a/src/main/resources/templates/list/ofertas.html
+++ b/src/main/resources/templates/list/ofertas.html
@@ -79,7 +79,11 @@
                 [[${oferta.nombre}]]
             </td>
             <td>[[${oferta.fecha}]]</td>
-            <td>[[${oferta.descripcion}]]</td>
+            <td class="scrollable-cell">
+                <div class="scrollable-content">
+                    [[${oferta.descripcion}]]
+                </div>
+            </td>
             <td>[[${oferta.sucursal.nombre}]]</td>
             <td class="scrollable-cell">
                 <div class="scrollable-content">
@@ -261,7 +265,11 @@
                 ${oferta.nombre}
             </td>
             <td>${oferta.fecha}</td>
-            <td>${oferta.descripcion}</td>
+            <td class="scrollable-cell">
+                <div class="scrollable-content">
+                ${oferta.descripcion}
+                </div>
+            </td>
             <td>${oferta.sucursal.nombre}</td>
             <td class="scrollable-cell">
                 <div class="scrollable-content ">
@@ -400,7 +408,11 @@
                     row.innerHTML = `
             <td>${oferta.nombre}</td>
             <td>${oferta.fecha}</td>
-            <td>${oferta.descripcion}</td>
+            <td class="scrollable-cell">
+                <div class="scrollable-content">
+                    ${oferta.descripcion}
+                </div>
+            </td>
             <td>${oferta.sucursal.nombre}</td>
             <td>${oferta.ciclo.nombre}</td>
             <td>${oferta.skills.map(skill => skill.nombre).join(', ')}</td>
diff --git a/src/main/resources/templates/list_alu/empresas.html b/src/main/resources/templates/list_alu/empresas.html
index 4bcd4f6..3619c34 100644
--- a/src/main/resources/templates/list_alu/empresas.html
+++ b/src/main/resources/templates/list_alu/empresas.html
@@ -10,10 +10,6 @@
     <meta charset="UTF-8">
     <title>Lista Empresas</title>
     <style>
-        .table td.scrollable-cell .skill-cell {
-            width: 300px;
-            min-height: 50px;
-        }
     </style>
 </head>
 <body>
@@ -165,6 +161,8 @@
                     data.forEach(empresa => {
                         var row = document.createElement('tr');
                         row.dataset.id = empresa.id;
+                        var keywords = empresa.keywords;
+                        keywords = keywords.replace(/,/g, '\n');
                         row.innerHTML = `
             <td>
                 ${empresa.nombre}
@@ -173,8 +171,8 @@
                 <td>${empresa.correo}</td>
                 <td>${empresa.telefono}</td>
                  <td class="scrollable-cell">
-                        <div class="scrollable-content">
-                            ${empresa.keywords}
+                        <div class="scrollable-content" th:utext="${#strings.replace(empresa.keywords, ',', ',&lt;br&gt;')}">
+                            ${keywords}
                         </div>
                  </td>
                 <td>${empresa.sector.nombre}</td>
@@ -251,6 +249,8 @@
                 data.forEach(empresa => {
                     var row = document.createElement('tr');
                     row.dataset.id = empresa.id;
+                    var keywords = empresa.keywords;
+                    keywords = keywords.replace(/,/g, '\n');
                     row.innerHTML = `
                     <td>${empresa.nombre}</td>
                       <td>${empresa.cif}</td>
@@ -258,7 +258,7 @@
                 <td>${empresa.telefono}</td>
                <td class="keywords-cell">
                  <div class="scrollable-content">
-                     ${empresa.keywords}
+                     ${keywords}
                   </div>
                 </td>
                 <td>${empresa.sector.nombre}</td>
diff --git a/src/main/resources/templates/list_alu/ofertas.html b/src/main/resources/templates/list_alu/ofertas.html
index a5adee4..ea1bc4f 100644
--- a/src/main/resources/templates/list_alu/ofertas.html
+++ b/src/main/resources/templates/list_alu/ofertas.html
@@ -73,7 +73,11 @@
                 [[${oferta.nombre}]]
             </td>
             <td>[[${oferta.fecha}]]</td>
-            <td>[[${oferta.descripcion}]]</td>
+            <td class="scrollable-cell">
+                <div class="scrollable-content">
+                    [[${oferta.descripcion}]]
+                </div>
+            </td>
             <td>[[${oferta.sucursal.nombre}]]</td>
             <td class="scrollable-cell">
                 <div class="scrollable-content">
@@ -161,7 +165,11 @@
                 ${oferta.nombre}
             </td>
             <td>${oferta.fecha}</td>
-            <td>${oferta.descripcion}</td>
+            <td class="scrollable-cell">
+                <div class="scrollable-content">
+                    ${oferta.descripcion}
+                </div>
+            </td>
             <td>${oferta.sucursal.nombre}</td>
             <td class="scrollable-cell">
                 <div class="scrollable-content">
@@ -258,7 +266,11 @@
                     row.innerHTML = `
             <td>${oferta.nombre}</td>
             <td>${oferta.fecha}</td>
-            <td>${oferta.descripcion}</td>
+            <td class="scrollable-cell">
+                <div class="scrollable-content">
+                    ${oferta.descripcion}
+                </div>
+            </td>
             <td>${oferta.sucursal.nombre}</td>
             <td>${oferta.ciclo.nombre}</td>
             <td>${oferta.skills.map(skill => skill.nombre).join(', ')}</td>