Give your Uptime Kuma status page a cute and modern look with custom CSS
Live demo »

Features · Installation · Personalization · Community Themes

• Modern design inspired by top monitoring services
• Support for Uptime Kuma v2
• Support for light and dark themes
• Hidden refresh timer for a cleaner look (can be easily restored)
• Clean, easily customizable and extendable code

1. In your Uptime Kuma dashboard, navigate to status page.
2. Click Edit Status Page.
3. Scroll down to Custom CSS field.
4. Copy the contents of main.css and paste it into the Custom CSS field.
5. Click Save at the bottom.

You can easily customize the theme by modifying the variables inside the :root {} block.

Preview

By default, 2 columns are shown on wide screens. If you prefer a single column everywhere, disable the 2‑column rule.

1. Search for this comment: /* Enable 2 columns on wider screens; comment out to disable */
2. Comment out the block immediately below it.

The refresh timer is hidden by default. To make it visible again, find the .refresh-info rule and remove or comment out the display: none; line.

This section holds links to themes supported by the community.

Preview