diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.html b/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.html
index c5dbee02b..4dffb7bf4 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.html
@@ -1,29 +1,31 @@
-<div
-    *ngIf="noSelection && changesTooltip"
-    [matTooltip]="changesTooltip"
-    class="chip"
-    matTooltipClass="multiline"
-    matTooltipPosition="above"
->
-    <mat-icon [svgIcon]="'red:redaction-changes'"></mat-icon>
-</div>
+@if (_noSelection() && _changesTooltip()) {
+    <div [matTooltip]="_changesTooltip()" class="chip" matTooltipClass="multiline" matTooltipPosition="above">
+        <mat-icon [svgIcon]="'red:redaction-changes'"></mat-icon>
+    </div>
+}
 
-<ng-container *ngIf="noSelection && engines">
-    <div #trigger="cdkOverlayOrigin" (mouseout)="isPopoverOpen = false" (mouseover)="isPopoverOpen = true" cdkOverlayOrigin class="chip">
-        <mat-icon *ngFor="let engine of engines" [svgIcon]="engine.icon"></mat-icon>
+@if (_noSelection() && _engines()) {
+    <div
+        #trigger="cdkOverlayOrigin"
+        (mouseout)="_isPopoverOpen.set(false)"
+        (mouseover)="_isPopoverOpen.set(true)"
+        cdkOverlayOrigin
+        class="chip"
+    >
+        <mat-icon *ngFor="let engine of _engines()" [svgIcon]="engine.icon"></mat-icon>
     </div>
 
     <ng-template
         [cdkConnectedOverlayOffsetY]="-8"
-        [cdkConnectedOverlayOpen]="isPopoverOpen"
+        [cdkConnectedOverlayOpen]="_isPopoverOpen()"
         [cdkConnectedOverlayOrigin]="trigger"
         cdkConnectedOverlay
     >
         <div class="popover">
-            <div *ngFor="let engine of engines" class="flex-align-items-center">
+            <div *ngFor="let engine of _engines()" class="flex-align-items-center">
                 <mat-icon [svgIcon]="engine.icon"></mat-icon>
-                <span [innerHTML]="engine.description | translate : engine.translateParams"></span>
+                <span [innerHTML]="engine.description | translate: engine.translateParams"></span>
             </div>
         </div>
     </ng-template>
-</ng-container>
+}
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.ts b/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.ts
index 2c647bd76..a092c15b3 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-details/annotation-details.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject, Input, OnChanges } from '@angular/core';
+import { Component, computed, inject, input, signal } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { KeysOf } from '@iqser/common-ui/lib/utils';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
@@ -33,30 +33,27 @@ const changesProperties: KeysOf<AnnotationWrapper>[] = [
 ];
 
 @Component({
-    selector: 'redaction-annotation-details [annotation]',
+    selector: 'redaction-annotation-details',
     templateUrl: './annotation-details.component.html',
     styleUrls: ['./annotation-details.component.scss'],
     standalone: true,
     imports: [NgIf, MatTooltip, MatIcon, CdkOverlayOrigin, NgForOf, CdkConnectedOverlay, TranslateModule],
 })
