diff --git a/authentik/providers/oauth2/forms.py b/authentik/providers/oauth2/forms.py
index 92a1dd067..29f6c2473 100644
--- a/authentik/providers/oauth2/forms.py
+++ b/authentik/providers/oauth2/forms.py
@@ -4,8 +4,6 @@ from django import forms
 from django.core.exceptions import ValidationError
 from django.utils.translation import gettext as _
 
-from authentik.admin.fields import CodeMirrorWidget
-from authentik.core.expression import PropertyMappingEvaluator
 from authentik.crypto.models import CertificateKeyPair
 from authentik.flows.models import Flow, FlowDesignation
 from authentik.providers.oauth2.generators import (
@@ -75,27 +73,3 @@ class OAuth2ProviderForm(forms.ModelForm):
                 )
             )
         }
-
-
-class ScopeMappingForm(forms.ModelForm):
-    """Form to edit ScopeMappings"""
-
-    template_name = "providers/oauth2/property_mapping_form.html"
-
-    def clean_expression(self):
-        """Test Syntax"""
-        expression = self.cleaned_data.get("expression")
-        evaluator = PropertyMappingEvaluator()
-        evaluator.validate(expression)
-        return expression
-
-    class Meta:
-
-        model = ScopeMapping
-        fields = ["name", "scope_name", "description", "expression"]
-        widgets = {
-            "name": forms.TextInput(),
-            "scope_name": forms.TextInput(),
-            "description": forms.TextInput(),
-            "expression": CodeMirrorWidget(mode="python"),
-        }
diff --git a/authentik/sources/ldap/forms.py b/authentik/sources/ldap/forms.py
index ae2088421..37c812730 100644
--- a/authentik/sources/ldap/forms.py
+++ b/authentik/sources/ldap/forms.py
@@ -3,8 +3,6 @@
 from django import forms
 from django.utils.translation import gettext_lazy as _
 
-from authentik.admin.fields import CodeMirrorWidget
-from authentik.core.expression import PropertyMappingEvaluator
 from authentik.sources.ldap.models import LDAPPropertyMapping, LDAPSource
 
 
@@ -60,30 +58,3 @@ class LDAPSourceForm(forms.ModelForm):
             "group_membership_field": forms.TextInput(),
             "object_uniqueness_field": forms.TextInput(),
         }
-
-
-class LDAPPropertyMappingForm(forms.ModelForm):
-    """LDAP Property Mapping form"""
-
-    template_name = "ldap/property_mapping_form.html"
-
-    def clean_expression(self):
-        """Test Syntax"""
-        expression = self.cleaned_data.get("expression")
-        evaluator = PropertyMappingEvaluator()
-        evaluator.validate(expression)
-        return expression
-
-    class Meta:
-
-        model = LDAPPropertyMapping
-        fields = ["name", "object_field", "expression"]
-        widgets = {
-            "name": forms.TextInput(),
-            "ldap_property": forms.TextInput(),
-            "object_field": forms.TextInput(),
-            "expression": CodeMirrorWidget(mode="python"),
-        }
-        help_texts = {
-            "object_field": _("Field of the user object this value is written to.")
-        }
diff --git a/authentik/sources/ldap/models.py b/authentik/sources/ldap/models.py
index 9d74eb73d..bdf163bf9 100644
--- a/authentik/sources/ldap/models.py
+++ b/authentik/sources/ldap/models.py
@@ -119,10 +119,8 @@ class LDAPPropertyMapping(PropertyMapping):
     object_field = models.TextField()
 
     @property
-    def form(self) -> Type[ModelForm]:
-        from authentik.sources.ldap.forms import LDAPPropertyMappingForm
-
-        return LDAPPropertyMappingForm
+    def component(self) -> str:
+        return "ak-property-mapping-ldap-form"
 
     @property
     def serializer(self) -> Type[Serializer]:
diff --git a/authentik/sources/ldap/templates/ldap/property_mapping_form.html b/authentik/sources/ldap/templates/ldap/property_mapping_form.html
deleted file mode 100644
index 030095abe..000000000
--- a/authentik/sources/ldap/templates/ldap/property_mapping_form.html
+++ /dev/null
@@ -1,14 +0,0 @@
-{% extends "generic/form.html" %}
-
-{% load i18n %}
-
-{% block beneath_form %}
-<div class="pf-c-form__group ">
-    <label for="" class="pf-c-form__label"></label>
-    <div class="c-form__horizontal-group">
-        <p>
-            Expression using Python. See <a href="https://goauthentik.io/docs/property-mappings/expression/">here</a> for a list of all variables.
-        </p>
-    </div>
-</div>
-{% endblock %}
diff --git a/web/src/pages/property-mappings/PropertyMappingLDAPForm.ts b/web/src/pages/property-mappings/PropertyMappingLDAPForm.ts
new file mode 100644
index 000000000..c6d34855a
--- /dev/null
+++ b/web/src/pages/property-mappings/PropertyMappingLDAPForm.ts
@@ -0,0 +1,72 @@
+import { LDAPPropertyMapping, PropertymappingsApi } from "authentik-api";
+import { gettext } from "django";
+import { customElement, property } from "lit-element";
+import { html, TemplateResult } from "lit-html";
+import { DEFAULT_CONFIG } from "../../api/Config";
+import { Form } from "../../elements/forms/Form";
+import { ifDefined } from "lit-html/directives/if-defined";
+import "../../elements/forms/HorizontalFormElement";
+
+@customElement("ak-property-mapping-ldap-form")
+export class PropertyMappingLDAPForm extends Form<LDAPPropertyMapping> {
+
+    set mappingUUID(value: string) {
+        new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsLdapRead({
+            pmUuid: value,
+        }).then(mapping => {
+            this.mapping = mapping;
+        });
+    }
+
+    @property({attribute: false})
+    mapping?: LDAPPropertyMapping;
+
+    getSuccessMessage(): string {
+        if (this.mapping) {
+            return gettext("Successfully updated mapping.");
+        } else {
+            return gettext("Successfully created mapping.");
+        }
+    }
+
+    send = (data: LDAPPropertyMapping): Promise<LDAPPropertyMapping> => {
+        if (this.mapping) {
+            return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsLdapUpdate({
+                pmUuid: this.mapping.pk || "",
+                data: data
+            });
+        } else {
+            return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsLdapCreate({
+                data: data
+            });
+        }
+    };
+
+    renderForm(): TemplateResult {
+        return html`<form class="pf-c-form pf-m-horizontal">
+            <ak-form-element-horizontal
+                label=${gettext("Name")}
+                ?required=${true}
+                name="name">
+                <input type="text" value="${ifDefined(this.mapping?.name)}" class="pf-c-form-control" required>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${gettext("Object field")}
+                ?required=${true}
+                name="objectField">
+                <input type="text" value="${ifDefined(this.mapping?.objectField)}" class="pf-c-form-control" required>
+                <p class="pf-c-form__helper-text">${gettext("Field of the user object this value is written to.")}</p>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${gettext("Expression")}
+                name="expression">
+                <ak-codemirror mode="python" value="${this.mapping?.expression}">
+                </ak-codemirror>
+                <p class="pf-c-form__helper-text">
+                    Expression using Python. See <a href="https://goauthentik.io/docs/property-mappings/expression/">here</a> for a list of all variables.
+                </p>
+            </ak-form-element-horizontal>
+        </form>`;
+    }
+
+}