diff --git a/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.html b/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.html
index 4671398a0..45ab11cca 100644
--- a/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.html
@@ -2,12 +2,11 @@
     <mat-icon *ngIf="!!leftIcon" [svgIcon]="leftIcon"></mat-icon>
     <span class="all-caps-label">{{ label }}</span>
     <mat-icon *ngIf="!!rightIcon" [matTooltip]="rightIconTooltip" [svgIcon]="rightIcon" matTooltipPosition="above"></mat-icon>
-    <div
-        *ngIf="withSort && sortingService"
-        [class.force-display]="sortingService.sortingOption?.column === column"
-        class="sort-arrows-container"
-    >
-        <mat-icon *ngIf="sortingService.sortingOption?.order === 'asc'" svgIcon="red:sort-asc"></mat-icon>
-        <mat-icon *ngIf="sortingService.sortingOption?.order === 'desc'" svgIcon="red:sort-desc"></mat-icon>
-    </div>
+
+    <ng-container *ngIf="sortingService?.sortingOptionChanged$ | async as sortingOption">
+        <div *ngIf="withSort" [class.force-display]="sortingOption.column === column" class="sort-arrows-container">
+            <mat-icon *ngIf="sortingOption.order === 'asc'" svgIcon="red:sort-asc"></mat-icon>
+            <mat-icon *ngIf="sortingOption.order === 'desc'" svgIcon="red:sort-desc"></mat-icon>
+        </div>
+    </ng-container>
 </div>