diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug
index dc40d7b9ba..787beab01b 100644
--- a/services/web/app/views/project/editor/editor.pug
+++ b/services/web/app/views/project/editor/editor.pug
@@ -73,21 +73,21 @@ div.full-size(
 		ng-show="!!pdf.url && settings.pdfViewer == 'pdfjs'"
 		ng-controller="PdfSynctexController"
 	)
-		a.btn.btn-default.btn-xs(
+		a.synctex-control-goto-pdf(
 			tooltip=translate('go_to_code_location_in_pdf')
 			tooltip-placement="right"
 			tooltip-append-to-body="true"
 			ng-click="syncToPdf()"
 		)
-			i.fa.fa-long-arrow-right
+			i.synctex-control-icon
 		br
-		a.btn.btn-default.btn-xs(
+		a.synctex-control-goto-code(
 			tooltip-html="'"+translate('go_to_pdf_location_in_code', {}, true)+"'"
 			tooltip-placement="right"
 			tooltip-append-to-body="true"
 			ng-click="syncToCode()"
 		)
-			i.fa.fa-long-arrow-left
+			i.synctex-control-icon
 			
 div.full-size(
 	ng-if="ui.pdfLayout == 'flat'"
diff --git a/services/web/public/coffee/ide/directives/layout.coffee b/services/web/public/coffee/ide/directives/layout.coffee
index d4e98fb0d3..86058447ed 100644
--- a/services/web/public/coffee/ide/directives/layout.coffee
+++ b/services/web/public/coffee/ide/directives/layout.coffee
@@ -53,9 +53,7 @@ define [
 							else
 								controls.show()
 								controls.css({
-									position: "absolute"
 									right: state.east.size
-									"z-index": 3
 								})
 
 					resetOpenStates = () ->
@@ -112,7 +110,7 @@ define [
 						# Set the panel as overflowing (gives it higher z-index and sets overflow rules)
 						layoutObj.allowOverflow overflowPane
 						# Read the given z-index value and increment it, so that it's higher than synctex controls.
-						overflowPaneZVal = overflowPaneEl.css "z-index"
+						overflowPaneZVal = overflowPaneEl.zIndex()
 						overflowPaneEl.css "z-index", overflowPaneZVal + 1
 
 					resetOpenStates()
diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index e280f92779..1c45fd6a1c 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -289,6 +289,7 @@
 	margin-right: -(@extra-hit-area - 1px) !important;
 	padding-left: @extra-hit-area !important;
 	padding-right: @extra-hit-area !important;
+	z-index: 5 !important;
 	box-sizing: content-box;
 	background-image: linear-gradient(90deg, 
 		transparent,
diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less
index a873cd5e8f..96097df1bf 100644
--- a/services/web/public/stylesheets/app/editor/pdf.less
+++ b/services/web/public/stylesheets/app/editor/pdf.less
@@ -229,14 +229,49 @@
 }
 
 .synctex-controls {
+	position: absolute;
+	z-index: @synctex-controls-z-index;
 	top: 68px;
 	padding: 0px 2px;
 	.btn-xs {
 		line-height: 1.3;
-		padding: 0 2px 0;
+		padding: @synctex-controls-btn-padding;
 	}
 }
 
+.synctex-controls when (@is-overleaf = true) {
+	margin-right: -9px;
+}
+	.synctex-control-goto-pdf,
+	.synctex-control-goto-code {
+		.btn;
+		.btn-default;
+		.btn-xs;
+
+		> .synctex-control-icon {
+			display: inline-block;
+			font: normal normal normal 14px/1 FontAwesome;
+			font-size: inherit;
+			text-rendering: auto;
+			-webkit-font-smoothing: antialiased;
+			-moz-osx-font-smoothing: grayscale;
+		}
+	}
+	
+	.synctex-control-goto-pdf > .synctex-control-icon::before when (@is-overleaf = true) {
+		content: "\f061";		
+	}
+	.synctex-control-goto-code > .synctex-control-icon::before when (@is-overleaf = true) {
+		content: "\f060";		
+	}
+	
+	.synctex-control-goto-pdf > .synctex-control-icon::before when (@is-overleaf = false) {
+		content: "\f178";		
+	}
+	.synctex-control-goto-code > .synctex-control-icon::before when (@is-overleaf = false) {
+		content: "\f177";		
+	}
+
 .editor-dark {
 	.pdf-logs {
 		background-color: lighten(@editor-dark-background-color, 10%);
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index c5bd633b15..958c5a1a10 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -919,6 +919,8 @@
 // Editor resizers
 @editor-resizer-bg-color          : #F4F4F4;
 @editor-resizer-bg-color-dragging : #ddd;
+@synctex-controls-z-index         : 3;
+@synctex-controls-btn-padding     : 0 2px 0;
 // Tags
 @tag-border-radius  : 0.25em;
 @tag-bg-color       : @label-default-bg;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 54fdddf309..812cd3e8f9 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -187,7 +187,8 @@
 // Editor resizers
 @editor-resizer-bg-color          : @ol-blue-gray-6;
 @editor-resizer-bg-color-dragging : transparent;
-
+@synctex-controls-z-index         : 6;
+@synctex-controls-btn-padding     : 4px;
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.