diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts
index ac4d23c..c999b44 100644
--- a/ogWebconsole/src/app/app.module.ts
+++ b/ogWebconsole/src/app/app.module.ts
@@ -69,6 +69,7 @@ import {
 import { LegendComponent } from './components/groups/legend/legend.component';
 import { ClassroomViewDialogComponent } from './components/groups/classroom-view/classroom-view-modal';
 import {MatPaginator} from "@angular/material/paginator";
+import { SaveFiltersDialogComponent } from './components/groups/save-filters-dialog/save-filters-dialog.component';
 
 @NgModule({
   declarations: [
@@ -100,7 +101,8 @@ import {MatPaginator} from "@angular/material/paginator";
     ShowOrganizationalUnitComponent,
     TreeViewComponent,
     LegendComponent,
-    ClassroomViewDialogComponent
+    ClassroomViewDialogComponent,
+    SaveFiltersDialogComponent
   ],
   bootstrap: [AppComponent],
   imports: [BrowserModule,
diff --git a/ogWebconsole/src/app/components/groups/data.service.ts b/ogWebconsole/src/app/components/groups/data.service.ts
index 655524d..89863aa 100644
--- a/ogWebconsole/src/app/components/groups/data.service.ts
+++ b/ogWebconsole/src/app/components/groups/data.service.ts
@@ -155,5 +155,24 @@ export class DataService {
       })
     );
   }
+
+  getFilter(id: string): Observable<any> {
+    return this.http.get<any>('http://127.0.0.1:8080/views/' + id).pipe(
+      map(response => {
+        
+  
+        if (response.name && response.filters) {
+          return response;
+        } else {
+          throw new Error('Unexpected response format');
+        }
+      }),
+      catchError(error => {
+        console.error('Error fetching filters', error);
+        return throwError(error);
+      })
+    );
+  }
+  
   
 }
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index 296c03e..8d848d9 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -152,7 +152,7 @@
       </mat-card>
     </div>
   </mat-tab>
-  <mat-tab label="Búsqueda avanzada">
+  <mat-tab label="Búsqueda avanzada" >
     <h2 class="title" i18n="@@searchTitle">Búsqueda</h2>
     <div class="container">
       <div class="header">
@@ -160,7 +160,7 @@
           <mat-label i18n="@@selectFilterLabel">Seleccione filtro</mat-label>
           <mat-select (selectionChange)="loadSelectedFilter($event.value)">
             <mat-option *ngFor="let savedFilter of savedFilterNames" [value]="savedFilter">
-              {{ savedFilter }}
+              {{ savedFilter[0] }}
             </mat-option>
           </mat-select>
         </mat-form-field>        
@@ -168,13 +168,6 @@
       <mat-divider class="divider"></mat-divider>
       <div class="main-content">
         <div class="filters">
-          <mat-form-field>
-            <mat-label i18n="@@selectOptionLabel">Selecciona una opción</mat-label>
-            <mat-select [(value)]="selectedFilter1" (selectionChange)="applyFilter()">
-              <mat-option value="ou" i18n="@@organizationalUnitsOption">Unidades organizativas</mat-option>
-              <mat-option value="client" i18n="@@clientsOption">Clientes</mat-option>
-            </mat-select>
-          </mat-form-field>
           <mat-form-field class="example-full-width">
             <mat-label i18n="@@nameLabel">Nombre</mat-label>
             <input matInput placeholder="Unidad organizativa" (input)="applyFilter()" [(ngModel)]="filterName" i18n-placeholder="@@namePlaceholder">
@@ -188,6 +181,13 @@
               <mat-option value="client-group" i18n="@@clientGroupOption">Grupos de clientes</mat-option>
             </mat-select>
           </mat-form-field>
+          <mat-form-field>
+            <mat-label i18n="@@selectOptionLabel">Selecciona una opción</mat-label>
+            <mat-select [(value)]="selectedFilter1" (selectionChange)="applyFilter()">
+              <mat-option value="ou" i18n="@@organizationalUnitsOption">Unidades organizativas</mat-option>
+              <mat-option value="client" i18n="@@clientsOption">Clientes</mat-option>
+            </mat-select>
+          </mat-form-field>
           <mat-form-field>
             <mat-label i18n="@@selectAnotherOptionLabel">Selecciona otra opción</mat-label>
             <mat-select [(value)]="selectedFilter1" (selectionChange)="applyFilter()">
diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index f2297ef..cc95942 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -18,6 +18,7 @@ import { ClassroomViewDialogComponent } from './classroom-view/classroom-view-mo
 import {HttpClient} from "@angular/common/http";
 import {Observable} from "rxjs";
 import {PageEvent} from "@angular/material/paginator";
+import { SaveFiltersDialogComponent } from './save-filters-dialog/save-filters-dialog.component';
 
 @Component({
   selector: 'app-groups',
@@ -61,9 +62,7 @@ export class GroupsComponent implements OnInit {
   getFilters(): void {
     this.dataService.getFilters().subscribe(
       data => {
-        this.savedFilterNames = data.map((filter: any) => filter.name);
-        console.log('data:', data);
-        console.log('Saved filters:', this.savedFilterNames);
+        this.savedFilterNames = data.map((filter: any) => [filter.name, filter.uuid]);
       },
       error => {
         console.error('Error fetching filters:', error);
@@ -315,26 +314,50 @@ export class GroupsComponent implements OnInit {
     this.itemsPerPage = event.pageSize;
     this.applyFilter();
   }
+
+
   saveFilters() {
-    const filters = {
-      name: this.filterName || `Filter ${new Date().toISOString()}`,
-      favourite: true,
-      filters: {
-        filter1: this.selectedFilter1,
-        filter2: this.selectedFilter2
+    const dialogRef = this.dialog.open(SaveFiltersDialogComponent);
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        const filters = {
+          name: result,
+          favourite: true,
+          filters: {
+            filter0: this.filterName,
+            filter1: this.selectedFilter1,
+            filter2: this.selectedFilter2
+          }
+        };
+
+        console.log('Filters:', filters);
+
+        this.http.post('http://127.0.0.1:8080/views', filters).subscribe(response => {
+          console.log('Response from server:', response);
+        }, error => {
+          console.error('Error:', error);
+        });
       }
-    };
-
-    console.log('Filters:', filters);
-
-    this.http.post('http://127.0.0.1:8080/views', filters).subscribe(response => {
-      console.log('Response from server:', response);
-    }, error => {
-      console.error('Error:', error);
     });
   }
 
   loadSelectedFilter(savedFilter: any) {
+    const url = 'http://127.0.0.1:8080/views/' + savedFilter[1];
+    console.log('llamando a:', url);
+
+    this.dataService.getFilter(savedFilter[1]).subscribe(response => {
+      console.log('Response from server:', response.filters);
+      if (response) {
+        console.log('Filter1:', response.filters);
+        this.filterName = response.filters.filter0 || '';
+        this.selectedFilter1 = response.filters.filter1 || null;
+        this.selectedFilter2 = response.filters.filter2 || '';
+      }
+    }, error => {
+      console.error('Error:', error);
+    });
 
   }
+  
 }