diff --git a/docs/docs/public/components/pdf.png b/docs/docs/public/components/pdf.png
index 365756845..413b3d784 100644
Binary files a/docs/docs/public/components/pdf.png and b/docs/docs/public/components/pdf.png differ
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 07502a915..a2526d984 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -11,6 +11,7 @@
 				"@apache-arrow/ts": "^12.0.1",
 				"@googlemaps/js-api-loader": "1.16.3",
 				"@monaco-editor/loader": "^1.3.3",
+				"@tato30/vue-pdf": "1.9.4",
 				"arquero": "^5.2.0",
 				"marked": "^7.0.2",
 				"monaco-editor": "^0.41.0",
@@ -262,6 +263,26 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@mapbox/node-pre-gyp": {
+			"version": "1.0.11",
+			"resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
+			"integrity": "sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==",
+			"optional": true,
+			"dependencies": {
+				"detect-libc": "^2.0.0",
+				"https-proxy-agent": "^5.0.0",
+				"make-dir": "^3.1.0",
+				"node-fetch": "^2.6.7",
+				"nopt": "^5.0.0",
+				"npmlog": "^5.0.1",
+				"rimraf": "^3.0.2",
+				"semver": "^7.3.5",
+				"tar": "^6.1.11"
+			},
+			"bin": {
+				"node-pre-gyp": "bin/node-pre-gyp"
+			}
+		},
 		"node_modules/@monaco-editor/loader": {
 			"version": "1.3.3",
 			"license": "MIT",
@@ -341,6 +362,17 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@tato30/vue-pdf": {
+			"version": "1.9.4",
+			"resolved": "https://registry.npmjs.org/@tato30/vue-pdf/-/vue-pdf-1.9.4.tgz",
+			"integrity": "sha512-QxL/0oZtM2kuv4TCBqDi/U1aT4xgJx9DWkn4VV5Qp7xFqw3QrQ5BZhzMYhokI373xDvEjAO8wPObzOQ+3ti3Dg==",
+			"dependencies": {
+				"pdfjs-dist": "3.7.107"
+			},
+			"peerDependencies": {
+				"vue": "^3.2.33"
+			}
+		},
 		"node_modules/@types/clone": {
 			"version": "2.1.1",
 			"license": "MIT"
@@ -750,6 +782,12 @@
 			"version": "3.3.4",
 			"license": "MIT"
 		},
+		"node_modules/abbrev": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+			"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+			"optional": true
+		},
 		"node_modules/acorn": {
 			"version": "8.10.0",
 			"license": "MIT",
@@ -768,6 +806,18 @@
 				"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
 			}
 		},
+		"node_modules/agent-base": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+			"integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+			"optional": true,
+			"dependencies": {
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 6.0.0"
+			}
+		},
 		"node_modules/ajv": {
 			"version": "6.12.6",
 			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -829,6 +879,25 @@
 			"version": "2.0.4",
 			"license": "SEE LICENSE IN LICENSE.txt"
 		},
+		"node_modules/aproba": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
+			"integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
+			"optional": true
+		},
+		"node_modules/are-we-there-yet": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
+			"integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
+			"optional": true,
+			"dependencies": {
+				"delegates": "^1.0.0",
+				"readable-stream": "^3.6.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/argparse": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -862,7 +931,7 @@
 		},
 		"node_modules/balanced-match": {
 			"version": "1.0.2",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT"
 		},
 		"node_modules/boolbase": {
@@ -872,7 +941,7 @@
 		},
 		"node_modules/brace-expansion": {
 			"version": "1.1.11",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"balanced-match": "^1.0.0",
@@ -924,6 +993,21 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/canvas": {
+			"version": "2.11.2",
+			"resolved": "https://registry.npmjs.org/canvas/-/canvas-2.11.2.tgz",
+			"integrity": "sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==",
+			"hasInstallScript": true,
+			"optional": true,
+			"dependencies": {
+				"@mapbox/node-pre-gyp": "^1.0.0",
+				"nan": "^2.17.0",
+				"simple-get": "^3.0.3"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/chalk": {
 			"version": "2.4.2",
 			"license": "MIT",
@@ -944,6 +1028,15 @@
 				"is-regex": "^1.0.3"
 			}
 		},
