diff --git a/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.css b/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.css
index 2ffa5b8..e1b9687 100644
--- 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,11 +1,12 @@
-.title {
-  font-size: 24px;
+.header-container-title {
+  flex-grow: 1;
+  text-align: left;
+  margin-left: 1em;
 }
 
-.calendar-button-row {
+.command-groups-button-row {
   display: flex;
-  justify-content: flex-start;
-  margin-top: 16px;
+  gap: 15px;
 }
 
 .divider {
@@ -27,16 +28,15 @@
 
 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,11 +53,12 @@ table {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px;
+  padding: 10px 10px;
+  border-bottom: 1px solid #ddd;
 }
 
 .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 {
@@ -74,5 +75,4 @@ table {
 .mat-chip-readonly-false {
   background-color: #F44336 !important;
   color: white !important;
-}
-
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.html b/ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.html
index 77a65de..80d6d4b 100644
--- 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,7 +2,9 @@
   <button mat-icon-button color="primary" (click)="iniciarTour()">
     <mat-icon>help</mat-icon>
   </button>
-  <h2 class="title" joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'adminCommandGroupsTitle' | translate }}</h2>
+  <div class="header-container-title">
+    <h2 joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'adminCommandGroupsTitle' | translate }}</h2>
+  </div>
   <div class="command-groups-button-row">
     <button mat-flat-button color="primary" (click)="openCreateCommandGroupModal()" joyrideStep="addCommandGroupStep" text="{{ 'addCommandGroupStepText' | translate }}">
       {{ 'addCommandGroup' | translate }}
@@ -10,8 +12,6 @@
   </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 }}">
-  <mat-spinner></mat-spinner>
+  <app-loading [isLoading]="loading"></app-loading>
 </div>
 
 <div *ngIf="!loading">
diff --git a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.css b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.css
index 2ffa5b8..aff26d6 100644
--- 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,11 +1,12 @@
-.title {
-  font-size: 24px;
+.header-container-title {
+  flex-grow: 1;
+  text-align: left;
+  margin-left: 1em;
 }
 
-.calendar-button-row {
+.task-button-row {
   display: flex;
-  justify-content: flex-start;
-  margin-top: 16px;
+  gap: 15px;
 }
 
 .divider {
@@ -27,7 +28,6 @@
 
 table {
   width: 100%;
-  margin-top: 50px;
 }
 
 .search-container  {
@@ -35,7 +35,7 @@ table {
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  padding: 0 5px;
+  margin: 1.5rem 0rem 1.5rem 0rem;
   box-sizing: border-box;
 }
 
@@ -53,7 +53,8 @@ table {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px;
+  padding: 10px 10px;
+  border-bottom: 1px solid #ddd;
 }
 
 .mat-elevation-z8 {
diff --git a/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html b/ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html
index dd2646c..a3a6ccc 100644
--- 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,7 +2,9 @@
   <button mat-icon-button color="primary" (click)="iniciarTour()">
     <mat-icon>help</mat-icon>
   </button>
-  <h2 class="title" joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'manageTasksTitle' | translate }}</h2>
+  <div class="header-container-title">
+    <h2 class="title" joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'manageTasksTitle' | translate }}</h2>
+  </div>
   <div class="task-button-row">
     <button mat-flat-button color="primary" (click)="openCreateTaskModal()" joyrideStep="addTaskStep" text="{{ 'addTaskStepText' | translate }}">
       {{ 'addTask' | translate }}
@@ -10,8 +12,6 @@
   </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>
diff --git 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
index a2a8e53..e25b28b 100644
--- 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,10 +7,11 @@ 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';
 describe('CommandsTaskComponent', () => {
   let component: CommandsTaskComponent;
@@ -31,7 +32,7 @@ describe('CommandsTaskComponent', () => {
         TranslateModule.forRoot(),
         JoyrideModule.forRoot(),
       ],
-      declarations: [CommandsTaskComponent],
+      declarations: [CommandsTaskComponent, LoadingComponent],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
   });
diff --git a/ogWebconsole/src/app/components/commands/main-commands/commands.component.css b/ogWebconsole/src/app/components/commands/main-commands/commands.component.css
index 2ffa5b8..5321403 100644
--- a/ogWebconsole/src/app/components/commands/main-commands/commands.component.css
+++ b/ogWebconsole/src/app/components/commands/main-commands/commands.component.css
@@ -1,11 +1,12 @@
-.title {
-  font-size: 24px;
+.header-container-title {
+  flex-grow: 1;
+  text-align: left;
+  margin-left: 1em;
 }
 
-.calendar-button-row {
+.command-button-row {
   display: flex;
-  justify-content: flex-start;
-  margin-top: 16px;
+  gap: 15px;
 }
 
 .divider {
@@ -27,7 +28,6 @@
 
 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,7 +53,8 @@ table {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px;
+  padding: 10px 10px;
+  border-bottom: 1px solid #ddd;
 }
 
 .mat-elevation-z8 {
diff --git a/ogWebconsole/src/app/components/commands/main-commands/commands.component.html b/ogWebconsole/src/app/components/commands/main-commands/commands.component.html
index 74d1e2b..e92aee1 100644
--- 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>
-  <h2 class="title" joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'CommandsTitle' | translate }}</h2>
+  <div class="header-container-title">
+    <h2 joyrideStep="titleStep" text="{{ 'titleStepText' | translate }}">{{ 'CommandsTitle' | translate }}</h2>
+  </div>
   <div class="command-button-row" joyrideStep="addCommandStep" text="{{ 'addCommandStepText' | translate }}">
     <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 }}">
-  <mat-spinner></mat-spinner>
+  <app-loading [isLoading]="loading"></app-loading>
 </div>
 
 <div *ngIf="!loading">
diff --git a/ogWebconsole/src/app/components/commands/main-commands/commands.component.spec.ts b/ogWebconsole/src/app/components/commands/main-commands/commands.component.spec.ts
index cb95783..53a40f0 100644
--- 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,6 +19,7 @@ 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';
 
 describe('CommandsComponent', () => {
   let component: CommandsComponent;
@@ -26,7 +27,7 @@ describe('CommandsComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [CommandsComponent],
+      declarations: [CommandsComponent, LoadingComponent],
       imports: [
         HttpClientTestingModule,
         ToastrModule.forRoot(),
diff --git a/ogWebconsole/src/app/components/groups/groups.component.spec.ts b/ogWebconsole/src/app/components/groups/groups.component.spec.ts
index cf1f2f7..76a9f99 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.spec.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.spec.ts
@@ -25,7 +25,7 @@ import { JoyrideModule } from 'ngx-joyride';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTreeModule } from '@angular/material/tree';
 import { TreeNode } from './model/model';
-import { LoadingComponent } from '../../shared/loading/loading.component'; // Importa el componente LoadingComponent
+import { LoadingComponent } from '../../shared/loading/loading.component';
 import { ExecuteCommandComponent } from '../commands/main-commands/execute-command/execute-command.component';
 
 describe('GroupsComponent', () => {
@@ -34,7 +34,7 @@ describe('GroupsComponent', () => {
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [GroupsComponent, ExecuteCommandComponent, LoadingComponent], // Declara LoadingComponent
+            declarations: [GroupsComponent, ExecuteCommandComponent, LoadingComponent],
             imports: [
                 HttpClientTestingModule,
                 ToastrModule.forRoot(),