# Customizing Self-Service Account Management

How to customize both the data collected and the look and feel of Self Service Account Management.

> For the index of this section of the site, see [llms.txt](https://fusionauth.io/docs/llms.txt)

> **PLAN:** This feature requires [at least a Starter plan](https://fusionauth.io/docs/concepts/plans-and-limits/plans-features.md#starter-features).

Available since `1.26.0`

FusionAuth ships with a default template for each Account Management page. However, you are not limited to the default form fields or to the default theme for that matter. You might want to customize the form fields managed by the end user to allow them to be able to update their favorite color or other attributes on the profile screen. You may want to customize the look and feel of the account management screen so it looks like the rest of your application.

Below we will walk you through updating account management forms and theme templates.

## Add a Form Field (Admin Facing)

Note

Forms allow you to collect any data you want. More information can be found in our [Advanced Registration Forms](https://fusionauth.io/docs/users/register/advanced-registration-forms.md) page.

Below we are going to extend the usefulness of our account management page by adding a birthday field to the User Self Service Form .

To change a form:

1.  Navigate to Forms
2.  Click the edit button on Default User Self Service provided by FusionAuth .

![The Forms list with the Default User Self Service form highlighted.](https://fusionauth.io/img/docs/screenshots/account-forms-list.png)

### Edit Form (Admin Facing)

In this example, we are going to add a **birthDate** field on our account management self service form.

Note

Even though we are adding `birthDate` below, FusionAuth forms allow custom form fields as needed. You could for instance, do a `user.data.favColor` if needed.

![The Default User Self Service form editor.](https://fusionauth.io/img/docs/screenshots/account-form-edit.png)

Remember, you can move each field around with up and down arrows

### Adding a birthDate (Admin Facing)

To add a `birthDate`, click Add field

![The Add Field dialog with Birthdate selected.](https://fusionauth.io/img/docs/screenshots/account-form-add-field.png)

Select `Birthdate` and click submit. Now we have a custom form available on our self-service account management page. Please note we are using a built-in field, but FusionAuth lets you define any number of custom fields. More information can be found in our [Advanced Registration Forms](https://fusionauth.io/docs/users/register/advanced-registration-forms.md) page.

## See It in Action - Forms (User Facing)

Take the following steps to see the changes:

*   Navigate to your account management page.
*   Login as a user of this application.
*   Click on the edit icon in the top right.

![The account edit form with the Birthdate field added.](https://fusionauth.io/img/docs/screenshots/account-edit-birthdate.png)

trophy Success! Now we have an editable **birthDate** field.

This is a simple example, but with FusionAuth forms, you can extend this account management form to meet most business requirements.

With FusionAuth forms you can achieve more complex workflows such as:

*   Creating multi-step registration forms (for instance) by adding `sections`.
*   Specifying if a field is required or optional.
*   Making certain forms editable by an admin user, but not by a 'regular' user.

Below, we will show you how to make this editable **birthDate** field show up on the account management home screen.

## Update Your Theme and Template (Admin Facing)

Note

For more information on themes please reference the documentation found [here](https://fusionauth.io/docs/theme.md). For more information on custom forms please reference documentation found [here](https://fusionauth.io/feature/user-registration.md)

What if we want to update the template (and text contained within) of our account page? Adjusting this is simple:

1.  Make a copy of the default theme by navigating to Themes -> Duplicate . You can also start from scratch if you'd like.
2.  Click on the edit button of the new theme.

With self service account management, there are several templates that are used:

*   Account edit
*   Account index
*   Account two-factor disable
*   Account two-factor enable
*   Account two-factor index
*   Account add WebAuthn passkey (available in version 1.41.0 and later)
*   Account delete WebAuthn passkey (available in version 1.41.0 and later)
*   Account WebAuthn index (available in version 1.41.0 and later)

![The theme editor with the account management templates highlighted.](https://fusionauth.io/img/docs/screenshots/account-theme-templates.png)

## Update the Account Two-Factor Index Template (Admin Facing)

Let's update the Account Management index page with a **birthDate** field.

Click on the Account index FreeMarker template. For this example, I have added simple text to the template. Obviously in a real-world scenario your changes may be more complex.

Changes include

```ftl
<p>This is now modified with a birthdate field</p>
<dl class="horizontal">
<dt>${theme.message("user.birthDate")}</dt>
<dd>${helpers.display(user, "birthDate")}</dd>
</dl>
```

You can only use the `helpers.display` function to display top level user attributes such as `birthDate`. If you are trying to display user attributes stored in the **user.data** field, use Freemarker to display the field, like so: `${user.data.favColor}`. You can use [Freemarker built-in functions](https://freemarker.apache.org/docs/ref_builtins.html) to handle defaults or format the data.

## See It in Action - Account Home (User Facing)

![The account page showing the customized Birthdate field.](https://fusionauth.io/img/docs/screenshots/account-home-birthdate.png)

trophy Success! We now have an updated `self service account management index` page.

Related

[APIs Advanced Themes APIs Learn about the APIs for creating, retrieving, updating, and deleting hosted login page themes. theme customization](https://fusionauth.io/docs/apis/themes/advanced-themes.md)

[APIs Simple Themes Learn about the APIs for creating, retrieving, updating, and deleting simple themes for hosted login pages. theme customization](https://fusionauth.io/docs/apis/themes/simple-themes.md)

[Theme Advanced Themes Learn how to theme and the FusionAuth login pages (including forgot password, two-factor authentication and others). theme customization](https://fusionauth.io/docs/theme/advanced-themes.md)

[Theme Tailwind CSS Detailed documentation for integrating Tailwind CSS in FusionAuth. theme customization](https://fusionauth.io/docs/theme/advanced-themes/tailwind.md)
---

## Other pages in Account Management

> For the full index of this section, see [Users](https://fusionauth.io/docs/llms-users.txt).

- [Add WebAuthn Passkey](https://fusionauth.io/docs/users/account-management/add-webauthn.md): Learn how to add a WebAuthn passkey.
- [Bootstrapping Login For Self-Service Account Management](https://fusionauth.io/docs/users/account-management/bootstrapping-login.md): How to allow users to access self-service account management from external applications.
- [Self-Service Account Management](https://fusionauth.io/docs/users/account-management.md): Setting up multi-factor authentication as an admin and user, as well as configuring the self-service account management pages.
- [Account Troubleshooting](https://fusionauth.io/docs/users/account-management/troubleshooting.md): Learn about troubleshooting steps for Self Service Account Registration.
- [Add Authenticator as a second factor](https://fusionauth.io/docs/users/account-management/two-factor-authenticator.md): How to add a second factor using an Authenticator/TOTP application as a user and admin.
- [Add Email as a second factor](https://fusionauth.io/docs/users/account-management/two-factor-email.md): Learn how to add a second factor using Email as both an admin and a user.
- [Add Phone as a second factor](https://fusionauth.io/docs/users/account-management/two-factor-phone.md): Learn how to add a second factor using SMS as both an admin and a user.
- [Update User Profiles and Passwords](https://fusionauth.io/docs/users/account-management/updating-user-data.md): How to update user profile data and change user passwords.