+		"node_modules/chownr": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+			"integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+			"optional": true,
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/cliui": {
 			"version": "8.0.1",
 			"license": "ISC",
@@ -974,6 +1067,15 @@
 			"version": "1.1.3",
 			"license": "MIT"
 		},
+		"node_modules/color-support": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
+			"integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
+			"optional": true,
+			"bin": {
+				"color-support": "bin.js"
+			}
+		},
 		"node_modules/command-line-args": {
 			"version": "5.2.1",
 			"license": "MIT",
@@ -1023,9 +1125,15 @@
 		},
 		"node_modules/concat-map": {
 			"version": "0.0.1",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT"
 		},
+		"node_modules/console-control-strings": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+			"integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
+			"optional": true
+		},
 		"node_modules/cross-spawn": {
 			"version": "7.0.3",
 			"dev": true,
@@ -1243,7 +1351,7 @@
 		},
 		"node_modules/debug": {
 			"version": "4.3.4",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"ms": "2.1.2"
@@ -1257,6 +1365,18 @@
 				}
 			}
 		},
+		"node_modules/decompress-response": {
+			"version": "4.2.1",
+			"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
+			"integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
+			"optional": true,
+			"dependencies": {
+				"mimic-response": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/deep-extend": {
 			"version": "0.6.0",
 			"license": "MIT",
@@ -1276,6 +1396,21 @@
 				"robust-predicates": "^3.0.0"
 			}
 		},
+		"node_modules/delegates": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+			"integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
+			"optional": true
+		},
+		"node_modules/detect-libc": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz",
+			"integrity": "sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==",
+			"optional": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/diff": {
 			"version": "4.0.2",
 			"dev": true,
