diff --git a/web/src/admin/applications/ApplicationWizardHint.ts b/web/src/admin/applications/ApplicationWizardHint.ts
index 288e18dbd..1bcc338cd 100644
--- a/web/src/admin/applications/ApplicationWizardHint.ts
+++ b/web/src/admin/applications/ApplicationWizardHint.ts
@@ -11,7 +11,7 @@ import "@goauthentik/elements/buttons/ActionButton/ak-action-button";
 import { getURLParam } from "@goauthentik/elements/router/RouteMatch";
 
 import { msg } from "@lit/localize";
-import { html } from "lit";
+import { css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 
@@ -36,7 +36,17 @@ const closeButtonIcon = html`<svg
 @customElement("ak-application-wizard-hint")
 export class AkApplicationWizardHint extends AKElement implements ShowHintControllerHost {
     static get styles() {
-        return [PFButton, PFPage, PFLabel];
+        return [
+            PFButton,
+            PFPage,
+            PFLabel,
+            css`
+                .pf-c-page__main-section {
+                    padding-top: 0;
+                    padding-bottom: 0;
+                }
+            `,
+        ];
     }
 
     @property({ type: Boolean, attribute: "show-hint" })
diff --git a/web/src/admin/blueprints/BlueprintForm.ts b/web/src/admin/blueprints/BlueprintForm.ts
index f47b967cf..47b6c492c 100644
--- a/web/src/admin/blueprints/BlueprintForm.ts
+++ b/web/src/admin/blueprints/BlueprintForm.ts
@@ -3,6 +3,7 @@ import { docLink } from "@goauthentik/common/global";
 import { first } from "@goauthentik/common/utils";
 import "@goauthentik/components/ak-toggle-group";
 import "@goauthentik/elements/CodeMirror";
+import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@@ -169,7 +170,7 @@ export class BlueprintForm extends ModelForm<BlueprintInstance, string> {
                     ${this.source === blueprintSource.internal
                         ? html`<ak-form-element-horizontal label=${msg("Blueprint")} name="content">
                               <ak-codemirror
-                                  mode="yaml"
+                                  mode=${CodeMirrorMode.YAML}
                                   .parseValue=${false}
                                   value="${ifDefined(this.instance?.content)}"
                               ></ak-codemirror>
@@ -183,7 +184,7 @@ export class BlueprintForm extends ModelForm<BlueprintInstance, string> {
                 <div slot="body" class="pf-c-form">
                     <ak-form-element-horizontal label=${msg("Context")} name="context">
                         <ak-codemirror
-                            mode="yaml"
+                            mode=${CodeMirrorMode.YAML}
                             value="${YAML.stringify(first(this.instance?.context, {}))}"
                         >
                         </ak-codemirror>
diff --git a/web/src/admin/groups/GroupForm.ts b/web/src/admin/groups/GroupForm.ts
index 2a1cca350..1d703133e 100644
--- a/web/src/admin/groups/GroupForm.ts
+++ b/web/src/admin/groups/GroupForm.ts
@@ -2,6 +2,7 @@ import "@goauthentik/admin/groups/MemberSelectModal";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
+import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/chips/Chip";
 import "@goauthentik/elements/chips/ChipGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@@ -153,7 +154,7 @@ export class GroupForm extends ModelForm<Group, string> {
                 name="attributes"
             >
                 <ak-codemirror
-                    mode="yaml"
+                    mode=${CodeMirrorMode.YAML}
                     value="${YAML.stringify(first(this.instance?.attributes, {}))}"
                 >
                 </ak-codemirror>
diff --git a/web/src/admin/outposts/OutpostForm.ts b/web/src/admin/outposts/OutpostForm.ts
index 70b6a3111..65fd60845 100644
--- a/web/src/admin/outposts/OutpostForm.ts
+++ b/web/src/admin/outposts/OutpostForm.ts
@@ -2,6 +2,7 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { docLink } from "@goauthentik/common/global";
 import { groupBy } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
+import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 import "@goauthentik/elements/forms/SearchSelect";
@@ -209,7 +210,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("Configuration")} name="config">
                 <ak-codemirror
-                    mode="yaml"
+                    mode=${CodeMirrorMode.YAML}
                     value="${YAML.stringify(
                         this.instance ? this.instance.config : this.defaultConfig?.config,
                     )}"
