diff --git a/docs/plans/20260505-1230-ui-fixes/plan.md b/docs/plans/20260505-1230-ui-fixes/plan.md
new file mode 100644
index 0000000..a64bba9
--- /dev/null
+++ b/docs/plans/20260505-1230-ui-fixes/plan.md
@@ -0,0 +1,385 @@
+# Plan: DaisyUI v5 Form Class Migration + Homepage Hero Button Redesign
+
+**Date:** 2026-05-05
+**Branch:** `chore/ui-fixes`
+
+---
+
+## Background
+
+The project uses Tailwind CSS v4 + DaisyUI v5 via a CSS-first build (`@plugin "daisyui"` in `input.css`). DaisyUI v5 **removed** several component classes that existed in v4:
+
+| DaisyUI v4 Class       | v5 Status       | v5 Replacement                           |
+|------------------------|-----------------|------------------------------------------|
+| `.form-control`        | Removed         | `.fieldset` or Tailwind-native flex/grid |
+| `.label-text`          | Removed         | `.fieldset-label` provides muted text    |
+| `.label-text-alt`      | Removed         | Tailwind-native (e.g. `text-xs text-error`) |
+| `.label`               | Still exists    | —                                        |
+| `.btn`, `.card`, etc.  | Still exist     | —                                        |
+
+The `.form-control` and `.label-text` classes are used in production code (`node-detail.js`, `map.js`) but produce **no CSS output** in the built `tailwind.css` since DaisyUI v5 does not generate them. This causes forms to render without proper layout styling.
+
+Separately, the homepage hero section uses `btn btn-outline` for navigation buttons. The user wants a redesigned, more compact card-based layout.
+
+---
+
+## Root Cause Analysis
+
+DaisyUI CSS **is** included in the build — the `@plugin "daisyui"` directive in `input.css` correctly loads DaisyUI v5 and generates all currently-supported component classes. The issue is that `form-control` and `label-text` were **deprecated and removed in DaisyUI v5**. DaisyUI v5's plugin no longer defines these classes, so they don't appear in `tailwind.css`.
+
+**Evidence:**
+- `tailwind.css` (101KB minified) contains `.label`, `.btn`, `.card`, `.navbar`, `.modal`, `.badge`, `.alert`, `.table`, `.fieldset`, `.fieldset-label`, `.fieldset-legend` and all other v5 components
+- `form-control` and `label-text` do **not** appear anywhere in the built CSS
+- The DaisyUI v5 source (`node_modules/daisyui/components/`) has no `form-control` component; it was replaced by `fieldset`
+
+---
+
+## Task 1: Replace `form-control` / `label-text` / `label-text-alt` with DaisyUI v5 + Tailwind-native equivalents
+
+### Error display strategy
+
+**Decision:** Error containers use `<div class="hidden text-xs text-error">`. The `hidden` class is toggled by JS handlers using `classList.remove('hidden')` / `classList.add('hidden')`. Error text is set via `textContent`.
+
+### Files affected
+
+#### A. `src/meshcore_hub/web/static/js/spa/pages/node-detail.js`
+
+**Location 1 — Tag Edit Modal template (lines 50–61):**
+
+Current (broken):
+```js
+<div class="form-control mb-4">
+    <label class="label"><span class="label-text">${t('common.value')}</span></label>
+    <input type="text" id="tagEditValue" class="input input-bordered">
+    <label class="label" id="tagEditError"></label>
+</div>
+<div class="form-control mb-4">
+    <label class="label"><span class="label-text">${t('common.type')}</span></label>
+    <select id="tagEditType" class="select select-bordered w-full">
+```
+
+Change to:
+```js
+<div class="fieldset mb-4">
+    <label class="fieldset-label">${t('common.value')}</label>
+    <input type="text" id="tagEditValue" class="input input-bordered w-full">
+    <div class="hidden text-xs text-error" id="tagEditError"></div>
+</div>
+<div class="fieldset mb-4">
+    <label class="fieldset-label">${t('common.type')}</label>
+    <select id="tagEditType" class="select select-bordered w-full">
+```
+
+**Location 2 — Add Tag Form template (lines 228–233):**
+
+Current (broken):
+```js
+<div class="form-control">
+    <input type="text" name="key" class="input input-bordered input-sm" placeholder=${t('common.key')} required>
+</div>
+<div class="form-control">
+    <input type="text" name="value" class="input input-bordered input-sm" placeholder=${t('common.value')}>
+    <label class="label" id="tagAddError"></label>
+</div>
+```
+
+Change to:
+```js
+<div class="fieldset">
+    <input type="text" name="key" class="input input-bordered input-sm w-full" placeholder=${t('common.key')} required>
+</div>
+<div class="fieldset">
+    <input type="text" name="value" class="input input-bordered input-sm w-full" placeholder=${t('common.value')}>
+    <div class="hidden text-xs text-error" id="tagAddError"></div>
+</div>
+```
+
+**Location 3 — JS validation error handlers:**
+
+All error display logic changes from `innerHTML` with `label-text-alt` spans to `textContent` + `hidden` class toggling.
+
+Line 446 — add tag form validation error:
+```js
+// Before:
+if (errEl) errEl.innerHTML = `<span class="label-text-alt text-error">${validationError}</span>`;
+// After:
+if (errEl) { errEl.textContent = validationError; errEl.classList.remove('hidden'); }
+```
+
+Line 449 — add tag form error clear:
+```js
+// Before:
+if (errEl) errEl.innerHTML = '';
+// After:
+if (errEl) { errEl.textContent = ''; errEl.classList.add('hidden'); }
+```
+
+Line 476 — edit modal error clear (on modal open):
+```js
+// Before:
+if (errorLabel) errorLabel.innerHTML = '';
+// After:
+if (errorLabel) { errorLabel.textContent = ''; errorLabel.classList.add('hidden'); }
+```
+
+Line 493 — edit form validation error:
+```js
+// Before:
+if (errorLabel) errorLabel.innerHTML = `<span class="label-text-alt text-error">${validationError}</span>`;
+// After:
+if (errorLabel) { errorLabel.textContent = validationError; errorLabel.classList.remove('hidden'); }
+```
+
+Line 496 — edit form error clear:
+```js
+// Before:
+if (errorLabel) errorLabel.innerHTML = '';
+// After:
+if (errorLabel) { errorLabel.textContent = ''; errorLabel.classList.add('hidden'); }
+```
+
+Line 504 — edit form API error:
+```js
+// Before:
+if (errorLabel) errorLabel.innerHTML = `<span class="label-text-alt text-error">${err.message}</span>`;
+// After:
+if (errorLabel) { errorLabel.textContent = err.message; errorLabel.classList.remove('hidden'); }
+```
+
+#### B. `src/meshcore_hub/web/static/js/spa/pages/map.js`
+
+**Location — Map filters (lines 198–238):**
+
+Each filter uses the pattern:
+```js
+<div class="form-control">
+    <label class="label py-1">
+        <span class="label-text">${t('common.show')}</span>
+    </label>
+    <select class="select select-bordered select-sm" @change=${applyFilters}>
+```
+
+Change all four filter blocks to use `fieldset`:
+```js
+<div class="fieldset">
+    <label class="fieldset-label">${t('common.show')}</label>
+    <select class="select select-bordered select-sm" @change=${applyFilters}>
+```
+
+For the checkbox filter (lines 234–238), which uses `label.cursor-pointer.gap-2.py-1` with an inline checkbox, keep the label structure but change to fieldset:
+```js
+<div class="fieldset">
+    <label class="fieldset-label cursor-pointer gap-2">
+        <span>${t('map.show_labels')}</span>
+        <input type="checkbox" id="show-labels" class="checkbox checkbox-sm" @change=${updateLabelVisibility}>
+    </label>
+</div>
+```
+
+### Testing
+
+- Visual verification: build frontend (`npm run build`), run the app, navigate to:
+  - A node detail page → verify the inline tag editor form and modal render correctly
+  - Trigger validation errors → verify error text appears and clears correctly
+  - Map page → verify filter controls render with proper spacing
+- Run targeted tests: `pytest tests/test_web/ -v`
+
+---
+
+## Task 2: Redesign Homepage Hero Navigation Buttons
+
+### Current State
+
+The hero section in `home.js:30-94` renders navigation buttons as DaisyUI `btn btn-outline` with horizontal icon+text layout:
+
+```js
+<a href="/dashboard" class="btn btn-outline btn-info">
+    ${iconDashboard('h-5 w-5 mr-2')}
+    ${t('entities.dashboard')}
+</a>
+```
+
+These are arranged in a `flex flex-wrap justify-center gap-3` container.
+
+### Target Design
+
+Each nav item should be a **square-ish card** with:
+1. **Border:** Low-contrast rounded border, respecting dark/light mode (`border border-base-content/20`)
+2. **Icon:** Larger, centered in the box, using existing section colors (via CSS custom properties `--color-*`)
+3. **Label:** Below the icon, high-contrast text (`text-base-content`)
+4. **Hover:** Subtle scale-up animation (`hover:scale-105 transition-all duration-200`)
+
+### Implementation Plan
+
+#### A. Changes to `home.js` — `renderHeroSection()`
+
+Replace the flex-wrap row of `btn btn-outline` links with a grid of card-link elements.
+
+**Placement:** Add `renderNavCard()` as a module-level function in `home.js`, after `renderRadioConfig()` (line 28) and before `renderHeroSection()` (line 30).
+
+**New render function for a single nav card:**
+
+```js
+function renderNavCard({ href, icon, label, colorVar }) {
+    return html`
+        <a href="${href}" class="w-28 h-28 sm:w-32 sm:h-32
+            border border-base-content/20 rounded-box
+            hover:scale-105 hover:border-base-content/40
+            transition-all duration-200 ease-out
+            flex flex-col items-center justify-center gap-2
+            bg-base-200/50 hover:bg-base-200
+            group">
+            <span class="w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center"
+                  style="color: var(${colorVar})">
+                ${icon}
+            </span>
+            <span class="text-xs sm:text-sm font-medium text-base-content">
+                ${label}
+            </span>
+        </a>`;
+}
+```
+
+Note: `block` removed (overridden by `flex`); `group-hover:text-base-content` removed (no-op since already `text-base-content`).
+
+**Color variable mappings** (matching existing section colors from `app.css`):
+
+| Feature     | CSS Variable        | Notes |
+|-------------|---------------------|-------|
+| Dashboard   | `--color-dashboard` | cyan |
+| Nodes       | `--color-nodes`     | violet |
+| Adverts     | `--color-adverts`   | magenta |
+| Messages    | `--color-messages`  | teal |
+| Members     | `--color-members`   | orange |
+| Map         | `--color-map`       | yellow |
+| Custom Page | (none)              | Uses `base-content` (default text color) — no `colorVar` style attribute |
+
+**Updated hero section nav area:**
+
+```js
+<div class="flex flex-wrap justify-center gap-3 sm:gap-4 mt-auto">
+    ${features.dashboard !== false ? renderNavCard({
+        href: '/dashboard',
+        icon: iconDashboard('w-full h-full'),
+        label: t('entities.dashboard'),
+        colorVar: '--color-dashboard',
+    }) : nothing}
+    ${features.nodes !== false ? renderNavCard({
+        href: '/nodes',
+        icon: iconNodes('w-full h-full'),
+        label: t('entities.nodes'),
+        colorVar: '--color-nodes',
+    }) : nothing}
+    ${features.advertisements !== false ? renderNavCard({
+        href: '/advertisements',
+        icon: iconAdvertisements('w-full h-full'),
+        label: t('entities.advertisements'),
+        colorVar: '--color-adverts',
+    }) : nothing}
+    ${features.messages !== false ? renderNavCard({
+        href: '/messages',
+        icon: iconMessages('w-full h-full'),
+        label: t('entities.messages'),
+        colorVar: '--color-messages',
+    }) : nothing}
+    ${features.members !== false ? renderNavCard({
+        href: '/members',
+        icon: iconMembers('w-full h-full'),
+        label: t('entities.members'),
+        colorVar: '--color-members',
+    }) : nothing}
+    ${features.map !== false ? renderNavCard({
+        href: '/map',
+        icon: iconMap('w-full h-full'),
+        label: t('entities.map'),
+        colorVar: '--color-map',
+    }) : nothing}
+    ${features.pages !== false ? customPages.slice(0, 3).map(page => renderNavCard({
+        href: page.url,
+        icon: iconPage('w-full h-full'),
+        label: page.title,
+        colorVar: '',
+    })) : nothing}
+</div>
+```
+
+For custom pages: when `colorVar` is empty string, `style="color: var()"` is invalid CSS and the browser ignores it. The icon's `stroke="currentColor"` will inherit from the parent's `text-base-content`, which provides correct contrast in both themes. Alternatively, conditionally render the `style` attribute only when `colorVar` is truthy.
+
+#### B. Changes to `app.css` — Remove btn-outline hero overrides
+
+Remove these rules from `app.css` (lines 88–97):
+
+```css
+#app .btn-outline {
+    border-width: 2px;
+}
+#app .btn-outline:hover {
+    color: #fff !important;
+}
+.btn-hero-members {
+    --btn-color: var(--color-members);
+    --btn-border-color: var(--color-members);
+}
+```
+
+**Complete inventory of `btn-outline` usages affected by this removal:**
+
+| File | Line | Button | Visual change |
+|------|------|--------|---------------|
+| `home.js` | 62-87 | Hero nav buttons | Removed entirely (replaced by cards) |
+| `home.js` | 201, 205 | Attribution "Website" / "GitHub" | Thinner border, no forced white on hover |
+| `components.js` | 611 | Navbar "Login" button | Thinner border, no forced white on hover |
+| `not-found.js` | 19 | "View Nodes" button | Thinner border, no forced white on hover |
+| `node-detail.js` | 594 | "Release" button (adoption section) | Thinner border, no forced white on hover |
+| `map.js` | 115 | Popup "View Details" link | Thinner border, no forced white on hover |
+
+All affected buttons revert to DaisyUI v5's default `btn-outline` styling. **Verify visually** after removal — these buttons should look correct in both dark and light themes.
+
+#### C. Icon size considerations
+
+Icons in the current hero use `h-5 w-5 mr-2`. For the new cards, icons fill the container span (`w-8 h-8` on mobile, `sm:w-10 sm:h-10` on larger screens). Pass `'w-full h-full'` to each icon function so the SVG fills the span.
+
+All icon functions in `icons.js` follow the pattern:
+```js
+function iconFoo(cls = 'h-5 w-5') {
+    return html`<svg class=${cls} fill="none" viewBox="0 0 24 24" stroke="currentColor">...</svg>`;
+}
+```
+
+Verified: `iconDashboard`, `iconNodes`, `iconAdvertisements`, `iconMessages`, `iconMembers`, `iconMap`, `iconPage` all accept `cls` and use `stroke="currentColor"`.
+
+### Testing
+
+- Build frontend: `npm run build`
+- Visual check: all 6-9 nav cards render in a responsive grid
+- Verify hover animation works (scale + border color transition)
+- Verify dark/light mode: labels readable in both, icon colors from CSS vars
+- Verify custom page cards: icons visible (should use `base-content` color)
+- Check mobile layout: cards should wrap to 3-4 per row on small screens
+- Verify all `btn-outline` buttons listed in the inventory above look correct with DaisyUI defaults
+- Run `pytest tests/test_web/ -v`
+
+---
+
+## Implementation Order
+
+Apply changes bottom-to-top within each file to avoid line number drift:
+
+1. **Task 1** — Fix `form-control`/`label-text` in `node-detail.js` (JS handlers first, then template) and `map.js`
+2. **Task 2** — Redesign homepage hero buttons in `home.js` (add `renderNavCard`, update `renderHeroSection`) + remove CSS from `app.css`
+3. Build frontend: `npm run build`
+4. Run tests: `pytest tests/test_web/ -v`
+5. Run pre-commit: `pre-commit run --all-files`
+6. Manual visual verification in browser
+
+---
+
+## Risks / Mitigations
+
+| Risk | Mitigation |
+|------|-----------|
+| `.fieldset` has `font-size: 0.75rem` which cascades to children | Verify inputs/selects inside fieldset render at correct size; add `text-base` to inputs if needed |
+| Custom page labels may overflow small cards | Use `truncate` class on label text |
+| Map filter layout may shift with fieldset | Fieldset uses similar grid layout; verify visually |
+| `style="color: var()"` on custom page icons is invalid CSS | Conditionally render `style` attribute only when `colorVar` is truthy, or accept browser ignoring it (falls back to `currentColor`) |
+| Removing `#app .btn-outline` affects 6 non-hero buttons | All revert to DaisyUI defaults; verify visually in both themes |
diff --git a/docs/plans/20260505-1230-ui-fixes/tasks.md b/docs/plans/20260505-1230-ui-fixes/tasks.md
new file mode 100644
index 0000000..b69b924
--- /dev/null
+++ b/docs/plans/20260505-1230-ui-fixes/tasks.md
@@ -0,0 +1,49 @@
+# Tasks: DaisyUI v5 Form Class Migration + Homepage Hero Button Redesign
+
+**Plan:** [plan.md](plan.md)
+**Branch:** `chore/ui-fixes`
+
+---
+
+## 1. Fix `form-control` / `label-text` in `node-detail.js`
+
+### 1a. Update JS validation error handlers (bottom-to-top)
+
+- [ ] **Line 504** — Edit form API error: replace `innerHTML` with `textContent` + `classList.remove('hidden')`
+- [ ] **Line 496** — Edit form error clear: replace `innerHTML = ''` with `textContent = ''` + `classList.add('hidden')`
+- [ ] **Line 493** — Edit form validation error: replace `innerHTML` with `textContent` + `classList.remove('hidden')`
+- [ ] **Line 476** — Edit modal error clear (on modal open): replace `innerHTML = ''` with `textContent = ''` + `classList.add('hidden')`
+- [ ] **Line 449** — Add tag form error clear: replace `innerHTML = ''` with `textContent = ''` + `classList.add('hidden')`
+- [ ] **Line 446** — Add tag form validation error: replace `innerHTML` with `textContent` + `classList.remove('hidden')`
+
+### 1b. Replace template markup
+
+- [ ] **Lines 50–61** — Tag Edit Modal: replace `form-control` divs with `fieldset`, replace `<label class="label"><span class="label-text">` with `<label class="fieldset-label">`, replace `<label class="label" id="tagEditError">` with `<div class="hidden text-xs text-error" id="tagEditError">`
+- [ ] **Lines 228–233** — Add Tag Form: replace `form-control` divs with `fieldset`, replace `<label class="label" id="tagAddError">` with `<div class="hidden text-xs text-error" id="tagAddError">`
+
+## 2. Fix `form-control` / `label-text` in `map.js`
+
+- [ ] **Lines 198–238** — Map filters: replace all `form-control` divs with `fieldset`, replace `<label class="label py-1"><span class="label-text">` with `<label class="fieldset-label">`
+- [ ] **Lines 234–238** — Checkbox filter: replace `form-control` with `fieldset`, keep `cursor-pointer gap-2` on label
+
+## 3. Redesign homepage hero buttons in `home.js`
+
+- [ ] Add `renderNavCard()` function after `renderRadioConfig()` (line 28), before `renderHeroSection()` (line 30)
+- [ ] Update `renderHeroSection()` nav area: replace `btn btn-outline` links with `renderNavCard()` calls for all 6 features + custom pages
+
+## 4. Remove `btn-outline` CSS overrides from `app.css`
+
+- [ ] Remove `#app .btn-outline` rule (border-width + forced white hover)
+- [ ] Remove `.btn-hero-members` rule (color custom properties)
+
+## 5. Build and verify
+
+- [ ] `npm run build`
+- [ ] `pytest tests/test_web/ -v`
+- [ ] `pre-commit run --all-files`
+- [ ] Manual visual verification in browser (both dark and light themes):
+  - Node detail page: tag add/edit forms render correctly, errors show/hide
+  - Map page: filter controls render with proper spacing
+  - Homepage: 6-9 nav cards render in responsive grid, hover animation works
+  - Custom page cards: icons visible
+  - All `btn-outline` buttons (login, 404, release, attribution, popup details) look correct with DaisyUI defaults
diff --git a/src/meshcore_hub/web/static/css/app.css b/src/meshcore_hub/web/static/css/app.css
index b42f892..cbdbae7 100644
--- a/src/meshcore_hub/web/static/css/app.css
+++ b/src/meshcore_hub/web/static/css/app.css
@@ -84,18 +84,6 @@
     color: inherit !important;
 }
 
