diff --git a/backend/src/entities/agent/repository/custom-agent-repository-extension.ts b/backend/src/entities/agent/repository/custom-agent-repository-extension.ts
index 96cfb0e56..ffb5d8680 100644
--- a/backend/src/entities/agent/repository/custom-agent-repository-extension.ts
+++ b/backend/src/entities/agent/repository/custom-agent-repository-extension.ts
@@ -4,6 +4,10 @@ import { AgentEntity } from '../agent.entity.js';
 import { ConnectionTypeTestEnum } from '@rocketadmin/shared-code/dist/src/shared/enums/connection-types-enum.js';
 
 export const customAgentRepositoryExtension = {
+  async saveNewAgent(agent: AgentEntity): Promise<AgentEntity> {
+    return await this.save(agent);
+  },
+
   async createNewAgentForConnectionAndReturnToken(connection: ConnectionEntity): Promise<string> {
     const newAgent = await this.createNewAgentForConnection(connection);
     return newAgent.token;
@@ -59,14 +63,8 @@ export const customAgentRepositoryExtension = {
         return 'IBMDB2-TEST-AGENT-TOKEN';
       case ConnectionTypeTestEnum.agent_mongodb:
         return 'MONGODB-TEST-AGENT-TOKEN';
-      case ConnectionTypeTestEnum.elasticsearch:
-        return 'ELASTICSEARCH-TEST-AGENT-TOKEN';
-      case ConnectionTypeTestEnum.agent_cassandra:
-        return 'CASSANDRA-TEST-AGENT-TOKEN';
-      case ConnectionTypeTestEnum.agent_redis:
-        return 'REDIS-TEST-AGENT-TOKEN';
-      case ConnectionTypeTestEnum.agent_clickhouse:
-        return 'CLICKHOUSE-TEST-AGENT-TOKEN';
+      default:
+        throw new Error(`Unsupported connection type for test agent token: ${connectionType}`);
     }
   },
 };
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.html
index d6f8fb042..dd2e0e29b 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.html
@@ -34,7 +34,8 @@ <h1 mat-dialog-title class="filters-header">
                                 label: tableWidgets[value.key].name || value.key,
                                 value: tableRowFieldsShown[value.key],
                                 widgetStructure: tableWidgets[value.key],
-                                relations: tableTypes[value.key] === 'foreign key' ? tableForeignKeys[value.key] : undefined
+                                relations: tableTypes[value.key] === 'foreign key' ? tableForeignKeys[value.key] : undefined,
+                                autofocus: autofocusField === value.key
                             }"
                             [ndcDynamicOutputs]="{
                                 onFieldChange: { handler: updateField, args: ['$event', value.key] }
@@ -49,7 +50,8 @@ <h1 mat-dialog-title class="filters-header">
                                 label: value.key,
                                 value: tableRowFieldsShown[value.key],
                                 structure: tableRowStructure[value.key],
-                                relations: tableTypes[value.key] === 'foreign key' ? tableForeignKeys[value.key] : undefined
+                                relations: tableTypes[value.key] === 'foreign key' ? tableForeignKeys[value.key] : undefined,
+                                autofocus: autofocusField === value.key
                             }"
                             [ndcDynamicOutputs]="{
                                 onFieldChange: { handler: updateField, args: ['$event', value.key] }
@@ -117,7 +119,8 @@ <h1 mat-dialog-title class="filters-header">
                             value: tableRowFieldsShown[value.key],
                             readonly: tableRowFieldsComparator[value.key] === 'empty',
                             structure: tableRowStructure[value.key],
-                            relations: tableTypes[value.key] === 'foreign key' ? tableForeignKeys[value.key] : undefined
+                            relations: tableTypes[value.key] === 'foreign key' ? tableForeignKeys[value.key] : undefined,
+                            autofocus: autofocusField === value.key
                         }"
                         [ndcDynamicOutputs]="{
                             onFieldChange: { handler: updateField, args: ['$event', value.key] }
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.ts
index 7bad098de..62ecfd772 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-filters-dialog/db-table-filters-dialog.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Inject, KeyValueDiffers, KeyValueDiffer } from '@angular/core';
+import { Component, OnInit, AfterViewInit, Inject, KeyValueDiffers, KeyValueDiffer } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
@@ -16,7 +16,7 @@ import { filterTypes } from 'src/app/consts/filter-types';
 import { ActivatedRoute } from '@angular/router';
 import { getComparatorsFromUrl, getFiltersFromUrl } from 'src/app/lib/parse-filter-params';
 import { getTableTypes } from 'src/app/lib/setup-table-row-structure';
-import * as JSON5 from 'json5';
+import JSON5 from 'json5';
 import { map, startWith } from 'rxjs/operators';
 import { Observable, } from 'rxjs';
 import { FormControl } from '@angular/forms';
@@ -48,7 +48,7 @@ import { Angulartics2OnModule } from 'angulartics2';
     ContentLoaderComponent
   ]
 })
-export class DbTableFiltersDialogComponent implements OnInit {
+export class DbTableFiltersDialogComponent implements OnInit, AfterViewInit {
 
   public tableFilters = [];
   public fieldSearchControl = new FormControl('');
@@ -67,6 +67,7 @@ export class DbTableFiltersDialogComponent implements OnInit {
   public tableWidgets: object;
   public tableWidgetsList: string[] = [];
   public UIwidgets = UIwidgets;
+  public autofocusField: string | null = null;
 
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: any,
@@ -91,6 +92,11 @@ export class DbTableFiltersDialogComponent implements OnInit {
       return {[field.column_name]: field};
     }));
 
+    // Set autofocus field if provided
+    if (this.data.autofocusField) {
+      this.autofocusField = this.data.autofocusField;
+    }
+
     const queryParams = this.route.snapshot.queryParams;
 
     // If saved_filter is present in queryParams, show empty form without applying filters
@@ -122,12 +128,75 @@ export class DbTableFiltersDialogComponent implements OnInit {
       }
     }
 
-    this.data.structure.widgets.length && this.setWidgets(this.data.structure.widgets);
+    if (this.data.structure.widgets && this.data.structure.widgets.length) {
+      this.setWidgets(this.data.structure.widgets);
+    }
+
+    // If autofocusField is provided, ensure it's in the filters list
+    if (this.autofocusField && this.tableFilters && !this.tableFilters.includes(this.autofocusField)) {
+      this.tableFilters.push(this.autofocusField);
+      if (!this.tableRowFieldsShown[this.autofocusField]) {
+        this.tableRowFieldsShown[this.autofocusField] = undefined;
+      }
+      if (!this.tableRowFieldsComparator[this.autofocusField]) {
+        this.tableRowFieldsComparator[this.autofocusField] = 'eq';
+      }
+    }
 
     this.foundFields = this.fieldSearchControl.valueChanges.pipe(
       startWith(''),
       map(value => this._filter(value || '')),
     );
+
+  }
+
+  ngAfterViewInit(): void {
+    // Set focus on the autofocus field after view is initialized
+    if (this.autofocusField) {
+      setTimeout(() => {
+        this.focusOnField(this.autofocusField);
+      }, 200);
+    }
+  }
+
+  focusOnField(fieldName: string) {
+    // Try multiple selectors to find the input field
+    const selectors = [
+      `input[name*="${fieldName}"]`,
+      `textarea[name*="${fieldName}"]`,
+      `[data-field="${fieldName}"] input`,
+      `[data-field="${fieldName}"] textarea`,
+      `mat-form-field:has([name*="${fieldName}"]) input`,
+      `mat-form-field:has([name*="${fieldName}"]) textarea`
+    ];
+
+    for (const selector of selectors) {
+      try {
+        const element = document.querySelector(selector) as HTMLElement;
+        if (element) {
+          element.focus();
+          element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          return;
+        }
+      } catch (e) {
+        // Continue to next selector if this one fails
+      }
+    }
+
+    // Fallback: try to find by key attribute in ndc-dynamic components
+    const allInputs = document.querySelectorAll('input, textarea');
+    for (let i = 0; i < allInputs.length; i++) {
+      const input = allInputs[i] as HTMLElement;
+      const formField = input.closest('mat-form-field');
+      if (formField) {
+        const label = formField.querySelector('mat-label');
+        if (label && label.textContent && label.textContent.trim() === fieldName) {
+          input.focus();
+          input.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          return;
+        }
+      }
+    }
   }
 
   private _filter(value: string): string[] {
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
index 2e915eed2..55c64baa2 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
@@ -85,7 +85,6 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
             <div data-hj-suppress class="row-preview-sidebar__value">
                 <ng-container *ngIf="isForeignKey(column.title); else recordContent">
                     <app-foreign-key-record-view
-                        [key]="i"
                         link="/dashboard/{{selectedRow.connectionID}}/{{selectedRow.foreignKeys[column.title]?.referenced_table_name}}/entry"
                         [primaryKeysParams]="getForeignKeyQueryParams(column.title)"
                         [displayValue]="getForeignKeyValue(column.title)"
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
index 146c31dff..1fbb6c79a 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
@@ -192,6 +192,37 @@
 	display: inline-block;
 }
 
