> For the complete documentation index, see [llms.txt](https://mobiledocs.themeparrot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mobiledocs.themeparrot.com/woocommerce-mobile-app/bookstore/ui-customize.md).

# UI Customize

#### Change the app main color 

1. Open <mark style="color:orange;">`lib/config.dart`</mark> the file in the project.
2. You can change the most of the color components in this section

```
//App main color
const maincolor = 0xFF3FC1BE;
```

#### Change the app logo and splash screen

1. To change the **logo,** replace the logo.png in the following folder <mark style="color:red;">assets/images/</mark>
2. Open <mark style="color:orange;">`lib/images.dart`</mark> in the project folder and cross check your logo image name
3. Your logo must be 466 \* 97

```
const String constLogo = 'assets/images/name of your image.extension
```

1. To change the **Splashscreen** replace the splashscreen.png in the following folder <mark style="color:red;">assets/images/</mark>
2. Open <mark style="color:orange;">`lib/images.dart`</mark> in the project folder and cross check your splashscreen image name
3. Your logo must be 829 \* 1792

```
const String constSplashScreen = 'assets/images/name of your splashscreen.extension
```