# 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>

### &#x20;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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.statuspal.io/platform/status-page-settings-and-design/design-customization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.