+.active-filters {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 12px;
+}
+
+::ng-deep .active-filters .mat-mdc-chip {
+    --mdc-chip-container-color: #E8ECEE !important;
+    --mdc-chip-elevated-container-color: #E8ECEE !important;
+    --mdc-chip-container-shape-radius: 16px !important;
+    background-color: #E8ECEE !important;
+    border-radius: 16px !important;
+}
+
+::ng-deep .active-filters .mat-mdc-chip:hover {
+    --mdc-chip-container-color: #E8ECEE !important;
+    --mdc-chip-elevated-container-color: #E8ECEE !important;
+    background-color: #E8ECEE !important;
+}
+
+::ng-deep .active-filters .mdc-evolution-chip__cell {
+    background-color: #E8ECEE !important;
+    border-radius: 16px !important;
+}
+
+::ng-deep .active-filters .mdc-evolution-chip__cell:hover {
+    background-color: #E8ECEE !important;
+}
+
 .db-table-manage-columns-button__count {
 	margin-left: 2px;
 }
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html
index e7f41d905..bfe09f292 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html
@@ -186,10 +186,12 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
 
 <div *ngIf="getFiltersCount(activeFilters) !== 0 && !hasSavedFilterActive" class="active-filters">
     <mat-chip-row *ngFor="let activeFilter of activeFilters | keyvalue" data-hj-suppress
-        class="db-table-active-filter-chip"
-        (removed)="removeFilter.emit(activeFilter.key)">
+        class="db-table-active-filter-chip"    
+        (removed)="removeFilter.emit(activeFilter.key)"
+        (click)="handleActiveFilterClick(activeFilter.key)">
         {{ getFilter(activeFilter) }}
-        <button matChipRemove>
+        <button matChipRemove
+            (click)="$event.stopPropagation()">
             <mat-icon>cancel</mat-icon>
         </button>
     </mat-chip-row>
@@ -207,11 +209,12 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
     (filterSelected)="onFilterSelected($event)"
 ></app-saved-filters-panel>
 
+<!-- Table View -->
 <div *ngIf="tableData && tableData.loading$ | async" class="skeleton mat-elevation-z4">
     <app-placeholder-table-data></app-placeholder-table-data>
 </div>
 
