diff --git a/web/src/elements/password-match-indicator/password-match-indicator.stories.ts b/web/src/elements/password-match-indicator/password-match-indicator.stories.ts
index eb6e85ea8..7d6c8a000 100644
--- a/web/src/elements/password-match-indicator/password-match-indicator.stories.ts
+++ b/web/src/elements/password-match-indicator/password-match-indicator.stories.ts
@@ -9,6 +9,11 @@ export default {
 export const Primary = () =>
     html`<div style="background: #fff; padding: 4em">
         <p>Type some text: <input id="primary-example" style="color:#000" /></p>
-        <p>Type some other text: <input id="primary-example_repeat" style="color:#000" /></p>
-        <ak-password-match-indicator src="#primary-example_repeat"></ak-password-match-indicator>
+        <p style="margin-top:0.5em">
+            Type some other text: <input id="primary-example_repeat" style="color:#000" />
+            <ak-password-match-indicator
+                first="#primary-example"
+                second="#primary-example_repeat"
+            ></ak-password-match-indicator>
+        </p>
     </div>`;
diff --git a/web/src/elements/password-match-indicator/password-match-indicator.ts b/web/src/elements/password-match-indicator/password-match-indicator.ts
index 745926faa..269c2a310 100644
--- a/web/src/elements/password-match-indicator/password-match-indicator.ts
+++ b/web/src/elements/password-match-indicator/password-match-indicator.ts
@@ -31,10 +31,14 @@ export class PasswordMatchIndicator extends AKElement {
      * throw an exception.
      */
     @property({ attribute: true })
-    src = "";
+    first = "";
 
-    sourceInput?: HTMLInputElement;
-    otherInput?: HTMLInputElement;
+    @property({ attribute: true })
+    second = "";
+
+    firstElement?: HTMLInputElement;
+
+    secondElement?: HTMLInputElement;
 
     @state()
     match = false;
@@ -46,38 +50,38 @@ export class PasswordMatchIndicator extends AKElement {
 
     connectedCallback() {
         super.connectedCallback();
-        this.input.addEventListener("keyup", this.checkPasswordMatch);
-        this.other.addEventListener("keyup", this.checkPasswordMatch);
+        this.firstInput.addEventListener("keyup", this.checkPasswordMatch);
+        this.secondInput.addEventListener("keyup", this.checkPasswordMatch);
     }
 
     disconnectedCallback() {
-        this.other.removeEventListener("keyup", this.checkPasswordMatch);
-        this.input.removeEventListener("keyup", this.checkPasswordMatch);
+        this.secondInput.removeEventListener("keyup", this.checkPasswordMatch);
+        this.firstInput.removeEventListener("keyup", this.checkPasswordMatch);
         super.disconnectedCallback();
     }
 
     checkPasswordMatch() {
         this.match =
-            this.input.value.length > 0 &&
-            this.other.value.length > 0 &&
-            this.input.value === this.other.value;
+            this.firstInput.value.length > 0 &&
+            this.secondInput.value.length > 0 &&
+            this.firstInput.value === this.secondInput.value;
     }
 
-    get input() {
-        if (this.sourceInput) {
-            return this.sourceInput;
+    get firstInput() {
+        if (this.firstElement) {
+            return this.firstElement;
         }
-        return (this.sourceInput = findInput(this.getRootNode() as Element, ELEMENT, this.src));
+        return (this.firstElement = findInput(this.getRootNode() as Element, ELEMENT, this.first));
     }
 
-    get other() {
-        if (this.otherInput) {
-            return this.otherInput;
+    get secondInput() {
+        if (this.secondElement) {
+            return this.secondElement;
         }
-        return (this.otherInput = findInput(
+        return (this.secondElement = findInput(
             this.getRootNode() as Element,
             ELEMENT,
-            this.src.replace(/_repeat/, ""),
+            this.second,
         ));
     }
 
diff --git a/web/src/flow/stages/prompt/FieldRenderers.ts b/web/src/flow/stages/prompt/FieldRenderers.ts
index 2442d8f27..535605195 100644
--- a/web/src/flow/stages/prompt/FieldRenderers.ts
+++ b/web/src/flow/stages/prompt/FieldRenderers.ts
@@ -1,11 +1,13 @@
-import { rootInterface } from "@goauthentik/elements/Base";
 import { LOCALES } from "@goauthentik/common/ui/locale";
+import { rootInterface } from "@goauthentik/elements/Base";
 import "@goauthentik/elements/password-match-indicator";
 import "@goauthentik/elements/password-strength-indicator";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import { TemplateResult, html } from "lit";
+
 import { msg } from "@lit/localize";
-import { StagePrompt, CapabilitiesEnum, PromptTypeEnum } from "@goauthentik/api";
+import { TemplateResult, html } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+
+import { CapabilitiesEnum, PromptTypeEnum, StagePrompt } from "@goauthentik/api";
 
 export function password(prompt: StagePrompt) {
     return html`<input
@@ -20,7 +22,12 @@ export function password(prompt: StagePrompt) {
         ></ak-password-strength-indicator>`;
 }
 
+const REPEAT = /_repeat/;
+
 export function repeatPassword(prompt: StagePrompt) {
+    const first = `input[name="${prompt.fieldKey}"]`;
+    const second = `input[name="${prompt.fieldKey.replace(REPEAT, "")}"]`;
+
     return html` <div style="display:flex; flex-direction:row; gap: 0.5em; align-content: center">
         <input
             style="flex:1 0"
@@ -31,13 +38,14 @@ export function repeatPassword(prompt: StagePrompt) {
             class="pf-c-form-control"
             ?required=${prompt.required}
         /><ak-password-match-indicator
-            src='input[name="${prompt.fieldKey}"]'
+            first="${first}"
+            second="${second}"
         ></ak-password-match-indicator>
     </div>`;
 }
 
 export function renderPassword(prompt: StagePrompt) {
-    return /_repeat$/.test(prompt.fieldKey) ? repeatPassword(prompt) : password(prompt);
+    return REPEAT.test(prompt.fieldKey) ? repeatPassword(prompt) : password(prompt);
 }
 
 export function renderText(prompt: StagePrompt) {
@@ -209,7 +217,7 @@ export function renderAkLocale(prompt: StagePrompt) {
             ?selected=${locale.code === prompt.initialValue}
         >
             ${locale.code.toUpperCase()} - ${locale.label()}
-        </option> `
+        </option> `,
     );
 
     return html`<select class="pf-c-form-control" name="${prompt.fieldKey}">