> For the complete documentation index, see [llms.txt](https://docs.statuspal.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.statuspal.io/platform/status-page-settings-and-design/design-customization.md).

# Design Customization

{% hint style="info" %}
Access your status page's Design settings by clicking on <mark style="background-color:green;">Status page > Design</mark> from the sidebar.
{% endhint %}

<figure><img src="/files/PSFRUBebuGZeK7cn4b0F" alt="status page custom design"><figcaption></figcaption></figure>

Our full-screen, live-preview-enabled designer tool allows you to make changes and see them take effect side by side in real-time, enabling you to quickly personalize your status page design to suit your needs.

### Basic fields

<table><thead><tr><th width="244">Field</th><th>Description</th></tr></thead><tbody><tr><td><strong>Header logo text</strong></td><td>The text displayed in your logo in the status page's header.</td></tr><tr><td><strong>Public company name</strong></td><td>You can override your company or project name displayed in your status page's footer.</td></tr><tr><td><strong>Logo</strong></td><td>Upload a logo to be used in the header.</td></tr><tr><td><strong>Favicon</strong></td><td>Upload a favicon.</td></tr><tr><td><strong>Header background</strong></td><td>Upload an image to be used as the background for the header.</td></tr></tbody></table>

### Theme options

You can select from two themes currently:

* **Default**: The theme is based on a standard top navigation bar.
* **Big logo**: Display a larger logo as well as a bigger background image.

You can personalize a couple of colors based on the theme you select:

<div align="left"><figure><img src="/files/i4DfuDmmhZrpU6UKueTV" alt="status page theme options" width="563"><figcaption></figcaption></figure></div>

### System status colors

You can also customize the colors used to communicate the different system statuses on your status page.

<div align="left"><figure><img src="/files/jLBx0HbpEnlxutcVF8sN" alt="status page system status colors settings" width="563"><figcaption></figcaption></figure></div>

### Custom CSS

If the above theme options are not enough, leverage the full power of CSS to customize every style of your status page.

<div align="left"><figure><img src="/files/CRCS1j9JUleIWyFXrPWt" alt="status page custom CSS" width="563"><figcaption></figcaption></figure></div>

### Custom HTML

If customizing CSS doesn't cut it, it might be time to pull out the big guns. Configure custom HTML header and footer for your status page.

<div align="left"><figure><img src="/files/I1v5o8OGn0ia5HayCZLP" alt="status page custom HTML" width="563"><figcaption></figcaption></figure></div>

#### Template tags

Use these special tags inside your custom header/footer HTML to control where Statuspal inserts built-in elements:

| Tag                    | Description                                                                                 |
| ---------------------- | ------------------------------------------------------------------------------------------- |
| `{{subscribe_button}}` | Inserts the subscribe button in your chosen position in the header.                         |
| `{{lang_selector}}`    | Inserts the language selector dropdown (only appears if multiple languages are configured). |

{% hint style="info" %}
If you omit these tags, the subscribe button and language selector won't appear on your status page. You can combine custom HTML with [custom CSS](/platform/status-page-settings-and-design/advanced-settings.md) and head code for full control over the layout.
{% endhint %}