diff --git a/web/src/locales/en.po b/web/src/locales/en.po
index 91b3a8244..431d88a73 100644
--- a/web/src/locales/en.po
+++ b/web/src/locales/en.po
@@ -984,13 +984,13 @@ msgstr "Either no applications are defined, or you don't have access to any."
 
 #: src/pages/events/TransportForm.ts:46
 #: src/pages/stages/identification/IdentificationStageForm.ts:79
+#: src/pages/user-settings/UserDetailsPage.ts:71
 #: src/pages/users/UserForm.ts:61
 #: src/pages/users/UserViewPage.ts:100
 msgid "Email"
 msgstr "Email"
 
 #: src/pages/sources/saml/SAMLSourceForm.ts:155
-#: src/pages/user-settings/UserDetailsPage.ts:73
 msgid "Email address"
 msgstr "Email address"
 
@@ -1583,7 +1583,7 @@ msgstr "Library"
 #: src/flows/stages/password/PasswordStage.ts:31
 #: src/flows/stages/prompt/PromptStage.ts:108
 #: src/pages/applications/ApplicationViewPage.ts:55
-#: src/pages/user-settings/UserDetailsPage.ts:37
+#: src/pages/user-settings/UserDetailsPage.ts:38
 #: src/utils.ts:40
 msgid "Loading"
 msgstr "Loading"
@@ -1799,7 +1799,7 @@ msgstr "Monitor"
 #: src/pages/stages/user_login/UserLoginStageForm.ts:52
 #: src/pages/stages/user_logout/UserLogoutStageForm.ts:51
 #: src/pages/stages/user_write/UserWriteStageForm.ts:51
-#: src/pages/user-settings/UserDetailsPage.ts:65
+#: src/pages/user-settings/UserDetailsPage.ts:64
 #: src/pages/users/UserForm.ts:54
 #: src/pages/users/UserListPage.ts:49
 #: src/pages/users/UserViewPage.ts:92
@@ -2934,7 +2934,7 @@ msgstr "Successfully updated binding."
 msgid "Successfully updated certificate-key pair."
 msgstr "Successfully updated certificate-key pair."
 
-#: src/pages/user-settings/UserDetailsPage.ts:46
+#: src/pages/user-settings/UserDetailsPage.ts:47
 msgid "Successfully updated details."
 msgstr "Successfully updated details."
 
@@ -3377,7 +3377,7 @@ msgstr "Update Token"
 msgid "Update User"
 msgstr "Update User"
 
-#: src/pages/user-settings/UserDetailsPage.ts:42
+#: src/pages/user-settings/UserDetailsPage.ts:43
 msgid "Update details"
 msgstr "Update details"
 
@@ -3478,7 +3478,7 @@ msgid "Userinfo URL"
 msgstr "Userinfo URL"
 
 #: src/pages/stages/identification/IdentificationStageForm.ts:76
-#: src/pages/user-settings/UserDetailsPage.ts:58
+#: src/pages/user-settings/UserDetailsPage.ts:57
 #: src/pages/users/UserForm.ts:47
 #: src/pages/users/UserViewPage.ts:84
 msgid "Username"
@@ -3746,7 +3746,7 @@ msgstr "mode"
 msgid "name"
 msgstr "name"
 
-#: src/elements/Tabs.ts:59
+#: src/elements/Tabs.ts:62
 msgid "no tabs defined"
 msgstr "no tabs defined"
 
diff --git a/web/src/locales/pseudo-LOCALE.po b/web/src/locales/pseudo-LOCALE.po
index cbaf93461..aaf4b1d9d 100644
--- a/web/src/locales/pseudo-LOCALE.po
+++ b/web/src/locales/pseudo-LOCALE.po
@@ -980,13 +980,13 @@ msgstr ""
 
 #: src/pages/events/TransportForm.ts:46
 #: src/pages/stages/identification/IdentificationStageForm.ts:79
+#: src/pages/user-settings/UserDetailsPage.ts:71
 #: src/pages/users/UserForm.ts:61
 #: src/pages/users/UserViewPage.ts:100
 msgid "Email"
 msgstr ""
 
 #: src/pages/sources/saml/SAMLSourceForm.ts:155
-#: src/pages/user-settings/UserDetailsPage.ts:73
 msgid "Email address"
 msgstr ""
 
@@ -1579,7 +1579,7 @@ msgstr ""
 #: src/flows/stages/password/PasswordStage.ts:31
 #: src/flows/stages/prompt/PromptStage.ts:108
 #: src/pages/applications/ApplicationViewPage.ts:55
-#: src/pages/user-settings/UserDetailsPage.ts:37
+#: src/pages/user-settings/UserDetailsPage.ts:38
 #: src/utils.ts:40
 msgid "Loading"
 msgstr ""
