This guide shows the steps to change the appearance of the Authentication tab in My Account using CSS.

This guide is for stores that use VTEX IO, making the customization through IO apps. If your store is not a VTEX IO store, check the My Authentication Customization Guide using CMS article. General instructions for customization of IO apps using CSS handles can be found in the article Using CSS Handles for store customization. Below are specific instructions to customize the My Authentication components in the Store Theme.

1. Open the code of the theme app of your store. As an example, the boilerplate code of the VTEX store-theme app can be found here.
2. Navigate to the styles\css folder.
3. Insert or create the css file for My Authentication customization. This file should have the name vtex.my-authentication.css.
4. In the css file, insert the code to customize the appearance of the components. The list of CSS handles is found below.
   
5. In the root folder of the code of the app, open the manifest.json file.
6. Inside "dependencies", insert the property "vtex.my-authentication": "1.x".
   
7. In a terminal, navigate to the root folder of the code of the app.
8. Run the command vtex link. After running this command, the theme app should be updated and the visual components should be as defined in the CSS file.

Below is the list of CSS handles for each UI component in My Authentication.