Interface overview
Athena's app shell is a sidebar plus a main content area, with every page topped by the same blue header bar - the same layout throughout the app.
Header bar
Every page has a back arrow on the left (disabled on top-level pages, since there's nowhere to go back to), the page's own title beside it, and a three-dot context menu on the right edge. Actions that used to live as buttons inside the page - "Rescan" on a Discovered tab, "+ Add device", "New automation", "Edit dashboard" - now live in that menu instead, keeping the page itself just content.
On a phone-sized screen this is the only header bar - a top-level page (Dashboard, History, Configuration, ...) shows the sidebar toggle right next to its title instead of the disabled back arrow, and a subview shows its usual back arrow; either way there's just one bar, not a separate menu row stacked above it.
Sidebar
Sections, top to bottom:
- Dashboard - the landing page after login, showing your default dashboard. See Dashboards.
- History - open-ended multi-graph investigation. See History.
- Any items you've pinned - AI Assistant (see AI Assistant) is pinned by default on every account, the rest is up to you (see "Pinning sidebar items" below).
Then, below a separator near the bottom:
- Notifications (bell icon, with an unread-count bubble) - new devices, new versions. See Notifications.
- Configuration (tools icon) - a card-based hub for everything you set up once and revisit occasionally rather than every day: Dashboards (create/edit/ remove - see Dashboards), Devices & Services (every integration, including ESPHome builder and ESPHome's own native device connections - see Devices & Services), Automations, Locations & Areas, Backup & Restore, Users (see Users & roles), and System (see Settings). Each card has a chevron on the right edge; clicking anywhere on it opens that section.
Your own account menu (theme toggle, language/font-size preferences - see Account & preferences) sits in the sidebar's footer, below the separation line under Notifications/Configuration.
On desktop, the sidebar collapses to an icon rail (a toggle between the nav and the account menu footer) - your choice is remembered per device. On mobile it's a drawer instead, and always shows the full labeled version regardless of the desktop collapse preference.
Pinning sidebar items
A cog icon in the sidebar's own top row (between "Athena" and the theme toggle) enters edit mode - a persistent accent border marks the sidebar as actively being edited. Only then does a "Settings" item (its own cogwheel icon, same size as every other sidebar icon) appear, opening the "Sidebar settings" picker: a searchable checkbox list split into Built-in (AI Assistant, Automations - Athena's own first-party pages) and Integrations (every currently-configured integration). Check what you want pinned and press Save. Still in edit mode, a pinned item can be dragged into a new order or removed with a small ×. This order (and the pinned set itself) is personal to your own account, not shared with anyone else signed in to the same install.
Theme
A light/dark toggle sits in the sidebar's top brand row. An explicit choice always wins over your OS preference, and is applied before the page paints so a returning visit never flashes the wrong theme first.
Dialogs
Confirmations (delete/remove) and prompts (rename, new folder/file name) use Athena's own styled modals, not the browser's built-in dialogs - clicking outside one won't dismiss it by accident; Escape still works.