diff --git a/api/src/services/payload.ts b/api/src/services/payload.ts
index 59e68f17d3..46ca5dfdd4 100644
--- a/api/src/services/payload.ts
+++ b/api/src/services/payload.ts
@@ -305,7 +305,7 @@ export class PayloadService {
 					}
 
 					if (dateColumn.type === 'date') {
-						const [year, month, day] = value.toISOString().substr(0, 10).split('-');
+						const [year, month, day] = value.toISOString().slice(0, 10).split('-');
 
 						// Strip off the time / timezone information from a date-only value
 						const newValue = `${year}-${month}-${day}`;
diff --git a/app/src/components/v-field-template/v-field-template.vue b/app/src/components/v-field-template/v-field-template.vue
index 696189b055..ce1f211a9e 100644
--- a/app/src/components/v-field-template/v-field-template.vue
+++ b/app/src/components/v-field-template/v-field-template.vue
@@ -223,8 +223,8 @@ export default defineComponent({
 
 			const startOffset = range.startOffset;
 
-			const left = start.textContent?.substr(0, startOffset) || '';
-			const right = start.textContent?.substr(startOffset) || '';
+			const left = start.textContent?.slice(0, startOffset) || '';
+			const right = start.textContent?.slice(startOffset) || '';
 
 			start.innerText = left;
 
diff --git a/app/src/interfaces/select-color/select-color.vue b/app/src/interfaces/select-color/select-color.vue
index e302616f9e..126626be7d 100644
--- a/app/src/interfaces/select-color/select-color.vue
+++ b/app/src/interfaces/select-color/select-color.vue
@@ -13,7 +13,7 @@
 				<template #prepend>
 					<v-input
 						ref="htmlColorInput"
-						:model-value="hex ? hex.substr(0, 7) : null"
+						:model-value="hex ? hex.slice(0, 7) : null"
 						type="color"
 						class="html-color-select"
 						@update:model-value="setSwatchValue($event)"
@@ -266,7 +266,7 @@ function setValue(type: 'rgb' | 'hsl' | 'alpha', i: number, val: number) {
 }
 
 function setSwatchValue(color: string) {
-	hex.value = `${color}${hex.value !== null && hex.value.length === 9 ? hex.value.substr(-2) : ''}`;
+	hex.value = `${color}${hex.value !== null && hex.value.length === 9 ? hex.value.slice(-2) : ''}`;
 }
 
 function unsetColor() {
diff --git a/app/src/modules/docs/components/navigation.vue b/app/src/modules/docs/components/navigation.vue
index ae3896e88a..cddea81c74 100644
--- a/app/src/modules/docs/components/navigation.vue
+++ b/app/src/modules/docs/components/navigation.vue
@@ -10,7 +10,7 @@ import NavigationItem from './navigation-item.vue';
 import navLinks from './links.yaml';
 
 function spreadPath(path: string) {
-	const sections = path.substr(1).split('/');
+	const sections = path.slice(1).split('/');
 	if (sections.length === 0) return [];
 
 	const paths: string[] = ['/' + sections[0]];
diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
index 1c7fc5f4b8..8c835ed47b 100644
--- a/packages/cli/src/index.ts
+++ b/packages/cli/src/index.ts
@@ -131,7 +131,7 @@ export default async function <T>(argv: string[]): Promise<CommandResult<T>> {
 
 				if (file.endsWith('.js')) {
 					// only allow .js if there's no matching .ts
-					return result.indexOf(`${file.substr(0, file.length - 3)}.ts`) < 0;
+					return result.indexOf(`${file.slice(0, -3)}.ts`) < 0;
 				}
 
 				return false;
diff --git a/packages/sdk/tests/handlers/utils.test.ts b/packages/sdk/tests/handlers/utils.test.ts
index 329275fd5f..3f2225c2c0 100644
--- a/packages/sdk/tests/handlers/utils.test.ts
+++ b/packages/sdk/tests/handlers/utils.test.ts
@@ -38,7 +38,7 @@ describe('utils', function () {
 		const sdk = new Directus(url);
 		const hash = await sdk.utils.hash.generate('wolfulus');
 
-		expect(hash?.substr(0, 7)).toBe('$argon2');
+		expect(hash?.slice(0, 7)).toBe('$argon2');
 	});
 
 	test(`hash verify`, async (url, nock) => {
@@ -55,7 +55,7 @@ describe('utils', function () {
 		const sdk = new Directus(url);
 		const hash = await sdk.utils.hash.generate('wolfulus');
 
-		expect(hash?.substr(0, 7)).toBe('$argon2');
+		expect(hash?.slice(0, 7)).toBe('$argon2');
 
 		nock()
 			.post('/utils/hash/verify')