diff --git a/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.ts b/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.ts
index e7bb15a75ba..5f27ba4f65d 100644
--- a/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.ts
+++ b/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { catchError, map } from 'rxjs/operators';
-import { Observable, of as observableOf } from 'rxjs';
+import { Observable, of as observableOf, Subscription } from 'rxjs';
 import { AccessStatusObject } from './access-status.model';
 import { hasValue } from '../../../../empty.util';
 import { environment } from 'src/environments/environment';
@@ -32,6 +32,11 @@ export class AccessStatusBadgeComponent {
    */
   accessStatusClass: string;
 
+  /**
+   * List of subscriptions
+   */
+  subs: Subscription[] = [];
+
   /**
    * Initialize instance variables
    *
@@ -65,10 +70,16 @@ export class AccessStatusBadgeComponent {
     );
 
     // stylesheet based on the access status value
-    this.accessStatus$.pipe(
-      map((accessStatusClass: string) => accessStatusClass.replace(/\./g, '-'))
-    ).subscribe((accessStatusClass: string) => {
-      this.accessStatusClass = accessStatusClass;
-    });
+    this.subs.push(
+      this.accessStatus$.pipe(
+        map((accessStatusClass: string) => accessStatusClass.replace(/\./g, '-'))
+      ).subscribe((accessStatusClass: string) => {
+        this.accessStatusClass = accessStatusClass;
+      })
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
   }
 }