# 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="https://4061983002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIMm5p2V7PNx3dS7vwKE%2Fuploads%2FNEMiQsAFS570ldZ0TDU1%2FScreenshot%202024-04-19%20at%2008.25.43.png?alt=media&#x26;token=a9a5e31b-1926-4c77-bb58-00dcaf2e9341" 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="https://4061983002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIMm5p2V7PNx3dS7vwKE%2Fuploads%2FRrp5BGNEy3AcKeAuEWns%2FScreenshot%202024-04-19%20at%2008.40.11.png?alt=media&#x26;token=20f3184e-9a47-4d37-85f5-d7a5f62d8c88" 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="https://4061983002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIMm5p2V7PNx3dS7vwKE%2Fuploads%2FVficqMQg1fSKhb2lZVtM%2FScreenshot%202024-04-19%20at%2008.40.55.png?alt=media&#x26;token=73ee0600-d475-4196-a1f1-54c3a5ddfe85" 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="https://4061983002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIMm5p2V7PNx3dS7vwKE%2Fuploads%2F1CGK7eJ46l55axp7dyHU%2FScreenshot%202024-04-19%20at%2008.42.14.png?alt=media&#x26;token=a100ce55-2df1-4830-bd85-de0d9e9b875e" 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="https://4061983002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIMm5p2V7PNx3dS7vwKE%2Fuploads%2FID89947iQFYbG6lg6s6k%2FScreenshot%202024-04-19%20at%2008.42.21.png?alt=media&#x26;token=d4ab2868-7ebf-43a3-9d66-b46b62fd41f2" alt="status page custom HTML" width="563"><figcaption></figcaption></figure></div>