diff --git a/libs/vre/shared/app-representations/src/lib/region.service.ts b/libs/vre/shared/app-representations/src/lib/region.service.ts
index c9f22382af..0591b234d7 100644
--- a/libs/vre/shared/app-representations/src/lib/region.service.ts
+++ b/libs/vre/shared/app-representations/src/lib/region.service.ts
@@ -2,15 +2,16 @@ import { Injectable } from '@angular/core';
 import { ReadResourceSequence } from '@dasch-swiss/dsp-js';
 import { DspResource, GenerateProperty } from '@dasch-swiss/vre/shared/app-common';
 import { IncomingService } from '@dasch-swiss/vre/shared/app-common-to-move';
-import { BehaviorSubject, of } from 'rxjs';
-import { map, switchMap } from 'rxjs/operators';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { map, takeUntil, tap } from 'rxjs/operators';
 
 /**
  * Regions, also called annotations, are used to mark specific areas on an image.
+ * This service handles the loading, display and selection of a resource's regions.
  */
 @Injectable()
 export class RegionService {
-  private _resource!: DspResource;
+  private _resourceId!: string;
 
   private _regionsSubject = new BehaviorSubject<DspResource[]>([]);
   regions$ = this._regionsSubject.asObservable();
@@ -22,47 +23,45 @@ export class RegionService {
   private _showRegions = new BehaviorSubject(false);
   showRegions$ = this._showRegions.asObservable();
 
-  private _highlightRegion = new BehaviorSubject<string | null>(null);
-  highlightRegion$ = this.showRegions$.pipe(
-    switchMap(value => (value ? this._highlightRegion.asObservable() : of(null)))
-  );
+  private _selectedRegion = new BehaviorSubject<string | null>(null);
+  selectedRegion$ = this._selectedRegion.asObservable();
 
-  private _imageIsLoadedSubject = new BehaviorSubject(false);
-  imageIsLoaded$ = this._imageIsLoadedSubject.asObservable();
+  private _ngUnsubscribe = new Subject<void>();
 
   constructor(private _incomingService: IncomingService) {}
 
-  onInit(resource: DspResource) {
-    this._resource = resource;
-    this.updateRegions();
+  /** This method acts as a constructor. */
+  initialize(resourceId: string) {
+    this._resourceId = resourceId;
+    this.updateRegions$().pipe(takeUntil(this._ngUnsubscribe)).subscribe();
   }
 
-  showRegions(value: boolean) {
-    this._showRegions.next(value);
+  updateRegions$() {
+    return this._getIncomingRegions(this._resourceId).pipe(
+      tap(res => {
+        this._regionsSubject.next(res);
+      })
+    );
   }
 
-  updateRegions() {
-    this._incomingService
-      .getIncomingRegions(this._resource.res.id, 0)
-      .pipe(
-        map(regions =>
-          (regions as ReadResourceSequence).resources.map(_resource => {
-            const z = new DspResource(_resource);
-            z.resProps = GenerateProperty.regionProperty(_resource);
-            return z;
-          })
-        )
-      )
-      .subscribe(res => {
-        this._regionsSubject.next(res);
-      });
+  showRegions(value: boolean) {
+    this._showRegions.next(value);
   }
 
-  highlightRegion(regionIri: string) {
-    this._highlightRegion.next(regionIri);
+  selectRegion(regionIri: string) {
+    this._selectedRegion.next(regionIri);
   }
 
-  imageIsLoaded() {
-    this._imageIsLoadedSubject.next(true);
+  private _getIncomingRegions(resourceId: string) {
+    const offset = 0;
+    return this._incomingService.getIncomingRegions(resourceId, offset).pipe(
+      map(regions =>
+        (regions as ReadResourceSequence).resources.map(_resource => {
+          const z = new DspResource(_resource);
+          z.resProps = GenerateProperty.regionProperty(_resource);
+          return z;
+        })
+      )
+    );
   }
 }
diff --git a/libs/vre/shared/app-representations/src/lib/still-image/open-sea-dragon.service.ts b/libs/vre/shared/app-representations/src/lib/still-image/open-sea-dragon.service.ts
index 8f15fd6b63..12e61ad8f3 100644
--- a/libs/vre/shared/app-representations/src/lib/still-image/open-sea-dragon.service.ts
+++ b/libs/vre/shared/app-representations/src/lib/still-image/open-sea-dragon.service.ts
@@ -1,25 +1,48 @@
 import { Injectable } from '@angular/core';
+import { Point2D } from '@dasch-swiss/dsp-js';
+import { AppError } from '@dasch-swiss/vre/shared/app-error-handler';
 import { AccessTokenService } from '@dasch-swiss/vre/shared/app-session';
-import * as OpenSeadragon from 'openseadragon';
+import OpenSeadragon from 'openseadragon';
+import { Subject } from 'rxjs';
 import { osdViewerConfig } from './osd-viewer.config';
 
-@Injectable()
-export class OpenSeaDragonService {
-  private _viewer!: OpenSeadragon.Viewer;
+interface Overlay {
+  startPoint: Point2D;
+  endPoint: Point2D;
+  imageSize: Point2D;
+  overlay: Element;
+}
 
-  get viewer(): OpenSeadragon.Viewer {
+@Injectable({ providedIn: 'root' })
+export class OpenSeaDragonService {
+  get viewer() {
     return this._viewer;
   }
 
-  set viewer(htmlElement: HTMLElement) {
-    const accessToken = this._accessToken.getAccessToken();
+  private readonly _OVERLAY_COLOR = 'rgba(255,0,0,0.3)';
+  private readonly ZOOM_FACTOR = 0.2;
+
+  private _viewer!: OpenSeadragon.Viewer;
+
+  private _rectangleInDrawing: {
+    overlayElement: HTMLElement;
+    startPos: OpenSeadragon.Point;
+    endPos?: OpenSeadragon.Point;
+  } | null = null;
+
+  private _createdRectangleSubject = new Subject<Overlay>();
+  createdRectangle$ = this._createdRectangleSubject.asObservable();
 
+  constructor(private _accessToken: AccessTokenService) {}
+
+  onInit(htmlElement: HTMLElement) {
     const viewerConfig: OpenSeadragon.Options = {
       ...osdViewerConfig,
       element: htmlElement,
       loadTilesWithAjax: true,
     };
 
+    const accessToken = this._accessToken.getAccessToken();
     if (accessToken) {
       viewerConfig.ajaxHeaders = {
         Authorization: `Bearer ${accessToken}`,
@@ -27,7 +50,77 @@ export class OpenSeaDragonService {
     }
 
     this._viewer = new OpenSeadragon.Viewer(viewerConfig);
+    this._trackClickEvents(this._viewer);
   }
 
-  constructor(private _accessToken: AccessTokenService) {}
+  zoom(direction: 1 | -1) {
+    this._viewer.viewport.zoomBy(1 + direction * this.ZOOM_FACTOR);
+  }
+
+  private _trackClickEvents(viewer: OpenSeadragon.Viewer) {
+    return new OpenSeadragon.MouseTracker({
+      element: viewer.canvas,
+      pressHandler: event => {
+        if (viewer.isMouseNavEnabled()) {
+          return;
+        }
+
+        const overlayElement: HTMLElement = document.createElement('div');
+        overlayElement.style.background = this._OVERLAY_COLOR;
+        const viewportPos = viewer.viewport.pointFromPixel((event as OpenSeadragon.ViewerEvent).position!);
+        viewer.addOverlay(overlayElement, new OpenSeadragon.Rect(viewportPos.x, viewportPos.y, 0, 0));
+        this._rectangleInDrawing = {
+          overlayElement,
+          startPos: viewportPos,
+        };
+      },
+      dragHandler: event => {
+        if (viewer.isMouseNavEnabled()) {
+          return;
+        }
+
+        if (!this._rectangleInDrawing) {
+          throw new AppError('Rectangle is not set');
+        }
+
+        const viewPortPos = viewer.viewport.pointFromPixel((event as OpenSeadragon.ViewerEvent).position!);
+        const diffX = viewPortPos.x - this._rectangleInDrawing.startPos.x;
+        const diffY = viewPortPos.y - this._rectangleInDrawing.startPos.y;
+        const location = new OpenSeadragon.Rect(
+          Math.min(this._rectangleInDrawing.startPos.x, this._rectangleInDrawing.startPos.x + diffX),
+          Math.min(this._rectangleInDrawing.startPos.y, this._rectangleInDrawing.startPos.y + diffY),
+          Math.abs(diffX),
+          Math.abs(diffY)
+        );
+
+        viewer.updateOverlay(this._rectangleInDrawing.overlayElement, location);
+        this._rectangleInDrawing.endPos = viewPortPos;
+      },
+      releaseHandler: () => {
+        if (viewer.isMouseNavEnabled()) {
+          return;
+        }
+
+        if (!this._rectangleInDrawing) {
+          throw new AppError('Rectangle is not set');
+        }
+
+        if (!this._rectangleInDrawing.endPos) {
+          return;
+        }
+
+        const imageSize = viewer.world.getItemAt(0).getContentSize();
+        const startPoint = viewer.viewport.viewportToImageCoordinates(this._rectangleInDrawing.startPos);
+        const endPoint = viewer.viewport.viewportToImageCoordinates(this._rectangleInDrawing.endPos);
+        this._createdRectangleSubject.next({
+          startPoint,
+          endPoint,
+          imageSize,
+          overlay: this._rectangleInDrawing.overlayElement,
+        });
+
+        this._rectangleInDrawing = null;
+      },
+    });
+  }
 }
diff --git a/libs/vre/shared/app-representations/src/lib/still-image/osd-drawer.service.ts b/libs/vre/shared/app-representations/src/lib/still-image/osd-drawer.service.ts
index 116b4b40dd..3b6ad5f742 100644
--- a/libs/vre/shared/app-representations/src/lib/still-image/osd-drawer.service.ts
+++ b/libs/vre/shared/app-representations/src/lib/still-image/osd-drawer.service.ts
@@ -1,41 +1,33 @@
-import { ChangeDetectorRef, Inject, Injectable, Renderer2 } from '@angular/core';
+import { ChangeDetectorRef, Inject, Injectable, OnDestroy } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import {
   Constants,
   KnoraApiConnection,
-  Point2D,
   ReadColorValue,
   ReadResource,
   ReadStillImageFileValue,
   RegionGeometry,
 } from '@dasch-swiss/dsp-js';
+import { DspResource } from '@dasch-swiss/vre/shared/app-common';
 import { DspApiConnectionToken } from '@dasch-swiss/vre/shared/app-config';
-import { AppError } from '@dasch-swiss/vre/shared/app-error-handler';
 import * as OpenSeadragon from 'openseadragon';
-import { filter, switchMap } from 'rxjs/operators';
+import { combineLatest, of, Subject } from 'rxjs';
+import { filter, map, switchMap, takeUntil } from 'rxjs/operators';
 import { AddRegionFormDialogComponent, AddRegionFormDialogProps } from '../add-region-form-dialog.component';
 import { RegionService } from '../region.service';
+import { OpenSeaDragonService } from './open-sea-dragon.service';
 import { PolygonsForRegion } from './polygons-for-region.interface';
 import { StillImageHelper } from './still-image-helper';
 
 @Injectable()
-export class OsdDrawerService {
+export class OsdDrawerService implements OnDestroy {
   resource!: ReadResource;
 
-  private _regionDragInfo: {
-    overlayElement: HTMLElement;
-    startPos: OpenSeadragon.Point;
-    endPos?: OpenSeadragon.Point;
-  } | null = null; // stores the information of the first click for drawing a region
-  private _regions: PolygonsForRegion = {};
-
-  public viewer!: OpenSeadragon.Viewer;
-
-  public readonly ZOOM_FACTOR = 0.2;
-  private readonly _REGION_COLOR = 'rgba(255,0,0,0.3)';
+  private _paintedPolygons: PolygonsForRegion = {};
+  private _ngUnsubscribe = new Subject<void>();
 
   constructor(
-    private _renderer: Renderer2,
+    private _osd: OpenSeaDragonService,
     private _regionService: RegionService,
     @Inject(DspApiConnectionToken)
     private _dspApiConnection: KnoraApiConnection,
@@ -43,98 +35,120 @@ export class OsdDrawerService {
     private _cdr: ChangeDetectorRef
   ) {}
 
-  onInit(viewer: OpenSeadragon.Viewer, resource: ReadResource): void {
+  onInit(resource: ReadResource): void {
     this.resource = resource;
-    this.viewer = viewer;
-
-    this._regionService.imageIsLoaded$
-      .pipe(
-        filter(loaded => loaded),
-        switchMap(() => this._regionService.regions$),
-        switchMap(() => this._regionService.showRegions$)
-      )
-      .subscribe(showRegion => {
-        this._regions = {};
 
-        if (showRegion) {
-          this._renderRegions();
-        }
-      });
+    this._subscribeToRegions();
+    this._subscribeToSelectedRegion();
+    this._subscribeToCreatedRectangle();
+  }
 
-    this._regionService.highlightRegion$.subscribe(region => {
+  private _subscribeToSelectedRegion() {
+    this._regionService.selectedRegion$.pipe(takeUntil(this._ngUnsubscribe)).subscribe(region => {
+      this._unhighlightAllRegions();
       if (region === null) {
-        this._unhighlightAllRegions();
         return;
       }
       this._highlightRegion(region);
     });
   }
 
-  public trackClickEvents() {
-    const viewer = this.viewer;
-    return new OpenSeadragon.MouseTracker({
-      element: viewer.canvas,
-      pressHandler: event => {
-        if (viewer.isMouseNavEnabled()) {
-          return;
+  private _subscribeToRegions() {
+    combineLatest([this._regionService.showRegions$, this._regionService.regions$])
+      .pipe(takeUntil(this._ngUnsubscribe))
+      .subscribe(([showRegions, regions]) => {
+        if (!showRegions) {
+          this._removeOverlays();
         }
 
-        const overlayElement: HTMLElement = this._renderer.createElement('div');
-        overlayElement.style.background = this._REGION_COLOR;
-        const viewportPos = viewer.viewport.pointFromPixel((event as OpenSeadragon.ViewerEvent).position!);
-        viewer.addOverlay(overlayElement, new OpenSeadragon.Rect(viewportPos.x, viewportPos.y, 0, 0));
-        this._regionDragInfo = {
-          overlayElement,
-          startPos: viewportPos,
-        };
-      },
-      dragHandler: event => {
-        if (viewer.isMouseNavEnabled()) {
-          return;
-        }
-
-        if (!this._regionDragInfo) {
-          throw new AppError('Region drag info is not set');
+        if (showRegions) {
+          this._removeOverlays(regions);
+          this._renderRegions();
         }
+      });
+  }
 
-        const viewPortPos = viewer.viewport.pointFromPixel((event as OpenSeadragon.ViewerEvent).position!);
-        const diffX = viewPortPos.x - this._regionDragInfo.startPos.x;
-        const diffY = viewPortPos.y - this._regionDragInfo.startPos.y;
-        const location = new OpenSeadragon.Rect(
-          Math.min(this._regionDragInfo.startPos.x, this._regionDragInfo.startPos.x + diffX),
-          Math.min(this._regionDragInfo.startPos.y, this._regionDragInfo.startPos.y + diffY),
-          Math.abs(diffX),
-          Math.abs(diffY)
-        );
-
-        viewer.updateOverlay(this._regionDragInfo.overlayElement, location);
-        this._regionDragInfo.endPos = viewPortPos;
-      },
-      releaseHandler: () => {
-        if (viewer.isMouseNavEnabled()) {
-          return;
-        }
+  private _subscribeToCreatedRectangle() {
+    this._osd.createdRectangle$
+      .pipe(takeUntil(this._ngUnsubscribe))
+      .pipe(
+        switchMap(overlay =>
+          this._dialog
+            .open<AddRegionFormDialogComponent, AddRegionFormDialogProps>(AddRegionFormDialogComponent, {
+              data: {
+                resourceIri: this.resource.id,
+              },
+            })
+            .afterClosed()
+            .pipe(map(data => ({ data, overlay })))
+        )
+      )
+      .pipe(
+        switchMap(({ data, overlay }) => {
+          this._osd.viewer.setMouseNavEnabled(true);
+          this._osd.viewer.removeOverlay(overlay.overlay);
+          this._cdr.detectChanges();
+
+          if (!data) {
+            // User pressed on cancel
+            return of(null);
+          }
+
+          return this._dspApiConnection.v2.res.createResource(
+            StillImageHelper.getPayloadUploadRegion(
+              this.resource.id,
+              this.resource.attachedToProject,
+              overlay.startPoint,
+              overlay.endPoint,
+              overlay.imageSize,
+              data.color,
+              data.comment,
+              data.label
+            )
+          );
+        }),
+        filter(data => !!data),
+        takeUntil(this._ngUnsubscribe),
+        switchMap(res =>
+          this._regionService.updateRegions$().pipe(
+            map(() => {
+              return res;
+            })
+          )
+        )
+      )
+      .subscribe(res => {
+        const regionId = (res as ReadResource).id;
+        this._regionService.selectRegion(regionId);
+      });
+  }
 
-        if (!this._regionDragInfo) {
-          throw new AppError('Region drag info and draw mode are not set');
-        }
-        const imageSize = viewer.world.getItemAt(0).getContentSize();
-        const startPoint = viewer.viewport.viewportToImageCoordinates(this._regionDragInfo.startPos);
-        const endPoint = viewer.viewport.viewportToImageCoordinates(this._regionDragInfo.endPos!);
-        this._openRegionDialog(startPoint, endPoint, imageSize, this._regionDragInfo.overlayElement);
-        this._regionDragInfo = null;
-        viewer.setMouseNavEnabled(false);
-      },
+  private _removeOverlays(keep: DspResource[] = []): void {
+    const elementsToRemove = this._getPolygonsToRemove(keep.map(r => r.res.id));
+    elementsToRemove.forEach(r => {
+      const e = this._osd.viewer.getOverlayById(r);
+      if (e) {
+        delete this._paintedPolygons[r];
+        this._osd.viewer.clearOverlays();
+        this._cdr.detectChanges();
+      }
     });
   }
 
+  private _getPolygonsToRemove(keep: string[] = []): string[] {
+    if (!keep.length) {
+      return Object.keys(this._paintedPolygons);
+    }
+    return Object.keys(this._paintedPolygons).filter(el => !keep.includes(el));
+  }
+
   private _renderRegions() {
     let imageXOffset = 0; // see documentation in this.openImages() for the usage of imageXOffset
 
     const stillImage = this.resource.properties[Constants.HasStillImageFileValue][0] as ReadStillImageFileValue;
     const aspectRatio = stillImage.dimY / stillImage.dimX;
 
-    const geometries = StillImageHelper.collectAndSortGeometries(this._regionService.regions, this._regions);
+    const geometries = StillImageHelper.collectAndSortGeometries(this._regionService.regions, this._paintedPolygons);
 
     // render all geometries for this page
     for (const geom of geometries) {
@@ -164,71 +178,23 @@ export class OsdDrawerService {
     regionLabel: string,
     regionComment: string
   ): void {
-    const viewer = this.viewer;
-
-    const { regEle, loc } = this._createRectangle(geometry, aspectRatio);
-    viewer
+    const { regEle, loc } = this._createRectangle(regionIri, geometry, aspectRatio);
+    this._osd.viewer
       .addOverlay({
+        id: regionIri,
         element: regEle,
         location: loc,
       })
       .addHandler('canvas-click', event => {
-        this._regionService.highlightRegion((<any>event).originalTarget.dataset.regionIri);
+        this._regionService.selectRegion((<any>event).originalTarget.dataset.regionIri);
       });
 
-    this._regions[regionIri].push(regEle);
+    this._paintedPolygons[regionIri].push(regEle);
     this._createTooltip(regionLabel, regionComment, regEle, regionIri);
   }
 
-  private _openRegionDialog(startPoint: Point2D, endPoint: Point2D, imageSize: Point2D, overlay: Element): void {
-    this._dialog
-      .open<AddRegionFormDialogComponent, AddRegionFormDialogProps>(AddRegionFormDialogComponent, {
-        data: {
-          resourceIri: this.resource.id,
-        },
-      })
-      .afterClosed()
-      .subscribe(data => {
-        this.viewer.setMouseNavEnabled(true);
-        this._cdr.detectChanges();
-        this.viewer.removeOverlay(overlay);
-        if (data) {
-          this._uploadRegion(startPoint, endPoint, imageSize, data.color, data.comment, data.label);
-        }
-      });
-  }
-
-  private _uploadRegion(
-    startPoint: Point2D,
-    endPoint: Point2D,
-    imageSize: Point2D,
-    color: string,
-    comment: string,
-    label: string
-  ) {
-    this._dspApiConnection.v2.res
-      .createResource(
-        StillImageHelper.getPayloadUploadRegion(
-          this.resource.id,
-          this.resource.attachedToProject,
-          startPoint,
-          endPoint,
-          imageSize,
-          color,
-          comment,
-          label
-        )
-      )
-      .subscribe(res => {
-        const regionId = (res as ReadResource).id;
-        this._regionService.showRegions(true);
-        this._regionService.updateRegions();
-        this._regionService.highlightRegion(regionId);
-      });
-  }
-
   private _highlightRegion(regionIri: string) {
-    const activeRegions: HTMLElement[] = this._regions[regionIri];
+    const activeRegions: HTMLElement[] = this._paintedPolygons[regionIri];
 
     if (activeRegions !== undefined) {
       for (const pol of activeRegions) {
@@ -238,9 +204,9 @@ export class OsdDrawerService {
   }
 
   private _unhighlightAllRegions() {
-    for (const reg in this._regions) {
-      if (reg in this._regions) {
-        for (const pol of this._regions[reg]) {
+    for (const reg in this._paintedPolygons) {
+      if (reg in this._paintedPolygons) {
+        for (const pol of this._paintedPolygons[reg]) {
           pol.setAttribute('class', 'region');
         }
       }
@@ -248,6 +214,7 @@ export class OsdDrawerService {
   }
 
   private _createRectangle(
+    regionIri: string,
     geometry: RegionGeometry,
     aspectRatio: number
   ): {
@@ -257,8 +224,8 @@ export class OsdDrawerService {
     const lineColor = geometry.lineColor;
     const lineWidth = geometry.lineWidth;
 
-    const regEle: HTMLElement = this._renderer.createElement('div');
-    regEle.id = `region-overlay-${Math.random() * 10000}`;
+    const regEle: HTMLElement = document.createElement('div');
+    regEle.id = regionIri;
     regEle.className = 'region';
     regEle.setAttribute('style', `outline: solid ${lineColor} ${lineWidth}px;`);
     regEle.setAttribute('data-cy', 'annotation-rectangle');
@@ -278,7 +245,7 @@ export class OsdDrawerService {
   }
 
   private _createTooltip(regionLabel: string, regionComment: string, regEle: HTMLElement, regionIri: string): void {
-    const comEle: HTMLElement = this._renderer.createElement('div');
+    const comEle: HTMLElement = document.createElement('div');
     comEle.className = 'annotation-tooltip';
     comEle.innerHTML = `<strong>${regionLabel}</strong><br>${regionComment}`;
     regEle.append(comEle);
@@ -291,4 +258,8 @@ export class OsdDrawerService {
     });
     regEle.dataset['regionIri'] = regionIri;
   }
+
+  ngOnDestroy() {
+    this._ngUnsubscribe.complete();
+  }
 }
diff --git a/libs/vre/shared/app-representations/src/lib/still-image/still-image-toolbar.component.html b/libs/vre/shared/app-representations/src/lib/still-image/still-image-toolbar.component.html
index 33d8e52352..0a47a59652 100644
--- a/libs/vre/shared/app-representations/src/lib/still-image/still-image-toolbar.component.html
+++ b/libs/vre/shared/app-representations/src/lib/still-image/still-image-toolbar.component.html
@@ -49,18 +49,10 @@
       [disabled]="this.isReadStillImageExternalFileValue">
       <mat-icon>settings</mat-icon>
     </button>
-    <button
-      mat-icon-button
-      data-cy="zoom-out"
-      matTooltip="Zoom out"
-      (click)="osd.viewer.viewport.zoomBy(1 - osd.ZOOM_FACTOR)">
+    <button mat-icon-button data-cy="zoom-out" matTooltip="Zoom out" (click)="osd.zoom(-1)">
       <mat-icon>zoom_out</mat-icon>
     </button>
-    <button
-      mat-icon-button
-      data-cy="zoom-in"
-      matTooltip="Zoom in"
-      (click)="osd.viewer.viewport.zoomBy(1 + osd.ZOOM_FACTOR)">
+    <button mat-icon-button data-cy="zoom-in" matTooltip="Zoom in" (click)="osd.zoom(1)">
       <mat-icon>zoom_in</mat-icon>
     </button>
     <button mat-icon-button data-ci="zoom-reset" matTooltip="Reset zoom" (click)="osd.viewer.viewport.zoomTo(1)">
diff --git a/libs/vre/shared/app-representations/src/lib/still-image/still-image-toolbar.component.ts b/libs/vre/shared/app-representations/src/lib/still-image/still-image-toolbar.component.ts
index 282d7dfd74..08fb695dfd 100644
--- a/libs/vre/shared/app-representations/src/lib/still-image/still-image-toolbar.component.ts
+++ b/libs/vre/shared/app-representations/src/lib/still-image/still-image-toolbar.component.ts
@@ -18,7 +18,6 @@ import { ProjectService } from '@dasch-swiss/vre/shared/app-helper-services';
 import { NotificationService } from '@dasch-swiss/vre/shared/app-notification';
 import { ProjectsSelectors } from '@dasch-swiss/vre/shared/app-state';
 import { Store } from '@ngxs/store';
-import * as OpenSeadragon from 'openseadragon';
 import { filter, switchMap } from 'rxjs/operators';
 import { EditThirdPartyIiifFormComponent } from '../edit-third-party-iiif-form/edit-third-party-iiif-form.component';
 import { ThirdPartyIiifProps } from '../edit-third-party-iiif-form/edit-third-party-iiif-types';
@@ -28,7 +27,7 @@ import {
 } from '../replace-file-dialog/replace-file-dialog.component';
 import { RepresentationService } from '../representation.service';
 import { ResourceFetcherService } from '../resource-fetcher.service';
-import { OsdDrawerService } from './osd-drawer.service';
+import { OpenSeaDragonService } from './open-sea-dragon.service';
 
 @Component({
   selector: 'app-still-image-toolbar',
@@ -37,7 +36,6 @@ import { OsdDrawerService } from './osd-drawer.service';
 export class StillImageToolbarComponent {
   @Input({ required: true }) resource!: ReadResource;
   @Input({ required: true }) compoundMode!: boolean;
-  @Input({ required: true }) viewer!: OpenSeadragon.Viewer;
   @Input({ required: true }) isPng!: boolean;
   @Output() imageIsPng = new EventEmitter<boolean>();
 
@@ -75,13 +73,13 @@ export class StillImageToolbarComponent {
     private _dialog: MatDialog,
     private _domSanitizer: DomSanitizer,
     private _matIconRegistry: MatIconRegistry,
-    public osd: OsdDrawerService
+    public osd: OpenSeaDragonService
   ) {
     this._setupCssMaterialIcon();
   }
 
   toggleDrawMode(): void {
-    this.viewer.setMouseNavEnabled(!this.viewer.isMouseNavEnabled());
+    this.osd.viewer.setMouseNavEnabled(!this.osd.viewer.isMouseNavEnabled());
   }
 
   download() {
diff --git a/libs/vre/shared/app-representations/src/lib/still-image/still-image.component.ts b/libs/vre/shared/app-representations/src/lib/still-image/still-image.component.ts
index 60d17f2d93..150d5fcca1 100644
--- a/libs/vre/shared/app-representations/src/lib/still-image/still-image.component.ts
+++ b/libs/vre/shared/app-representations/src/lib/still-image/still-image.component.ts
@@ -11,7 +11,6 @@ import {
 import { Constants, ReadResource, ReadStillImageFileValue } from '@dasch-swiss/dsp-js';
 import { ReadStillImageExternalFileValue } from '@dasch-swiss/dsp-js/src/models/v2/resources/values/read/read-file-value';
 import { AppError } from '@dasch-swiss/vre/shared/app-error-handler';
-import { RegionService } from '../region.service';
 import { IIIFUrl } from '../third-party-iiif/third-party-iiif';
 import { OpenSeaDragonService } from './open-sea-dragon.service';
 import { OsdDrawerService } from './osd-drawer.service';
@@ -21,7 +20,7 @@ import { StillImageHelper } from './still-image-helper';
   selector: 'app-still-image',
   template: ` <div
       class="osd-container"
-      [class.drawing]="isViewInitialized && !osdDrawerService.viewer.isMouseNavEnabled()"
+      [class.drawing]="isViewInitialized && !osd.viewer.isMouseNavEnabled()"
       #osdViewer>
       <div *ngIf="compoundMode">
         <app-compound-arrow-navigation [forwardNavigation]="false" class="arrow" />
@@ -35,7 +34,6 @@ import { StillImageHelper } from './still-image-helper';
         *ngIf="isViewInitialized"
         [resource]="resource"
         [compoundMode]="compoundMode"
-        [viewer]="osd.viewer"
         [isPng]="isPng"
         (imageIsPng)="afterFormatChange($event)" />
     </div>`,
@@ -52,24 +50,17 @@ export class StillImageComponent implements AfterViewInit, OnDestroy {
   isPng = false;
 
   constructor(
-    public osdDrawerService: OsdDrawerService,
-    public osd: OpenSeaDragonService,
-    private _region: RegionService,
+    protected osd: OpenSeaDragonService,
+    private _osdDrawerService: OsdDrawerService,
     private _cdr: ChangeDetectorRef
   ) {}
 
   ngAfterViewInit() {
-    this.osd.viewer = this.osdViewerElement.nativeElement;
+    this.osd.onInit(this.osdViewerElement.nativeElement);
+    this._osdDrawerService.onInit(this.resource);
     this.isViewInitialized = true;
-    this.osdDrawerService.onInit(this.osd.viewer, this.resource);
-    this.osdDrawerService.trackClickEvents();
     this._cdr.detectChanges();
-
-    this.osd.viewer.addHandler('open', () => {
-      this._region.imageIsLoaded();
-    });
-
-    this.afterFormatChange(false);
+    this._loadImages();
   }
 
   afterFormatChange(value: boolean) {
diff --git a/libs/vre/shared/app-resource-page/src/lib/annotation-tab.component.ts b/libs/vre/shared/app-resource-page/src/lib/annotation-tab.component.ts
index 60b731b0c5..7c823c2bc0 100644
--- a/libs/vre/shared/app-resource-page/src/lib/annotation-tab.component.ts
+++ b/libs/vre/shared/app-resource-page/src/lib/annotation-tab.component.ts
@@ -3,6 +3,7 @@ import { DspResource, ResourceService } from '@dasch-swiss/vre/shared/app-common
 import { RouteConstants } from '@dasch-swiss/vre/shared/app-config';
 import { RegionService } from '@dasch-swiss/vre/shared/app-representations';
 import { Subscription } from 'rxjs';
+import { take } from 'rxjs/operators';
 
 @Component({
   selector: 'app-annotation-tab',
@@ -21,7 +22,8 @@ import { Subscription } from 'rxjs';
         RouteConstants.annotationQueryParam +
         '=' +
         annotation.res.id
-      " />
+      "
+      (afterResourceDeleted)="afterResourceDeleted()" />
   </div>`,
   styles: ['.active {border: 1px solid}'],
 })
@@ -37,22 +39,24 @@ export class AnnotationTabComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    this.regionService.showRegions(true);
-
-    this._subscription = this.regionService.highlightRegion$.subscribe(region => {
+    this._subscription = this.regionService.selectedRegion$.subscribe(region => {
       this.selectedRegion = region;
       if (region !== null) {
-        this._openRegion(region);
+        this._scrollToRegion(region);
       }
     });
   }
 
+  afterResourceDeleted() {
+    this.regionService.updateRegions$().pipe(take(1)).subscribe();
+  }
+
   ngOnDestroy() {
     this._subscription.unsubscribe();
     this.regionService.showRegions(false);
   }
 
-  private _openRegion(iri: string) {
+  private _scrollToRegion(iri: string) {
     const region = document.getElementById(iri);
     if (region) {
       region.scrollIntoView({
diff --git a/libs/vre/shared/app-resource-page/src/lib/compound/compound.service.ts b/libs/vre/shared/app-resource-page/src/lib/compound/compound.service.ts
index d0f5e22a3c..a15190dec0 100644
--- a/libs/vre/shared/app-resource-page/src/lib/compound/compound.service.ts
+++ b/libs/vre/shared/app-resource-page/src/lib/compound/compound.service.ts
@@ -83,7 +83,7 @@ export class CompoundService {
         incomingResource.res.entityInfo.getPropertyDefinitionsByType(SystemPropertyDefinition);
 
       this._reloadViewer(incomingResource);
-      this._regionService.onInit(incomingResource);
+      this._regionService.initialize(incomingResource.res.id);
     });
   }
 
diff --git a/libs/vre/shared/app-resource-page/src/lib/resource-header.component.ts b/libs/vre/shared/app-resource-page/src/lib/resource-header.component.ts
index 888c250fe7..afaec0edcf 100644
--- a/libs/vre/shared/app-resource-page/src/lib/resource-header.component.ts
+++ b/libs/vre/shared/app-resource-page/src/lib/resource-header.component.ts
@@ -1,14 +1,20 @@
 import { Component, Input, ViewContainerRef } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { PermissionUtil, ResourceClassDefinitionWithPropertyDefinition } from '@dasch-swiss/dsp-js';
+import { ResourceClassDefinitionWithPropertyDefinition } from '@dasch-swiss/dsp-js';
 import { DspResource, ResourceUtil } from '@dasch-swiss/vre/shared/app-common';
 import { DspDialogConfig } from '@dasch-swiss/vre/shared/app-config';
-import { ProjectService } from '@dasch-swiss/vre/shared/app-helper-services';
+import {
+  ComponentCommunicationEventService,
+  EmitEvent,
+  Events as CommsEvents,
+  OntologyService,
+  ProjectService,
+} from '@dasch-swiss/vre/shared/app-helper-services';
 import {
   EditResourceLabelDialogComponent,
   EditResourceLabelDialogProps,
 } from '@dasch-swiss/vre/shared/app-resource-properties';
-import { UserSelectors } from '@dasch-swiss/vre/shared/app-state';
+import { LoadClassItemsCountAction, ProjectsSelectors, UserSelectors } from '@dasch-swiss/vre/shared/app-state';
 import { Store } from '@ngxs/store';
 import { combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -28,7 +34,8 @@ import { map } from 'rxjs/operators';
         [resource]="resource"
         [lastModificationDate]="resource.res.lastModificationDate"
         [adminPermissions]="isAdmin$ | async"
-        [showEditLabel]="false"></app-resource-toolbar>
+        [showEditLabel]="false"
+        (afterResourceDeleted)="afterResourceDeleted()" />
     </div>
     <div class="resource-label" style="display: flex; justify-content: space-between">
       <h4 data-cy="resource-header-label">{{ resource.res.label }}</h4>
@@ -121,7 +128,9 @@ export class ResourceHeaderComponent {
   constructor(
     private _dialog: MatDialog,
     private _store: Store,
-    private _viewContainerRef: ViewContainerRef
+    private _viewContainerRef: ViewContainerRef,
+    private _componentCommsService: ComponentCommunicationEventService,
+    private _ontologyService: OntologyService
   ) {}
 
   openEditLabelDialog() {
@@ -133,4 +142,13 @@ export class ResourceHeaderComponent {
       }
     );
   }
+
+  afterResourceDeleted() {
+    const ontologyIri = this._ontologyService.getOntologyIriFromRoute(
+      this._store.selectSnapshot(ProjectsSelectors.currentProject)!.shortcode
+    );
+    const classId = this.resource.res.entityInfo.classes[this.resource.res.type]?.id;
+    this._store.dispatch(new LoadClassItemsCountAction(ontologyIri, classId));
+    this._componentCommsService.emit(new EmitEvent(CommsEvents.resourceDeleted));
+  }
 }
diff --git a/libs/vre/shared/app-resource-page/src/lib/resource-tabs.component.ts b/libs/vre/shared/app-resource-page/src/lib/resource-tabs.component.ts
index 5494b49943..3754284e81 100644
--- a/libs/vre/shared/app-resource-page/src/lib/resource-tabs.component.ts
+++ b/libs/vre/shared/app-resource-page/src/lib/resource-tabs.component.ts
@@ -1,18 +1,20 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
 import { Constants } from '@dasch-swiss/dsp-js';
 import { DspResource } from '@dasch-swiss/vre/shared/app-common';
-import { RouteConstants } from '@dasch-swiss/vre/shared/app-config';
 import { RegionService } from '@dasch-swiss/vre/shared/app-representations';
 import { SegmentsService } from '@dasch-swiss/vre/shared/app-segment-support';
 import { Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
 import { CompoundService } from './compound/compound.service';
 
 @Component({
   selector: 'app-resource-tabs',
   template: `
-    <mat-tab-group *ngIf="!resource.res.isDeleted" animationDuration="0ms" [(selectedIndex)]="selectedTab">
+    <mat-tab-group
+      *ngIf="!resource.res.isDeleted"
+      animationDuration="0ms"
+      [(selectedIndex)]="selectedTab"
+      (selectedTabChange)="onTabChange($event)">
       <mat-tab #matTabProperties [label]="'resource.properties' | translate">
         <app-properties-display *ngIf="resource" [resource]="resource" [properties]="resource.resProps" />
       </mat-tab>
@@ -62,22 +64,19 @@ export class ResourceTabsComponent implements OnInit, OnDestroy {
   constructor(
     public regionService: RegionService,
     public compoundService: CompoundService,
-    public segmentsService: SegmentsService,
-    private _route: ActivatedRoute
+    public segmentsService: SegmentsService
   ) {}
 
   resourceClassLabel = (resource: DspResource) => resource.res.entityInfo?.classes[resource.res.type].label;
 
   ngOnInit() {
-    this._highlightAnnotationFromUri();
-
     this.segmentsService.highlightSegment$.pipe(takeUntil(this.ngUnsubscribe)).subscribe(segment => {
       if (segment) {
         this.selectedTab = 1;
       }
     });
 
-    this.regionService.highlightRegion$.pipe(takeUntil(this.ngUnsubscribe)).subscribe(region => {
+    this.regionService.selectedRegion$.pipe(takeUntil(this.ngUnsubscribe)).subscribe(region => {
       if (region) {
         this.selectedTab = 2;
       }
@@ -88,24 +87,19 @@ export class ResourceTabsComponent implements OnInit, OnDestroy {
     this.ngUnsubscribe.unsubscribe();
   }
 
-  private _highlightAnnotationFromUri() {
-    const annotation = this._route.snapshot.queryParamMap.get(RouteConstants.annotationQueryParam);
-    if (!annotation) {
-      return;
+  onTabChange(event: any) {
+    if (
+      (this.compoundService.incomingResource && event.index === 2) ||
+      (!this.compoundService.incomingResource && event.index === 1)
+    ) {
+      this._openAnnotationTab();
+    } else {
+      this.regionService.showRegions(false);
     }
-
-    this.regionService.imageIsLoaded$
-      .pipe(
-        filter(loaded => loaded),
-        takeUntil(this.ngUnsubscribe)
-      )
-      .subscribe(() => {
-        this._openAnnotationTab();
-        this.regionService.highlightRegion(annotation);
-      });
   }
 
   private _openAnnotationTab() {
     this.selectedTab = 2;
+    this.regionService.showRegions(true);
   }
 }
diff --git a/libs/vre/shared/app-resource-page/src/lib/resource-toolbar.component.ts b/libs/vre/shared/app-resource-page/src/lib/resource-toolbar.component.ts
index ef3e72a55f..51df94d75c 100644
--- a/libs/vre/shared/app-resource-page/src/lib/resource-toolbar.component.ts
+++ b/libs/vre/shared/app-resource-page/src/lib/resource-toolbar.component.ts
@@ -1,16 +1,9 @@
-import { ChangeDetectorRef, Component, Input, OnInit, ViewContainerRef } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewContainerRef } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { DeleteResourceResponse, ReadProject } from '@dasch-swiss/dsp-js';
 import { AdminProjectsApiService } from '@dasch-swiss/vre/open-api';
 import { DspResource, ResourceService, ResourceUtil } from '@dasch-swiss/vre/shared/app-common';
-import {
-  Events as CommsEvents,
-  ComponentCommunicationEventService,
-  EmitEvent,
-  OntologyService,
-} from '@dasch-swiss/vre/shared/app-helper-services';
 import { NotificationService } from '@dasch-swiss/vre/shared/app-notification';
-import { RegionService, ResourceFetcherService } from '@dasch-swiss/vre/shared/app-representations';
+import { ResourceFetcherService } from '@dasch-swiss/vre/shared/app-representations';
 import {
   DeleteResourceDialogComponent,
   DeleteResourceDialogProps,
@@ -19,8 +12,6 @@ import {
   EraseResourceDialogComponent,
   EraseResourceDialogProps,
 } from '@dasch-swiss/vre/shared/app-resource-properties';
-import { LoadClassItemsCountAction } from '@dasch-swiss/vre/shared/app-state';
-import { Store } from '@ngxs/store';
 import { filter } from 'rxjs/operators';
 
 @Component({
@@ -62,7 +53,7 @@ import { filter } from 'rxjs/operators';
       <button
         data-cy="resource-toolbar-more-button"
         color="primary"
-        *ngIf="attachedProject?.status && ((userCanEdit && showEditLabel) || userCanDelete || adminPermissions)"
+        *ngIf="(userCanEdit && showEditLabel) || userCanDelete || adminPermissions"
         mat-icon-button
         class="more-menu"
         matTooltip="More"
@@ -146,21 +137,12 @@ import { filter } from 'rxjs/operators';
 export class ResourceToolbarComponent implements OnInit {
   @Input({ required: true }) resource!: DspResource;
   @Input() adminPermissions = false;
-  /**
-   * in case properties belongs to an annotation (e.g. region in still images)
-   * in this case we don't have to display the isRegionOf property
-   */
-  @Input() isAnnotation = false;
-
-  @Input() showToggleProperties = false;
   @Input() showEditLabel = true;
 
-  @Input() attachedProject!: ReadProject;
-
   @Input() lastModificationDate!: string;
   @Input() linkToNewTab?: string;
 
-  canReadComments!: boolean;
+  @Output() afterResourceDeleted = new EventEmitter();
 
   get userCanEdit() {
     return ResourceUtil.userCanEdit(this.resource.res);
@@ -174,20 +156,15 @@ export class ResourceToolbarComponent implements OnInit {
     private _notification: NotificationService,
     private _resourceService: ResourceService,
     private _cd: ChangeDetectorRef,
-    private _componentCommsService: ComponentCommunicationEventService,
-    private _ontologyService: OntologyService,
     private _dialog: MatDialog,
     private _adminProjectsApi: AdminProjectsApiService,
-    private _store: Store,
     private _viewContainerRef: ViewContainerRef,
-    private _regionService: RegionService,
     private _resourceFetcher: ResourceFetcherService
   ) {}
 
   ngOnInit(): void {
-    if (!this.attachedProject && this.resource.res.attachedToProject) {
+    if (this.resource.res.attachedToProject) {
       this._adminProjectsApi.getAdminProjectsIriProjectiri(this.resource.res.attachedToProject).subscribe(res => {
-        this.attachedProject = res.project as ReadProject;
         this._cd.detectChanges();
       });
     }
@@ -230,8 +207,8 @@ export class ResourceToolbarComponent implements OnInit {
       })
       .afterClosed()
       .pipe(filter(response => !!response))
-      .subscribe(response => {
-        this._onResourceDeleted(response);
+      .subscribe(() => {
+        this.afterResourceDeleted.emit();
       });
   }
 
@@ -245,26 +222,12 @@ export class ResourceToolbarComponent implements OnInit {
       })
       .afterClosed()
       .pipe(filter(response => !!response))
-      .subscribe(response => {
-        this._onResourceDeleted(response);
+      .subscribe(() => {
+        this.afterResourceDeleted.emit();
       });
   }
 
   openSnackBar(message: string) {
     this._notification.openSnackBar(message);
   }
-
-  private _onResourceDeleted(response: DeleteResourceResponse) {
-    this._notification.openSnackBar(`${response.result}: ${this.resource.res.label}`);
-    if (this.resource.isRegion) {
-      this._regionService.updateRegions();
-      this._cd.markForCheck();
-      return;
-    }
-
-    const ontologyIri = this._ontologyService.getOntologyIriFromRoute(this.attachedProject.shortcode);
-    const classId = this.resource.res.entityInfo.classes[this.resource.res.type]?.id;
-    this._store.dispatch(new LoadClassItemsCountAction(ontologyIri, classId));
-    this._componentCommsService.emit(new EmitEvent(CommsEvents.resourceDeleted));
-  }
 }
diff --git a/libs/vre/shared/app-resource-page/src/lib/resource.component.ts b/libs/vre/shared/app-resource-page/src/lib/resource.component.ts
index 28b60a666e..d4cc00d706 100644
--- a/libs/vre/shared/app-resource-page/src/lib/resource.component.ts
+++ b/libs/vre/shared/app-resource-page/src/lib/resource.component.ts
@@ -1,7 +1,9 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { Constants, CountQueryResponse, ReadFileValue } from '@dasch-swiss/dsp-js';
 import { DspCompoundPosition, DspResource } from '@dasch-swiss/vre/shared/app-common';
 import { IncomingService } from '@dasch-swiss/vre/shared/app-common-to-move';
+import { RouteConstants } from '@dasch-swiss/vre/shared/app-config';
 import { getFileValue, RegionService } from '@dasch-swiss/vre/shared/app-representations';
 import { SegmentsService } from '@dasch-swiss/vre/shared/app-segment-support';
 import { take } from 'rxjs/operators';
@@ -43,7 +45,8 @@ export class ResourceComponent implements OnInit {
   constructor(
     private _incomingService: IncomingService,
     private _compoundService: CompoundService,
-    private _regionService: RegionService
+    private _regionService: RegionService,
+    private _route: ActivatedRoute
   ) {}
 
   ngOnInit() {
@@ -68,7 +71,8 @@ export class ResourceComponent implements OnInit {
     this.representationsToDisplay = getFileValue(resource)!;
 
     if (this._isStillImage(resource)) {
-      this._regionService.onInit(resource);
+      this._regionService.initialize(resource.res.id);
+      this._checkForAnnotationUri();
     }
   }
 
@@ -80,6 +84,16 @@ export class ResourceComponent implements OnInit {
     return getFileValue(resource) === null;
   }
 
+  private _checkForAnnotationUri() {
+    const annotation = this._route.snapshot.queryParamMap.get(RouteConstants.annotationQueryParam);
+    if (!annotation) {
+      return;
+    }
+
+    this._regionService.showRegions(true);
+    this._regionService.selectRegion(annotation);
+  }
+
   private _checkForCompoundNavigation(resource: DspResource, isDifferentResource: boolean) {
     this._incomingService
       .getStillImageRepresentationsForCompoundResource(resource.res.id, 0, true)
diff --git a/libs/vre/shared/app-resource-properties/src/lib/properties-display.component.ts b/libs/vre/shared/app-resource-properties/src/lib/properties-display.component.ts
index a30a0a5eee..0ffd64db94 100644
--- a/libs/vre/shared/app-resource-properties/src/lib/properties-display.component.ts
+++ b/libs/vre/shared/app-resource-properties/src/lib/properties-display.component.ts
@@ -1,4 +1,13 @@
-import { ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, ViewChild } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  ViewChild,
+} from '@angular/core';
 import { Cardinality, Constants, ReadLinkValue, ResourcePropertyDefinition } from '@dasch-swiss/dsp-js';
 import { DspResource, PropertyInfoValues } from '@dasch-swiss/vre/shared/app-common';
 import { ResourceSelectors } from '@dasch-swiss/vre/shared/app-state';
@@ -25,7 +34,8 @@ import { sortByKeys } from './sortByKeys';
           *ngIf="displayLabel"
           [adminPermissions]="adminPermissions"
           [resource]="resource"
-          [linkToNewTab]="linkToNewTab"></app-resource-toolbar>
+          [linkToNewTab]="linkToNewTab"
+          (afterResourceDeleted)="afterResourceDeleted.emit()" />
       </div>
     </div>
 
@@ -133,6 +143,7 @@ export class PropertiesDisplayComponent implements OnChanges, OnDestroy {
   @Input() displayLabel = false;
   @Input() adminPermissions = false;
   @Input() linkToNewTab?: string;
+  @Output() afterResourceDeleted = new EventEmitter();
 
   @ViewChild('pager', { static: false })
   pagerComponent: PagerComponent | undefined;