diff --git a/web/src/admin/outposts/ServiceConnectionKubernetesForm.ts b/web/src/admin/outposts/ServiceConnectionKubernetesForm.ts
index 4b4f88f00..f087998cc 100644
--- a/web/src/admin/outposts/ServiceConnectionKubernetesForm.ts
+++ b/web/src/admin/outposts/ServiceConnectionKubernetesForm.ts
@@ -1,6 +1,7 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
+import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 import YAML from "yaml";
@@ -75,7 +76,7 @@ export class ServiceConnectionKubernetesForm extends ModelForm<
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("Kubeconfig")} name="kubeconfig">
                 <ak-codemirror
-                    mode="yaml"
+                    mode=${CodeMirrorMode.YAML}
                     value="${YAML.stringify(first(this.instance?.kubeconfig, {}))}"
                 >
                 </ak-codemirror>
diff --git a/web/src/admin/policies/PolicyTestForm.ts b/web/src/admin/policies/PolicyTestForm.ts
index c32fe30d0..aa874f37e 100644
--- a/web/src/admin/policies/PolicyTestForm.ts
+++ b/web/src/admin/policies/PolicyTestForm.ts
@@ -1,6 +1,7 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
+import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import { PFColor } from "@goauthentik/elements/Label";
 import { Form } from "@goauthentik/elements/forms/Form";
 import "@goauthentik/elements/forms/HorizontalFormElement";
@@ -145,7 +146,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("Context")} name="context">
                 <ak-codemirror
-                    mode="yaml"
+                    mode=${CodeMirrorMode.YAML}
                     value=${YAML.stringify(first(this.request?.context, {}))}
                 >
                 </ak-codemirror>
diff --git a/web/src/admin/policies/expression/ExpressionPolicyForm.ts b/web/src/admin/policies/expression/ExpressionPolicyForm.ts
index 707dc9f1c..a00c6584d 100644
--- a/web/src/admin/policies/expression/ExpressionPolicyForm.ts
+++ b/web/src/admin/policies/expression/ExpressionPolicyForm.ts
@@ -2,6 +2,7 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { docLink } from "@goauthentik/common/global";
 import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
