Home Assistant Dashboard Design: Tips for a Clean, Useful Layout

When I first set up Home Assistant, my dashboard was a disaster. Every entity I discovered got thrown onto the default overview as a new card. Within a month, I had a single scrolling page with 47 entity cards, three weather widgets, a map I never looked at, and a random camera feed wedged between the light switches and the thermostat. My partner took one look at it and said, "I'll just use the light switch, thanks."

That comment stung, but it was the push I needed to redesign everything from scratch. Six months later, my dashboard is the primary way both of us control the house. Here's what I learned about designing a Home Assistant dashboard that humans (not just tech enthusiasts) actually want to use.

The Golden Rule: Design for the Least Technical Person

If your dashboard only works for someone who knows what "entity_id" means, you've built a control panel, not a user interface. The entire design process should start with one question: what does the person who didn't set this up need to do?

In my case, that meant my partner needed to: control lights by room, check if doors are locked, see the thermostat setting, view camera feeds, and arm/disarm the security system. That's it. Everything else — automations, system health, Zigbee mesh maps, MQTT topics — belongs on a separate admin dashboard they never see.

Layout Architecture: Views and Navigation

The biggest mistake I see in Home Assistant dashboards is trying to fit everything on one page. Use views (tabs) to organize by context, not by device type.

My View Structure

Home (default view): Shows a summary of the house right now — who's home, current temperature, any alerts (door left open, motion detected), and quick-access controls for the most-used things (living room lights, front door lock, thermostat).

Rooms: One sub-view per room. Each room view shows all devices in that room: lights, sensors, blinds, media. When my partner wants to control the bedroom, they tap "Bedroom" and see only bedroom things. No hunting through a global entity list.

Security: Camera feeds, door/window sensor status, lock controls, and alarm panel. Everything security-related in one place, designed to be useful when you hear a noise at 2 AM and grab your phone.

Climate: Thermostat, room-by-room temperature sensors, humidity readings, and energy usage graphs. Useful for seasonal tuning and catching HVAC issues early.

Media: Active media players, speaker groups, and streaming controls. Only visible when someone is actually playing media (using conditional visibility).

Navigation Design

Keep navigation icons simple and recognizable. Use Material Design Icons (MDI) consistently: mdi:home for the home view, mdi:shield for security, mdi:thermometer for climate. Avoid text-only labels in the tab bar — icons are faster to scan, especially on mobile.

Limit yourself to 5–7 top-level views. If you need more, you're probably mixing admin and daily-use items. Move the extras to your admin dashboard.

Card Selection: Less Is More

Home Assistant has dozens of card types, plus hundreds from HACS. Resist the urge to use all of them. A consistent dashboard uses a small palette of cards, and that consistency makes the interface feel polished instead of chaotic.

The Cards I Actually Use

Mushroom cards (HACS): My primary card type. Mushroom provides clean, compact entity cards with consistent styling. The Mushroom Light Card, Climate Card, and Entity Card handle 90% of what I need. They look modern, are highly customizable, and use less vertical space than default cards.

Grid cards: For organizing Mushroom cards in rows. I typically use a 2-column grid on desktop that collapses to single-column on mobile. This keeps the layout predictable across devices.

Conditional cards: Show content only when relevant. The washer dryer card only appears when a cycle is running. The garage door card only shows when the door is open. This dramatically reduces visual noise.

Picture Elements card: For my floor plan view. A single overhead image of the house floor plan with interactive elements placed at each device's physical location. Tapping a light icon on the floor plan toggles that light. This is the most intuitive control method for guests.

Color and Theming

The default Home Assistant theme is functional but generic. A well-chosen theme makes your dashboard feel intentional. Here are my recommendations:

Use a dark theme as default. Most people check their dashboard in the evening or at night. Dark themes reduce eye strain and look more polished on wall-mounted tablets. I use the "Catppuccin Mocha" theme from HACS — it's dark without being fully black, with subtle color accents.

