> For AI agents: [llms.txt](https://docs.trustedauth.com/llms.txt) provides a Markdown index of this documentation.

# Customize the login page layout

Layout controls let you tailor the visual structure of the login experience, including card style, announcement placement, and sign-in flow order, without changing your brand assets. Use these settings to match your design system, highlight important notices, and streamline the authentication flow for your users.

## Before you begin

Before you begin, you need the following:

- A **Site Administrator** role with permission to modify customization settings.
- Your brand assets. See [Brand your login pages](/docs/customization/brand-your-login-pages.md).

## Configure the login card appearance

Control the visual style of the login card that contains the sign-in form.

1. Click Menu icon **> Customization > Theme**. The **Theme** page appears.
2. Select the **Custom Theme** tab.
3. Expand the **Login Layout and Flow** section.
4. Configure the card style:
   - **Card Top Border**: Set to **Show** to display a colored accent border at the top of the card, or **Hide** to remove it.
   - **Card Corner Style**: Choose **Default**, **Rounded**, or **Soft** to control how rounded the card corners appear.
5. Configure the card heading:
   - **Card Heading Visible**: Set to **Show** to display a heading inside the login card.
   - **Card Heading Alignment**: Choose **Center** or **Left**.

tip

When you enable the card heading, you can customize the heading text on the [Custom Messages](/docs/customization/customize-login-messages.md) tab using the "Card Heading" and "Card Subheading" strings.

## Position the message of the day

The message of the day (MOTD) displays announcements such as maintenance windows, policy changes, or welcome messages on login pages. Choose a position that fits your communication needs.

1. In the **Login Layout and Flow** section, set the **MOTD Position**:
   - **Right**: Displays the message in a panel beside the login card. Best for persistent announcements that users can read while signing in.
   - **Above**: Displays the message above the login card. Best for urgent notices that users must see before they interact with the form.
   - **Below**: Displays the message below the login card. Best for supplemental information.
   - **Hidden**: Removes the MOTD from the login page entirely.
2. Set the **MOTD Corner Style** to **Default**, **Rounded**, or **Soft** to match your card style.
3. Optional: Set the **MOTD Background Color** to make the announcement panel stand out.

## Control the login flow order

Determine which authentication method users see first when they reach the login page.

1. In the **Login Layout and Flow** section, set the **Login Flow Order**:
   - **Credentials First**: Users see the username (and optionally password) prompt first. Choose this when most users authenticate with passwords or when your organization is transitioning to passwordless.
   - **Passwordless First**: Users see passkey and FIDO options first. Choose this when most users have registered passkeys or hardware tokens and you want to encourage passwordless adoption.

## Simplify options with collapsed secondary login

When your login page offers multiple authentication methods, you can collapse less-common options behind a toggle to reduce visual clutter.

1. In the **Login Layout and Flow** section, set **Secondary Login Display**:
   - **Visible**: All login options appear on the page at once.
   - **Collapsed**: Secondary options are hidden behind an expandable toggle. Users who need them can expand the section.

tip

Use **Collapsed** when your organization supports both passwordless and traditional login, but one method is used by the majority. This keeps the page clean while still offering alternatives.

## Show or hide the language selector

Control whether users can switch languages on the login page.

1. In the **Login Layout and Flow** section, set **Language Selector Visible**:
   - **Show**: Users can change the login page language.
   - **Hide**: The language selector does not appear. Use this for single-language organizations.

If you need to restrict which languages are available rather than hiding the selector entirely, see [Configure multilingual login pages](/docs/customization/configure-multilingual-login.md).

## Preview and save

1. Review the live preview panel to confirm your layout changes.
2. Click **Save**.

## Reset layout to defaults

If you need to revert layout changes:

1. In the **Custom Theme** tab, click **Reset Login Layout**.
2. Confirm the reset.

This clears all layout, footer, flow, font, and language-selector settings and reverts them to platform defaults.

## Next steps

- [Customize login page text and messages](/docs/customization/customize-login-messages.md) to control the words users see during authentication.
- [Optimize the login flow for an application](/docs/customization/optimize-login-flow-per-application.md) to configure per-application login behavior.