diff --git a/services/web/public/coffee/ide/pdfng/directives/pdfHighlights.coffee b/services/web/public/coffee/ide/pdfng/directives/pdfHighlights.coffee
index e3fd2f3ac2..2c93e8bef5 100644
--- a/services/web/public/coffee/ide/pdfng/directives/pdfHighlights.coffee
+++ b/services/web/public/coffee/ide/pdfng/directives/pdfHighlights.coffee
@@ -4,12 +4,11 @@ app.factory 'pdfHighlights', [ () ->
 	class pdfHighlights
 
 		constructor: (options) ->
-			@highlightsLayerDiv = options.highlights
-			@viewport = options.viewport
+			@highlightsLayerDiv = options.highlights[0]
 			@highlightElements = []
 
-		addHighlight: (left, top, width, height) ->
-			rect = @viewport.convertToViewportRectangle([left, top, left + width, top + height])
+		addHighlight: (viewport, left, top, width, height) ->
+			rect = viewport.convertToViewportRectangle([left, top, left + width, top + height])
 			rect = PDFJS.Util.normalizeRect(rect)
 			element = document.createElement("div")
 			element.style.left = Math.floor(rect[0]) + 'px'
diff --git a/services/web/public/coffee/ide/pdfng/directives/pdfJs.coffee b/services/web/public/coffee/ide/pdfng/directives/pdfJs.coffee
index bf21d1342d..9e1b6c4a44 100644
--- a/services/web/public/coffee/ide/pdfng/directives/pdfJs.coffee
+++ b/services/web/public/coffee/ide/pdfng/directives/pdfJs.coffee
@@ -102,27 +102,28 @@ define [
 
 				scope.$watch "highlights", (areas) ->
 					console.log 'got HIGHLIGHTS in pdfJS', areas
-					return if !areas?
-					highlights = for area in areas or []
-						{
-							page: area.page
-							highlight:
-								left: area.h
-								top: area.v
-								height: area.height
-								width: area.width
-						}
+					
+					# return if !areas?
+					# highlights = for area in areas or []
+					# 	{
+					# 		page: area.page
+					# 		highlight:
+					# 			left: area.h
+					# 			top: area.v
+					# 			height: area.height
+					# 			width: area.width
+					# 	}
 
-					if highlights.length > 0
-						first = highlights[0]
-						position = {
-							page: first.page
-							offset:
-								left: first.highlight.left
-								top: first.highlight.top - 80
-						}
-						console.log 'position is', position, 'in highlights'
-						scope.pleaseJumpTo = position
+					# if highlights.length > 0
+					# 	first = highlights[0]
+					# 	position = {
+					# 		page: first.page
+					# 		offset:
+					# 			left: first.highlight.left
+					# 			top: first.highlight.top - 80
+					# 	}
+					# 	console.log 'position is', position, 'in highlights'
+					# 	scope.pleaseJumpTo = position
 					# pdfListView.clearHighlights()
 					# pdfListView.setHighlights(highlights, true)
 
diff --git a/services/web/public/coffee/ide/pdfng/directives/pdfPage.coffee b/services/web/public/coffee/ide/pdfng/directives/pdfPage.coffee
index 09e8427a92..8215de26a4 100644
--- a/services/web/public/coffee/ide/pdfng/directives/pdfPage.coffee
+++ b/services/web/public/coffee/ide/pdfng/directives/pdfPage.coffee
@@ -1,6 +1,6 @@
-app = angular.module 'pdfPage', []
+app = angular.module 'pdfPage', ['pdfHighlights']
 
-app.directive 'pdfPage', ['$timeout', ($timeout) ->
+app.directive 'pdfPage', ['$timeout', 'pdfHighlights', ($timeout, pdfHighlights) ->
 	{
 		require: '^pdfViewer',
 		template: '''
@@ -78,5 +78,22 @@ app.directive 'pdfPage', ['$timeout', ($timeout) ->
 				else if !newVisible && oldVisible
 					pausePage()
 
+			highlightsLayer = new pdfHighlights({
+				highlights: highlightsElement
+			})
+
+			scope.$watch 'highlights', (highlights, oldVal) ->
+				console.log 'got highlight watch in pdfPage', scope.page
+				pageHighlights = (h for h in highlights when h.page == scope.page.pageNum)
+				return unless pageHighlights.length
+				scope.document.getPdfViewport(scope.page.pageNum).then (viewport) ->
+					for hl in pageHighlights
+						console.log 'adding highlight', h, viewport
+						top = viewport.viewBox[3] - hl.v
+						highlightsLayer.addHighlight viewport, hl.h, top, hl.width, hl.height
+				$timeout () ->
+					highlightsLayer.clearHighlights()
+				, 1000
+
 	}
 ]
diff --git a/services/web/public/coffee/ide/pdfng/directives/pdfViewer.coffee b/services/web/public/coffee/ide/pdfng/directives/pdfViewer.coffee
index 05a396baa9..aa2e75036b 100644
--- a/services/web/public/coffee/ide/pdfng/directives/pdfViewer.coffee
+++ b/services/web/public/coffee/ide/pdfng/directives/pdfViewer.coffee
@@ -325,7 +325,7 @@ app.directive 'pdfViewer', ['$q', '$timeout', ($q, $timeout) ->
 				console.log 'areas are', areas
 				highlights = for area in areas or []
 					{
-						page: area.page - 1
+						page: area.page 
 						highlight:
 							left: area.h
 							top: area.v
@@ -337,31 +337,16 @@ app.directive 'pdfViewer', ['$q', '$timeout', ($q, $timeout) ->
 				return if !highlights.length
 
 				first = highlights[0]
-				ctrl.setPdfPosition(scope.pages[first.page], {
-						page: scope.pages[first.page]
+
+				scope.document.getPdfViewport(first.page).then (viewport) ->
+					position = {
+						page: first.page
 						offset:
 							left: first.highlight.left
-							top: first.highlight.top - 80
-					})
+							top: viewport.viewBox[3] - first.highlight.top + first.highlight.height + 72
+					}
+					ctrl.setPdfPosition(scope.pages[first.page - 1], position)
 
-				for h in highlights
-					console.log 'iterating highlights', h
-					page = scope.pages[h.page]
-					element = page.element
-					viewport = page.viewport
-					highlightsElement = $(element).find('.highlights-layer')
-					highlightsLayer = new pdfHighlights({
-							highlights: highlightsElement
-							viewport: viewport
-					})
-					k=h.highlight
-					highlightsLayer.addHighlight(k.left,k.top,k.width,k.height)
-					#pdfListView.clearHighlights()
-					#ctrl.setHighlights(highlights, true)
-
-					#setTimeout () =>
-					#	pdfListView.clearHighlights()
-					#, 1000
 
 	}
 ]