diff --git a/ogWebconsole/package-lock.json b/ogWebconsole/package-lock.json
index 05f3952..795d43e 100644
--- a/ogWebconsole/package-lock.json
+++ b/ogWebconsole/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "og-webconsole",
-  "version": "0.0.0",
+  "version": "0.5.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "og-webconsole",
-      "version": "0.0.0",
+      "version": "0.5.0",
       "dependencies": {
         "@angular/animations": "^18.0.0",
         "@angular/cdk": "~18.0.0",
@@ -20,6 +20,7 @@
         "@angular/router": "^18.0.0",
         "@swimlane/ngx-charts": "^20.5.0",
         "jwt-decode": "^4.0.0",
+        "ngx-joyride": "^2.5.0",
         "ngx-toastr": "^19.0.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
@@ -11228,6 +11229,18 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/ngx-joyride": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/ngx-joyride/-/ngx-joyride-2.5.0.tgz",
+      "integrity": "sha512-C/J8C4uWZjKl9aMmRBt9egVjuIpwWFplJgBZDl1EfqNVTJkdEC51nt9DpAOuDwOgkbArhJ9sZIk3bZT4vkud/w==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=8.2.14",
+        "@angular/core": ">=8.2.14"
+      }
+    },
     "node_modules/ngx-toastr": {
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-19.0.0.tgz",
diff --git a/ogWebconsole/package.json b/ogWebconsole/package.json
index d769ca3..aa70969 100644
--- a/ogWebconsole/package.json
+++ b/ogWebconsole/package.json
@@ -22,6 +22,7 @@
     "@angular/router": "^18.0.0",
     "@swimlane/ngx-charts": "^20.5.0",
     "jwt-decode": "^4.0.0",
+    "ngx-joyride": "^2.5.0",
     "ngx-toastr": "^19.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts
index 216fb55..18f6ec4 100644
--- a/ogWebconsole/src/app/app.module.ts
+++ b/ogWebconsole/src/app/app.module.ts
@@ -120,6 +120,7 @@ import { RepositoriesComponent } from './components/repositories/repositories.co
 import { CreateRepositoryComponent } from './components/repositories/create-repository/create-repository.component';
 import { ExecuteCommandComponent } from './components/commands/main-commands/execute-command/execute-command.component';
 import { ExecuteCommandOuComponent } from './components/groups/shared/execute-command-ou/execute-command-ou.component';
+import { JoyrideModule } from 'ngx-joyride';
 @NgModule({
   declarations: [
     AppComponent,
@@ -225,6 +226,7 @@ import { ExecuteCommandOuComponent } from './components/groups/shared/execute-co
         MatDatepickerModule,
         MatNativeDateModule,
         MatSliderModule,
+        JoyrideModule.forRoot(),
         ToastrModule.forRoot(
             {
                 timeOut: 5000,
diff --git a/ogWebconsole/src/app/components/calendar/calendar.component.html b/ogWebconsole/src/app/components/calendar/calendar.component.html
index a776285..d26abdb 100644
--- a/ogWebconsole/src/app/components/calendar/calendar.component.html
+++ b/ogWebconsole/src/app/components/calendar/calendar.component.html
@@ -1,12 +1,17 @@
 <div class="header-container">
-  <h2 class="title" i18n="@@adminImagesTitle">Administrar calendarios</h2>
+  <button mat-icon-button color="primary" (click)="iniciarTour()">
+    <mat-icon>help</mat-icon>
+  </button>
+  <h2 joyrideStep="titleStep" text="En esta pantalla, puedes gestionar los calendarios de los equipos remotos conectados con el servicio UDS"  class="title" i18n="@@adminImagesTitle">Administrar calendarios</h2>
   <div class="calendar-button-row">
-    <button mat-flat-button color="primary" (click)="addImage()">Añadir calendario</button>
+    
+    <button joyrideStep="addButtonStep" text="Haz clic aquí para añadir un nuevo calendario." mat-flat-button color="primary" (click)="addImage()">Añadir calendario</button>
   </div>
 </div>
 <mat-divider class="divider"></mat-divider>
+
 <div class="search-container">
-  <mat-form-field appearance="fill" class="search-string">
+  <mat-form-field joyrideStep="searchStep" text="Utiliza esta barra de búsqueda para filtrar los calendarios existentes." appearance="fill" class="search-string">
     <mat-label i18n="@@searchLabel">Buscar nombre de calendario</mat-label>
     <input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" (keyup.enter)="search()" i18n-placeholder="@@searchPlaceholder">
     <mat-icon matSuffix>search</mat-icon>
@@ -19,7 +24,7 @@
 </div>
 
 <div *ngIf="!loading">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep" text="Aquí se muestran los calendarios existentes con sus características y configuraciones.">
     <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
       <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
       <td mat-cell *matCellDef="let image" >
@@ -35,7 +40,7 @@
       </td>
     </ng-container>
 
-    <ng-container matColumnDef="actions">
+    <ng-container matColumnDef="actions" joyrideStep="actionsStep" text="Accede a las acciones disponibles para cada calendario aquí.">
       <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
       <td mat-cell *matCellDef="let calendar" style="text-align: center;">
         <button mat-icon-button color="primary" (click)="editCalendar(calendar)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
diff --git a/ogWebconsole/src/app/components/calendar/calendar.component.ts b/ogWebconsole/src/app/components/calendar/calendar.component.ts
index cc686b5..cbfb249 100644
--- a/ogWebconsole/src/app/components/calendar/calendar.component.ts
+++ b/ogWebconsole/src/app/components/calendar/calendar.component.ts
@@ -8,6 +8,7 @@ import { ToastrService } from "ngx-toastr";
 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';
 
 @Component({
   selector: 'app-calendar',
@@ -51,14 +52,14 @@ 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 toastService: ToastrService,
+    private joyrideService: JoyrideService
   ) {}
 
   ngOnInit(): void {
@@ -71,7 +72,6 @@ export class CalendarComponent implements OnInit {
     });
 
     dialogRef.afterClosed().subscribe(result => {
-      console.log('The dialog was closed');
       this.search();
     });
   }
@@ -84,24 +84,21 @@ export class CalendarComponent implements OnInit {
         this.loading = false;
       },
       error => {
-        console.error('Error fetching og lives', error);
+        console.error('Error fetching calendars', error);
         this.loading = false;
       }
     );
   }
 
   sync(calendar: any): void {
-    console.log('Syncing calendars');
     this.syncUds = true;
     this.http.post(`${this.apiUrl}/${calendar.uuid}/sync-uds`, {}).subscribe({
       next: () => {
-        console.log('Calendars synced successfully');
         this.toastService.success('Calendarios sincronizados correctamente');
         this.search();
         this.syncUds = false;
       },
       error: (error) => {
-        console.error('Error al sincronizar los calendarios:', error);
         this.toastService.error(error.error['hydra:description']);
         this.syncUds = false;
       }
@@ -133,16 +130,13 @@ export class CalendarComponent implements OnInit {
 
         this.http.delete(apiUrl).subscribe({
           next: () => {
-            console.log('Calendar deleted successfully');
             this.search();
             this.toastService.success('Calendar deleted successfully');
           },
-          error: (error) => {
+          error: () => {
             this.toastService.error('Error deleting calendar');
           }
         });
-      } else {
-        console.log('calendar deletion cancelled');
       }
     });
   }
@@ -155,8 +149,7 @@ export class CalendarComponent implements OnInit {
         this.length = response['hydra:totalItems'];
         this.loading = false;
       },
-      error: (error) => {
-        console.error('Error al cargar las imágenes:', error);
+      error: () => {
         this.loading = false;
       }
     });
@@ -167,4 +160,12 @@ export class CalendarComponent implements OnInit {
     this.itemsPerPage = event.pageSize;
     this.applyFilter();
   }
+
+  iniciarTour(): void {
+    this.joyrideService.startTour({
+      steps: ['titleStep', 'addButtonStep', 'searchStep', 'tableStep', 'actionsStep'],
+      showPrevButton: true,
+      themeColor: '#3f51b5' 
+    });
+  }
 }
diff --git a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css
index 377363e..b7adc08 100644
--- a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css
+++ b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css
@@ -21,7 +21,11 @@
 }
 
 .header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   height: 100px;
+  padding: 10px;
 }
 
 .unidad-card, .elements-card {
diff --git a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html
index 9817a5f..ff38ecc 100644
--- a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html
+++ b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html
@@ -1,7 +1,12 @@
-<h2 class="title" i18n="@@searchTitle">Búsqueda avanzada</h2>
 
+<div class="header-container">
+<h2 class="title" i18n="@@searchTitle" joyrideStep="title2Step" text="Aquí puedes realizar una búsqueda avanzada.">Búsqueda avanzada</h2>
+<button mat-icon-button color="primary" (click)="iniciarTour()">
+  <mat-icon>help</mat-icon>
+</button>
+</div>
 <div class="container">
-  <div class="header">
+  <div class="header" joyrideStep="filterSelectionStep" text="Selecciona entre los filtros guardados para ajustar los resultados de la búsqueda.">
     <mat-form-field>
       <mat-label i18n="@@selectFilterLabel">Seleccione filtro</mat-label>
       <mat-select (selectionChange)="loadSelectedFilter($event.value)">
@@ -14,7 +19,7 @@
 
   <mat-divider class="divider"></mat-divider>
 
-  <div class="view-mode-buttons">
+  <div class="view-mode-buttons" joyrideStep="viewModeStep" text="Elige cómo quieres ver los resultados: en cuadrícula o en lista.">
     <button mat-button (click)="changeViewMode('grid')" [class.active]="viewMode === 'grid'">
       <mat-icon>grid_view</mat-icon> Cuadrícula
     </button>
@@ -24,7 +29,7 @@
   </div>
 
   <div class="main-content">
-    <div class="filters">
+    <div class="filters" joyrideStep="filtersStep" text="Aplica filtros específicos para encontrar los resultados exactos que necesitas.">
       <mat-form-field>
         <mat-label i18n="@@selectOptionLabel">Selecciona una opción</mat-label>
         <mat-select [(value)]="selectedFilter1" (selectionChange)="applyFilter()">
@@ -38,13 +43,13 @@
         <input matInput placeholder="Unidad organizativa" (input)="applyFilter()" [(ngModel)]="filterName" i18n-placeholder="@@namePlaceholder">
       </mat-form-field>
 
-      <button mat-raised-button color="primary" (click)="toggleSelectAll()">Seleccionar/Deseleccionar Todos</button>
-      <button mat-raised-button color="primary" (click)="saveFilters()" i18n="@@saveFiltersButton">Guardar Filtros</button>
-      <button mat-raised-button color="accent" (click)="sendActions()" i18n="@@sendFiltersButton" [disabled]="selectedElements.length === 0">Enviar Acción</button>
-      <button mat-flat-button color="primary" [disabled]="selectedElements.length === 0" (click)="onPxeBootFile()">Añadir fichero PXE</button>
+      <button mat-raised-button color="primary" (click)="toggleSelectAll()" joyrideStep="selectAllStep" text="Selecciona o deselecciona todos los elementos de los resultados.">Seleccionar/Deseleccionar Todos</button>
+      <button mat-raised-button color="primary" (click)="saveFilters()" i18n="@@saveFiltersButton" joyrideStep="saveFiltersStep" text="Guarda tus filtros seleccionados para usarlos en el futuro.">Guardar Filtros</button>
+      <button mat-raised-button color="accent" (click)="sendActions()" i18n="@@sendFiltersButton" [disabled]="selectedElements.length === 0" joyrideStep="sendActionStep" text="Envía una acción a los elementos seleccionados.">Enviar Acción</button>
+      <button mat-flat-button color="primary" [disabled]="selectedElements.length === 0" (click)="onPxeBootFile()" joyrideStep="addPxeStep" text="Añade un archivo PXE a los elementos seleccionados.">Añadir fichero PXE</button>
     </div>
 
-    <div class="results">
+    <div class="results" joyrideStep="resultsStep" text="Aquí verás los resultados de tu búsqueda filtrada.">
       <ng-container *ngIf="filteredResults && filteredResults.length > 0; else noResults">
         <ng-container *ngIf="viewMode === 'grid'">
           <mat-grid-list cols="8" rowHeight="1:1">
@@ -80,7 +85,7 @@
           </div>
         </ng-container>
 
-        <div class="paginator-container">
+        <div class="paginator-container" joyrideStep="paginationStep" text="Usa el paginador para navegar entre los resultados.">
           <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)">
           </mat-paginator>
         </div>
diff --git a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.ts b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.ts
index fcf0bfe..59a2190 100644
--- a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.ts
+++ b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.ts
@@ -23,6 +23,7 @@ import { Router } from '@angular/router';
 import {
   CreatePxeBootFileComponent
 } from "../../../ogboot/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component";
+import { JoyrideService } from 'ngx-joyride';
 
 
 @Component({
@@ -69,7 +70,8 @@ export class AdvancedSearchComponent {
   private toastService: ToastrService,
   private _bottomSheet: MatBottomSheet,
   private http: HttpClient,
-  private router: Router
+  private router: Router,
+  private joyrideService: JoyrideService
   ) {}
 
   ngOnInit(): void {
@@ -436,4 +438,23 @@ export class AdvancedSearchComponent {
     }
   }
 
+  iniciarTour(): void {
+    this.joyrideService.startTour({
+      steps: [
+      'title2Step',
+      'filterSelectionStep',
+      'viewModeStep',
+      'filtersStep',
+      'selectAllStep',
+      'saveFiltersStep',
+      'sendActionStep',
+      'addPxeStep',
+      'resultsStep',
+      'paginationStep'
+      ],
+      showPrevButton: true,
+      themeColor: '#3f51b5'
+    });
+  }
+  
 }
diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css
index 12e2d46..0028581 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@@ -194,8 +194,7 @@ mat-spinner {
 .result-card {
   width: 100%;
   max-width: 250px;
-  height: 250px; /* Fijo para mantener la forma cuadrada */
-}
+  height: 250px; 
 
 .paginator-container {
   display: flex;
@@ -210,3 +209,7 @@ mat-spinner {
 mat-card {
   margin-bottom: 20px;
 }
+
+.mat-tooltip {
+  white-space: pre-line;
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index 289e1ca..ea965f1 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -1,21 +1,39 @@
 <mat-tab-group (selectedTabChange)="onTabChange($event)">
   <mat-tab label="General">
-    <div class="header-container">
-      <h2 class="title" i18n="@@adminGroupsTitle">Administrar grupos</h2>
-      <div class="groups-button-row">
-        <button mat-flat-button color="primary" (click)="addOU($event)" i18n="@@newOrganizationalUnitButton">Nueva Unidad Organizativa</button>
-        <button mat-flat-button color="primary" (click)="addClient($event)" i18n="@@newClientButton">Nuevo Cliente</button>
-        <button mat-raised-button (click)="openBottomSheet()" i18n="@@legendButton">Leyenda</button>
+    <div class="header-container" joyrideStep="tabsStep" text="Utiliza las pestañás para acceder a las diferentes opciones de visualización y busqueda de unidades organizativas y clientes.">
+      <button mat-icon-button color="primary" (click)="iniciarTour()">
+        <mat-icon>help</mat-icon>
+      </button>
+      <h2 class="title" i18n="@@adminGroupsTitle" joyrideStep="titleStep" text="En esta pantalla, puedes gestionar las unidades organizativas y sus clientes.">Administrar grupos</h2>
+      <div class="groups-button-row" joyrideStep="addStep" text="Utiliza estos botones para crear nuevas unidades organizativas o clientes.">
+        <button mat-flat-button color="primary" (click)="addOU($event)" 
+                i18n="@@newOrganizationalUnitButton" 
+                matTooltip="Abrir modal para crear unidades organizativas de cualquier tipo (Centro, Aula, Grupo de aulas o Grupo de clientes)" 
+                matTooltipShowDelay="1000">Nueva Unidad Organizativa</button>
+                
+        <button mat-flat-button color="primary" (click)="addClient($event)" 
+                i18n="@@newClientButton" 
+                matTooltipShowDelay="1000">Nuevo Cliente</button>
+                
+        <button mat-raised-button (click)="openBottomSheet()" 
+                i18n="@@legendButton" 
+                joyrideStep="keyStep" text="La leyenda te mostrará los tipos de unidades organizativas y sus iconos correspondientes"
+                matTooltipShowDelay="1000">Leyenda</button>
       </div>
     </div>
+
     <div class="groupLists-container">
-      <mat-card class="card unidad-card">
+      <mat-card class="card unidad-card" 
+                joyrideStep="unitStep" text="Esta es la sección donde se mostrarán las unidades organizativas de tipo 'Centro'"
+                matTooltipShowDelay="1000" 
+                matTooltipPosition="above">
         <mat-card-title i18n="@@organizationalUnitTitle">Centros</mat-card-title>
         <mat-card-content>
           <mat-spinner *ngIf="loading"></mat-spinner>
           <mat-list *ngIf="!loading">
             <mat-list-item *ngFor="let unidad of organizationalUnits"
-                           [ngClass]="{'selected-item': unidad === selectedUnidad, 'clickable-item': true}" (click)="onSelectUnidad(unidad)">
+                           [ngClass]="{'selected-item': unidad === selectedUnidad, 'clickable-item': true}" 
+                           (click)="onSelectUnidad(unidad)">
               <div class="item-content">
                 <mat-icon>apartment</mat-icon>
                 {{ unidad.name  }}
@@ -23,48 +41,37 @@
                   <mat-icon mat-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">more_vert</mat-icon>
                   <mat-menu #menu="matMenu">
                     <button mat-menu-item (click)="onTreeClick($event, unidad)">
-                      <mat-icon
-                        #tooltip="matTooltip"
-                        matTooltip="Visualizar en forma de arbol"
-                        matTooltipHideDelay="0"
-                        i18n="@@viewTreeTooltip">account_tree
-                      </mat-icon>
+                      <mat-icon matTooltip="Visualizar unidad en forma de árbol" 
+                                matTooltipHideDelay="0" 
+                                i18n="@@viewTreeTooltip">account_tree</mat-icon>
                       <span i18n="@@viewTreeMenu">Ver organigrama</span>
                     </button>
+
                     <button mat-menu-item (click)="onEditClick($event, unidad.type, unidad.uuid)">
-                      <mat-icon
-                        #tooltip="matTooltip"
-                        matTooltip="Editar unidad organizativa"
-                        matTooltipHideDelay="0"
-                        i18n="@@editUnitTooltip">edit
-                      </mat-icon>
+                      <mat-icon matTooltip="Editar esta unidad organizativa" 
+                                matTooltipHideDelay="0" 
+                                i18n="@@editUnitTooltip">edit</mat-icon>
                       <span i18n="@@editUnitMenu">Editar</span>
                     </button>
+
                     <button mat-menu-item (click)="onShowClick($event, unidad)">
-                      <mat-icon
-                        #tooltip="matTooltip"
-                        matTooltip="Visualizar unidad organizativa"
-                        matTooltipHideDelay="0"
-                        i18n="@@viewUnitTool">visibility
-                      </mat-icon>
-                      <span i18n="@@viewUnitMenu">Visualizar datos</span>
+                      <mat-icon matTooltip="Ver detalles de la unidad organizativa" 
+                                matTooltipHideDelay="0" 
+                                i18n="@@viewUnitTooltip">visibility</mat-icon>
+                      <span i18n="@@viewUnitMenu">Ver datos</span>
                     </button>
+
                     <button mat-menu-item (click)="addOU($event, unidad)">
-                      <mat-icon
-                        #tooltip="matTooltip"
-                        matTooltip="Crear unidad organizativa interna"
-                        matTooltipHideDelay="0"
-                        i18n="@@addInternalUnitTool">add_home_work
-                      </mat-icon>
+                      <mat-icon matTooltip="Crear una nueva unidad organizativa interna" 
+                                matTooltipHideDelay="0" 
+                                i18n="@@addInternalUnitTooltip">add_home_work</mat-icon>
                       <span i18n="@@addInternalUnitMenu">Añadir unidad organizativa</span>
                     </button>
+
                     <button mat-menu-item (click)="addClient($event, unidad)">
-                      <mat-icon
-                        #tooltip="matTooltip"
-                        matTooltip="Crear cliente en esta unidad organizativa"
-                        matTooltipHideDelay="0"
-                        i18n="@@addClientDevice">devices
-                      </mat-icon>
+                      <mat-icon matTooltip="Registrar un cliente en esta unidad organizativa" 
+                                matTooltipHideDelay="0" 
+                                i18n="@@addClientTooltip">devices</mat-icon>
                       <span i18n="@@addClientMenu">Crear cliente</span>
                     </button>
                   </mat-menu>
@@ -74,7 +81,11 @@
           </mat-list>
         </mat-card-content>
       </mat-card>
-      <mat-card class="card elements-card">
+
+      <mat-card class="card elements-card" 
+                joyrideStep="elementsStep" text="Esta es la sección para visualizar unidades internas del centro seleccionado y navegar por ellas."
+                matTooltipShowDelay="1000" 
+                matTooltipPosition="above">
         <mat-card-title>
           <div class="title-with-breadcrumb">
             <span i18n="@@internalElementsTitle"></span>
@@ -93,7 +104,9 @@
               <mat-icon>info</mat-icon>
               <span i18n="@@noInternalElementsMessage">No hay elementos internos</span>
             </div>
-            <mat-list-item *ngFor="let child of children" [ngClass]="{'selected-item': child === selectedUnidad, 'clickable-item': true}" (click)="onSelectChild(child)">
+            <mat-list-item *ngFor="let child of children" 
+                           [ngClass]="{'selected-item': child === selectedUnidad, 'clickable-item': true}" 
+                           (click)="onSelectChild(child)">
               <div class="item-content">
                 <mat-icon [ngSwitch]="child.type">
                   <ng-container *ngSwitchCase="'organizational-unit'">apartment</ng-container>
@@ -108,31 +121,45 @@
                   <mat-icon mat-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">more_vert</mat-icon>
                   <mat-menu #menu="matMenu">
                     <button mat-menu-item (click)="onEditClick($event, child.type, child.uuid)">
-                      <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Editar elemento" matTooltipHideDelay="0" i18n="@@editElementTooltip">edit</mat-icon>
+                      <mat-icon matTooltip="Editar elemento" 
+                                matTooltipHideDelay="0" 
+                                i18n="@@editElementTooltip">edit</mat-icon>
                       <span i18n="@@editElementMenu">Editar</span>
                     </button>
+
                     <button *ngIf="child.type !== 'client'" mat-menu-item (click)="onShowClick($event, child)">
-                      <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Visualizar unidad organizativa" matTooltipHideDelay="0" i18n="@@viewUnitTooltip">visibility</mat-icon>
-                      <span i18n="@@viewUnitMenu">Visualizar datos</span>
+                      <mat-icon matTooltip="Ver detalles de la unidad organizativa" 
+                                matTooltipHideDelay="0" 
+                                i18n="@@viewUnitTooltip">visibility</mat-icon>
+                      <span i18n="@@viewUnitMenu">Ver datos</span>
                     </button>
+
                     <button *ngIf="child.type !== 'client'" mat-menu-item (click)="addOU($event, child)">
-                      <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Crear unidad organizativa interna" matTooltipHideDelay="0" i18n="@@addInternalUnitTooltip">add_home_work</mat-icon>
+                      <mat-icon matTooltip="Crear una nueva unidad organizativa interna" 
+                                matTooltipHideDelay="0" 
+                                i18n="@@addInternalUnitTooltip">add_home_work</mat-icon>
                       <span i18n="@@addInternalUnitMenu">Añadir unidad organizativa</span>
                     </button>
+
                     <button *ngIf="child.type !== 'client'" mat-menu-item (click)="addClient($event, child)">
-                      <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Crear cliente en esta unidad organizativa" matTooltipHideDelay="0" i18n="@@addClientTooltip">devices</mat-icon>
+                      <mat-icon matTooltip="Registrar un cliente en esta unidad organizativa" 
+                                matTooltipHideDelay="0" 
+                                i18n="@@addClientTooltip">devices</mat-icon>
                       <span i18n="@@addClientMenu">Crear cliente</span>
                     </button>
+
                     <button mat-menu-item (click)="onDeleteClick($event, child.uuid, child.name, child.type)">
-                      <mat-icon class="delete-icon" #tooltip="matTooltip" matTooltip="Borrar elemento" matTooltipHideDelay="0" i18n="@@deleteElementTooltip">delete</mat-icon>
-                      <span i18n="@@deleteElementMenu">Borrar elemento</span>
+                      <mat-icon matTooltip="Eliminar este elemento" 
+                                matTooltipHideDelay="0" 
+                                i18n="@@deleteElementTooltip">delete</mat-icon>
+                      <span i18n="@@deleteElementMenu">Eliminar elemento</span>
                     </button>
 
                     <button mat-menu-item (click)="onExecuteCommand($event, child.uuid, child.name, child.type)">
-                      <mat-icon class="delete-icon" #tooltip="matTooltip" matTooltip="Ejecutar comando" matTooltipHideDelay="0">play_arrow</mat-icon>
-                      <span >Ejecutar comando</span>
+                      <mat-icon matTooltip="Ejecutar comando en este elemento" 
+                                matTooltipHideDelay="0">play_arrow</mat-icon>
+                      <span>Ejecutar comando</span>
                     </button>
-
                   </mat-menu>
                 </div>
               </div>
@@ -142,12 +169,15 @@
       </mat-card>
     </div>
   </mat-tab>
+
   <mat-tab i18n-label label="Búsqueda avanzada">
     <app-advanced-search></app-advanced-search>
   </mat-tab>
+
   <mat-tab i18n-label label="Clientes">
     <app-client-tab-view #clientTab></app-client-tab-view>
   </mat-tab>
+
   <mat-tab i18n-label label="Unidades organizativas">
     <app-organizational-unit-tab-view #organizationalUnitTab></app-organizational-unit-tab-view>
   </mat-tab>
diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index e0763d9..42baf1b 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -27,6 +27,7 @@ import {
 } from "./components/organizational-unit-tab-view/organizational-unit-tab-view.component";
 import { ExecuteCommandComponent } from '../commands/main-commands/execute-command/execute-command.component';
 import { ExecuteCommandOuComponent } from './shared/execute-command-ou/execute-command-ou.component';
+import { JoyrideService } from 'ngx-joyride';
 
 @Component({
   selector: 'app-groups',
@@ -69,7 +70,8 @@ export class GroupsComponent implements OnInit {
   public dialog: MatDialog,
   private toastService: ToastrService,
   private _bottomSheet: MatBottomSheet,
-  private http: HttpClient
+  private http: HttpClient,
+  private joyrideService: JoyrideService
   ) {}
 
   ngOnInit(): void {
@@ -449,4 +451,11 @@ export class GroupsComponent implements OnInit {
     const dialogRef = this.dialog.open(AcctionsModalComponent, { data: { selectedElements: this.selectedElements }, width: '700px'});
   }
 
+  iniciarTour(): void {
+    this.joyrideService.startTour({
+      steps: ['titleStep', 'addStep', 'keyStep', 'unitStep', 'elementsStep', 'tabsStep'],
+      showPrevButton: true,
+      themeColor: '#3f51b5' 
+    });
+  }
 }