📱 A minimalist and user-friendly dashboard with an mobile first approach, now on GitHub!


About 3 years ago, a friend introduced me to Home Assistant. I was drawn to the idea and its open-source nature, so I purchased a Raspberry Pi 4 and quickly became enamored with the platform. I’m sharing this project to inspire the community.

There is no installation process, as this is my personal setup uploaded as is. It’s meant for you to learn from, copy, and experiment with. If you have specific questions or comments, feel free to ask and I will try to answer as soon as possible.

Thank you all for your support and motivation!

Home Assistant - Mobile First Dashboard | GitHub

Animated widgets


Realy nice work! Congratulations. I will definetly have a closer look into it.


Thanks! If you have questions I’m here!

I played around with it a bit yesterday and I really like your dashboard. So much so, in fact, that I think I’m going to adapt it just a little bit to make it my default dashboard :slight_smile: .

One thing I noticed while trying it out yesterday, and it bothered me a bit, was that I often activated the light slider by mistake when scrolling down. How do you deal with this? Or is it just a matter of getting used to it?

I’ll also have a look at whether I can replace your code here and there with templates. Unfortunately, the code of your lovelace.yaml is repetitive in many places and this makes the file with over 6000 lines of config code very confusing :woozy_face: .

In any case, many thanks and best regards to Belgium (if I have taken the location from the code correctly :wink: )


Really cool ideas in this setup. Thanks for sharing!

1 Like

Thanks again, glad to see someone trying to figure out my code. For the sliders it’s weird that you have this issue, I’ve never triggered my lights by mistake with those.

And I agree that my code really need a big clean up, I’m using the UI but mostly in YAML mode, it’s easier to maintain for me. I’ve just copied and pasted all the YAML in that lovelace.yaml for GitHub but I don’t use it (for now).

And yes I’m from Belgium, I thought I had cleaned my code from all that kind of informations :joy:

Thanks and you’re welcome, glad to share! :smiley:

I played around a bit with .yaml anchors. Especially for the completely repetitive header areas:
homeassistant/lovelace.yaml at main · CM000n/homeassistant (github.com)

This seems to work wonderfully and makes the whole thing a bit clearer.
Again: Thanks for your great work and inspiration!

1 Like

This looks like how you define decluttering templates, but it’s not the same is it? Does it require a download from HACS?

@Cloos there are some really nice ideas in this setup, thanks for sharing! I’m currently thinking about how to build a dedicated good-looking tablet layout, like with a side menu and stuff, but I find it much harder than a phone layout; are you planning on building one (in this style) as well?

1 Like

No, these are just .yaml anchors and aliases that have nothing to do with Home Assistant itself, but are simply part of the .yaml specification:

1 Like

Thanks! I’m using this dashboard for my tablet as well, take a look at this post, it’s an old layout but my new one is even better on it (more info with less scrolling), so I’m not planning to do a landscape view of it.


I will take a closer look at this, thanks! I will probably re-wright a bunch of it when I got more time, but I want to focus on re-wrighting my automations first then publish them on GitHub as well.


Nice work indeed!
Dumb question what is the !important doing in the css config? Like in here “margin: -16px !important;”

They are here to override the initial CSS and make sure this line is used instead.

1 Like

Hey Cloos,

Nice mobile dashboard. I copied your code for trying to have the same person card with picture like you Quentin card but it don’t look like yours.

You also need to install the Noctis theme from my repo, it’s a modified one, then tell me if it’s working for you.

Nice work.
How you added QR code ?


  1. how can I create this addition to the current dashboards I have?
  2. you have to customize it to tablet ui (;

Try https://qifi.org/

Loving it. Keen to know how you have used your photo in the person card on the home page? I referenced icon:/local/image.jpg and it is not working