@@ -1780,9 +1915,33 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/fs-minipass": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+			"integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+			"optional": true,
+			"dependencies": {
+				"minipass": "^3.0.0"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/fs-minipass/node_modules/minipass": {
+			"version": "3.3.6",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+			"integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+			"optional": true,
+			"dependencies": {
+				"yallist": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/fs.realpath": {
 			"version": "1.0.0",
-			"dev": true,
+			"devOptional": true,
 			"license": "ISC"
 		},
 		"node_modules/fsevents": {
@@ -1802,6 +1961,26 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/gauge": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
+			"integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
+			"optional": true,
+			"dependencies": {
+				"aproba": "^1.0.3 || ^2.0.0",
+				"color-support": "^1.1.2",
+				"console-control-strings": "^1.0.0",
+				"has-unicode": "^2.0.1",
+				"object-assign": "^4.1.1",
+				"signal-exit": "^3.0.0",
+				"string-width": "^4.2.3",
+				"strip-ansi": "^6.0.1",
+				"wide-align": "^1.1.2"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/get-caller-file": {
 			"version": "2.0.5",
 			"license": "ISC",
@@ -1825,7 +2004,7 @@
 		},
 		"node_modules/glob": {
 			"version": "7.2.3",
-			"dev": true,
+			"devOptional": true,
 			"license": "ISC",
 			"dependencies": {
 				"fs.realpath": "^1.0.0",
@@ -1947,6 +2126,25 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/has-unicode": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+			"integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
+			"optional": true
+		},
+		"node_modules/https-proxy-agent": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+			"integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+			"optional": true,
+			"dependencies": {
+				"agent-base": "6",
+				"debug": "4"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/iconv-lite": {
 			"version": "0.6.3",
 			"license": "MIT",
@@ -1991,7 +2189,7 @@
 		},
 		"node_modules/inflight": {
 			"version": "1.0.6",
-			"dev": true,
+			"devOptional": true,
 			"license": "ISC",
 			"dependencies": {
 				"once": "^1.3.0",
@@ -2000,7 +2198,7 @@
 		},
 		"node_modules/inherits": {
 			"version": "2.0.4",
-			"dev": true,
+			"devOptional": true,
 			"license": "ISC"
 		},
 		"node_modules/internmap": {
@@ -2202,6 +2400,30 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/make-dir": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+			"integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+			"optional": true,
+			"dependencies": {
+				"semver": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/make-dir/node_modules/semver": {
+			"version": "6.3.1",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+			"integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+			"optional": true,
+			"bin": {
+				"semver": "bin/semver.js"
+			}
+		},
 		"node_modules/marked": {
 			"version": "7.0.2",
 			"license": "MIT",
@@ -2234,9 +2456,21 @@
 				"node": ">=8.6"
 			}
 		},
+		"node_modules/mimic-response": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
+			"integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
+			"optional": true,
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/minimatch": {
 			"version": "3.1.2",
-			"dev": true,
+			"devOptional": true,
 			"license": "ISC",
 			"dependencies": {
 				"brace-expansion": "^1.1.7"
@@ -2253,6 +2487,40 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/minipass": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+			"integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+			"optional": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/minizlib": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+			"integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+			"optional": true,
+			"dependencies": {
+				"minipass": "^3.0.0",
+				"yallist": "^4.0.0"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/minizlib/node_modules/minipass": {
+			"version": "3.3.6",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+			"integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+			"optional": true,
+			"dependencies": {
+				"yallist": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/mkdirp": {
 			"version": "0.5.6",
 			"dev": true,
@@ -2270,9 +2538,15 @@
 		},
 		"node_modules/ms": {
 			"version": "2.1.2",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT"
 		},
+		"node_modules/nan": {
+			"version": "2.18.0",
+			"resolved": "https://registry.npmjs.org/nan/-/nan-2.18.0.tgz",
+			"integrity": "sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==",
+			"optional": true
+		},
 		"node_modules/nanoid": {
 			"version": "3.3.6",
 			"funding": [
@@ -2312,6 +2586,33 @@
 				}
 			}
 		},
+		"node_modules/nopt": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
+			"integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
+			"optional": true,
+			"dependencies": {
+				"abbrev": "1"
+			},
+			"bin": {
+				"nopt": "bin/nopt.js"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/npmlog": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
+			"integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
+			"optional": true,
+			"dependencies": {
+				"are-we-there-yet": "^2.0.0",
+				"console-control-strings": "^1.1.0",
+				"gauge": "^3.0.0",
+				"set-blocking": "^2.0.0"
+			}
+		},
 		"node_modules/nth-check": {
 			"version": "2.1.1",
 			"dev": true,
@@ -2325,7 +2626,7 @@
 		},
 		"node_modules/object-assign": {
 			"version": "4.1.1",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=0.10.0"
@@ -2333,7 +2634,7 @@
 		},
 		"node_modules/once": {
 			"version": "1.4.0",
-			"dev": true,
+			"devOptional": true,
 			"license": "ISC",
 			"dependencies": {
 				"wrappy": "1"
@@ -2415,7 +2716,7 @@
 		},
 		"node_modules/path-is-absolute": {
 			"version": "1.0.1",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=0.10.0"
@@ -2443,6 +2744,27 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/path2d-polyfill": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/path2d-polyfill/-/path2d-polyfill-2.0.1.tgz",
+			"integrity": "sha512-ad/3bsalbbWhmBo0D6FZ4RNMwsLsPpL6gnvhuSaU5Vm7b06Kr5ubSltQQ0T7YKsiJQO+g22zJ4dJKNTXIyOXtA==",
+			"optional": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/pdfjs-dist": {
+			"version": "3.7.107",
+			"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-3.7.107.tgz",
+			"integrity": "sha512-D0pZgz4u8VNjCCXfNCjzeFcenxKFGh2RnGlLIvDHgpT+ZvOlsBlHugpOfmcLQyKk7csHBhPalf+mCM6thiclSQ==",
+			"engines": {
+				"node": ">=18"
+			},
+			"optionalDependencies": {
+				"canvas": "^2.11.2",
+				"path2d-polyfill": "^2.0.1"
+			}
+		},
 		"node_modules/picocolors": {
 			"version": "1.0.0",
 			"license": "ISC"
@@ -2585,6 +2907,20 @@
 				"safe-buffer": "^5.1.0"
 			}
 		},
+		"node_modules/readable-stream": {
+			"version": "3.6.2",
+			"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+			"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+			"optional": true,
+			"dependencies": {
+				"inherits": "^2.0.3",
+				"string_decoder": "^1.1.1",
+				"util-deprecate": "^1.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/reduce-flatten": {
 			"version": "2.0.0",
 			"license": "MIT",
@@ -2646,7 +2982,7 @@
 		},
 		"node_modules/rimraf": {
 			"version": "3.0.2",
-			"dev": true,
+			"devOptional": true,
 			"license": "ISC",
 			"dependencies": {
 				"glob": "^7.1.3"
@@ -2745,6 +3081,12 @@
 				"randombytes": "^2.1.0"
 			}
 		},
+		"node_modules/set-blocking": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+			"integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+			"optional": true
+		},
 		"node_modules/shebang-command": {
 			"version": "2.0.0",
 			"dev": true,
@@ -2764,6 +3106,43 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/signal-exit": {
+			"version": "3.0.7",
+			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+			"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+			"optional": true
+		},
+		"node_modules/simple-concat": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+			"integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/feross"
+				},
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/feross"
+				},
+				{
+					"type": "consulting",
+					"url": "https://feross.org/support"
+				}
+			],
+			"optional": true
+		},
+		"node_modules/simple-get": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz",
+			"integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
+			"optional": true,
+			"dependencies": {
+				"decompress-response": "^4.2.0",
+				"once": "^1.3.1",
+				"simple-concat": "^1.0.0"
+			}
+		},
 		"node_modules/slash": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -2808,6 +3187,15 @@
 			"version": "1.0.7",
 			"license": "MIT"
 		},