-<div [ngClass]="{hidden: !tableData || tableData.loading$ | async}" class="mat-elevation-z4 table-surface">
+<div [ngClass]="{hidden: !tableData || (tableData.loading$ | async)}" class="mat-elevation-z4 table-surface">
     <div class="table-box">
         <mat-table matSort [dataSource]="tableData" NgMatTableQueryReflector
             class="db-table"
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts
index ec6d4222f..6aa95eb51 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts
@@ -1,38 +1,41 @@
-import * as JSON5 from 'json5';
 
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-import { AccessLevel } from 'src/app/models/user';
-import { Angulartics2OnModule } from 'angulartics2';
+import { SelectionModel } from '@angular/cdk/collections';
+import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
-import { ConnectionsService } from 'src/app/services/connections.service';
-import { DbTableImportDialogComponent } from './db-table-import-dialog/db-table-import-dialog.component';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { DragDropModule, CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { DynamicModule } from 'ng-dynamic-component';
-import JsonURL from "@jsonurl/jsonurl";
-import { ClipboardModule } from '@angular/cdk/clipboard';
-import { SelectionModel } from '@angular/cdk/collections';
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
+
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { MatDividerModule } from '@angular/material/divider';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { TablesService } from 'src/app/services/tables.service';
-import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+
+import { Angulartics2OnModule } from 'angulartics2';
+import JsonURL from '@jsonurl/jsonurl';
+import JSON5 from 'json5';
 import { merge } from 'rxjs';
 import { tap } from 'rxjs/operators';
+
+import { tableDisplayTypes, UIwidgets } from '../../../consts/table-display-types';
 import { formatFieldValue } from 'src/app/lib/format-field-value';
+import { normalizeTableName } from '../../../lib/normalize';
 import { getTableTypes } from 'src/app/lib/setup-table-row-structure';
+import { AccessLevel } from 'src/app/models/user';
 import {
 	CustomAction,
 	TableForeignKey,
@@ -42,16 +45,19 @@ import {
 	TableRow,
 	Widget,
 } from 'src/app/models/table';
+import { ConnectionsService } from 'src/app/services/connections.service';
 import { NotificationsService } from 'src/app/services/notifications.service';
 import { TableRowService } from 'src/app/services/table-row.service';
 import { TableStateService } from 'src/app/services/table-state.service';
-import { tableDisplayTypes, UIwidgets } from '../../../consts/table-display-types';
-import { normalizeTableName } from '../../../lib/normalize';
-import { PlaceholderTableDataComponent } from '../../skeletons/placeholder-table-data/placeholder-table-data.component';
-import { ForeignKeyDisplayComponent } from '../../ui-components/table-display-fields/foreign-key/foreign-key.component';
+import { TablesService } from 'src/app/services/tables.service';
+
 import { DbTableExportDialogComponent } from './db-table-export-dialog/db-table-export-dialog.component';
+import { DbTableFiltersDialogComponent } from './db-table-filters-dialog/db-table-filters-dialog.component';
+import { DbTableImportDialogComponent } from './db-table-import-dialog/db-table-import-dialog.component';
 import { SavedFiltersPanelComponent } from './saved-filters-panel/saved-filters-panel.component';
-import { MatSelectModule } from '@angular/material/select';
+import { ForeignKeyDisplayComponent } from '../../ui-components/table-display-fields/foreign-key/foreign-key.component';
+import { PlaceholderTableDataComponent } from '../../skeletons/placeholder-table-data/placeholder-table-data.component';
+
 
 interface Column {
 	title: string;
@@ -65,38 +71,38 @@ export interface Folder {
 }
 
 @Component({
-  selector: 'app-db-table-view',
-  standalone: true,
-  templateUrl: './db-table-view.component.html',
-  styleUrls: ['./db-table-view.component.css'],
-  imports: [
-    CommonModule,
-    FormsModule,
-    RouterModule,
-    MatTableModule,
-    MatPaginatorModule,
-    MatSortModule,
-    MatButtonModule,
-    MatIconModule,
-    MatCheckboxModule,
-    MatChipsModule,
-    MatDialogModule,
-    MatFormFieldModule,
-    MatSelectModule,
-    ReactiveFormsModule,
-    MatInputModule,
-    MatAutocompleteModule,
-    MatMenuModule,
-    MatTooltipModule,
-	MatDividerModule,
-    ClipboardModule,
-    DragDropModule,
-    Angulartics2OnModule,
-    PlaceholderTableDataComponent,
-    DynamicModule,
-    ForeignKeyDisplayComponent,
-    SavedFiltersPanelComponent
-  ]
+	selector: 'app-db-table-view',
+	standalone: true,
+	templateUrl: './db-table-view.component.html',
+	styleUrls: ['./db-table-view.component.css'],
+	imports: [
+		CommonModule,
+		FormsModule,
+		RouterModule,
+		MatTableModule,
+		MatPaginatorModule,
+		MatSortModule,
+		MatButtonModule,
+		MatIconModule,
+		MatCheckboxModule,
+		MatChipsModule,
+		MatDialogModule,
+		MatDividerModule,
+		MatFormFieldModule,
+		MatSelectModule,
+		ReactiveFormsModule,
+		MatInputModule,
+		MatAutocompleteModule,
+		MatMenuModule,
+		MatTooltipModule,
+		ClipboardModule,
+		DragDropModule,
+		Angulartics2OnModule,
+		PlaceholderTableDataComponent,
+		DynamicModule,
+		ForeignKeyDisplayComponent,
+		SavedFiltersPanelComponent,
+	],
 })
 export class DbTableViewComponent implements OnInit, OnChanges {
 	@Input() name: string;
@@ -154,7 +160,7 @@ export class DbTableViewComponent implements OnInit, OnChanges {
 		if (value) this.tableData = value;
 	}
 
-	@ViewChild(MatPaginator) paginator: MatPaginator;
+@ViewChild(MatPaginator) paginator: MatPaginator;
 	@ViewChild(MatSort) sort: MatSort;
 
 	public defaultSort: { column: string; direction: 'asc' | 'desc' } | null = null;
@@ -688,7 +694,7 @@ export class DbTableViewComponent implements OnInit, OnChanges {
     });
   }
 
-  onColumnVisibilityChange() {
+onColumnVisibilityChange() {
     this.tableData.changleColumnList(this.connectionID, this.name);
     this.cdr.detectChanges();
     this._tables.updatePersonalTableViewSettings(this.connectionID, this.name, {
@@ -703,6 +709,39 @@ export class DbTableViewComponent implements OnInit, OnChanges {
     });
   }
 
+  handleActiveFilterClick(filterKey: string) {
+    const dialogRef = this.dialog.open(DbTableFiltersDialogComponent, {
+      width: '56em',
+      data: {
+        connectionID: this.connectionID,
+        tableName: this.name,
+        displayTableName: this.displayName,
+        structure: {
+          structure: this.tableData.structure,
+          foreignKeys: this.tableData.foreignKeys,
+          foreignKeysList: this.tableData.foreignKeysList,
+          widgets: this.tableData.widgets || []
+        },
+        autofocusField: filterKey
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(action => {
+      if (action === 'filter' && dialogRef.componentInstance) {
+        const filtersFromDialog = {...dialogRef.componentInstance.tableRowFieldsShown};
+        const comparators = dialogRef.componentInstance.tableRowFieldsComparator;
+        this.openFilters.emit({
+          structure: this.tableData.structure,
+          foreignKeysList: this.tableData.foreignKeysList,
+          foreignKeys: this.tableData.foreignKeys,
+          widgets: this.tableData.widgets,
+          filters: filtersFromDialog,
+          comparators: comparators
+        });
+      }
+    });
+  }
+
   onColumnsMenuDrop(event: CdkDragDrop<string[]>) {
     if (event.previousIndex === event.currentIndex) {
       return;
@@ -745,7 +784,7 @@ export class DbTableViewComponent implements OnInit, OnChanges {
     // Force Angular to detect changes and re-render the table immediately
     this.cdr.detectChanges();
 
-    this._tables.updatePersonalTableViewSettings(this.connectionID, this.name, {
+this._tables.updatePersonalTableViewSettings(this.connectionID, this.name, {
       list_fields: this.tableData.columns.map(col => col.title)
     }).subscribe({
       next: () => {
@@ -755,9 +794,10 @@ export class DbTableViewComponent implements OnInit, OnChanges {
         console.error('Error updating personal table view settings:', error);
       }
     });
-    
+
     console.log('Columns reordered in menu - table updated:', newDisplayedOrder);
   }
+
 	exportData() {
 		const convertToCSVValue = (value: any): string => {
 			// Handle null and undefined
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.css b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.css
index a27ec9c1e..765543ebd 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.css
@@ -1,24 +1,198 @@
 .filters-content {
     display: grid;
-    grid-template-columns: auto 228px 0 1fr 160px 32px;
+    grid-template-columns: 32px auto 228px 0 1fr 120px;
     grid-column-gap: 8px;
     align-content: flex-start;
-    align-items: flex-start;
+    align-items: center;
     padding-top: 4px !important;
 }
 
+::ng-deep mat-dialog-content.filters-content {
+    padding-left: 24px !important;
+    padding-right: 24px !important;
+}
+
 .filters-select {
-    grid-column: 1 / span 6;
+    grid-column: 2 / span 5;
     margin-bottom: 16px;
 }
 
 .filter-line {
-    grid-column: 1 / span 4;
+    grid-column: 2 / span 4;
 }
 
-.dynamic-column-radio {
-    grid-column: 5;
+.empty-conditions-container {
+    grid-column: 1 / span 6;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: 8px;
+    margin-bottom: 16px;
+}
+
+.add-condition-container {
+    grid-column: 1 / span 6;
+    display: flex;
+    align-items: center;
+    gap: 12px;
     margin-top: 8px;
+    margin-bottom: 16px;
+}
+
+.where-label {
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.87);
+    white-space: nowrap;
+}
+
+@media (prefers-color-scheme: dark) {
+    .where-label {
+        color: rgba(255, 255, 255, 0.87);
+    }
+}
+
+.add-condition-button {
+    width: auto;
+    min-width: auto;
+    min-height: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-transform: none;
+    margin: 0 !important;
+    padding: 0 16px;
+    gap: 4px;
+}
+
+.add-condition-button.accent-button {
+    color: #C177FC;
+}
+
+.add-condition-button.accent-button:hover {
+    background-color: rgba(193, 119, 252, 0.04);
+}
+
+.add-condition-button.accent-button .add-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+}
+
+.empty-conditions-container .column-name-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    vertical-align: middle;
+}
+
+.empty-condition-input {
+    width: auto;
+    min-width: 200px;
+    max-width: 300px;
+    margin: 0;
+    flex-shrink: 0;
+}
+
+.empty-condition-input ::ng-deep .mat-mdc-form-field-infix {
+    min-height: 36px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    display: flex;
+    align-items: center;
+}
+
+.empty-condition-input ::ng-deep .mat-mdc-form-field {
+    margin: 0;
+}
+
+.empty-condition-input ::ng-deep .mat-mdc-text-field-wrapper {
+    padding-bottom: 0;
+    margin-bottom: 0;
+}
+
+.empty-condition-input ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+    margin-top: 0;
+    position: absolute;
+    top: 100%;
+}
+
+.dynamic-column-radio {
+    grid-column: 6;
+    margin-top: -16px;
+    align-self: center;
+}
+
+.comparator-select-field {
+    grid-column: 3;
+}
+
+.add-condition-footer {
+    grid-column: 1 / span 6;
+    margin-top: 24px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: 16px;
+}
+
+.add-condition-footer button {
+    width: auto;
+    min-width: auto;
+    min-height: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-transform: none;
+    margin: 0 0 16px 0 !important;
+    padding: 0 16px;
+}
+
+.add-condition-footer .filters-select {
+    width: auto;
+    min-width: 200px;
+    max-width: 300px;
+    margin: 0 !important;
+    min-height: 36px;
+    margin-top: 0 !important;
+    flex-shrink: 0;
+}
+
+.add-condition-footer .filters-select ::ng-deep .mat-mdc-form-field-infix {
+    min-height: 36px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    display: flex;
+    align-items: center;
+}
+
+.add-condition-footer .filters-select ::ng-deep .mat-mdc-text-field-wrapper {
+    padding-bottom: 0;
+    margin-bottom: 0;
+}
+
+.add-condition-footer ::ng-deep .mat-mdc-form-field {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+}
+
+.add-condition-footer ::ng-deep .mat-mdc-form-field-wrapper {
+    padding-bottom: 0;
+}
+
+.dynamic-column-radio ::ng-deep .mdc-form-field {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.dynamic-column-radio ::ng-deep .mdc-form-field>label {
+    white-space: nowrap;
 }
 
 .filter-save-form {
@@ -49,6 +223,7 @@
     grid-column: 1 / span 6;
     margin: 0 0 16px 0;
     font-size: 14px;
+    white-space: nowrap;
 }
 
 @media (prefers-color-scheme: light) {
@@ -67,6 +242,10 @@
     grid-column: 1 / -1;
 }
 
+.full-width.filter-name-field {
+    max-width: 400px;
+}
+
 .default-filter-checkbox {
     margin-bottom: 16px;
 }
@@ -83,20 +262,72 @@
     flex-direction: column;
 }
 
+.filters-header-description {
+    margin: 0 24px 16px 24px;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+@media (prefers-color-scheme: light) {
+    .filters-header-description {
+        color: rgba(0, 0, 0, 0.6);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .filters-header-description {
+        color: rgba(255, 255, 255, 0.6);
+    }
+}
+
 ::ng-deep .mat-dialog-container {
     display: flex;
 }
 
-.filters-content {
-    flex: 1 0 auto;
+.column-name {
+    grid-column: 2;
+    margin-top: -8px;
+    align-self: center;
 }
 
-.column-name {
-    margin-top: 12px;
+.conditions-vertical-line {
+    grid-column: 1;
+    grid-row: 2 / -1;
+    width: 1px;
+    background-color: rgba(0, 0, 0, 0.12);
+    margin-left: 9px;
+    margin-top: 0;
+    margin-bottom: 0;
+    z-index: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+    .conditions-vertical-line {
+        background-color: rgba(255, 255, 255, 0.12);
+    }
 }
 
 .filter-delete-button {
-    margin-top: 4px;
+    grid-column: 1;
+    margin-top: -20px;
+    margin-right: 0;
+    margin-left: 0;
+    align-self: center;
+    justify-self: center;
+    position: relative;
+    z-index: 1;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.filter-delete-button ::ng-deep .mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
 }
 
 .settings-form__reset-button {
@@ -109,3 +340,81 @@
     font-style: italic;
     margin: 16px 0;
 }
+
+.comparator-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    margin-right: 8px;
+    vertical-align: middle;
+}
+
+::ng-deep .mat-mdc-select-panel .mat-mdc-option {
+    display: flex;
+    align-items: center;
+}
+
+.comparator-select-field {
+    width: auto;
+    min-width: 140px;
+    max-width: none;
+}
+
+.comparator-select-field ::ng-deep .mat-mdc-form-field-infix {
+    width: 100% !important;
+    min-width: fit-content;
+    padding-left: 0;
+    position: relative;
+}
+
+.comparator-select-field ::ng-deep .mat-mdc-select-trigger {
+    width: 100%;
+    min-width: fit-content;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+}
+
+.comparator-select-field ::ng-deep .mat-mdc-select-value-text {
+    width: auto;
+    min-width: fit-content;
+    flex: 1;
+}
+
+.comparator-select-field ::ng-deep .mat-mdc-select-arrow-wrapper {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+}
+
+.comparator-select-field ::ng-deep .mat-mdc-select-panel {
+    min-width: max-content !important;
+    width: max-content !important;
+}
+
+.conditions-error-message {
+    grid-column: 1 / span 6;
+    color: #f44336;
+    font-size: 12px;
+    margin: 8px 0 0 0;
+    padding-left: 16px;
+}
+
+/* Add more spacing for multiline textarea inputs (more than 2 rows) */
+.filters-content ::ng-deep .filter-line mat-form-field:has(textarea[rows]):not(:has(textarea[rows="1"])):not(:has(textarea[rows="2"])),
+.filters-content ::ng-deep .filter-line mat-form-field:has(textarea.long-textarea),
+.filters-content ::ng-deep .filter-line mat-form-field:has(textarea.form-textarea) {
+    margin-top: 24px !important;
+    margin-bottom: 24px !important;
+}
+
+/* Add more spacing for foreign key fields */
+.filters-content ::ng-deep .filter-line .foreign-key,
+.filters-content ::ng-deep .filter-line app-edit-foreign-key,
+.filters-content ::ng-deep .foreign-key {
+    margin-top: 24px !important;
+    margin-bottom: 24px !important;
+}
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.html b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.html
index 843615c44..431e6f0be 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.html
@@ -2,42 +2,62 @@
     <h1 mat-dialog-title class="filters-header">
         <span>New fast filter for <strong>{{ data.displayTableName }}</strong></span>
     </h1>
+    <p class="filters-header-description mat-body-2">
+        Use conditions to quickly filter {{ data.displayTableName.toLowerCase() }} and optionally edit one column.
+    </p>
     <app-content-loader *ngIf="!fields || !tableTypes; else filterControls"></app-content-loader>
     <ng-template #filterControls>
         <mat-dialog-content class="filters-content">
             <!-- Filter Name and Description Fields -->
-            <mat-form-field appearance="outline" class="full-width">
+            <mat-form-field appearance="outline" class="full-width filter-name-field" [class.mat-form-field-invalid]="showNameError">
                 <mat-label>Fast filter name</mat-label>
                 <input matInput required
                     name="filters_set_name"
-                    [(ngModel)]="data.filtersSet.name">
-                <mat-error *ngIf="!data.filtersSet.name">
+                    [(ngModel)]="data.filtersSet.name"
+                    (input)="showNameError = false">
+                <mat-error *ngIf="showNameError || !data.filtersSet.name">
                     Fast filter name is required
                 </mat-error>
             </mat-form-field>
 
-            <h3 class="section-title">Conditions & main column</h3>
-            <p class="section-description">
-                Select which conditions to add and choose a main column. Main columns remain editable, while conditions are set.
-            </p>
+            <ng-template #conditionInputField>
+                <mat-form-field class="filters-select" appearance="outline">
+                    <mat-label>Click here to add condition</mat-label>
+                    <input type="text" matInput name="filter_columns"
+                        [matAutocomplete]="auto"
+                        [formControl]="fieldSearchControl"
+                        (blur)="handleInputBlur()">
+                    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="addFilter($event)">
+                        <mat-option *ngFor="let field of foundFields | async"
+                            [ngClass]="{'disabled': field === 'No matches'}"
+                            [value]="field">
+                            {{field}}
+                        </mat-option>
+                    </mat-autocomplete>
+                    <button *ngIf="hasSelectedFilters"
+                        mat-icon-button
+                        matSuffix
+                        type="button"
+                        aria-label="Cancel adding condition"
+                        (click)="cancelAddConditionInput()">
+                        <mat-icon>close</mat-icon>
+                    </button>
+                </mat-form-field>
+            </ng-template>
 
-            <!-- Filter Selection -->
-            <mat-form-field class="filters-select" appearance="outline">
-                <mat-label>Click here to add condition</mat-label>
-                <input type="text" matInput name="filter_columns"
-                    [matAutocomplete]="auto"
-                    [formControl]="fieldSearchControl">
-                <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="addFilter($event)">
-                    <mat-option *ngFor="let field of foundFields | async"
-                        [ngClass]="{'disabled': field === 'No matches'}"
-                        [value]="field">
-                        {{field}}
-                    </mat-option>
-                </mat-autocomplete>
-            </mat-form-field>
+            <div class="empty-conditions-container">
+                <mat-icon class="column-name-icon">subdirectory_arrow_right</mat-icon>
+                <span class="where-label">where</span>
+            </div>
 
             <!-- Added Filters -->
+            <div class="conditions-vertical-line" *ngIf="hasSelectedFilters"></div>
             <ng-container *ngFor="let value of tableRowFieldsShown | keyvalue; trackBy:trackByFn">
+                <button mat-icon-button type="button" class="filter-delete-button"
+                    matTooltip="Remove"
+                    (click)="removeFilter(value.key)">
+                    <mat-icon>close</mat-icon>
+                </button>
                 <div *ngIf="getComparatorType(getInputType(value.key)) === 'nonComparable'; else comparableFilter" class="filter-line">
 
                     <div *ngIf="isWidget(value.key); else defaultTableField">
@@ -75,50 +95,63 @@ <h3 class="section-title">Conditions & main column</h3>
                     <span class='mat-body-1 column-name'>{{value.key}}</span>
 
                     <mat-form-field *ngIf="getComparatorType(getInputType(value.key)) === 'text'"
-                        appearance="outline">
+                        appearance="outline"
+                        class="comparator-select-field">
                         <mat-select name="textComparator-{{value.key}}"
                             [(ngModel)]="tableRowFieldsComparator[value.key]"
                             (ngModelChange)="updateComparator($event, value.key)">
                             <mat-option value="startswith">
-                                starts with
+                                <mat-icon class="comparator-icon">play_arrow</mat-icon>
+                                <span>starts with</span>
                             </mat-option>
                             <mat-option value="endswith">
-                                ends with
+                                <mat-icon class="comparator-icon">play_arrow</mat-icon>
+                                <span>ends with</span>
                             </mat-option>
                             <mat-option value="eq">
-                                equal
+                                <mat-icon class="comparator-icon">drag_handle</mat-icon>
+                                <span>equal</span>
                             </mat-option>
                             <mat-option value="contains">
-                                contains
+                                <mat-icon class="comparator-icon">search</mat-icon>
+                                <span>contains</span>
                             </mat-option>
                             <mat-option value="icontains">
-                                not contains
+                                <mat-icon class="comparator-icon">block</mat-icon>
+                                <span>not contains</span>
                             </mat-option>
                             <mat-option value="empty">
-                                is empty
+                                <mat-icon class="comparator-icon">space_bar</mat-icon>
+                                <span>is empty</span>
                             </mat-option>
                         </mat-select>
                     </mat-form-field>
 
                     <mat-form-field *ngIf="getComparatorType(getInputType(value.key)) === 'number'"
-                        appearance="outline">
+                        appearance="outline"
+                        class="comparator-select-field">
                         <mat-select name="numberComparator-{{value.key}}"
                             [(ngModel)]="tableRowFieldsComparator[value.key]"
                             (ngModelChange)="updateComparator($event, value.key)">
                             <mat-option value="eq">
-                                equal
+                                <mat-icon class="comparator-icon">drag_handle</mat-icon>
+                                <span>equal</span>
                             </mat-option>
                             <mat-option value="gt">
-                                greater than
+                                <mat-icon class="comparator-icon">keyboard_arrow_right</mat-icon>
+                                <span>greater than</span>
                             </mat-option>
                             <mat-option value="lt">
-                                less than
+                                <mat-icon class="comparator-icon">keyboard_arrow_left</mat-icon>
+                                <span>less than</span>
                             </mat-option>
                             <mat-option value="gte">
-                                greater than or equal
+                                <mat-icon class="comparator-icon">keyboard_double_arrow_right</mat-icon>
+                                <span>greater than or equal</span>
                             </mat-option>
                             <mat-option value="lte">
-                                less than or equal
+                                <mat-icon class="comparator-icon">keyboard_double_arrow_left</mat-icon>
+                                <span>less than or equal</span>
                             </mat-option>
                         </mat-select>
                     </mat-form-field>
@@ -141,15 +174,47 @@ <h3 class="section-title">Conditions & main column</h3>
                     <mat-checkbox
                         [checked]="dynamicColumn === value.key"
                         (change)="toggleDynamicColumn(value.key)">
-                        Main column
+                        Editable
                     </mat-checkbox>
                 </div>
-                <button mat-icon-button type="button" class="filter-delete-button"
-                    matTooltip="Remove"
-                    (click)="removeFilter(value.key)">
-                    <mat-icon>close</mat-icon>
-                </button>
             </ng-container>
+
+            <!-- Add Condition Button -->
+            <div class="add-condition-container">
+                <button *ngIf="!showAddConditionField" mat-stroked-button type="button" (click)="handleAddConditionButtonClick()" class="add-condition-button accent-button">
+                    <mat-icon class="add-icon">add</mat-icon>
+                    <span>Add condition</span>
+                </button>
+                <mat-form-field *ngIf="showAddConditionField" class="filters-select empty-condition-input" appearance="outline" [class.mat-form-field-invalid]="showConditionsError">
+                    <mat-label>Click here to add condition</mat-label>
+                    <input type="text" matInput name="filter_columns"
+                        [matAutocomplete]="auto"
+                        [formControl]="fieldSearchControl"
+                        (blur)="handleInputBlur()"
+                        (input)="showConditionsError = false">
+                    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="addFilter($event)">
+                        <mat-option *ngFor="let field of foundFields | async"
+                            [ngClass]="{'disabled': field === 'No matches'}"
+                            [value]="field">
+                            {{field}}
+                        </mat-option>
+                    </mat-autocomplete>
+                    <button *ngIf="hasSelectedFilters"
+                        mat-icon-button
+                        matSuffix
+                        type="button"
+                        aria-label="Cancel adding condition"
+                        (click)="cancelAddConditionInput()">
+                        <mat-icon>close</mat-icon>
+                    </button>
+                    <mat-error *ngIf="showConditionsError">
+                        At least one condition is required
+                    </mat-error>
+                </mat-form-field>
+                <p *ngIf="showConditionsError && !showAddConditionField" class="conditions-error-message">
+                    At least one condition is required
+                </p>
+            </div>
         </mat-dialog-content>
     </ng-template>
 
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.ts b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.ts
index 1c658f9cf..dfe60c1e4 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-dialog/saved-filters-dialog.component.ts
@@ -1,11 +1,12 @@
 import { FormControl, FormsModule, ReactiveFormsModule, } from '@angular/forms';
 
 import { CommonModule } from '@angular/common';
-import { Component, Inject, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
 import { DynamicModule } from 'ng-dynamic-component';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatRadioModule } from '@angular/material/radio';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -36,6 +37,7 @@ import { Angulartics2, Angulartics2OnModule } from 'angulartics2';
     MatIconModule,
     MatSelectModule,
     MatCheckboxModule,
+    MatRadioModule,
     DynamicModule,
     RouterModule,
     MatDialogModule,
@@ -46,7 +48,7 @@ import { Angulartics2, Angulartics2OnModule } from 'angulartics2';
   templateUrl: './saved-filters-dialog.component.html',
   styleUrl: './saved-filters-dialog.component.css'
 })
-export class SavedFiltersDialogComponent implements OnInit {
+export class SavedFiltersDialogComponent implements OnInit, AfterViewInit {
   // @Input() connectionID: string;
   // @Input() tableName: string;
   // @Input() displayTableName: string;
@@ -68,6 +70,11 @@ export class SavedFiltersDialogComponent implements OnInit {
   public tableWidgetsList: string[] = [];
   public UIwidgets = UIwidgets;
   public dynamicColumn: string | null = null;
+  public showAddConditionField = false;
+  public showNameError = false;
+  public showConditionsError = false;
+
+  @ViewChild('tableFiltersForm') tableFiltersForm: any;
 
   constructor(
     @Inject(MAT_DIALOG_DATA) public data: any,
@@ -76,6 +83,7 @@ export class SavedFiltersDialogComponent implements OnInit {
     private dialogRef: MatDialogRef<SavedFiltersDialogComponent>,
     private snackBar: MatSnackBar,
     private angulartics2: Angulartics2,
+    private elementRef: ElementRef,
   ) {}
 
   ngOnInit(): void {
@@ -125,6 +133,35 @@ export class SavedFiltersDialogComponent implements OnInit {
     );
   }
 
+  ngAfterViewInit(): void {
+    // If editing an existing filter (has id), remove focus from the filter name input
+    if (this.data.filtersSet && this.data.filtersSet.id) {
+      setTimeout(() => {
+        const nameInput = this.elementRef.nativeElement.querySelector('input[name="filters_set_name"]') as HTMLInputElement;
+        if (nameInput && document.activeElement === nameInput) {
+          nameInput.blur();
+        }
+      }, 100);
+    }
+  }
+
+  get hasSelectedFilters(): boolean {
+    return Object.keys(this.tableRowFieldsShown).length > 0;
+  }
+
+  handleAddConditionButtonClick(): void {
+    this.showAddConditionField = true;
+    setTimeout(() => {
+      const input = this.elementRef.nativeElement.querySelector('input[name="filter_columns"]') as HTMLInputElement;
+      input?.focus();
+    }, 0);
+  }
+
+  cancelAddConditionInput(): void {
+    this.showAddConditionField = false;
+    this.fieldSearchControl.setValue('');
+  }
+
   private _filter(value: string): string[] {
     return this.fields.filter((field: string) => field.toLowerCase().includes(value.toLowerCase()));
   }
@@ -165,6 +202,10 @@ export class SavedFiltersDialogComponent implements OnInit {
   updateField = (updatedValue: any, field: string) => {
     this.tableRowFieldsShown[field] = updatedValue;
     this.updateFiltersCount();
+    // Reset conditions error when a filter is added
+    if (this.showConditionsError && Object.keys(this.tableRowFieldsShown).length > 0) {
+      this.showConditionsError = false;
+    }
   }
 
   addFilter(e) {
@@ -173,6 +214,22 @@ export class SavedFiltersDialogComponent implements OnInit {
     this.tableRowFieldsComparator = {...this.tableRowFieldsComparator, [key]: this.tableRowFieldsComparator[key] || 'eq'};
     this.fieldSearchControl.setValue('');
     this.updateFiltersCount();
+    // Reset conditions error when a filter is added
+    this.showConditionsError = false;
+    if (this.hasSelectedFilters) {
+      this.showAddConditionField = false;
+    }
+  }
+
+  handleInputBlur(): void {
+    // Hide the field if it's empty when it loses focus
+    if (!this.fieldSearchControl.value || this.fieldSearchControl.value.trim() === '') {
+      setTimeout(() => {
+        if (!this.fieldSearchControl.value || this.fieldSearchControl.value.trim() === '') {
+          this.cancelAddConditionInput();
+        }
+      }, 200);
+    }
   }
 
   updateComparator(event, fieldName: string) {
@@ -212,6 +269,22 @@ export class SavedFiltersDialogComponent implements OnInit {
     }
   }
 
+  getOperatorIcon(operator: string): string {
+    const iconMap: { [key: string]: string } = {
+      'startswith': 'play_arrow',
+      'endswith': 'play_arrow',
+      'eq': 'drag_handle',
+      'contains': 'search',
+      'icontains': 'block',
+      'empty': 'space_bar',
+      'gt': 'keyboard_arrow_right',
+      'lt': 'keyboard_arrow_left',
+      'gte': 'keyboard_double_arrow_right',
+      'lte': 'keyboard_double_arrow_left'
+    };
+    return iconMap[operator] || 'drag_handle';
+  }
+
   removeFilter(field) {
     delete this.tableRowFieldsShown[field];
     delete this.tableRowFieldsComparator[field];
@@ -219,6 +292,11 @@ export class SavedFiltersDialogComponent implements OnInit {
       this.dynamicColumn = null;
     }
     this.updateFiltersCount();
+    // Reset conditions error when filters are removed (will be re-validated on save)
+    this.showConditionsError = false;
+    if (!this.hasSelectedFilters) {
+      this.showAddConditionField = false;
+    }
   }
 
   updateFiltersCount() {
@@ -234,6 +312,58 @@ export class SavedFiltersDialogComponent implements OnInit {
   }
 
   handleSaveFilters() {
+    // Reset error flags
+    this.showNameError = false;
+    this.showConditionsError = false;
+
+    // Validate filter name
+    if (!this.data.filtersSet.name || this.data.filtersSet.name.trim() === '') {
+      this.showNameError = true;
+      setTimeout(() => {
+        const nameInput = this.elementRef.nativeElement.querySelector('input[name="filters_set_name"]') as HTMLInputElement;
+        if (nameInput) {
+          nameInput.focus();
+          nameInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+      }, 0);
+      return;
+    }
+
+    // Validate conditions - check if there are any filters
+    // A valid filter must have a comparator defined
+    // Either regular filters OR dynamic column with comparator should exist
+    const hasRegularFilters = Object.keys(this.tableRowFieldsShown).some(key => {
+      // Skip dynamic column for regular filter check
+      if (key === this.dynamicColumn) {
+        return false;
+      }
+      // Check if comparator is defined (even if value is empty/null, comparator must exist)
+      return this.tableRowFieldsComparator[key] !== undefined && this.tableRowFieldsComparator[key] !== null;
+    });
+
+    // Check if dynamic column has a comparator (it counts as a valid filter condition)
+    const hasDynamicColumnFilter = this.dynamicColumn && 
+      this.tableRowFieldsComparator[this.dynamicColumn] !== undefined && 
+      this.tableRowFieldsComparator[this.dynamicColumn] !== null;
+
+    if (!hasRegularFilters && !hasDynamicColumnFilter) {
+      this.showConditionsError = true;
+      setTimeout(() => {
+        const conditionInput = this.elementRef.nativeElement.querySelector('input[name="filter_columns"]') as HTMLInputElement;
+        if (conditionInput) {
+          conditionInput.focus();
+          conditionInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        } else {
+          // If input is not visible, show the add condition button area
+          const addButton = this.elementRef.nativeElement.querySelector('.add-condition-footer button') as HTMLElement;
+          if (addButton) {
+            addButton.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          }
+        }
+      }, 0);
+      return;
+    }
+
     let payload;
     if (Object.keys(this.tableRowFieldsShown).length) {
       let filters = {};
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css
index f8adcd240..c16ea7a84 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.css
@@ -1,19 +1,22 @@
 .saved-filters-container {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
 }
 
 .saved-filters-list {
 	display: flex;
 	align-items: center;
 	gap: 16px;
+	margin-bottom: 12px;
 }
 
 .saved-filters-list__first-time-button {
 	transition: background 0.3s ease;
 }
 
+.create-filter-button {
+}
+
 @media (prefers-color-scheme: light) {
 	.saved-filters-list__first-time-button {
 		background: var(--color-accentedPalette-50);
@@ -47,6 +50,100 @@
 	--mat-chip-elevated-selected-container-color: var(--color-accentedPalette-500) !important;
 	--mat-chip-container-height: 32px;
 	--mat-chip-label-text-color: rgba(0, 0, 0, 0.64);
+	--mdc-chip-container-shape-radius: 4px;
+	--mdc-chip-outline-width: 1px;
+	--mdc-chip-elevated-container-color: transparent !important;
+	--mdc-chip-elevated-selected-container-color: var(--color-accentedPalette-500) !important;
+	--mdc-chip-container-height: 32px;
+	--mdc-chip-label-text-color: rgba(0, 0, 0, 0.64);
+	--mdc-chip-selected-container-shape-leading-width: 0px;
+	--mdc-chip-with-icon-graphic-selected-container-shape-leading-width: 0px;
+	--mdc-chip-with-icon-graphic-selected-container-shape-leading-start-width: 0px;
+}
+
+.saved-filters-tabs ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--selected {
+	--mdc-chip-selected-container-elevation-shadow: none;
+}
+
+.saved-filters-tabs ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__checkmark {
+	display: none !important;
+	width: 0 !important;
+	min-width: 0 !important;
+	margin: 0 !important;
+	padding: 0 !important;
+}
+
+.saved-filters-tabs ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__checkmark-svg {
+	display: none !important;
+}
+
+.saved-filters-tabs ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__graphic {
+	display: none !important;
+	width: 0 !important;
+	min-width: 0 !important;
+	margin: 0 !important;
+	padding: 0 !important;
+}
+
+.saved-filters-tabs ::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__action {
+	padding-left: 16px !important;
+	padding-right: 8px !important;
+}
+
+.saved-filters-tabs ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action {
+	padding-left: 16px !important;
+	padding-right: 8px !important;
+}
+
+.saved-filters-tabs ::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--selected .mdc-evolution-chip__action .mdc-evolution-chip__action__content {
+	margin-left: 0 !important;
+	padding-left: 0 !important;
+	transform: translateX(0) !important;
+}
+
+.saved-filters-tabs ::ng-deep .filter-chip-wrapper {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.saved-filters-tabs ::ng-deep .mat-mdc-chip-action {
+	display: flex;
+	align-items: center;
+}
+
+.saved-filters-tabs ::ng-deep .mdc-evolution-chip__action {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+}
+
+.saved-filters-tabs ::ng-deep .mdc-evolution-chip__text-label {
+	display: flex;
+	align-items: center;
+	line-height: 1;
+}
+
+.filter-chip-content {
+	display: inline-block;
+	vertical-align: middle;
+	line-height: 1;
+}
+
+.filter-chip-menu-button {
+	opacity: 1;
+	width: 24px;
+	height: 24px;
+	line-height: 24px;
+	flex-shrink: 0;
+	margin-left: auto;
+	margin-right: -4px;
+}
+
+.filter-chip-menu-button mat-icon {
+	font-size: 18px;
+	width: 18px;
+	height: 18px;
 }
 
 @media (prefers-color-scheme: light) {
@@ -67,7 +164,9 @@
 
 .filters-container {
 	display: flex;
+	align-items: center;
 	gap: 20px;
+	margin-top: -8px;
 	transform: translateX(-10%) scale(0.8);
 }
 
@@ -78,16 +177,71 @@
 	}
 }
 
+.filters-where-label {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	margin-top: -2px !important;
+	white-space: nowrap;
+}
+
+.filters-where-label .column-name-icon {
+	font-size: 18px;
+	width: 18px;
+	height: 18px;
+	line-height: 18px;
+	vertical-align: middle;
+}
+
+@media (prefers-color-scheme: light) {
+	.filters-where-label {
+		color: rgba(0, 0, 0, 0.87);
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.filters-where-label {
+		color: rgba(255, 255, 255, 0.87);
+	}
+}
+
 .dynamic-column-editor {
 	display: flex;
 	align-items: center;
 	gap: 16px;
+	margin-left: 0;
 	/* transform: translateX(-20%) scale(0.8); */
 	/* transform-origin: center right; */
 }
 
 .column-name {
-	margin-top: -8px;
+	margin-top: -4px !important;
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	font-weight: 500;
+}
+
+.column-name-icon {
+	font-size: 18px;
+	width: 18px;
+	height: 18px;
+	line-height: 18px;
+	vertical-align: middle;
+}
+
+.comparator-icon {
+	font-size: 18px;
+	width: 18px;
+	height: 18px;
+	margin-right: 8px;
+	vertical-align: middle;
+}
+
+::ng-deep .mat-mdc-select-panel .mat-mdc-option {
+	display: flex;
+	align-items: center;
 }
 
 .comparator-text {
@@ -137,6 +291,7 @@
 	gap: 8px;
 	transform: translateX(5%) scale(1.1);
 	padding-bottom: 16px;
+	margin-left: 0;
 }
 
 @media (width <= 600px) {
@@ -147,6 +302,112 @@
 
 .static-filter-chip {
 	cursor: default;
+	pointer-events: none;
+}
+
+::ng-deep .static-filter-chip .mat-mdc-chip {
+	--mdc-chip-container-color: #E8ECEE !important;
+	--mdc-chip-elevated-container-color: #E8ECEE !important;
+	--mdc-chip-container-shape-radius: 16px !important;
+	background-color: #E8ECEE !important;
+	border-radius: 16px !important;
+	pointer-events: none !important;
+	cursor: default !important;
+}
+
+::ng-deep .static-filter-chip .mat-mdc-chip:hover {
+	--mdc-chip-container-color: #E8ECEE !important;
+	--mdc-chip-elevated-container-color: #E8ECEE !important;
+	background-color: #E8ECEE !important;
+	cursor: default !important;
+}
+
+::ng-deep .static-filter-chip .mat-mdc-chip:active {
+	--mdc-chip-container-color: #E8ECEE !important;
+	--mdc-chip-elevated-container-color: #E8ECEE !important;
+	background-color: #E8ECEE !important;
+	cursor: default !important;
+}
+
+::ng-deep .static-filter-chip .mdc-evolution-chip__cell {
+	background-color: #E8ECEE !important;
+	border-radius: 16px !important;
+}
+
+::ng-deep .static-filter-chip .mdc-evolution-chip__cell:hover {
+	background-color: #E8ECEE !important;
+}
+
+::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon {
+	--mdc-chip-container-color: #E8ECEE !important;
+	--mdc-chip-elevated-container-color: #E8ECEE !important;
+	background-color: #E8ECEE !important;
+	pointer-events: none !important;
+}
+
+::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon:hover {
+	--mdc-chip-container-color: #E8ECEE !important;
+	--mdc-chip-elevated-container-color: #E8ECEE !important;
+	background-color: #E8ECEE !important;
+	cursor: default !important;
+}
+
+::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon:active {
+	--mdc-chip-container-color: #E8ECEE !important;
+	--mdc-chip-elevated-container-color: #E8ECEE !important;
+	background-color: #E8ECEE !important;
+	cursor: default !important;
+}
+
+::ng-deep .static-filter-chip .mdc-evolution-chip__action {
+	pointer-events: none !important;
+	cursor: default !important;
+}
+
+@media (prefers-color-scheme: dark) {
+	::ng-deep .static-filter-chip .mat-mdc-chip {
+		--mdc-chip-container-color: #E8ECEE !important;
+		--mdc-chip-elevated-container-color: #E8ECEE !important;
+		background-color: #E8ECEE !important;
+	}
+
+	::ng-deep .static-filter-chip .mat-mdc-chip:hover {
+		--mdc-chip-container-color: #E8ECEE !important;
+		--mdc-chip-elevated-container-color: #E8ECEE !important;
+		background-color: #E8ECEE !important;
+	}
+
+	::ng-deep .static-filter-chip .mat-mdc-chip:active {
+		--mdc-chip-container-color: #E8ECEE !important;
+		--mdc-chip-elevated-container-color: #E8ECEE !important;
+		background-color: #E8ECEE !important;
+	}
+
+	::ng-deep .static-filter-chip .mdc-evolution-chip__cell {
+		background-color: #E8ECEE !important;
+	}
+
+	::ng-deep .static-filter-chip .mdc-evolution-chip__cell:hover {
+		background-color: #E8ECEE !important;
+	}
+
+	::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon {
+		--mdc-chip-container-color: #E8ECEE !important;
+		--mdc-chip-elevated-container-color: #E8ECEE !important;
+		background-color: #E8ECEE !important;
+	}
+
+	::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon:hover {
+		--mdc-chip-container-color: #E8ECEE !important;
+		--mdc-chip-elevated-container-color: #E8ECEE !important;
+		background-color: #E8ECEE !important;
+	}
+
+	::ng-deep .static-filter-chip .mat-mdc-chip.mdc-evolution-chip--with-primary-icon:active {
+		--mdc-chip-container-color: #E8ECEE !important;
+		--mdc-chip-elevated-container-color: #E8ECEE !important;
+		background-color: #E8ECEE !important;
+	}
 }
 
 /* .dynamic-column-editor + .static-filters {
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html
index 99b2f3bea..00f8b6716 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html
@@ -13,41 +13,53 @@
 
         <button *ngIf="accessLevel === 'edit' && savedFilterData.length !== 0"
             mat-icon-button type="button"
-            matTooltip="Set up, edit, or remove fast filters"
-            [matMenuTriggerFor]="menu"
+            class="create-filter-button"
+            matTooltip="Create new fast filter"
+            (click)="handleOpenSavedFiltersDialog()"
             angulartics2On="click"
-            angularticsAction="Saved filters: open menu is clicked">
-            <mat-icon>tune</mat-icon>
+            angularticsAction="Saved filters: create new filter is clicked">
+            <mat-icon>add</mat-icon>
         </button>
-        <mat-menu #menu="matMenu">
-            <button mat-menu-item (click)="handleOpenSavedFiltersDialog()">
-                <mat-icon>add</mat-icon>
-                New fast filter
-            </button>
-            <button mat-menu-item
-                *ngFor="let filter of savedFilterData"
-                (click)="handleOpenSavedFiltersDialog(filter)">
-                {{ filter.name }}
-            </button>
-        </mat-menu>
 
         <mat-chip-listbox [value]="selectedFilterSetId" class="saved-filters-tabs">
             <mat-chip-option *ngFor="let filter of savedFilterData"
                 [value]="filter.id"
-                (click)="selectFiltersSet(filter.id)">
-                {{ filter.name }}
+                (click)="selectFiltersSet(filter.id)"
+                class="filter-chip-wrapper">
+                <span class="filter-chip-content">{{ filter.name }}</span>
+                <button *ngIf="accessLevel === 'edit'"
+                    mat-icon-button
+                    type="button"
+                    class="filter-chip-menu-button"
+                    [matMenuTriggerFor]="filterMenu"
+                    (click)="$event.stopPropagation(); setCurrentFilter(filter)"
+                    matTooltip="Filter options">
+                    <mat-icon>more_vert</mat-icon>
+                </button>
             </mat-chip-option>
         </mat-chip-listbox>
+        <mat-menu #filterMenu="matMenu">
+            <button mat-menu-item (click)="handleEditFilter(currentFilterForMenu)">
+                <mat-icon fontSet="material-icons-outlined">create</mat-icon>
+                <span>Edit</span>
+            </button>
+            <button mat-menu-item (click)="handleDeleteFilter(currentFilterForMenu)">
+                <mat-icon fontSet="material-icons-outlined">delete</mat-icon>
+                <span>Delete</span>
+            </button>
+        </mat-menu>
     </div>
 
-    <div class="filters-container">
+    <div class="filters-container" *ngIf="savedFilterMap[selectedFilterSetId]?.dynamicColumn || savedFilterMap[selectedFilterSetId]?.staticFilters?.length">
+        <span class="filters-where-label mat-body-1">
+            <mat-icon class="column-name-icon">subdirectory_arrow_right</mat-icon>
+            where
+        </span>
         <form *ngIf="savedFilterMap[selectedFilterSetId]?.dynamicColumn"
             class="dynamic-column-editor"
             (ngSubmit)="applyDynamicColumnChanges()">
-            <span class="column-name mat-body-1">where
-                <strong *ngIf="getComparatorType(getInputType(savedFilterMap[selectedFilterSetId]?.dynamicColumn.column)) !== 'nonComparable'">
-                    {{ savedFilterMap[selectedFilterSetId]?.dynamicColumn.column }}
-                </strong>
+            <span class="column-name mat-body-1" *ngIf="getComparatorType(getInputType(savedFilterMap[selectedFilterSetId]?.dynamicColumn.column)) !== 'nonComparable'">
+                <strong>{{ savedFilterMap[selectedFilterSetId]?.dynamicColumn.column }}</strong>
                 <span *ngIf="getComparatorType(getInputType(savedFilterMap[selectedFilterSetId]?.dynamicColumn.column)) === 'text'" class="comparator-text">
                     {{ {startswith: 'starts with', endswith: 'ends with', eq: 'equal', contains: 'contains', icontains: 'not contains', empty: 'is empty'}[savedFilterMap[selectedFilterSetId].dynamicColumn.operator] }}
                 </span>
@@ -59,12 +71,30 @@
                 <mat-select [(ngModel)]="savedFilterMap[selectedFilterSetId].dynamicColumn.operator"
                         name="textComparator"
                         (ngModelChange)="updateDynamicColumnComparator($event)">
-                    <mat-option value="startswith">starts with</mat-option>
-                    <mat-option value="endswith">ends with</mat-option>
-                    <mat-option value="eq">equal</mat-option>
-                    <mat-option value="contains">contains</mat-option>
-                    <mat-option value="icontains">not contains</mat-option>
-                    <mat-option value="empty">is empty</mat-option>
+                    <mat-option value="startswith">
+                        <mat-icon class="comparator-icon">play_arrow</mat-icon>
+                        <span>starts with</span>
+                    </mat-option>
+                    <mat-option value="endswith">
+                        <mat-icon class="comparator-icon">play_arrow</mat-icon>
+                        <span>ends with</span>
+                    </mat-option>
+                    <mat-option value="eq">
+                        <mat-icon class="comparator-icon">drag_handle</mat-icon>
+                        <span>equal</span>
+                    </mat-option>
+                    <mat-option value="contains">
+                        <mat-icon class="comparator-icon">search</mat-icon>
+                        <span>contains</span>
+                    </mat-option>
+                    <mat-option value="icontains">
+                        <mat-icon class="comparator-icon">block</mat-icon>
+                        <span>not contains</span>
+                    </mat-option>
+                    <mat-option value="empty">
+                        <mat-icon class="comparator-icon">space_bar</mat-icon>
+                        <span>is empty</span>
+                    </mat-option>
                 </mat-select>
             </mat-form-field>
 
@@ -72,11 +102,26 @@
                 <mat-select [(ngModel)]="savedFilterMap[selectedFilterSetId].dynamicColumn.operator"
                             name="numberComparator"
                             (ngModelChange)="updateDynamicColumnComparator($event)">
-                    <mat-option value="eq">equal</mat-option>
-                    <mat-option value="gt">greater than</mat-option>
-                    <mat-option value="lt">less than</mat-option>
-                    <mat-option value="gte">greater than or equal</mat-option>
-                    <mat-option value="lte">less than or equal</mat-option>
+                    <mat-option value="eq">
+                        <mat-icon class="comparator-icon">drag_handle</mat-icon>
+                        <span>equal</span>
+                    </mat-option>
+                    <mat-option value="gt">
+                        <mat-icon class="comparator-icon">keyboard_arrow_right</mat-icon>
+                        <span>greater than</span>
+                    </mat-option>
+                    <mat-option value="lt">
+                        <mat-icon class="comparator-icon">keyboard_arrow_left</mat-icon>
+                        <span>less than</span>
+                    </mat-option>
+                    <mat-option value="gte">
+                        <mat-icon class="comparator-icon">keyboard_double_arrow_right</mat-icon>
+                        <span>greater than or equal</span>
+                    </mat-option>
+                    <mat-option value="lte">
+                        <mat-icon class="comparator-icon">keyboard_double_arrow_left</mat-icon>
+                        <span>less than or equal</span>
+                    </mat-option>
                 </mat-select>
             </mat-form-field>
 
@@ -133,7 +178,7 @@
                 ></ndc-dynamic>
             </div>
         </form>
-        <div class="static-filters">
+        <div class="static-filters" *ngIf="savedFilterMap[selectedFilterSetId]?.staticFilters?.length">
             <mat-chip *ngFor="let filter of savedFilterMap[selectedFilterSetId]?.staticFilters" class="static-filter-chip" data-hj-suppress>
                 {{ getFilter(filter) }}
             </mat-chip>
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.ts b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.ts
index 2423f9224..60a5274c8 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.ts
@@ -69,6 +69,7 @@ export class SavedFiltersPanelComponent implements OnInit, OnDestroy {
   public selectedFilterSetId: string | null = null;
   public selectedFilter: any = null;
   public shouldAutofocus: boolean = false;
+  public currentFilterForMenu: any = null;
 
   public tableStructure: any = null;
   public tableRowFieldsShown: { [key: string]: any } = {};
@@ -264,6 +265,29 @@ export class SavedFiltersPanelComponent implements OnInit, OnDestroy {
     // when 'filters set updated' is received
   }
 
+  setCurrentFilter(filter: any) {
+    this.currentFilterForMenu = filter;
+  }
+
+  handleEditFilter(filter: any) {
+    if (filter) {
+      this.handleOpenSavedFiltersDialog(filter);
+    }
+  }
+
+  handleDeleteFilter(filter: any) {
+    if (filter) {
+      this._tables.deleteSavedFilter(this.connectionID, this.selectedTableName, filter.id).subscribe({
+        next: () => {
+          // The deletion will trigger 'delete saved filters' event which will refresh the list
+        },
+        error: (error) => {
+          console.error('Error deleting filter:', error);
+        }
+      });
+    }
+  }
+
   getFilterEntries(filters: any): { column: string; operator: string; value: string }[] {
     if (!filters) return [];
 
@@ -371,6 +395,22 @@ export class SavedFiltersPanelComponent implements OnInit, OnDestroy {
     this.selectedFilter = entry;
   }
 
+  getOperatorIcon(operator: string): string {
+    const iconMap: { [key: string]: string } = {
+      'startswith': 'play_arrow',
+      'endswith': 'play_arrow',
+      'eq': 'drag_handle',
+      'contains': 'search',
+      'icontains': 'block',
+      'empty': 'space_bar',
+      'gt': 'keyboard_arrow_right',
+      'lt': 'keyboard_arrow_left',
+      'gte': 'keyboard_double_arrow_right',
+      'lte': 'keyboard_double_arrow_left'
+    };
+    return iconMap[operator] || 'drag_handle';
+  }
+
   getFilter(activeFilter: {column: string, operator: string, value: any}) {
     const displayedName = normalizeTableName(activeFilter.column);
     const comparator = activeFilter.operator;
diff --git a/frontend/src/app/components/dashboard/db-tables-data-source.ts b/frontend/src/app/components/dashboard/db-tables-data-source.ts
index 0ff513fb5..87062b140 100644
--- a/frontend/src/app/components/dashboard/db-tables-data-source.ts
+++ b/frontend/src/app/components/dashboard/db-tables-data-source.ts
@@ -1,7 +1,7 @@
 import { CollectionViewer } from '@angular/cdk/collections';
 import { DataSource } from '@angular/cdk/table';
 import { MatPaginator } from '@angular/material/paginator';
-import * as JSON5 from 'json5';
+import JSON5 from 'json5';
 import { filter } from 'lodash-es';
 import { BehaviorSubject, Observable, of } from 'rxjs';
 import { catchError, finalize } from 'rxjs/operators';
@@ -194,7 +194,7 @@ export class TablesDataSource implements DataSource<Object> {
 
                 try {
                   parsedParams = JSON5.parse(widget.widget_params);
-                } catch {
+                } catch (error) {
                   parsedParams = {};
                 }
 
diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts
index b5e970b63..cff2fac9e 100644
--- a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts
+++ b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts
@@ -14,7 +14,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import JsonURL from '@jsonurl/jsonurl';
-import * as JSON5 from 'json5';
+import JSON5 from 'json5';
 import { DynamicModule } from 'ng-dynamic-component';
 import { defaultTimestampValues, recordEditTypes, timestampTypes, UIwidgets } from 'src/app/consts/record-edit-types';
 import { formatFieldValue } from 'src/app/lib/format-field-value';
diff --git a/frontend/src/app/components/ui-components/record-view-fields/range/range.component.ts b/frontend/src/app/components/ui-components/record-view-fields/range/range.component.ts
index 8ba3118d5..e53e04d01 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/range/range.component.ts
+++ b/frontend/src/app/components/ui-components/record-view-fields/range/range.component.ts
@@ -44,6 +44,7 @@ export class RangeRecordViewComponent extends BaseRecordViewFieldComponent imple
   }
 
   private _parseWidgetParams(): void {
+    console.log('Parsing widget params:', this.widgetStructure?.widget_params);
     if (this.widgetStructure?.widget_params) {
       try {
         const params = this.widgetStructure.widget_params;
@@ -60,6 +61,7 @@ export class RangeRecordViewComponent extends BaseRecordViewFieldComponent imple
         console.error('Failed to parse widget params:', error);
       }
     }
+    console.log('Parsed widget params:', { min: this.min, max: this.max, step: this.step });
   }
 
   private _updateDisplayValue(): void {