diff --git a/apps/red-ui/src/app/screens/file/service/annotation-draw.service.ts b/apps/red-ui/src/app/screens/file/service/annotation-draw.service.ts
index 7ee1f8850..dfcfb7751 100644
--- a/apps/red-ui/src/app/screens/file/service/annotation-draw.service.ts
+++ b/apps/red-ui/src/app/screens/file/service/annotation-draw.service.ts
@@ -1,15 +1,20 @@
 import { Injectable } from '@angular/core';
 import { Annotations, WebViewerInstance } from '@pdftron/webviewer';
-import { Rectangle } from '@redaction/red-ui-http';
+import { Rectangle, RedactionLogControllerService, SectionGrid, SectionRectangle } from '@redaction/red-ui-http';
 import { hexToRgb } from '../../../utils/functions';
 import { AppStateService } from '../../../state/app-state.service';
 import { AnnotationWrapper } from '../model/annotation.wrapper';
+import { UserPreferenceService } from '../../../common/service/user-preference.service';
 
 @Injectable({
     providedIn: 'root'
 })
 export class AnnotationDrawService {
-    constructor(private readonly _appStateService: AppStateService) {}
+    constructor(
+        private readonly _appStateService: AppStateService,
+        private readonly _redactionLogControllerService: RedactionLogControllerService,
+        private readonly _userPreferenceService: UserPreferenceService
+    ) {}
 
     public drawAnnotations(activeViewer: WebViewerInstance, annotationWrappers: AnnotationWrapper[]) {
         const annotations = [];
@@ -20,6 +25,40 @@ export class AnnotationDrawService {
         const annotationManager = activeViewer.annotManager;
         annotationManager.addAnnotations(annotations, true);
         annotationManager.drawAnnotationsFromList(annotations);
+
+        this._redactionLogControllerService.getSectionGrid(this._appStateService.activeFileId).subscribe((sectionGrid) => {
+            console.log(sectionGrid);
+            this.drawSections(activeViewer, sectionGrid);
+        });
+    }
+
+    public drawSections(activeViewer: WebViewerInstance, sectionGrid: SectionGrid) {
+        const sections = [];
+        for (let page of Object.keys(sectionGrid.rectanglesPerPage)) {
+            const sectionRectangles: SectionRectangle[] = sectionGrid.rectanglesPerPage[page];
+            sectionRectangles.forEach((sectionRectangle) => {
+                sections.push(this.computeSection(activeViewer, parseInt(page, 10), sectionRectangle));
+            });
+        }
+        const annotationManager = activeViewer.annotManager;
+        annotationManager.addAnnotations(sections, true);
+        annotationManager.drawAnnotationsFromList(sections);
+    }
+
+    public computeSection(activeViewer: WebViewerInstance, pageNumber: number, sectionRectangle: SectionRectangle) {
+        const rectangleAnnot = new activeViewer.Annotations.RectangleAnnotation();
+        const pageHeight = activeViewer.docViewer.getPageHeight(pageNumber);
+        const rectangle = { topLeft: sectionRectangle.topLeft, page: pageNumber, height: sectionRectangle.height, width: sectionRectangle.width };
+        rectangleAnnot.PageNumber = pageNumber;
+        rectangleAnnot.X = rectangle.topLeft.x - 2;
+        rectangleAnnot.Y = pageHeight - (rectangle.topLeft.y + rectangle.height) - 2;
+        rectangleAnnot.Width = rectangle.width + 4;
+        rectangleAnnot.Height = rectangle.height + 4;
+        rectangleAnnot.ReadOnly = true;
+        rectangleAnnot.StrokeColor = this.getColor(activeViewer, 'analysis', 'analysis');
+        rectangleAnnot.StrokeThickness = 2;
+
+        return rectangleAnnot;
     }
 
     public computeAnnotation(activeViewer: WebViewerInstance, annotationWrapper: AnnotationWrapper) {
@@ -75,8 +114,6 @@ export class AnnotationDrawService {
     }
 
     public annotationToQuads(annotation: Annotations.Annotation, activeViewer: WebViewerInstance, pageNumber: number) {
-        const pageHeight = activeViewer.docViewer.getPageHeight(pageNumber);
-
         const x1 = annotation.getRect().x1;
         const y1 = annotation.getRect().y1 + annotation.getRect().getHeight();