Updated home page buttons

Updates
Fixed mobile menu
2026-03-28 17:42:56 +01:00 · 2026-02-07 14:51:48 +00:00 · 2026-02-07 14:47:12 +00:00 · 2026-02-07 14:40:17 +00:00 · 2026-02-07 14:32:44 +00:00 · 2026-02-07 13:45:42 +00:00
23 changed files with 1418 additions and 364 deletions
--- a/.github/workflows/claude.yml
+++ b/.github/workflows/claude.yml
@@ -1,49 +0,0 @@
-name: Claude Code
-
-on:
-  issue_comment:
-    types: [created]
-  pull_request_review_comment:
-    types: [created]
-  issues:
-    types: [opened, assigned]
-  pull_request_review:
-    types: [submitted]
-
-jobs:
-  claude:
-    if: |
-      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
-      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
-      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
-      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      pull-requests: read
-      issues: read
-      id-token: write
-      actions: read # Required for Claude to read CI results on PRs
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 1
-
-      - name: Run Claude Code
-        id: claude
-        uses: anthropics/claude-code-action@v1
-        with:
-          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
-
-          # This is an optional setting that allows Claude to read CI results on PRs
-          additional_permissions: |
-            actions: read
-
-          # Optional: Give a custom prompt to Claude. If this is not specified, Claude will perform the instructions specified in the comment that tagged it.
-          # prompt: 'Update the pull request description to include a summary of changes.'
-
-          # Optional: Add claude_args to customize behavior and configuration
-          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
-          # or https://docs.claude.com/en/docs/claude-code/cli-reference for available options
-          # claude_args: '--allowed-tools Bash(gh pr:*)'
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -455,6 +455,7 @@ See [PLAN.md](PLAN.md#configuration-environment-variables) for complete list.
 Key variables:
 - `DATA_HOME` - Base directory for runtime data (default: `./data`)
 - `SEED_HOME` - Directory containing seed data files (default: `./seed`)
+- `CONTENT_HOME` - Directory containing custom content (pages, media) (default: `./content`)
 - `MQTT_HOST`, `MQTT_PORT`, `MQTT_PREFIX` - MQTT broker connection
 - `MQTT_TLS` - Enable TLS/SSL for MQTT (default: `false`)
 - `API_READ_KEY`, `API_ADMIN_KEY` - API authentication keys
@@ -472,6 +473,31 @@ ${SEED_HOME}/
 └── members.yaml      # Network members list
 ```

+**Custom Content (`CONTENT_HOME`)** - Contains custom pages and media for the web dashboard:
+```
+${CONTENT_HOME}/
+├── pages/            # Custom markdown pages
+│   ├── about.md      # Example: About page (/pages/about)
+│   ├── faq.md        # Example: FAQ page (/pages/faq)
+│   └── getting-started.md # Example: Getting Started (/pages/getting-started)
+└── media/            # Custom media files
+    └── images/
+        └── logo.svg  # Custom logo (replaces default favicon and navbar/home logo)
+```
+
+Pages use YAML frontmatter for metadata:
+```markdown
+---
+title: About Us        # Browser tab title and nav link (not rendered on page)
+slug: about            # URL path (default: filename without .md)
+menu_order: 10         # Nav sort order (default: 100, lower = earlier)
+---
+
+# About Our Network
+
+Markdown content here (include your own heading)...
+```
+
 **Runtime Data (`DATA_HOME`)** - Contains runtime data (gitignored):
 ```
 ${DATA_HOME}/
--- a/README.md
+++ b/README.md
@@ -80,9 +80,13 @@ The quickest way to get started is running the entire stack on a single machine

 **Steps:**
 ```bash
-# Clone the repository
-git clone https://github.com/ipnet-mesh/meshcore-hub.git
+# Create a directory, download the Docker Compose file and
+# example environment configuration file
+
+mkdir meshcore-hub
 cd meshcore-hub
+wget https://raw.githubusercontent.com/ipnet-mesh/meshcore-hub/refs/heads/main/docker-compose.yml
+wget https://raw.githubusercontent.com/ipnet-mesh/meshcore-hub/refs/heads/main/.env.example

 # Copy and configure environment
 cp .env.example .env
@@ -156,9 +160,9 @@ This architecture allows:
 - Community members to contribute coverage with minimal setup
 - The central server to be hosted anywhere with internet access

-## Quick Start
+## Deployment

-### Using Docker Compose (Recommended)
+### Docker Compose Profiles

 Docker Compose uses **profiles** to select which services to run:

@@ -175,14 +179,6 @@ Docker Compose uses **profiles** to select which services to run:
 **Note:** Most deployments connect to an external MQTT broker. Add `--profile mqtt` only if you need a local broker.

 ```bash
-# Clone the repository
-git clone https://github.com/ipnet-mesh/meshcore-hub.git
-cd meshcore-hub
-
-# Copy and configure environment
-cp .env.example .env
-# Edit .env with your settings (API keys, serial port, network info)
-
 # Create database schema
 docker compose --profile migrate run --rm db-migrate

@@ -205,7 +201,7 @@ docker compose logs -f
 docker compose down
 ```

-#### Serial Device Access
+### Serial Device Access

 For production with real MeshCore devices, ensure the serial port is accessible:

@@ -221,13 +217,25 @@ SERIAL_PORT=/dev/ttyUSB0
 SERIAL_PORT_SENDER=/dev/ttyUSB1  # If using separate sender device
 ```

+**Tip:** If USB devices reconnect as different numeric IDs (e.g., `/dev/ttyUSB0` becomes `/dev/ttyUSB1`), use the stable `/dev/serial/by-id/` path instead:
+
+```bash
+# List available devices by ID
+ls -la /dev/serial/by-id/
+
+# Example output:
+# usb-Silicon_Labs_CP2102N_USB_to_UART_Bridge_abc123-if00-port0 -> ../../ttyUSB0
+
+# Configure using the stable ID
+SERIAL_PORT=/dev/serial/by-id/usb-Silicon_Labs_CP2102N_USB_to_UART_Bridge_abc123-if00-port0
+```
+
 ### Manual Installation

 ```bash
 # Create virtual environment
 python -m venv .venv
-source .venv/bin/activate  # Linux/macOS
-# .venv\Scripts\activate   # Windows
+source .venv/bin/activate

 # Install the package
 pip install -e ".[dev]"
@@ -242,57 +250,6 @@ meshcore-hub api
 meshcore-hub web
 ```

-## Updating an Existing Installation
-
-To update MeshCore Hub to the latest version:
-
-```bash
-# Navigate to your installation directory
-cd meshcore-hub
-
-# Pull the latest code
-git pull
-
-# Pull latest Docker images
-docker compose --profile all pull
-
-# Recreate and restart services
-# For receiver/sender only installs:
-docker compose --profile receiver up -d --force-recreate
-
-# For core services with MQTT:
-docker compose --profile mqtt --profile core up -d --force-recreate
-
-# For core services without local MQTT:
-docker compose --profile core up -d --force-recreate
-
-# For complete stack (all services):
-docker compose --profile mqtt --profile core --profile receiver up -d --force-recreate
-
-# View logs to verify update
-docker compose logs -f
-```
-
-**Note:** Database migrations run automatically on collector startup, so no manual migration step is needed when using Docker.
-
-For manual installations:
-
-```bash
-# Pull latest code
-git pull
-
-# Activate virtual environment
-source .venv/bin/activate
-
-# Update dependencies
-pip install -e ".[dev]"
-
-# Run database migrations
-meshcore-hub db upgrade
-
-# Restart your services
-```
-
 ## Configuration

 All components are configured via environment variables. Create a `.env` file or export variables:
@@ -319,11 +276,7 @@ All components are configured via environment variables. Create a `.env` file or
 | `SERIAL_BAUD` | `115200` | Serial baud rate |
 | `MESHCORE_DEVICE_NAME` | *(none)* | Device/node name set on startup (broadcast in advertisements) |

-### Collector Settings
-
-The database is stored in `{DATA_HOME}/collector/meshcore.db` by default.
-
-#### Webhook Configuration
+### Webhooks

 The collector can forward certain events to external HTTP endpoints:

@@ -348,7 +301,7 @@ Webhook payload format:
 }
 ```

-#### Data Retention
+### Data Retention

 The collector automatically cleans up old event data and inactive nodes:

@@ -385,51 +338,74 @@ The collector automatically cleans up old event data and inactive nodes:
 | `NETWORK_CONTACT_EMAIL` | *(none)* | Contact email address |
 | `NETWORK_CONTACT_DISCORD` | *(none)* | Discord server link |
 | `NETWORK_CONTACT_GITHUB` | *(none)* | GitHub repository URL |
+| `CONTENT_HOME` | `./content` | Directory containing custom content (pages/, media/) |

-## CLI Reference
+### Custom Content

+The web dashboard supports custom content including markdown pages and media files. Content is organized in subdirectories:
+
+```
+content/
+├── pages/     # Custom markdown pages
+│   └── about.md
+└── media/     # Custom media files
+    └── images/
+        └── logo.svg   # Custom logo (replaces favicon and navbar/home logo)
+```
+
+**Setup:**
 ```bash
-# Show help
-meshcore-hub --help
+# Create content directory structure
+mkdir -p content/pages content/media

-# Interface component
-meshcore-hub interface --mode receiver --port /dev/ttyUSB0
-meshcore-hub interface --mode receiver --device-name "Gateway Node"  # Set device name
-meshcore-hub interface --mode sender --mock  # Use mock device
+# Create a custom page
+cat > content/pages/about.md << 'EOF'
+---
+title: About Us
+slug: about
+menu_order: 10
+---

-# Collector component
-meshcore-hub collector                          # Run collector
-meshcore-hub collector seed                     # Import all seed data from SEED_HOME
-meshcore-hub collector import-tags              # Import node tags from SEED_HOME/node_tags.yaml
-meshcore-hub collector import-tags /path/to/file.yaml  # Import from specific file
-meshcore-hub collector import-members           # Import members from SEED_HOME/members.yaml
-meshcore-hub collector import-members /path/to/file.yaml  # Import from specific file
+# About Our Network

-# API component
-meshcore-hub api --host 0.0.0.0 --port 8000
+Welcome to our MeshCore mesh network!

-# Web dashboard
-meshcore-hub web --port 8080 --network-name "My Network"
+## Getting Started

