392 changed files with 9612 additions and 15597 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,9 +1,2 @@
 ogWebconsole/.env
 ogWebconsole/test-results/ogGui-junit-report.xml
-node_modules/
-### Debian packaging 
-debian/oggui
-debian/*.substvars 
-debian/*.log
-debian/.debhelper/
-debian/files
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,97 +1,7 @@
 # Changelog
-## [0.11.2] - 2025-4-16
-### Fixed
- Se ha corregido un error en la actualizacion del estado de los pcs en la vista tarjetas.

---
-## [0.11.1] - 2025-4-16
-### Improved
- Nuevos campos en la tabla de clientes. Tipo de firmware y mac.
+## [0.5.0] - 2024-11-19

-## Fixed
- Se ha corregido error al crear OUs, que no refrescaba la web.
- Se ha corregido error en el formulario de creacion de imagenes. Si se seleccionaba una imagen para un versionado, no dejaba deseleccionar.
- Se ha corregido un bug en el particionador que impedia ejecutar, cuando eliminabamos una particion.
-
---
-## [0.11.0] - 2025-4-11
-### Added
- Se ha diseñado el nuevo formulario para poder ejecutar script. Sistema mejorado con variables etiquetadas.
- Se puede añadir descripcion a una imagen.
- Se han añadido al formulario de crear/editar repositorio, la posibilidad de añadir usuario y puerto ssh.
- Nuevo estado en pc => desconectado.
- Se ha añadido nueva accion para renombrar imagen monolitica.
-
-### Improved
- Se ha mejorado la interfaz de usuario tanto para el despliegue de imagenes, como el particionado.
- Se ha mejorado la responsividad de la vista de grupos.
- Cambios en el comportamiento general de muchos componentes modales. Se han añadido spinners de carga mas intuitivos.
-
---
-
-## [0.10.1] - 2025-3-27
-### Improved
- Mejoras en el comportamiento del arbol de grupos.
- Nueva regexp para controlar las "macs" en la creacion de clientes.
-
---
-## [0.10.0] - 2025-3-25
-### Added
- Nuevo componenten de estado global.
- Servicio para que el ogGui obtenga de forma dinamica las variables de entorno.
- Nueva funcionalidad para convertir imagen en imagen virtual.
- Nueva funcionalidad para importar imágenes externas al sistema.
- Despliegue de imangenes sin cache. Cambios en el formulario de "despliegue".
-
-### Improved
- Mejoras en la internacionalización.
- Nueva UX ogRepository. Ahora se gestionan las imagenes de forma mas sencilla.
- Cambios en ogLive. Mejora en la sincronizacion y obtención de datos en la API
-
-### Fixed
- Cambios en la expresion regular para la validacion de documentos DHCP en la carga masiva de pc.
-
---
-## [0.9.2] - 2025-03-19
-### Changed 
- Jenkinsfile to pubilsh packages in repo in case og release
-
---
-## [0.9.1] - 2025-03-12
-### Changed
- Se ha modificado el acceso a Mercure añadiendo nueva variable de entorno.
-
---
-## [0.9.0] - 2025-3-4
-### Added
- Integracion con Mercure. Subscriber tanto en "Trazas" con en "Clientes".
- Nueva funcionalidad para checkear la integridad de una imagen. Boton en apartado "imagenes" dentro del repositorio.
- Centralizacion de estilos.
- Nueva funcionalidad para realizar backup de imágenes.
- Botón para cancelar despliegues de imagenes. Aparece en "trazas" tan solo para los comendos "deploy" y para el estado "en progreso".
-
-### Changed
- Nueva interfaz en "Grupos". Se ha aprovechado mejor el espacio y acortado el tamaño de las filas, para poder tener mas elementos por pantalla.
- Cambios en filtros de "Grupos". Ahora se pueden filtrar por "Centro" y "Unidad Organizativa" y estado. Ahora se busca en base de datos, y no en una lista de clientes dados. 
- Refactorizados compontentes de crear/editar clientes en uno solo. 
- Cambios en DHCP. Nueva UX en "ver clientes". Ahora tenemos un buscador detallado.
- Para gestionar/añadir clientes a subredes ahora tenemos un botón para "añadir todos" y tan solo nos aparecn los equipos que no estén previamente asignados en una subred.
-
---
-## [0.7.0] - 2024-12-10
-### Refactored
- Refactored the group screen, removing the separate tabs for clients, advanced search, and organizational units.
- Added support for partitioning functionality in the client detail view.
-
---
-## [0.6.1] - 2024-11-19
-### Improved
- Introduced a new automatic sync mode for the ogdhcp and ogBoot components.
- Improve test coverage.
- New view for clients inside the classroom on the main page.
-
---
-## [0.6.0] - 2024-11-19
 ### Added
 - Added functionality to execute actions from the menu in the general groups screen.
 - Displayed the selected center on the general screen for better context.
@ -104,7 +14,7 @@

 ### Improved
 - Renamed the field "Reserved Room" to "Available RemotePC" for better clarity.
- Added view sizes for visual cards.
+- Added view sizes for visual cards (`mat-card`).
 - Refactored the task stepper to improve efficiency and readability.
 - Replaced red "X" icons with more consistent and user-friendly visuals.
 - Allowed logical names for IP addresses in the subnets section.
@ -112,8 +22,10 @@
 - Made predefined commands read-only to prevent accidental modifications.
 - Simplified the task creation modal to enhance user experience.
 - Adjusted the translation system to cover new elements and improve consistency (work in progress).
- New element view from clients on groups main view.

 ### Fixed
 - Resolved an issue that prevented editing software profiles correctly.
 - Fixed a bug where newly created commands failed to execute in the commands section.
+
+---
+
--- a/Jenkins/Jenkinsfile-deb-pkg
+++ b/Jenkins/Jenkinsfile-deb-pkg
@ -1,107 +0,0 @@
-@Library('jenkins-shared-library') _
-pipeline {
-    agent {
-        label 'jenkins-slave'
-    }
-    environment {
-        DEBIAN_FRONTEND = 'noninteractive'
-        DEFAULT_DEV_NAME = 'Opengnsys Team'
-        DEFAULT_DEV_EMAIL = 'opengnsys@qindel.com'
-    }
-    options {
-        skipDefaultCheckout()
-    }
-    parameters {
-        string(name: 'DEV_NAME', defaultValue: '', description: 'Nombre del desarrollador')
-        string(name: 'DEV_EMAIL', defaultValue: '', description: 'Email del desarrollador')
-    }
-    stages {
-        stage('Prepare Workspace') {
-            steps {
-                script {
-                    env.BUILD_DIR = "${WORKSPACE}/oggui"
-                    sh "mkdir -p ${env.BUILD_DIR}"
-                }
-            }
-        }
-
-        stage('Checkout') {
-            steps {
-                dir("${env.BUILD_DIR}") {
-                    checkout scm
-                }
-            }
-        }
-
-        stage('Generate Changelog') {
-            when {
-                expression {
-                    return env.TAG_NAME != null
-                }
-            }
-            steps {
-                script {
-                    def devName = params.DEV_NAME ? params.DEV_NAME : env.DEFAULT_DEV_NAME
-                    def devEmail = params.DEV_EMAIL ? params.DEV_EMAIL : env.DEFAULT_DEV_EMAIL
-
-                    generateDebianChangelog(env.BUILD_DIR, devName, devEmail)
-                }
-            }
-        }
-        stage('Generate Changelog (Nightly)'){
-            when {
-                branch 'main'
-            }
-            steps {
-                script {
-                    def devName = params.DEV_NAME ? params.DEV_NAME : env.DEFAULT_DEV_NAME
-                    def devEmail = params.DEV_EMAIL ? params.DEV_EMAIL : env.DEFAULT_DEV_EMAIL
-                    generateDebianChangelog(env.BUILD_DIR, devName, devEmail,"nightly")
-                }
-            }
-        }
-
-
-        stage('Build') {
-            steps {
-                script {
-                    construirPaquete(env.BUILD_DIR, "../artifacts", "172.17.8.68", "/var/tmp/opengnsys/debian-repo/oggui")
-                }
-            }
-        }
-        stage ('Publish to Debian Repository') {
-            when {
-                expression {
-                    return env.TAG_NAME != null
-                }
-            }
-            agent { label 'debian-repo' }
-            steps {
-                script {
-                    // Construir el patrón de versión esperado en el nombre del paquete
-                    def versionPattern = "${env.TAG_NAME}-${env.BUILD_NUMBER}"
-                    publicarEnAptly('/var/tmp/opengnsys/debian-repo/oggui', 'opengnsys-devel', versionPattern)
-                }
-            }
-        }
-        stage ('Publish to Debian Repository (Nightly)') {
-            when {
-                branch 'main'
-            }
-            agent { label 'debian-repo' }
-            steps {
-               script {
-                    // Construir el patrón de versión esperado en el nombre del paquete
-                    def versionPattern = "-${env.BUILD_NUMBER}~nightly"
-                    publicarEnAptly('/var/tmp/opengnsys/debian-repo/oggui', 'nightly', versionPattern)
-                }
-            }
-        }
-    }
-    post {
-        always {
-            notifyBuildStatus('narenas@qindel.com')
-        }
-    }
-}
-
--- a/bin/start-oggui.sh
+++ b/bin/start-oggui.sh
@ -1,34 +0,0 @@
-#!/bin/bash
-set -e
-
-CONFIG_FILE="/opt/opengnsys/oggui/src/.env"
-HASH_FILE="/opt/opengnsys/oggui/var/lib/oggui/oggui.config.hash"
-APP_DIR="/opt/opengnsys/oggui/browser"
-SRC_DIR="/opt/opengnsys/oggui/src"
-COMPILED_DIR=$SRC_DIR/dist
-NGINX_SERVICE="nginx"
-
-# Verificar si el archivo de configuración cambió
-if [ -f "$CONFIG_FILE" ] && [ -f "$HASH_FILE" ]; then
-    OLD_HASH=$(cat "$HASH_FILE")
-    NEW_HASH=$(md5sum "$CONFIG_FILE")
-
-    if [ "$OLD_HASH" != "$NEW_HASH" ]; then
-        echo "🔄 Cambios detectados en $CONFIG_FILE, recompilando Angular..."
-        cd "$SRC_DIR"
-        npm install -g @angular/cli
-        npm install
-        /usr/local/bin/ng build --base-href=/ --output-path=dist/oggui --optimization=true --configuration=production --localize=false 
-        md5sum "$CONFIG_FILE" > "$HASH_FILE"
-        exit 0 
-    else
-        echo "No hay cambios en $CONFIG_FILE, no es necesario recompilar."
-        exit 0 
-    fi
-else
-    echo "Archivo de configuración no encontrado o sin hash previo. No se recompilará."
-    exit 1
-fi
-
-# Iniciar Nginx
-systemctl restart "$NGINX_SERVICE"
--- a/debian/changelog
+++ b/debian/changelog
@ -1,14 +0,0 @@
-oggui (0.0.1-1) unstable; urgency=medium
-
-  * Add debian files
-  * Update .gitignore
-  * refs #1637 refactor: remove unused client edit and create components; add manage client component
-  * refs #1619. Style: enhance cards view layout and paginator integration in groups component
-  * refactor: update paginator settings and improve page change handling in groups component
-  * Merge branch 'develop' of ssh://ognproject.evlt.uma.es:21987/opengnsys/oggui into develop
-  * style: clean up and optimize CSS for groups component; enhance HTML structure and improve responsiveness
-  * Updated groups paginator
-  * Merge branch 'develop' of ssh://ognproject.evlt.uma.es:21987/opengnsys/oggui into develop
-  * refs #1567. New subnet field: 'dns'
-
- -- Tu Nombre <tuemail@example.com>  Mon, 10 Mar 2025 14:48:36 +0000
--- a/debian/compat
+++ b/debian/compat
@ -1 +0,0 @@
-12
--- a/debian/control
+++ b/debian/control
@ -1,13 +0,0 @@
-Source: oggui
-Section: web
-Priority: optional
-Maintainer: Nicolas Arenas <nicolas.arenas@qindel.com>
-Build-Depends: debhelper (>= 12), nodejs, npm
-Standards-Version: 4.5.0
-
-Package: oggui
-Architecture: any
-Maintainer: Nicolas Arenas <nicolas.arenas@qindel.com> 
-Depends: ${shlibs:Depends}, ${misc:Depends}, nginx
-Description: OpenGnsys GUI created for the Opengnsys Team
- Opengnsys Graphical Intercface
--- a/debian/debhelper-build-stamp
+++ b/debian/debhelper-build-stamp
@ -1 +0,0 @@
-oggui
--- a/debian/files
+++ b/debian/files
@ -1,2 +0,0 @@
-oggui_1.0.1+deb-pkg20250310-1_amd64.buildinfo web optional
-oggui_1.0.1+deb-pkg20250310-1_amd64.deb web optional
--- a/debian/oggui.config
+++ b/debian/oggui.config
@ -1,10 +0,0 @@
-#!/bin/sh 
-
-set -e 
-
-. /usr/share/debconf/confmodule
-
-db_input high opengnsys/oggui_ogcoreUrl || true
-db_input high opengnsys/oggui_ogmercureUrl || true
-
-db_go
--- a/debian/oggui.install
+++ b/debian/oggui.install
@ -1,4 +0,0 @@
-ogWebconsole/dist/oggui/browser /opt/opengnsys/oggui/
-etc /opt/opengnsys/oggui/
-ogWebconsole/ssl/* /opt/opengnsys/oggui/etc/nginx/certs/
-
--- a/debian/oggui.postinst
+++ b/debian/oggui.postinst
@ -1,61 +0,0 @@
-#!/bin/bash
-
-set -e
-
-. /usr/share/debconf/confmodule
-
-db_get  opengnsys/oggui_ogcoreUrl
-OGCORE_URL="$RET"
-db_get  opengnsys/oggui_ogmercureUrl
-OGMERCURE_URL="$RET"
-
-# Asegurarse de que el usuario exista
-USER="opengnsys"
-CONFIG_FILE="/opt/opengnsys/oggui/browser/assets/config.json"
-
-restore_config_if_modified() {
-    local new="$1"
-    local backup="$1.bak"
-
-    if [ -f "$backup" ]; then
-        if ! cmp -s "$new" "$backup"; then
-            echo ">>> Archivo modificado por el usuario detectado en $new"
-            echo "    - Guardando archivo nuevo como ${new}.new"
-            mv -f "$new" "${new}.new"
-            echo "    - Restaurando archivo anterior desde backup"
-            mv -f "$backup" "$new"
-        else
-            echo ">>> El archivo $new no ha cambiado desde la última versión, eliminando backup"
-            rm -f "$backup"
-        fi
-    fi
-}
-
-
-# Detectar si es una instalación nueva o una actualización
-if [ "$1" = "configure" ] && [ -z "$2" ]; then
-    if [ ! -f "$CONFIG_FILE" ]; then
-        jq --arg apiUrl "$OGCORE_URL" --arg mercureUrl "$OGMERCURE_URL" \
-          '.apiUrl = $apiUrl | .mercureUrl = $mercureUrl' "$CONFIG_FILE" > "${CONFIG_FILE}.tmp" && mv "${CONFIG_FILE}.tmp" "$CONFIG_FILE"
-    fi
-    ln -s /opt/opengnsys/oggui/etc/nginx/oggui.conf /etc/nginx/sites-enabled/oggui.conf
-    ln -s $CONFIG_FILE /opt/opengnsys/oggui/etc/config.json
-    mkdir -p /etc/nginx/certs/ 
-    cp -p /opt/opengnsys/oggui/etc/nginx/certs/* /etc/nginx/certs/
-    chown -R www-data:www-data /etc/nginx/certs
-    systemctl daemon-reload
-    systemctl restart nginx
-elif [ "$1" = "configure" ] && [ -n "$2" ]; then
-    cd /opt/opengnsys/oggui
-    echo "Actualización desde la versión $2"
-    # Si upgrade recupero los archivos de configuracion
-    echo ">>> Backup de archivos de configuración reales en /opt/opengnsys"
-    restore_config_if_modified "/opt/opengnsys/oggui/etc/nginx/oggui.conf"
-    restore_config_if_modified "$CONFIG_FILE"
-
-fi
-
-# Cambiar la propiedad de los archivos al usuario especificado
-chown opengnsys:www-data /opt/opengnsys/
-chown -R opengnsys:www-data /opt/opengnsys/oggui 
-exit 0
--- a/debian/oggui.postrm
+++ b/debian/oggui.postrm
@ -1,32 +0,0 @@
-#!/bin/sh
-
-set -e
-
-
-NGINX_FILE="/etc/nginx/sites-enabled/oggui.conf"
-UNIT_FILE="/etc/systemd/system/oggui.service"
-
-
-case "$1" in
-    remove)
-        echo "El paquete se está desinstalando..."
-        # Aquí puedes hacer limpieza de archivos o servicios
-        if [ -L "$NGINX_FILE" ]; then
-            rm -f "$NGINX_FILE"
-            systemctl restart nginx
-        fi
-        if [ -L "$UNIT_FILE" ]; then
-            rm -f  "$UNIT_FILE"
-            systemctl daemon-reload
-        fi
-        ;;
-    purge)
-        echo "Eliminando configuración residual..."
-        ;;
-
-    upgrade)
-        echo "Actualizando paquete..."
-        ;;
-esac
-
-exit 0
--- a/debian/oggui.postrm.debhelper
+++ b/debian/oggui.postrm.debhelper
@ -1,6 +0,0 @@
-# Automatically added by dh_installdebconf/13.14.1ubuntu5
-if [ "$1" = purge ] && [ -e /usr/share/debconf/confmodule ]; then
-	. /usr/share/debconf/confmodule
-	db_purge
-fi
-# End automatically added section
--- a/debian/oggui.preinst
+++ b/debian/oggui.preinst
@ -1,32 +0,0 @@
-#!/bin/bash
-
-set -e
-
-backup_file_if_exists() {
-    local original="$1"
-    local backup="$1.bak"
-
-    if [ -e "$original" ]; then
-        echo "   - Guardando backup de $original en $backup"
-        cp -a "$original" "$backup"
-    fi
-}
-CONFIG_FILE="/opt/opengnsys/oggui/browser/assets/config.json"
-# Asegurarse de que el usuario exista
-USER="opengnsys"
-HOME_DIR="/opt/opengnsys"
-if id "$USER" &>/dev/null; then
-    echo "El usuario $USER ya existe."
-else
-    echo "Creando el usuario $USER con home en $HOME_DIR."
-    useradd -m -d "$HOME_DIR" -s /bin/bash "$USER"
-fi
-
-# Si upgrade hago backup del archivo de configuración
-if [ "$1" = "upgrade" ]; then
-    echo ">>> Backup de archivos de configuración reales en /opt/opengnsys"
-    backup_file_if_exists "/opt/opengnsys/oggui/etc/nginx/sites-available/oggui.conf"
-    backup_file_if_exists "$CONFIG_FILE"
-fi
-
-exit 0
--- a/debian/oggui.prerm
+++ b/debian/oggui.prerm
@ -1,13 +0,0 @@
-#!/bin/bash
-
-set -e
-set -x
-
-# Solo eliminar archivos de configuración si se está eliminando el paquete
-if [ "$1" = "remove" ] || [ "$1" = "purge" ]; then
-    rm -f /etc/nginx/sites-enabled/oggui.conf
-    systemctl daemon-reload
-    systemctl restart nginx
-fi
-
-exit 0
--- a/debian/oggui.templates
+++ b/debian/oggui.templates
@ -1,9 +0,0 @@
-Template: opengnsys/oggui_ogcoreUrl
-Type: string
-Default: https://127.0.0.1:8443
-Description: Introduzca la URL delAPI de OgCore
-
-Template: opengnsys/oggui_ogmercureUrl
-Type: string 
-Default: https://127.0.0.1:3000/.well-known/mercure
-Description: Introduzca el endpoint de mercure 
--- a/debian/rules
+++ b/debian/rules
@ -1,11 +0,0 @@
-#!/usr/bin/make -f
-
-%:
-	dh $@
-
-override_dh_auto_build:
-	cd ogWebconsole && npm install
-	cd ogWebconsole && npx ng build --base-href=/ --output-path=dist/oggui --optimization=true --configuration=production
-
-override_dh_auto_install:
-	dh_auto_install
--- a/etc/nginx/oggui.conf
+++ b/etc/nginx/oggui.conf
@ -1,20 +0,0 @@
-server {
-    listen 4200 ssl;
-    server_name localhost;
-
-    root /opt/opengnsys/oggui/browser;
-    index index.html;
-
-    location / {
-        try_files $uri $uri/ /index.html;
-    }
-
-    # Manejo de archivos estáticos
-    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
-        try_files $uri =404;
-    }
-    ssl_certificate /opt/opengnsys/oggui/etc/nginx/certs/oggui.uds-test.net.crt.pem;
-    ssl_certificate_key /opt/opengnsys/oggui/etc/nginx/certs/oggui.uds-test.net.key.pem;
-    # Configuración para evitar problemas con rutas de Angular
-    error_page 404 /index.html;
-}
--- a/ogWebconsole/.env
+++ b/ogWebconsole/.env
@ -1,2 +1 @@
-# NG_APP_BASE_API_URL=https://127.0.0.1:8443
-# NG_APP_OGCORE_MERCURE_BASE_URL=http://localhost:3000/.well-known/mercure
+NG_APP_BASE_API_URL=https://127.0.0.1:8443
--- a/ogWebconsole/.env.prod
+++ b/ogWebconsole/.env.prod
@ -1,2 +0,0 @@
-NG_APP_BASE_API_URL=https://localhost:8443
-NG_APP_OGCORE_MERCURE_BASE_URL=http://localhost:3000/.well-known/mercure
--- a/ogWebconsole/.gitignore
+++ b/ogWebconsole/.gitignore
@ -41,5 +41,3 @@ testem.log
 .DS_Store
 Thumbs.db

-test-results/
-
--- a/ogWebconsole/angular.json
+++ b/ogWebconsole/angular.json
@ -4,6 +4,12 @@
  "newProjectRoot": "projects",
  "projects": {
    "ogWebconsole": {
+      "i18n": {
+        "sourceLocale": "es",
+        "locales": {
+          "en-US": "src/locale/en.json"
+        }
+      },
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
@ -24,7 +30,7 @@
          "builder": "@ngx-env/builder:application",
          "options": {
            "baseHref": "/oggui/",
-            "localize": false,
+            "localize": true,
            "aot": true,
            "outputPath": "dist/og-webconsole",
            "index": "src/index.html",
@ -35,23 +41,20 @@
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
-              "src/favicon.ico",
-              "src/assets",
-              {
-                "glob": "**/*",
-                "input": "src/locale",
-                "output": "/locale"
-              }
-            ],
+  "src/favicon.ico",
+  "src/assets",
+  {
+    "glob": "**/*",
+    "input": "src/locale",
+    "output": "/locale"
+  }
+],
            "styles": [
              "src/custom-theme.scss",
              "src/styles.css",
              "node_modules/ngx-toastr/toastr.css"
            ],
