## Customizing the login box in the Frontegg Portal

You can fully customize the appearance and layout of your login box directly from the Frontegg Portal using the visual configuration panel. To access these options:

1. Navigate to the **Frontegg Portal**.
2. Go to the **Login Box** section.
3. Use the **Styles Panel** on the right-hand side to adjust design settings.


![login-style-1](/assets/login-box-portal.7b64eff9858954b6ed7b727c6b62ff3255e91efcb3efbb58e40af3a7667b14ee.2764f56f.png)

### Available customization options

#### Theme

- Choose from pre-set themes:
  - `modern`
  - `classic`
  - `vivid`
  - `dark`


#### Colors

- Adjust the following color types:
  - **Primary**
  - **Secondary**
  - **Error**


#### Social buttons

- **Position**: Define the location of the social login buttons.
- **Style States**: Customize for different UI states:
  - `base`, `hover`, `focus`, `active`, `disabled`
- **Style Attributes per State**:
  - Font size
  - Font weight
  - Font color
  - Background color
  - Border color
  - Border radius
  - Border width


#### Layout

- **Format**: Choose a split layout that separates sign-in elements from additional content.
- **Content Box**:
  - Set the position and width
  - Define the content type (e.g., image, text, video)
- **Background**:
  - Set a background image or background color
  - Add an optional background link


#### Logo image

- Upload and select a custom logo
- Define placement and alignment


#### Browser attributes

- Set the **favicon**
- Customize the **URL**
- Set the **browser title**


#### Login box

- Customize the main container:
  - Background color
  - Border radius
  - Shadow


#### Input fields

- Define visual properties for input fields in all UI states:
  - `default`, `hover`, `focus`, `active`, `disabled`
- Customizable attributes include:
  - Fill color
  - Text color
  - Placeholder text color
  - Text size and width
  - Border color, radius, and width
  - Label color, size, and width


#### Submit button

- Define styles per state:
  - `default`, `hover`, `focus`, `active`, `disabled`
- Customize:
  - Font size and weight
  - Font color
  - Background color
  - Border color, radius, and width


#### Typography

- Select the global font family to match your brand guidelines


### Advanced customization

Depending on whether you are using the hosted or the embedded method, if you wish to use styles or localizations that are not part of the [Frontegg Builder](/ciam/guides/login-box/intro), you will need to serve the `themeOptions` and `localizations` objects from your application's code or a CDN as described in the [advanced setup](/ciam/guides/customizations/advanced).