-# Database management
-meshcore-hub db upgrade      # Run migrations
-meshcore-hub db downgrade    # Rollback one migration
-meshcore-hub db current      # Show current revision
+1. Get a compatible LoRa device
+2. Flash MeshCore firmware
+3. Configure your radio settings
+EOF
+```
+
+**Frontmatter fields:**
+| Field | Default | Description |
+|-------|---------|-------------|
+| `title` | Filename titlecased | Browser tab title and navigation link text (not rendered on page) |
+| `slug` | Filename without `.md` | URL path (e.g., `about` → `/pages/about`) |
+| `menu_order` | `100` | Sort order in navigation (lower = earlier) |
+
+The markdown content is rendered as-is, so include your own `# Heading` if desired.
+
+Pages automatically appear in the navigation menu and sitemap. With Docker, mount the content directory:
+
+```yaml
+# docker-compose.yml (already configured)
+volumes:
+  - ${CONTENT_HOME:-./content}:/content:ro
+environment:
+  - CONTENT_HOME=/content
 ```

 ## Seed Data

 The database can be seeded with node tags and network members from YAML files in the `SEED_HOME` directory (default: `./seed`).

-### Running the Seed Process
+#### Running the Seed Process

 Seeding is a separate process and must be run explicitly:

 ```bash
-# Native CLI
-meshcore-hub collector seed
-
-# With Docker Compose
 docker compose --profile seed up
 ```

@@ -437,7 +413,7 @@ This imports data from the following files (if they exist):
 - `{SEED_HOME}/node_tags.yaml` - Node tag definitions
 - `{SEED_HOME}/members.yaml` - Network member definitions

-### Directory Structure
+#### Directory Structure

 ```
 seed/                          # SEED_HOME (seed data files)
@@ -451,11 +427,11 @@ data/                          # DATA_HOME (runtime data)

 Example seed files are provided in `example/seed/`.

-## Node Tags
+### Node Tags

 Node tags allow you to attach custom metadata to nodes (e.g., location, role, owner). Tags are stored in the database and returned with node data via the API.

-### Node Tags YAML Format
+#### Node Tags YAML Format

 Tags are keyed by public key in YAML format:

@@ -484,24 +460,11 @@ Tag values can be:

 Supported types: `string`, `number`, `boolean`

-### Import Tags Manually
-
-```bash
-# Import from default location ({SEED_HOME}/node_tags.yaml)
-meshcore-hub collector import-tags
-
-# Import from specific file
-meshcore-hub collector import-tags /path/to/node_tags.yaml
-
-# Skip tags for nodes that don't exist
-meshcore-hub collector import-tags --no-create-nodes
-```
-
-## Network Members
+### Network Members

 Network members represent the people operating nodes in your network. Members can optionally be linked to nodes via their public key.

-### Members YAML Format
+#### Members YAML Format

 ```yaml
 - member_id: walshie86
@@ -526,44 +489,6 @@ Network members represent the people operating nodes in your network. Members ca
 | `contact` | No | Contact information |
 | `public_key` | No | Associated node public key (64-char hex) |

-### Import Members Manually
-
-```bash
-# Import from default location ({SEED_HOME}/members.yaml)
-meshcore-hub collector import-members
-
-# Import from specific file
-meshcore-hub collector import-members /path/to/members.yaml
-```
-
-### Managing Tags via API
-
-Tags can also be managed via the REST API:
-
-```bash
-# List tags for a node
-curl http://localhost:8000/api/v1/nodes/{public_key}/tags
-
-# Create a tag (requires admin key)
-curl -X POST \
-  -H "Authorization: Bearer <API_ADMIN_KEY>" \
-  -H "Content-Type: application/json" \
-  -d '{"key": "location", "value": "Building A"}' \
-  http://localhost:8000/api/v1/nodes/{public_key}/tags
-
-# Update a tag
-curl -X PUT \
-  -H "Authorization: Bearer <API_ADMIN_KEY>" \
-  -H "Content-Type: application/json" \
-  -d '{"value": "Building B"}' \
-  http://localhost:8000/api/v1/nodes/{public_key}/tags/location
-
-# Delete a tag
-curl -X DELETE \
-  -H "Authorization: Bearer <API_ADMIN_KEY>" \
-  http://localhost:8000/api/v1/nodes/{public_key}/tags/location
-```
-
 ## API Documentation

 When running, the API provides interactive documentation at:
@@ -675,10 +600,19 @@ meshcore-hub/
 ├── alembic/                # Database migrations
 ├── etc/                    # Configuration files (mosquitto.conf)
 ├── example/                # Example files for testing
-│   └── seed/               # Example seed data files
-│       ├── node_tags.yaml  # Example node tags
-│       └── members.yaml    # Example network members
+│   ├── seed/               # Example seed data files
+│   │   ├── node_tags.yaml  # Example node tags
+│   │   └── members.yaml    # Example network members
+│   └── content/            # Example custom content
+│       ├── pages/          # Example custom pages
+│       │   └── about.md    # Example about page
+│       └── media/          # Example media files
+│           └── images/     # Custom images
 ├── seed/                   # Seed data directory (SEED_HOME, copy from example/seed/)
+├── content/                # Custom content directory (CONTENT_HOME, optional)
+│   ├── pages/              # Custom markdown pages
+│   └── media/              # Custom media files
+│       └── images/         # Custom images (logo.svg replaces default logo)
 ├── data/                   # Runtime data directory (DATA_HOME, created at runtime)
 ├── Dockerfile              # Docker build configuration
 ├── docker-compose.yml      # Docker Compose services
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -14,7 +14,7 @@ services:
      - "${MQTT_EXTERNAL_PORT:-1883}:1883"
      - "${MQTT_WS_PORT:-9001}:9001"
    volumes:
-      - ./etc/mosquitto.conf:/mosquitto/config/mosquitto.conf:ro
+      # - ./etc/mosquitto.conf:/mosquitto/config/mosquitto.conf:ro
      - mosquitto_data:/mosquitto/data
      - mosquitto_log:/mosquitto/log
    healthcheck:
@@ -142,7 +142,7 @@ services:
      db-migrate:
        condition: service_completed_successfully
    volumes:
-      - ${DATA_HOME:-./data}:/data
+      - hub_data:/data
      - ${SEED_HOME:-./seed}:/seed
    environment:
      - LOG_LEVEL=${LOG_LEVEL:-INFO}
@@ -154,8 +154,6 @@ services:
      - MQTT_TLS=${MQTT_TLS:-false}
      - DATA_HOME=/data
      - SEED_HOME=/seed
-      # Explicitly unset to use DATA_HOME-based default path
-      - DATABASE_URL=
      # Webhook configuration
      - WEBHOOK_ADVERTISEMENT_URL=${WEBHOOK_ADVERTISEMENT_URL:-}
      - WEBHOOK_ADVERTISEMENT_SECRET=${WEBHOOK_ADVERTISEMENT_SECRET:-}
@@ -203,8 +201,7 @@ services:
    ports:
      - "${API_PORT:-8000}:8000"
    volumes:
-      # Mount data directory (uses collector/meshcore.db)
-      - ${DATA_HOME:-./data}:/data
+      - hub_data:/data
    environment:
      - LOG_LEVEL=${LOG_LEVEL:-INFO}
      - MQTT_HOST=${MQTT_HOST:-mqtt}
@@ -214,8 +211,6 @@ services:
      - MQTT_PREFIX=${MQTT_PREFIX:-meshcore}
      - MQTT_TLS=${MQTT_TLS:-false}
      - DATA_HOME=/data
-      # Explicitly unset to use DATA_HOME-based default path
-      - DATABASE_URL=
      - API_HOST=0.0.0.0
      - API_PORT=8000
      - API_READ_KEY=${API_READ_KEY:-}
@@ -246,6 +241,8 @@ services:
        condition: service_healthy
    ports:
      - "${WEB_PORT:-8080}:8080"
+    volumes:
+      - ${CONTENT_HOME:-./content}:/content:ro
    environment:
      - LOG_LEVEL=${LOG_LEVEL:-INFO}
      - API_BASE_URL=http://api:8000
@@ -263,6 +260,7 @@ services:
      - NETWORK_CONTACT_DISCORD=${NETWORK_CONTACT_DISCORD:-}
      - NETWORK_CONTACT_GITHUB=${NETWORK_CONTACT_GITHUB:-}
      - NETWORK_WELCOME_TEXT=${NETWORK_WELCOME_TEXT:-}
+      - CONTENT_HOME=/content
    command: ["web"]
    healthcheck:
      test: ["CMD", "python", "-c", "import urllib.request; urllib.request.urlopen('http://localhost:8080/health')"]
@@ -286,12 +284,9 @@ services:
      - migrate
    restart: "no"
    volumes:
-      # Mount data directory (uses collector/meshcore.db)
-      - ${DATA_HOME:-./data}:/data
+      - hub_data:/data
    environment:
      - DATA_HOME=/data
-      # Explicitly unset to use DATA_HOME-based default path
-      - DATABASE_URL=
    command: ["db", "upgrade"]

  # ==========================================================================
@@ -309,20 +304,13 @@ services:
    profiles:
      - seed
    restart: "no"
-    depends_on:
-      db-migrate:
-        condition: service_completed_successfully
    volumes:
-      # Mount data directory for database (read-write)
-      - ${DATA_HOME:-./data}:/data
-      # Mount seed directory for seed files (read-only)
+      - hub_data:/data
      - ${SEED_HOME:-./seed}:/seed:ro
    environment:
      - DATA_HOME=/data
      - SEED_HOME=/seed
      - LOG_LEVEL=${LOG_LEVEL:-INFO}
-      # Explicitly unset to use DATA_HOME-based default path
-      - DATABASE_URL=
    # Imports both node_tags.yaml and members.yaml if they exist
    command: ["collector", "seed"]

@@ -330,6 +318,8 @@ services:
 # Volumes
 # ==========================================================================
 volumes:
+  hub_data:
+    name: meshcore_hub_data
  mosquitto_data:
    name: meshcore_mosquitto_data
  mosquitto_log:
