Skip to main content

📄 Board customization

How to get to the customize page

To get to the customize page you can click on the settings button in the right top corner of your board.

homarr header board customization settings button


Using the layout settings, you can customize the structure and layout of your Homarr board.

homarr board customization layout settings

There are two sidebars available: right and left. Sidebars are additional spaces with a width of 2, that you can fill with apps or widgets - they do not support categories though.


If you activate Pings, Homarr will send a HTTP/-S request to all your services on the page load. When the response code matches the expected status code, the ping indicator will be green. Otherwise, it will be red.


Example of an ping indicator:



With the allow anonymous switch you can allow / decline access for not logged in users to your board.

homarr board customization access settings

Screen Sizes

Whenever you enter Edit Mode, a screen size indicator will appear at the bottom-right corner of the screen. You can use this indicator to see which screen size you are editing. To make your dashboard look the best, configure each screen size seperatly, making sure to save your changes before continuing to the next size.

To change the screen size you are editing, simply resize the browser.

Screen SizeBreakpointAmount of Columns

The amount of columns can be configured in the gridstack settings.

homarr board customization gridstack settings

Page Metadata

In this section you can configure the title and meta title of your board. Additionally you can define the logo and favicon.

homarr board customization page metadata settings

Page Title

The page title is the text shown in the top left corner.

homarr board customization page title settings

Meta Title

The meta title is the text shown in the browser tab.

homarr board customization meta title settings

The logo is the image shown in the top left corner.

homarr board customization logo settings


The favicon is the image shown in the browser tab.

homarr board customization favicon settings


In this section you can configure the appearance of your board.

homarr board customization appearance settings

Background image

The background image is the image shown in the background of your board. You can either use an image from the internet or one from the public img directory. You can find out here how to mount the public image directory.

homarr board customization background image

Video Backgrounds

You can also use a video as background. Just add a URL or a path to the input field. .mp4, .webm and .ogg files are supported. Make sure your browser supports the video format you are using. You can find a list of supported formats here.

Random Backgrounds

You can get a random image from Unsplash by using their public API. Just add the following URL to the input field:


Topics can also be used to filter the results: ?nature,nature


homarr with random unplash background

Colors & Shade

You can configure the primary and secondary color for your board. The primary color is used for things like buttons or the logo. The secondary color is mostly only used for gradients.

homarr board customization primary color settings

homarr board customization color logo

The shade is used to configure the intensity of the primary color.

homarr board customization low shade settings

App Opacity

The app opacity slider can be used to configure the opacity of different elements on your board. For example it can be used to decrease the opacity of the app items so the background image is more visible.

homarr board customization app opacity settings

Custom CSS

This textarea let's you define custom css that will be applied to your board. You can use this to customize your board even further.

homarr board customization custom css settings homarr board customization custom css settings applied

Static Classes

By default, many class names will be made out of a random value, also known as a hash. These are used internally by Mantine and can make writing custom CSS quite difficult. The biggest issue with these hashes is, that they will be randomized each build - which means, if you update Homarr, they will change and your CSS might no longer work. For this reason, we recommend you to avoid the random hash class-names and instead use implemented static ones, for the most important objects on your dashboard, they are easier to use and don't change.

dashboard-app-shellFull App (including Header)
dashboard-header-logo-imageLogo image
dashboard-header-logo-textHeader text
dashboard-header-search-rootSearchbar root
dashboard-header-search-inputSearchbar input
grid-stack-wrapperGridstack wrapper
grid-stack-empty-wrapperEmpty gridstack wrapper
dashboard-gs-generic-itemApp/Widget wrapper