@@ -1795,7 +1795,7 @@ msgstr ""
 #: src/pages/stages/user_login/UserLoginStageForm.ts:52
 #: src/pages/stages/user_logout/UserLogoutStageForm.ts:51
 #: src/pages/stages/user_write/UserWriteStageForm.ts:51
-#: src/pages/user-settings/UserDetailsPage.ts:65
+#: src/pages/user-settings/UserDetailsPage.ts:64
 #: src/pages/users/UserForm.ts:54
 #: src/pages/users/UserListPage.ts:49
 #: src/pages/users/UserViewPage.ts:92
@@ -2930,7 +2930,7 @@ msgstr ""
 msgid "Successfully updated certificate-key pair."
 msgstr ""
 
-#: src/pages/user-settings/UserDetailsPage.ts:46
+#: src/pages/user-settings/UserDetailsPage.ts:47
 msgid "Successfully updated details."
 msgstr ""
 
@@ -3373,7 +3373,7 @@ msgstr ""
 msgid "Update User"
 msgstr ""
 
-#: src/pages/user-settings/UserDetailsPage.ts:42
+#: src/pages/user-settings/UserDetailsPage.ts:43
 msgid "Update details"
 msgstr ""
 
@@ -3474,7 +3474,7 @@ msgid "Userinfo URL"
 msgstr ""
 
 #: src/pages/stages/identification/IdentificationStageForm.ts:76
-#: src/pages/user-settings/UserDetailsPage.ts:58
+#: src/pages/user-settings/UserDetailsPage.ts:57
 #: src/pages/users/UserForm.ts:47
 #: src/pages/users/UserViewPage.ts:84
 msgid "Username"
@@ -3742,7 +3742,7 @@ msgstr ""
 msgid "name"
 msgstr ""
 
-#: src/elements/Tabs.ts:59
+#: src/elements/Tabs.ts:62
 msgid "no tabs defined"
 msgstr ""
 
diff --git a/web/src/pages/user-settings/UserDetailsPage.ts b/web/src/pages/user-settings/UserDetailsPage.ts
index 6550eb71c..b66ef926e 100644
--- a/web/src/pages/user-settings/UserDetailsPage.ts
+++ b/web/src/pages/user-settings/UserDetailsPage.ts
@@ -8,13 +8,13 @@ import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import { CoreApi, User } from "authentik-api";
 import { me } from "../../api/Users";
+import { FlowURLManager } from "../../api/legacy";
+import { ifDefined } from "lit-html/directives/if-defined";
+import { DEFAULT_CONFIG } from "../../api/Config";
 import "../../elements/forms/FormElement";
 import "../../elements/EmptyState";
-import { FlowURLManager } from "../../api/legacy";
-import "@polymer/paper-input/paper-input";
-import "@polymer/iron-form/iron-form";
-import { DEFAULT_CONFIG } from "../../api/Config";
 import "../../elements/forms/Form";
+import "../../elements/forms/HorizontalFormElement";
 
 @customElement("ak-user-details")
 export class UserDetailsPage extends LitElement {
@@ -53,27 +53,26 @@ export class UserDetailsPage extends LitElement {
                         });
                     }}>
                     <form class="pf-c-form pf-m-horizontal">
-                        <paper-input
-                            name="username"
-                            ?alwaysFloatLabel=${true}
-                            label="${t`Username`}"
-                            value=${this.user.username}>
-                        </paper-input>
-                        <p class="pf-c-form__helper-text">${t`Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.`}</p>
-                        <paper-input
-                            name="name"
-                            ?alwaysFloatLabel=${true}
-                            label="${t`Name`}"
-                            value=${this.user.name}>
-                        </paper-input>
-                        <p class="pf-c-form__helper-text">${t`User's display name.`}</p>
-                        <paper-input
-                            name="email"
-                            ?alwaysFloatLabel=${true}
-                            type="email"
-                            label="${t`Email address`}"
-                            value=${this.user.email || ""}>
-                        </paper-input>
+                        <ak-form-element-horizontal
+                            label=${t`Username`}
+                            ?required=${true}
+                            name="username">
+                            <input type="text" value="${ifDefined(this.user?.username)}" class="pf-c-form-control" required>
+                            <p class="pf-c-form__helper-text">${t`Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.`}</p>
+                        </ak-form-element-horizontal>
+                        <ak-form-element-horizontal
+                            label=${t`Name`}
+                            ?required=${true}
+                            name="name">
+                            <input type="text" value="${ifDefined(this.user?.name)}" class="pf-c-form-control" required>
+                            <p class="pf-c-form__helper-text">${t`User's display name.`}</p>
+                        </ak-form-element-horizontal>
+                        <ak-form-element-horizontal
+                            label=${t`Email`}
+                            ?required=${true}
+                            name="email">
+                            <input type="email" value="${ifDefined(this.user?.email)}" class="pf-c-form-control" required>
+                        </ak-form-element-horizontal>
 
                         <div class="pf-c-form__group pf-m-action">
                             <div class="pf-c-form__horizontal-group">