-            "scripts": [],
-            "allowedCommonJsDependencies": [
-              "rfdc"
-            ]
+            "scripts": []
          },
          "configurations": {
            "production": {
@ -63,8 +66,8 @@
                },
                {
                  "type": "anyComponentStyle",
-                  "maximumWarning": "7kb",
-                  "maximumError": "10kb"
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
@ -73,6 +76,16 @@
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": false
+            },
+            "es": {
+              "localize": [
+                "es-ES"
+              ]
+            },
+            "en": {
+              "localize": [
+                "en-US"
+              ]
            }
          },
          "defaultConfiguration": "production"
@ -91,16 +104,29 @@
            },
            "development": {
              "buildTarget": "ogWebconsole:build:development"
+            },
+            "es": {
+              "buildTarget": "ogWebconsole:build:es"
+            },
+            "en": {
+              "buildTarget": "ogWebconsole:build:en"
            }
          },
          "defaultConfiguration": "development"
        },
+        "extract-i18n": {
+          "builder": "@ngx-env/builder:extract-i18n",
+          "options": {
+            "buildTarget": "ogWebconsole:build"
+          }
+        },
        "test": {
          "builder": "@ngx-env/builder:karma",
          "options": {
            "polyfills": [
              "zone.js",
-              "zone.js/testing"
+              "zone.js/testing",
+              "@angular/localize/init"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
@ -108,8 +134,7 @@
              "src/assets"
            ],
            "styles": [
-              "src/styles.css",
-              "src/custom-theme.scss"
+              "src/styles.css"
            ],
            "scripts": []
          }
@ -120,4 +145,4 @@
  "cli": {
    "analytics": "95fac95c-8936-41a8-8c9c-1fae82fe6912"
  }
-}
+}
--- a/ogWebconsole/src/app/components/commands/commands-task/task-logs/input-dialog/input-dialog.component.css
+++ b/ogWebconsole/src/app/components/commands/commands-task/task-logs/input-dialog/input-dialog.component.css
--- a/ogWebconsole/src/app/components/ogdhcp/operation-result-dialog/operation-result-dialog.component.css
+++ b/ogWebconsole/src/app/components/ogdhcp/operation-result-dialog/operation-result-dialog.component.css
--- a/ogWebconsole/package-lock.json
+++ b/ogWebconsole/package-lock.json
@ -24,7 +24,6 @@
        "jwt-decode": "^4.0.0",
        "ngx-joyride": "^2.5.0",
        "ngx-toastr": "^19.0.0",
-        "papaparse": "^5.4.1",
        "rxjs": "~7.8.0",
        "tslib": "^2.3.0",
        "zone.js": "^0.14.6"
@ -36,7 +35,6 @@
        "@angular/localize": "^18.1.0",
        "@ngx-env/builder": "^18.0.1",
        "@types/jasmine": "~5.1.0",
-        "@types/papaparse": "^5.3.15",
        "jasmine-core": "~5.1.0",
        "karma": "~6.4.0",
        "karma-chrome-launcher": "~3.2.0",
@ -5904,15 +5902,6 @@
        "@types/node": "*"
      }
    },
-    "node_modules/@types/papaparse": {
-      "version": "5.3.15",
-      "resolved": "https://registry.npmjs.org/@types/papaparse/-/papaparse-5.3.15.tgz",
-      "integrity": "sha512-JHe6vF6x/8Z85nCX4yFdDslN11d+1pr12E526X8WAfhadOeaOTx5AuIkvDKIBopfvlzpzkdMx4YyvSKCM9oqtw==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
    "node_modules/@types/qs": {
      "version": "6.9.15",
      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.15.tgz",
@ -11966,11 +11955,6 @@
        "node": "^16.14.0 || >=18.0.0"
      }
    },
-    "node_modules/papaparse": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz",
-      "integrity": "sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw=="
-    },
    "node_modules/parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
--- a/ogWebconsole/package.json
+++ b/ogWebconsole/package.json
@ -26,7 +26,6 @@
    "jwt-decode": "^4.0.0",
    "ngx-joyride": "^2.5.0",
    "ngx-toastr": "^19.0.0",
-    "papaparse": "^5.4.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "^0.14.6"
@ -38,7 +37,6 @@
    "@angular/localize": "^18.1.0",
    "@ngx-env/builder": "^18.0.1",
    "@types/jasmine": "~5.1.0",
-    "@types/papaparse": "^5.3.15",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
--- a/ogWebconsole/src/app/app-routing.module.ts
+++ b/ogWebconsole/src/app/app-routing.module.ts
@ -13,11 +13,14 @@ import { PXEimagesComponent } from './components/ogboot/pxe-images/pxe-images.co
 import { PxeComponent } from './components/ogboot/pxe/pxe.component';
 import { PxeBootFilesComponent } from './components/ogboot/pxe-boot-files/pxe-boot-files.component';
 import {OgbootStatusComponent} from "./components/ogboot/ogboot-status/ogboot-status.component";
+import { OgdhcpComponent } from './components/ogdhcp/ogdhcp.component';
+import { OgDhcpSubnetsComponent } from './components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component';
 import { CalendarComponent } from "./components/calendar/calendar.component";
 import { CommandsComponent } from './components/commands/main-commands/commands.component';
 import { CommandsGroupsComponent } from './components/commands/commands-groups/commands-groups.component';
 import { CommandsTaskComponent } from './components/commands/commands-task/commands-task.component';
 import { TaskLogsComponent } from './components/commands/commands-task/task-logs/task-logs.component';
+import { StatusComponent } from "./components/ogdhcp/og-dhcp-subnets/status/status.component";
 import { ClientMainViewComponent } from './components/groups/components/client-main-view/client-main-view.component';
 import { ImagesComponent } from './components/images/images.component';
 import {SoftwareComponent} from "./components/software/software.component";
