diff --git a/ui/.eslintrc.js b/ui/.eslintrc.js
index ff884680b..129dc7af7 100644
--- a/ui/.eslintrc.js
+++ b/ui/.eslintrc.js
@@ -6,6 +6,7 @@ module.exports = {
 		"@typescript-eslint/no-explicit-any": "warn",
 		"@typescript-eslint/ban-types": "warn",
 		"prettier/prettier": [2, { useTabs: true, endOfLine: "auto" }],
+		"no-console": "error",
 	},
 	parser: "vue-eslint-parser",
 	parserOptions: {
diff --git a/ui/src/core_components/content/CoreDataframe.vue b/ui/src/core_components/content/CoreDataframe.vue
index 0f8717f49..20b166751 100644
--- a/ui/src/core_components/content/CoreDataframe.vue
+++ b/ui/src/core_components/content/CoreDataframe.vue
@@ -400,6 +400,7 @@ async function loadData() {
 		baseTable = aqTable;
 		table.value = baseTable;
 	} catch (e) {
+		// eslint-disable-next-line no-console
 		console.error("Couldn't load dataframe from Arrow URL.", e);
 	}
 }
diff --git a/ui/src/core_components/embed/CorePDF.vue b/ui/src/core_components/embed/CorePDF.vue
index 812dd1ad4..5d900bbee 100644
--- a/ui/src/core_components/embed/CorePDF.vue
+++ b/ui/src/core_components/embed/CorePDF.vue
@@ -1,26 +1,27 @@
 <template>
 	<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>
+		<div v-if="fields.controls.value === 'yes'" class="controls">
+			<button @click="() => gotoPage(page - 1)">
+				<i class="ri-arrow-up-s-line" />
+			</button>
+			<button @click="() => gotoPage(page + 1)">
+				<i class="ri-arrow-down-s-line" />
+			</button>
 			<span :key="page">{{ page }} / {{ pages }}</span>
-			<i class="ri-zoom-in-line" @click="incrementScale"></i>
-			<i class="ri-zoom-out-line" @click="decrementScale"></i>
+			<button @click="incrementScale">
+				<i class="ri-zoom-in-line" />
+			</button>
+			<button @click="decrementScale">
+				<i class="ri-zoom-out-line" />
+			</button>
 			<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>
+			<button v-if="matches.length" @click="decrementMatchIdx">
+				<i class="ri-arrow-up-s-line" />
+			</button>
+			<button v-if="matches.length" @click="incrementMatchIdx">
+				<i class="ri-arrow-down-s-line" />
+			</button>
 			<span v-if="matches.length"
 				>Matches {{ currentMatch }} / {{ matches.length }}</span
 			>
@@ -45,7 +46,12 @@
 
 <script lang="ts">
 import { FieldType } from "../../streamsyncTypes";
-import { cssClasses } from "../../renderer/sharedStyleFields";
+import {
+	cssClasses,
+	separatorColor,
+	primaryTextColor,
+	containerBackgroundColor,
+} from "../../renderer/sharedStyleFields";
 
 const description = "A component to embed a PDF document.";
 
@@ -77,6 +83,19 @@ export default {
 				type: FieldType.Number,
 				desc: "The page to be displayed.",
 			},
