diff --git a/ui-ngx/src/app/core/http/attribute.service.ts b/ui-ngx/src/app/core/http/attribute.service.ts
index c810a0af22..9022a47eef 100644
--- a/ui-ngx/src/app/core/http/attribute.service.ts
+++ b/ui-ngx/src/app/core/http/attribute.service.ts
@@ -53,8 +53,16 @@ export class AttributeService {
                                 startTs?: number, endTs?: number, rewriteLatestIfDeleted = false, deleteLatest = true,
                                 config?: RequestConfig): Observable<any> {
     const keys = timeseries.map(attribute => encodeURIComponent(attribute.key)).join(',');
-    let url = `/api/plugins/telemetry/${entityId.entityType}/${entityId.id}/timeseries/delete` +
-      `?keys=${keys}&deleteAllDataForKeys=${deleteAllDataForKeys}&rewriteLatestIfDeleted=${rewriteLatestIfDeleted}&deleteLatest=${deleteLatest}`;
+    let url = `/api/plugins/telemetry/${entityId.entityType}/${entityId.id}/timeseries/delete?keys=${keys}`;
+    if (isDefinedAndNotNull(deleteAllDataForKeys)) {
+      url += `&deleteAllDataForKeys=${deleteAllDataForKeys}`;
+    }
+    if (isDefinedAndNotNull(rewriteLatestIfDeleted)) {
+      url += `&rewriteLatestIfDeleted=${rewriteLatestIfDeleted}`;
+    }
+    if (isDefinedAndNotNull(deleteLatest)) {
+      url += `&deleteLatest=${deleteLatest}`;
+    }
     if (isDefinedAndNotNull(startTs)) {
       url += `&startTs=${startTs}`;
     }
diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
index 10a5b03dba..d94f08e29f 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.html
@@ -198,7 +198,7 @@
               <span [fxShow]="!isClientSideTelemetryTypeMap.get(attributeScope)">
                 <mat-icon>edit</mat-icon>
               </span>
-              <button mat-icon-button [fxShow]="attributeScope === latestTelemetryTypes.LATEST_TELEMETRY"
+              <button mat-icon-button *ngIf="attributeScope === latestTelemetryTypes.LATEST_TELEMETRY"
                       (click)="deleteTimeseries($event, attribute)">
                 <mat-icon>delete</mat-icon>
               </button>
diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts
index add0a5c1e0..0da11767a2 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts
@@ -38,7 +38,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { MatDialog } from '@angular/material/dialog';
 import { DialogService } from '@core/services/dialog.service';
 import { Direction, SortOrder } from '@shared/models/page/sort-order';
-import { fromEvent, merge, Observable } from 'rxjs';
+import { fromEvent, merge } from 'rxjs';
 import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 import { EntityId } from '@shared/models/id/entity-id';
 import {
@@ -48,7 +48,8 @@ import {
   isClientSideTelemetryType,
   LatestTelemetry,
   TelemetryType,
-  telemetryTypeTranslations, TimeseriesDeleteStrategy,
+  telemetryTypeTranslations,
+  TimeseriesDeleteStrategy,
   toTelemetryType
 } from '@shared/models/telemetry/telemetry.models';
 import { AttributeDatasource } from '@home/models/datasource/attribute-datasource';
@@ -88,7 +89,8 @@ import { hidePageSizePixelValue } from '@shared/models/constants';
 import { ResizeObserver } from '@juggle/resize-observer';
 import {
   DELETE_TIMESERIES_PANEL_DATA,
-  DeleteTimeseriesPanelComponent, DeleteTimeseriesPanelData
+  DeleteTimeseriesPanelComponent,
+  DeleteTimeseriesPanelData
 } from '@home/components/attribute/delete-timeseries-panel.component';
 
 
@@ -383,15 +385,19 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
     });
   }
 