@ -28,7 +31,7 @@ import {
 } from "./components/groups/components/client-main-view/partition-assistant/partition-assistant.component";
 import {RepositoriesComponent} from "./components/repositories/repositories.component";
 import {
-  CreateClientImageComponent
+  CreateImageComponent
 } from "./components/groups/components/client-main-view/create-image/create-image.component";
 import {
  DeployImageComponent
@ -37,54 +40,50 @@ import {
  MainRepositoryViewComponent
 } from "./components/repositories/main-repository-view/main-repository-view.component";
 import {EnvVarsComponent} from "./components/admin/env-vars/env-vars.component";
-import {MenusComponent} from "./components/menus/menus.component";
-import {OgDhcpSubnetsComponent} from "./components/ogdhcp/og-dhcp-subnets.component";
-import {StatusComponent} from "./components/ogdhcp/status/status.component";
-import {
-  RunScriptAssistantComponent
-} from "./components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component";
 const routes: Routes = [
  { path: '', redirectTo: 'auth/login', pathMatch: 'full' },
-  { path: '', component: MainLayoutComponent,
-    children: [
-      { path: 'dashboard', component: DashboardComponent },
-      { path: 'admin', component: AdminComponent },
-      { path: 'users', component: UsersComponent },
-      { path: 'env-vars', component: EnvVarsComponent },
-      { path: 'user-groups', component: RolesComponent },
-      { path: 'groups', component: GroupsComponent },
-      { path: 'pxe-images', component: PXEimagesComponent },
-      { path: 'pxe', component: PxeComponent },
-      { path: 'pxe-boot-file', component: PxeBootFilesComponent },
-      { path: 'ogboot-status', component: OgbootStatusComponent },
-      { path: 'subnets', component: OgDhcpSubnetsComponent },
-      { path: 'ogdhcp-status', component: StatusComponent },
-      { path: 'commands', component: CommandsComponent },
-      { path: 'commands-groups', component: CommandsGroupsComponent },
-      { path: 'commands-task', component: CommandsTaskComponent },
-      { path: 'commands-logs', component: TaskLogsComponent },
-      { path: 'calendars', component: CalendarComponent },
-      { path: 'clients/deploy-image', component: DeployImageComponent },
-      { path: 'clients/partition-assistant', component: PartitionAssistantComponent },
-      { path: 'clients/run-script', component: RunScriptAssistantComponent },
-      { path: 'clients/:id', component: ClientMainViewComponent },
-      { path: 'clients/:id/create-image', component: CreateClientImageComponent },
-      { path: 'repositories', component: RepositoriesComponent },
-      { path: 'repository/:id', component: MainRepositoryViewComponent },
-      { path: 'software', component: SoftwareComponent },
-      { path: 'software-profiles', component: SoftwareProfileComponent },
-      { path: 'operative-systems', component: OperativeSystemComponent },
-      { path: 'menus', component: MenusComponent },
-    ],
-  },
-  {
-    path: 'auth',
-    component: AuthLayoutComponent,
-    children: [
-      { path: 'login', component: LoginComponent },
-    ],
-  },
-  { path: '**', component: PageNotFoundComponent },
+{
+  path: '',
+  component: MainLayoutComponent,
+  children: [
+    { path: 'dashboard', component: DashboardComponent },
+    { path: 'admin', component: AdminComponent },
+    { path: 'users', component: UsersComponent },
+    { path: 'env-vars', component: EnvVarsComponent },
+    { path: 'user-groups', component: RolesComponent },
+    { path: 'groups', component: GroupsComponent },
+    { path: 'pxe-images', component: PXEimagesComponent },
+    { path: 'pxe', component: PxeComponent },
+    { path: 'pxe-boot-file', component: PxeBootFilesComponent },
+    { path: 'ogboot-status', component: OgbootStatusComponent },
+    { path: 'dhcp', component: OgdhcpComponent },
+    { path: 'subnets', component: OgDhcpSubnetsComponent },
+    { path: 'ogdhcp-status', component: StatusComponent },
+    { path: 'commands', component: CommandsComponent },
+    { path: 'commands-groups', component: CommandsGroupsComponent },
+    { path: 'commands-task', component: CommandsTaskComponent },
+    { path: 'commands-logs', component: TaskLogsComponent },
+    { path: 'calendars', component: CalendarComponent },
+    { path: 'clients/:id', component: ClientMainViewComponent },
+    { path: 'clients/:id/partition-assistant', component: PartitionAssistantComponent },
+    { path: 'clients/:id/create-image', component: CreateImageComponent },
+    { path: 'clients/:id/deploy-image', component: DeployImageComponent },
+    { path: 'images', component: ImagesComponent },
+    { path: 'repositories', component: RepositoriesComponent },
+    { path: 'repository/:id', component: MainRepositoryViewComponent },
+    { path: 'software', component: SoftwareComponent },
+    { path: 'software-profiles', component: SoftwareProfileComponent },
+    { path: 'operative-systems', component: OperativeSystemComponent },
+  ],
+},
+{
+  path: 'auth',
+  component: AuthLayoutComponent,
+  children: [
+    { path: 'login', component: LoginComponent },
+  ],
+},
+{ path: '**', component: PageNotFoundComponent },
 ];

@NgModule({
--- a/ogWebconsole/src/app/app.component.spec.ts
+++ b/ogWebconsole/src/app/app.component.spec.ts
@ -1,23 +1,19 @@
 import { TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core'; 
 import { AppComponent } from './app.component';

 describe('AppComponent', () => {
-  let translateService: TranslateService;
-
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
-        TranslateModule.forRoot()
+        TranslateModule.forRoot() 
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
-
-    translateService = TestBed.inject(TranslateService);
  });

  it('should create the app', () => {
@ -25,42 +21,4 @@ describe('AppComponent', () => {
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
-
-  it(`should have as title 'ogWebconsole'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('ogWebconsole');
-  });
-
-  it('should set the language from localStorage on creation', () => {
-    spyOn(localStorage, 'getItem').and.returnValue('en'); // Simula que el idioma guardado es "en"
-    spyOn(translateService, 'use');
-
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-
-    expect(localStorage.getItem).toHaveBeenCalledWith('language');
-    expect(translateService.use).toHaveBeenCalledWith('en');
-  });
-
-  it('should default to Spanish if no language is saved in localStorage', () => {
-    spyOn(localStorage, 'getItem').and.returnValue(null); // Simula que no hay idioma guardado
-    spyOn(translateService, 'use');
-
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-
-    expect(localStorage.getItem).toHaveBeenCalledWith('language');
-    expect(translateService.use).toHaveBeenCalledWith('es');
-  });
-
-  it('should set language to Spanish in sessionStorage on ngOnInit', () => {
-    spyOn(sessionStorage, 'setItem');
-
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-
-    app.ngOnInit();
-    expect(sessionStorage.setItem).toHaveBeenCalledWith('language', 'es');
-  });
 });
--- a/ogWebconsole/src/app/app.module.ts
+++ b/ogWebconsole/src/app/app.module.ts
@ -1,5 +1,4 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA, LOCALE_ID, APP_INITIALIZER } from '@angular/core';
-import { ConfigService } from './services/config.service';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@ -26,7 +25,6 @@ import { MatListModule } from '@angular/material/list';
 import { UsersComponent } from './components/admin/users/users/users.component';
 import { RolesComponent } from './components/admin/roles/roles/roles.component';
 import { MatTableModule } from '@angular/material/table';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatDialogModule } from '@angular/material/dialog';
 import { AddUserModalComponent } from './components/admin/users/users/add-user-modal/add-user-modal.component';
 import { MatSelectModule } from '@angular/material/select';
@ -34,14 +32,17 @@ import { AddRoleModalComponent } from './components/admin/roles/roles/add-role-m
 import { ChangePasswordModalComponent } from './components/admin/users/users/change-password-modal/change-password-modal.component';
 import { GroupsComponent } from './components/groups/groups.component';
 import { MatDividerModule } from '@angular/material/divider';
+import { CreateOrganizationalUnitComponent } from './components/groups/shared/organizational-units/create-organizational-unit/create-organizational-unit.component';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { CreateClientComponent } from './components/groups/shared/clients/create-client/create-client.component';
 import { DeleteModalComponent } from './shared/delete_modal/delete-modal/delete-modal.component';
+import { EditOrganizationalUnitComponent } from './components/groups/shared/organizational-units/edit-organizational-unit/edit-organizational-unit.component';
+import { EditClientComponent } from './components/groups/shared/clients/edit-client/edit-client.component';
 import { ClassroomViewComponent } from './components/groups/shared/classroom-view/classroom-view.component';
 import { MatProgressSpinner } from "@angular/material/progress-spinner";
-import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatMenu, MatMenuItem, MatMenuTrigger } from "@angular/material/menu";
-import { MatAutocomplete, MatAutocompleteTrigger } from "@angular/material/autocomplete";
+import {MatAutocomplete, MatAutocompleteTrigger} from "@angular/material/autocomplete";
 import { MatChip, MatChipListbox, MatChipOption, MatChipSet, MatChipsModule } from "@angular/material/chips";
 import { ClientViewComponent } from './components/groups/shared/client-view/client-view.component';
 import { MatTab, MatTabGroup } from "@angular/material/tabs";
@ -51,6 +52,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ToastrModule } from 'ngx-toastr';
 import { ShowOrganizationalUnitComponent } from './components/groups/shared/organizational-units/show-organizational-unit/show-organizational-unit.component';
 import { MatGridList, MatGridTile } from "@angular/material/grid-list";
+import { TreeViewComponent } from './components/groups/shared/tree-view/tree-view.component';
 import {
  MatNestedTreeNode,
  MatTree,
@ -63,6 +65,7 @@ import { LegendComponent } from './components/groups/shared/legend/legend.compon
 import { ClassroomViewDialogComponent } from './components/groups/shared/classroom-view/classroom-view-modal';
 import { MatPaginator } from "@angular/material/paginator";
 import { SaveFiltersDialogComponent } from './components/groups/shared/save-filters-dialog/save-filters-dialog.component';
+import { AcctionsModalComponent } from './components/groups/shared/acctions-modal/acctions-modal.component';
 import { PXEimagesComponent } from './components/ogboot/pxe-images/pxe-images.component';
 import { CreatePXEImageComponent } from './components/ogboot/pxe-images/create-image/create-image/create-image.component';
 import { InfoImageComponent } from './components/ogboot/pxe-images/info-image/info-image/info-image.component';
@ -71,7 +74,12 @@ import { CreatePxeTemplateComponent } from './components/ogboot/pxe/create-pxeTe
 import { PxeBootFilesComponent } from './components/ogboot/pxe-boot-files/pxe-boot-files.component';
 import { MatExpansionPanel, MatExpansionPanelDescription, MatExpansionPanelTitle } from "@angular/material/expansion";
 import { OgbootStatusComponent } from './components/ogboot/ogboot-status/ogboot-status.component';
+import { CreatePxeBootFileComponent } from './components/ogboot/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
+import { OgdhcpComponent } from './components/ogdhcp/ogdhcp.component';
+import { OgDhcpSubnetsComponent } from './components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component';
+import { CreateSubnetComponent } from './components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet.component';
+import { AddClientsToSubnetComponent } from './components/ogdhcp/og-dhcp-subnets/add-clients-to-subnet/add-clients-to-subnet.component';
 import { CommandsComponent } from './components/commands/main-commands/commands.component';
 import { CommandDetailComponent } from './components/commands/main-commands/detail-command/command-detail.component';
 import { CreateCommandComponent } from './components/commands/main-commands/create-command/create-command.component';
@ -79,7 +87,7 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
 import { CalendarComponent } from './components/calendar/calendar.component';
 import { CreateCalendarComponent } from './components/calendar/create-calendar/create-calendar.component';
-import { MatRadioButton, MatRadioGroup } from "@angular/material/radio";
+import {MatRadioButton, MatRadioGroup} from "@angular/material/radio";
 import { CreateCalendarRuleComponent } from './components/calendar/create-calendar-rule/create-calendar-rule.component';
 import { CommandsGroupsComponent } from './components/commands/commands-groups/commands-groups.component';
 import { CommandsTaskComponent } from './components/commands/commands-task/commands-task.component';
@ -87,12 +95,16 @@ import { CreateCommandGroupComponent } from './components/commands/commands-grou
 import { DetailCommandGroupComponent } from './components/commands/commands-groups/detail-command-group/detail-command-group.component';
 import { CreateTaskComponent } from './components/commands/commands-task/create-task/create-task.component';
 import { DetailTaskComponent } from './components/commands/commands-task/detail-task/detail-task.component';
+import { ClientTabViewComponent } from './components/groups/components/client-tab-view/client-tab-view.component';
+import { AdvancedSearchComponent } from './components/groups/components/advanced-search/advanced-search.component';
 import { TaskLogsComponent } from './components/commands/commands-task/task-logs/task-logs.component';
-import { MatSliderModule } from '@angular/material/slider';
+import { OrganizationalUnitTabViewComponent } from './components/groups/components/organizational-unit-tab-view/organizational-unit-tab-view.component';
+import { ServerInfoDialogComponent } from './components/ogdhcp/og-dhcp-subnets/server-info-dialog/server-info-dialog.component';
+import { StatusComponent } from './components/ogdhcp/og-dhcp-subnets/status/status.component';
+import {MatSliderModule} from '@angular/material/slider';
 import { ClientMainViewComponent } from './components/groups/components/client-main-view/client-main-view.component';
 import { ImagesComponent } from './components/images/images.component';
 import { CreateImageComponent } from './components/images/create-image/create-image.component';
-import { CreateClientImageComponent } from './components/groups/components/client-main-view/create-image/create-image.component';
 import { PartitionAssistantComponent } from './components/groups/components/client-main-view/partition-assistant/partition-assistant.component';
 import { SoftwareComponent } from './components/software/software.component';
 import { CreateSoftwareComponent } from './components/software/create-software/create-software.component';
@ -101,8 +113,10 @@ import { CreateSoftwareProfileComponent } from './components/software-profile/cr
 import { OperativeSystemComponent } from './components/operative-system/operative-system.component';
 import { CreateOperativeSystemComponent } from './components/operative-system/create-operative-system/create-operative-system.component';
 import { ShowTemplateContentComponent } from './components/ogboot/pxe/show-template-content/show-template-content.component';
+import { AddClientsToPxeComponent } from './components/ogboot/pxe/add-clients-to-pxe/add-clients-to-pxe.component';
+import { ClientsComponent } from './components/ogboot/pxe/clients/clients.component';
 import { RepositoriesComponent } from './components/repositories/repositories.component';
-import { ManageRepositoryComponent } from './components/repositories/manage-repository/manage-repository.component';
+import { CreateRepositoryComponent } from './components/repositories/create-repository/create-repository.component';
 import { ExecuteCommandComponent } from './components/commands/main-commands/execute-command/execute-command.component';
 import { DeployImageComponent } from './components/groups/components/client-main-view/deploy-image/deploy-image.component';
 import { MainRepositoryViewComponent } from './components/repositories/main-repository-view/main-repository-view.component';
@ -111,49 +125,11 @@ import { JoyrideModule } from 'ngx-joyride';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { EnvVarsComponent } from './components/admin/env-vars/env-vars.component';
-import { MatSortModule } from '@angular/material/sort';
-import { MenusComponent } from './components/menus/menus.component';
-import { CreateMenuComponent } from './components/menus/create-menu/create-menu.component';
-import { CreateMultipleClientComponent } from './components/groups/shared/clients/create-multiple-client/create-multiple-client.component';
-import { ExportImageComponent } from './components/images/export-image/export-image.component';
-import { ImportImageComponent } from "./components/repositories/import-image/import-image.component";
-import { LoadingComponent } from './shared/loading/loading.component';
-import { InputDialogComponent } from './components/commands/commands-task/task-logs/input-dialog/input-dialog.component';
-import { ManageOrganizationalUnitComponent } from './components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component';
-import { BackupImageComponent } from './components/repositories/backup-image/backup-image.component';
-import { ServerInfoDialogComponent } from "./components/ogdhcp/server-info-dialog/server-info-dialog.component";
-import { StatusComponent } from "./components/ogdhcp/status/status.component";
-import { OgDhcpSubnetsComponent } from "./components/ogdhcp/og-dhcp-subnets.component";
-import { CreateSubnetComponent } from "./components/ogdhcp/create-subnet/create-subnet.component";
-import { AddClientsToSubnetComponent } from "./components/ogdhcp/add-clients-to-subnet/add-clients-to-subnet.component";
-import { ShowClientsComponent } from './components/ogdhcp/show-clients/show-clients.component';
-import { OperationResultDialogComponent } from './components/ogdhcp/operation-result-dialog/operation-result-dialog.component';
-import { ManageClientComponent } from './components/groups/shared/clients/manage-client/manage-client.component';
-import { ConvertImageComponent } from './components/repositories/convert-image/convert-image.component';
-import { registerLocaleData } from '@angular/common';
-import localeEs from '@angular/common/locales/es';
-import { GlobalStatusComponent } from './components/global-status/global-status.component';
-import { ShowMonoliticImagesComponent } from './components/repositories/show-monolitic-images/show-monolitic-images.component';
-import { StatusTabComponent } from './components/global-status/status-tab/status-tab.component';
-import { ConvertImageToVirtualComponent } from './components/repositories/convert-image-to-virtual/convert-image-to-virtual.component';
-import { RunScriptAssistantComponent } from './components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component';
-import {
-  SaveScriptComponent
-} from "./components/groups/components/client-main-view/run-script-assistant/save-script/save-script.component";
-import { EditImageComponent } from './components/repositories/edit-image/edit-image.component';
-import { ShowGitImagesComponent } from './components/repositories/show-git-images/show-git-images.component';
-import { RenameImageComponent } from './components/repositories/rename-image/rename-image.component';

 export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './locale/', '.json');
 }

-export function initializeApp(configService: ConfigService) {
-  return () => configService.loadConfig();
-}
-
-registerLocaleData(localeEs, 'es-ES');
-
@NgModule({
  declarations: [
    AppComponent,
@ -170,14 +146,19 @@ registerLocaleData(localeEs, 'es-ES');
    AddRoleModalComponent,
    ChangePasswordModalComponent,
    GroupsComponent,
-    ManageClientComponent,
+    CreateOrganizationalUnitComponent,
+    CreateClientComponent,
    DeleteModalComponent,
+    EditOrganizationalUnitComponent,
+    EditClientComponent,
    ClassroomViewComponent,
    ClientViewComponent,
    ShowOrganizationalUnitComponent,
+    TreeViewComponent,
    LegendComponent,
    ClassroomViewDialogComponent,
    SaveFiltersDialogComponent,
+    AcctionsModalComponent,
    PXEimagesComponent,
    CreatePXEImageComponent,
    InfoImageComponent,
@ -185,6 +166,8 @@ registerLocaleData(localeEs, 'es-ES');
    CreatePxeTemplateComponent,
    PxeBootFilesComponent,
    OgbootStatusComponent,
+    CreatePxeBootFileComponent,
+    OgdhcpComponent,
    OgDhcpSubnetsComponent,
    CreateSubnetComponent,
    AddClientsToSubnetComponent,
@ -193,7 +176,6 @@ registerLocaleData(localeEs, 'es-ES');
    CreateCommandComponent,
    CalendarComponent,
    CreateCalendarComponent,
-    CreateClientImageComponent,
    CreateCalendarRuleComponent,
    CommandsGroupsComponent,
    CommandsTaskComponent,
@ -201,7 +183,10 @@ registerLocaleData(localeEs, 'es-ES');
    DetailCommandGroupComponent,
    CreateTaskComponent,
    DetailTaskComponent,
+    ClientTabViewComponent,
+    AdvancedSearchComponent,
    TaskLogsComponent,
+    OrganizationalUnitTabViewComponent,
    ServerInfoDialogComponent,
    StatusComponent,
    ClientMainViewComponent,
@ -215,85 +200,63 @@ registerLocaleData(localeEs, 'es-ES');
    OperativeSystemComponent,
    CreateOperativeSystemComponent,
    ShowTemplateContentComponent,
+    AddClientsToPxeComponent,
+    ClientsComponent,
    RepositoriesComponent,
-    ManageRepositoryComponent,
+    CreateRepositoryComponent,
    ExecuteCommandComponent,
    ExecuteCommandOuComponent,
    DeployImageComponent,
    MainRepositoryViewComponent,
    ExecuteCommandOuComponent,
    EnvVarsComponent,
-    MenusComponent,
-    CreateMenuComponent,
-    CreateMultipleClientComponent,
-    ExportImageComponent,
-    ImportImageComponent,
-    LoadingComponent,
-    InputDialogComponent,
-    ManageOrganizationalUnitComponent,
-    BackupImageComponent,
-    ShowClientsComponent,
-    OperationResultDialogComponent,
-    ConvertImageComponent,
-    GlobalStatusComponent,
-    ShowMonoliticImagesComponent,
-    StatusTabComponent,
-    ConvertImageToVirtualComponent,
-    RunScriptAssistantComponent,
-    SaveScriptComponent,
-    EditImageComponent,
-    ShowGitImagesComponent,
-    RenameImageComponent
  ],
  bootstrap: [AppComponent],
-  imports: [BrowserModule,
-    AppRoutingModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MatToolbarModule,
-    MatIconModule,
-    MatButtonToggleModule,
-    MatButtonModule,
-    MatSidenavModule,
-    NoopAnimationsModule,
-    MatCardModule,
-    MatCheckboxModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatListModule,
-    MatTableModule,
-    MatDialogModule,
-    MatSelectModule,
-    MatDividerModule,
-    MatProgressBarModule,
-    MatStepperModule,
-    DragDropModule,
-    MatSlideToggleModule, MatMenu, MatMenuTrigger, MatMenuItem, MatAutocomplete, MatChipListbox, MatChipOption, MatChipSet, MatChipsModule, MatChip, MatProgressSpinner, MatTabGroup, MatTab, MatTooltip,
-    MatExpansionModule,
-    NgxChartsModule,
-    MatDatepickerModule,
-    MatNativeDateModule,
-    MatSliderModule,
-    MatSortModule,
-    TranslateModule.forRoot({
-      loader: {
-        provide: TranslateLoader,
-        useFactory: HttpLoaderFactory,
-        deps: [HttpClient]
-      }
-    }),
-    JoyrideModule.forRoot(),
-    ToastrModule.forRoot(
-      {
-        timeOut: 5000,
-        positionClass: 'toast-bottom-right',
-        preventDuplicates: true,
-        progressBar: true,
-        progressAnimation: 'increasing',
-        closeButton: true
-      }
-    ), MatGridList, MatTree, MatTreeNode, MatNestedTreeNode, MatTreeNodeToggle, MatTreeNodeDef, MatTreeNodePadding, MatTreeNodeOutlet, MatPaginator, MatGridTile, MatExpansionPanel, MatExpansionPanelTitle, MatExpansionPanelDescription, MatRadioGroup, MatRadioButton, MatAutocompleteTrigger
-  ],
+    imports: [BrowserModule,
+        AppRoutingModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatToolbarModule,
+        MatIconModule,
+        MatButtonModule,
+        MatSidenavModule,
+        NoopAnimationsModule,
+        MatCardModule,
+        MatCheckboxModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatListModule,
+        MatTableModule,
+        MatDialogModule,
+        MatSelectModule,
+        MatDividerModule,
+        MatStepperModule,
+        DragDropModule,
+        MatSlideToggleModule, MatMenu, MatMenuTrigger, MatMenuItem, MatAutocomplete, MatChipListbox, MatChipOption, MatChipSet, MatChipsModule, MatChip, MatProgressSpinner, MatTabGroup, MatTab, MatTooltip,
+        MatExpansionModule,
+        NgxChartsModule,
+        MatDatepickerModule,
+        MatNativeDateModule,
+        MatSliderModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useFactory: HttpLoaderFactory,
+            deps: [HttpClient]
+          }
+        }),
+        JoyrideModule.forRoot(),
+        ToastrModule.forRoot(
+            {
+                timeOut: 5000,
+                positionClass: 'toast-bottom-right',
+                preventDuplicates: true,
+                progressBar: true,
+                progressAnimation: 'increasing',
+                closeButton: true
+            }
+        ), MatGridList, MatTree, MatTreeNode, MatNestedTreeNode, MatTreeNodeToggle, MatTreeNodeDef, MatTreeNodePadding, MatTreeNodeOutlet, MatPaginator, MatGridTile, MatExpansionPanel, MatExpansionPanelTitle, MatExpansionPanelDescription, MatRadioGroup, MatRadioButton, MatAutocompleteTrigger
+    ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
  ],
@ -303,16 +266,8 @@ registerLocaleData(localeEs, 'es-ES');
      useClass: CustomInterceptor,
      multi: true
    },
-    { provide: LOCALE_ID, useValue: 'es-ES' },
    provideAnimationsAsync(),
-    provideHttpClient(withInterceptorsFromDi()),
-    ConfigService,
-    {
-      provide: APP_INITIALIZER,
-      useFactory: initializeApp,
-      deps: [ConfigService],
-      multi: true
-    }
+    provideHttpClient(withInterceptorsFromDi())
  ],
 })
 export class AppModule { }
--- a/ogWebconsole/src/app/components/admin/admin.component.css
+++ b/ogWebconsole/src/app/components/admin/admin.component.css
@ -14,6 +14,16 @@
  margin: 0 10px;
 }

+/* Estilos de los botones */
+button {
+  height: 150px;
+  width: 150px;
+  margin: 5px;
+  padding: 5px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
 /* Estilos del texto debajo de los botones */
 span{
  margin: 0;
--- a/ogWebconsole/src/app/components/admin/admin.component.html
+++ b/ogWebconsole/src/app/components/admin/admin.component.html
@ -1,9 +1,9 @@
 <div class="container">
-  <button class="action-button" routerLink="/users">
+  <button mat-fab color="primary" class="fab-button" routerLink="/users">
    <mat-icon>group</mat-icon>
    <span>{{ 'labelUsers' | translate }}</span>
  </button>
-  <button class="action-button" routerLink="/user-groups">
+  <button mat-fab color="primary" class="fab-button" routerLink="/user-groups">
    <mat-icon>admin_panel_settings</mat-icon>
    <span>{{ 'labelRoles' | translate }}</span>
  </button>
--- a/ogWebconsole/src/app/components/admin/admin.component.spec.ts
+++ b/ogWebconsole/src/app/components/admin/admin.component.spec.ts
@ -3,13 +3,11 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { AdminComponent } from './admin.component';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { TranslateModule } from '@ngx-translate/core';
-import { Router } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core'; 

 describe('AdminComponent', () => {
  let component: AdminComponent;
  let fixture: ComponentFixture<AdminComponent>;
-  let router: Router;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
@ -18,11 +16,9 @@ describe('AdminComponent', () => {
        RouterTestingModule,
        MatButtonModule,
        MatIconModule,
-        TranslateModule.forRoot()
+        TranslateModule.forRoot() 
      ]
    }).compileComponents();
-
-    router = TestBed.inject(Router);
  });

  beforeEach(() => {
@ -34,15 +30,4 @@ describe('AdminComponent', () => {
  it('debería crear el componente', () => {
    expect(component).toBeTruthy();
  });
-
-  it('debería renderizar dos botones', () => {
-    const buttons = fixture.nativeElement.querySelectorAll('button');
-    expect(buttons.length).toBe(2);
-  });
-
-  it('debería tener un botón con routerLink a "/users"', () => {
-    const button = fixture.nativeElement.querySelector('button[routerLink="/users"]');
-    expect(button).toBeTruthy();
-    expect(button.querySelector('mat-icon').textContent.trim()).toBe('group');
-  });
 });
--- a/ogWebconsole/src/app/components/admin/env-vars/env-vars.component.css
+++ b/ogWebconsole/src/app/components/admin/env-vars/env-vars.component.css
@ -1,5 +1,9 @@
 .env-settings {
-  padding: 0rem 1rem 0rem 1rem;
+  padding: 16px;
+
+  h1 {
+    margin-bottom: 16px;
+  }

  .mat-table {
    margin-bottom: 16px;
@ -15,6 +19,10 @@
    gap: 16px;
    justify-content: flex-end;
    margin-top: 16px;
+
+    button {
+      min-width: 120px;
+    }
  }
 }

--- a/ogWebconsole/src/app/components/admin/env-vars/env-vars.component.html
+++ b/ogWebconsole/src/app/components/admin/env-vars/env-vars.component.html
@ -1,9 +1,5 @@
 <div class="env-settings">
-  <div class="header-container">
-    <div class="header-container-title">
-      <h2>Editar Variables de Entorno</h2>
-    </div>
-  </div>
+  <h1>Editar Variables de Entorno</h1>

  <mat-table [dataSource]="envVars" class="mat-elevation-z8">
    <!-- Nombre de la variable -->
@ -26,8 +22,8 @@
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

-  <div class="actions">
-    <button class="action-button" (click)="loadEnvVars()">Recargar</button>
-    <button class="submit-button" (click)="saveEnvVars()">Guardar Cambios</button>
+  <div class="actions" >
+    <button mat-raised-button color="primary" (click)="saveEnvVars()">Guardar Cambios</button>
+    <button mat-raised-button color="accent" (click)="loadEnvVars()">Recargar</button>
  </div>
-</div>
+</div>
--- a/ogWebconsole/src/app/components/admin/env-vars/env-vars.component.spec.ts
+++ b/ogWebconsole/src/app/components/admin/env-vars/env-vars.component.spec.ts
@ -13,29 +13,24 @@ import { TranslateModule } from '@ngx-translate/core';
 import { ToastrModule, ToastrService } from 'ngx-toastr';
 import { DataService } from '../users/users/data.service';
 import { MatTableModule } from '@angular/material/table';
-import { ConfigService } from '@services/config.service';

 describe('EnvVarsComponent', () => {
  let component: EnvVarsComponent;
  let fixture: ComponentFixture<EnvVarsComponent>;

  beforeEach(async () => {
-    const mockConfigService = {
-      apiUrl: 'http://mock-api-url'
-    };
-
    await TestBed.configureTestingModule({
-      declarations: [EnvVarsComponent],
+      declarations: [EnvVarsComponent], 
      imports: [
        ReactiveFormsModule,
-        FormsModule,
+        FormsModule, 
        MatDialogModule,
        MatFormFieldModule,
        MatInputModule,
        MatCheckboxModule,
        MatButtonModule,
        BrowserAnimationsModule,
-        MatTableModule,
+        MatTableModule,     
        ToastrModule.forRoot(),
        TranslateModule.forRoot()
      ],
@ -52,10 +47,6 @@ describe('EnvVarsComponent', () => {
        {
          provide: MAT_DIALOG_DATA,
          useValue: {}
-        },
-        {
-          provide: ConfigService,
-          useValue: mockConfigService
        }
      ]
    }).compileComponents();
--- a/ogWebconsole/src/app/components/admin/env-vars/env-vars.component.ts
+++ b/ogWebconsole/src/app/components/admin/env-vars/env-vars.component.ts
@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
-import { HttpClient } from "@angular/common/http";
-import { ToastrService } from "ngx-toastr";
-import { ConfigService } from '@services/config.service';
+import {HttpClient} from "@angular/common/http";
+import {ToastrService} from "ngx-toastr";

@Component({
  selector: 'app-env-vars',
@ -9,17 +8,16 @@ import { ConfigService } from '@services/config.service';
  styleUrl: './env-vars.component.css'
 })
 export class EnvVarsComponent {
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  envVars: { name: string; value: string }[] = [];
  displayedColumns: string[] = ['name', 'value'];
-  private apiUrl: string;
+
+  private apiUrl = `${this.baseUrl}/env-vars`;

  constructor(
    private http: HttpClient,
    private toastService: ToastrService,
-    private configService: ConfigService
-  ) {
-    this.apiUrl = `${this.configService.apiUrl}/env-vars`;
-  }
+  ) {}

  ngOnInit(): void {
    this.loadEnvVars();
--- a/ogWebconsole/src/app/components/admin/roles/roles/add-role-modal/add-role-modal.component.css
+++ b/ogWebconsole/src/app/components/admin/roles/roles/add-role-modal/add-role-modal.component.css
@ -1,9 +1,7 @@
 .full-width {
  width: 100%;
 }
-
 .form-container {
-  margin-top: 2em;
  padding: 40px;
 }

@ -17,24 +15,16 @@
  margin-bottom: 16px;
 }

-.checkbox-group {
+.checkbox-group  {
  margin: 15px 0;
  align-items: flex-start;
 }

 .time-fields {
  display: flex;
-  gap: 15px;
-  /* Espacio entre los campos */
+  gap: 15px; /* Espacio entre los campos */
 }

 .time-field {
  flex: 1;
 }
-
-.action-container {
-  display: flex;
-  justify-content: flex-end;
-  gap: 1em;
-  padding: 1.5em;
-}
--- a/ogWebconsole/src/app/components/admin/roles/roles/add-role-modal/add-role-modal.component.html
+++ b/ogWebconsole/src/app/components/admin/roles/roles/add-role-modal/add-role-modal.component.html
@ -16,7 +16,7 @@
    </section>
  </form>
 </mat-dialog-content>
-<mat-dialog-actions class="action-container">
-  <button class="ordinary-button" (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
-  <button class="submit-button" (click)="onSubmit()">{{ 'buttonAdd' | translate }}</button>
+<mat-dialog-actions align="end">
+  <button mat-button (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
+  <button mat-button (click)="onSubmit()">{{ 'buttonAdd' | translate }}</button>
 </mat-dialog-actions>
--- a/ogWebconsole/src/app/components/admin/roles/roles/add-role-modal/add-role-modal.component.ts
+++ b/ogWebconsole/src/app/components/admin/roles/roles/add-role-modal/add-role-modal.component.ts
@ -4,7 +4,6 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {DataService} from "../data.service";
 import {ToastrService} from "ngx-toastr";
-import { ConfigService } from '@services/config.service';

@Component({
  selector: 'app-add-role-modal',
@ -12,9 +11,9 @@ import { ConfigService } from '@services/config.service';
  styleUrls: ['./add-role-modal.component.css']
 })
 export class AddRoleModalComponent {
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  roleForm: FormGroup<any>;
  roleId: string | null = null;
-  baseUrl: string;

  constructor(
    public dialogRef: MatDialogRef<AddRoleModalComponent>,
@ -22,10 +21,8 @@ export class AddRoleModalComponent {
    private http: HttpClient,
    private fb: FormBuilder,
    private dataService: DataService,
-    private toastService: ToastrService,
-    private configService: ConfigService
+    private toastService: ToastrService
  ) {
-    this.baseUrl = this.configService.apiUrl;
    this.roleForm = this.fb.group({
      name: ['', Validators.required],
      superAdmin: [false],
--- a/ogWebconsole/src/app/components/admin/roles/roles/data.service.ts
+++ b/ogWebconsole/src/app/components/admin/roles/roles/data.service.ts
@ -2,19 +2,15 @@ import { Injectable } from '@angular/core';
 import {HttpClient, HttpParams} from '@angular/common/http';
 import { Observable, throwError } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
-import { ConfigService } from '@services/config.service';

@Injectable({
  providedIn: 'root'
 })
 export class DataService {
-  baseUrl: string;
-  private apiUrl: string;
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
+  private apiUrl = `${this.baseUrl}/user-groups?page=1&itemsPerPage=1000`;

-  constructor(private http: HttpClient, private configService: ConfigService) {
-    this.baseUrl = this.configService.apiUrl;
-    this.apiUrl = `${this.baseUrl}/user-groups?page=1&itemsPerPage=1000`;
-  }
+  constructor(private http: HttpClient) {}

  getUserGroups(filters: { [key: string]: string }): Observable<{ totalItems: any; data: any }> {
    const params = new HttpParams({ fromObject: filters });
--- a/ogWebconsole/src/app/components/admin/roles/roles/roles.component.css
+++ b/ogWebconsole/src/app/components/admin/roles/roles/roles.component.css
@ -1,30 +1,21 @@
-.header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 10px;
-  border-bottom: 1px solid #ddd;
-}
-
-.header-container-title {
-  flex-grow: 1;
-  text-align: left;
-  margin-left: 1em;
-}
-
 table {
  width: 100%;
+  margin-top: 50px;
 }

-.search-container {
+.search-container  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
-  margin: 1.5rem 0rem 1.5rem 0rem;
+  padding: 0 5px;
  box-sizing: border-box;
 }

+.divider {
+  margin: 20px 0;
+}
+
 .search-string {
  flex: 2;
  padding: 5px;
@ -35,12 +26,20 @@ table {
  padding: 5px;
 }

+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+}
+
 .mat-elevation-z8 {
-  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
 }

 .paginator-container {
  display: flex;
  justify-content: end;
  margin-bottom: 30px;
-}
+}
+
--- a/ogWebconsole/src/app/components/admin/roles/roles/roles.component.html
+++ b/ogWebconsole/src/app/components/admin/roles/roles/roles.component.html
@ -1,25 +1,24 @@
 <div class="header-container">
-  <div class="header-container-title">
-    <h2>{{ 'adminRolesTitle' | translate }}</h2>
-  </div>
+  <h2 class="title">{{ 'adminRolesTitle' | translate }}</h2>
  <div class="images-button-row">
-    <button class="action-button" (click)="addUser()">
+    <button mat-flat-button color="primary" (click)="addUser()">
      {{ 'addRole' | translate }}
    </button>
  </div>
 </div>
-
+<mat-divider class="divider"></mat-divider>
 <div class="search-container">
  <mat-form-field appearance="fill" class="search-string">
    <mat-label>{{ 'searchRoleLabel' | translate }}</mat-label>
-    <input matInput placeholder="{{ 'searchPlaceholder' | translate }}" [(ngModel)]="filters['name']"
-      (keyup.enter)="search()">
+    <input matInput placeholder="{{ 'searchPlaceholder' | translate }}" [(ngModel)]="filters['name']" (keyup.enter)="search()">
    <mat-icon matSuffix>search</mat-icon>
    <mat-hint>{{ 'searchHint' | translate }}</mat-hint>
  </mat-form-field>
 </div>

-<app-loading [isLoading]="loading"></app-loading>
+<div *ngIf="loading" class="loading-container">
+  <mat-spinner></mat-spinner>
+</div>

 <div *ngIf="!loading">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
@ -34,8 +33,7 @@
        <button mat-icon-button color="primary" (click)="editRole(role)">
          <mat-icon>edit</mat-icon>
        </button>
-        <button mat-icon-button color="warn" (click)="deleteRole(role)"
-          [disabled]="role.permissions.includes('ROLE_SUPER_ADMIN')">
+        <button mat-icon-button color="warn" (click)="deleteRole(role)" [disabled]="role.permissions.includes('ROLE_SUPER_ADMIN')">
          <mat-icon>delete</mat-icon>
        </button>
      </td>
@ -46,7 +44,10 @@
 </div>

 <div class="paginator-container">
-  <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
-    (page)="onPageChange($event)">
+  <mat-paginator [length]="length"
+                 [pageSize]="itemsPerPage"
+                 [pageIndex]="page"
+                 [pageSizeOptions]="pageSizeOptions"
+                 (page)="onPageChange($event)">
  </mat-paginator>
-</div>
+</div>
--- a/ogWebconsole/src/app/components/admin/roles/roles/roles.component.spec.ts
+++ b/ogWebconsole/src/app/components/admin/roles/roles/roles.component.spec.ts
@ -4,7 +4,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { HttpClient } from '@angular/common/http';
 import { ToastrService } from 'ngx-toastr';
 import { DataService } from './data.service';
-import { ConfigService } from '@services/config.service';
+import { of } from 'rxjs';
 import { MatDivider } from '@angular/material/divider';
 import { MatFormField } from '@angular/material/form-field';
 import { MatLabel } from '@angular/material/form-field';
@ -12,7 +12,6 @@ import { MatIcon } from '@angular/material/icon';
 import { MatHint } from '@angular/material/form-field';
 import { MatPaginator } from '@angular/material/paginator';
 import { TranslateModule } from '@ngx-translate/core';
-import { LoadingComponent } from '../../../../shared/loading/loading.component';
 describe('RolesComponent', () => {
  let component: RolesComponent;
  let fixture: ComponentFixture<RolesComponent>;
@ -20,25 +19,22 @@ describe('RolesComponent', () => {
  let mockHttpClient: jasmine.SpyObj<HttpClient>;
  let mockToastrService: jasmine.SpyObj<ToastrService>;
  let mockDataService: jasmine.SpyObj<DataService>;
-  let mockConfigService: jasmine.SpyObj<ConfigService>;

  beforeEach(async () => {
    const matDialogSpy = jasmine.createSpyObj('MatDialog', ['open']);
    const httpClientSpy = jasmine.createSpyObj('HttpClient', ['get', 'post', 'put', 'delete']);
    const toastrServiceSpy = jasmine.createSpyObj('ToastrService', ['success', 'error']);
    const dataServiceSpy = jasmine.createSpyObj('DataService', ['getRoles']);
-    const configServiceSpy = jasmine.createSpyObj('ConfigService', [], { apiUrl: 'http://mock-api-url' });

    await TestBed.configureTestingModule({
-      declarations: [RolesComponent, LoadingComponent],
+      declarations: [RolesComponent],
      imports: [MatDivider, MatFormField, MatLabel, MatIcon, MatHint, MatPaginator,
        TranslateModule.forRoot()],
      providers: [
        { provide: MatDialog, useValue: matDialogSpy },
        { provide: HttpClient, useValue: httpClientSpy },
        { provide: ToastrService, useValue: toastrServiceSpy },
-        { provide: DataService, useValue: dataServiceSpy },
-        { provide: ConfigService, useValue: configServiceSpy }
+        { provide: DataService, useValue: dataServiceSpy }
      ]
    }).compileComponents();
  });
@ -50,24 +46,9 @@ describe('RolesComponent', () => {
    mockHttpClient = TestBed.inject(HttpClient) as jasmine.SpyObj<HttpClient>;
    mockToastrService = TestBed.inject(ToastrService) as jasmine.SpyObj<ToastrService>;
    mockDataService = TestBed.inject(DataService) as jasmine.SpyObj<DataService>;
-    mockConfigService = TestBed.inject(ConfigService) as jasmine.SpyObj<ConfigService>;
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
-  
-  it('should have a default itemsPerPage value', () => {
-    expect(component.itemsPerPage).toBeDefined();
-  });
-
-  it('should initialize the dataSource', () => {
-    expect(component.dataSource).toBeDefined();
-  });
-
-  it('should have a defined columns array', () => {
-    expect(component.columns).toBeDefined();
-    expect(component.columns.length).toBeGreaterThan(0);
-  });
-  
 });
--- a/ogWebconsole/src/app/components/admin/roles/roles/roles.component.ts
+++ b/ogWebconsole/src/app/components/admin/roles/roles/roles.component.ts
@ -7,7 +7,6 @@ import { DataService } from "./data.service";
 import { PageEvent } from "@angular/material/paginator";
 import { DeleteModalComponent } from '../../../../shared/delete_modal/delete-modal/delete-modal.component';
 import { AddRoleModalComponent } from './add-role-modal/add-role-modal.component';
-import { ConfigService } from '@services/config.service';

@Component({
  selector: 'app-roles',
@ -15,7 +14,7 @@ import { ConfigService } from '@services/config.service';
  styleUrls: ['./roles.component.css']
 })
 export class RolesComponent implements OnInit {
-  baseUrl: string = this.configService.apiUrl;
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  dataSource = new MatTableDataSource<any>();
  filters: { [key: string]: string } = {};
  loading: boolean = false;
@ -49,8 +48,7 @@ export class RolesComponent implements OnInit {
    public dialog: MatDialog,
    private http: HttpClient,
    private dataService: DataService,
-    private toastService: ToastrService,
-    private configService: ConfigService
+    private toastService: ToastrService
  ) {}

  ngOnInit() {
--- a/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.css
+++ b/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.css
@ -1,12 +1,30 @@
-.user-form {
-  display: flex;
-  flex-direction: column;
-  margin-top: 2rem;
+.full-width {
+  width: 100%;
+}
+.form-container {
+  padding: 40px;
 }

-.action-container {
+.form-group {
+  margin-top: 20px;
+  margin-bottom: 26px;
+}
+
+.full-width {
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.checkbox-group  {
+  margin: 15px 0;
+  align-items: flex-start;
+}
+
+.time-fields {
  display: flex;
-  justify-content: flex-end;
-  gap: 1em;
-  padding: 1.5em;
-}
+  gap: 15px; /* Espacio entre los campos */
+}
+
+.time-field {
+  flex: 1;
+}
--- a/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html
+++ b/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html
@ -1,6 +1,4 @@
-<app-loading [isLoading]="loading"></app-loading>
-
-<h1 mat-dialog-title>{{ isEditMode ? ('dialogTitleEditUser' | translate) : ('dialogTitleAddUser' | translate) }}</h1>
+<h1 mat-dialog-title>{{ 'dialogTitleAddUser' | translate }}</h1>
 <mat-dialog-content class="form-container">
  <form [formGroup]="userForm" class="user-form">
    <mat-form-field appearance="fill" class="full-width">
@ -29,18 +27,9 @@
        </mat-option>
      </mat-select>
    </mat-form-field>
-
-    <mat-form-field appearance="fill" class="full-width">
-      <mat-label>Vista tarjetas</mat-label>
-      <mat-select formControlName="groupsView" required>
-        <mat-option *ngFor="let option of views" [value]="option.value">
-          {{ option.name }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
  </form>
 </mat-dialog-content>
-<mat-dialog-actions class="action-container">
-  <button class="ordinary-button" (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
-  <button class="submit-button" (click)="onSubmit()" [disabled]="userForm.invalid">{{ isEditMode ? ('buttonEdit' | translate) : ('buttonAdd' | translate) }}</button>
-</mat-dialog-actions>
+<mat-dialog-actions align="end">
+  <button mat-button (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
+  <button mat-button (click)="onSubmit()">{{ 'buttonAdd' | translate }}</button>
+</mat-dialog-actions>
--- a/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.ts
+++ b/ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.ts
@ -1,10 +1,9 @@
 import { Component, EventEmitter, Inject, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { ToastrService } from "ngx-toastr";
-import { HttpClient } from "@angular/common/http";
-import { DataService } from "../data.service";
-import { ConfigService } from '@services/config.service';
+import {ToastrService} from "ngx-toastr";
+import {HttpClient} from "@angular/common/http";
+import {DataService} from "../data.service";

 interface UserGroup {
  '@id': string;
@ -18,20 +17,12 @@ interface UserGroup {
  styleUrls: ['./add-user-modal.component.css']
 })
 export class AddUserModalComponent implements OnInit {
-  baseUrl: string;
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  @Output() userAdded = new EventEmitter<void>();
-  @Output() userEdited = new EventEmitter<void>();
  userForm: FormGroup<any>;
  userGroups: UserGroup[] = [];
  organizationalUnits: any[] = [];
  userId: string | null = null;
-  loading: boolean = false;
-  isEditMode: boolean = false;
-
-  protected views = [
-    { value: 'card', name: 'Tarjetas' },
-    { value: 'list', name: 'Listado' },
-  ];

  constructor(
    public dialogRef: MatDialogRef<AddUserModalComponent>,
@ -39,60 +30,46 @@ export class AddUserModalComponent implements OnInit {
    private http: HttpClient,
    private fb: FormBuilder,
    private dataService: DataService,
-    private toastService: ToastrService,
-    private configService: ConfigService
+    private toastService: ToastrService
  ) {
-    this.baseUrl = this.configService.apiUrl;
    this.userForm = this.fb.group({
      username: ['', Validators.required],
      password: ['', Validators.required],
      role: ['', Validators.required],
-      groupsView: ['card', Validators.required],
      organizationalUnits: [[]]
    });
-
-    if (data) {
-      this.isEditMode = true;
-    }
  }

  ngOnInit(): void {
    this.dataService.getUserGroups().subscribe((data) => {
      this.userGroups = data['hydra:member'];
    });
-
    this.dataService.getOrganizationalUnits().subscribe((data) => {
      this.organizationalUnits = data['hydra:member'].filter((item: any) => item.type === 'organizational-unit');
    });
-
    if (this.data) {
-      this.load();
-    } else {
-      this.userForm.get('password')?.setValidators([Validators.required]);
+      this.load()
    }
  }

  load(): void {
-    this.loading = true;
    this.dataService.getUser(this.data).subscribe({
      next: (response) => {
+        console.log(response);
+
        const organizationalUnitIds = response.allowedOrganizationalUnits.map((unit: any) => unit['@id']);

+        // Patch the values to the form
        this.userForm.patchValue({
          username: response.username,
-          role: response.userGroups.length > 0 ? response.userGroups[0]['@id'] : null,
-          organizationalUnits: organizationalUnitIds,
-          groupsView: response.groupsView
+          role: response.userGroups[0]['@id'],
+          organizationalUnits: organizationalUnitIds
        });

        this.userId = response['@id'];
-        this.userForm.get('password')?.clearValidators();
-        this.userForm.get('password')?.updateValueAndValidity();
-        this.loading = false;
      },
      error: (err) => {
-        this.loading = false;
-        console.error('Error fetching user:', err);
+        console.error('Error fetching remote calendar:', err);
      }
    });
  }
@ -103,49 +80,37 @@ export class AddUserModalComponent implements OnInit {

  onSubmit(): void {
    if (this.userForm.valid) {
-      const payload: any = {
+      const payload = {
        username: this.userForm.value.username,
-        allowedOrganizationalUnits: this.userForm.value.organizationalUnits,
+        allowedOrganizationalUnits: this.userForm.value.organizationalUnit,
+        password: this.userForm.value.password,
        enabled: true,
-        userGroups: [this.userForm.value.role],
-        groupsView: this.userForm.value.groupsView
+        userGroups: [this.userForm.value.role ]
      };

-      if (!this.userId && this.userForm.value.password) {
-        payload.password = this.userForm.value.password;
-      } else if (this.userId && this.userForm.value.password.trim() !== '') {
-        payload.password = this.userForm.value.password;
-      }
-
-      this.loading = true;
-
      if (this.userId) {
        this.http.put(`${this.baseUrl}${this.userId}`, payload).subscribe(
          (response) => {
            this.toastService.success('Usuario editado correctamente');
-            this.userEdited.emit();
            this.dialogRef.close();
-            this.loading = false;
          },
          (error) => {
            this.toastService.error(error['error']['hydra:description']);
-            this.loading = false;
+            console.error('Error al editar el rol', error);
          }
        );
      } else {
        this.http.post(`${this.baseUrl}/users`, payload).subscribe(
          (response) => {
            this.toastService.success('Usuario añadido correctamente');
-            this.userAdded.emit();
            this.dialogRef.close();
-            this.loading = false;
          },
          (error) => {
            this.toastService.error(error['error']['hydra:description']);
-            this.loading = false;
+            console.error('Error al añadir añadido', error);
          }
        );
      }
    }
  }
-}
+}
--- a/ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.css
+++ b/ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.css
@ -1,5 +1,6 @@
 .user-form .form-field {
-  display: block;
+    display: block;
+    margin-bottom: 10px;
 }

 .checkbox-group label {
@ -16,14 +17,3 @@ mat-spinner {
  margin: 0 auto;
  align-self: center;
 }
-
-.action-container {
-  display: flex;
-  justify-content: flex-end;
-  gap: 1em;
-  padding: 1.5em;
-}
-
-.form-container {
-  margin-top: 2em;
-}
--- a/ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.html
+++ b/ogWebconsole/src/app/components/admin/users/users/change-password-modal/change-password-modal.component.html
@ -1,4 +1,4 @@
-<h1 mat-dialog-title>{{ 'dialogTitleChangePassword' | translate }}</h1>
+<h1 mat-dialog-title>{{ 'dialogTitleEditUser' | translate }}</h1>
 <mat-dialog-content class="form-container">
  <form [formGroup]="userForm" class="user-form">
    <mat-form-field class="form-field">
@ -23,7 +23,7 @@
    </div>
  </form>
 </mat-dialog-content>
-<mat-dialog-actions class="action-container">
-  <button class="ordinary-button" (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
-  <button class="submit-button" (click)="onSubmit()" [disabled]="loading">{{ 'buttonEdit' | translate }}</button>
-</mat-dialog-actions>
+<mat-dialog-actions align="end">
+  <button mat-button (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
+  <button mat-button (click)="onSubmit()" [disabled]="loading">{{ 'buttonEdit' | translate }}</button>
+</mat-dialog-actions>
--- a/ogWebconsole/src/app/components/admin/users/users/data.service.ts
+++ b/ogWebconsole/src/app/components/admin/users/users/data.service.ts
@ -3,19 +3,15 @@ import { Injectable } from '@angular/core';
 import {HttpClient, HttpParams} from '@angular/common/http';
 import { Observable, throwError } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
-import { ConfigService } from '@services/config.service';

@Injectable({
  providedIn: 'root'
 })
 export class DataService {
-  baseUrl: string;
-  private apiUrl: string;
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
+  private apiUrl = `${this.baseUrl}/users?page=1&itemsPerPage=1000`;

-  constructor(private http: HttpClient, private configService: ConfigService) {
-    this.baseUrl = this.configService.apiUrl;
-    this.apiUrl = `${this.baseUrl}/users?page=1&itemsPerPage=1000`;
-  }
+  constructor(private http: HttpClient) {}

  getUsers(filters: { [key: string]: string }): Observable<{ totalItems: any; data: any }> {
    const params = new HttpParams({ fromObject: filters });
--- a/ogWebconsole/src/app/components/admin/users/users/users.component.css
+++ b/ogWebconsole/src/app/components/admin/users/users/users.component.css
@ -1,19 +1,6 @@
-.header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 10px;
-  border-bottom: 1px solid #ddd;
-}
-
-.header-container-title {
-  flex-grow: 1;
-  text-align: left;
-  margin-left: 1em;
-}
-
 table {
  width: 100%;
+  margin-top: 50px;
 }

 .search-container  {
@ -21,10 +8,14 @@ table {
  justify-content: space-between;
  align-items: center;
  width: 100%;
-  margin: 1.5rem 0rem 1.5rem 0rem;
+  padding: 0 5px;
  box-sizing: border-box;
 }

+.divider {
+  margin: 20px 0;
+}
+
 .search-string {
  flex: 2;
  padding: 5px;
@ -35,6 +26,13 @@ table {
  padding: 5px;
 }

+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+}
+
 .mat-elevation-z8 {
  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
 }
--- a/ogWebconsole/src/app/components/admin/users/users/users.component.html
+++ b/ogWebconsole/src/app/components/admin/users/users/users.component.html
@ -1,40 +1,30 @@
 <div class="header-container">
-  <div class="header-container-title">
-    <h2>{{ 'adminUsersTitle' | translate }}</h2>
-  </div>
+  <h2 class="title">{{ 'adminImagesTitle' | translate }}</h2>
  <div class="images-button-row">
-    <button class="action-button" (click)="addUser()">
+    <button mat-flat-button color="primary" (click)="addUser()">
      {{ 'addUser' | translate }}
    </button>
  </div>
 </div>
-
+<mat-divider class="divider"></mat-divider>
 <div class="search-container">
  <mat-form-field appearance="fill" class="search-string">
    <mat-label>{{ 'searchLabel' | translate }}</mat-label>
-    <input matInput placeholder="{{ 'searchPlaceholder' | translate }}" [(ngModel)]="filters['name']"
-      (keyup.enter)="search()">
+    <input matInput placeholder="{{ 'searchPlaceholder' | translate }}" [(ngModel)]="filters['name']" (keyup.enter)="search()">
    <mat-icon matSuffix>search</mat-icon>
    <mat-hint>{{ 'searchHint' | translate }}</mat-hint>
  </mat-form-field>
 </div>

-<app-loading [isLoading]="loading"></app-loading>
+<div *ngIf="loading" class="loading-container">
+  <mat-spinner></mat-spinner>
+</div>

 <div *ngIf="!loading">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
      <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
-      <td mat-cell *matCellDef="let user">
-        <ng-container *ngIf="column.columnDef === 'groupsView'">
-          <mat-chip>
-            {{ user[column.columnDef] === 'card' ? 'Vista tarjetas' : 'Listado' }}
-          </mat-chip>
-        </ng-container>
-        <ng-container *ngIf="column.columnDef !== 'groupsView'">
-          {{ column.cell(user) }}
-        </ng-container>
-      </td>
+      <td mat-cell *matCellDef="let user"> {{ column.cell(user) }} </td>
    </ng-container>

    <ng-container matColumnDef="actions">
@ -54,7 +44,10 @@
 </div>

 <div class="paginator-container">
-  <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
-    (page)="onPageChange($event)">
+  <mat-paginator [length]="length"
+                 [pageSize]="itemsPerPage"
+                 [pageIndex]="page"
+                 [pageSizeOptions]="pageSizeOptions"
+                 (page)="onPageChange($event)">
  </mat-paginator>
-</div>
+</div>
--- a/ogWebconsole/src/app/components/admin/users/users/users.component.spec.ts
+++ b/ogWebconsole/src/app/components/admin/users/users/users.component.spec.ts
@ -7,11 +7,16 @@ import { ToastrService } from 'ngx-toastr';
 import { of } from 'rxjs';
 import { NO_ERRORS_SCHEMA } from '@angular/core'; 
 import { TranslateModule } from '@ngx-translate/core';
-import { ConfigService } from '@services/config.service';

-class MockToastrService {
-  success() {}
-  error() {}
+class MockUserService {
+  getUsers() {
+    return of({
+      'hydra:member': [
+        { id: 1, username: 'user1', allowedOrganizationalUnits: [], roles: ['admin'] },
+        { id: 2, username: 'user2', allowedOrganizationalUnits: [], roles: ['user'] }
+      ]
+    });
+  }
 }

 describe('UsersComponent', () => {
@ -19,25 +24,21 @@ describe('UsersComponent', () => {
  let fixture: ComponentFixture<UsersComponent>;

  beforeEach(async () => {
-    const mockConfigService = {
-      apiUrl: 'http://mock-api-url',
-      mercureUrl: 'http://mock-mercure-url'
-    };
-
    await TestBed.configureTestingModule({
      declarations: [UsersComponent],
      imports: [
        MatTableModule,
        MatDialogModule,
        HttpClientTestingModule,
-        TranslateModule.forRoot(),
+        TranslateModule.forRoot()
      ],
      providers: [
-        { provide: ToastrService, useClass: MockToastrService },
-        { provide: ConfigService, useValue: mockConfigService }
+        { useClass: MockUserService },
+        { provide: ToastrService, useValue: { success: () => {} } }, 
      ],
-      schemas: [NO_ERRORS_SCHEMA], // Ignorar elementos desconocidos
-    }).compileComponents();
+      schemas: [NO_ERRORS_SCHEMA], 
+    })
+    .compileComponents();

    fixture = TestBed.createComponent(UsersComponent);
    component = fixture.componentInstance;
@ -48,27 +49,4 @@ describe('UsersComponent', () => {
    expect(component).toBeTruthy();
  });

-  it('should have default values for pagination', () => {
-    expect(component.itemsPerPage).toBe(10);
-    expect(component.page).toBe(0);
-    expect(component.pageSizeOptions).toEqual([5, 10, 20, 40, 100]);
-  });
-
-  it('should call search on init', () => {
-    spyOn(component, 'search');
-    component.ngOnInit();
-    expect(component.search).toHaveBeenCalled();
-  });
-
-  it('should initialize the dataSource', () => {
-    expect(component.dataSource).toBeDefined();
-  });
-
-  it('should define displayedColumns', () => {
-    expect(component.displayedColumns).toBeDefined();
-    expect(component.displayedColumns).toContain('id');
-    expect(component.displayedColumns).toContain('username');
-    expect(component.displayedColumns).toContain('roles');
-    expect(component.displayedColumns).toContain('actions');
-  });
 });
--- a/ogWebconsole/src/app/components/admin/users/users/users.component.ts
+++ b/ogWebconsole/src/app/components/admin/users/users/users.component.ts
@ -5,7 +5,7 @@ import { AddUserModalComponent } from './add-user-modal/add-user-modal.component
 import { DeleteModalComponent } from '../../../../shared/delete_modal/delete-modal/delete-modal.component';
 import { HttpClient } from '@angular/common/http';
 import { ToastrService } from 'ngx-toastr';
-import { ConfigService } from '@services/config.service';
+import { DataService } from "./data.service";

@Component({
  selector: 'app-users',
@ -13,8 +13,7 @@ import { ConfigService } from '@services/config.service';
  styleUrls: ['./users.component.css']
 })
 export class UsersComponent implements OnInit {
-  baseUrl: string;
-  private apiUrl: string;
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  dataSource = new MatTableDataSource<any>();
  filters: { [key: string]: string } = {};
  loading: boolean = false;
@ -33,11 +32,6 @@ export class UsersComponent implements OnInit {
      header: 'Nombre de Usuario',
      cell: (user: any) => `${user.username}`
    },
-    {
-      columnDef: 'groupsView',
-      header: 'Vista de Grupos',
-      cell: (user: any) => `${user.groupsView}`
-    },
    {
      columnDef: 'allowedOrganizationalUnits',
      header: 'Unidades Organizacionales Permitidas',
@ -51,15 +45,14 @@ export class UsersComponent implements OnInit {
  ];
  displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];

+  private apiUrl = `${this.baseUrl}/users`;
+
  constructor(
    public dialog: MatDialog,
-    private configService: ConfigService,
    private http: HttpClient,
+    private dataService: DataService,
    private toastService: ToastrService
-  ) {
-    this.baseUrl = this.configService.apiUrl;
-    this.apiUrl = `${this.baseUrl}/users`;
-  }
+  ) {}

  ngOnInit() {
    this.search();
@ -94,10 +87,6 @@ export class UsersComponent implements OnInit {
      data: user['@id']
    });

-    dialogRef.componentInstance.userEdited.subscribe(() => {
-      this.search();
-    });
-
    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        this.search();
@ -135,4 +124,4 @@ export class UsersComponent implements OnInit {
    this.length = event.length;
    this.search();
  }
-}
+}
--- a/ogWebconsole/src/app/components/calendar/calendar.component.css
+++ b/ogWebconsole/src/app/components/calendar/calendar.component.css
@ -1,20 +1,15 @@
-.header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 10px;
-  border-bottom: 1px solid #ddd;
-}
-
-.header-container-title {
-  flex-grow: 1;
-  text-align: left;
-  margin-left: 1em;
+.title {
+  font-size: 24px;
 }

 .calendar-button-row {
  display: flex;
-  gap: 15px;
+  justify-content: flex-start;
+  margin-top: 16px;
+}
+
+.divider {
+  margin: 20px 0;
 }

 .lists-container {
@ -28,14 +23,15 @@

 table {
  width: 100%;
+  margin-top: 50px;
 }

-.search-container {
+.search-container  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
-  margin: 1.5rem 0rem 1.5rem 0rem;
+  padding: 0 5px;
  box-sizing: border-box;
 }

@ -49,12 +45,19 @@ table {
  padding: 5px;
 }

+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+}
+
 .mat-elevation-z8 {
-  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
 }

 .paginator-container {
  display: flex;
  justify-content: end;
  margin-bottom: 30px;
-}
+}
--- a/ogWebconsole/src/app/components/calendar/calendar.component.html
+++ b/ogWebconsole/src/app/components/calendar/calendar.component.html
@ -2,33 +2,30 @@
  <button mat-icon-button color="primary" (click)="iniciarTour()">
    <mat-icon>help</mat-icon>
  </button>
-  <div class="header-container-title">
-    <h2 joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'adminCalendarsTitle' | translate }}</h2>
-  </div>
+  <h2 joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}" class="title">{{ 'adminCalendarsTitle' | translate }}</h2>
  <div class="calendar-button-row">
-    <button joyrideStep="addButtonStep" text="{{ 'addButtonStepText' | translate }}" class="action-button"
-      (click)="addCalendar()">
+    <button joyrideStep="addButtonStep" text="{{ 'addButtonStepText' | translate }}" mat-flat-button color="primary" (click)="addImage()">
      {{ 'addCalendar' | translate }}
    </button>
  </div>
 </div>
+<mat-divider class="divider"></mat-divider>

 <div class="search-container">
-  <mat-form-field joyrideStep="searchStep" text="{{ 'searchStepText' | translate }}" appearance="fill"
-    class="search-string">
+  <mat-form-field joyrideStep="searchStep" text="{{ 'searchStepText' | translate }}" appearance="fill" class="search-string">
    <mat-label>{{ 'searchCalendarLabel' | translate }}</mat-label>
-    <input matInput placeholder="{{ 'searchPlaceholder' | translate }}" [(ngModel)]="filters['name']"
-      (keyup.enter)="search()">
+    <input matInput placeholder="{{ 'searchPlaceholder' | translate }}" [(ngModel)]="filters['name']" (keyup.enter)="search()">
    <mat-icon matSuffix>search</mat-icon>
    <mat-hint>{{ 'searchHint' | translate }}</mat-hint>
  </mat-form-field>
 </div>

-<app-loading [isLoading]="loading"></app-loading>
+<div *ngIf="loading" class="loading-container">
+  <mat-spinner></mat-spinner>
+</div>

 <div *ngIf="!loading">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep"
-    text="{{ 'tableStepText' | translate }}">
+  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep" text="{{ 'tableStepText' | translate }}">
    <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
      <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
      <td mat-cell *matCellDef="let image">
@ -37,8 +34,7 @@
            {{ image[column.columnDef] ? 'check_circle' : 'cancel' }}
          </mat-icon>
        </ng-container>
-        <ng-container
-          *ngIf="column.columnDef !== 'isDefault' && column.columnDef !== 'installed' && column.columnDef !== 'downloadUrl'">
+        <ng-container *ngIf="column.columnDef !== 'isDefault' && column.columnDef !== 'installed' && column.columnDef !== 'downloadUrl'">
          {{ column.cell(image) }}
        </ng-container>
      </td>
@ -54,7 +50,7 @@
          <mat-icon>sync</mat-icon>
        </button>
        <button *ngIf="syncUds" mat-icon-button color="primary">
-          <app-loading [isLoading]="syncUds"></app-loading>
+          <mat-spinner diameter="24"></mat-spinner>
        </button>
        <button mat-icon-button color="warn" (click)="deleteCalendar(calendar)">
          <mat-icon>delete</mat-icon>
@ -68,7 +64,10 @@
 </div>

 <div class="paginator-container">
-  <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
-    (page)="onPageChange($event)">
+  <mat-paginator [length]="length"
+                 [pageSize]="itemsPerPage"
+                 [pageIndex]="page"
+                 [pageSizeOptions]="pageSizeOptions"
+                 (page)="onPageChange($event)">
  </mat-paginator>
-</div>
+</div>
--- a/ogWebconsole/src/app/components/calendar/calendar.component.spec.ts
+++ b/ogWebconsole/src/app/components/calendar/calendar.component.spec.ts
@ -15,21 +15,14 @@ import { CalendarComponent } from './calendar.component';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { JoyrideModule, JoyrideService } from 'ngx-joyride';
 import { TranslateModule } from '@ngx-translate/core';
-import { LoadingComponent } from '../../shared/loading/loading.component';
-import { ConfigService } from '@services/config.service';

 describe('CalendarComponent', () => {
  let component: CalendarComponent;
  let fixture: ComponentFixture<CalendarComponent>;

  beforeEach(async () => {
-    const mockConfigService = {
-      apiUrl: 'http://mock-api-url',
-      mercureUrl: 'http://mock-mercure-url'
-    };
-
    await TestBed.configureTestingModule({
-      declarations: [CalendarComponent, LoadingComponent],
+      declarations: [CalendarComponent],
      imports: [
        HttpClientTestingModule,
        ToastrModule.forRoot(),
@ -47,9 +40,6 @@ describe('CalendarComponent', () => {
        JoyrideModule.forRoot(),
        TranslateModule.forRoot(),
      ],
-      providers: [
-        { provide: ConfigService, useValue: mockConfigService }
-      ]
    })
    .compileComponents();

--- a/ogWebconsole/src/app/components/calendar/calendar.component.ts
+++ b/ogWebconsole/src/app/components/calendar/calendar.component.ts
@ -9,7 +9,6 @@ import { PageEvent } from "@angular/material/paginator";
 import { CreateCalendarComponent } from "./create-calendar/create-calendar.component";
 import { DeleteModalComponent } from "../../shared/delete_modal/delete-modal/delete-modal.component";
 import { JoyrideService } from 'ngx-joyride';
-import { ConfigService } from '@services/config.service';

@Component({
  selector: 'app-calendar',
@ -17,8 +16,7 @@ import { ConfigService } from '@services/config.service';
  styleUrl: './calendar.component.css'
 })
 export class CalendarComponent implements OnInit {
-  baseUrl: string;
-  private apiUrl: string;
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  images: { downloadUrl: string; name: string; uuid: string }[] = [];
  dataSource = new MatTableDataSource<any>();
  length: number = 0;
@ -54,24 +52,21 @@ export class CalendarComponent implements OnInit {
    }
  ];
  displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
+  private apiUrl = `${this.baseUrl}/remote-calendars`;

  constructor(
    public dialog: MatDialog,
    private http: HttpClient,
    private dataService: DataService,
    private toastService: ToastrService,
-    private configService: ConfigService,
    private joyrideService: JoyrideService
-  ) {
-    this.baseUrl = this.configService.apiUrl;
-    this.apiUrl = `${this.baseUrl}/remote-calendars`;
-  }
+  ) {}

  ngOnInit(): void {
    this.search();
  }

-  addCalendar(): void {
+  addImage(): void {
    const dialogRef = this.dialog.open(CreateCalendarComponent, {
      width: '400px'
    });
@ -170,7 +165,7 @@ export class CalendarComponent implements OnInit {
    this.joyrideService.startTour({
      steps: ['titleStep', 'addButtonStep', 'searchStep', 'tableStep', 'actionsStep'],
      showPrevButton: true,
-      themeColor: '#3f51b5'
+      themeColor: '#3f51b5' 
    });
  }
 }
--- a/ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.css
+++ b/ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.css
@ -28,10 +28,3 @@
 .time-field {
  flex: 1;
 }
-
-.action-container {
-  display: flex;
-  justify-content: flex-end;
-  gap: 1em;
-  padding: 1.5em;
-}
--- a/ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.html
+++ b/ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.html
@ -56,10 +56,10 @@
  </div>
 </mat-dialog-content>

-<mat-dialog-actions class="action-container">
-  <button class="ordinary-button" (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
+<mat-dialog-actions align="end">
+  <button mat-button (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
  <button
-    class="submit-button"
+    mat-button
    (click)="submitRule()"
    cdkFocusInitial
    [disabled]="(!isRemoteAvailable && (!busyFromHour || !busyToHour)) || (isRemoteAvailable && (!availableReason || !availableFromDate || !availableToDate))">
--- a/ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.ts
+++ b/ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.ts
@ -1,8 +1,7 @@
-import { Component, Inject } from '@angular/core';
-import { ToastrService } from "ngx-toastr";
-import { HttpClient } from "@angular/common/http";
-import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
-import { ConfigService } from '@services/config.service';
+import {Component, Inject} from '@angular/core';
+import {ToastrService} from "ngx-toastr";
+import {HttpClient} from "@angular/common/http";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";

@Component({
  selector: 'app-create-calendar-rule',
@ -10,7 +9,7 @@ import { ConfigService } from '@services/config.service';
  styleUrl: './create-calendar-rule.component.css'
 })
 export class CreateCalendarRuleComponent {
-  baseUrl: string;
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  name: string = '';
  remoteCalendarRules: any[] = [];
  weekDays: string[] = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];
@ -30,23 +29,20 @@ export class CreateCalendarRuleComponent {
  constructor(
    private toastService: ToastrService,
    private http: HttpClient,
-    private configService: ConfigService,
    public dialogRef: MatDialogRef<CreateCalendarRuleComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
-  ) {
-    this.baseUrl = this.configService.apiUrl;
-  }
+) { }

  ngOnInit(): void {
    this.calendarId = this.data.calendar
    if (this.data) {
      this.isEditMode = true;
-      this.availableFromDate = this.data.rule ? this.data.rule.availableFromDate : null;
-      this.availableToDate = this.data.rule ? this.data.rule.availableToDate : null;
-      this.isRemoteAvailable = this.data.rule ? this.data.rule.isRemoteAvailable : false;
-      this.availableReason = this.data.rule ? this.data.rule.availableReason : null;
-      this.busyFromHour = this.data.rule ? this.data.rule.busyFromHour : null;
-      this.busyToHour = this.data.rule ? this.data.rule.busyToHour : null;
+      this.availableFromDate = this.data.rule? this.data.rule.availableFromDate : null;
+      this.availableToDate = this.data.rule? this.data.rule.availableToDate : null;
+      this.isRemoteAvailable = this.data.rule? this.data.rule.isRemoteAvailable : false;
+      this.availableReason = this.data.rule? this.data.rule.availableReason : null;
+      this.busyFromHour = this.data.rule? this.data.rule.busyFromHour : null;
+      this.busyToHour = this.data.rule? this.data.rule.busyToHour : null;
      if (this.data.rule && this.data.rule.busyWeekDays) {
        this.busyWeekDays = this.data.rule.busyWeekDays.reduce((acc: {
          [x: string]: boolean;
--- a/ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.css
+++ b/ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.css
@ -1,3 +1,6 @@
+.full-width {
+  width: 100%;
+}
 .form-container {
  padding: 40px;
 }
@ -9,7 +12,7 @@

 .full-width {
  width: 100%;
-  margin-top: 16px;
+  margin-bottom: 16px;
 }

 .additional-form {
@ -55,9 +58,3 @@
  cursor: pointer;
 }

-.action-container {
-  display: flex;
-  justify-content: flex-end;
-  gap: 1em;
-  padding: 1.5em;
-}
--- a/ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.html
+++ b/ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.html
@ -9,7 +9,7 @@
  
  <div style="display: flex; justify-content: space-between; align-items: center;">
    <div *ngIf="isEditMode" mat-subheader>{{ 'rulesHeader' | translate }}</div>
-    <button class="action-button" *ngIf="isEditMode" (click)="createRule()" style="padding: 10px;">
+    <button mat-flat-button color="primary" *ngIf="isEditMode" (click)="createRule()" style="padding: 10px;">
      {{ 'addRule' | translate }}
    </button>
  </div>
@ -41,9 +41,9 @@
  </mat-list>
 </mat-dialog-content>

-<mat-dialog-actions class="action-container">
-  <button class="ordinary-button" (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
-  <button class="submit-button" (click)="submitForm()" [disabled]="!name || name === ''" cdkFocusInitial>
+<mat-dialog-actions align="end">
+  <button mat-button (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
+  <button mat-button (click)="submitForm()" [disabled]="!name || name === ''" cdkFocusInitial>
    {{ 'buttonSave' | translate }}
  </button>
 </mat-dialog-actions>
--- a/ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.ts
+++ b/ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.ts
@ -1,11 +1,10 @@
-import { Component, Inject, OnInit } from '@angular/core';
-import { ToastrService } from "ngx-toastr";
-import { HttpClient } from "@angular/common/http";
-import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from "@angular/material/dialog";
-import { CreateCalendarRuleComponent } from "../create-calendar-rule/create-calendar-rule.component";
-import { DataService } from "../data.service";
-import { DeleteModalComponent } from "../../../shared/delete_modal/delete-modal/delete-modal.component";
-import { ConfigService } from '@services/config.service';
+import {Component, Inject, OnInit} from '@angular/core';
+import {ToastrService} from "ngx-toastr";
+import {HttpClient} from "@angular/common/http";
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
+import {CreateCalendarRuleComponent} from "../create-calendar-rule/create-calendar-rule.component";
+import {DataService} from "../data.service";
+import {DeleteModalComponent} from "../../../shared/delete_modal/delete-modal/delete-modal.component";

@Component({
  selector: 'app-create-calendar',
@ -13,7 +12,7 @@ import { ConfigService } from '@services/config.service';
  styleUrl: './create-calendar.component.css'
 })
 export class CreateCalendarComponent implements OnInit {
-  baseUrl: string;
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  name: string = '';
  remoteCalendarRules: any[] = [];
  isEditMode: boolean = false;
@ -23,14 +22,11 @@ export class CreateCalendarComponent implements OnInit {
  constructor(
    private toastService: ToastrService,
    private http: HttpClient,
-    private configService: ConfigService,
    public dialogRef: MatDialogRef<CreateCalendarComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    public dialog: MatDialog,
    private dataService: DataService,
-  ) {
-    this.baseUrl = this.configService.apiUrl;
-  }
+  ) { }

  ngOnInit(): void {
    if (this.data) {
--- a/ogWebconsole/src/app/components/calendar/data.service.ts
+++ b/ogWebconsole/src/app/components/calendar/data.service.ts
@ -1,20 +1,16 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpParams } from '@angular/common/http';
+import {HttpClient, HttpParams} from '@angular/common/http';
 import { Observable, throwError } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
-import { ConfigService } from '@services/config.service';

@Injectable({
  providedIn: 'root'
 })
 export class DataService {
-  baseUrl: string;
-  private apiUrl: string;
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
+  private apiUrl = `${this.baseUrl}/remote-calendars?page=1&itemsPerPage=1000`;

-  constructor(private http: HttpClient, private configService: ConfigService) {
-    this.baseUrl = this.configService.apiUrl;
-    this.apiUrl = `${this.baseUrl}/remote-calendars?page=1&itemsPerPage=1000`;
-  }
+  constructor(private http: HttpClient) {}

  getRemoteCalendars(filters: { [key: string]: string }): Observable<any[]> {
    const params = new HttpParams({ fromObject: filters });
--- a/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.css
+++ b/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.css
@ -1,12 +1,11 @@
-.header-container-title {
-  flex-grow: 1;
-  text-align: left;
-  margin-left: 1em;
+.title {
+  font-size: 24px;
 }

-.command-groups-button-row {
+.calendar-button-row {
  display: flex;
-  gap: 15px;
+  justify-content: flex-start;
+  margin-top: 16px;
 }

 .divider {
@ -28,15 +27,16 @@

 table {
  width: 100%;
+  margin-top: 50px;
 }

-.search-container {
+.search-container  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
+  padding: 0 5px;
  box-sizing: border-box;
-  margin: 1.5rem 0rem 1.5rem 0rem;
 }

 .search-string {
@ -53,12 +53,11 @@ table {
  display: flex;
  justify-content: space-between;
  align-items: center;
-  padding: 10px 10px;
-  border-bottom: 1px solid #ddd;
+  padding: 10px;
 }

 .mat-elevation-z8 {
-  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
 }

 .paginator-container {
@ -75,4 +74,5 @@ table {
 .mat-chip-readonly-false {
  background-color: #F44336 !important;
  color: white !important;
-}
+}
+
--- a/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.html
@ -2,16 +2,16 @@
  <button mat-icon-button color="primary" (click)="iniciarTour()">
    <mat-icon>help</mat-icon>
  </button>
-  <div class="header-container-title">
-    <h2 joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'adminCommandGroupsTitle' | translate }}</h2>
-  </div>
+  <h2 class="title" joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'adminCommandGroupsTitle' | translate }}</h2>
  <div class="command-groups-button-row">
-    <button class="action-button" (click)="openCreateCommandGroupModal()" joyrideStep="addCommandGroupStep" text="{{ 'addCommandGroupStepText' | translate }}">
+    <button mat-flat-button color="primary" (click)="openCreateCommandGroupModal()" joyrideStep="addCommandGroupStep" text="{{ 'addCommandGroupStepText' | translate }}">
      {{ 'addCommandGroup' | translate }}
    </button>
  </div>
 </div>

+<mat-divider class="divider"></mat-divider>
+
 <div class="search-container" joyrideStep="searchStep" text="{{ 'searchStepText' | translate }}">
  <mat-form-field appearance="fill" class="search-string">
    <mat-label>{{ 'searchGroupNameLabel' | translate }}</mat-label>
@ -22,7 +22,7 @@
 </div>

 <div *ngIf="loading" class="loading-container" joyrideStep="loadingStep" text="{{ 'loadingStepText' | translate }}">
-  <app-loading [isLoading]="loading"></app-loading>
+  <mat-spinner></mat-spinner>
 </div>

 <div *ngIf="!loading">
@ -35,7 +35,7 @@
        </ng-container>

        <ng-container *ngIf="column.columnDef === 'commands'" joyrideStep="viewCommandsStep" text="{{ 'viewCommandsStepText' | translate }}">
-          <button class="action-button" [matMenuTriggerFor]="menu">{{ 'viewCommands' | translate }}</button>
+          <button mat-button [matMenuTriggerFor]="menu">{{ 'viewCommands' | translate }}</button>
          <mat-menu #menu="matMenu">
            <button mat-menu-item *ngFor="let command of commandGroup.commands">
              {{ command.name }}
--- a/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.ts
@ -8,7 +8,6 @@ import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/
 import { MatTableDataSource } from "@angular/material/table";
 import { DatePipe } from "@angular/common";
 import { JoyrideService } from 'ngx-joyride';
-import { ConfigService } from '@services/config.service';

@Component({
  selector: 'app-commands-groups',
@ -16,8 +15,7 @@ import { ConfigService } from '@services/config.service';
  styleUrls: ['./commands-groups.component.css']
 })
 export class CommandsGroupsComponent implements OnInit {
-  baseUrl: string;
-  private apiUrl: string;
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  dataSource = new MatTableDataSource<any>();
  filters: { [key: string]: string | boolean } = {};
  length: number = 0;
@ -49,12 +47,10 @@ export class CommandsGroupsComponent implements OnInit {
    }
  ];
  displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
+  private apiUrl = `${this.baseUrl}/command-groups`;

-  constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService,
-    private configService: ConfigService, private joyrideService: JoyrideService) {
-    this.baseUrl = this.configService.apiUrl;
-    this.apiUrl = `${this.baseUrl}/command-groups`;
-  }
+  constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService, 
+    private joyrideService: JoyrideService) {}

  ngOnInit(): void {
    this.search();
@ -124,17 +120,17 @@ export class CommandsGroupsComponent implements OnInit {
  iniciarTour(): void {
    this.joyrideService.startTour({
      steps: [
-        'titleStep',
-        'addCommandGroupStep',
-        'searchStep',
-        'tableStep',
-        'viewCommandsStep',
-        'actionsStep',
-        'paginationStep'
+      'titleStep',
+      'addCommandGroupStep',
+      'searchStep',
+      'tableStep',
+      'viewCommandsStep',
+      'actionsStep',
+      'paginationStep'
      ],
      showPrevButton: true,
      themeColor: '#3f51b5'
    });
  }
-
+  
 }
--- a/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.css
+++ b/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.css
@ -98,10 +98,3 @@
    margin-bottom: 20px;
  }
 }
-
-.action-container {
-  display: flex;
-  justify-content: flex-end;
-  gap: 1em;
-  padding: 1.5em;
-}
--- a/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.html
@ -1,6 +1,8 @@
 <h2 mat-dialog-title>{{ editing ? ('editCommandGroup' | translate) : ('createCommandGroup' | translate) }}</h2>
 <mat-dialog-content class="form-container">
-  <app-loading [isLoading]="loading"></app-loading>
+  <div *ngIf="loading" class="loading-container">
+    <mat-spinner></mat-spinner>
+  </div>

  <form *ngIf="!loading" class="command-group-form" (ngSubmit)="onSubmit()">
    <mat-form-field>
@ -53,7 +55,7 @@
  </form>
 </mat-dialog-content>

-<mat-dialog-actions class="action-container">
-  <button class="ordinary-button" (click)="close()">{{ 'buttonCancel' | translate }}</button>
-  <button class="submit-button" (click)="onSubmit()" cdkFocusInitial>{{ 'buttonSave' | translate }}</button>
-</mat-dialog-actions>
+<mat-dialog-actions align="end">
+  <button mat-button (click)="close()">{{ 'buttonCancel' | translate }}</button>
+  <button mat-button (click)="onSubmit()" cdkFocusInitial>{{ 'buttonSave' | translate }}</button>
+</mat-dialog-actions>
--- a/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.ts
@ -3,7 +3,6 @@ import { HttpClient } from '@angular/common/http';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { ToastrService } from 'ngx-toastr';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { ConfigService } from '@services/config.service';

@Component({
  selector: 'app-create-command-group',
@ -11,25 +10,21 @@ import { ConfigService } from '@services/config.service';
  styleUrls: ['./create-command-group.component.css']
 })
 export class CreateCommandGroupComponent implements OnInit {
-  baseUrl: string;
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  availableCommands: any[] = [];
  selectedCommands: any[] = [];
  groupName: string = '';
  enabled: boolean = true;
  editing: boolean = false;
  loading: boolean = false;
-  private apiUrl: string;
+  private apiUrl = `${this.baseUrl}/commands`;

  constructor(
    private http: HttpClient,
    private dialogRef: MatDialogRef<CreateCommandGroupComponent>,
    private toastService: ToastrService,
-    private configService: ConfigService,
    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {
-    this.baseUrl = this.configService.apiUrl;
-    this.apiUrl = `${this.baseUrl}/commands`;
-  }
+  ) {}

  ngOnInit(): void {
    this.loadAvailableCommands();
--- a/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.css
+++ b/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.css
@ -58,6 +58,19 @@
    padding: 10px 20px;
  }

+  button {
+    background-color: #3f51b5; /* Color primario */
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  button:hover {
+    background-color: #2c387e; /* Color primario oscuro */
+  }
+
  @media (max-width: 600px) {
    .mat-card {
      margin: 10px 0;
@ -73,6 +86,15 @@
    }
  }

+  .cancel-button {
+    background-color: #dc3545;
+    color: white;
+    border-radius: 5px;
+  }
+  .cancel-button:hover {
+    opacity: 0.9;
+  }
+
  .create-command-group-container {
    padding: 20px;
  }
@ -124,9 +146,8 @@
    color: #666;
  }

-  .action-container {
+  .command-group-actions {
+    margin-top: 20px;
    display: flex;
-    justify-content: flex-end;
-    gap: 1em;
-    padding: 1.5em;
+    justify-content: space-between;
  }
--- a/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.html
@ -1,7 +1,10 @@
 <div class="detail-command-group-container">
  <h2>{{ 'commandGroupDetailsTitle' | translate }}</h2>

-  <app-loading [isLoading]="loading"></app-loading>
+  <!-- Indicador de carga -->
+  <div *ngIf="loading" class="loading-container">
+    <mat-spinner></mat-spinner>
+  </div>

  <mat-card *ngIf="!loading">
    <mat-card-header>
@ -49,10 +52,10 @@
    </form>
  </div>

-  <div class="action-container" *ngIf="!loading">
-    <button class="ordinary-button" (click)="close()">{{ 'buttonCancel' | translate }}</button>
-    <button [ngClass]="showClientSelect ? 'submit-button' : 'action-button'" (click)="toggleClientSelect()">
+  <div class="command-group-actions" *ngIf="!loading">
+    <button mat-flat-button color="primary" (click)="toggleClientSelect()">
      {{ showClientSelect ? ('execute' | translate) : ('scheduleExecution' | translate) }}
    </button>
+    <button mat-flat-button color="warn" (click)="close()">{{ 'buttonCancel' | translate }}</button>
  </div>
-</div>
+</div>
--- a/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.ts
@ -3,7 +3,6 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { HttpClient } from '@angular/common/http';
 import { ToastrService } from 'ngx-toastr';
-import { ConfigService } from '@services/config.service';

@Component({
  selector: 'app-detail-command-group',
@ -11,7 +10,7 @@ import { ConfigService } from '@services/config.service';
  styleUrls: ['./detail-command-group.component.css']
 })
 export class DetailCommandGroupComponent implements OnInit {
-  baseUrl: string;
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  form!: FormGroup;
  clients: any[] = [];
  showClientSelect = false;
@ -22,12 +21,9 @@ export class DetailCommandGroupComponent implements OnInit {
    @Inject(MAT_DIALOG_DATA) public data: any,
    private dialogRef: MatDialogRef<DetailCommandGroupComponent>,
    private fb: FormBuilder,
-    private configService: ConfigService,
    private http: HttpClient,
    private toastService: ToastrService
-  ) {
-    this.baseUrl = this.configService.apiUrl;
-  }
+  ) { }

  ngOnInit(): void {
    this.form = this.fb.group({
--- a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.css
+++ b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.css
@ -1,12 +1,11 @@
-.header-container-title {
-  flex-grow: 1;
-  text-align: left;
-  margin-left: 1em;
+.title {
+  font-size: 24px;
 }

-.task-button-row {
+.calendar-button-row {
  display: flex;
-  gap: 15px;
+  justify-content: flex-start;
+  margin-top: 16px;
 }

 .divider {
@ -28,6 +27,7 @@

 table {
  width: 100%;
+  margin-top: 50px;
 }

 .search-container  {
@ -35,7 +35,7 @@ table {
  justify-content: space-between;
  align-items: center;
  width: 100%;
-  margin: 1.5rem 0rem 1.5rem 0rem;
+  padding: 0 5px;
  box-sizing: border-box;
 }

@ -53,8 +53,7 @@ table {
  display: flex;
  justify-content: space-between;
  align-items: center;
-  padding: 10px 10px;
-  border-bottom: 1px solid #ddd;
+  padding: 10px;
 }

 .mat-elevation-z8 {
--- a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html
@ -2,16 +2,16 @@
  <button mat-icon-button color="primary" (click)="iniciarTour()">
    <mat-icon>help</mat-icon>
  </button>
-  <div class="header-container-title">
-    <h2 class="title" joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'manageTasksTitle' | translate }}</h2>
-  </div>
+  <h2 class="title" joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'manageTasksTitle' | translate }}</h2>
  <div class="task-button-row">
-    <button class="action-button" (click)="openCreateTaskModal()" joyrideStep="addTaskStep" text="{{ 'addTaskStepText' | translate }}">
+    <button mat-flat-button color="primary" (click)="openCreateTaskModal()" joyrideStep="addTaskStep" text="{{ 'addTaskStepText' | translate }}">
      {{ 'addTask' | translate }}
    </button>
  </div>
 </div>

+<mat-divider class="divider"></mat-divider>
+
 <div class="search-container" joyrideStep="searchStep" text="{{ 'searchStepText' | translate }}">
  <mat-form-field appearance="fill" class="search-string">
    <mat-label>{{ 'searchTaskLabel' | translate }}</mat-label>
--- a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.spec.ts
+++ b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.spec.ts
@ -7,22 +7,16 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { FormsModule } from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input'; 
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
 import { TranslateModule } from '@ngx-translate/core';
-import { LoadingComponent } from '../../../shared/loading/loading.component';
 import { JoyrideModule, JoyrideService, JoyrideStepService } from 'ngx-joyride';
-import { ConfigService } from '@services/config.service';
-
 describe('CommandsTaskComponent', () => {
  let component: CommandsTaskComponent;
  let fixture: ComponentFixture<CommandsTaskComponent>;
-  let mockConfigService: jasmine.SpyObj<ConfigService>;

  beforeEach(async () => {
-    const configServiceSpy = jasmine.createSpyObj('ConfigService', [], { apiUrl: 'http://mock-api-url' });
-
    await TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule,
@ -37,14 +31,9 @@ describe('CommandsTaskComponent', () => {
        TranslateModule.forRoot(),
        JoyrideModule.forRoot(),
      ],
-      declarations: [CommandsTaskComponent, LoadingComponent],
-      providers: [
-        { provide: ConfigService, useValue: configServiceSpy }
-      ],
+      declarations: [CommandsTaskComponent],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
-
-    mockConfigService = TestBed.inject(ConfigService) as jasmine.SpyObj<ConfigService>;
  });

  beforeEach(() => {
--- a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.ts
@ -6,7 +6,6 @@ import { CreateTaskComponent } from './create-task/create-task.component';
 import { DetailTaskComponent } from './detail-task/detail-task.component';
 import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
 import { JoyrideService } from 'ngx-joyride';
-import { ConfigService } from '@services/config.service';

@Component({
  selector: 'app-commands-task',
@ -14,7 +13,7 @@ import { ConfigService } from '@services/config.service';
  styleUrls: ['./commands-task.component.css']
 })
 export class CommandsTaskComponent implements OnInit {
-  baseUrl: string;
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  tasks: any[] = [];
  filters: { [key: string]: string | boolean } = {};
  length: number = 0;
@ -23,14 +22,10 @@ export class CommandsTaskComponent implements OnInit {
  pageSizeOptions: number[] = [5, 10, 20, 40, 100];
  displayedColumns: string[] = ['taskid', 'notes', 'name', 'scheduledDate', 'enabled', 'actions'];
  loading: boolean = false;
-  private apiUrl: string;
+  private apiUrl = `${this.baseUrl}/command-tasks`;

-  constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService,
-    private configService: ConfigService,
-    private joyrideService: JoyrideService) {
-    this.baseUrl = this.configService.apiUrl;
-    this.apiUrl = `${this.baseUrl}/command-tasks`;
-  }
+  constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService, 
+    private joyrideService: JoyrideService) {}

  ngOnInit(): void {
    this.loadTasks();
@ -115,5 +110,5 @@ export class CommandsTaskComponent implements OnInit {
      themeColor: '#3f51b5'
    });
  }
-
+  
 }
--- a/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.css
+++ b/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.css
@ -14,7 +14,6 @@
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
-  padding: 1.5rem;
 }

 mat-form-field {
--- a/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.html
@ -87,6 +87,10 @@
      </mat-select>
    </mat-form-field>

+    <div class="button-container">
+      <button mat-raised-button color="primary" (click)="saveTask()">{{ 'buttonSave' | translate }}</button>
+    </div>
+
    <mat-form-field appearance="fill" class="full-width">
      <mat-label>Selecciona Clientes</mat-label>
      <mat-select formControlName="selectedClients" multiple>
@ -98,9 +102,10 @@
        </mat-option>
      </mat-select>
    </mat-form-field>
+
+    <div class="button-container">
+      <button mat-raised-button color="primary" (click)="saveTask()">Guardar</button>
+    </div>
+
  </mat-dialog-content>
 </form>
-
-<div class="button-container">
-  <button class="submit-button" (click)="saveTask()">{{ 'buttonSave' | translate }}</button>
-</div>
--- a/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.ts
@ -3,7 +3,6 @@ import { HttpClient } from '@angular/common/http';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { ToastrService } from 'ngx-toastr';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { ConfigService } from '@services/config.service';

@Component({
  selector: 'app-create-task',
@ -11,12 +10,12 @@ import { ConfigService } from '@services/config.service';
  styleUrls: ['./create-task.component.css']
 })
 export class CreateTaskComponent implements OnInit {
-  baseUrl: string;
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  taskForm: FormGroup;
  availableCommandGroups: any[] = [];
  selectedGroupCommands: any[] = [];
  availableIndividualCommands: any[] = [];
-  apiUrl: string;
+  apiUrl = `${this.baseUrl}/command-tasks`;
  editing: boolean = false;
  availableOrganizationalUnits: any[] = [];
  selectedUnitChildren: any[] = [];
@ -26,13 +25,10 @@ export class CreateTaskComponent implements OnInit {
  constructor(
    private fb: FormBuilder,
    private http: HttpClient,
-    private configService: ConfigService,
    private toastr: ToastrService,
    public dialogRef: MatDialogRef<CreateTaskComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
-    this.baseUrl = this.configService.apiUrl;
-    this.apiUrl = `${this.baseUrl}/command-tasks`;
    this.taskForm = this.fb.group({
      commandGroup: ['', Validators.required],
      extraCommands: [[]],
--- a/ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.css
+++ b/ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.css
@ -57,4 +57,26 @@
    justify-content: flex-end;
    padding: 10px 20px;
  }
+  
+  button {
+    background-color: #3f51b5;
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  button:hover {
+    background-color: #2c387e;
+  }
+  
+  .cancel-button {
+    background-color: #dc3545;
+    color: white;
+  }
+  
+  .cancel-button:hover {
+    opacity: 0.9;
+  }
  
--- a/ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.html
@ -50,6 +50,6 @@
  </mat-card>

  <div class="task-actions">
-    <button class="ordinary-button" (click)="closeDialog()">Cancel</button>
+    <button mat-flat-button class="cancel-button" (click)="closeDialog()">{{ 'buttonClose' | translate }}</button>
  </div>
 </div>
--- a/ogWebconsole/src/app/components/commands/commands-task/task-logs/input-dialog/input-dialog.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-task/task-logs/input-dialog/input-dialog.component.html
@ -1,7 +0,0 @@
-<h1 mat-dialog-title>{{ 'inputDetails' | translate }}</h1>
-<div mat-dialog-content>
-  <pre>{{ data.input | json }}</pre>
-</div>
-<div mat-dialog-actions align="end">
-  <button class="ordinary-button" (click)="close()">{{ 'closeButton' | translate }}</button>
-</div>
--- a/ogWebconsole/src/app/components/commands/commands-task/task-logs/input-dialog/input-dialog.component.spec.ts
+++ b/ogWebconsole/src/app/components/commands/commands-task/task-logs/input-dialog/input-dialog.component.spec.ts
@ -1,47 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { InputDialogComponent } from './input-dialog.component';
-import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from "@angular/material/dialog";
-import {FormBuilder} from "@angular/forms";
-import {ToastrService} from "ngx-toastr";
-import {provideHttpClient} from "@angular/common/http";
-import {provideHttpClientTesting} from "@angular/common/http/testing";
-import {TranslateModule} from "@ngx-translate/core";
-
-describe('InputDialogComponent', () => {
-  let component: InputDialogComponent;
-  let fixture: ComponentFixture<InputDialogComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [InputDialogComponent],
-      imports: [
-        MatDialogModule,
-        TranslateModule.forRoot(),
-      ],
-      providers: [
-        FormBuilder,
-        ToastrService,
-        provideHttpClient(),
-        provideHttpClientTesting(),
-        {
-          provide: MatDialogRef,
-          useValue: {}
-        },
-        {
-          provide: MAT_DIALOG_DATA,
-          useValue: {}
-        }
-      ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(InputDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/ogWebconsole/src/app/components/commands/commands-task/task-logs/input-dialog/input-dialog.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands-task/task-logs/input-dialog/input-dialog.component.ts
@ -1,18 +0,0 @@
-import { Component, Inject  } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-
-@Component({
-  selector: 'app-input-dialog',
-  templateUrl: './input-dialog.component.html',
-  styleUrl: './input-dialog.component.css'
-})
-export class InputDialogComponent {
-  constructor(
-    public dialogRef: MatDialogRef<InputDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: { input: any }
-  ) {}
-
-  close(): void {
-    this.dialogRef.close();
-  }
-}
--- a/ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.css
+++ b/ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.css
@ -1,20 +1,15 @@
-.header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 10px;
-  border-bottom: 1px solid #ddd;
-}
-
-.header-container-title {
-  flex-grow: 1;
-  text-align: left;
-  margin-left: 1em;
+.title {
+  font-size: 24px;
 }

 .calendar-button-row {
  display: flex;
-  gap: 15px;
+  justify-content: flex-start;
+  margin-top: 16px;
+}
+
+.divider {
+  margin: 20px 0;
 }

 .lists-container {
@ -32,13 +27,14 @@

 table {
  width: 100%;
+  margin-top: 50px;
 }

-.search-container {
+.search-container  {
  display: flex;
  justify-content: space-between;
  align-items: center;
-  margin: 1.5rem 0rem 1.5rem 0rem;
+  padding: 0 5px;
  box-sizing: border-box;
 }

@ -57,14 +53,15 @@ table {
  padding: 5px;
 }

-.mat-elevation-z8 {
-  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
 }

-.progress-container {
-  display: flex;
-  align-items: center;
-  gap: 10px;
+.mat-elevation-z8 {
+  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
 }

 .paginator-container {
@ -74,12 +71,12 @@ table {
 }

 .chip-failed {
-  background-color: #e87979 !important;
+  background-color: #f15d5d !important;
  color: white;
 }

 .chip-success {
-  background-color: #46c446 !important;
+  background-color: #32c532 !important;
  color: white;
 }

@ -93,26 +90,3 @@ table {
  color: white;
 }

-.status-progress-flex {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-button.cancel-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 5px;
-}
-
-.cancel-button {
-  color: red;
-  background-color: transparent;
-  border: none;
-  padding: 0;
-}
-
-.cancel-button mat-icon {
-  color: red;
-}
--- a/ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.html
@ -2,39 +2,29 @@
  <button mat-icon-button color="primary" (click)="iniciarTour()">
    <mat-icon>help</mat-icon>
  </button>
-
-  <div class="header-container-title">
-    <h2 joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'adminCommandsTitle' |
-      translate }}</h2>
-  </div>
-
+  <h2 class="title" joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'adminCommandsTitle' | translate }}</h2>
  <div class="images-button-row">
-    <button class="action-button" (click)="resetFilters()" joyrideStep="resetFiltersStep"
-      text="{{ 'resetFiltersStepText' | translate }}">
+    <button mat-flat-button color="primary" (click)="resetFilters()" joyrideStep="resetFiltersStep" text="{{ 'resetFiltersStepText' | translate }}">
      {{ 'resetFilters' | translate }}
    </button>
  </div>
 </div>

+<mat-divider class="divider"></mat-divider>
+
 <div class="search-container">
-  <mat-form-field appearance="fill" class="search-select" joyrideStep="clientSelectStep"
-    text="{{ 'clientSelectStepText' | translate }}">
-    <input type="text" matInput [formControl]="clientControl" [matAutocomplete]="clientAuto"
-      placeholder="{{ 'filterClientPlaceholder' | translate }}">
-    <mat-autocomplete #clientAuto="matAutocomplete" [displayWith]="displayFnClient"
-      (optionSelected)="onOptionClientSelected($event.option.value)">
+  <mat-form-field appearance="fill" class="search-select" joyrideStep="clientSelectStep" text="{{ 'clientSelectStepText' | translate }}">
+    <input type="text" matInput [formControl]="clientControl" [matAutocomplete]="clientAuto" placeholder="{{ 'selectClientPlaceholder' | translate }}">
+    <mat-autocomplete #clientAuto="matAutocomplete" [displayWith]="displayFnClient" (optionSelected)="onOptionClientSelected($event.option.value)">
      <mat-option *ngFor="let client of filteredClients | async" [value]="client">
        {{ client.name }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

-  <mat-form-field appearance="fill" class="search-select" joyrideStep="commandSelectStep"
-    text="{{ 'commandSelectStepText' | translate }}">
-    <input type="text" matInput [formControl]="commandControl" [matAutocomplete]="commandAuto"
-      placeholder="{{ 'filterCommandPlaceholder' | translate }}">
-    <mat-autocomplete #commandAuto="matAutocomplete" [displayWith]="displayFnCommand"
-      (optionSelected)="onOptionCommandSelected($event.option.value)">
+  <mat-form-field appearance="fill" class="search-select" joyrideStep="commandSelectStep" text="{{ 'commandSelectStepText' | translate }}">
+    <input type="text" matInput [formControl]="commandControl" [matAutocomplete]="commandAuto" placeholder="{{ 'selectCommandPlaceholder' | translate }}">
+    <mat-autocomplete #commandAuto="matAutocomplete" [displayWith]="displayFnCommand" (optionSelected)="onOptionCommandSelected($event.option.value)">
      <mat-option *ngFor="let command of filteredCommands | async" [value]="command">
        {{ command.name }}
      </mat-option>
@ -43,86 +33,59 @@

  <mat-form-field appearance="fill" class="search-boolean">
    <mat-label i18n="@@searchLabel">Estado</mat-label>
-    <mat-select [(ngModel)]="filters['status']" (selectionChange)="loadTraces()" placeholder="Seleccionar opción">
-      <mat-option [value]="undefined">Todos</mat-option>
+    <mat-select [(ngModel)]="filters['status']" (selectionChange)="loadTraces()" placeholder="Seleccionar opción" >
      <mat-option [value]="'failed'">Fallido</mat-option>
      <mat-option [value]="'pending'">Pendiente de ejecutar</mat-option>
      <mat-option [value]="'in-progress'">Ejecutando</mat-option>
      <mat-option [value]="'success'">Completado con éxito</mat-option>
-      <mat-option [value]="'cancelled'">Cancelado</mat-option>
    </mat-select>
  </mat-form-field>
 </div>

-<app-loading [isLoading]="loading"></app-loading>
+<div *ngIf="loading" class="loading-container">
+  <mat-spinner></mat-spinner>
+</div>

 <div *ngIf="!loading">
-  <table mat-table [dataSource]="traces" class="mat-elevation-z8" joyrideStep="tableStep"
-    text="{{ 'tableStepText' | translate }}">
+  <table mat-table [dataSource]="traces" class="mat-elevation-z8" joyrideStep="tableStep" text="{{ 'tableStepText' | translate }}">
    <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
      <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
      <td mat-cell *matCellDef="let trace">

-        <ng-container [ngSwitch]="column.columnDef">
-          <ng-container *ngSwitchCase="'status'">
-            <ng-container *ngIf="trace.status === 'in-progress' && trace.progress; else statusChip">
-              <div class="progress-container">
-                <mat-progress-bar class="example-margin" [mode]="mode" [value]="trace.progress" [bufferValue]="bufferValue">
-                </mat-progress-bar>
-                <span>{{trace.progress}}%</span>
-              </div>
-            </ng-container>
-            <ng-template #statusChip>
-              <div class="status-progress-flex">
-                <mat-chip [ngClass]="{
-                    'chip-failed': trace.status === 'failed',
-                    'chip-success': trace.status === 'success',
-                    'chip-pending': trace.status === 'pending',
-                    'chip-in-progress': trace.status === 'in-progress',
-                    'chip-cancelled': trace.status === 'cancelled'
-                  }">
-                  {{
-                    trace.status === 'failed' ? 'Fallido' :
-                      trace.status === 'in-progress' ? 'En ejecución' :
-                        trace.status === 'success' ? 'Finalizado con éxito' :
-                          trace.status === 'pending' ? 'Pendiente de ejecutar' :
-                            trace.status === 'cancelled' ? 'Cancelado' :
-                            trace.status
-                  }}
-                </mat-chip>
-                <button *ngIf="trace.status === 'in-progress' && trace.command === 'deploy-image'"
-                        mat-icon-button
-                        (click)="cancelTrace(trace)"
-                        class="cancel-button"
-                        matTooltip="Cancelar transmisión de imagen">
-                  <mat-icon>cancel</mat-icon>
-                </button>
-              </div>
-            </ng-template>
-          </ng-container>
-
-          <ng-container *ngSwitchCase="'input'">
-            <button mat-icon-button (click)="openInputModal(trace.input)">
-              <mat-icon>info</mat-icon>
-            </button>
-          </ng-container>
-
-          <ng-container *ngSwitchDefault>
-            {{ column.cell(trace) }}
-          </ng-container>
+        <ng-container *ngIf="column.columnDef === 'status'; else defaultCell">
+          <mat-chip [ngClass]="{
+              'chip-failed': trace.status === 'failed',
+              'chip-success': trace.status === 'success',
+              'chip-pending': trace.status === 'pending',
+              'chip-in-progress': trace.status === 'in-progress'
+            }">
+            {{
+              trace.status === 'failed' ? 'Fallido' :
+                trace.status === 'success' ? 'Finalizado con éxito' :
+                  trace.status === 'pending' ? 'Pendiente de ejecutar' :
+                    trace.status === 'in-progress' ? 'Ejecutando' :
+                      trace.status
+            }}
+          </mat-chip>
        </ng-container>

+        <ng-template #defaultCell>
+          {{ column.cell(trace) }}
+        </ng-template>
+
      </td>
    </ng-container>

-
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
 </div>

 <div class="paginator-container" joyrideStep="paginationStep" text="{{ 'paginationStepText' | translate }}">
-  <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
-    (page)="onPageChange($event)">
+  <mat-paginator [length]="length"
+                 [pageSize]="itemsPerPage"
+                 [pageIndex]="page"
+                 [pageSizeOptions]="pageSizeOptions"
+                 (page)="onPageChange($event)">
  </mat-paginator>
 </div>
--- a/ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.ts
+++ b/ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.ts
@ -1,16 +1,10 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable, forkJoin } from 'rxjs';
+import { Observable } from 'rxjs';
 import { FormControl } from '@angular/forms';
 import { map, startWith } from 'rxjs/operators';
 import { DatePipe } from '@angular/common';
 import { JoyrideService } from 'ngx-joyride';
-import { MatDialog } from "@angular/material/dialog";
-import { InputDialogComponent } from "./input-dialog/input-dialog.component";
-import { ProgressBarMode } from '@angular/material/progress-bar';
-import { DeleteModalComponent } from "../../../../shared/delete_modal/delete-modal/delete-modal.component";
-import { ToastrService } from "ngx-toastr";
-import { ConfigService } from '@services/config.service';

@Component({
  selector: 'app-task-logs',
@ -18,8 +12,7 @@ import { ConfigService } from '@services/config.service';
  styleUrls: ['./task-logs.component.css']
 })
 export class TaskLogsComponent implements OnInit {
-  baseUrl: string;
-  mercureUrl: string;
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  traces: any[] = [];
  groupedTraces: any[] = [];
  commands: any[] = [];
@ -30,9 +23,6 @@ export class TaskLogsComponent implements OnInit {
  loading: boolean = true;
  pageSizeOptions: number[] = [10, 20, 30, 50];
  datePipe: DatePipe = new DatePipe('es-ES');
-  mode: ProgressBarMode = 'buffer';
-  progress = 0;
-  bufferValue = 0;

  columns = [
    {
@ -60,16 +50,6 @@ export class TaskLogsComponent implements OnInit {
      header: 'Hilo de trabajo',
      cell: (trace: any) => `${trace.jobId}`
    },
-    {
-      columnDef: 'input',
-      header: 'Input',
-      cell: (trace: any) => `${trace.input}`
-    },
-    {
-      columnDef: 'output',
-      header: 'Logs',
-      cell: (trace: any) => `${trace.output}`
-    },
    {
      columnDef: 'executedAt',
      header: 'Programación de ejecución',
@ -90,20 +70,12 @@ export class TaskLogsComponent implements OnInit {
  commandControl = new FormControl();

  constructor(private http: HttpClient,
-    private joyrideService: JoyrideService,
-    private dialog: MatDialog,
-    private cdr: ChangeDetectorRef,
-    private configService: ConfigService,
-    private toastService: ToastrService
-  ) {
-    this.baseUrl = this.configService.apiUrl;
-    this.mercureUrl = this.configService.mercureUrl;
-  }
+    private joyrideService: JoyrideService) {}

  ngOnInit(): void {
    this.loadTraces();
    this.loadCommands();
-    //this.loadClients();
+    this.loadClients();
    this.filteredCommands = this.commandControl.valueChanges.pipe(
      startWith(''),
      map(value => (typeof value === 'string' ? value : value?.name)),
@ -114,39 +86,8 @@ export class TaskLogsComponent implements OnInit {
      map(value => (typeof value === 'string' ? value : value?.name)),
      map(name => (name ? this._filterClients(name) : this.clients.slice()))
    );
-
-    const eventSource = new EventSource(`${this.mercureUrl}?topic=`
-      + encodeURIComponent(`traces`));
-
-    eventSource.onmessage = (event) => {
-      const data = JSON.parse(event.data);
-      if (data && data['@id']) {
-        this.updateTracesStatus(data['@id'], data.status, data.progress);
-      }
-    }
  }

-  private updateTracesStatus(clientUuid: string, newStatus: string, progress: Number): void {
-    const traceIndex = this.traces.findIndex(trace => trace['@id'] === clientUuid);
-    if (traceIndex !== -1) {
-      const updatedTraces = [...this.traces];
-
-      updatedTraces[traceIndex] = {
-        ...updatedTraces[traceIndex],
-        status: newStatus,
-        progress: progress
-      };
-
-      this.traces = updatedTraces;
-      this.cdr.detectChanges();
-
-      console.log(`Estado actualizado para la traza ${clientUuid}: ${newStatus}`);
-    } else {
-      console.warn(`Traza con UUID ${clientUuid} no encontrado en la lista.`);
-    }
-  }
-
-
  private _filterClients(name: string): any[] {
    const filterValue = name.toLowerCase();
    return this.clients.filter(client => client.name.toLowerCase().includes(filterValue));
@ -175,41 +116,10 @@ export class TaskLogsComponent implements OnInit {
    this.loadTraces();
  }

-  openInputModal(inputData: any): void {
-    this.dialog.open(InputDialogComponent, {
-      width: '700px',
-      data: { input: inputData }
-    });
-  }
-
-  cancelTrace(trace: any): void {
-    this.dialog.open(DeleteModalComponent, {
-      width: '300px',
-      data: { name: trace.jobId },
-    }).afterClosed().subscribe((result) => {
-      if (result) {
-        this.http.post(`${this.baseUrl}/traces/server/${trace.uuid}/cancel`, {}).subscribe({
-          next: () => {
-            this.toastService.success('Transmision de imagen cancelada');
-            this.loadTraces();
-          },
-          error: (error) => {
-            this.toastService.error(error.error['hydra:description']);
-            console.error(error.error['hydra:description']);
-          }
-        });
-      }
-    });
-  }
-
  loadTraces(): void {
    this.loading = true;
    const url = `${this.baseUrl}/traces?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`;
-    const params = { ...this.filters };
-    if (params['status'] === undefined) {
-      delete params['status'];
-    }
-    this.http.get<any>(url, { params }).subscribe(
+    this.http.get<any>(url, { params: this.filters }).subscribe(
      (data) => {
        this.traces = data['hydra:member'];
        this.length = data['hydra:totalItems'];
@ -241,20 +151,10 @@ export class TaskLogsComponent implements OnInit {
    this.loading = true;
    this.http.get<any>(`${this.baseUrl}/clients?&page=1&itemsPerPage=10000`).subscribe(
      response => {
-        const clientIds = response['hydra:member'].map((client: any) => client['@id']);
-        const clientDetailsRequests: Observable<any>[] = clientIds.map((id: string) => this.http.get<any>(`${this.baseUrl}${id}`));
-        forkJoin(clientDetailsRequests).subscribe(
-          (clients: any[]) => {
-            this.clients = clients;
-            this.loading = false;
-          },
-          (error: any) => {
-            console.error('Error fetching client details:', error);
-            this.loading = false;
-          }
-        );
+        this.clients = response['hydra:member'];
+        this.loading = false;
      },
-      (error: any) => {
+      error => {
        console.error('Error fetching clients:', error);
        this.loading = false;
      }
@ -294,12 +194,12 @@ export class TaskLogsComponent implements OnInit {
  iniciarTour(): void {
    this.joyrideService.startTour({
      steps: [
-        'titleStep',
-        'resetFiltersStep',
-        'clientSelectStep',
-        'commandSelectStep',
-        'tableStep',
-        'paginationStep'
+      'titleStep',
+      'resetFiltersStep',
+      'clientSelectStep',
+      'commandSelectStep',
+      'tableStep',
+      'paginationStep'
      ],
      showPrevButton: true,
      themeColor: '#3f51b5'
--- a/ogWebconsole/src/app/components/commands/main-commands/commands.component.css
+++ b/ogWebconsole/src/app/components/commands/main-commands/commands.component.css
@ -1,12 +1,11 @@
-.header-container-title {
-  flex-grow: 1;
-  text-align: left;
-  margin-left: 1em;
+.title {
+  font-size: 24px;
 }

-.command-button-row {
+.calendar-button-row {
  display: flex;
-  gap: 15px;
+  justify-content: flex-start;
+  margin-top: 16px;
 }

 .divider {
@ -28,6 +27,7 @@

 table {
  width: 100%;
+  margin-top: 50px;
 }

 .search-container  {
@ -35,8 +35,8 @@ table {
  justify-content: space-between;
  align-items: center;
  width: 100%;
+  padding: 0 5px;
  box-sizing: border-box;
-  margin: 1.5rem 0rem 1.5rem 0rem;
 }

 .search-string {
@ -53,8 +53,7 @@ table {
  display: flex;
  justify-content: space-between;
  align-items: center;
-  padding: 10px 10px;
-  border-bottom: 1px solid #ddd;
+  padding: 10px;
 }

 .mat-elevation-z8 {
--- a/ogWebconsole/src/app/components/commands/main-commands/commands.component.html
+++ b/ogWebconsole/src/app/components/commands/main-commands/commands.component.html
@ -2,14 +2,14 @@
  <button mat-icon-button color="primary" (click)="iniciarTour()">
    <mat-icon>help</mat-icon>
  </button>
-  <div class="header-container-title">
-    <h2 joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'CommandsTitle' | translate }}</h2>
-  </div>
+  <h2 class="title" joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'CommandsTitle' | translate }}</h2>
  <div class="command-button-row" joyrideStep="addCommandStep" text="{{ 'addCommandStepText' | translate }}">
-    <button class="action-button" (click)="openCreateCommandModal()">{{ 'addCommand' | translate }}</button>
+    <button mat-flat-button color="primary" (click)="openCreateCommandModal()">{{ 'addCommand' | translate }}</button>
  </div>
 </div>

+<mat-divider class="divider"></mat-divider>
+
 <div class="search-container" joyrideStep="searchStep" text="{{ 'searchStepText' | translate }}">
  <mat-form-field appearance="fill" class="search-string">
    <mat-label>{{ 'searchCommandLabel' | translate }}</mat-label>
@ -20,7 +20,7 @@
 </div>

 <div *ngIf="loading" class="loading-container" joyrideStep="loadingStep" text="{{ 'loadingStepText' | translate }}">
-  <app-loading [isLoading]="loading"></app-loading>
+  <mat-spinner></mat-spinner>
 </div>

 <div *ngIf="!loading">
@ -31,11 +31,9 @@
        <ng-container *ngIf="column.columnDef !== 'readOnly'">
          {{ column.cell(command) }}
        </ng-container>
-
        <ng-container *ngIf="column.columnDef === 'readOnly'">
-          <mat-icon [color]="command[column.columnDef] ? 'primary' : 'warn'">
-            {{ command[column.columnDef] ? 'check_circle' : 'cancel' }}
-          </mat-icon>
+          <mat-chip *ngIf="command.readOnly" class="mat-chip-readonly-true"><mat-icon style="color:white;">check</mat-icon></mat-chip>
+          <mat-chip *ngIf="!command.readOnly" class="mat-chip-readonly-false"><mat-icon style="color:white;">close</mat-icon></mat-chip>
        </ng-container>
      </td>
    </ng-container>
@ -43,6 +41,7 @@
    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef style="text-align: center;">{{ 'columnActions' | translate }}</th>
      <td mat-cell *matCellDef="let command" style="text-align: center;" joyrideStep="actionsStep" text="{{ 'actionsStepText' | translate }}">
+        <button mat-icon-button color="info" (click)="executeCommand($event, command)"><mat-icon>play_arrow</mat-icon></button>
        <button mat-icon-button color="info" (click)="viewDetails($event, command)"><mat-icon>visibility</mat-icon></button>
        <button mat-icon-button color="primary" [disabled]="command.readOnly" (click)="editCommand($event, command)"><mat-icon>edit</mat-icon></button>
        <button mat-icon-button color="warn" [disabled]="command.readOnly" (click)="deleteCommand($event, command)"><mat-icon>delete</mat-icon></button>
--- a/ogWebconsole/src/app/components/commands/main-commands/commands.component.spec.ts
+++ b/ogWebconsole/src/app/components/commands/main-commands/commands.component.spec.ts
@ -19,21 +19,14 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { TranslateModule } from '@ngx-translate/core';
 import { JoyrideModule } from 'ngx-joyride';
-import { LoadingComponent } from '../../../shared/loading/loading.component';
-import { ConfigService } from '@services/config.service';

 describe('CommandsComponent', () => {
  let component: CommandsComponent;
  let fixture: ComponentFixture<CommandsComponent>;

  beforeEach(async () => {
-    const mockConfigService = {
-      apiUrl: 'http://mock-api-url',
-      mercureUrl: 'http://mock-mercure-url'
-    };
-
    await TestBed.configureTestingModule({
-      declarations: [CommandsComponent, LoadingComponent],
+      declarations: [CommandsComponent],
      imports: [
        HttpClientTestingModule,
        ToastrModule.forRoot(),
@ -59,8 +52,7 @@ describe('CommandsComponent', () => {
      ],
      providers: [
        { provide: MatDialogRef, useValue: {} }, 
-        { provide: MAT_DIALOG_DATA, useValue: {} },
-        { provide: ConfigService, useValue: mockConfigService }
+        { provide: MAT_DIALOG_DATA, useValue: {} } 
      ]
      
    }).compileComponents();
--- a/ogWebconsole/src/app/components/commands/main-commands/commands.component.ts
+++ b/ogWebconsole/src/app/components/commands/main-commands/commands.component.ts
@ -7,7 +7,7 @@ import { CreateCommandComponent } from './create-command/create-command.componen
 import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
 import { MatTableDataSource } from '@angular/material/table';
 import { DatePipe } from '@angular/common';
-import { ConfigService } from '@services/config.service';
+import { ExecuteCommandComponent } from './execute-command/execute-command.component';
 import { JoyrideService } from 'ngx-joyride';

@Component({
@ -16,8 +16,7 @@ import { JoyrideService } from 'ngx-joyride';
  styleUrls: ['./commands.component.css']
 })
 export class CommandsComponent implements OnInit {
-  baseUrl: string;
-  private apiUrl: string;
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  dataSource = new MatTableDataSource<any>();
  filters: { [key: string]: string | boolean } = {};
  length: number = 0;
@ -49,12 +48,10 @@ export class CommandsComponent implements OnInit {
    }
  ];
  displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
+  private apiUrl = `${this.baseUrl}/commands`;

-  constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService,
-    private joyrideService: JoyrideService, private configService: ConfigService) {
-    this.baseUrl = this.configService.apiUrl;
-    this.apiUrl = `${this.baseUrl}/commands`;
-  }
+  constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService, 
+    private joyrideService: JoyrideService) {}

  ngOnInit(): void {
    this.search();
@ -85,14 +82,14 @@ export class CommandsComponent implements OnInit {

  openCreateCommandModal(): void {
    this.dialog.open(CreateCommandComponent, {
-      width: '800px',
+      width: '600px',
    }).afterClosed().subscribe(() => this.search());
  }

  editCommand(event: MouseEvent, command: any): void {
    event.stopPropagation();
    this.dialog.open(CreateCommandComponent, {
-      width: '800px',
+      width: '600px',
      data: command['@id']
    }).afterClosed().subscribe(() => this.search());
  }
@ -117,6 +114,19 @@ export class CommandsComponent implements OnInit {
    });
  }

+  executeCommand(event: MouseEvent, command: any): void {
+    this.dialog.open(ExecuteCommandComponent, {
+      width: '50%',
+      data: { commandData: command }
+    }).afterClosed().subscribe((result) => {
+      if (result) {
+        console.log('Comando ejecutado con éxito');
+      } else {
+        console.log('Ejecución de comando cancelada');
+      }
+    });
+  }
+
  onPageChange(event: any): void {
    this.page = event.pageIndex;
    this.itemsPerPage = event.pageSize;
@ -137,5 +147,5 @@ export class CommandsComponent implements OnInit {
      themeColor: '#3f51b5'
    });
  }
-
+  
 }
--- a/ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.css
+++ b/ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.css
@ -7,6 +7,12 @@

 .form-group {
  margin-top: 20px;
+  margin-bottom: 26px;
+}
+
+.full-width {
+  width: 100%;
+  margin-bottom: 16px;
 }

 .additional-form {
@ -52,20 +58,3 @@
  cursor: pointer;
 }

-.action-container {
-  display: flex;
-  justify-content: flex-end;
-  gap: 1em;
-  padding: 1.5em;
-}
-
-.checkbox-with-hint {
-  display: flex;
-  flex-direction: column;
-}
-
-.hint-text {
-  font-size: 12px;
-  color: gray;
-  margin-left: 40px;
-}
--- a/ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.html
+++ b/ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.html
@ -13,13 +13,7 @@

    <div class="checkbox-group">
      <mat-checkbox formControlName="readOnly">{{ 'readOnlyLabel' | translate }}</mat-checkbox>
-
      <mat-checkbox formControlName="enabled">{{ 'enabledLabel' | translate }}</mat-checkbox>
-
-      <div class="checkbox-with-hint">
-        <mat-checkbox formControlName="parameters">{{ 'parameters' | translate }}</mat-checkbox>
-        <span class="hint-text">Si se selecciona esta opción los parámetros deben indicarse en el script con el símbolo &#64;.</span>
-      </div>
    </div>

    <mat-form-field appearance="fill" class="full-width">
@ -29,7 +23,7 @@
  </form>
 </mat-dialog-content>

-<mat-dialog-actions class="action-container">
-  <button class="ordinary-button" (click)="onCancel($event)">{{ 'buttonCancel' | translate }}</button>
-  <button class="submit-button" (click)="onSubmit()" cdkFocusInitial>{{ 'buttonSave' | translate }}</button>
+<mat-dialog-actions align="end">
+  <button mat-button (click)="onCancel($event)">{{ 'buttonCancel' | translate }}</button>
+  <button mat-button (click)="onSubmit()" cdkFocusInitial>{{ 'buttonSave' | translate }}</button>
 </mat-dialog-actions>
--- a/ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.spec.ts
+++ b/ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.spec.ts
@ -13,18 +13,12 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatButtonModule } from '@angular/material/button';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateModule } from '@ngx-translate/core';
-import { ConfigService } from '@services/config.service';

 describe('CreateCommandComponent', () => {
  let component: CreateCommandComponent;
  let fixture: ComponentFixture<CreateCommandComponent>;

  beforeEach(async () => {
-    const mockConfigService = {
-      apiUrl: 'http://mock-api-url',
-      mercureUrl: 'http://mock-mercure-url'
-    };
-
    await TestBed.configureTestingModule({
      declarations: [CreateCommandComponent],
      imports: [
@ -51,8 +45,7 @@ describe('CreateCommandComponent', () => {
        {
          provide: MAT_DIALOG_DATA,
          useValue: {}
-        },
-        { provide: ConfigService, useValue: mockConfigService }
+        }
      ]
    }).compileComponents();
  });
--- a/ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.ts
+++ b/ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.ts
@ -1,19 +1,19 @@
-import {Component, Inject, OnInit} from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { HttpClient } from '@angular/common/http';
 import { ToastrService } from 'ngx-toastr';
-import { DataService } from "../data.service";
-import { ConfigService } from "@services/config.service";
+import {DataService} from "../data.service";

@Component({
  selector: 'app-create-command',
  templateUrl: './create-command.component.html',
  styleUrls: ['./create-command.component.css']
 })
-export class CreateCommandComponent implements OnInit{
-  baseUrl: string;
+export class CreateCommandComponent {
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  createCommandForm: FormGroup<any>;
+  private apiUrl = `${this.baseUrl}/commands`;
  commandId: string | null = null;

  constructor(
@ -21,16 +21,13 @@ export class CreateCommandComponent implements OnInit{
    private http: HttpClient,
    public dialogRef: MatDialogRef<CreateCommandComponent>,
    private toastService: ToastrService,
-    private configService: ConfigService,
    private dataService: DataService,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
-    this.baseUrl = this.configService.apiUrl;
    this.createCommandForm = this.fb.group({
      name: ['', Validators.required],
      script: [''],
      readOnly: [false],
-      parameters: [false],
      enabled: [true],
      comments: [''],
    });
@ -45,12 +42,12 @@ export class CreateCommandComponent implements OnInit{
  load(): void {
    this.dataService.getCommand(this.data).subscribe({
      next: (response) => {
+        console.log(response);
        this.createCommandForm = this.fb.group({
          name: [response.name, Validators.required],
          notes: [response.notes],
          script: [response.script],
          readOnly: [response.readOnly],
-          parameters: [response.parameters],
          enabled: [response.enabled],
        });
        this.commandId = response['@id'];
@ -85,6 +82,7 @@ export class CreateCommandComponent implements OnInit{
          },
          (error) => {
            this.toastService.error(error['error']['hydra:description']);
+            console.error('Error al editar el comando', error);
          }
        );
      } else {
@ -95,6 +93,7 @@ export class CreateCommandComponent implements OnInit{
          },
          (error) => {
            this.toastService.error(error['error']['hydra:description']);
+            console.error('Error al añadir comando', error);
          }
        );
      }
--- a/ogWebconsole/src/app/components/commands/main-commands/data.service.ts
+++ b/ogWebconsole/src/app/components/commands/main-commands/data.service.ts
@ -1,6 +1,6 @@
-import { ConfigService } from '@services/config.service';
+
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpParams } from '@angular/common/http';
+import {HttpClient, HttpParams} from '@angular/common/http';
 import { Observable, throwError } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';

@ -8,16 +8,10 @@ import { catchError, map } from 'rxjs/operators';
  providedIn: 'root'
 })
 export class DataService {
-  baseUrl: string;
-  private apiUrl: string;
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
+  private apiUrl = `${this.baseUrl}/commands?page=1&itemsPerPage=1000`;

-  constructor(
-    private http: HttpClient,
-    private configService: ConfigService
-  ) {
-    this.baseUrl = this.configService.apiUrl;
-    this.apiUrl = `${this.baseUrl}/commands?page=1&itemsPerPage=1000`;
-  }
+  constructor(private http: HttpClient) {}

  getCommands(filters: { [key: string]: string }): Observable<{ totalItems: any; data: any }> {
    const params = new HttpParams({ fromObject: filters });
--- a/ogWebconsole/src/app/components/commands/main-commands/detail-command/command-detail.component.ts
+++ b/ogWebconsole/src/app/components/commands/main-commands/detail-command/command-detail.component.ts
@ -4,7 +4,6 @@ import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dial
 import { CreateCommandComponent } from '../create-command/create-command.component';
 import { HttpClient } from '@angular/common/http';
 import { ToastrService } from 'ngx-toastr';
-import { ConfigService } from '@services/config.service';

@Component({
  selector: 'app-command-detail',
@ -12,7 +11,7 @@ import { ConfigService } from '@services/config.service';
  styleUrls: ['./command-detail.component.css']
 })
 export class CommandDetailComponent implements OnInit {
-  baseUrl: string;
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  form!: FormGroup;
  clients: any[] = [];
  showClientSelect = false;
@ -21,15 +20,12 @@ export class CommandDetailComponent implements OnInit {

  constructor(
    private fb: FormBuilder,
-    private configService: ConfigService,
    private http: HttpClient,
    public dialogRef: MatDialogRef<CommandDetailComponent>,
    private dialog: MatDialog,
    private toastService: ToastrService,
    @Inject(MAT_DIALOG_DATA) public data: any
-  ) {
-    this.baseUrl = this.configService.apiUrl;
-  }
+  ) { }

  ngOnInit(): void {
    this.form = this.fb.group({
@ -56,7 +52,7 @@ export class CommandDetailComponent implements OnInit {

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
-        this.toastService.success('Comando editado');
+        this.toastService.success('Comando editado' );
        this.data.command = result;
      }
    });
--- a/Show More
+++ b/Show More