diff --git a/app/public/index.html b/app/public/index.html
index ebc6083a7c..4d46e514d3 100644
--- a/app/public/index.html
+++ b/app/public/index.html
@@ -6,7 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <link rel="shortcut icon" href="/favicon.ico">
     <link rel="manifest" href="/manifest.webmanifest" />
-    <title>Loading...</title>
+	<title>Loading...</title>
+	<style id="custom-css"></style>
   </head>
   <body class="light">
     <noscript>
diff --git a/app/src/app.vue b/app/src/app.vue
index 6f120ee77d..1af46b55dd 100644
--- a/app/src/app.vue
+++ b/app/src/app.vue
@@ -26,6 +26,8 @@
 
 		<portal-target name="dialog-outlet" transition="transition-dialog" multiple />
 		<portal-target name="menu-outlet" transition="transition-bounce" multiple />
+
+		<mounting-portal mount-to="#custom-css" target-tag="style">{{ customCSS }}</mounting-portal>
 	</div>
 </template>
 
@@ -102,6 +104,10 @@ export default defineComponent({
 			}
 		);
 
+		const customCSS = computed(() => {
+			return settingsStore.state?.settings?.custom_css || '';
+		});
+
 		const appAccess = computed(() => {
 			if (!userStore.state.currentUser) return true;
 			return userStore.state.currentUser?.role?.app_access || false;
@@ -118,7 +124,7 @@ export default defineComponent({
 			axios,
 		});
 
-		return { hydrating, brandStyle, appAccess, error };
+		return { hydrating, brandStyle, appAccess, error, customCSS };
 	},
 });
 </script>
diff --git a/app/src/interfaces/code/code.vue b/app/src/interfaces/code/code.vue
index d9c9b826d8..81b7af3304 100644
--- a/app/src/interfaces/code/code.vue
+++ b/app/src/interfaces/code/code.vue
@@ -147,7 +147,7 @@ export default defineComponent({
 						}
 						return found;
 					});
-				} else if (lang === 'javascript' || lang === 'htmlmixed' || lang === 'css' || lang === 'yaml') {
+				} else if (lang === 'javascript' || lang === 'htmlmixed' || lang === 'yaml') {
 					let linter = lang;
 					if (lang === 'javascript') {
 						const jshint = await import('jshint');
@@ -156,9 +156,6 @@ export default defineComponent({
 						linter = 'html';
 						const htmlhint = await import('htmlhint');
 						(window as any).HTMLHint = htmlhint;
-					} else if (lang === 'css') {
-						const csslint = await import('csslint');
-						(window as any).CSSLint = csslint;
 					} else if (lang === 'yaml') {
 						const jsyaml = await import('js-yaml');
 						(window as any).jsyaml = jsyaml;
@@ -166,6 +163,9 @@ export default defineComponent({
 					await import(`codemirror/mode/${lang}/${lang}.js`);
 					await import(`codemirror/addon/lint/${linter}-lint.js`);
 					codemirror.value.setOption('lint', (CodeMirror as any).lint[linter]);
+
+					await import(`codemirror/mode/${lang}/${lang}.js`);
+					codemirror.value.setOption('mode', { name: lang });
 				} else if (lang === 'text/plain') {
 					codemirror.value.setOption('mode', { name: null });
 				} else {
