diff --git a/app/src/panels/metric/index.ts b/app/src/panels/metric/index.ts
index bae658978c..09a5eccf0c 100644
--- a/app/src/panels/metric/index.ts
+++ b/app/src/panels/metric/index.ts
@@ -156,6 +156,7 @@ export default definePanel({
 				width: 'half',
 				options: {
 					placeholder: '$t:prefix_placeholder',
+					trim: false,
 				},
 			},
 		},
@@ -168,6 +169,7 @@ export default definePanel({
 				width: 'half',
 				options: {
 					placeholder: '$t:suffix_placeholder',
+					trim: false,
 				},
 			},
 		},
diff --git a/app/src/panels/metric/metric.vue b/app/src/panels/metric/metric.vue
index 6ae265f7dc..08b5426a47 100644
--- a/app/src/panels/metric/metric.vue
+++ b/app/src/panels/metric/metric.vue
@@ -1,11 +1,11 @@
 <template>
 	<div class="metric type-title selectable" :class="{ 'has-header': show_header }">
 		<v-progress-circular indeterminate v-if="loading" />
-		<template v-else>
+		<div :style="{ color }" v-else>
 			<span class="prefix">{{ options.prefix }}</span>
-			<span class="value" :style="{ color }">{{ displayValue }}</span>
+			<span class="value">{{ displayValue }}</span>
 			<span class="suffix">{{ options.suffix }}</span>
-		</template>
+		</div>
 	</div>
 </template>
 
@@ -181,11 +181,4 @@ export default defineComponent({
 .metric.has-header {
 	height: calc(100% - 16px);
 }
-
-.suffix {
-	position: relative;
-	top: 7px;
-	font-weight: 700;
-	font-size: 24px;
-}
 </style>
diff --git a/app/src/panels/register.ts b/app/src/panels/register.ts
index 0a8a09bc45..a13db686cd 100644
--- a/app/src/panels/register.ts
+++ b/app/src/panels/register.ts
@@ -1,6 +1,4 @@
-import api from '@/api';
 import { getRootPath } from '@/utils/get-root-path';
-import { asyncPool } from '@/utils/async-pool';
 import { App } from 'vue';
 import { getPanels } from './index';
 import { PanelConfig } from './types';
@@ -8,33 +6,28 @@ import { PanelConfig } from './types';
 const { panelsRaw } = getPanels();
 
 export async function registerPanels(app: App): Promise<void> {
-	const panelModules = import.meta.globEager('./*/**/index.ts');
+	const interfaceModules = import.meta.globEager('./*/**/index.ts');
 
-	const panels: PanelConfig[] = Object.values(panelModules).map((module) => module.default);
+	const panels: PanelConfig[] = Object.values(interfaceModules).map((module) => module.default);
 
 	try {
-		const customResponse = await api.get('/extensions/panels/');
-		const customPanels: string[] = customResponse.data.data || [];
+		const customPanels: { default: PanelConfig[] } = import.meta.env.DEV
+			? await import('@directus-extensions-interface')
+			: await import(/* @vite-ignore */ `${getRootPath()}extensions/panels/index.js`);
 
-		await asyncPool(5, customPanels, async (panelName) => {
-			try {
-				const result = await import(/* @vite-ignore */ `${getRootPath()}extensions/panels/${panelName}/index.js`);
-				panels.push(result.default);
-			} catch (err) {
-				console.warn(`Couldn't load custom panel "${panelName}":`, err);
-			}
-		});
+		panels.push(...customPanels.default);
 	} catch {
+		// eslint-disable-next-line no-console
 		console.warn(`Couldn't load custom panels`);
 	}
 
 	panelsRaw.value = panels;
 
-	panelsRaw.value.forEach((panel: PanelConfig) => {
-		app.component('panel-' + panel.id, panel.component);
+	panelsRaw.value.forEach((inter: PanelConfig) => {
+		app.component('interface-' + inter.id, inter.component);
 
-		if (typeof panel.options !== 'function' && Array.isArray(panel.options) === false) {
-			app.component(`panel-options-${panel.id}`, panel.options);
+		if (typeof inter.options !== 'function' && Array.isArray(inter.options) === false) {
+			app.component(`interface-options-${inter.id}`, inter.options);
 		}
 	});
 }