> For the complete documentation index, see [llms.txt](https://pet-poodl.gitbook.io/pet-for-developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pet-poodl.gitbook.io/pet-for-developers/whitelabel/page-2.md).

# Advanced UI overrides

Now that we saw the basic configuration of the widget, let's move on to the UI.

For the UI customization you have two options:

#### High level commands

An array of high level commands is already available to customize your UI.

#### Advanced overrides

If you want to take the time to truly make the widget your own, every single UI component can inherit CSS specs to reach fine-grained customization.

## High level commands

Let's start with the high level commands.

{% hint style="info" %}
The code from the last step of Basic settings will be carried over in this example.
{% endhint %}

Let's begin here. :point\_down:

{% embed url="<https://63afb601f72905d5c1752186-sdnrxbrqiv.chromatic.com/iframe.html?args=&id=playground-poodlapp--high-level-commands&viewMode=story>" %}

As you can see at the top, you can customize your UI with just a few commands.

Find even more commands [in our storybook](https://whitelabel.poodl.exchange/?path=/story/playground-poodlapp--default).

## Advanced overrides: Build a PET-themed widget

If you want to go more fine grained you can use the overrides. Here, we have built a pet-themed widget. :point\_down:

{% embed url="<https://63afb601f72905d5c1752186-sdnrxbrqiv.chromatic.com/iframe.html?args=&id=playground-poodlapp--poodl-theme&viewMode=story>" %}

To learn more about all the possible customization entries, [head to our overrides chapter in the storybook](https://whitelabel.poodl.exchange/?path=/story/theme-overrides--max-width).