> 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="https://2496151117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSftFWx1nnIytwPf874%2Fuploads%2FvyXqLj79K5LmKoDTwu0t%2Fcustomize-checklist-embed.jpg?alt=media&amp;token=743e42c5-8dd7-488d-b0e0-add2d066fb6e" 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="https://2496151117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSftFWx1nnIytwPf874%2Fuploads%2F5hD15SKHOyotWLE6XvSj%2FScreen%20Shot%202023-10-02%20at%2011.15.34%20AM.png?alt=media&amp;token=eb7099a9-9e12-4910-b85d-eab42e262af8" 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 {}
      }
    }
  }
}
```