---
title: Customize the look and feel of PingOne authentication pages
description: Use this tutorial to learn how to customize the look and feel of your PingOne authentication experience using themes.
component: pingone
page_id: pingone:pingone_tutorials:p1_p1tutorial_customize_look_and_feel
canonical_url: https://docs.pingidentity.com/pingone/pingone_tutorials/p1_p1tutorial_customize_look_and_feel.html
revdate: May 16, 2025
section_ids:
  steps: Steps
  result: Result:
  result-2: Result
  learn-more: Learn More
---

# Customize the look and feel of PingOne authentication pages

This tutorial walks you through ways to customize your PingOne authentication experience to better align with your organization's brand. In this tutorial, you'll change the look and feel of registration and sign-on forms in PingOne by applying your own branding and making stylistic changes using a theme.

## Steps

1. In the PingOne admin console, go to **User Experience > Branding and Themes**.

   ![A screen capture showing the Branding and Themes page.](../user_experience/_images/p1-branding-themes.png)

2. Click the **[icon: gear, set=fa]**icon to open the **Global Settings** panel.

   These settings apply to all themes in the environment.

3. Enter or edit the branding details:

   * **Company name**: The name of your company as you want it to appear to end users.

     Enter `Acme Company`.

   * **Logo**: An image to represent the environment to end users.

     Click the image and select **Upload a New Image** to upload an image from your computer to use as the Acme Company logo. This logo is used when you create a new theme, but doesn't apply to existing themes.

     |   |                                |
     | - | ------------------------------ |
     |   | The maximum logo size is 2 MB. |

     ![A screen capture showing the new Global Settings entries.](_images/p1-tutorial-themes-global-settings.png)

4. Click **Save**.

5. Click the **[icon: plus, set=fa]**icon to add a new theme.

6. On the **Choose a Base Theme** page, click **Slate**.

   ![A screen capture showing the Choose a Base Theme page.](_images/p1-tutorial-select-base-theme.png)

   You can see that the logo for the base themes matches what you uploaded in **Global Settings**.

7. In the **Name** field, enter `Acme Theme`.

8. Click **Next** and select the tabs on the **Customize** page to review and change settings for the different page types.

   Page previews display in the left panel, and you configure settings in the **Theme Styles** panel on the right. The previews update in real time as you make changes to the settings. To switch between previews for desktop or mobile devices, click the **Desktop** or **Mobile** icon (![An image of the Desktop and Mobile icons](../user_experience/_images/p1-branding-themes-desktop-mobile-icon.png)).

9. Let's update a few settings for the sign-on and registration forms:

   1. Click the **Authentication Policy** tab.

   2. In the right panel, locate the **Button** section, select **Button Fill** and select one of the preconfigured color options.

      For the purposes of this tutorial, we selected aqua. Notice the color of the button in the preview panel changes to match your selection.

      Click outside of the color picker to return to the settings panel.

   3. Click **Button Text** and select another color.

      The color of the text inside the button update based on your selection.

      For the purposes of this tutorial, we selected black.

      ![A screen capture showing the Branding and Themes Customize page, with the new button and button text colors.](_images/p1-tutorial-theme-button-changes.png)

   4. Scroll to the **Background** section, click the image, and select **Upload New Image**.

   5. Select an image on your computer and click **Open**.

      ### Result:

      The background image for the theme updates.

      ![A screen capture showing the Branding and Themes Customize page with a new background image added.](_images/p1-tutorial-themes-change-background.png)

10. Click **Save**.

11. On the **Branding and Themes** page, hover over the **Acme Theme** to display the **More Options** (⋮) icon in the right corner.

    ![A screen capture showing the Branding and Themes page with the More Options icon surrounded by a red box.](_images/p1-tutorial-themes-options-icon.png)

12. Click the **More Options** (⋮) icon and select **Set As Active Theme**.

    ![A screen capture showing the Branding and Themes page with the More Options menu expanded and the Set As Active Theme option selected.](_images/p1-tutorial-themes-select-active.png)

## Result

**Acme Theme** is now the active theme for the environment.

|   |                                                                       |
| - | --------------------------------------------------------------------- |
|   | It can take up to 5 minutes for the new theme to appear to end users. |

## Learn More

Learn more about the many options for theme configuration in [Branding and Themes](../user_experience/p1_branding_themes.html).