Use color consistently for state. Green means on/active, red means alert/problem, amber means caution/in-progress, and gray means off/unavailable. Never use these colors decoratively. When every colored element means something, you can scan the dashboard and instantly know the house status.

Limit accent colors. Pick one or two accent colors for interactive elements and headings. I use a soft teal for active states and a muted amber for alerts. More colors than that create visual noise and make important information harder to spot.

Mobile Optimization

Most of your dashboard interactions will happen on a phone, so design for mobile first and let it scale up to tablets and desktops.

Single column layouts: On mobile, use a single column with cards stacked vertically. The grid card handles responsive layout automatically if you set it up correctly. Never force horizontal scrolling — it's the number one usability sin on mobile dashboards.

Touch-friendly tap targets: Every interactive element should be at least 44x44 pixels (Apple's minimum). Mushroom cards handle this by default, but custom button elements and picture-elements might need explicit sizing.

Compact mode: Enable compact mode in HA settings (Settings > Dashboards > Compact mode). This reduces card padding and fits more information on screen without sacrificing readability.

Bottom navigation: If you're using a wall-mounted tablet, consider moving the navigation to the bottom using a custom theme or sidebar configuration. Bottom navigation is easier to reach on tablets mounted at eye level.

Advanced Techniques

Custom Header Cards for Room Summaries

At the top of each room view, I use a Mushroom Template Card that shows a summary sentence: "Living Room — 2 lights on, 72°F, blinds open." This one line tells you the room state without looking at individual cards. The template uses Jinja2 to count active lights and pull sensor values dynamically.

Popup Dashboards with Browser Mod

Instead of cramming every control onto the main view, use the Browser Mod integration to create popup dashboards. Tapping a room summary card opens a popup with detailed controls for that room. This keeps the main view clean while still providing full control one tap away.

Auto-Generating Room Views

If you have a lot of rooms, manually building each view is tedious. I wrote a simple Jinja2 macro that auto-generates a card grid for any room by pulling all entities with that room's area assignment. When I add a new device to a room in HA, it automatically appears on the dashboard. This leverages the Area Registry that many Home Assistant automations also depend on.

Wall Tablet Dashboard Tips

A wall-mounted tablet running your dashboard is the ultimate smart home flex. Here's what I learned from running a Fire HD 10 on the kitchen wall for six months.

Use Fully Kiosk Browser (Android). It provides screen-on/off based on motion detection using the front camera, auto-restarts the app if it crashes, and prevents users from accidentally leaving the dashboard.

Design a specific tablet view. The dashboard you use on your phone isn't ideal for a wall tablet. Tablet dashboards should show more information at a glance, use larger tap targets, and skip navigation that requires precision tapping. I have a dedicated "Wall" dashboard that shows the home summary, quick room controls, weather, and a rotating camera feed — all without scrolling.

Screen burn-in prevention. Set Fully Kiosk to turn the screen off after 60 seconds of no motion and dim to 10% at night. Use a dark theme. These settings have kept my Fire tablet running for six months with no visible burn-in.

My Current Dashboard Stack

For reference, here's exactly what I'm running:

• Theme: Catppuccin Mocha (HACS)
• Primary cards: Mushroom (light, entity, climate, template, chips)
• Layout: Grid cards, 2-column on desktop, single on mobile
• Custom components: Browser Mod, card-mod, layout-card, auto-entities
• Views: Home, Rooms (5 sub-views), Security, Climate, Media, Admin
• Wall tablet: Fire HD 10 with Fully Kiosk Browser

The total setup took about a weekend to build from scratch, plus occasional tweaks as I add new devices. It's the most satisfying part of my smart home because it's the thing I interact with every day.

If you're just getting started with Home Assistant, check out our beginner's automation guide first, then come back here to build a dashboard that does justice to all those automations. And if you want to make sure your setup is future-proof, review the smart switches vs smart bulbs comparison to choose the right hardware foundation.