diff --git a/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.html b/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.html
index fb9fef4f8..927316f99 100644
--- a/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.html
+++ b/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.html
@@ -6,10 +6,8 @@
           <ng-container title>
             @if (collectionTag) {
               <h4>
-                {{collectionTag.title}}
-                @if(collectionTag.promoted) {
-                  <span class="ms-1">(<i aria-hidden="true" class="fa fa-angle-double-up"></i>)</span>
-                }
+                <app-promoted-icon [promoted]="collectionTag.promoted"></app-promoted-icon>
+                <span class="ms-2">{{collectionTag.title}}</span>
                 <app-card-actionables [entity]="collectionTag" [disabled]="actionInProgress" [inputActions]="collectionTagActions" [labelBy]="collectionTag.title" iconClass="fa-ellipsis-v"></app-card-actionables>
               </h4>
             }
diff --git a/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.ts b/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.ts
index 11a2df6f4..230e5c58a 100644
--- a/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.ts
+++ b/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.ts
@@ -61,6 +61,7 @@ import {
 } from "../../../_single-module/smart-collection-drawer/smart-collection-drawer.component";
 import {DefaultModalOptions} from "../../../_models/default-modal-options";
 import {ScrobbleProviderNamePipe} from "../../../_pipes/scrobble-provider-name.pipe";
+import {PromotedIconComponent} from "../../../shared/_components/promoted-icon/promoted-icon.component";
 
 @Component({
   selector: 'app-collection-detail',
@@ -69,7 +70,7 @@ import {ScrobbleProviderNamePipe} from "../../../_pipes/scrobble-provider-name.p
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [SideNavCompanionBarComponent, CardActionablesComponent, ImageComponent, ReadMoreComponent,
     BulkOperationsComponent, CardDetailLayoutComponent, SeriesCardComponent, TranslocoDirective, NgbTooltip,
-    DatePipe, DefaultDatePipe, ProviderImagePipe, AsyncPipe, ScrobbleProviderNamePipe]
+    DatePipe, DefaultDatePipe, ProviderImagePipe, AsyncPipe, ScrobbleProviderNamePipe, PromotedIconComponent]
 })
 export class CollectionDetailComponent implements OnInit, AfterContentChecked {
 
diff --git a/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html b/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html
index 4f17fd7e8..9f45cd55a 100644
--- a/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html
+++ b/UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html
@@ -10,12 +10,10 @@
 
           <div class="col-xl-10 col-lg-7 col-md-12 col-sm-12 col-xs-12">
             <h4 class="title mb-2">
-            <span>{{readingList.title}}
-              @if (readingList.promoted) {
-                (<app-promoted-icon [promoted]="readingList.promoted"></app-promoted-icon>)
-              }
-
-              @if( isLoading) {
+            <span>
+              <app-promoted-icon [promoted]="readingList.promoted"></app-promoted-icon>
+              <span class="ms-2">{{readingList.title}}</span>
+              @if(isLoading) {
                 <div class="spinner-border spinner-border-sm text-primary" role="status">
                   <span class="visually-hidden">loading...</span>
                 </div>