+			controls: {
+				name: "Controls",
+				type: FieldType.Text,
+				options: {
+					yes: "Yes",
+					no: "No",
+				},
+				desc: "Show controls to navigate the PDF.",
+				default: "yes",
+			},
+			containerBackgroundColor,
+			separatorColor,
+			primaryTextColor,
 			cssClasses,
 		},
 		events: {
@@ -170,7 +189,6 @@ const gotoHighlight = (matchIdx: number) => {
 		return;
 	}
 	const match = matches.value[matchIdx - 1];
-	console.log(match);
 	const matchEls = rootEl.value.querySelectorAll(
 		`div[page='${match.page}'] span.highlight`,
 	);
@@ -220,6 +238,10 @@ const decrementScale = () => {
 	scale.value = scale.value > 0.25 ? scale.value - 0.1 : scale.value;
 };
 
+watch(scale, () => {
+	matches.value = [];
+});
+
 watch(fields.source, () => {
 	matches.value = [];
 });
@@ -250,6 +272,7 @@ watch(fields.page, () => {
 	flex-direction: column;
 	width: 100%;
 	height: 80vh;
+	color: var(--primaryTextColor);
 }
 
 .CorePDF .controls {
@@ -269,19 +292,29 @@ watch(fields.page, () => {
 	padding: 0 10px;
 }
 
-.CorePDF .controls i {
-	display: block;
+.CorePDF .controls button {
+	display: flex;
 	height: 40px;
 	width: 40px;
 	line-height: 40px;
 	text-align: center;
 	border-radius: 4px;
 	flex: 0 0 40px;
+	border: none;
+	cursor: pointer;
+	background: none;
+	align-items: center;
+	justify-content: center;
+}
+.CorePDF .controls button i {
+	line-height: 40px;
+	text-align: center;
+	vertical-align: middle;
+	color: var(--primaryTextColor);
 }
 
-.CorePDF .controls i:hover {
-	cursor: pointer;
-	background: var(--builderSubtleSeparatorColor);
+.CorePDF .controls button:hover {
+	border: 1px solid black;
 }
 
 .CorePDF .controls > .separator {
@@ -292,31 +325,23 @@ watch(fields.page, () => {
 	flex: 1;
 	overflow: auto;
 	position: relative;
-	background-color: var(--separatorColor);
+	background-color: var(--containerBackgroundColor);
 }
 
 .CorePDF .viewer .page {
-	border-bottom: 3px solid var(--separatorColor);
+	margin-bottom: 3px;
 	overflow: hidden;
 }
 
+.CorePDF .viewer .page:last-child {
+	margin-bottom: 0;
+}
+
 .CorePDF .viewer .page > div {
 	width: fit-content;
 	margin: 0 auto;
 }
 
-.CorePDF.beingEdited:not(.selected) object {
-	pointer-events: none;
-}
-
-.CorePDF .pdf {
-	width: 100%;
-	height: 100%;
-	display: block;
-	margin: auto;
-	border: 1px solid var(--separatorColor);
-}
-
 .CorePDF .mask {
 	pointer-events: none;
 }
diff --git a/ui/src/core_components/other/CoreWebcamCapture.vue b/ui/src/core_components/other/CoreWebcamCapture.vue
index d843c71de..5faa6c69c 100644
--- a/ui/src/core_components/other/CoreWebcamCapture.vue
+++ b/ui/src/core_components/other/CoreWebcamCapture.vue
@@ -169,6 +169,7 @@ const startCapture = async (): Promise<void> => {
 	videoEl.value.style.display = "";
 	return new Promise((resolve, reject) => {
 		if (!navigator.mediaDevices.getUserMedia) {
+			// eslint-disable-next-line no-console
 			console.error("This browser doesn't support webcam connection.");
 			reject();
 		}
@@ -195,6 +196,7 @@ const startCapture = async (): Promise<void> => {
 				resolve();
 			})
 			.catch((error) => {
+				// eslint-disable-next-line no-console
 				console.error(
 					"An error occurred when trying to use the webcam.",
 					error,
diff --git a/ui/src/core_components/root/CoreRoot.vue b/ui/src/core_components/root/CoreRoot.vue
index 7628ff583..7cee38f62 100644
--- a/ui/src/core_components/root/CoreRoot.vue
+++ b/ui/src/core_components/root/CoreRoot.vue
@@ -220,6 +220,7 @@ async function handleFunctionCall(
 	const m = await import(/* @vite-ignore */ specifier);
 
 	if (!m) {
+		// eslint-disable-next-line no-console
 		console.warn(
 			`The module with key "${moduleKey}" cannot be found. Please check that it has been imported.`,
 		);
diff --git a/ui/src/renderer/ComponentRenderer.vue b/ui/src/renderer/ComponentRenderer.vue
index 0b52a9d78..5c04f912d 100644
--- a/ui/src/renderer/ComponentRenderer.vue
+++ b/ui/src/renderer/ComponentRenderer.vue
@@ -32,6 +32,7 @@ const templateEvaluator = useEvaluator(ss);
 const pages: Component[] = ss.getComponents();
 
 if (pages.length == 0) {
+	// eslint-disable-next-line no-console
 	console.error("No pages found.");
 }