> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appcharge.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Configure the Login Page

The login page is the first screen players see before they sign in to your web store. Customize its appearance, including greeting text, fonts, branding assets, and login button styling.

This article covers visual and text customization only. To configure how players sign in, such as SSO, Player ID, or password login, see [About Player Authentication](/guides/webstore/player-authentication/about-player-authentication).

## Configure the login page

To configure the login page:

1. In the Publisher Dashboard, go to **Studio > Builder** and click the **Login Page** tab.
2. Complete the following sections:

   * **Now Say 'Hi':** Customize the greeting players see when they open the login page.
     * **Text:** Enter the greeting text.
     * **Color:** Select a text color from the color picker or enter a hex color.
     * **Size (px):** Enter the font size in pixels.
     * **Weight:** Select the font weight.
   * **Font:** Select the font for the login page.
   * **Error Message:** Control your fallback error messages.
     * **Title:** Enter the title displayed when a login error occurs. For example, `Whoops!`.
     * **Subtitle:** Enter the subtitle displayed when a login error occurs. For example, `Login failed`.
   * **Logout Text Settings:** Customize the confirmation screen that appears when a player taps their profile picture to log out.
     * **Button Image:** Upload an image (optional). Use 1:1 aspect ratio, minimum width 32 px, PNG or JPEG.
     * **Custom 'X' Icon:** Upload an icon (optional). Use 1:1 aspect ratio, minimum width 32 px, PNG or JPEG.
     * **Text:** Enter the logout confirmation message. For example, `Are you sure you want to disconnect?`. This field supports translations. If left empty, the default logout screen text is used.
     * **Font:** Select the font.
     * **Color:** Select a text color from the color picker or enter a hex color.
     * **Size (px):** Enter the font size in pixels.
     * **Weight:** Select the font weight.
   * **Assets:** The brand assets you add here appear only on the login page. You can change them at any time.

     * **Logo:** Upload an image (optional). Use 1:1 aspect ratio, minimum width 320 px, PNG or JPEG.
     * **Logo Size:** Select how large the logo appears on the login page.
     * **Login Background Image (Mobile):** Upload an image (optional). Use 1:3 aspect ratio, minimum width 400 px, PNG or JPEG.
     * **Login Background Image (Desktop):** Upload an image (optional). Use 1920 × 1080 px, PNG or JPEG.

     <Note>
       If you provide an external image URL, Appcharge saves and uses the URL as-is. Appcharge doesn't download, copy, upload, or host the image. If you use an external image URL, host the image on your own infrastructure and keep it available at the provided URL.

       We recommend uploading image files instead of using external URLs when possible. Appcharge hosts uploaded files on its CDN.
     </Note>
   * **OTP:** Design settings for the OTP login method.

     * **OTP Icon:** Upload an icon (optional). Use 1:1 aspect ratio, minimum width 32 px, PNG or JPEG.
     * **OTP Button Text:** Enter the button label.
     * **Button Color:** Select a button color from the color picker or enter a hex color. Click **Reset** to restore the default color.
     * **Button Text Color:** Select a text color from the color picker or enter a hex color. Click **Reset** to restore the default color.

     If left empty, the default OTP button styling is used.
   * **Player ID:** Design settings for the Player ID login method.
     * **Player ID Icon:** Upload an icon (optional). Use 1:1 aspect ratio, minimum width 32 px, PNG or JPEG.
     * **Player ID Button Text:** Enter the button label. For example, `Log in with Player ID` or `Log in with Store Code`. This field supports translations. If left empty, the default Player ID button styling is used.
     * **Button Color:** Select a button color from the color picker or enter a hex color. Click **Reset** to restore the default color.
     * **Button Text Color:** Select a text color from the color picker or enter a hex color. Click **Reset** to restore the default color.
3. In the preview panel on the right, review your changes in real time.
4. Click **Save** to apply your changes.

To add translations for **Logout Text Settings > Text** or **Player ID Button Text**, see [Set and Manage Translations](/guides/translations/set-and-manage-translations).