-export class AnnotationDetailsComponent implements OnChanges {
-    @Input() annotation: ListItem<AnnotationWrapper>;
-    isPopoverOpen = false;
-    engines: Engine[];
-    changesTooltip: string;
-    noSelection: boolean;
+export class AnnotationDetailsComponent {
+    readonly annotation = input.required<ListItem<AnnotationWrapper>>();
+    protected readonly _isPopoverOpen = signal(false);
+    protected readonly _engines = computed(() => this.#extractEngines(this.annotation().item).filter(engine => engine.show));
     private readonly _translateService = inject(TranslateService);
-    private readonly _multiSelectService = inject(MultiSelectService);
+    protected readonly _changesTooltip = computed(() => {
+        const annotation = this.annotation().item;
+        const changes = changesProperties.filter(key => annotation[key]);
 
-    getChangesTooltip(): string | undefined {
-        const changes = changesProperties.filter(key => this.annotation.item[key]);
-
-        if (!changes.length && !this.annotation.item.engines?.includes(LogEntryEngines.MANUAL)) {
+        if (!changes.length && !annotation.engines?.includes(LogEntryEngines.MANUAL)) {
             return;
         }
 
         const details = [];
-        if (this.annotation.item.engines?.includes(LogEntryEngines.MANUAL)) {
+        if (annotation.engines?.includes(LogEntryEngines.MANUAL)) {
             details.push(this._translateService.instant(_('annotation-changes.added-locally')));
         }
 
@@ -66,13 +63,9 @@ export class AnnotationDetailsComponent implements OnChanges {
 
         const header = this._translateService.instant(_('annotation-changes.header'));
         return [header, ...details.map(change => `• ${change}`)].join('\n');
-    }
-
-    ngOnChanges() {
-        this.engines = this.#extractEngines(this.annotation.item).filter(engine => engine.show);
-        this.changesTooltip = this.getChangesTooltip();
-        this.noSelection = !this.annotation.isSelected || this._multiSelectService.inactive();
-    }
+    });
+    private readonly _multiSelectService = inject(MultiSelectService);
+    protected readonly _noSelection = computed(() => !this.annotation().isSelected || this._multiSelectService.inactive());
 
     #extractEngines(annotation: AnnotationWrapper): Engine[] {
         return [
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.html b/apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.html
index e3eeb5b22..8c22e3273 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.html
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotation-wrapper/annotation-wrapper.component.html
@@ -1,6 +1,6 @@
 <div class="active-bar-marker"></div>
 
-<div [class.removed]="annotation().item.isRemoved" class="annotation">
+<div #annotationDiv [class.removed]="annotation().item.isRemoved" class="annotation">
     <redaction-annotation-card
         [annotation]="annotation().item"
         [isSelected]="annotation().isSelected"
@@ -24,13 +24,15 @@
             }
 
             @if (multiSelectService.inactive()) {
-                <div class="actions">
-                    <redaction-annotation-actions
-                        [actionsHelpModeKey]="actionsHelpModeKey()"
-                        [annotations]="[annotation().item]"
-                        [canPerformAnnotationActions]="pdfProxyService.canPerformActions()"
-                    ></redaction-annotation-actions>
-                </div>
+                @defer (on hover(annotationDiv)) {
+                    <div class="actions">
+                        <redaction-annotation-actions
+                            [actionsHelpModeKey]="actionsHelpModeKey()"
+                            [annotations]="[annotation().item]"
+                            [canPerformAnnotationActions]="pdfProxyService.canPerformActions()"
+                        ></redaction-annotation-actions>
+                    </div>
+                }
             }
         </div>
     }
diff --git a/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts b/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts
index c30366d23..a6364564f 100644
--- a/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts
+++ b/apps/red-ui/src/app/modules/file-preview/components/annotations-list/annotations-list.component.ts
@@ -11,7 +11,7 @@ import { AnnotationReferencesService } from '../../services/annotation-reference
 import { AnnotationsListingService } from '../../services/annotations-listing.service';
 import { MultiSelectService } from '../../services/multi-select.service';
 import { ViewModeService } from '../../services/view-mode.service';
-import { NgForOf, NgIf } from '@angular/common';
+import { JsonPipe, NgForOf, NgIf } from '@angular/common';
 import { HighlightsSeparatorComponent } from '../highlights-separator/highlights-separator.component';
 import { AnnotationWrapperComponent } from '../annotation-wrapper/annotation-wrapper.component';
 import { AnnotationReferencesListComponent } from '../annotation-references-list/annotation-references-list.component';
@@ -21,7 +21,7 @@ import { AnnotationReferencesListComponent } from '../annotation-references-list
     templateUrl: './annotations-list.component.html',
     styleUrls: ['./annotations-list.component.scss'],
     standalone: true,
-    imports: [NgForOf, NgIf, HighlightsSeparatorComponent, AnnotationWrapperComponent, AnnotationReferencesListComponent],
+    imports: [NgForOf, NgIf, HighlightsSeparatorComponent, AnnotationWrapperComponent, AnnotationReferencesListComponent, JsonPipe],
 })
 export class AnnotationsListComponent extends HasScrollbarDirective {
     readonly annotations = input.required<ListItem<AnnotationWrapper>[]>();