+import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@@ -85,7 +86,7 @@ export class ExpressionPolicyForm extends ModelForm<ExpressionPolicy, string> {
                         name="expression"
                     >
                         <ak-codemirror
-                            mode="python"
+                            mode=${CodeMirrorMode.Python}
                             value="${ifDefined(this.instance?.expression)}"
                         >
                         </ak-codemirror>
diff --git a/web/src/admin/property-mappings/PropertyMappingLDAPForm.ts b/web/src/admin/property-mappings/PropertyMappingLDAPForm.ts
index 5629f07d2..6919ab079 100644
--- a/web/src/admin/property-mappings/PropertyMappingLDAPForm.ts
+++ b/web/src/admin/property-mappings/PropertyMappingLDAPForm.ts
@@ -1,6 +1,7 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { docLink } from "@goauthentik/common/global";
 import "@goauthentik/elements/CodeMirror";
+import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 
@@ -69,7 +70,10 @@ export class PropertyMappingLDAPForm extends ModelForm<LDAPPropertyMapping, stri
                 ?required=${true}
                 name="expression"
             >
-                <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
+                <ak-codemirror
+                    mode=${CodeMirrorMode.Python}
+                    value="${ifDefined(this.instance?.expression)}"
+                >
                 </ak-codemirror>
                 <p class="pf-c-form__helper-text">
                     ${msg("Expression using Python.")}
diff --git a/web/src/admin/property-mappings/PropertyMappingNotification.ts b/web/src/admin/property-mappings/PropertyMappingNotification.ts
index 6b9692c4f..8ab561dec 100644
--- a/web/src/admin/property-mappings/PropertyMappingNotification.ts
+++ b/web/src/admin/property-mappings/PropertyMappingNotification.ts
@@ -1,6 +1,7 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { docLink } from "@goauthentik/common/global";
 import "@goauthentik/elements/CodeMirror";
+import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 
@@ -54,7 +55,10 @@ export class PropertyMappingNotification extends ModelForm<NotificationWebhookMa
                 ?required=${true}
                 name="expression"
             >
-                <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
+                <ak-codemirror
+                    mode=${CodeMirrorMode.Python}
+                    value="${ifDefined(this.instance?.expression)}"
+                >
                 </ak-codemirror>
                 <p class="pf-c-form__helper-text">
                     ${msg("Expression using Python.")}
diff --git a/web/src/admin/property-mappings/PropertyMappingSAMLForm.ts b/web/src/admin/property-mappings/PropertyMappingSAMLForm.ts
index b61bc168c..77836c505 100644
--- a/web/src/admin/property-mappings/PropertyMappingSAMLForm.ts
+++ b/web/src/admin/property-mappings/PropertyMappingSAMLForm.ts
@@ -1,6 +1,7 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { docLink } from "@goauthentik/common/global";
 import "@goauthentik/elements/CodeMirror";
+import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 
@@ -81,7 +82,10 @@ export class PropertyMappingSAMLForm extends ModelForm<SAMLPropertyMapping, stri
                 ?required=${true}
                 name="expression"
             >
-                <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
+                <ak-codemirror
+                    mode=${CodeMirrorMode.Python}
+                    value="${ifDefined(this.instance?.expression)}"
+                >
                 </ak-codemirror>
                 <p class="pf-c-form__helper-text">
                     ${msg("Expression using Python.")}
diff --git a/web/src/admin/property-mappings/PropertyMappingSCIMForm.ts b/web/src/admin/property-mappings/PropertyMappingSCIMForm.ts
index 24d567d11..19bd13aab 100644
--- a/web/src/admin/property-mappings/PropertyMappingSCIMForm.ts
+++ b/web/src/admin/property-mappings/PropertyMappingSCIMForm.ts
@@ -1,6 +1,7 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { docLink } from "@goauthentik/common/global";
 import "@goauthentik/elements/CodeMirror";
+import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 
@@ -54,7 +55,10 @@ export class PropertyMappingSCIMForm extends ModelForm<SCIMMapping, string> {
                 ?required=${true}
                 name="expression"
             >
-                <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
+                <ak-codemirror
+                    mode=${CodeMirrorMode.Python}
+                    value="${ifDefined(this.instance?.expression)}"
+                >
                 </ak-codemirror>
                 <p class="pf-c-form__helper-text">
                     ${msg("Expression using Python.")}
diff --git a/web/src/admin/property-mappings/PropertyMappingScopeForm.ts b/web/src/admin/property-mappings/PropertyMappingScopeForm.ts
index 9dc01c174..caf2dc11d 100644
--- a/web/src/admin/property-mappings/PropertyMappingScopeForm.ts
+++ b/web/src/admin/property-mappings/PropertyMappingScopeForm.ts
@@ -1,6 +1,7 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { docLink } from "@goauthentik/common/global";
 import "@goauthentik/elements/CodeMirror";
+import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 
@@ -81,7 +82,10 @@ export class PropertyMappingScopeForm extends ModelForm<ScopeMapping, string> {
                 ?required=${true}
                 name="expression"
             >
-                <ak-codemirror mode="python" value="${ifDefined(this.instance?.expression)}">
+                <ak-codemirror
+                    mode=${CodeMirrorMode.Python}
+                    value="${ifDefined(this.instance?.expression)}"
+                >
                 </ak-codemirror>
                 <p class="pf-c-form__helper-text">
                     ${msg("Expression using Python.")}
diff --git a/web/src/admin/property-mappings/PropertyMappingTestForm.ts b/web/src/admin/property-mappings/PropertyMappingTestForm.ts
index 00a288d15..e81af9a0c 100644
--- a/web/src/admin/property-mappings/PropertyMappingTestForm.ts
+++ b/web/src/admin/property-mappings/PropertyMappingTestForm.ts
@@ -1,6 +1,7 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
+import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import { Form } from "@goauthentik/elements/forms/Form";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import "@goauthentik/elements/forms/SearchSelect";
@@ -50,7 +51,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
         return html`<ak-form-element-horizontal label=${msg("Result")}>
             ${this.result?.successful
                 ? html`<ak-codemirror
-                      mode="javascript"
+                      mode=${CodeMirrorMode.JavaScript}
                       ?readOnly=${true}
                       value="${ifDefined(this.result?.result)}"
                   >
@@ -148,7 +149,7 @@ export class PolicyTestForm extends Form<PolicyTestRequest> {
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("Context")} name="context">
                 <ak-codemirror
-                    mode="yaml"
+                    mode=${CodeMirrorMode.YAML}
                     value=${YAML.stringify(first(this.request?.context, {}))}
                 >
                 </ak-codemirror>
diff --git a/web/src/admin/providers/saml/SAMLProviderViewPage.ts b/web/src/admin/providers/saml/SAMLProviderViewPage.ts
index 806a51b6b..de5e3505b 100644
--- a/web/src/admin/providers/saml/SAMLProviderViewPage.ts
+++ b/web/src/admin/providers/saml/SAMLProviderViewPage.ts
@@ -7,6 +7,7 @@ import { MessageLevel } from "@goauthentik/common/messages";
 import "@goauthentik/components/events/ObjectChangelog";
 import { AKElement } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/CodeMirror";
+import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/EmptyState";
 import "@goauthentik/elements/Tabs";
 import "@goauthentik/elements/buttons/ActionButton";
@@ -472,7 +473,7 @@ export class SAMLProviderViewPage extends AKElement {
                               </div>
                               <div class="pf-c-card__footer">
                                   <ak-codemirror
-                                      mode="xml"
+                                      mode=${CodeMirrorMode.XML}
                                       ?readOnly=${true}
                                       value="${ifDefined(this.metadata?.metadata)}"
                                   ></ak-codemirror>
diff --git a/web/src/admin/sources/oauth/OAuthSourceForm.ts b/web/src/admin/sources/oauth/OAuthSourceForm.ts
index 9fa70aef3..a5799eba1 100644
--- a/web/src/admin/sources/oauth/OAuthSourceForm.ts
+++ b/web/src/admin/sources/oauth/OAuthSourceForm.ts
@@ -5,6 +5,7 @@ import { DEFAULT_CONFIG, config } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
 import { rootInterface } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/CodeMirror";
+import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@@ -218,7 +219,7 @@ export class OAuthSourceForm extends ModelForm<OAuthSource, string> {
 
                           <ak-form-element-horizontal label=${msg("OIDC JWKS")} name="oidcJwks">
                               <ak-codemirror
-                                  mode="javascript"
+                                  mode=${CodeMirrorMode.JavaScript}
                                   value="${JSON.stringify(first(this.instance?.oidcJwks, {}))}"
                               >
                               </ak-codemirror>
diff --git a/web/src/admin/sources/saml/SAMLSourceViewPage.ts b/web/src/admin/sources/saml/SAMLSourceViewPage.ts
index 56a8750c9..61abaf594 100644
--- a/web/src/admin/sources/saml/SAMLSourceViewPage.ts
+++ b/web/src/admin/sources/saml/SAMLSourceViewPage.ts
@@ -6,6 +6,7 @@ import { EVENT_REFRESH } from "@goauthentik/common/constants";
 import "@goauthentik/components/events/ObjectChangelog";
 import { AKElement } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/CodeMirror";
+import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/Tabs";
 import "@goauthentik/elements/buttons/SpinnerButton";
 import "@goauthentik/elements/forms/ModalForm";
@@ -175,7 +176,7 @@ export class SAMLSourceViewPage extends AKElement {
                     <div class="pf-c-card pf-l-grid__item pf-m-12-col">
                         <div class="pf-c-card__body">
                             <ak-codemirror
-                                mode="xml"
+                                mode=${CodeMirrorMode.XML}
                                 ?readOnly=${true}
                                 value="${ifDefined(this.metadata?.metadata)}"
                             ></ak-codemirror>
diff --git a/web/src/admin/stages/invitation/InvitationForm.ts b/web/src/admin/stages/invitation/InvitationForm.ts
index aad301e07..4555a547e 100644
--- a/web/src/admin/stages/invitation/InvitationForm.ts
+++ b/web/src/admin/stages/invitation/InvitationForm.ts
@@ -2,6 +2,7 @@ import "@goauthentik/admin/common/ak-flow-search/ak-flow-search";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { dateTimeLocal, first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
+import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 import "@goauthentik/elements/forms/SearchSelect";
@@ -79,7 +80,7 @@ export class InvitationForm extends ModelForm<Invitation, string> {
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("Custom attributes")} name="fixedData">
                 <ak-codemirror
-                    mode="yaml"
+                    mode=${CodeMirrorMode.YAML}
                     value="${YAML.stringify(first(this.instance?.fixedData, {}))}"
                 >
                 </ak-codemirror>
diff --git a/web/src/admin/stages/prompt/PromptForm.ts b/web/src/admin/stages/prompt/PromptForm.ts
index 2ce0b77d8..f46a6be5a 100644
--- a/web/src/admin/stages/prompt/PromptForm.ts
+++ b/web/src/admin/stages/prompt/PromptForm.ts
@@ -1,6 +1,7 @@
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
+import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 import { StageHost } from "@goauthentik/flow/stages/base";
@@ -240,7 +241,9 @@ export class PromptForm extends ModelForm<Prompt, string> {
 
     renderForm(): TemplateResult {
         return html`<div class="pf-l-grid pf-m-gutter">
-            <div class="pf-l-grid__item pf-m-6-col">${this.renderEditForm()}</div>
+            <div class="pf-l-grid__item pf-m-6-col pf-c-form pf-m-horizontal">
+                ${this.renderEditForm()}
+            </div>
             <div class="pf-l-grid__item pf-m-6-col">${this.renderPreview()}</div>
         </div> `;
     }
@@ -386,7 +389,7 @@ export class PromptForm extends ModelForm<Prompt, string> {
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("Placeholder")} name="placeholder">
                 <ak-codemirror
-                    mode="python"
+                    mode=${CodeMirrorMode.Python}
                     value="${ifDefined(this.instance?.placeholder)}"
                     @change=${() => {
                         this._shouldRefresh = true;
@@ -425,19 +428,22 @@ export class PromptForm extends ModelForm<Prompt, string> {
                 </p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("Initial value")} name="initialValue">
-                <ak-codemirror mode="python" value="${ifDefined(this.instance?.initialValue)}">
+                <ak-codemirror
+                    mode=${CodeMirrorMode.Python}
+                    value="${ifDefined(this.instance?.initialValue)}"
+                >
                 </ak-codemirror>
                 <p class="pf-c-form__helper-text">
                     ${msg(
                         `Optionally pre-fill the input with an initial value.
             When creating a fixed choice field, enable interpreting as expression and
         return a list to return multiple default choices.`,
-                    )}}
+                    )}
                 </p>
             </ak-form-element-horizontal>
             <ak-form-element-horizontal label=${msg("Help text")} name="subText">
                 <ak-codemirror
-                    mode="htmlmixed"
+                    mode=${CodeMirrorMode.HTML}
                     value="${ifDefined(this.instance?.subText)}"
                     @change=${() => {
                         this._shouldRefresh = true;
diff --git a/web/src/admin/tenants/TenantForm.ts b/web/src/admin/tenants/TenantForm.ts
index 38614b5cb..59048d987 100644
--- a/web/src/admin/tenants/TenantForm.ts
+++ b/web/src/admin/tenants/TenantForm.ts
@@ -3,6 +3,7 @@ import "@goauthentik/admin/common/ak-flow-search/ak-flow-search";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
+import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/FormGroup";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@@ -267,7 +268,7 @@ export class TenantForm extends ModelForm<Tenant, string> {
                     </ak-form-element-horizontal>
                     <ak-form-element-horizontal label=${msg("Attributes")} name="attributes">
                         <ak-codemirror
-                            mode="yaml"
+                            mode=${CodeMirrorMode.YAML}
                             value="${YAML.stringify(first(this.instance?.attributes, {}))}"
                         >
                         </ak-codemirror>
diff --git a/web/src/admin/users/UserForm.ts b/web/src/admin/users/UserForm.ts
index bdd8ed662..a88c2f326 100644
--- a/web/src/admin/users/UserForm.ts
+++ b/web/src/admin/users/UserForm.ts
@@ -3,6 +3,7 @@ import { UserTypeEnum } from "@goauthentik/api/dist/models/UserTypeEnum";
 import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
 import { first } from "@goauthentik/common/utils";
 import "@goauthentik/elements/CodeMirror";
+import { CodeMirrorMode } from "@goauthentik/elements/CodeMirror";
 import "@goauthentik/elements/forms/HorizontalFormElement";
 import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
 import "@goauthentik/elements/forms/Radio";
@@ -159,7 +160,7 @@ export class UserForm extends ModelForm<User, number> {
                 name="attributes"
             >
                 <ak-codemirror
-                    mode="yaml"
+                    mode=${CodeMirrorMode.YAML}
                     value="${YAML.stringify(
                         first(this.instance?.attributes, UserForm.defaultUserAttributes),
                     )}"
diff --git a/web/src/assets/images/flow_background.jpg b/web/src/assets/images/flow_background.jpg
index 32b1ad517..7035dab16 100644
Binary files a/web/src/assets/images/flow_background.jpg and b/web/src/assets/images/flow_background.jpg differ
diff --git a/web/src/elements/CodeMirror.ts b/web/src/elements/CodeMirror.ts
index d4f0657fa..890275dc8 100644
--- a/web/src/elements/CodeMirror.ts
+++ b/web/src/elements/CodeMirror.ts
@@ -18,17 +18,26 @@ import { EVENT_THEME_CHANGE } from "@goauthentik/common/constants";
 import { AKElement } from "@goauthentik/elements/Base";
 import YAML from "yaml";
 
+import { CSSResult, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import { UiThemeEnum } from "@goauthentik/api";
 
+export enum CodeMirrorMode {
+    XML = "xml",
+    JavaScript = "javascript",
+    HTML = "html",
+    Python = "python",
+    YAML = "yaml",
+}
+
 @customElement("ak-codemirror")
 export class CodeMirrorTextarea<T> extends AKElement {
     @property({ type: Boolean })
     readOnly = false;
 
     @property()
-    mode = "yaml";
+    mode: CodeMirrorMode = CodeMirrorMode.YAML;
 
     @property()
     name?: string;
@@ -45,6 +54,24 @@ export class CodeMirrorTextarea<T> extends AKElement {
     themeLight: Extension;
     themeDark: Extension;
 
+    static get styles(): CSSResult[] {
+        return [
+            // Better alignment with patternfly components
+            css`
+                .cm-editor {
+                    padding-top: calc(
+                        var(--pf-global--spacer--form-element) - var(--pf-global--BorderWidth--sm)
+                    );
+                    padding-bottom: calc(
+                        var(--pf-global--spacer--form-element) - var(--pf-global--BorderWidth--sm)
+                    );
+                    padding-right: var(--pf-c-form-control--inset--base);
+                    padding-left: var(--pf-c-form-control--inset--base);
+                }
+            `,
+        ];
+    }
+
     @property()
     // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/explicit-module-boundary-types
     set value(v: T | string) {
@@ -79,10 +106,10 @@ export class CodeMirrorTextarea<T> extends AKElement {
             return this.getInnerValue();
         }
         try {
-            switch (this.mode.toLowerCase()) {
-                case "yaml":
+            switch (this.mode) {
+                case CodeMirrorMode.YAML:
                     return YAML.parse(this.getInnerValue());
-                case "javascript":
+                case CodeMirrorMode.JavaScript:
                     return JSON.parse(this.getInnerValue());
                 default:
                     return this.getInnerValue();
@@ -115,15 +142,15 @@ export class CodeMirrorTextarea<T> extends AKElement {
 
     getLanguageExtension(): LanguageSupport | undefined {
         switch (this.mode.toLowerCase()) {
-            case "xml":
+            case CodeMirrorMode.XML:
                 return xml();
-            case "javascript":
+            case CodeMirrorMode.JavaScript:
                 return javascript();
-            case "html":
+            case CodeMirrorMode.HTML:
                 return htmlLang();
-            case "python":
+            case CodeMirrorMode.Python:
                 return python();
-            case "yaml":
+            case CodeMirrorMode.YAML:
                 return new LanguageSupport(StreamLanguage.define(yamlMode.yaml));
         }
         return undefined;
diff --git a/web/src/flow/FlowExecutor.ts b/web/src/flow/FlowExecutor.ts
index cbe08a77a..29a90b428 100644
--- a/web/src/flow/FlowExecutor.ts
+++ b/web/src/flow/FlowExecutor.ts
@@ -527,7 +527,7 @@ export class FlowExecutor extends Interface implements StageHost {
                                                     ? html`
                                                           <li>
                                                               <a
-                                                                  href="https://unsplash.com/@sgabriel"
+                                                                  href="https://unsplash.com/@marcute"
                                                                   >${msg("Background image")}</a
                                                               >
                                                           </li>