+		"node_modules/string_decoder": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+			"integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+			"optional": true,
+			"dependencies": {
+				"safe-buffer": "~5.2.0"
+			}
+		},
 		"node_modules/string-width": {
 			"version": "4.2.3",
 			"license": "MIT",
@@ -2906,6 +3294,35 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/tar": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/tar/-/tar-6.2.0.tgz",
+			"integrity": "sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==",
+			"optional": true,
+			"dependencies": {
+				"chownr": "^2.0.0",
+				"fs-minipass": "^2.0.0",
+				"minipass": "^5.0.0",
+				"minizlib": "^2.1.1",
+				"mkdirp": "^1.0.3",
+				"yallist": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/tar/node_modules/mkdirp": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+			"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+			"optional": true,
+			"bin": {
+				"mkdirp": "bin/cmd.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/terser": {
 			"version": "5.27.1",
 			"license": "BSD-2-Clause",
@@ -3115,7 +3532,7 @@
 		},
 		"node_modules/util-deprecate": {
 			"version": "1.0.2",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT"
 		},
 		"node_modules/vega": {
@@ -3762,6 +4179,15 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/wide-align": {
+			"version": "1.1.5",
+			"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
+			"integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
+			"optional": true,
+			"dependencies": {
+				"string-width": "^1.0.2 || 2 || 3 || 4"
+			}
+		},
 		"node_modules/wordwrapjs": {
 			"version": "4.0.1",
 			"license": "MIT",
@@ -3824,7 +4250,7 @@
 		},
 		"node_modules/wrappy": {
 			"version": "1.0.2",
-			"dev": true,
+			"devOptional": true,
 			"license": "ISC"
 		},
 		"node_modules/xml-name-validator": {
diff --git a/ui/package.json b/ui/package.json
index 5d455d2e6..b6cb77296 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -24,6 +24,7 @@
 		"vega-embed": "^6.22.1",
 		"vega-lite": "^5.7.1",
 		"vue": "^3.2.47",
+    "@tato30/vue-pdf": "1.9.4",
 		"vue-dompurify-html": "^4.1.4"
 	},
 	"devDependencies": {
diff --git a/ui/src/core_components/embed/CorePDF.vue b/ui/src/core_components/embed/CorePDF.vue
index 2d4fdb15d..812dd1ad4 100644
--- a/ui/src/core_components/embed/CorePDF.vue
+++ b/ui/src/core_components/embed/CorePDF.vue
@@ -1,17 +1,44 @@
 <template>
-	<div class="CorePDF">
-		<object
-			:key="fields.source.value"
-			class="pdf"
-			:data="fields.source.value"
-			type="application/pdf"
-		>
-			<p>
-				You're not authorised to embed in the browser or you don't have
-				PDF plugin
-				<a :href="fields.source.value">download the PDF file. </a>
-			</p>
-		</object>
+	<div ref="rootEl" class="CorePDF">
+		<div class="controls">
+			<i class="ri-arrow-up-s-line" @click="() => gotoPage(page - 1)"></i>
+			<i
+				class="ri-arrow-down-s-line"
+				@click="() => gotoPage(page + 1)"
+			></i>
+			<span :key="page">{{ page }} / {{ pages }}</span>
+			<i class="ri-zoom-in-line" @click="incrementScale"></i>
+			<i class="ri-zoom-out-line" @click="decrementScale"></i>
+			<span>{{ Math.round(scale * 100) }}%</span>
+			<span class="separator" />
+			<i
+				v-if="matches.length"
+				class="ri-arrow-up-s-line"
+				@click="decrementMatchIdx"
+			></i>
+			<i
+				v-if="matches.length"
+				class="ri-arrow-down-s-line"
+				@click="incrementMatchIdx"
+			></i>
+			<span v-if="matches.length"
+				>Matches {{ currentMatch }} / {{ matches.length }}</span
+			>
+		</div>
+		<div ref="viewerEl" class="viewer" @scroll="scroll">
+			<div v-for="p in pages" :key="p" :page="p" class="page">
+				<VuePDF
+					:scale="scale"
+					:pdf="pdf"
+					:page="p"
+					text-layer
+					:highlight-text="highlightText"
+					:highlight-options="highlightOptions"
+					@highlight="onHighlight"
+					@loaded="onLoaded"
+				/>
+			</div>
+		</div>
 		<div class="mask" />
 	</div>
 </template>
@@ -33,26 +60,251 @@ export default {
 				type: FieldType.Text,
 				desc: "A valid URL. Alternatively, you can provide a state reference to a packed PDF file.",
 			},
+			highlights: {
+				name: "Highlights",
+				default: JSON.stringify([]),
+				desc: "A list of highlights to be applied to the PDF as a JSON array of strings.",
+				type: FieldType.Object,
+			},
+			selectedMatch: {
+				name: "Selected highlight match",
+				default: null,
+				desc: "The index of the selected highlight match.",
+				type: FieldType.Number,
+			},
+			page: {
+				name: "Page",
+				type: FieldType.Number,
+				desc: "The page to be displayed.",
+			},
 			cssClasses,
 		},
+		events: {
+			"pdf-load": {
+				desc: "",
+			},
+		},
 	},
 };
 </script>
 
 <script setup lang="ts">
-import { inject } from "vue";
+import { inject, ref, watch, computed } from "vue";
+import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import injectionKeys from "../../injectionKeys";
+import "@tato30/vue-pdf/style.css";
+
+type MatchType = { str: string; page: number; index: number };
+
 const fields = inject(injectionKeys.evaluatedFields);
+
+const { pdf, pages } = usePDF(fields.source);
+
+const highlightText = computed(() => {
+	return fields.highlights.value
+		? fields.highlights.value
+				.map((v: string) => v.replaceAll("|", "\\|"))
+				.join("|")
+		: "";
+});
+const highlightOptions = ref({
+	completeWords: false,
+	ignoreCase: true,
+});
+const scale = ref(1);
+const page = ref(1);
+const matches = ref<MatchType[]>([]);
+const currentMatch = ref(0);
+const rootEl = ref(null);
+const viewerEl = ref(null);
+
+const onHighlight = (value) => {
+	matches.value = [
+		...matches.value,
+		...value.matches.map((m: MatchType, idx: number) => ({
+			page: value.page,
+			str: m.str,
+			index: idx,
+		})),
+	];
+	// sort by page and index
+	matches.value.sort((a, b) => {
+		if (a.page === b.page) {
+			return a.index - b.index;
+		}
+		return a.page - b.page;
+	});
+	if (currentMatch.value > 0) {
+		gotoHighlight(currentMatch.value);
+	}
+};
+
+const scroll = (event) => {
+	const c = event.target.getBoundingClientRect();
+	const r = [...event.target.children]
+		.filter((child) => child.className.includes("page"))
+		.find((child) => {
+			const e = child.getBoundingClientRect();
+			const relativeY = e.y - c.y;
+			return (
+				relativeY < c.height / 2 && relativeY + e.height > c.height / 2
+			);
+		});
+	if (r) {
+		page.value = Number(r.getAttribute("page"));
+	}
+};
+
+const calcScrollPosition = (targetEl: HTMLElement, parentEl: HTMLElement) => {
+	let offsetTop = 0;
+	let el = targetEl;
+	while (el && el !== parentEl) {
+		offsetTop += el.offsetTop;
+		el = el.offsetParent as HTMLElement;
+	}
+	return offsetTop;
+};
+
+const gotoHighlight = (matchIdx: number) => {
+	if (matchIdx < 1 || matchIdx > matches.value.length) {
+		return;
+	}
+	const match = matches.value[matchIdx - 1];
+	console.log(match);
+	const matchEls = rootEl.value.querySelectorAll(
+		`div[page='${match.page}'] span.highlight`,
+	);
+	const matchEl = matchEls[match.index];
+	// scrollIntoView is breaking pdf viewer
+	viewerEl.value.scrollTop = calcScrollPosition(matchEl, viewerEl.value);
+};
+
+const gotoPage = (page: number) => {
+	if (page < 1 || page > pages.value) {
+		return;
+	}
+	const pageEl = rootEl.value.querySelector("div[page='" + page + "']");
+	viewerEl.value.scrollTop = calcScrollPosition(pageEl, viewerEl.value);
+};
+
+const onLoaded = () => {
+	if (fields.page.value) {
+		gotoPage(fields.page.value);
+	}
+	if (fields.selectedMatch.value) {
+		currentMatch.value = fields.selectedMatch.value;
+	}
+};
+
+const incrementMatchIdx = () => {
+	if (currentMatch.value < matches.value.length) {
+		currentMatch.value = currentMatch.value + 1;
+	} else {
+		currentMatch.value = 1;
+	}
+};
+
+const decrementMatchIdx = () => {
+	if (currentMatch.value > 1) {
+		currentMatch.value = currentMatch.value - 1;
+	} else {
+		currentMatch.value = matches.value.length;
+	}
+};
+
+const incrementScale = () => {
+	scale.value = scale.value < 2 ? scale.value + 0.1 : scale.value;
+};
+
+const decrementScale = () => {
+	scale.value = scale.value > 0.25 ? scale.value - 0.1 : scale.value;
+};
+
+watch(fields.source, () => {
+	matches.value = [];
+});
+
+watch(fields.highlights, () => {
+	matches.value = [];
+});
+
+watch(currentMatch, () => {
+	gotoHighlight(currentMatch.value);
+});
+
+watch(fields.selectedMatch, () => {
+	currentMatch.value = fields.selectedMatch.value;
+});
+
+watch(fields.page, () => {
+	gotoPage(fields.page.value);
+});
 </script>
 
 <style scoped>
 @import "../../renderer/sharedStyles.css";
+
 .CorePDF {
 	position: relative;
+	display: flex;
+	flex-direction: column;
 	width: 100%;
 	height: 80vh;
 }
 
+.CorePDF .controls {
+	flex: 0 0 40px;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	background-color: var(--backgroundColor);
+	border-bottom: 1px solid var(--separatorColor);
+	padding: 0;
+}
+
+.CorePDF .controls span {
+	flex: 0 0 fit-content;
+	text-align: left;
+	padding: 0 10px;
+}
+
+.CorePDF .controls i {
+	display: block;
+	height: 40px;
+	width: 40px;
+	line-height: 40px;
+	text-align: center;
+	border-radius: 4px;
+	flex: 0 0 40px;
+}
+
+.CorePDF .controls i:hover {
+	cursor: pointer;
+	background: var(--builderSubtleSeparatorColor);
+}
+
+.CorePDF .controls > .separator {
+	flex: 1;
+}
+
+.CorePDF .viewer {
+	flex: 1;
+	overflow: auto;
+	position: relative;
+	background-color: var(--separatorColor);
+}
+
+.CorePDF .viewer .page {
+	border-bottom: 3px solid var(--separatorColor);
+	overflow: hidden;
+}
+
+.CorePDF .viewer .page > div {
+	width: fit-content;
+	margin: 0 auto;
+}
+
 .CorePDF.beingEdited:not(.selected) object {
 	pointer-events: none;
 }