diff --git a/src/frontend/app/document/document.component.ts b/src/frontend/app/document/document.component.ts
index 0aa9ea37a5370f5856280c900b1b855f168d0ca8..13c855dbc3295bbe2a53c8d062834a7f2c8aee67 100755
--- a/src/frontend/app/document/document.component.ts
+++ b/src/frontend/app/document/document.component.ts
@@ -266,29 +266,13 @@ export class DocumentComponent implements OnInit {
         // console.log('dissmiss');
     }
 
-    async openNoteEditor(ev: any = null) {
-        let scrollPercentX = 0;
-        let scrollPercentY = 0;
-        if (ev !== null) {
-            const offsetTop = -($('#myBounds')[0].getBoundingClientRect().top - 70);
-            const realPosY = (ev.pageY - 75) + offsetTop;
-
-            // console.log(offsetTop);
-
-            scrollPercentX = ((ev.pageX - 350) / ($('#myBounds').width() - $(window).width())) * 100;
-            scrollPercentX = scrollPercentX;
-            scrollPercentY = (offsetTop / ($('#myBounds').height() - $(window).height())) * 100;
-            // scrollPercentY = (realPosY / ($('#myBounds').height() - $(window).height())) * 100;
-
-            // console.log('scrollPercentX', scrollPercentX);
-            // console.log('scrollPercentY', scrollPercentY);
-        }
+    async openNoteEditor() {
         const modal = await this.modalController.create({
             component: DocumentNotePadComponent,
             cssClass: 'fullscreen',
             componentProps: {
-                precentScrollTop: this.posY,
                 precentScrollLeft: this.posX,
+                precentScrollTop: this.posY,
                 content: this.docList[this.currentDoc].imgContent[this.pageNum]
             }
         });
diff --git a/src/frontend/app/documentNotePad/document-note-pad.component.ts b/src/frontend/app/documentNotePad/document-note-pad.component.ts
index 0a684f902f56667debc5ddf525a71a80ecc555dc..2063d445b1cb562a1901e31f88b062b841d31ced 100644
--- a/src/frontend/app/documentNotePad/document-note-pad.component.ts
+++ b/src/frontend/app/documentNotePad/document-note-pad.component.ts
@@ -51,13 +51,13 @@ export class DocumentNotePadComponent implements OnInit {
     imageLoaded(ev: any) {
         // console.log('imageLoaded');
         // this.getImageDimensions(!this.signaturesService.mobileMode);
-        this.getImageDimensions(false);
+        this.getImageDimensions(false);       
     }
 
     getImageDimensions(originalsize: boolean = false): void {
         this.originalSize = originalsize;
         const img = new Image();
-        img.onload = (data: any) => {
+        img.onload = (data: any) => {            
             this.areaWidth = data.target.naturalWidth;
             this.areaHeight = data.target.naturalHeight;
             if (!originalsize) {
@@ -65,25 +65,30 @@ export class DocumentNotePadComponent implements OnInit {
             }
             if (this.editMode) {
                 setTimeout(() => {
-                    // const scrollY = (this.areaHeight * this.precentScrollTop) / 100;
-                    const scrollY = (this.precentScrollTop / 100) * ($('#myBounds').height() - $(window).height());
-                    const scrollX = (this.areaWidth * this.precentScrollLeft) / 100;
-                    
                     const offset = $('#myBounds').offset();
                     let y: number;
-                    let x: number;
-                    if (offset.top > (this.precentScrollTop - offset.top)) {
-                        y = (this.precentScrollTop - offset.top)
-                    } else {
-                        y = (this.precentScrollTop - offset.top) + 250;  
+                    let x: number;  
+                    let clientX: any;
+                    let clientY: any;
+                    
+                    if (Math.sign(offset.top) === 1 || this.precentScrollTop <= Math.abs(offset.top)) {
+                        y = this.precentScrollTop - offset.top; 
+                    } 
+                    else if (Math.sign(offset.top) === -1) {
+                        y = (this.precentScrollTop - offset.top) * 300;
                     }
-                    x = this.precentScrollLeft - offset.left;                                      
+                    x = this.precentScrollLeft - offset.left;  
+                    clientX = this.precentScrollLeft - document.documentElement.offsetLeft;
+                    clientY = this.precentScrollTop - document.documentElement.offsetTop;
+                    clientX = clientX / this.areaWidth * 100;
+                    clientY = clientY / this.areaHeight * 100;
                     document.getElementsByClassName('drag-scroll-content')[1].scrollTo(x, y);
+                    img.style.transform = 'translate(-'+clientX+'%,-'+clientY+'%) scale(2)';
                     this.initPad();
                 }, 200);
             }
         };
-        img.src = this.content;
+        img.src = this.content;        
     }
 
     getAreaDimension() {