> For the complete documentation index, see [llms.txt](https://docs.checklist.getalvis.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.checklist.getalvis.com/customize-embedded-checklist-ui.md).

# Customize embedded checklist UI

Checklist UI is mostly based on Bootstrap 4 using SASS, and here's the default checklist SCSS file:

{% content-ref url="/pages/NpDz4rpjuyEpFUoKTTh8" %}
[Default Checklist Scss File](/customize-embedded-checklist-ui/default-checklist-scss-file.md)
{% endcontent-ref %}

Below is the HTML code map of the embedded checklist UI

<figure><img src="/files/TslrDjCYNkPiP9d5NseR" alt=""><figcaption></figcaption></figure>

To customize the UI, go to the checklist page, and add customized CSS code into the Custom style input.

<figure><img src="/files/ndLdYpxJtO3hkMUHUU4Y" alt=""><figcaption><p>Custom Style Input</p></figcaption></figure>

Be sure to add `.cl-container--embed` to change only the embedded checklist UI. Below is a sample custom style:

```sass
.cl-container--embed {
  .cl-inner {
    .cl-top {
      .cl-top__title {
        font-weight: bold;
      }
      .cl-top__progress {}
    }
    .cl-body {
      .cl-item {
        &.cl-item--active {}
        .cl-item__line {}
        .cl-item__title {}
        .cl-item__video {}
      }
    }
  }
}
```