--- a/example/content/media/images/logo_ipnet.svg
+++ b/example/content/media/images/logo_ipnet.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 115 100"
+   width="115"
+   height="100"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="logo-dark.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="namedview4"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1" />
+  <!-- I letter - muted -->
+  <rect
+     x="0"
+     y="0"
+     width="25"
+     height="100"
+     rx="2"
+     fill="#ffffff"
+     opacity="0.5"
+     id="rect1" />
+  <!-- P vertical stem -->
+  <rect
+     x="35"
+     y="0"
+     width="25"
+     height="100"
+     rx="2"
+     fill="#ffffff"
+     id="rect2" />
+  <!-- WiFi arcs: center at mid-stem (90, 60), sweeping from right up to top -->
+  <g
+     fill="none"
+     stroke="#ffffff"
+     stroke-width="10"
+     stroke-linecap="round"
+     id="g4"
+     transform="translate(-30,-10)">
+    <path
+       d="M 110,65 A 20,20 0 0 0 90,45"
+       id="path2" />
+    <path
+       d="M 125,65 A 35,35 0 0 0 90,30"
+       id="path3" />
+    <path
+       d="M 140,65 A 50,50 0 0 0 90,15"
+       id="path4" />
+  </g>
+</svg>
--- a/example/content/pages/join.md
+++ b/example/content/pages/join.md
@@ -0,0 +1,87 @@
+---
+title: Join
+slug: join
+menu_order: 10
+---
+
+# Getting Started with MeshCore
+
+MeshCore is an open-source off-grid LoRa mesh networking platform. This guide will help you get connected to the network.
+
+For detailed documentation, see the [MeshCore FAQ](https://github.com/meshcore-dev/MeshCore/blob/main/docs/faq.md).
+
+## Node Types
+
+MeshCore devices operate in different modes:
+
+| Mode | Description |
+|------|-------------|
+| **Companion** | Connects to your phone via Bluetooth. Use this for messaging and interacting with the network. |
+| **Repeater** | Standalone node that extends network coverage. Place these in elevated locations for best results. |
+| **Room Server** | Hosts chat rooms that persist messages for offline users. |
+
+Most users start with a **Companion** node paired to their phone.
+
+## Frequency Regulations
+
+MeshCore uses LoRa radio, which operates on unlicensed ISM bands. You **must** use the correct frequency for your region:
+
+| Region | Frequency | Notes |
+|--------|-----------|-------|
+| Europe (EU) | 868 MHz | EU868 band |
+| United Kingdom | 868 MHz | Same as EU |
+| North America | 915 MHz | US915 band |
+| Australia | 915 MHz | AU915 band |
+
+Using the wrong frequency is illegal and may cause interference. Check your local regulations.
+
+## Compatible Hardware
+
+MeshCore runs on inexpensive low-power LoRa devices. Popular options include:
+
+### Recommended Devices
+
+| Device | Manufacturer | Features |
+|--------|--------------|----------|
+| [Heltec V3](https://heltec.org/project/wifi-lora-32-v3/) | Heltec | Budget-friendly, OLED display |
+| [T114](https://heltec.org/project/mesh-node-t114/) | Heltec | Compact, GPS, colour display |
+| [T1000-E](https://www.seeedstudio.com/SenseCAP-Card-Tracker-T1000-E-for-Meshtastic-p-5913.html) | Seeed Studio | Credit-card sized, GPS, weatherproof |
+| [T-Deck Plus](https://www.lilygo.cc/products/t-deck-plus) | LilyGO | Built-in keyboard, touchscreen, GPS |
+
+Ensure you purchase the correct frequency variant (868MHz for EU/UK, 915MHz for US/AU).
+
+### Where to Buy
+
+- **Heltec**: [Official Store](https://heltec.org/) or AliExpress
+- **LilyGO**: [Official Store](https://lilygo.cc/) or AliExpress
+- **Seeed Studio**: [Official Store](https://www.seeedstudio.com/)
+- **Amazon**: Search for device name + "LoRa 868" (or 915 for US)
+
+## Mobile Apps
+
+Connect to your Companion node using the official MeshCore apps:
+
+| Platform | App | Link |
+|----------|-----|------|
+| Android | MeshCore | [Google Play](https://play.google.com/store/apps/details?id=com.liamcottle.meshcore.android) |
+| iOS | MeshCore | [App Store](https://apps.apple.com/us/app/meshcore/id6742354151) |
+
+The app connects via Bluetooth to your Companion node, allowing you to send messages, view the network, and configure your device.
+
+## Flashing Firmware
+
+1. Use the [MeshCore Web Flasher](https://flasher.meshcore.co.uk/) for easy browser-based flashing
+2. Select your device type and region (frequency)
+3. Connect via USB and flash
+
+## Next Steps
+
+Once your device is flashed and paired:
+
+1. Open the MeshCore app on your phone
+2. Enable Bluetooth and pair with your device
+3. Set your node name in the app settings
+4. Configure your radio settings/profile for your region
+4. You should start seeing other nodes on the network
+
+Welcome to the mesh!
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -39,6 +39,8 @@ dependencies = [
    "aiosqlite>=0.19.0",
    "meshcore>=2.2.0",
    "pyyaml>=6.0.0",
+    "python-frontmatter>=1.0.0",
+    "markdown>=3.5.0",
 ]

 [project.optional-dependencies]
@@ -111,6 +113,8 @@ module = [
    "uvicorn.*",
    "alembic.*",
    "meshcore.*",
+    "frontmatter.*",
+    "markdown.*",
 ]
 ignore_missing_imports = true

--- a/src/meshcore_hub/api/routes/nodes.py
+++ b/src/meshcore_hub/api/routes/nodes.py
@@ -23,6 +23,7 @@ async def list_nodes(
    ),
    adv_type: Optional[str] = Query(None, description="Filter by advertisement type"),
    member_id: Optional[str] = Query(None, description="Filter by member_id tag value"),
+    role: Optional[str] = Query(None, description="Filter by role tag value"),
    limit: int = Query(50, ge=1, le=500, description="Page size"),
    offset: int = Query(0, ge=0, description="Page offset"),
 ) -> NodeList:
@@ -59,6 +60,16 @@ async def list_nodes(
            )
        )

+    if role:
+        # Filter nodes that have a role tag with the specified value
+        query = query.where(
+            Node.id.in_(
+                select(NodeTag.node_id).where(
+                    NodeTag.key == "role", NodeTag.value == role
+                )
+            )
+        )
+
    # Get total count
    count_query = select(func.count()).select_from(query.subquery())
    total = session.execute(count_query).scalar() or 0
--- a/src/meshcore_hub/common/config.py
+++ b/src/meshcore_hub/common/config.py
@@ -295,6 +295,33 @@ class WebSettings(CommonSettings):
        default=None, description="Welcome text for homepage"
    )

+    # Content directory (contains pages/ and media/ subdirectories)
+    content_home: Optional[str] = Field(
+        default=None,
+        description="Directory containing custom content (pages/, media/) (default: ./content)",
+    )
+
+    @property
+    def effective_content_home(self) -> str:
+        """Get the effective content home directory."""
+        from pathlib import Path
+
+        return str(Path(self.content_home or "./content"))
+
+    @property
+    def effective_pages_home(self) -> str:
+        """Get the effective pages directory (content_home/pages)."""
+        from pathlib import Path
+
+        return str(Path(self.effective_content_home) / "pages")
+
+    @property
+    def effective_media_home(self) -> str:
+        """Get the effective media directory (content_home/media)."""
+        from pathlib import Path
+
+        return str(Path(self.effective_content_home) / "media")
+
    @property
    def web_data_dir(self) -> str:
        """Get the web data directory path."""
--- a/src/meshcore_hub/web/app.py
+++ b/src/meshcore_hub/web/app.py
@@ -7,13 +7,14 @@ from typing import AsyncGenerator

 import httpx
 from fastapi import FastAPI, Request
-from fastapi.responses import HTMLResponse
+from fastapi.responses import HTMLResponse, PlainTextResponse, Response
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 from starlette.exceptions import HTTPException as StarletteHTTPException

 from meshcore_hub import __version__
 from meshcore_hub.common.schemas import RadioConfig
+from meshcore_hub.web.pages import PageLoader

 logger = logging.getLogger(__name__)

@@ -126,10 +127,28 @@ def create_app(
    templates = Jinja2Templates(directory=str(TEMPLATES_DIR))
    app.state.templates = templates

+    # Initialize page loader for custom markdown pages
+    page_loader = PageLoader(settings.effective_pages_home)
+    page_loader.load_pages()
+    app.state.page_loader = page_loader
+
+    # Check for custom logo and store media path
+    media_home = Path(settings.effective_media_home)
+    custom_logo_path = media_home / "images" / "logo.svg"
+    if custom_logo_path.exists():
+        app.state.logo_url = "/media/images/logo.svg"
+        logger.info(f"Using custom logo from {custom_logo_path}")
+    else:
+        app.state.logo_url = "/static/img/logo.svg"
+
    # Mount static files
    if STATIC_DIR.exists():
        app.mount("/static", StaticFiles(directory=str(STATIC_DIR)), name="static")

+    # Mount custom media files if directory exists
+    if media_home.exists() and media_home.is_dir():
+        app.mount("/media", StaticFiles(directory=str(media_home)), name="media")
+
    # Include routers
    from meshcore_hub.web.routes import web_router

@@ -152,6 +171,91 @@ def create_app(
        except Exception as e:
            return {"status": "not_ready", "api": str(e)}

+    def _get_https_base_url(request: Request) -> str:
+        """Get base URL, ensuring HTTPS is used for public-facing URLs."""
+        base_url = str(request.base_url).rstrip("/")
+        # Ensure HTTPS for sitemaps and robots.txt (SEO requires canonical URLs)
+        if base_url.startswith("http://"):
+            base_url = "https://" + base_url[7:]
+        return base_url
+
+    @app.get("/robots.txt", response_class=PlainTextResponse)
+    async def robots_txt(request: Request) -> str:
+        """Serve robots.txt to control search engine crawling."""
+        base_url = _get_https_base_url(request)
+        return f"User-agent: *\nDisallow:\n\nSitemap: {base_url}/sitemap.xml\n"
+
+    @app.get("/sitemap.xml")
+    async def sitemap_xml(request: Request) -> Response:
+        """Generate dynamic sitemap including all node pages."""
+        base_url = _get_https_base_url(request)
+
+        # Static pages
+        static_pages = [
+            ("", "daily", "1.0"),
+            ("/dashboard", "hourly", "0.9"),
+            ("/nodes", "hourly", "0.9"),
+            ("/advertisements", "hourly", "0.8"),
+            ("/messages", "hourly", "0.8"),
+            ("/map", "daily", "0.7"),
+            ("/members", "weekly", "0.6"),
+        ]
+
+        urls = []
+        for path, changefreq, priority in static_pages:
+            urls.append(
+                f"  <url>\n"
+                f"    <loc>{base_url}{path}</loc>\n"
+                f"    <changefreq>{changefreq}</changefreq>\n"
+                f"    <priority>{priority}</priority>\n"
+                f"  </url>"
+            )
+
+        # Fetch infrastructure nodes for dynamic pages
+        try:
+            response = await request.app.state.http_client.get(
+                "/api/v1/nodes", params={"limit": 500, "role": "infra"}
+            )
+            if response.status_code == 200:
+                nodes = response.json().get("items", [])
+                for node in nodes:
+                    public_key = node.get("public_key")
+                    if public_key:
+                        # Use 8-char prefix (route handles redirect to full key)
+                        urls.append(
+                            f"  <url>\n"
+                            f"    <loc>{base_url}/nodes/{public_key[:8]}</loc>\n"
+                            f"    <changefreq>daily</changefreq>\n"
+                            f"    <priority>0.5</priority>\n"
+                            f"  </url>"
+                        )
+            else:
+                logger.warning(
+                    f"Failed to fetch nodes for sitemap: {response.status_code}"
+                )
+        except Exception as e:
+            logger.warning(f"Failed to fetch nodes for sitemap: {e}")
+
+        # Add custom pages to sitemap
+        page_loader = request.app.state.page_loader
+        for page in page_loader.get_menu_pages():
+            urls.append(
+                f"  <url>\n"
+                f"    <loc>{base_url}{page.url}</loc>\n"
+                f"    <changefreq>weekly</changefreq>\n"
+                f"    <priority>0.6</priority>\n"
+                f"  </url>"
+            )
+
+        xml = (
+            '<?xml version="1.0" encoding="UTF-8"?>\n'
+            '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n'
+            + "\n".join(urls)
+            + "\n</urlset>"
+        )
+
+        return Response(content=xml, media_type="application/xml")
+
    @app.exception_handler(StarletteHTTPException)
    async def http_exception_handler(
        request: Request, exc: StarletteHTTPException
@@ -186,6 +290,10 @@ def get_network_context(request: Request) -> dict:
        request.app.state.network_radio_config
    )

+    # Get custom pages for navigation
+    page_loader = request.app.state.page_loader
+    custom_pages = page_loader.get_menu_pages()
+
    return {
        "network_name": request.app.state.network_name,
        "network_city": request.app.state.network_city,
@@ -196,5 +304,7 @@ def get_network_context(request: Request) -> dict:
        "network_contact_github": request.app.state.network_contact_github,
        "network_welcome_text": request.app.state.network_welcome_text,
        "admin_enabled": request.app.state.admin_enabled,
+        "custom_pages": custom_pages,
+        "logo_url": request.app.state.logo_url,
        "version": __version__,
    }
--- a/src/meshcore_hub/web/pages.py
+++ b/src/meshcore_hub/web/pages.py
@@ -0,0 +1,119 @@
+"""Custom markdown pages loader for MeshCore Hub Web Dashboard."""
+
+import logging
+from dataclasses import dataclass
+from pathlib import Path
+from typing import Optional
+
+import frontmatter
+import markdown
+
+logger = logging.getLogger(__name__)
+
+
+@dataclass
+class CustomPage:
+    """Represents a custom markdown page."""
+
+    slug: str
+    title: str
+    menu_order: int
+    content_html: str
+    file_path: str
+
+    @property
+    def url(self) -> str:
+        """Get the URL path for this page."""
+        return f"/pages/{self.slug}"
+
+
+class PageLoader:
+    """Loads and manages custom markdown pages from a directory."""
+
+    def __init__(self, pages_dir: str) -> None:
+        """Initialize the page loader.
+
+        Args:
+            pages_dir: Path to the directory containing markdown pages.
+        """
+        self.pages_dir = Path(pages_dir)
+        self._pages: dict[str, CustomPage] = {}
+        self._md = markdown.Markdown(
+            extensions=["tables", "fenced_code", "toc"],
+            output_format="html",
+        )
+
+    def load_pages(self) -> None:
+        """Load all markdown pages from the pages directory."""
+        self._pages.clear()
+
+        if not self.pages_dir.exists():
+            logger.debug(f"Pages directory does not exist: {self.pages_dir}")
+            return
+
+        if not self.pages_dir.is_dir():
+            logger.warning(f"Pages path is not a directory: {self.pages_dir}")
+            return
+
+        for md_file in self.pages_dir.glob("*.md"):
+            try:
+                page = self._load_page(md_file)
+                if page:
+                    self._pages[page.slug] = page
+                    logger.info(f"Loaded custom page: {page.slug} ({md_file.name})")
+            except Exception as e:
+                logger.error(f"Failed to load page {md_file}: {e}")
+
+        logger.info(f"Loaded {len(self._pages)} custom page(s)")
+
+    def _load_page(self, file_path: Path) -> Optional[CustomPage]:
+        """Load a single markdown page.
+
+        Args:
+            file_path: Path to the markdown file.
+
+        Returns:
+            CustomPage instance or None if loading failed.
+        """
+        content = file_path.read_text(encoding="utf-8")
+        post = frontmatter.loads(content)
+
+        # Extract frontmatter fields
+        slug = post.get("slug", file_path.stem)
+        title = post.get("title", slug.replace("-", " ").replace("_", " ").title())
+        menu_order = post.get("menu_order", 100)
+
+        # Convert markdown to HTML
+        self._md.reset()
+        content_html = self._md.convert(post.content)
+
+        return CustomPage(
+            slug=slug,
+            title=title,
+            menu_order=menu_order,
+            content_html=content_html,
+            file_path=str(file_path),
+        )
+
+    def get_page(self, slug: str) -> Optional[CustomPage]:
+        """Get a page by its slug.
+
+        Args:
+            slug: The page slug.
+
+        Returns:
+            CustomPage instance or None if not found.
+        """
+        return self._pages.get(slug)
+
+    def get_menu_pages(self) -> list[CustomPage]:
+        """Get all pages sorted by menu_order for navigation.
+
+        Returns:
+            List of CustomPage instances sorted by menu_order.
+        """
+        return sorted(self._pages.values(), key=lambda p: (p.menu_order, p.title))
+
+    def reload(self) -> None:
+        """Reload all pages from disk."""
+        self.load_pages()
--- a/src/meshcore_hub/web/routes/init.py
+++ b/src/meshcore_hub/web/routes/init.py
@@ -3,25 +3,27 @@
 from fastapi import APIRouter

 from meshcore_hub.web.routes.home import router as home_router
-from meshcore_hub.web.routes.network import router as network_router
+from meshcore_hub.web.routes.dashboard import router as dashboard_router
 from meshcore_hub.web.routes.nodes import router as nodes_router
 from meshcore_hub.web.routes.messages import router as messages_router
 from meshcore_hub.web.routes.advertisements import router as advertisements_router
 from meshcore_hub.web.routes.map import router as map_router
 from meshcore_hub.web.routes.members import router as members_router
 from meshcore_hub.web.routes.admin import router as admin_router
+from meshcore_hub.web.routes.pages import router as pages_router

 # Create main web router
 web_router = APIRouter()

 # Include all sub-routers
 web_router.include_router(home_router)
-web_router.include_router(network_router)
+web_router.include_router(dashboard_router)
 web_router.include_router(nodes_router)
 web_router.include_router(messages_router)
 web_router.include_router(advertisements_router)
 web_router.include_router(map_router)
 web_router.include_router(members_router)
 web_router.include_router(admin_router)
+web_router.include_router(pages_router)

 __all__ = ["web_router"]
--- a/src/meshcore_hub/web/routes/dashboard.py
+++ b/src/meshcore_hub/web/routes/dashboard.py
@@ -1,4 +1,4 @@
-"""Network overview page route."""
+"""Dashboard page route."""

 import json
 import logging
@@ -12,9 +12,9 @@ logger = logging.getLogger(__name__)
 router = APIRouter()


-@router.get("/network", response_class=HTMLResponse)
-async def network_overview(request: Request) -> HTMLResponse:
-    """Render the network overview page."""
+@router.get("/dashboard", response_class=HTMLResponse)
+async def dashboard(request: Request) -> HTMLResponse:
+    """Render the dashboard page."""
    templates = get_templates(request)
    context = get_network_context(request)
    context["request"] = request
@@ -76,4 +76,4 @@ async def network_overview(request: Request) -> HTMLResponse:
    context["message_activity_json"] = json.dumps(message_activity)
    context["node_count_json"] = json.dumps(node_count)

-    return templates.TemplateResponse("network.html", context)
+    return templates.TemplateResponse("dashboard.html", context)
--- a/src/meshcore_hub/web/routes/pages.py
+++ b/src/meshcore_hub/web/routes/pages.py
@@ -0,0 +1,36 @@
+"""Custom pages route for MeshCore Hub Web Dashboard."""
+
+from fastapi import APIRouter, HTTPException, Request
+from fastapi.responses import HTMLResponse
+
+from meshcore_hub.web.app import get_network_context, get_templates
+
+router = APIRouter(tags=["Pages"])
+
+
+@router.get("/pages/{slug}", response_class=HTMLResponse)
+async def custom_page(request: Request, slug: str) -> HTMLResponse:
+    """Render a custom markdown page.
+
+    Args:
+        request: FastAPI request object.
+        slug: The page slug from the URL.
+
+    Returns:
+        Rendered HTML page.
+
+    Raises:
+        HTTPException: 404 if page not found.
+    """
+    page_loader = request.app.state.page_loader
+    page = page_loader.get_page(slug)
+
+    if not page:
+        raise HTTPException(status_code=404, detail=f"Page '{slug}' not found")
+
+    templates = get_templates(request)
+    context = get_network_context(request)
+    context["request"] = request
+    context["page"] = page
+
+    return templates.TemplateResponse("page.html", context)
--- a/src/meshcore_hub/web/static/img/logo.svg
+++ b/src/meshcore_hub/web/static/img/logo.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 70 70"
+   width="70"
+   height="70"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg">
+  <!-- WiFi arcs radiating from bottom-left corner -->
+  <g
+     fill="none"
+     stroke="#ffffff"
+     stroke-width="8"
+     stroke-linecap="round">
+    <!-- Inner arc: from right to top -->
+    <path d="M 20,65 A 15,15 0 0 0 5,50" />
+    <!-- Middle arc -->
+    <path d="M 35,65 A 30,30 0 0 0 5,35" />
+    <!-- Outer arc -->
+    <path d="M 50,65 A 45,45 0 0 0 5,20" />
+  </g>
+</svg>
--- a/src/meshcore_hub/web/templates/base.html
+++ b/src/meshcore_hub/web/templates/base.html
@@ -1,3 +1,4 @@
+{% from "macros/icons.html" import icon_home, icon_dashboard, icon_nodes, icon_advertisements, icon_messages, icon_map, icon_members, icon_page %}
 <!DOCTYPE html>
 <html lang="en" data-theme="dark">
 <head>
@@ -5,6 +6,30 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{{ network_name }}{% endblock %}</title>

+    <!-- SEO Meta Tags -->
+    {% set default_description = network_name ~ " - MeshCore off-grid LoRa mesh network dashboard. Monitor nodes, messages, and network activity." %}
+    <meta name="description" content="{% block meta_description %}{{ default_description }}{% endblock %}">
+    <meta name="generator" content="MeshCore Hub {{ version }}">
+    <link rel="canonical" href="{{ request.url }}">
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="{{ request.url }}">
+    <meta property="og:title" content="{% block og_title %}{{ self.title() }}{% endblock %}">
+    <meta property="og:description" content="{% block og_description %}{{ self.meta_description() }}{% endblock %}">
+    <meta property="og:site_name" content="{{ network_name }}">
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="{% block twitter_title %}{{ self.title() }}{% endblock %}">
+    <meta name="twitter:description" content="{% block twitter_description %}{{ self.meta_description() }}{% endblock %}">
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="{{ logo_url }}">
+
+    <!-- Enable View Transitions API for smooth page navigation -->
+    <meta name="view-transition" content="same-origin">
+
    <!-- Tailwind CSS with DaisyUI -->
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.tailwindcss.com"></script>
@@ -40,6 +65,92 @@
            text-overflow: ellipsis;
            white-space: nowrap;
        }
+
+        /* Prose styling for custom markdown pages */
+        .prose h1 { font-size: 2.25rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 1rem; }
+        .prose h2 { font-size: 1.875rem; font-weight: 600; margin-top: 1.25rem; margin-bottom: 0.75rem; }
+        .prose h3 { font-size: 1.5rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.5rem; }
+        .prose h4 { font-size: 1.25rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.5rem; }
+        .prose p { margin-bottom: 1rem; line-height: 1.75; }
+        .prose ul, .prose ol { margin-bottom: 1rem; padding-left: 1.5rem; }
+        .prose ul { list-style-type: disc; }
+        .prose ol { list-style-type: decimal; }
+        .prose li { margin-bottom: 0.25rem; }
+        .prose a { color: oklch(var(--p)); text-decoration: underline; }
+        .prose a:hover { color: oklch(var(--pf)); }
+        .prose code { background: oklch(var(--b2)); padding: 0.125rem 0.25rem; border-radius: 0.25rem; font-size: 0.875em; }
+        .prose pre { background: oklch(var(--b2)); padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin-bottom: 1rem; }
+        .prose pre code { background: none; padding: 0; }
+        .prose blockquote { border-left: 4px solid oklch(var(--bc) / 0.3); padding-left: 1rem; margin: 1rem 0; font-style: italic; }
+        .prose table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
+        .prose th, .prose td { border: 1px solid oklch(var(--bc) / 0.2); padding: 0.5rem; text-align: left; }
+        .prose th { background: oklch(var(--b2)); font-weight: 600; }
+        .prose hr { border: none; border-top: 1px solid oklch(var(--bc) / 0.2); margin: 2rem 0; }
+        .prose img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1rem 0; }
+
+        /* View Transitions API - Cross-document page transitions */
+        .navbar { view-transition-name: navbar; position: relative; z-index: 50; }
+        main { view-transition-name: main-content; position: relative; z-index: 10; }
+        footer { view-transition-name: footer; position: relative; z-index: 10; }
+
+        /* Subtle slide + fade for main content */
+        ::view-transition-old(main-content) {
+            animation: vt-fade-out 200ms ease-out forwards;
+        }
+        ::view-transition-new(main-content) {
+            animation: vt-slide-up 250ms ease-out forwards;
+        }
+
+        /* Keep navbar and footer stable */
+        ::view-transition-old(navbar),
+        ::view-transition-new(navbar),
+        ::view-transition-old(footer),
+        ::view-transition-new(footer) {
+            animation: none;
+        }
+
+        /* Subtle crossfade for background */
+        ::view-transition-old(root),
+        ::view-transition-new(root) {
+            animation-duration: 150ms;
+        }
+
+        @keyframes vt-fade-out {
+            from { opacity: 1; }
+            to { opacity: 0; }
+        }
+        @keyframes vt-slide-up {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        /* Card entrance animations - only for stat cards with .animate-stagger class */
+        .animate-stagger > .card,
+        .animate-stagger > .stat {
+            animation: card-fade-in 300ms ease-out backwards;
+        }
+        .animate-stagger > :nth-child(1) { animation-delay: 0ms; }
+        .animate-stagger > :nth-child(2) { animation-delay: 50ms; }
+        .animate-stagger > :nth-child(3) { animation-delay: 100ms; }
+        .animate-stagger > :nth-child(4) { animation-delay: 150ms; }
+        .animate-stagger > :nth-child(5) { animation-delay: 200ms; }
+        .animate-stagger > :nth-child(6) { animation-delay: 250ms; }
+
+        @keyframes card-fade-in {
+            from { opacity: 0; transform: translateY(8px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        /* Respect reduced motion preferences */
+        @media (prefers-reduced-motion: reduce) {
+            .card,
+            ::view-transition-old(main-content),
+            ::view-transition-new(main-content),
+            ::view-transition-old(root),
+            ::view-transition-new(root) {
+                animation: none !important;
+            }
+        }
    </style>

    {% block extra_head %}{% endblock %}
@@ -55,31 +166,35 @@
                    </svg>
                </div>
                <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
-                    <li><a href="/" class="{% if request.url.path == '/' %}active{% endif %}">Home</a></li>
-                    <li><a href="/network" class="{% if request.url.path == '/network' %}active{% endif %}">Network</a></li>
-                    <li><a href="/nodes" class="{% if '/nodes' in request.url.path %}active{% endif %}">Nodes</a></li>
-                    <li><a href="/advertisements" class="{% if request.url.path == '/advertisements' %}active{% endif %}">Advertisements</a></li>
-                    <li><a href="/messages" class="{% if request.url.path == '/messages' %}active{% endif %}">Messages</a></li>
-                    <li><a href="/map" class="{% if request.url.path == '/map' %}active{% endif %}">Map</a></li>
-                    <li><a href="/members" class="{% if request.url.path == '/members' %}active{% endif %}">Members</a></li>
+                    <li><a href="/" class="{% if request.url.path == '/' %}active{% endif %}">{{ icon_home("h-4 w-4") }} Home</a></li>
+                    <li><a href="/dashboard" class="{% if request.url.path == '/dashboard' %}active{% endif %}">{{ icon_dashboard("h-4 w-4") }} Dashboard</a></li>
+                    <li><a href="/nodes" class="{% if '/nodes' in request.url.path %}active{% endif %}">{{ icon_nodes("h-4 w-4") }} Nodes</a></li>
+                    <li><a href="/advertisements" class="{% if request.url.path == '/advertisements' %}active{% endif %}">{{ icon_advertisements("h-4 w-4") }} Adverts</a></li>
+                    <li><a href="/messages" class="{% if request.url.path == '/messages' %}active{% endif %}">{{ icon_messages("h-4 w-4") }} Messages</a></li>
+                    <li><a href="/map" class="{% if request.url.path == '/map' %}active{% endif %}">{{ icon_map("h-4 w-4") }} Map</a></li>
+                    <li><a href="/members" class="{% if request.url.path == '/members' %}active{% endif %}">{{ icon_members("h-4 w-4") }} Members</a></li>
+                    {% for page in custom_pages %}
+                    <li><a href="{{ page.url }}" class="{% if request.url.path == page.url %}active{% endif %}">{{ icon_page("h-4 w-4") }} {{ page.title }}</a></li>
+                    {% endfor %}
                </ul>
            </div>
            <a href="/" class="btn btn-ghost text-xl">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.14 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" />
-                </svg>
+                <img src="{{ logo_url }}" alt="{{ network_name }}" class="h-6 w-6 mr-2" />
                {{ network_name }}
            </a>
        </div>
        <div class="navbar-center hidden lg:flex">
            <ul class="menu menu-horizontal px-1">
-                <li><a href="/" class="{% if request.url.path == '/' %}active{% endif %}">Home</a></li>
-                <li><a href="/network" class="{% if request.url.path == '/network' %}active{% endif %}">Network</a></li>
-                <li><a href="/nodes" class="{% if '/nodes' in request.url.path %}active{% endif %}">Nodes</a></li>
-                <li><a href="/advertisements" class="{% if request.url.path == '/advertisements' %}active{% endif %}">Advertisements</a></li>
-                <li><a href="/messages" class="{% if request.url.path == '/messages' %}active{% endif %}">Messages</a></li>
-                <li><a href="/map" class="{% if request.url.path == '/map' %}active{% endif %}">Map</a></li>
-                <li><a href="/members" class="{% if request.url.path == '/members' %}active{% endif %}">Members</a></li>
+                <li><a href="/" class="{% if request.url.path == '/' %}active{% endif %}">{{ icon_home("h-4 w-4") }} Home</a></li>
+                <li><a href="/dashboard" class="{% if request.url.path == '/dashboard' %}active{% endif %}">{{ icon_dashboard("h-4 w-4") }} Dashboard</a></li>
+                <li><a href="/nodes" class="{% if '/nodes' in request.url.path %}active{% endif %}">{{ icon_nodes("h-4 w-4") }} Nodes</a></li>
+                <li><a href="/advertisements" class="{% if request.url.path == '/advertisements' %}active{% endif %}">{{ icon_advertisements("h-4 w-4") }} Adverts</a></li>
+                <li><a href="/messages" class="{% if request.url.path == '/messages' %}active{% endif %}">{{ icon_messages("h-4 w-4") }} Messages</a></li>
+                <li><a href="/map" class="{% if request.url.path == '/map' %}active{% endif %}">{{ icon_map("h-4 w-4") }} Map</a></li>
+                <li><a href="/members" class="{% if request.url.path == '/members' %}active{% endif %}">{{ icon_members("h-4 w-4") }} Members</a></li>
+                {% for page in custom_pages %}
+                <li><a href="{{ page.url }}" class="{% if request.url.path == page.url %}active{% endif %}">{{ icon_page("h-4 w-4") }} {{ page.title }}</a></li>
+                {% endfor %}
            </ul>
        </div>
        <div class="navbar-end">
--- a/src/meshcore_hub/web/templates/dashboard.html
+++ b/src/meshcore_hub/web/templates/dashboard.html
@@ -23,7 +23,7 @@
 {% endif %}

 <!-- Stats Cards -->
-<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6 animate-stagger">
    <!-- Total Nodes -->
    <div class="stat bg-base-100 rounded-box shadow">
        <div class="stat-figure text-primary">
@@ -62,7 +62,7 @@
 </div>

 <!-- Activity Charts -->
-<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8 animate-stagger">
    <!-- Node Count Chart -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
@@ -113,7 +113,7 @@
 </div>

 <!-- Additional Stats -->
-<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+<div class="grid grid-cols-1 md:grid-cols-2 gap-6 animate-stagger">
    <!-- Recent Advertisements -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
--- a/src/meshcore_hub/web/templates/home.html
+++ b/src/meshcore_hub/web/templates/home.html
@@ -1,93 +1,97 @@
 {% extends "base.html" %}
+{% from "macros/icons.html" import icon_dashboard, icon_map, icon_nodes, icon_advertisements, icon_messages, icon_page %}

 {% block title %}{{ network_name }} - Home{% endblock %}

 {% block content %}
-<div class="hero py-8 bg-base-100 rounded-box">
-    <div class="hero-content text-center">
-        <div class="max-w-2xl">
-            <h1 class="text-4xl font-bold">{{ network_name }}</h1>
-            {% if network_city and network_country %}
-            <p class="py-1 text-lg opacity-70">{{ network_city }}, {{ network_country }}</p>
-            {% endif %}
-            {% if network_welcome_text %}
-            <p class="py-4">{{ network_welcome_text }}</p>
-            {% else %}
-            <p class="py-4">
-                Welcome to the {{ network_name }} mesh network dashboard.
-                Monitor network activity, view connected nodes, and explore message history.
-            </p>
-            {% endif %}
-            <div class="flex gap-4 justify-center flex-wrap">
-                <a href="/network" class="btn btn-neutral">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-                    </svg>
-                    Dashboard
-                </a>
-                <a href="/nodes" class="btn btn-primary">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-                    </svg>
-                    Nodes
-                </a>
-                <a href="/advertisements" class="btn btn-secondary">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
-                    </svg>
-                    Advertisements
-                </a>
-                <a href="/messages" class="btn btn-accent">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
-                    </svg>
-                    Messages
-                </a>
+<!-- Hero Section with Stats -->
+<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 bg-base-100 rounded-box p-6">
+    <!-- Hero Content (2 columns) -->
+    <div class="lg:col-span-2 flex flex-col items-center text-center">
+        <!-- Header: Logo and Title side by side -->
+        <div class="flex items-center gap-8 mb-4">
+            <img src="{{ logo_url }}" alt="{{ network_name }}" class="h-36 w-36" />
+            <div class="flex flex-col justify-center">
+                <h1 class="text-6xl font-black tracking-tight">{{ network_name }}</h1>
+                {% if network_city and network_country %}
+                <p class="text-2xl opacity-70 mt-2">{{ network_city }}, {{ network_country }}</p>
+                {% endif %}
            </div>
        </div>
+        {% if network_welcome_text %}
+        <p class="py-4 max-w-[70%]">{{ network_welcome_text }}</p>
+        {% else %}
+        <p class="py-4 max-w-[70%]">
+            Welcome to the {{ network_name }} mesh network dashboard.
+            Monitor network activity, view connected nodes, and explore message history.
+        </p>
+        {% endif %}
+        <div class="flex-1"></div>
+        <div class="flex flex-wrap justify-center gap-3 mt-auto">
+            <a href="/dashboard" class="btn btn-outline btn-info">
+                {{ icon_dashboard("h-5 w-5 mr-2") }}
+                Dashboard
+            </a>
+            <a href="/nodes" class="btn btn-outline btn-primary">
+                {{ icon_nodes("h-5 w-5 mr-2") }}
+                Nodes
+            </a>
+            <a href="/advertisements" class="btn btn-outline btn-secondary">
+                {{ icon_advertisements("h-5 w-5 mr-2") }}
+                Adverts
+            </a>
+            <a href="/messages" class="btn btn-outline btn-accent">
+                {{ icon_messages("h-5 w-5 mr-2") }}
+                Messages
+            </a>
+            <a href="/map" class="btn btn-outline btn-warning">
+                {{ icon_map("h-5 w-5 mr-2") }}
+                Map
+            </a>
+            {% for page in custom_pages[:3] %}
+            <a href="{{ page.url }}" class="btn btn-outline btn-neutral">
+                {{ icon_page("h-5 w-5 mr-2") }}
+                {{ page.title }}
+            </a>
+            {% endfor %}
+        </div>
+    </div>
+
+    <!-- Stats Column (stacked vertically) -->
+    <div class="flex flex-col gap-4 animate-stagger">
+        <!-- Total Nodes -->
+        <div class="stat bg-base-200 rounded-box">
+            <div class="stat-figure text-primary">
+                {{ icon_nodes("h-8 w-8") }}
+            </div>
+            <div class="stat-title">Total Nodes</div>
+            <div class="stat-value text-primary">{{ stats.total_nodes }}</div>
+            <div class="stat-desc">All discovered nodes</div>
+        </div>
+
+        <!-- Advertisements (7 days) -->
+        <div class="stat bg-base-200 rounded-box">
+            <div class="stat-figure text-secondary">
+                {{ icon_advertisements("h-8 w-8") }}
+            </div>
+            <div class="stat-title">Advertisements</div>
+            <div class="stat-value text-secondary">{{ stats.advertisements_7d }}</div>
+            <div class="stat-desc">Last 7 days</div>
+        </div>
+
+        <!-- Messages (7 days) -->
+        <div class="stat bg-base-200 rounded-box">
+            <div class="stat-figure text-accent">
+                {{ icon_messages("h-8 w-8") }}
+            </div>
+            <div class="stat-title">Messages</div>
+            <div class="stat-value text-accent">{{ stats.messages_7d }}</div>
+            <div class="stat-desc">Last 7 days</div>
+        </div>
    </div>
 </div>

-<!-- Stats Cards -->
-<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
-    <!-- Total Nodes -->
-    <div class="stat bg-base-100 rounded-box shadow">
-        <div class="stat-figure text-primary">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-            </svg>
-        </div>
-        <div class="stat-title">Total Nodes</div>
-        <div class="stat-value text-primary">{{ stats.total_nodes }}</div>
-        <div class="stat-desc">All discovered nodes</div>
-    </div>
-
-    <!-- Advertisements (7 days) -->
-    <div class="stat bg-base-100 rounded-box shadow">
-        <div class="stat-figure text-secondary">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
-            </svg>
-        </div>
-        <div class="stat-title">Advertisements</div>
-        <div class="stat-value text-secondary">{{ stats.advertisements_7d }}</div>
-        <div class="stat-desc">Last 7 days</div>
-    </div>
-
-    <!-- Messages (7 days) -->
-    <div class="stat bg-base-100 rounded-box shadow">
-        <div class="stat-figure text-accent">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
-            </svg>
-        </div>
-        <div class="stat-title">Messages</div>
-        <div class="stat-value text-accent">{{ stats.messages_7d }}</div>
-        <div class="stat-desc">Last 7 days</div>
-    </div>
-</div>
-
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6 animate-stagger">
    <!-- Network Info Card -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
--- a/src/meshcore_hub/web/templates/macros/icons.html
+++ b/src/meshcore_hub/web/templates/macros/icons.html
@@ -0,0 +1,47 @@
+{% macro icon_dashboard(class="h-5 w-5") %}
+<svg xmlns="http://www.w3.org/2000/svg" class="{{ class }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+</svg>
+{% endmacro %}
+
+{% macro icon_map(class="h-5 w-5") %}
+<svg xmlns="http://www.w3.org/2000/svg" class="{{ class }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
+</svg>
+{% endmacro %}
+
+{% macro icon_nodes(class="h-5 w-5") %}
+<svg xmlns="http://www.w3.org/2000/svg" class="{{ class }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+</svg>
+{% endmacro %}
+
+{% macro icon_advertisements(class="h-5 w-5") %}
+<svg xmlns="http://www.w3.org/2000/svg" class="{{ class }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
+</svg>
+{% endmacro %}
+
+{% macro icon_messages(class="h-5 w-5") %}
+<svg xmlns="http://www.w3.org/2000/svg" class="{{ class }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+</svg>
+{% endmacro %}
+
+{% macro icon_home(class="h-5 w-5") %}
+<svg xmlns="http://www.w3.org/2000/svg" class="{{ class }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+</svg>
+{% endmacro %}
+
+{% macro icon_members(class="h-5 w-5") %}
+<svg xmlns="http://www.w3.org/2000/svg" class="{{ class }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
+</svg>
+{% endmacro %}
+
+{% macro icon_page(class="h-5 w-5") %}
+<svg xmlns="http://www.w3.org/2000/svg" class="{{ class }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+</svg>
+{% endmacro %}
--- a/src/meshcore_hub/web/templates/page.html
+++ b/src/meshcore_hub/web/templates/page.html
@@ -0,0 +1,15 @@
+{% extends "base.html" %}
+
+{% block title %}{{ page.title }} - {{ network_name }}{% endblock %}
+
+{% block meta_description %}{{ page.title }} - {{ network_name }}{% endblock %}
+
+{% block content %}
+<div class="max-w-4xl mx-auto">
+    <div class="card bg-base-100 shadow-xl">
+        <div class="card-body prose prose-lg max-w-none">
+            {{ page.content_html | safe }}
+        </div>
+    </div>
+</div>
+{% endblock %}
--- a/tests/e2e/test_full_flow.py
+++ b/tests/e2e/test_full_flow.py
@@ -122,9 +122,9 @@ class TestWebDashboard:
        assert response.status_code == 200
        assert "text/html" in response.headers.get("content-type", "")

-    def test_network_page(self, web_client: httpx.Client) -> None:
-        """Test network overview page loads."""
-        response = web_client.get("/network")
+    def test_dashboard_page(self, web_client: httpx.Client) -> None:
+        """Test dashboard page loads."""
+        response = web_client.get("/dashboard")
        assert response.status_code == 200
        assert "text/html" in response.headers.get("content-type", "")

--- a/tests/test_web/test_dashboard.py
+++ b/tests/test_web/test_dashboard.py
@@ -1,4 +1,4 @@
-"""Tests for the network overview page route."""
+"""Tests for the dashboard page route."""

 from typing import Any

@@ -7,29 +7,29 @@ from fastapi.testclient import TestClient
 from tests.test_web.conftest import MockHttpClient


-class TestNetworkPage:
-    """Tests for the network overview page."""
+class TestDashboardPage:
+    """Tests for the dashboard page."""

-    def test_network_returns_200(self, client: TestClient) -> None:
-        """Test that network page returns 200 status code."""
-        response = client.get("/network")
+    def test_dashboard_returns_200(self, client: TestClient) -> None:
+        """Test that dashboard page returns 200 status code."""
+        response = client.get("/dashboard")
        assert response.status_code == 200

-    def test_network_returns_html(self, client: TestClient) -> None:
-        """Test that network page returns HTML content."""
-        response = client.get("/network")
+    def test_dashboard_returns_html(self, client: TestClient) -> None:
+        """Test that dashboard page returns HTML content."""
+        response = client.get("/dashboard")
        assert "text/html" in response.headers["content-type"]

-    def test_network_contains_network_name(self, client: TestClient) -> None:
-        """Test that network page contains the network name."""
-        response = client.get("/network")
+    def test_dashboard_contains_network_name(self, client: TestClient) -> None:
+        """Test that dashboard page contains the network name."""
+        response = client.get("/dashboard")
        assert "Test Network" in response.text

-    def test_network_displays_stats(
+    def test_dashboard_displays_stats(
        self, client: TestClient, mock_http_client: MockHttpClient
    ) -> None:
-        """Test that network page displays statistics."""
-        response = client.get("/network")
+        """Test that dashboard page displays statistics."""
+        response = client.get("/dashboard")
        # Check for stats from mock response
        assert response.status_code == 200
        # The mock returns total_nodes: 10, active_nodes: 5, etc.
@@ -37,24 +37,24 @@ class TestNetworkPage:
        assert "10" in response.text  # total_nodes
        assert "5" in response.text  # active_nodes

-    def test_network_displays_message_counts(
+    def test_dashboard_displays_message_counts(
        self, client: TestClient, mock_http_client: MockHttpClient
    ) -> None:
-        """Test that network page displays message counts."""
-        response = client.get("/network")
+        """Test that dashboard page displays message counts."""
+        response = client.get("/dashboard")
        assert response.status_code == 200
        # Mock returns total_messages: 100, messages_today: 15
        assert "100" in response.text
        assert "15" in response.text


-class TestNetworkPageAPIErrors:
-    """Tests for network page handling API errors."""
+class TestDashboardPageAPIErrors:
+    """Tests for dashboard page handling API errors."""

-    def test_network_handles_api_error(
+    def test_dashboard_handles_api_error(
        self, web_app: Any, mock_http_client: MockHttpClient
    ) -> None:
-        """Test that network page handles API errors gracefully."""
+        """Test that dashboard page handles API errors gracefully."""
        # Set error response for stats endpoint
        mock_http_client.set_response(
            "GET", "/api/v1/dashboard/stats", status_code=500, json_data=None
@@ -62,15 +62,15 @@ class TestNetworkPageAPIErrors:
        web_app.state.http_client = mock_http_client

        client = TestClient(web_app, raise_server_exceptions=True)
-        response = client.get("/network")
+        response = client.get("/dashboard")

        # Should still return 200 (page renders with defaults)
        assert response.status_code == 200

-    def test_network_handles_api_not_found(
+    def test_dashboard_handles_api_not_found(
        self, web_app: Any, mock_http_client: MockHttpClient
    ) -> None:
-        """Test that network page handles API 404 gracefully."""
+        """Test that dashboard page handles API 404 gracefully."""
        mock_http_client.set_response(
            "GET",
            "/api/v1/dashboard/stats",
@@ -80,7 +80,7 @@ class TestNetworkPageAPIErrors:
        web_app.state.http_client = mock_http_client

        client = TestClient(web_app, raise_server_exceptions=True)
-        response = client.get("/network")
+        response = client.get("/dashboard")

        # Should still return 200 (page renders with defaults)
        assert response.status_code == 200
--- a/tests/test_web/test_pages.py
+++ b/tests/test_web/test_pages.py
@@ -0,0 +1,494 @@
+"""Tests for custom pages functionality."""
+
+import tempfile
+from collections.abc import Generator
+from pathlib import Path
+from typing import Any
+
+import pytest
+from fastapi.testclient import TestClient
+
+from meshcore_hub.web.pages import CustomPage, PageLoader
+
+
+class TestCustomPage:
+    """Tests for the CustomPage dataclass."""
+
+    def test_url_property(self) -> None:
+        """Test that url property returns correct path."""
+        page = CustomPage(
+            slug="about",
+            title="About Us",
+            menu_order=10,
+            content_html="<p>Content</p>",
+            file_path="/pages/about.md",
+        )
+        assert page.url == "/pages/about"
+
+    def test_url_property_with_hyphenated_slug(self) -> None:
+        """Test url property with hyphenated slug."""
+        page = CustomPage(
+            slug="terms-of-service",
+            title="Terms of Service",
+            menu_order=50,
+            content_html="<p>Terms</p>",
+            file_path="/pages/terms-of-service.md",
+        )
+        assert page.url == "/pages/terms-of-service"
+
+
+class TestPageLoader:
+    """Tests for the PageLoader class."""
+
+    def test_load_pages_nonexistent_directory(self) -> None:
+        """Test loading from a non-existent directory."""
+        loader = PageLoader("/nonexistent/path")
+        loader.load_pages()
+
+        assert loader.get_menu_pages() == []
+
+    def test_load_pages_empty_directory(self) -> None:
+        """Test loading from an empty directory."""
+        with tempfile.TemporaryDirectory() as tmpdir:
+            loader = PageLoader(tmpdir)
+            loader.load_pages()
+
+            assert loader.get_menu_pages() == []
+
+    def test_load_pages_with_frontmatter(self) -> None:
+        """Test loading a page with full frontmatter."""
+        with tempfile.TemporaryDirectory() as tmpdir:
+            page_path = Path(tmpdir) / "about.md"
+            page_path.write_text(
+                """---
+title: About Us
+slug: about
+menu_order: 10
+---
+
+# About
+
+This is the about page.
+"""
+            )
+
+            loader = PageLoader(tmpdir)
+            loader.load_pages()
+
+            pages = loader.get_menu_pages()
+            assert len(pages) == 1
+            assert pages[0].slug == "about"
+            assert pages[0].title == "About Us"
+            assert pages[0].menu_order == 10
+            assert "About</h1>" in pages[0].content_html
+            assert "<p>This is the about page.</p>" in pages[0].content_html
+
+    def test_load_pages_default_slug_from_filename(self) -> None:
+        """Test that slug defaults to filename when not specified."""
+        with tempfile.TemporaryDirectory() as tmpdir:
+            page_path = Path(tmpdir) / "my-custom-page.md"
+            page_path.write_text(
+                """---
+title: My Custom Page
+---
+
+Content here.
+"""
+            )
+
+            loader = PageLoader(tmpdir)
+            loader.load_pages()
+
+            pages = loader.get_menu_pages()
+            assert len(pages) == 1
+            assert pages[0].slug == "my-custom-page"
+
+    def test_load_pages_default_title_from_slug(self) -> None:
+        """Test that title defaults to titlecased slug when not specified."""
+        with tempfile.TemporaryDirectory() as tmpdir:
+            page_path = Path(tmpdir) / "terms-of-service.md"
+            page_path.write_text("Just content, no frontmatter.")
+
+            loader = PageLoader(tmpdir)
+            loader.load_pages()
+
+            pages = loader.get_menu_pages()
+            assert len(pages) == 1
+            assert pages[0].title == "Terms Of Service"
+
+    def test_load_pages_default_menu_order(self) -> None:
+        """Test that menu_order defaults to 100."""
+        with tempfile.TemporaryDirectory() as tmpdir:
+            page_path = Path(tmpdir) / "page.md"
+            page_path.write_text(
+                """---
+title: Test Page
+---
+
+Content.
+"""
+            )
+
+            loader = PageLoader(tmpdir)
+            loader.load_pages()
+
+            pages = loader.get_menu_pages()
+            assert len(pages) == 1
+            assert pages[0].menu_order == 100
+
+    def test_load_pages_sorted_by_menu_order(self) -> None:
+        """Test that pages are sorted by menu_order then title."""
+        with tempfile.TemporaryDirectory() as tmpdir:
+            # Create pages with different menu_order values
+            (Path(tmpdir) / "page-z.md").write_text(
+                """---
+title: Z Page
+menu_order: 30
+---
+
+Content.
+"""
+            )
+            (Path(tmpdir) / "page-a.md").write_text(
+                """---
+title: A Page
+menu_order: 10
+---
+
+Content.
+"""
+            )
+            (Path(tmpdir) / "page-m.md").write_text(
+                """---
+title: M Page
+menu_order: 20
+---
+
+Content.
+"""
+            )
+
+            loader = PageLoader(tmpdir)
+            loader.load_pages()
+
+            pages = loader.get_menu_pages()
+            assert len(pages) == 3
+            assert [p.title for p in pages] == ["A Page", "M Page", "Z Page"]
+
+    def test_load_pages_secondary_sort_by_title(self) -> None:
+        """Test that pages with same menu_order are sorted by title."""
+        with tempfile.TemporaryDirectory() as tmpdir:
+            (Path(tmpdir) / "zebra.md").write_text(
+                """---
+title: Zebra
+menu_order: 10
+---
+
+Content.
+"""
+            )
+            (Path(tmpdir) / "apple.md").write_text(
+                """---
+title: Apple
+menu_order: 10
+---
+
+Content.
+"""
+            )
+
+            loader = PageLoader(tmpdir)
+            loader.load_pages()
+
+            pages = loader.get_menu_pages()
+            assert len(pages) == 2
+            assert [p.title for p in pages] == ["Apple", "Zebra"]
+
+    def test_get_page_returns_correct_page(self) -> None:
+        """Test that get_page returns the page with the given slug."""
+        with tempfile.TemporaryDirectory() as tmpdir:
+            (Path(tmpdir) / "about.md").write_text(
+                """---
+title: About
+slug: about
+---
+
+About content.
+"""
+            )
+            (Path(tmpdir) / "contact.md").write_text(
+                """---
+title: Contact
+slug: contact
+---
+
+Contact content.
+"""
+            )
+
+            loader = PageLoader(tmpdir)
+            loader.load_pages()
+
+            page = loader.get_page("about")
+            assert page is not None
+            assert page.slug == "about"
+            assert page.title == "About"
+
+            page = loader.get_page("contact")
+            assert page is not None
+            assert page.slug == "contact"
+
+    def test_get_page_returns_none_for_unknown_slug(self) -> None:
+        """Test that get_page returns None for unknown slugs."""
+        loader = PageLoader("/nonexistent")
+        loader.load_pages()
+
+        assert loader.get_page("unknown") is None
+
+    def test_reload_clears_and_reloads(self) -> None:
+        """Test that reload() clears existing pages and reloads from disk."""
+        with tempfile.TemporaryDirectory() as tmpdir:
+            page_path = Path(tmpdir) / "page.md"
+            page_path.write_text(
+                """---
+title: Original
+---
+
+Content.
+"""
+            )
+
+            loader = PageLoader(tmpdir)
+            loader.load_pages()
+
+            pages = loader.get_menu_pages()
+            assert len(pages) == 1
+            assert pages[0].title == "Original"
+
+            # Update the file
+            page_path.write_text(
+                """---
+title: Updated
+---
+
+New content.
+"""
+            )
+
+            loader.reload()
+
+            pages = loader.get_menu_pages()
+            assert len(pages) == 1
+            assert pages[0].title == "Updated"
+
+    def test_load_pages_ignores_non_md_files(self) -> None:
+        """Test that only .md files are loaded."""
+        with tempfile.TemporaryDirectory() as tmpdir:
+            (Path(tmpdir) / "page.md").write_text("# Valid Page")
+            (Path(tmpdir) / "readme.txt").write_text("Not a markdown file")
+            (Path(tmpdir) / "data.json").write_text('{"key": "value"}')
+
+            loader = PageLoader(tmpdir)
+            loader.load_pages()
+
+            pages = loader.get_menu_pages()
+            assert len(pages) == 1
+            assert pages[0].slug == "page"
+
+    def test_markdown_tables_rendered(self) -> None:
+        """Test that markdown tables are rendered to HTML."""
+        with tempfile.TemporaryDirectory() as tmpdir:
+            (Path(tmpdir) / "tables.md").write_text(
+                """---
+title: Tables
+---
+
+| Header 1 | Header 2 |
+|----------|----------|
+| Cell 1   | Cell 2   |
+"""
+            )
+
+            loader = PageLoader(tmpdir)
+            loader.load_pages()
+
+            pages = loader.get_menu_pages()
+            assert len(pages) == 1
+            assert "<table>" in pages[0].content_html
+            assert "<th>" in pages[0].content_html
+
+    def test_markdown_fenced_code_rendered(self) -> None:
+        """Test that fenced code blocks are rendered."""
+        with tempfile.TemporaryDirectory() as tmpdir:
+            (Path(tmpdir) / "code.md").write_text(
+                """---
+title: Code
+---
+
+```python
+def hello():
+    print("Hello!")
+```
+"""
+            )
+
+            loader = PageLoader(tmpdir)
+            loader.load_pages()
+
+            pages = loader.get_menu_pages()
+            assert len(pages) == 1
+            assert "<pre>" in pages[0].content_html
+            assert "def hello():" in pages[0].content_html
+
+
+class TestPagesRoute:
+    """Tests for the custom pages route."""
+
+    @pytest.fixture
+    def pages_dir(self) -> Generator[str, None, None]:
+        """Create a temporary content directory with test pages."""
+        with tempfile.TemporaryDirectory() as tmpdir:
+            # Create pages subdirectory (CONTENT_HOME/pages)
+            pages_subdir = Path(tmpdir) / "pages"
+            pages_subdir.mkdir()
+            (pages_subdir / "about.md").write_text(
+                """---
+title: About Us
+slug: about
+menu_order: 10
+---
+
+# About Our Network
+
+Welcome to the network.
+"""
+            )
+            (pages_subdir / "faq.md").write_text(
+                """---
+title: FAQ
+slug: faq
+menu_order: 20
+---
+
+# Frequently Asked Questions
+
+Here are some answers.
+"""
+            )
+            yield tmpdir
+
+    @pytest.fixture
+    def web_app_with_pages(
+        self, pages_dir: str, mock_http_client: Any
+    ) -> Generator[Any, None, None]:
+        """Create a web app with custom pages configured."""
+        import os
+
+        # Temporarily set CONTENT_HOME environment variable
+        os.environ["CONTENT_HOME"] = pages_dir
+
+        from meshcore_hub.web.app import create_app
+
+        app = create_app(
+            api_url="http://localhost:8000",
+            api_key="test-api-key",
+            network_name="Test Network",
+        )
+        app.state.http_client = mock_http_client
+
+        yield app
+
+        # Cleanup
+        del os.environ["CONTENT_HOME"]
+
+    @pytest.fixture
+    def client_with_pages(
+        self, web_app_with_pages: Any, mock_http_client: Any
+    ) -> TestClient:
+        """Create a test client with custom pages."""
+        web_app_with_pages.state.http_client = mock_http_client
+        return TestClient(web_app_with_pages, raise_server_exceptions=True)
+
+    def test_get_page_success(self, client_with_pages: TestClient) -> None:
+        """Test successfully retrieving a custom page."""
+        response = client_with_pages.get("/pages/about")
+        assert response.status_code == 200
+        assert "About Us" in response.text
+        assert "About Our Network" in response.text
+        assert "Welcome to the network" in response.text
+
+    def test_get_page_not_found(self, client_with_pages: TestClient) -> None:
+        """Test 404 for unknown page slug."""
+        response = client_with_pages.get("/pages/nonexistent")
+        assert response.status_code == 404
+
+    def test_pages_in_navigation(self, client_with_pages: TestClient) -> None:
+        """Test that custom pages appear in navigation."""
+        response = client_with_pages.get("/pages/about")
+        assert response.status_code == 200
+        # Check for navigation links
+        assert 'href="/pages/about"' in response.text
+        assert 'href="/pages/faq"' in response.text
+
+    def test_pages_sorted_in_navigation(self, client_with_pages: TestClient) -> None:
+        """Test that pages are sorted by menu_order in navigation."""
+        response = client_with_pages.get("/pages/about")
+        assert response.status_code == 200
+        # About (order 10) should appear before FAQ (order 20)
+        about_pos = response.text.find('href="/pages/about"')
+        faq_pos = response.text.find('href="/pages/faq"')
+        assert about_pos < faq_pos
+
+
+class TestPagesInSitemap:
+    """Tests for custom pages in sitemap."""
+
+    @pytest.fixture
+    def pages_dir(self) -> Generator[str, None, None]:
+        """Create a temporary content directory with test pages."""
+        with tempfile.TemporaryDirectory() as tmpdir:
+            # Create pages subdirectory (CONTENT_HOME/pages)
+            pages_subdir = Path(tmpdir) / "pages"
+            pages_subdir.mkdir()
+            (pages_subdir / "about.md").write_text(
+                """---
+title: About
+slug: about
+---
+
+About page.
+"""
+            )
+            yield tmpdir
+
+    @pytest.fixture
+    def client_with_pages_for_sitemap(
+        self, pages_dir: str, mock_http_client: Any
+    ) -> Generator[TestClient, None, None]:
+        """Create a test client with custom pages for sitemap testing."""
+        import os
+
+        os.environ["CONTENT_HOME"] = pages_dir
+
+        from meshcore_hub.web.app import create_app
+
+        app = create_app(
+            api_url="http://localhost:8000",
+            api_key="test-api-key",
+            network_name="Test Network",
+        )
+        app.state.http_client = mock_http_client
+
+        client = TestClient(app, raise_server_exceptions=True)
+        yield client
+
+        del os.environ["CONTENT_HOME"]
+
+    def test_pages_included_in_sitemap(
+        self, client_with_pages_for_sitemap: TestClient
+    ) -> None:
+        """Test that custom pages are included in sitemap.xml."""
+        response = client_with_pages_for_sitemap.get("/sitemap.xml")
+        assert response.status_code == 200
+        assert "/pages/about" in response.text
+        assert "<changefreq>weekly</changefreq>" in response.text
Author	SHA1	Message	Date
Louis King	6e40be6487	Updated home page buttons	2026-02-07 14:51:48 +00:00
Louis King	d79e29bc0a	Updates	2026-02-07 14:47:12 +00:00
Louis King	2758cf4dd5	Fixed mobile menu	2026-02-07 14:40:17 +00:00
Louis King	f37e993ede	Updates	2026-02-07 14:32:44 +00:00
Louis King	b18b3c9aa4	Refactor PAGES_HOME to CONTENT_HOME and add custom logo support - Replace PAGES_HOME with CONTENT_HOME configuration (default: ./content) - Content directory now contains pages/ and media/ subdirectories - Add support for custom logo at $CONTENT_HOME/media/images/logo.svg - Custom logo replaces favicon and navbar/home logos when present - Mount media directory as /media for serving custom assets - Simplify default logo to generic WiFi-style radiating arcs - Update documentation and example directory structure - Update tests for new CONTENT_HOME structure Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-02-07 13:45:42 +00:00
Louis King	9d99262401	Updates	2026-02-06 23:48:43 +00:00
Louis King	adfe5bc503	Updates	2026-02-06 23:38:08 +00:00
Louis King	deaab9b9de	Rename /network to /dashboard and add reusable icon macros - Renamed network route, template, and tests to dashboard - Added logo.svg for favicon and navbar branding - Created reusable Jinja2 icon macros for navigation and UI elements - Updated home page hero layout with centered content and larger logo - Added Map button alongside Dashboard button in hero section - Navigation menu items now display icons before labels Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-02-06 22:53:36 +00:00
Louis King	95636ef580	Removed Claude Code workflow	2026-02-06 19:19:10 +00:00
JingleManSweep	5831592f88	Merge pull request #79 from ipnet-mesh/feat/custom-pages Feat/custom pages	2026-02-06 19:14:53 +00:00
Louis King	bc7bff8b82	Updates	2026-02-06 19:14:19 +00:00
Louis King	9445d2150c	Fix links and update join guide - Fix T114 manufacturer (Heltec, not LilyGO) and link - Fix T1000-E product link - Fix Google Play and App Store links - Add Amazon to where to buy options - Add radio configuration step Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-02-06 19:10:00 +00:00
Louis King	3e9f478a65	Replace example about page with join guide Add getting started guide covering: - Node types (Companion, Repeater, Room Server) - Frequency regulations (868MHz EU/UK, 915MHz US/AU) - Recommended hardware (Heltec V3, T114, T1000-E, T-Deck Plus) - Mobile apps (Android/iOS) - Links to MeshCore docs and web flasher Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-02-06 19:04:56 +00:00
JingleManSweep	6656bd8214	Merge pull request #78 from ipnet-mesh/feat/custom-pages Add custom markdown pages feature to web dashboard	2026-02-06 18:40:42 +00:00
Louis King	0f50bf4a41	Add custom markdown pages feature to web dashboard Allows adding static content pages (About, FAQ, etc.) as markdown files with YAML frontmatter. Pages are stored in PAGES_HOME directory (default: ./pages), automatically appear in navigation menu, and are included in the sitemap. - Add PageLoader class to parse markdown with frontmatter - Add /pages/{slug} route for rendering custom pages - Add PAGES_HOME config setting to WebSettings - Add prose CSS styles for markdown content - Add pages to navigation and sitemap - Update docker-compose.yml with pages volume mount - Add comprehensive tests for PageLoader and routes Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-02-06 18:36:23 +00:00
Louis King	99206f7467	Updated README	2026-02-06 17:53:02 +00:00
Louis King	3a89daa9c0	Use empty Disallow in robots.txt for broader compatibility Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-02-06 15:58:52 +00:00
Louis King	86c5ff8f1c	SEO fixes	2026-02-06 14:38:26 +00:00
JingleManSweep	59d0edc96f	Merge pull request #76 from ipnet-mesh/chore/add-dynamic-sitemap-xml Added dynamic XML sitemap for SEO	2026-02-06 12:53:20 +00:00
Louis King	b01611e0e8	Added dynamic XML sitemap for SEO	2026-02-06 12:50:40 +00:00
JingleManSweep	1e077f50f7	Merge pull request #75 from ipnet-mesh/chore/add-meshcore-text-seo Updated SEO descriptions	2026-02-06 12:34:25 +00:00
Louis King	09146a2e94	Updated SEO descriptions	2026-02-06 12:31:40 +00:00
JingleManSweep	56487597b7	Merge pull request #73 from ipnet-mesh/chore/improve-seo Added SEO optimisations	2026-02-06 12:21:30 +00:00
Louis King	de968f397d	Added SEO optimisations	2026-02-06 12:17:27 +00:00
JingleManSweep	3ca5284c11	Merge pull request #72 from ipnet-mesh/chore/add-permissive-robots-txt Added permissive robots.txt route	2026-02-06 12:12:20 +00:00
Louis King	75d7e5bdfa	Added permissive robots.txt route	2026-02-06 12:09:36 +00:00
Louis King	927fcd6efb	Fixed README and Docker Compose	2026-02-03 22:58:58 +00:00
JingleManSweep	3132d296bb	Merge pull request #71 from ipnet-mesh/chore/fix-compose-profile Fixed Compose dependencies and switched to Docker managed volume	2026-01-28 21:56:32 +00:00
Louis King	96e4215c29	Fixed Compose dependencies and switched to Docker managed volume	2026-01-28 21:53:36 +00:00