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 2be44669b02..e7bb15a75ba 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
@@ -11,7 +11,8 @@ import { ITEM } from '../../../../../core/shared/item.resource-type';
 
 @Component({
   selector: 'ds-access-status-badge',
-  templateUrl: './access-status-badge.component.html'
+  templateUrl: './access-status-badge.component.html',
+  styleUrls: ['./access-status-badge.component.scss']
 })
 /**
  * Component rendering the access status of an item as a badge
@@ -26,6 +27,11 @@ export class AccessStatusBadgeComponent {
    */
   showAccessStatus: boolean;
 
+  /**
+   * Value based stylesheet class for access status badge
+   */
+  accessStatusClass: string;
+
   /**
    * Initialize instance variables
    *
@@ -57,5 +63,12 @@ export class AccessStatusBadgeComponent {
       map((status: string) => `access-status.${status.toLowerCase()}.listelement.badge`),
       catchError(() => observableOf('access-status.unknown.listelement.badge'))
     );
+
+    // stylesheet based on the access status value
+    this.accessStatus$.pipe(
+      map((accessStatusClass: string) => accessStatusClass.replace(/\./g, '-'))
+    ).subscribe((accessStatusClass: string) => {
+      this.accessStatusClass = accessStatusClass;
+    });
   }
 }