-  deleteTimeseries($event: Event, attribute?: AttributeData) {
+  deleteTimeseries($event: Event, telemetry?: AttributeData) {
     if ($event) {
       $event.stopPropagation();
     }
-    const isMultipleDeletion = isUndefinedOrNull(attribute) && this.dataSource.selection.selected.length > 1;
+    const isMultipleDeletion = isUndefinedOrNull(telemetry) && this.dataSource.selection.selected.length > 1;
     const target = $event.target || $event.srcElement || $event.currentTarget;
-    const config = new OverlayConfig();
-    config.backdropClass = 'cdk-overlay-transparent-backdrop';
-    config.hasBackdrop = true;
+    const config = new OverlayConfig({
+      panelClass: 'tb-filter-panel',
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      hasBackdrop: true,
+      maxWidth: 488,
+      width: '100%'
+    });
     const connectedPosition: ConnectedPosition = {
       originX: 'start',
       originY: 'top',
@@ -400,8 +406,6 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
     };
     config.positionStrategy = this.overlay.position().flexibleConnectedTo(target as HTMLElement)
       .withPositions([connectedPosition]);
-    config.maxWidth = '488px';
-    config.width = '100%';
     const overlayRef = this.overlay.create(config);
     overlayRef.backdropClick().subscribe(() => {
       overlayRef.dispose();
@@ -411,7 +415,7 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
       {
         provide: DELETE_TIMESERIES_PANEL_DATA,
         useValue: {
-          isMultipleDeletion: isMultipleDeletion
+          isMultipleDeletion
         } as DeleteTimeseriesPanelData
       },
       {
@@ -425,31 +429,34 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI
     componentRef.onDestroy(() => {
       if (componentRef.instance.result !== null) {
         const result = componentRef.instance.result;
-        const deleteTimeseries = attribute ? [attribute]: this.dataSource.selection.selected;
+        const deleteTimeseries = telemetry ? [telemetry]: this.dataSource.selection.selected;
         let deleteAllDataForKeys = false;
         let rewriteLatestIfDeleted = false;
         let startTs = null;
         let endTs = null;
         let deleteLatest = true;
-        if (result.strategy === TimeseriesDeleteStrategy.DELETE_ALL_DATA) {
-          deleteAllDataForKeys = true;
-        }
-        if (result.strategy === TimeseriesDeleteStrategy.DELETE_ALL_DATA_EXCEPT_LATEST_VALUE) {
-          deleteAllDataForKeys = true;
-          deleteLatest = false;
-        }
-        if (result.strategy === TimeseriesDeleteStrategy.DELETE_LATEST_VALUE) {
-          rewriteLatestIfDeleted = result.rewriteLatest;
-          startTs = deleteTimeseries[0].lastUpdateTs;
-          endTs = startTs + 1;
-        }
-        if (result.strategy === TimeseriesDeleteStrategy.DELETE_ALL_DATA_FOR_TIME_PERIOD) {
-          startTs = result.startDateTime.getTime();
-          endTs = result.endDateTime.getTime();
-          rewriteLatestIfDeleted = result.rewriteLatest;
+        switch (result.strategy) {
+          case TimeseriesDeleteStrategy.DELETE_ALL_DATA:
+            deleteAllDataForKeys = true;
+            break;
+          case TimeseriesDeleteStrategy.DELETE_ALL_DATA_EXCEPT_LATEST_VALUE:
+            deleteAllDataForKeys = true;
+            deleteLatest = false;
+            break;
+          case TimeseriesDeleteStrategy.DELETE_LATEST_VALUE:
+            rewriteLatestIfDeleted = result.rewriteLatest;
+            startTs = deleteTimeseries[0].lastUpdateTs;
+            endTs = startTs + 1;
+            break;
+          case TimeseriesDeleteStrategy.DELETE_ALL_DATA_FOR_TIME_PERIOD:
+            startTs = result.startDateTime.getTime();
+            endTs = result.endDateTime.getTime();
+            rewriteLatestIfDeleted = result.rewriteLatest;
+            break;
         }
         this.attributeService.deleteEntityTimeseries(this.entityIdValue, deleteTimeseries, deleteAllDataForKeys,
-          startTs, endTs, rewriteLatestIfDeleted, deleteLatest).subscribe(() => this.reloadAttributes());
+                                                      startTs, endTs, rewriteLatestIfDeleted, deleteLatest)
+          .subscribe(() => this.reloadAttributes());
       }
     });
   }
diff --git a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
index aabac0bab4..5778fc6805 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
@@ -16,47 +16,41 @@
 
 -->
 
-<form [formGroup]="deleteTimeseriesFormGroup" style="max-width: 488px">
-  <mat-toolbar>
-    <h2>{{ "attribute.delete-timeseries.delete-strategy" | translate }}</h2>
-    <span fxFlex></span>
-    <button mat-icon-button
-            type="button"
-            (click)="cancel()">
-      <mat-icon class="material-icons">close</mat-icon>
-    </button>
-  </mat-toolbar>
-  <div style="padding: 16px; min-height: 188px">
-    <mat-form-field fxFlex class="mat-block">
-      <mat-label translate>attribute.delete-timeseries.strategy</mat-label>
-      <mat-select formControlName="strategy">
-        <mat-option *ngFor="let strategy of strategiesTranslationsMap.keys()" [value]="strategy">
-          {{ strategiesTranslationsMap.get(strategy) | translate }}
-        </mat-option>
-      </mat-select>
+<mat-toolbar>
+  <h2>{{ "attribute.delete-timeseries.delete-strategy" | translate }}</h2>
+  <span fxFlex></span>
+  <button mat-icon-button
+          type="button"
+          (click)="cancel()">
+    <mat-icon class="material-icons">close</mat-icon>
+  </button>
+</mat-toolbar>
+<form [formGroup]="deleteTimeseriesFormGroup" class="mat-content mat-padding tb-form-settings">
+  <mat-form-field class="mat-block" subscriptSizing="dynamic">
+    <mat-label translate>attribute.delete-timeseries.strategy</mat-label>
+    <mat-select formControlName="strategy">
+      <mat-option *ngFor="let strategy of strategiesTranslationsMap.keys()" [value]="strategy">
+        {{ strategiesTranslationsMap.get(strategy) | translate }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <div *ngIf="isPeriodStrategy()" class="tb-select-interval">
+    <mat-form-field class="mat-block" subscriptSizing="dynamic">
+      <mat-label translate>attribute.delete-timeseries.start-time</mat-label>
+      <mat-datetimepicker-toggle [for]="startDateTimePicker" matPrefix></mat-datetimepicker-toggle>
+      <mat-datetimepicker #startDateTimePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
+      <input required matInput formControlName="startDateTime" [matDatetimepicker]="startDateTimePicker">
+    </mat-form-field>
+    <mat-form-field class="mat-block" subscriptSizing="dynamic">
+      <mat-label translate>attribute.delete-timeseries.ends-on</mat-label>
+      <mat-datetimepicker-toggle [for]="endDatePicker" matPrefix></mat-datetimepicker-toggle>
+      <mat-datetimepicker #endDatePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
+      <input required matInput formControlName="endDateTime" [matDatetimepicker]="endDatePicker">
     </mat-form-field>
-    <div *ngIf="isPeriodStrategy()">
-      <div fxLayout="row" fxLayoutGap="22px" fxLayout.xs="column" fxLayoutGap.xs="8px">
-        <mat-form-field class="mat-block">
-          <mat-label translate>attribute.delete-timeseries.start-time</mat-label>
-          <mat-datetimepicker-toggle [for]="startDateTimePicker" matPrefix></mat-datetimepicker-toggle>
-          <mat-datetimepicker #startDateTimePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
-          <input required matInput formControlName="startDateTime" [matDatetimepicker]="startDateTimePicker">
-        </mat-form-field>
-        <mat-form-field class="mat-block">
-          <mat-label translate>attribute.delete-timeseries.ends-on</mat-label>
-          <mat-datetimepicker-toggle [for]="endDatePicker" matPrefix></mat-datetimepicker-toggle>
-          <mat-datetimepicker #endDatePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
-          <input required matInput formControlName="endDateTime" [matDatetimepicker]="endDatePicker">
-        </mat-form-field>
-      </div>
-    </div>
-    <div *ngIf="isPeriodStrategy() || isDeleteLatestStrategy()">
-      <mat-slide-toggle formControlName="rewriteLatest">
-        {{ "attribute.delete-timeseries.rewrite-latest-value" | translate }}
-      </mat-slide-toggle>
-    </div>
   </div>
+  <mat-slide-toggle class="tb-slide-toggle" formControlName="rewriteLatest" *ngIf="isPeriodStrategy() || isDeleteLatestStrategy()">
+    {{ "attribute.delete-timeseries.rewrite-latest-value" | translate }}
+  </mat-slide-toggle>
 </form>
 <div fxLayout="row" class="tb-panel-actions">
   <span fxFlex></span>
diff --git a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.scss b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.scss
index d223b29b47..c9a0e527f7 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.scss
+++ b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.scss
@@ -13,16 +13,32 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../../../../scss/constants';
 
 :host {
   width: 100%;
-  background-color: #fff;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
-}
 
-:host ::ng-deep{
-  form .mat-toolbar {
+  .mat-toolbar {
     background: none;
   }
+
+  .tb-form-settings {
+    flex-direction: column;
+    gap: 16px;
+    padding-top: 0;
+  }
+
+  .tb-select-interval {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    @media #{$mat-xs} {
+      flex-direction: column;
+      gap: 0;
+    }
+  }
+
+  .tb-slide-toggle {
+    margin-bottom: 8px;
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.ts b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.ts
index 8adb9bcd5a..94c66b3734 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.ts
@@ -51,34 +51,33 @@ export class DeleteTimeseriesPanelComponent implements OnInit, OnDestroy {
 
   strategiesTranslationsMap = timeseriesDeleteStrategyTranslations;
 
-  multipleDeletionStrategies = [
+  private multipleDeletionStrategies = new Set<TimeseriesDeleteStrategy>([
     TimeseriesDeleteStrategy.DELETE_ALL_DATA,
     TimeseriesDeleteStrategy.DELETE_ALL_DATA_EXCEPT_LATEST_VALUE
-  ];
+  ]);
 
   private destroy$ = new Subject<void>();
 
-  constructor(@Inject(DELETE_TIMESERIES_PANEL_DATA) public data: DeleteTimeseriesPanelData,
-              public overlayRef: OverlayRef,
-              public fb: FormBuilder) { }
+  constructor(@Inject(DELETE_TIMESERIES_PANEL_DATA) private data: DeleteTimeseriesPanelData,
+              private overlayRef: OverlayRef,
+              private fb: FormBuilder) { }
 
   ngOnInit(): void {
     const today = new Date();
     if (this.data.isMultipleDeletion) {
-      this.strategiesTranslationsMap = new Map(Array.from(this.strategiesTranslationsMap.entries())
-        .filter(([strategy]) => {
-          return this.multipleDeletionStrategies.includes(strategy);
-      }))
+      this.strategiesTranslationsMap = new Map(Array.from(this.strategiesTranslationsMap)
+        .filter(([strategy]) => this.multipleDeletionStrategies.has(strategy)))
     }
     this.deleteTimeseriesFormGroup = this.fb.group({
       strategy: [TimeseriesDeleteStrategy.DELETE_ALL_DATA],
       startDateTime: [
         { value: new Date(today.getFullYear(), today.getMonth() - 1, today.getDate()), disabled: true },
-        [Validators.required]
+        Validators.required
       ],
-      endDateTime: [{ value: today, disabled: true }, [Validators.required]],
+      endDateTime: [{ value: today, disabled: true }, Validators.required],
       rewriteLatest: [true]
     })
+
     this.deleteTimeseriesFormGroup.get('strategy').valueChanges.pipe(
       takeUntil(this.destroy$)
     ).subscribe(value => {
@@ -124,7 +123,7 @@ export class DeleteTimeseriesPanelComponent implements OnInit, OnDestroy {
     return this.deleteTimeseriesFormGroup.get('strategy').value === TimeseriesDeleteStrategy.DELETE_LATEST_VALUE;
   }
 
-  onStartDateTimeChange(newStartDateTime: Date) {
+  private onStartDateTimeChange(newStartDateTime: Date) {
     if (newStartDateTime) {
       const endDateTimeTs = this.deleteTimeseriesFormGroup.get('endDateTime').value.getTime();
       if (newStartDateTime.getTime() >= endDateTimeTs) {
@@ -137,7 +136,7 @@ export class DeleteTimeseriesPanelComponent implements OnInit, OnDestroy {
     }
   }
 
-  onEndDateTimeChange(newEndDateTime: Date) {
+  private onEndDateTimeChange(newEndDateTime: Date) {
     if (newEndDateTime) {
       const startDateTimeTs = this.deleteTimeseriesFormGroup.get('startDateTime').value.getTime();
       if (newEndDateTime.getTime() <= startDateTimeTs) {