diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
index 20e3f0d77..56deaa10a 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
@@ -250,39 +250,41 @@
 
                         <div
                             (click)="annotationClicked(annotation)"
+                            class="annotation-wrapper"
                             *ngFor="let annotation of displayedAnnotations[activeViewerPage]?.annotations"
-                            [class.active]="annotationIsSelected(annotation)"
                             attr.annotation-id="{{ annotation.id }}"
                             attr.annotation-page="{{ activeViewerPage }}"
-                            class="annotation"
-                            [class.removed]="annotation.isChangeLogRemoved"
+                            [class.active]="annotationIsSelected(annotation)"
                         >
-                            <redaction-hidden-action (action)="logAnnotation(annotation)" [requiredClicks]="2">
-                                <div class="details">
-                                    <redaction-type-annotation-icon [annotation]="annotation"></redaction-type-annotation-icon>
-                                    <div class="flex-1">
-                                        <div>
-                                            <strong>{{ annotation.typeLabel | translate }}</strong>
-                                        </div>
-                                        <div *ngIf="annotation.dictionary && annotation.dictionary !== 'manual'">
-                                            <strong
-                                                ><span>{{ annotation.descriptor | translate }}</span
-                                                >: </strong
-                                            >{{ annotation.dictionary | humanize: false }}
-                                        </div>
-                                        <div *ngIf="annotation.content && !annotation.isHint">
-                                            <strong><span translate="content"></span>: </strong>{{ annotation.content }}
+                            <div class="active-marker"></div>
+                            <div class="annotation" [class.removed]="annotation.isChangeLogRemoved">
+                                <redaction-hidden-action (action)="logAnnotation(annotation)" [requiredClicks]="2">
+                                    <div class="details">
+                                        <redaction-type-annotation-icon [annotation]="annotation"></redaction-type-annotation-icon>
+                                        <div class="flex-1">
+                                            <div>
+                                                <strong>{{ annotation.typeLabel | translate }}</strong>
+                                            </div>
+                                            <div *ngIf="annotation.dictionary && annotation.dictionary !== 'manual'">
+                                                <strong
+                                                    ><span>{{ annotation.descriptor | translate }}</span
+                                                    >: </strong
+                                                >{{ annotation.dictionary | humanize: false }}
+                                            </div>
+                                            <div *ngIf="annotation.content && !annotation.isHint">
+                                                <strong><span translate="content"></span>: </strong>{{ annotation.content }}
+                                            </div>
                                         </div>
+                                        <redaction-annotation-actions
+                                            (annotationsChanged)="annotationsChangedByReviewAction($event)"
+                                            [annotation]="annotation"
+                                            [canPerformAnnotationActions]="canPerformAnnotationActions"
+                                            [viewer]="activeViewer"
+                                        ></redaction-annotation-actions>
                                     </div>
-                                    <redaction-annotation-actions
-                                        (annotationsChanged)="annotationsChangedByReviewAction($event)"
-                                        [annotation]="annotation"
-                                        [canPerformAnnotationActions]="canPerformAnnotationActions"
-                                        [viewer]="activeViewer"
-                                    ></redaction-annotation-actions>
-                                </div>
-                            </redaction-hidden-action>
-                            <redaction-comments [annotation]="annotation"></redaction-comments>
+                                </redaction-hidden-action>
+                                <redaction-comments [annotation]="annotation"></redaction-comments>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
index aa115e429..32a83add1 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
@@ -87,31 +87,45 @@
         .annotations {
             overflow: hidden;
             width: 100%;
-            height: 100%;
+            height: calc(100% - 32px);
 
-            .annotation {
-                border-bottom: 1px solid $separator;
-                padding: 10px 21px 10px 6px;
-                font-size: 11px;
-                line-height: 14px;
-                cursor: pointer;
+            .annotation-wrapper {
                 display: flex;
-                flex-direction: column;
-                border-left: 4px solid transparent;
+                border-bottom: 1px solid $separator;
 
-                &.removed {
-                    text-decoration: line-through;
-                    color: $grey-7;
+                .active-marker {
+                    min-width: 4px;
+                    min-height: 100%;
                 }
 
-                .details {
+                &.active {
+                    .active-marker {
+                        background-color: $primary;
+                    }
+                }
+
+                .annotation {
+                    padding: 10px 21px 10px 6px;
+                    font-size: 11px;
+                    line-height: 14px;
+                    cursor: pointer;
                     display: flex;
-                    position: relative;
-                }
+                    flex-direction: column;
 
-                redaction-type-annotation-icon {
-                    margin-top: 6px;
-                    margin-right: 10px;
+                    &.removed {
+                        text-decoration: line-through;
+                        color: $grey-7;
+                    }
+
+                    .details {
+                        display: flex;
+                        position: relative;
+                    }
+
+                    redaction-type-annotation-icon {
+                        margin-top: 6px;
+                        margin-right: 10px;
+                    }
                 }
 
                 &:hover {
@@ -121,10 +135,6 @@
                         display: flex;
                     }
                 }
-
-                &.active {
-                    border-left: 4px solid $primary;
-                }
             }
 
             &:hover {