-/* Homepage hero buttons: slightly thicker outline, white text on hover */
-#app .btn-outline {
-    border-width: 2px;
-}
-#app .btn-outline:hover {
-    color: #fff !important;
-}
-.btn-hero-members {
-    --btn-color: var(--color-members);
-    --btn-border-color: var(--color-members);
-}
-
 /* ==========================================================================
    Panel Glow
    Radial color glow from bottom-right corner.
diff --git a/src/meshcore_hub/web/static/js/spa/pages/home.js b/src/meshcore_hub/web/static/js/spa/pages/home.js
index b36b19f..b03c092 100644
--- a/src/meshcore_hub/web/static/js/spa/pages/home.js
+++ b/src/meshcore_hub/web/static/js/spa/pages/home.js
@@ -27,6 +27,25 @@ function renderRadioConfig(rc) {
             </div>`);
 }
 
+function renderNavCard({ href, icon, label, colorVar }) {
+    return html`
+        <a href="${href}" class="w-28 h-28 sm:w-32 sm:h-32
+            border border-base-content/20 rounded-box
+            hover:scale-105 hover:border-base-content/40
+            transition-all duration-200 ease-out
+            flex flex-col items-center justify-center gap-2
+            bg-base-200/50 hover:bg-base-200
+            group">
+            <span class="w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center"
+                  style="${colorVar ? `color: var(${colorVar})` : ''}">
+                ${icon}
+            </span>
+            <span class="text-xs sm:text-sm font-medium text-base-content">
+                ${label}
+            </span>
+        </a>`;
+}
+
 function renderHeroSection({ networkName, logoUrl, logoInvertLight, networkCity, networkCountry, networkWelcomeText, features, customPages }) {
     const cityCountry = (networkCity && networkCountry)
         ? html`<p class="text-lg sm:text-2xl opacity-70 mt-2">${networkCity}, ${networkCountry}</p>`
@@ -38,14 +57,6 @@ function renderHeroSection({ networkName, logoUrl, logoInvertLight, networkCity,
             ${t('home.welcome_default', { network_name: networkName })}
         </p>`;
 
-    const customPageButtons = features.pages !== false
-        ? customPages.slice(0, 3).map(page => html`
-            <a href="${page.url}" class="btn btn-outline">
-                ${iconPage('h-5 w-5 mr-2')}
-                ${page.title}
-            </a>`)
-        : [];
-
     return html`
         <div class="flex flex-col items-center text-center">
             <div class="flex flex-col sm:flex-row items-center gap-4 sm:gap-8 mb-4">
@@ -57,39 +68,52 @@ function renderHeroSection({ networkName, logoUrl, logoInvertLight, networkCity,
             </div>
             ${welcomeText}
             <div class="flex-1"></div>
-            <div class="flex flex-wrap justify-center gap-3 mt-auto">
-                ${features.dashboard !== false ? html`
-                <a href="/dashboard" class="btn btn-outline btn-info">
-                    ${iconDashboard('h-5 w-5 mr-2')}
-                    ${t('entities.dashboard')}
-                </a>` : nothing}
-                ${features.nodes !== false ? html`
-                <a href="/nodes" class="btn btn-outline btn-primary">
-                    ${iconNodes('h-5 w-5 mr-2')}
-                    ${t('entities.nodes')}
-                </a>` : nothing}
-                ${features.advertisements !== false ? html`
-                <a href="/advertisements" class="btn btn-outline btn-secondary">
-                    ${iconAdvertisements('h-5 w-5 mr-2')}
-                    ${t('entities.advertisements')}
-                </a>` : nothing}
-                ${features.messages !== false ? html`
-                <a href="/messages" class="btn btn-outline btn-accent">
-                    ${iconMessages('h-5 w-5 mr-2')}
-                    ${t('entities.messages')}
-                </a>` : nothing}
-                ${features.members !== false ? html`
-                <a href="/members" class="btn btn-outline btn-hero-members">
-                    ${iconMembers('h-5 w-5 mr-2')}
-                    ${t('entities.members')}
-                </a>` : nothing}
-                ${features.map !== false ? html`
-                <a href="/map" class="btn btn-outline btn-warning">
-                    ${iconMap('h-5 w-5 mr-2')}
-                    ${t('entities.map')}
-                </a>` : nothing}
-                ${customPageButtons}
+            <div class="flex flex-wrap justify-center gap-3 sm:gap-4 mt-auto">
+                ${features.dashboard !== false ? renderNavCard({
+                    href: '/dashboard',
+                    icon: iconDashboard('w-full h-full'),
+                    label: t('entities.dashboard'),
+                    colorVar: '--color-dashboard',
+                }) : nothing}
+                ${features.nodes !== false ? renderNavCard({
+                    href: '/nodes',
+                    icon: iconNodes('w-full h-full'),
+                    label: t('entities.nodes'),
+                    colorVar: '--color-nodes',
+                }) : nothing}
+                ${features.advertisements !== false ? renderNavCard({
+                    href: '/advertisements',
+                    icon: iconAdvertisements('w-full h-full'),
+                    label: t('entities.advertisements'),
+                    colorVar: '--color-adverts',
+                }) : nothing}
+                ${features.messages !== false ? renderNavCard({
+                    href: '/messages',
+                    icon: iconMessages('w-full h-full'),
+                    label: t('entities.messages'),
+                    colorVar: '--color-messages',
+                }) : nothing}
+                ${features.members !== false ? renderNavCard({
+                    href: '/members',
+                    icon: iconMembers('w-full h-full'),
+                    label: t('entities.members'),
+                    colorVar: '--color-members',
+                }) : nothing}
+                ${features.map !== false ? renderNavCard({
+                    href: '/map',
+                    icon: iconMap('w-full h-full'),
+                    label: t('entities.map'),
+                    colorVar: '--color-map',
+                }) : nothing}
             </div>
+            ${features.pages !== false && customPages.length > 0 ? html`
+            <div class="flex flex-wrap justify-center gap-3 mt-4">
+                ${customPages.slice(0, 3).map(page => html`
+                <a href="${page.url}" class="btn btn-outline border-base-content/20">
+                    ${iconPage('h-5 w-5 mr-2')}
+                    ${page.title}
+                </a>`)}
+            </div>` : nothing}
         </div>`;
 }
 
diff --git a/src/meshcore_hub/web/static/js/spa/pages/map.js b/src/meshcore_hub/web/static/js/spa/pages/map.js
index d9c10bb..84a56c4 100644
--- a/src/meshcore_hub/web/static/js/spa/pages/map.js
+++ b/src/meshcore_hub/web/static/js/spa/pages/map.js
@@ -195,19 +195,15 @@ export async function render(container, params, router) {
 <div class="card shadow mb-6 panel-solid" style="--panel-color: var(--color-neutral)">
     <div class="card-body py-4">
         <div class="flex gap-4 flex-wrap items-end">
-            <div class="form-control">
-                <label class="label py-1">
-                    <span class="label-text">${t('common.show')}</span>
-                </label>
+            <div class="fieldset">
+                <label class="fieldset-label">${t('common.show')}</label>
                 <select id="filter-category" class="select select-bordered select-sm" @change=${applyFilters}>
                     <option value="">${t('common.all_entity', { entity: t('entities.nodes') })}</option>
                     ${config.oidc_enabled ? html`<option value="infra">${t('map.infrastructure_only')}</option>` : nothing}
                 </select>
             </div>
-            <div class="form-control">
-                <label class="label py-1">
-                    <span class="label-text">${t('common.node_type')}</span>
-                </label>
+            <div class="fieldset">
+                <label class="fieldset-label">${t('common.node_type')}</label>
                 <select id="filter-type" class="select select-bordered select-sm" @change=${applyFilters}>
                     <option value="">${t('common.all_types')}</option>
                     <option value="chat">${t('node_types.chat')}</option>
@@ -216,10 +212,8 @@ export async function render(container, params, router) {
                 </select>
             </div>
             ${config.oidc_enabled && profiles.length > 0 ? html`
-            <div class="form-control">
-                <label class="label py-1">
-                    <span class="label-text">${t('common.filter_member_label')}</span>
-                </label>
+            <div class="fieldset">
+                <label class="fieldset-label">${t('common.filter_member_label')}</label>
                 <select id="member-filter" class="select select-bordered select-sm" @change=${applyFilters}>
                     <option value="">${t('common.all_members')}</option>
                     ${profiles.sort((a, b) => {
@@ -231,9 +225,9 @@ export async function render(container, params, router) {
                 </select>
             </div>
             ` : nothing}
-            <div class="form-control">
-                <label class="label cursor-pointer gap-2 py-1">
-                    <span class="label-text">${t('map.show_labels')}</span>
+            <div class="fieldset">
+                <label class="fieldset-label cursor-pointer gap-2">
+                    <span>${t('map.show_labels')}</span>
                     <input type="checkbox" id="show-labels" class="checkbox checkbox-sm" @change=${updateLabelVisibility}>
                 </label>
             </div>
diff --git a/src/meshcore_hub/web/static/js/spa/pages/node-detail.js b/src/meshcore_hub/web/static/js/spa/pages/node-detail.js
index 3372355..0111289 100644
--- a/src/meshcore_hub/web/static/js/spa/pages/node-detail.js
+++ b/src/meshcore_hub/web/static/js/spa/pages/node-detail.js
@@ -47,13 +47,13 @@ function renderEditTagModal() {
         <h3 class="font-bold text-lg">${t('common.edit_entity', { entity: t('entities.tag') })}: <span id="tagEditKeyDisplay" class="font-mono text-base font-normal"></span></h3>
         <form id="tag-edit-form" class="py-4">
             <input type="hidden" id="tagEditKey">
-            <div class="form-control mb-4">
-                <label class="label"><span class="label-text">${t('common.value')}</span></label>
-                <input type="text" id="tagEditValue" class="input input-bordered">
-                <label class="label" id="tagEditError"></label>
+            <div class="fieldset mb-4">
+                <label class="fieldset-label">${t('common.value')}</label>
+                <input type="text" id="tagEditValue" class="input input-bordered w-full">
+                <div class="hidden text-xs text-error" id="tagEditError"></div>
             </div>
-            <div class="form-control mb-4">
-                <label class="label"><span class="label-text">${t('common.type')}</span></label>
+            <div class="fieldset mb-4">
+                <label class="fieldset-label">${t('common.type')}</label>
                 <select id="tagEditType" class="select select-bordered w-full">
                     <option value="string">string</option>
                     <option value="number">number</option>
@@ -225,12 +225,12 @@ export async function render(container, params, router) {
         const addTagFormHtml = canEditTags
             ? html`<form id="tag-add-form" class="mt-4">
                 <div class="grid grid-cols-1 sm:grid-cols-[1fr_1fr_auto_auto] gap-2 items-end">
-                    <div class="form-control">
-                        <input type="text" name="key" class="input input-bordered input-sm" placeholder=${t('common.key')} required>
+                    <div class="fieldset">
+                        <input type="text" name="key" class="input input-bordered input-sm w-full" placeholder=${t('common.key')} required>
                     </div>
-                    <div class="form-control">
-                        <input type="text" name="value" class="input input-bordered input-sm" placeholder=${t('common.value')}>
-                        <label class="label" id="tagAddError"></label>
+                    <div class="fieldset">
+                        <input type="text" name="value" class="input input-bordered input-sm w-full" placeholder=${t('common.value')}>
+                        <div class="hidden text-xs text-error" id="tagAddError"></div>
                     </div>
                     <select name="value_type" class="select select-bordered select-sm w-28">
                         <option value="string">string</option>
@@ -443,10 +443,10 @@ ${canEditTags ? renderEditTagModal() : nothing}`, container);
 
                     const validationError = validateTagValue(value, valueType);
                     if (validationError) {
-                        if (errEl) errEl.innerHTML = `<span class="label-text-alt text-error">${validationError}</span>`;
+                        if (errEl) { errEl.textContent = validationError; errEl.classList.remove('hidden'); }
                         return;
                     }
-                    if (errEl) errEl.innerHTML = '';
+                    if (errEl) { errEl.textContent = ''; errEl.classList.add('hidden'); }
 
                     try {
                         await apiPost('/api/v1/nodes/' + node.public_key + '/tags', { key, value, value_type: valueType });
@@ -473,7 +473,7 @@ ${canEditTags ? renderEditTagModal() : nothing}`, container);
                     if (keyDisplay) keyDisplay.textContent = btn.dataset.key;
                     valueInput.value = btn.dataset.value;
                     typeSelect.value = btn.dataset.type;
-                    if (errorLabel) errorLabel.innerHTML = '';
+                    if (errorLabel) { errorLabel.textContent = ''; errorLabel.classList.add('hidden'); }
                     modal.showModal();
                 }, { signal });
             });
@@ -490,10 +490,10 @@ ${canEditTags ? renderEditTagModal() : nothing}`, container);
 
                     const validationError = validateTagValue(value, valueType);
                     if (validationError) {
-                        if (errorLabel) errorLabel.innerHTML = `<span class="label-text-alt text-error">${validationError}</span>`;
+                        if (errorLabel) { errorLabel.textContent = validationError; errorLabel.classList.remove('hidden'); }
                         return;
                     }
-                    if (errorLabel) errorLabel.innerHTML = '';
+                    if (errorLabel) { errorLabel.textContent = ''; errorLabel.classList.add('hidden'); }
 
                     try {
                         await apiPut('/api/v1/nodes/' + node.public_key + '/tags/' + encodeURIComponent(key), { value, value_type: valueType });
@@ -501,7 +501,7 @@ ${canEditTags ? renderEditTagModal() : nothing}`, container);
                         showFlash('success', t('common.entity_updated_success', { entity: t('entities.tag') }));
                         router.navigate('/nodes/' + node.public_key, true);
                     } catch (err) {
-                        if (errorLabel) errorLabel.innerHTML = `<span class="label-text-alt text-error">${err.message}</span>`;
+                        if (errorLabel) { errorLabel.textContent = err.message; errorLabel.classList.remove('hidden'); }
                     }
                 }, { signal });
             }