diff --git a/.github/AGENTS.md b/.github/AGENTS.md
new file mode 100644
index 0000000..9afa87f
--- /dev/null
+++ b/.github/AGENTS.md
@@ -0,0 +1,120 @@
+# robotframework-dashboard — Agent Guide
+
+This file gives AI agents and contributors the context needed to work effectively in this codebase.
+
+---
+
+## Project Purpose
+
+`robotframework-dashboard` is a Python CLI tool that reads Robot Framework `output.xml` execution results, stores them in a SQLite database, and generates a fully self-contained HTML dashboard with interactive charts, tables, and filters. No web server is required to view the output — a single `.html` file contains all data, JS, and CSS.
+
+---
+
+## Core Pipeline: Python CLI → HTML Template → JavaScript
+
+The entire system is this three-stage pipeline:
+
+```
+1. PYTHON CLI
+   output.xml files
+       └─► OutputProcessor (robot.api ResultVisitor)
+               └─► SQLite database (runs / suites / tests / keywords tables)
+
+2. HTML TEMPLATE
+   database.get_data()
+       └─► DashboardGenerator
+               ├─► DependencyProcessor: merges all JS modules (topological sort) → inline <script>
+               ├─► DependencyProcessor: merges all CSS files → inline <style>
+               ├─► CDN or offline dependency tags
+               ├─► Data encoded as: JSON → zlib compress → base64 → string literal in HTML
+               └─► templates/dashboard.html (string placeholder replacement) → robot_dashboard.html
+
+3. JAVASCRIPT (runs in the browser)
+   js/variables/data.js decodes the embedded base64 data back to JS arrays
+       └─► Chart.js charts, DataTables, filters, layout — all from local data, zero server calls
+```
+
+The output is a **single `.html` file** that is entirely self-contained. All Robot Framework data is embedded as compressed strings; all JS and CSS is inlined.
+
+---
+
+## Entry Points
+
+| File | Role |
+|---|---|
+| `robotframework_dashboard/main.py` | CLI entry point (`robotdashboard` command) |
+| `robotframework_dashboard/robotdashboard.py` | `RobotDashboard` class — orchestrates all 5 pipeline steps |
+| `robotframework_dashboard/arguments.py` | `ArgumentParser` wrapping `argparse` |
+| `robotframework_dashboard/processors.py` | `OutputProcessor` + 4 `ResultVisitor` subclasses |
+| `robotframework_dashboard/database.py` | Built-in SQLite implementation |
+| `robotframework_dashboard/abstractdb.py` | `AbstractDatabaseProcessor` ABC (custom DB backends) |
+| `robotframework_dashboard/queries.py` | All SQL strings as module-level constants |
+| `robotframework_dashboard/dashboard.py` | `DashboardGenerator` — template rendering |
+| `robotframework_dashboard/dependencies.py` | `DependencyProcessor` — JS/CSS inlining and CDN switching |
+| `robotframework_dashboard/server.py` | Optional FastAPI server (`--server` flag) |
+
+---
+
+## JavaScript and CSS
+
+All frontend source lives under `robotframework_dashboard/js/` and `robotframework_dashboard/css/`. **There is no Node.js bundler (no webpack, Vite, or Rollup) for the dashboard.** Bundling is done in Python by `DependencyProcessor` at HTML generation time.
+
+Key JS directories:
+
+| Path | Contents |
+|---|---|
+| `js/variables/` | Global state, data decoding, settings, graph registry |
+| `js/graph_creation/` | Chart.js setup per tab (overview, run, suite, test, keyword, compare, tables) |
+| `js/graph_data/` | Data transformation modules that feed Chart.js |
+| `js/main.js` | Startup entry — imports and calls all setup functions |
+| `js/admin_page/` | Separate JS bundle for the server's `/admin` page only |
+
+See `.github/skills/js-bundling.md` for details on how JS modules are resolved, ordered, and embedded.
+
+---
+
+## HTML Templates
+
+Templates live in `robotframework_dashboard/templates/`. They use simple string placeholder tokens (not Jinja2):
+
+- `templates/dashboard.html` → generates `robot_dashboard.html`
+- `templates/admin.html` → generates the server's `/admin` page
+
+Key placeholders: `<!-- placeholder_javascript -->`, `<!-- placeholder_css -->`, `<!-- placeholder_dependencies -->`, `"placeholder_runs"`, `"placeholder_suites"`, `"placeholder_tests"`, `"placeholder_keywords"`.
+
+---
+
+## Database
+
+- Built-in: SQLite via `database.py`. Tables: `runs`, `suites`, `tests`, `keywords`.
+- Custom backends: implement `AbstractDatabaseProcessor` from `abstractdb.py`, point to it with `--databaseclass`.
+- Run identity: `run_start` timestamp. Duplicate runs are silently skipped.
+- Schema migrations are handled inline at DB open time via `ALTER TABLE ADD COLUMN`.
+
+---
+
+## Skills
+
+The `.github/skills/` directory contains domain-specific knowledge files:
+
+| Skill file | When to use |
+|---|---|
+| `project-architecture.md` | Understanding how components connect and navigating the codebase |
+| `dashboard.md` | Dashboard pages, Chart.js graphs, chart types, graph data/creation modules |
+| `js-bundling.md` | How JS/CSS is bundled and embedded into the HTML (no Node.js bundler) |
+| `conventions-and-gotchas.md` | Edge cases, run identity, offline mode, custom DBs, server auth model |
+| `coding-style.md` | Python/JS/CSS style conventions |
+| `workflows.md` | CLI usage, running tests, server mode, docs site |
+| `testing.md` | Test suite structure, pabot parallelism, how to add tests |
+| `server-api.md` | All REST endpoints, authentication, log linking, auto-update behavior |
+| `filtering-and-settings.md` | Filter pipeline, settings object, localStorage persistence, layout/GridStack system |
+
+---
+
+## Key Rules for AI Agents
+
+- **Never break the placeholder token names** in templates. Replacement is positional string substitution.
+- **When adding a new JS module**, import it from an existing module so `DependencyProcessor` can discover it via the dependency graph. The topological sort handles ordering automatically.
+- **Data always flows**: parse → DB → HTML. Do not bypass the pipeline.
+- **`package.json` is for the VitePress docs site only.** It has nothing to do with bundling dashboard JS.
+- **Offline mode** (`--offlinedependencies`) reads from `robotframework_dashboard/dependencies/`. Keep local copies in sync when upgrading library versions.
diff --git a/.github/skills/conventions-and-gotchas.md b/.github/skills/conventions-and-gotchas.md
index 615169b..d8c7546 100644
--- a/.github/skills/conventions-and-gotchas.md
+++ b/.github/skills/conventions-and-gotchas.md
@@ -5,9 +5,11 @@ description: Use when modifying core logic, adding features, or debugging issues
 # Project Conventions and Gotchas
 
 - Run identity is `run_start` from output.xml; duplicates are rejected. `run_alias` defaults to file name and may be auto-adjusted to avoid collisions.
-- If you add log support, log names must mirror output names (output-XYZ.xml -> log-XYZ.html) for `uselogs` and server log linking.
+- If you add log support, log names must mirror output names (output-XYZ.xml -> log-XYZ.html) for `uselogs` and server log linking. The server's `/add-log` endpoint enforces this naming convention at runtime.
 - `--projectversion` and `version_` tags are mutually exclusive; version tags are parsed from output tags in `RobotDashboard._process_single_output`.
 - Custom DB backends are supported via `--databaseclass`; the module must expose a `DatabaseProcessor` class compatible with `AbstractDatabaseProcessor`.
 - Offline mode is handled by embedding dependency content into the HTML; do not assume external CDN availability when `--offlinedependencies` is used.
 - Data flow is always: parse outputs -> DB -> HTML. Reuse `RobotDashboard` methods instead of reimplementing this flow.
 - Template changes should keep placeholder keys intact (e.g. `placeholder_runs`, `placeholder_css`) because replacements are string-based.
+- The server only applies HTTP Basic Auth to `/admin`. All other API endpoints (`/add-outputs`, `/remove-outputs`, `/get-outputs`, etc.) are unauthenticated by design.
+- After any mutation on the server (add/remove outputs, add/remove logs), the dashboard HTML is regenerated automatically unless `--no-autoupdate` is set. Use `POST /refresh-dashboard` to trigger it manually.
diff --git a/.github/skills/dashboard.md b/.github/skills/dashboard.md
index 808c2a6..a27c7c7 100644
--- a/.github/skills/dashboard.md
+++ b/.github/skills/dashboard.md
@@ -20,7 +20,7 @@ Raw database data in DataTables for runs, suites, tests, and keywords. Useful fo
 
 ## Chart.js Architecture
 
-### Central Config: `graph_config.js`
+### Central Config: `js/graph_data/graph_config.js`
 `get_graph_config(graphType, graphData, graphTitle, xTitle, yTitle)` is the single factory function that returns a complete Chart.js config object. All graphs route through it.
 
 ### Supported Chart Types
diff --git a/.github/skills/filtering-and-settings.md b/.github/skills/filtering-and-settings.md
new file mode 100644
index 0000000..ca584dc
--- /dev/null
+++ b/.github/skills/filtering-and-settings.md
@@ -0,0 +1,157 @@
+---
+description: Use when working on dashboard filters, settings, localStorage persistence, the JSON config system, graph layout, or the GridStack drag-and-drop layout editor.
+---
+
+# Filtering, Settings, and Layout
+
+## Overview
+
+The dashboard front-end has three tightly coupled systems:
+1. **Settings** — a single `settings` object that controls all display preferences, persisted in `localStorage`
+2. **Filtering** — a 10-stage pipeline that produces `filteredRuns/Suites/Tests/Keywords` from the raw decoded data
+3. **Layout** — GridStack-based drag-and-drop positioning + section ordering, also persisted in `settings`
+
+Key files: `js/variables/settings.js`, `js/variables/globals.js`, `js/filter.js`, `js/localstorage.js`, `js/eventlisteners.js`, `js/layout.js`
+
+---
+
+## Settings Object (`js/variables/settings.js`)
+
+The `settings` object is the single source of truth for all dashboard configuration. Top-level keys:
+
+| Key | Type | Contents |
+|---|---|---|
+| `switch` | Object | Feature toggles (booleans): run tags, total stats, latest runs, percentage filters, suite paths visibility, etc. |
+| `show` | Object | Display settings: date labels, legends, aliases, milliseconds, axis titles, animation, duration, rounding, timezone conversion |
+| `theme_colors` | Object | `light`, `dark`, and `custom: {light, dark}` sub-objects with color values |
+| `branding` | Object | `title`, `logo` |
+| `menu` | Object | Which tabs are visible: `overview`, `dashboard`, `compare`, `tables` |
+| `graphTypes` | Object | Per-graph chart type (e.g. `"bar"`, `"line"`, `"percentages"`) |
+| `view` | Object | Per-page `sections: {show, hide}` and `graphs: {show, hide}` lists for overview, unified, dashboard, compare, tables |
+
+**localStorage-only keys** (not in the defaults object but always preserved during merge):
+- `layouts` — GridStack position data per section
+- `libraries` — keyword library show/hide toggles
+- `theme` — `"dark"` or `"light"`
+- `filterProfiles` — named filter state snapshots
+
+---
+
+## localStorage Persistence (`js/localstorage.js`)
+
+`setup_local_storage()` resolves settings on every page load using this priority:
+
+1. `force_json_config && hasJsonConfig` → use provided JSON config (overrides localStorage)
+2. `storedSettings` in localStorage → deserialize and deep-merge with current defaults
+3. `!force_json_config && hasJsonConfig` → use JSON config as first-time default only
+4. Fallback → use hardcoded `settings` defaults
+
+After resolving, always writes back to `localStorage.setItem('settings', JSON.stringify(settings))`.
+
+`set_local_storage_item(path, value)` — updates the live `settings` object using a dot-separated path (e.g. `"show.legends"`) and persists immediately. Used by all settings toggle handlers.
+
+### Deep Merge Behavior (`merge_deep`)
+
+When merging persisted settings with current defaults:
+- `view` → `merge_view()`: preserves `show`/`hide` lists, **purges** entries for graphs/sections that no longer exist
+- `layouts` → `merge_layout()`: removes graph IDs that no longer exist in `collect_allowed_graphs()`
+- `theme_colors` → `merge_theme_colors()`: preserves the `custom` sub-key
+- Keys in localStorage that don't exist in defaults are **dropped** (schema migration) — **except** the four localStorage-only keys above
+
+---
+
+## JSON Config (`--jsonconfig` / `--forcejsonconfig`)
+
+`-j / --jsonconfig path` provides an initial settings JSON file. It is embedded into the generated HTML as `placeholder_json_config` and exposed as the `json_config` JS variable.
+
+`--forcejsonconfig` (boolean, default `False`) — when `True`, the JSON config overrides localStorage on every page load (`force_json_config` JS variable is `"true"`).
+
+In `localstorage.js`: if the placeholder string was not replaced (i.e. the string still contains `"placeholder_"`), `hasJsonConfig` is `false` and the JSON config branch is skipped entirely.
+
+---
+
+## Filtering Pipeline (`js/filter.js`)
+
+`setup_filtered_data_and_filters()` is called when the filter modal closes or on initial load. It runs these 10 stages in order:
+
+| Stage | What it does |
+|---|---|
+| 1. Remove milliseconds | Strips sub-second precision from `run_start` if `settings.show.milliseconds` is false |
+| 2. Convert timezone | Converts `run_start` timestamps to viewer's local timezone if `settings.show.convertTimezone` is true |
+| 3. Remove timezone display | Strips `+HH:MM` suffix if `settings.show.timezones` is false |
+| 4. `filter_runs()` | Filter by run name, `#runs` dropdown (`"All"` or specific name) |
+| 5. `filter_runtags()` | Filter by run tag checkboxes (`#runTag`); AND/OR logic via `#useOrTags`; returns empty if no tags selected |
+| 6. `filter_dates()` | Date range via `#fromDate`, `#fromTime`, `#toDate`, `#toTime`; validates range |
+| 7. `filter_amount()` | Keep last N runs (`#amount` input); handles edge cases (empty, negative, decimal/comma) |
+| 8. `filter_metadata()` | Filter by metadata key:value (`#metadata` dropdown; exact match against `run.metadata`) |
+| 9. `filter_project_versions()` | Filter by project version checkboxes (`#projectVersionList`); `"None"` covers runs with null version |
+| 10. `filter_data()` | Filter suites/tests/keywords to only include entries whose `run_start` is in `filteredRuns`; applies `settings.libraries` to exclude disabled keyword libraries |
+
+After filtering: updates count headlines (`#runTitle`, etc.), repopulates all dropdown selects (compare run selects, suite/test/keyword selects, test tag selects), then calls `sort_wall_clock()` to re-sort all four arrays chronologically.
+
+---
+
+## Filter Profiles
+
+Named snapshots of the filter modal state, stored in `settings.filterProfiles` (localStorage-only).
+
+- `build_profile_from_checks()` — captures all checkbox/input/select states from the filter modal
+- `apply_filter_profile(name)` — restores a saved profile into the modal's UI and triggers filtering
+- The active profile name and whether it has been modified since last save is shown in the profile dropdown
+
+---
+
+## Global State (`js/variables/globals.js`)
+
+Key mutable globals used across modules:
+
+| Global | Description |
+|---|---|
+| `filteredRuns`, `filteredSuites`, `filteredTests`, `filteredKeywords` | Current filtered data arrays (reassigned by `filter.js` after each filter pass) |
+| `filteredAmount` | Total count before amount-slicing (shown as "showing X of N runs") |
+| `gridUnified`, `gridRun`, `gridSuite`, `gridTest`, `gridKeyword`, `gridCompare` | GridStack instances per section |
+| `gridEditMode` | Boolean: layout editor is active |
+| `inFullscreen`, `inFullscreenGraph` | Fullscreen graph state; increases data limits (Top 10/30 → Top 50/100) |
+| `selectedRunSetting`, `selectedTagSetting` | Applied when navigating to dashboard from overview with a pre-selected filter |
+| `projects_by_tag`, `projects_by_name`, `latestRunByProjectTag`, `latestRunByProjectName` | Overview page project groupings (populated by `prepare_overview()`) |
+
+---
+
+## Layout System (`js/layout.js`)
+
+### Section Order
+
+`setup_section_order()` reads `settings.view.[page].sections.show` and `.hide` arrays, then uses jQuery `insertAfter()` to rearrange section `<div>` elements relative to DOM anchor elements (`#topDashboardSection`, `#topOverviewSection`). In `gridEditMode`, hidden sections are also rendered with move-up/move-down and show/hide toggle buttons.
+
+### Graph Layout (GridStack)
+
+One `GridStack` instance per section. Config: `cellHeight: 100`, `float: false`, `resizable: { handles: 'all' }`. Grid is disabled (non-draggable/resizable) outside edit mode.
+
+Each graph is a `grid-stack-item` with attributes: `gs-x`, `gs-y`, `gs-w` (default 4), `gs-h` (default 4), min/max constraints (w: 3–12, h: 3–12), and `data-gs-id`.
+
+**Saved positioning**: `settings.layouts.gridRun` (and `.gridSuite`, `.gridTest`, etc.) holds GridStack layout as a JSON string `[{id, x, y, w, h}, ...]`. On load, saved coordinates are applied if present; otherwise sequential left-to-right placement is computed (4 wide, 3 columns, then wrap).
+
+In normal mode, hidden graphs are rendered to a `#[section]DataHidden` container (no GridStack) so their data computations still run.
+
+### Edit Mode Flow
+
+1. User clicks "Customize Layout" → `gridEditMode = true` → full re-render with drag/resize enabled and show/hide buttons visible
+2. User drags/resizes graphs, reorders sections, toggles show/hide buttons
+3. User clicks "Save Layout" → `save_layout()`:
+   - Reads `window[gridId].engine.nodes` for `{x, y, w, h, id}` per widget
+   - Reads `.shown-graph`/`.hidden-graph` button visibility for show/hide lists
+   - Reads DOM order of `.move-up-section` for section order
+   - Persists all to localStorage via `set_local_storage_item`
+4. `gridEditMode = false` → full re-render in normal mode
+
+### Layout Merge on Load
+
+`merge_layout()` in `localstorage.js` purges any saved layout entries whose `id` is not in `collect_allowed_graphs()` — prevents stale graph references after settings changes remove graphs.
+
+---
+
+## Event Wiring (`js/eventlisteners.js`)
+
+`setup_filter_modal()` — wires all filter modal controls. The Bootstrap `hidden.bs.modal` event triggers `setup_filtered_data_and_filters()` + `update_dashboard_graphs()` (with a loading overlay and double `requestAnimationFrame` to let the DOM settle before rendering).
+
+`setup_settings_modal()` — data-driven: an array of `{key, elementId, isNumber}` objects creates toggle handlers for all settings checkboxes/inputs. For each: loads stored value on init, attaches change listener that calls `set_local_storage_item(key, value)`. Theme color pickers use `create_theme_color_handler()`, which reads/writes `settings.theme_colors.custom.[light|dark].[colorKey]`.
diff --git a/.github/skills/js-bundling.md b/.github/skills/js-bundling.md
new file mode 100644
index 0000000..978fae6
--- /dev/null
+++ b/.github/skills/js-bundling.md
@@ -0,0 +1,167 @@
+---
+description: Use when adding, modifying, or debugging JavaScript modules, CSS, external dependencies, or the HTML embedding process.
+---
+
+# JavaScript and CSS Bundling
+
+## Overview
+
+There is **no Node.js bundler** (no webpack, Vite, Rollup, or esbuild) for the dashboard. All JS and CSS bundling happens in Python at dashboard generation time inside `robotframework_dashboard/dependencies.py`, executed by `DashboardGenerator` in `robotframework_dashboard/dashboard.py`.
+
+The result is a single `<script>` block and a single `<style>` block inlined into the generated HTML. The browser receives one file with everything inside it.
+
+---
+
+## File Locations
+
+| Source | Directory |
+|---|---|
+| Dashboard JS modules | `robotframework_dashboard/js/` |
+| Dashboard CSS | `robotframework_dashboard/css/` |
+| Admin page JS/CSS | `robotframework_dashboard/js/admin_page/` |
+| Third-party local copies | `robotframework_dashboard/dependencies/` |
+| HTML templates | `robotframework_dashboard/templates/` |
+
+---
+
+## How JS Modules Are Bundled (`DependencyProcessor`)
+
+The class `DependencyProcessor` in `dependencies.py` performs these steps for dashboard JS:
+
+### Step 1 — Collect
+All `.js` files under `robotframework_dashboard/js/` are collected recursively, **excluding** the `admin_page/` subdirectory (that has its own separate bundle).
+
+### Step 2 — Parse the Dependency Graph
+Each file is scanned for `import ... from '...'` statements. The relative paths in those imports are resolved to build an adjacency list representing which file depends on which other file.
+
+### Step 3 — Topological Sort (DFS)
+A depth-first topological sort determines the correct concatenation order so that every module is defined before the files that depend on it. `js/main.js` is the root that everything ultimately imports from.
+
+### Step 4 — Strip Module Syntax
+Because the output is a plain `<script>` block (not an ES module), all `import`, `export`, and `export default` statements are stripped with regex. Variables and functions that were exported remain in the global script scope, accessible to all other code in the same block.
+
+### Step 5 — Concatenate and Wrap
+All files are concatenated with `// === filename.js ===` section comments between them, then wrapped:
+
+```html
+<script>
+// MERGED MODULES
+// === variables/data.js ===
+...
+// === main.js ===
+...
+</script>
+```
+
+This block replaces `<!-- placeholder_javascript -->` in `templates/dashboard.html`.
+
+---
+
+## How CSS Is Bundled
+
+`DependencyProcessor._inline_css_files()` reads all `.css` files under `robotframework_dashboard/css/` in sorted order (`base.css`, `colors.css`, `components.css`, `dark.css`) and concatenates them into a single `<style>` block that replaces `<!-- placeholder_css -->`.
+
+---
+
+## Third-Party Dependencies
+
+The `DEPENDENCIES` dict in `dependencies.py` declares every third-party library. Each entry specifies:
+- A CDN URL (jsdelivr, cdnjs, unpkg, datatables.net)
+- A local file path under `dependencies/` for offline fallback
+- Whether it is CSS or JS
+- Whether it is `admin_page`-only (Bootstrap, DataTables, jQuery — excluded from the standalone dashboard)
+
+### Online Mode (default)
+Emits `<script src="cdn-url">` or `<link rel="stylesheet" href="cdn-url">` tags that replace `<!-- placeholder_dependencies -->`. The browser fetches these from the CDN.
+
+### Offline Mode (`--offlinedependencies`)
+Reads each local file from `robotframework_dashboard/dependencies/` and embeds it inline as a `<script>` or `<style>` block. The dashboard works with no internet access.
+
+Current third-party libraries:
+
+| Library | Purpose |
+|---|---|
+| Chart.js | All charts |
+| chartjs-plugin-datalabels | Data label annotations on charts |
+| chartjs-adapter-date-fns | Date/time axis formatting |
+| @sgratzl/chartjs-chart-boxplot | Box plot chart type |
+| chartjs-chart-matrix | Matrix/heatmap chart type |
+| GridStack | Drag-and-drop dashboard layout |
+| Pako | `pako.inflate()` — decompress embedded data in the browser |
+| Bootstrap *(admin only)* | Admin page UI |
+| DataTables *(admin only)* | Admin page tables |
+
+---
+
+## JS Module Structure
+
+```
+js/
+  variables/
+    data.js          ← decodes compressed runs/suites/tests/keywords data
+    globals.js       ← mutable global state (active filters, selected runs)
+    settings.js      ← settings state
+    graphs.js        ← graph instance registry
+    graphmetadata.js ← graph metadata (title, tab, build function)
+    chartconfig.js   ← Chart.js base config factory
+    information.js   ← DOM element lookups
+    svg.js           ← inline SVG icon strings
+  graph_creation/
+    chart_factory.js ← create_chart() / update_chart() — Chart.js lifecycle
+    overview.js      ← overview page chart builders
+    run.js           ← run-level chart builders
+    suite.js         ← suite-level chart builders
+    test.js          ← test-level chart builders
+    keyword.js       ← keyword-level chart builders
+    compare.js       ← comparison page chart builders
+    tables.js        ← DataTables initializers
+    config_helpers.js
+    all.js           ← calls all tab section builders
+  graph_data/        ← pure data transformation (statistics, duration, heatmap, donut, ...)
+  common.js          ← shared utilities
+  database.js        ← DB statistics display
+  eventlisteners.js  ← modal/filter/settings event wiring
+  filter.js          ← filtering logic applied to global data arrays
+  information.js     ← element setup helpers
+  layout.js          ← GridStack layout initialization
+  localstorage.js    ← settings/layout persistence
+  log.js             ← log.html link generation
+  menu.js            ← navbar and tab setup
+  theme.js           ← dark/light theme switching
+  main.js            ← startup entry point (imports and calls all setup functions)
+  admin_page/        ← separate bundle for the FastAPI /admin page
+```
+
+---
+
+## Adding a New JS Module
+
+1. Create the `.js` file anywhere under `robotframework_dashboard/js/` (except `admin_page/` unless it is admin-only).
+2. Add `import { something } from './your-module.js'` in an existing module that should use it (e.g. `main.js` or one of the `graph_creation/` files).
+3. Use `export` or `export default` for any symbols other files need.
+4. `DependencyProcessor` will automatically discover the file via the import graph, topologically sort it, and include it in the bundled `<script>`.
+
+**Do not** manually list JS files anywhere. The dependency graph is the only required registration.
+
+---
+
+## Data Encoding (Python → HTML → Browser)
+
+Robot Framework data is embedded in the HTML as compressed strings:
+
+**Python (generation time):**
+```python
+json.dumps(data).encode("utf-8")  # serialize
+→ zlib.compress(...)              # compress  
+→ base64.b64encode(...).decode()  # encode to ASCII string
+→ embedded as "placeholder_runs" literal in template
+```
+
+**JavaScript (browser):**
+```javascript
+// js/variables/data.js
+const runs = decode_and_decompress("placeholder_runs");
+// atob() → Uint8Array → pako.inflate() → JSON.parse()
+```
+
+Pako (the JS zlib port) is the only dependency required to decode data, so it must always be loaded before `data.js` runs.
diff --git a/.github/skills/server-api.md b/.github/skills/server-api.md
new file mode 100644
index 0000000..77655cf
--- /dev/null
+++ b/.github/skills/server-api.md
@@ -0,0 +1,125 @@
+---
+description: Use when working on the FastAPI server, adding or modifying API endpoints, handling authentication, log linking, or the admin page.
+---
+
+# Server API
+
+## Overview
+
+The server is an optional FastAPI application started with `robotdashboard --server` (or `-s host:port:user:pass`). It wraps a persistent `RobotDashboard` instance and exposes REST endpoints for managing outputs and serving the dashboard. Implementation is in `robotframework_dashboard/server.py`.
+
+---
+
+## Starting the Server
+
+```bash
+robotdashboard --server                         # localhost:8000, no auth
+robotdashboard -s 0.0.0.0:9000:admin:secret    # custom host:port:user:pass
+```
+
+Served with **uvicorn** via `fastapi_offline.FastAPIOffline`.
+
+---
+
+## Authentication
+
+- HTTP Basic Auth is implemented using `HTTPBasic` + `secrets.compare_digest` (constant-time comparison)
+- **Only `/admin` requires credentials** when `server_user` and `server_pass` are set
+- All other endpoints (`/add-outputs`, `/remove-outputs`, etc.) are **unauthenticated by design**
+- If no credentials are configured, `/admin` is also open
+
+---
+
+## All Endpoints
+
+| Method | Path | Auth | Description |
+|---|---|---|---|
+| `GET` | `/` | None | Serves `robot_dashboard.html` from the working directory |
+| `GET` | `/admin` | Basic (if configured) | Serves the admin page HTML (generated from `templates/admin.html`) |
+| `POST` | `/refresh-dashboard` | None | Manually triggers `robotdashboard.create_dashboard()` without adding data |
+| `GET` | `/get-outputs` | None | Returns list of `{run_start, name, alias, tags}` for all stored runs |
+| `POST` | `/add-outputs` | None | Add output(s) from a path, raw XML string, or folder. See body fields below. |
+| `POST` | `/add-output-file` | None | Multipart upload of `output.xml` (or `.gz`/`.gzip`). Form fields: `tags` (colon-separated), `version`. |
+| `DELETE` | `/remove-outputs` | None | Remove runs by various selectors. See body fields below. |
+| `GET` | `/get-logs` | None | Lists filenames in `robot_logs/` |
+| `POST` | `/add-log` | None | Saves HTML log content to `robot_logs/<log_name>` and links it to the matching run in the DB |
+| `POST` | `/add-log-file` | None | Same as `/add-log` but via multipart file upload (supports `.gz`/`.gzip`) |
+| `DELETE` | `/remove-log` | None | Removes one log by `log_name`, or all logs with `all: True` |
+| `GET` | `/log` | None | Serves a log HTML file by `?path=` query param; stores parent dir for subsequent resource requests |
+| `GET` | `/{full_path:path}` | None | Catch-all: serves static resources (screenshots, etc.) relative to the last served log's directory. Path-traversal protected. |
+
+---
+
+## Request Body Fields
+
+### `POST /add-outputs`
+Exactly one input source must be provided (mutually exclusive):
+
+| Field | Type | Description |
+|---|---|---|
+| `output_path` | `str` | Absolute path to an `output.xml` file |
+| `output_data` | `str` | Raw XML content (written to a temp file) |
+| `output_folder_path` | `str` | Folder scanned recursively for `*output*.xml` files |
+| `output_tags` | `List[str]` | Optional tags to attach to all added runs |
+| `output_alias` | `str` | Optional alias override |
+| `output_version` | `str` | Optional project version string |
+
+### `DELETE /remove-outputs`
+Any combination of the following:
+
+| Field | Type | Description |
+|---|---|---|
+| `run_starts` | `List[str]` | Run start timestamps (exact match) |
+| `indexes` | `List[str]` | Positional indexes; supports negatives and range syntax (e.g. `"0:5"`) |
+| `aliases` | `List[str]` | Run aliases |
+| `tags` | `List[str]` | Run tags |
+| `limit` | `int` | Keep only the N most recent runs, remove the rest |
+| `all` | `bool` | Remove all runs |
+
+---
+
+## Response Model
+
+All mutation endpoints return `ResponseMessage`:
+
+```json
+{ "success": "1", "message": "...", "console": "..." }
+```
+
+- `success`: `"1"` on success, `"0"` on error
+- `message`: human-readable summary
+- `console`: raw stdout-style log from the `RobotDashboard` processor
+
+---
+
+## Auto-Update Behavior
+
+After any mutation (add/remove outputs, add/remove logs):
+- If `no_autoupdate` is `False` (default): `robotdashboard.create_dashboard()` is called automatically to regenerate the HTML
+- If `no_autoupdate` is `True` (set via `--no-autoupdate` flag): regeneration is skipped; call `POST /refresh-dashboard` manually
+
+---
+
+## Log File Naming Convention
+
+Log files linked to runs **must** follow this naming pattern:
+
+```
+output-XYZ.xml  ←→  log-XYZ.html
+```
+
+The suffix `XYZ` must match between the output file and its corresponding log. The server's `/add-log` and `/add-log-file` endpoints enforce this convention when calling `update_output_path()` to link the log to the correct run in the DB.
+
+---
+
+## Server State
+
+The `ApiServer` instance holds:
+
+| Attribute | Description |
+|---|---|
+| `self.robotdashboard` | The `RobotDashboard` instance (set via `set_robotdashboard()`) |
+| `self.server_user` / `self.server_pass` | Basic auth credentials (empty = no auth) |
+| `self.no_autoupdate` | Skip HTML regeneration after mutations |
+| `self.log_dir` | Directory for log HTML files (default: `robot_logs/`) |
+| `self.latest_log_dir` | Parent dir of the last served log file (used by catch-all route) |
diff --git a/.github/skills/testing.md b/.github/skills/testing.md
new file mode 100644
index 0000000..1460799
--- /dev/null
+++ b/.github/skills/testing.md
@@ -0,0 +1,120 @@
+---
+description: Use when running tests, adding new tests, understanding how the test suite is structured, or debugging test failures.
+---
+
+# Testing
+
+## Overview
+
+All tests are **Robot Framework acceptance tests** run with **pabot**. There are no pytest or unittest files. Tests live in `atest/testsuites/`.
+
+---
+
+## Running Tests
+
+```bash
+# Windows
+pabot --pabotlib --testlevelsplit --artifacts png,jpg --artifactsinsubfolders --processes 2 -d results .\atest\testsuites\*.robot
+
+# Linux / macOS
+pabot --pabotlib --testlevelsplit --artifacts png,jpg --artifactsinsubfolders --processes 2 -d results atest/testsuites/*.robot
+```
+
+Convenience scripts: `scripts/tests.bat` and `scripts/tests.sh`.
+
+Key pabot flags:
+- `--pabotlib` — starts the pabot shared library server (required for cross-process locks used by the index counter)
+- `--testlevelsplit` — each individual test case runs in parallel, not each suite
+- `--artifacts png,jpg --artifactsinsubfolders` — collects screenshots from each pabot worker's output dir
+- `-d results` — all output goes to `results/`
+
+---
+
+## Test Dependencies (`requirements-test.txt`)
+
+| Library | Role |
+|---|---|
+| `robotframework-pabot` | Parallel test runner |
+| `robotframework-browser` | Playwright-based browser automation |
+| `robotframework-databaselibrary` | SQLite query assertions |
+| `robotframework-doctestlibrary` | Visual screenshot comparison |
+
+---
+
+## Suite Structure
+
+| Suite | What it tests | Method |
+|---|---|---|
+| `00_cli.robot` | Every CLI flag (short + long form) | Runs `robotdashboard` as a subprocess, checks stdout/files against `atest/resources/cli_output/` |
+| `01_database.robot` | SQLite table contents after parsing | Queries the DB via DatabaseLibrary, compares rows against `atest/resources/database_output/` |
+| `02_overview.robot` | Overview page rendering | Browser screenshot diff vs. reference images |
+| `03_dashboard.robot` | Dashboard tab charts/layout | Browser screenshot diff |
+| `04_compare.robot` | Compare page | Browser screenshot diff |
+| `05_tables.robot` | Tables page | Browser screenshot diff |
+| `06_filters.robot` | Filter modal behavior | Browser interactions + screenshot diff |
+| `07_settings.robot` | Settings modal behavior | Browser interactions + screenshot diff |
+
+`atest/testsuites/__init__.robot` is the **suite init** — it detects OS at suite setup (stored as global variable), sets a 60-second global test timeout, and runs `Remove Index` + `Move All Screenshots` as a single teardown (`Run Teardown Only Once`).
+
+---
+
+## Parallel-Safe Index System
+
+Because tests run in parallel and each test needs its own `.db` and `.html` files, the test infrastructure uses an **atomic counter**:
+
+- `atest/resources/keywords/general-keywords.resource` provides `Get Dashboard Index`
+- Uses `Acquire Lock` (pabot lock) to atomically read/write `atest/resources/index.txt`
+- Each test gets a unique integer N, and works with `robotresults_N.db` + `robotdashboard_N.html`
+- `Remove Database And Dashboard With Index` cleans up both files in teardown
+
+---
+
+## CLI Tests (`00_cli.robot`)
+
+- Each flag has two tests: short form (`-x`) and long form (`--flag`)
+- Uses `Validate CLI` keyword: runs `robotdashboard <cmd>` via `Run` (OperatingSystem library)
+- Compares output against expected files in `atest/resources/cli_output/`
+- Server tests (`-s`) are currently skipped
+- OS-specific tests (e.g. `-c` custom DB class) skip on non-Windows
+
+---
+
+## Database Tests (`01_database.robot`)
+
+- Test Setup generates a fresh dashboard and opens a SQLite connection
+- Tests query each of the four tables (`runs`, `suites`, `tests`, `keywords`) via `DatabaseLibrary`
+- Result strings are normalized (path separators, timezone offsets) via regex before comparison against `atest/resources/database_output/` reference files
+
+---
+
+## Browser Tests (`02–07`)
+
+- Use `robotframework-browser` (Playwright, headless Chromium)
+- Open a generated `robotdashboard_N.html` via `file://` URL (no server needed)
+- Interact with UI (clicks, fills, waits for elements)
+- Take screenshots and compare with reference images in `atest/resources/dashboard_output/`
+- Comparison uses `DocTest.VisualTest` at **98% accuracy** (`threshold=0.02`)
+- Screenshots per worker are moved to `results/screenshots/` in the suite teardown so they appear in `log.html`
+
+---
+
+## Shared Resources
+
+| File | Contents |
+|---|---|
+| `atest/resources/keywords/general-keywords.resource` | `Get Dashboard Index`, `Generate Dashboard`, `Remove Database And Dashboard With Index` |
+| `atest/resources/keywords/database-keywords.resource` | DB connection helpers, normalization, row comparison |
+| `atest/resources/keywords/dashboard-keywords.resource` | Browser lifecycle, filter helpers (`Set Run Filter`, `Set Date Filter`, `Set Amount Filter`), screenshot comparison, `Change Settings` |
+| `atest/resources/outputs/` | Input `output.xml` files used as test fixtures |
+| `atest/resources/cli_output/` | Expected CLI output reference files |
+| `atest/resources/database_output/` | Expected DB row reference files |
+| `atest/resources/dashboard_output/` | Reference screenshots for visual comparison |
+
+---
+
+## Adding a New Test
+
+1. **CLI test**: add two test cases in `00_cli.robot` (short + long form), add expected output file to `atest/resources/cli_output/`
+2. **Database test**: add test case in `01_database.robot`, add reference row file to `atest/resources/database_output/`
+3. **Browser test**: add test case in the relevant suite (`02–07`), capture a reference screenshot and add to `atest/resources/dashboard_output/`
+4. All tests should use `Get Dashboard Index` for a unique file suffix to stay parallel-safe
diff --git a/.github/skills/workflows.md b/.github/skills/workflows.md
index 1a89944..4a121ec 100644
--- a/.github/skills/workflows.md
+++ b/.github/skills/workflows.md
@@ -7,9 +7,27 @@ description: Use when running the CLI, starting the server, or building/previewi
 ## CLI
 - Usage and flags: see `docs/basic-command-line-interface-cli.md` (output import, tags, remove runs, dashboard generation).
 
+## Running Tests
+
+All tests are Robot Framework acceptance tests run with **pabot** (parallel executor). There are no pytest/unittest files.
+
+```bash
+# Windows
+pabot --pabotlib --testlevelsplit --artifacts png,jpg --artifactsinsubfolders --processes 2 -d results .\atest\testsuites\*.robot
+
+# Linux / macOS
+pabot --pabotlib --testlevelsplit --artifacts png,jpg --artifactsinsubfolders --processes 2 -d results atest/testsuites/*.robot
+```
+
+Convenience scripts: `scripts/tests.bat` and `scripts/tests.sh`.
+
+Key flags: `--pabotlib` starts the shared lock server; `--testlevelsplit` runs each test case in parallel (not suite-level); `-d results` captures output in `results/`.
+
+See `.github/skills/testing.md` for full details on the three test tiers and how to add tests.
+
 ## Server Mode
 - Start with `robotdashboard --server` or `-s host:port:user:pass`.
-- See `docs/dashboard-server.md` for endpoints and admin UI behavior.
+- See `docs/dashboard-server.md` and `.github/skills/server-api.md` for endpoints and admin UI behavior.
 
 ## Documentation Site
 - Run `npm run docs:dev` for local dev, `npm run docs:build` to build, `npm run docs:preview` to preview.
diff --git a/.gitignore b/.gitignore
index db291bb..3d27335 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,7 +13,6 @@ index.txt
 .pabotsuitenames
 *.db
 *.vscode
-.github/*.md
 log.html
 output.xml
 report.html
diff --git a/docs/customization.md b/docs/customization.md
index ea8f1e8..8a8c7dc 100644
--- a/docs/customization.md
+++ b/docs/customization.md
@@ -62,6 +62,26 @@ Each color has a **Reset** button to restore its default value. Light and dark m
 
 See [Settings - Theme Tab](/settings#theme-settings-theme-tab) for more details.
 
+### 6. Custom Branding (Title and Logo)
+
+The **Theme** tab also lets you personalize the navigation bar with your own branding:
+
+- **Custom Title** — type a label into the *Custom Title* field and it appears in the menu bar next to the logo. Leave the field blank to hide it. The title is stored in localStorage under `branding.title`.
+- **Custom Logo** — upload a PNG image via the *Custom Logo* file picker to replace the default Robot Framework logo in the navigation bar. Click **Reset** to restore the default logo. The image is stored as a data-URL in localStorage under `branding.logo`.
+
+Both settings take effect immediately and persist across page reloads.
+
+### 7. Responsive Menu Bar
+
+The navigation bar automatically adapts to any screen width — no manual configuration required:
+
+- When the viewport becomes too narrow to display all page links, the menu items (*Overview*, *Dashboard*, *Compare*, *Tables*, etc.) are moved into a **slide-in sidebar**.
+- If the viewport is even smaller and the icon shortcuts also no longer fit, those move into the sidebar too.
+- A **hamburger button** (☰) appears in the top-right corner whenever items have been moved to the sidebar. Clicking it opens the sidebar; clicking the backdrop or the close button dismisses it.
+- The sidebar reorganizes itself to reflect the current page order configured by the user.
+
+This behavior is fully automatic and requires no action from the user.
+
 ### 6. Viewing (and Editing) the JSON Configuration
 
 You can directly inspect the full configuration—exactly as the UI generates it—by opening the `view` key in the JSON output.  
diff --git a/docs/settings.md b/docs/settings.md
index 8167048..d92980d 100644
--- a/docs/settings.md
+++ b/docs/settings.md
@@ -13,7 +13,7 @@ The settings modal is divided into **five tabs**:
 1. **Graphs** – general dashboard and chart behavior  
 2. **Keywords** – which keyword libraries appear in keyword graphs  
 3. **Overview** – controls for the Overview page layout and toggles  
-4. **Theme** – custom color overrides for light and dark mode  
+4. **Theme** – custom color overrides for light and dark mode, plus custom title and logo branding  
 5. **JSON** – direct editing of the full JSON config for advanced users  
 
 ## Theme Toggle
@@ -89,9 +89,9 @@ The **Overview** tab controls which sections and filters are visible on the Over
 
 ## Theme Settings (Theme Tab)
 
-The **Theme** tab allows you to override the default colors used by the dashboard in both light and dark modes. Each mode has independent color customization.
+The **Theme** tab allows you to override the default colors used by the dashboard in both light and dark modes, and to set custom branding (title and logo) for the menu bar. Each mode has independent color customization.
 
-### Details
+### Color Details
 
 | Color | Description |
 |-------|-------------|
@@ -100,17 +100,26 @@ The **Theme** tab allows you to override the default colors used by the dashboar
 | **Highlight** | The accent color used for hover states and interactive elements. |
 | **Text** | The primary text color across the dashboard. |
 
+### Branding Details
+
+| Setting | Description |
+|---------|-------------|
+| **Custom Title** | A text label shown in the navigation bar next to the logo. Type any text to set it; leave blank to hide it. |
+| **Custom Logo** | Upload a PNG image to replace the default Robot Framework logo in the navigation bar. Only PNG files are accepted. |
+
 ### Usage
 
 - Select **Light** or **Dark** mode to edit the colors for that theme  
 - Use the color pickers to set custom values  
 - Each color has a **Reset** button to restore its default value  
-- Changes apply immediately when closing the modal  
+- Type into the **Custom Title** field to display a branded label in the menu bar  
+- Upload a PNG via **Custom Logo** to replace the Robot Framework logo; click **Reset** to restore the default  
+- Changes apply immediately — no need to close the modal  
 
 ### Saving Theme Settings
 
 - Closing the modal **automatically saves** your theme selections  
-- Theme colors are stored in localStorage alongside other settings  
+- Theme colors and branding are stored in localStorage alongside other settings  
 - Export via the JSON tab to share custom themes with your team
 
 ## JSON Settings (JSON Tab)
diff --git a/robotframework_dashboard/css/base.css b/robotframework_dashboard/css/base.css
index 1526e53..9c2e8be 100644
--- a/robotframework_dashboard/css/base.css
+++ b/robotframework_dashboard/css/base.css
@@ -208,6 +208,19 @@ body.lock-scroll {
 
 .navbar {
   margin-bottom: 1rem;
+  flex-wrap: nowrap !important;
+  overflow: hidden;
+}
+
+#mainNavItems {
+  white-space: nowrap;
+  min-width: 0;
+  flex-shrink: 1;
+}
+
+#iconNavItems {
+  flex-shrink: 0;
+  flex-wrap: nowrap !important;
 }
 
 #navigation .nav-link svg {
@@ -215,3 +228,110 @@ body.lock-scroll {
   height: 24px;
   display: block;
 }
+
+/* ── Sidebar (off-canvas menu for overflowed items) ── */
+.sidenav-backdrop {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 1049;
+}
+.sidenav {
+  position: fixed;
+  top: 0; left: 0; bottom: 0;
+  width: 280px;
+  max-width: 85vw;
+  z-index: 1050;
+  background: var(--color-card);
+  border-right: 1px solid var(--bs-border-color);
+  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+  transform: translateX(-100%);
+  transition: transform 0.25s ease;
+}
+.sidenav.sidenav-open {
+  transform: translateX(0);
+}
+.sidenav-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--bs-border-color);
+  flex-shrink: 0;
+}
+.sidenav-title {
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--color-text);
+}
+.sidenav-close {
+  background: none;
+  border: none;
+  font-size: 1.4rem;
+  line-height: 1;
+  color: var(--color-text);
+  cursor: pointer;
+  padding: 0 4px;
+}
+.sidenav-close:hover {
+  color: var(--color-highlight);
+}
+.sidenav-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+.sidenav-section-label {
+  padding: 10px 16px 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+  letter-spacing: 0.05em;
+}
+.sidenav-body .sidenav-nav-item {
+  display: block;
+  padding: 6px 16px;
+  color: var(--color-menu-text);
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-left: 3px solid transparent;
+}
+.sidenav-body .sidenav-nav-item:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--color-highlight);
+}
+.sidenav-body .sidenav-nav-item.active {
+  border-left-color: var(--color-highlight);
+  color: var(--color-highlight);
+}
+.sidenav-body .sidenav-nav-submenu {
+  padding-left: 32px;
+  font-style: italic;
+}
+.sidenav-icon-row {
+  display: grid;
+  grid-template-columns: repeat(3, auto);
+  gap: 4px;
+  padding: 6px 16px;
+  justify-content: start;
+}
+.sidenav-icon-row .nav-link {
+  padding: 6px;
+}
+.sidenav-icon-row .nav-link svg {
+  width: 22px;
+  height: 22px;
+  display: block;
+}
+
+#menuCustomTitle {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/robotframework_dashboard/js/eventlisteners.js b/robotframework_dashboard/js/eventlisteners.js
index 2ed1e44..d9ebe1d 100644
--- a/robotframework_dashboard/js/eventlisteners.js
+++ b/robotframework_dashboard/js/eventlisteners.js
@@ -14,7 +14,7 @@ import {
 } from "./variables/globals.js";
 import { arrowDown, arrowRight } from "./variables/svg.js";
 import { fullscreenButtons, graphChangeButtons, compareRunIds } from "./variables/graphs.js";
-import { toggle_theme, apply_theme_colors } from "./theme.js";
+import { toggle_theme, apply_theme_colors, apply_custom_branding } from "./theme.js";
 import { add_alert, show_graph_loading, hide_graph_loading, update_graphs_with_loading, show_loading_overlay, hide_loading_overlay } from "./common.js";
 import { setup_data_and_graphs, update_menu } from "./menu.js";
 import { update_dashboard_graphs } from "./graph_creation/all.js";
@@ -442,6 +442,11 @@ function setup_settings_modal() {
         cardColorHandler.load_color();
         highlightColorHandler.load_color();
         textColorHandler.load_color();
+        // Load branding state
+        document.getElementById('customBrandingTitle').value = settings.branding?.title || "";
+        const hasLogo = !!settings.branding?.logo;
+        document.getElementById('removeCustomLogo').disabled = !hasLogo;
+        document.getElementById('customLogoUpload').value = "";
     });
 
     // Add event listeners for color inputs
@@ -456,6 +461,39 @@ function setup_settings_modal() {
     document.getElementById('resetHighlightColor').addEventListener('click', () => highlightColorHandler.reset_color());
     document.getElementById('resetTextColor').addEventListener('click', () => textColorHandler.reset_color());
 
+    // Custom title handler
+    document.getElementById('customBrandingTitle').addEventListener('input', function () {
+        const title = this.value.trim();
+        set_local_storage_item('branding.title', title);
+        apply_custom_branding();
+    });
+
+    document.getElementById('clearCustomTitle').addEventListener('click', function () {
+        document.getElementById('customBrandingTitle').value = "";
+        set_local_storage_item('branding.title', "");
+        apply_custom_branding();
+    });
+
+    // Custom logo handler
+    document.getElementById('customLogoUpload').addEventListener('change', function () {
+        const file = this.files[0];
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = function (e) {
+            set_local_storage_item('branding.logo', e.target.result);
+            document.getElementById('removeCustomLogo').disabled = false;
+            apply_custom_branding();
+        };
+        reader.readAsDataURL(file);
+    });
+
+    document.getElementById('removeCustomLogo').addEventListener('click', function () {
+        set_local_storage_item('branding.logo', "");
+        document.getElementById('customLogoUpload').value = "";
+        this.disabled = true;
+        apply_custom_branding();
+    });
+
     function show_settings_in_textarea() {
         const textArea = document.getElementById("settingsTextArea");
         textArea.value = JSON.stringify(settings, null, 2);
diff --git a/robotframework_dashboard/js/main.js b/robotframework_dashboard/js/main.js
index f46f3bc..a3af872 100644
--- a/robotframework_dashboard/js/main.js
+++ b/robotframework_dashboard/js/main.js
@@ -7,7 +7,7 @@ import {
     setup_filter_modal,
     setup_settings_modal,
 } from "./eventlisteners.js";
-import { setup_menu } from "./menu.js";
+import { setup_menu, setup_navbar_overflow } from "./menu.js";
 
 // function that triggers all functions that should be executed when the dashboard is loaded first
 // in the correct order!
@@ -20,6 +20,7 @@ function main() {
     setup_filter_modal();
     setup_settings_modal();
     setup_menu();
+    setup_navbar_overflow();
 }
 
 Chart.register(ChartDataLabels);
diff --git a/robotframework_dashboard/js/menu.js b/robotframework_dashboard/js/menu.js
index 2622ace..1a8d77b 100644
--- a/robotframework_dashboard/js/menu.js
+++ b/robotframework_dashboard/js/menu.js
@@ -1,5 +1,5 @@
 import { setup_filtered_data_and_filters, update_overview_version_select_list } from "./filter.js";
-import { areGroupedProjectsPrepared } from "./variables/globals.js";
+import { areGroupedProjectsPrepared, overviewNavStore } from "./variables/globals.js";
 import { space_to_camelcase } from "./common.js";
 import { set_local_storage_item, setup_overview_localstorage } from "./localstorage.js";
 import { create_dashboard_graphs } from "./graph_creation/all.js";
@@ -10,12 +10,6 @@ import { setup_section_order, setup_graph_order, setup_overview_section_layout_b
 import { setup_information_popups } from "./information.js";
 import { prepare_overview, update_overview_prefix_display } from "./graph_creation/overview.js";
 
-// Track overview nav listeners so we can cleanly remove them when leaving Overview
-let __overviewNavStore = {
-    scrollHandler: null,
-    resizeHandler: null,
-};
-
 // ---- Shared helpers for menu buttons ----
 function get_sticky_height() {
     const stickyTop = document.getElementById("navigation");
@@ -78,6 +72,132 @@ function neighbor_indices(bestIndex, length) {
     return indices;
 }
 
+// ---- Menu setup and navigation ----
+
+function update_menu(item) {
+    ["overview", "dashboard", "compare", "tables"].forEach(menuItem => {
+        const id = `menu${menuItem.charAt(0).toUpperCase() + menuItem.slice(1)}`;
+        set_local_storage_item(`menu.${menuItem}`, (item === id));
+        document.getElementById(id).classList.toggle("active", id === item);
+    });
+    document.getElementById("filters").hidden = (item === "menuOverview");
+    setup_data_and_graphs(true, item === "menuOverview" && !areGroupedProjectsPrepared);
+}
+
+// function to setup the menu eventlisteners
+function setup_menu() {
+    document.getElementById("menuOverview").addEventListener("click", () => update_menu("menuOverview"));
+    document.getElementById("menuDashboard").addEventListener("click", () => update_menu("menuDashboard"));
+    document.getElementById("menuCompare").addEventListener("click", () => update_menu("menuCompare"));
+    document.getElementById("menuTables").addEventListener("click", () => update_menu("menuTables"));
+
+    const params = new URLSearchParams(window.location.search);
+    const pageParam = params.get("page");
+    let selectedMenu;
+
+    if (pageParam) {
+        switch (pageParam.toLowerCase()) {
+            case "overview":
+                selectedMenu = "menuOverview";
+                break;
+            case "dashboard":
+                selectedMenu = "menuDashboard";
+                break;
+            case "compare":
+                selectedMenu = "menuCompare";
+                break;
+            case "tables":
+                selectedMenu = "menuTables";
+                break;
+        }
+        if (selectedMenu) {
+            settings.menu = {
+                overview: selectedMenu === "menuOverview",
+                dashboard: selectedMenu === "menuDashboard",
+                compare: selectedMenu === "menuCompare",
+                tables: selectedMenu === "menuTables",
+            };
+        }
+    }
+
+    // Priority 2: fall back to settings if no valid URL param
+    if (!selectedMenu) {
+        const menuSettings = settings.menu;
+        if (menuSettings.overview) selectedMenu = "menuOverview";
+        else if (menuSettings.dashboard) selectedMenu = "menuDashboard";
+        else if (menuSettings.compare) selectedMenu = "menuCompare";
+        else if (menuSettings.tables) selectedMenu = "menuTables";
+    }
+    update_menu(selectedMenu);
+}
+
+// ---- Data loading and spinner ----
+
+// function to update all graph data, function is called when updating filters and when the page loads
+function setup_data_and_graphs(menuUpdate = false, prepareOverviewProjectData = false) {
+    setup_spinner(false); // show spinner immediately
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+            if (prepareOverviewProjectData) {
+                prepare_overview();
+                setup_overview_localstorage();
+                setup_overview_section_layout_buttons();
+                setup_overview_order_filters();
+                update_overview_version_select_list();
+            }
+            setup_filtered_data_and_filters();
+            setup_section_order();
+            setup_graph_order();
+            setup_information_popups();
+            setup_graph_view_buttons();
+            setup_theme();
+
+            // let the page sections and events be setup before removing the spinner
+            // then load the graphs
+            requestAnimationFrame(() => {
+                setup_spinner(true);
+                setup_dashboard_section_menu_buttons();
+                setup_overview_section_menu_buttons();
+
+                // Always create graphs from scratch because setup_graph_order()
+                // rebuilds all GridStack grids and canvas DOM elements above
+                create_dashboard_graphs();
+
+                // Ensure overview titles reflect current prefix setting
+                update_overview_prefix_display();
+
+                document.dispatchEvent(new Event("graphs-finalized"));
+
+                if (!menuUpdate) {
+                    scroll_to_most_visible_section();
+                }
+            });
+        });
+    });
+}
+
+// function to add a spinner for slow loads
+function setup_spinner(hide) {
+    if (hide) {
+        // Instant transition - hide spinner and show all content immediately
+        $("#loading").fadeOut(200);
+        $("#overview").fadeIn(200);
+        $("#unified").fadeIn(200);
+        $("#dashboard").fadeIn(200);
+        $("#compare").fadeIn(200);
+        $("#tables").fadeIn(200);
+    } else {
+        $("#overview").hide()
+        $("#unified").hide()
+        $("#dashboard").hide()
+        $("#compare").hide()
+        $("#tables").hide()
+        $("#loading").show();
+    }
+}
+
+// ---- Section menu buttons ----
+
 // function to update the section (menu) buttons with the correct eventlisteners
 // also sets up the automatic highlighting of the section that is most visible in the top
 // 20-50% percent of the screen
@@ -143,13 +263,13 @@ function setup_overview_section_menu_buttons() {
     if (!isOverviewActive) {
         existingOverviewButtons.forEach(el => el.remove());
         // Detach listeners if still attached
-        if (__overviewNavStore.scrollHandler) {
-            window.removeEventListener("scroll", __overviewNavStore.scrollHandler);
-            __overviewNavStore.scrollHandler = null;
+        if (overviewNavStore.scrollHandler) {
+            window.removeEventListener("scroll", overviewNavStore.scrollHandler);
+            overviewNavStore.scrollHandler = null;
         }
-        if (__overviewNavStore.resizeHandler) {
-            window.removeEventListener("resize", __overviewNavStore.resizeHandler);
-            __overviewNavStore.resizeHandler = null;
+        if (overviewNavStore.resizeHandler) {
+            window.removeEventListener("resize", overviewNavStore.resizeHandler);
+            overviewNavStore.resizeHandler = null;
         }
         return;
     }
@@ -189,28 +309,7 @@ function setup_overview_section_menu_buttons() {
 
             btn.addEventListener("click", (e) => {
                 e.preventDefault();
-                const stickyTop = document.getElementById("navigation");
-                const stickyHeight = stickyTop ? stickyTop.offsetHeight : 0;
-
-                const performScroll = () => {
-                    const targetTop = sectionEl.getBoundingClientRect().top + window.pageYOffset;
-                    const top = targetTop < 200 ? 0 : targetTop - stickyHeight - 8;
-                    window.scrollTo({ top: top - 7, behavior: "auto" });
-                };
-
-                // Expand the section if it is currently collapsed, then scroll
-                const collapseBtn = sectionEl.querySelector(".collapse-icon");
-                if (collapseBtn) {
-                    const svg = collapseBtn.querySelector("svg");
-                    const isExpanded = svg && (svg.classList.contains("lucide-chevron-down-icon") || svg.classList.contains("lucide-chevron-down"));
-                    if (!isExpanded) {
-                        // Trigger expansion and wait a tick for layout update
-                        collapseBtn.click();
-                        requestAnimationFrame(() => setTimeout(performScroll, 50));
-                        return;
-                    }
-                }
-                performScroll();
+                expand_and_scroll_to(sectionEl);
             });
         }
         buttonMap.set(sectionId, btn);
@@ -219,13 +318,13 @@ function setup_overview_section_menu_buttons() {
     sections.forEach(makeButtonForSection);
 
     // Before attaching new listeners, remove any previous ones to avoid stale closures
-    if (__overviewNavStore.scrollHandler) {
-        window.removeEventListener("scroll", __overviewNavStore.scrollHandler);
-        __overviewNavStore.scrollHandler = null;
+    if (overviewNavStore.scrollHandler) {
+        window.removeEventListener("scroll", overviewNavStore.scrollHandler);
+        overviewNavStore.scrollHandler = null;
     }
-    if (__overviewNavStore.resizeHandler) {
-        window.removeEventListener("resize", __overviewNavStore.resizeHandler);
-        __overviewNavStore.resizeHandler = null;
+    if (overviewNavStore.resizeHandler) {
+        window.removeEventListener("resize", overviewNavStore.resizeHandler);
+        overviewNavStore.resizeHandler = null;
     }
 
     const updateVisibleButtons = () => {
@@ -235,13 +334,13 @@ function setup_overview_section_menu_buttons() {
         if (!stillOverview) {
             const toRemove = Array.from(navbar.querySelectorAll('a[id^="overview-"][id$="Nav"]'));
             toRemove.forEach(el => el.remove());
-            if (__overviewNavStore.scrollHandler) {
-                window.removeEventListener("scroll", __overviewNavStore.scrollHandler);
-                __overviewNavStore.scrollHandler = null;
+            if (overviewNavStore.scrollHandler) {
+                window.removeEventListener("scroll", overviewNavStore.scrollHandler);
+                overviewNavStore.scrollHandler = null;
             }
-            if (__overviewNavStore.resizeHandler) {
-                window.removeEventListener("resize", __overviewNavStore.resizeHandler);
-                __overviewNavStore.resizeHandler = null;
+            if (overviewNavStore.resizeHandler) {
+                window.removeEventListener("resize", overviewNavStore.resizeHandler);
+                overviewNavStore.resizeHandler = null;
             }
             return;
         }
@@ -254,28 +353,19 @@ function setup_overview_section_menu_buttons() {
                 name = name.replace(/^project_/, '');
             }
             const label = btn.querySelector('i');
+            if (label) label.textContent = name;
         });
         // Determine most visible section and neighboring indices
         const bestIndex = compute_best_visible_index(sections);
         const indices = neighbor_indices(bestIndex, sections.length);
 
-        // Desired left-to-right order: highest (above) on the left, then current, then below
-        const desiredOrder = indices.slice(); // already in [best-1, best, best+1] or edges
-
-        // Reorder buttons in the navbar immediately after the Overview link
+        // Reorder the visible buttons (up to 3) in the navbar after the Overview link
         let last = overviewMenuLink;
-        desiredOrder.forEach(idx => {
-            const section = sections[idx];
-            const btn = buttonMap.get(section.id);
+        indices.forEach(idx => {
+            const btn = buttonMap.get(sections[idx].id);
             if (!btn) return;
-            // Ensure visibility before positioning
-            btn.hidden = !showButtons ? true : false;
-            // Move button to desired position
-            if (last.nextSibling === btn) {
-                // Already in place
-            } else {
-                insertAfter(btn, last);
-            }
+            btn.hidden = !showButtons;
+            if (last.nextSibling !== btn) insertAfter(btn, last);
             last = btn;
         });
 
@@ -283,19 +373,28 @@ function setup_overview_section_menu_buttons() {
         sections.forEach((section, idx) => {
             const btn = buttonMap.get(section.id);
             if (!btn) return;
-            const shouldShow = showButtons && desiredOrder.includes(idx);
-            btn.hidden = !shouldShow;
+            btn.hidden = !showButtons || !indices.includes(idx);
             btn.classList.toggle("active", showButtons && idx === bestIndex);
         });
     };
 
     window.addEventListener("scroll", updateVisibleButtons, { passive: true });
     window.addEventListener("resize", updateVisibleButtons);
-    __overviewNavStore.scrollHandler = updateVisibleButtons;
-    __overviewNavStore.resizeHandler = updateVisibleButtons;
+    overviewNavStore.scrollHandler = updateVisibleButtons;
+    overviewNavStore.resizeHandler = updateVisibleButtons;
     updateVisibleButtons();
 }
 
+function scroll_to_most_visible_section() {
+    setTimeout(() => {
+        const mostVisibleSectionId = get_most_visible_section();
+        if (mostVisibleSectionId) {
+            const offsetTop = document.getElementById(mostVisibleSectionId).getBoundingClientRect().top;
+            window.scrollTo({ top: offsetTop - 67, behavior: "auto" });
+        }
+    }, 100);
+}
+
 function get_most_visible_section() {
     const SECTION_IDS = [
         "overviewStatisticsSection",
@@ -336,134 +435,212 @@ function get_most_visible_section() {
     return bestMatchId;
 }
 
-function update_menu(item) {
-    ["overview", "dashboard", "compare", "tables"].forEach(menuItem => {
-        set_local_storage_item(`menu.${menuItem}`, (item === `menu${menuItem.charAt(0).toUpperCase() + menuItem.slice(1)}`));
-    });
-    ["menuOverview", "menuDashboard", "menuCompare", "menuTables"].forEach(id => {
-        document.getElementById(id).classList.toggle("active", id === item);
-    });
-    document.getElementById("filters").hidden = (item === "menuOverview");
-    setup_data_and_graphs(true, item === "menuOverview" && !areGroupedProjectsPrepared);
-}
+// ---- Responsive navbar / sidebar ----
+//
+// Level 1: page-menu items (Overview, Dashboard, …) move into the sidebar
+// Level 2: icon items also move into the sidebar
+//
+function setup_navbar_overflow() {
+    const nav = document.getElementById('navigation');
+    const mainNavDiv = document.getElementById('mainNavItems');
+    const hamburgerBtn = document.getElementById('navHamburger');
+    const iconNavUl = document.getElementById('iconNavItems');
+    const sidenav = document.getElementById('sidenav');
+    const sidenavBody = document.getElementById('sidenavBody');
+    const sidenavBackdrop = document.getElementById('sidenavBackdrop');
+    const sidenavClose = document.getElementById('sidenavClose');
+
+    // Capture icon <li> references (they move, but references stay valid)
+    const iconLiEls = Array.from(iconNavUl.children);
+
+    let navInSidebar = false;
+    let iconsInSidebar = false;
+    let updating = false;
+
+    function nav_item_els() {
+        return Array.from(mainNavDiv.querySelectorAll('.nav-item'))
+            .filter(el => el.id !== 'menuCustomTitle');
+    }
 
-// function to setup the menu eventlisteners
-function setup_menu() {
-    document.getElementById("menuOverview").addEventListener("click", () => update_menu("menuOverview"));
-    document.getElementById("menuDashboard").addEventListener("click", () => update_menu("menuDashboard"));
-    document.getElementById("menuCompare").addEventListener("click", () => update_menu("menuCompare"));
-    document.getElementById("menuTables").addEventListener("click", () => update_menu("menuTables"));
+    function is_overflowing() {
+        // Temporarily disable flex-shrink so we can measure natural width
+        const saved = mainNavDiv.style.flexShrink;
+        mainNavDiv.style.flexShrink = '0';
+        const overflows = nav.scrollWidth > nav.clientWidth + 1;
+        mainNavDiv.style.flexShrink = saved;
+        return overflows;
+    }
 
-    const params = new URLSearchParams(window.location.search);
-    const pageParam = params.get("page");
-    let selectedMenu;
+    function open_sidebar() {
+        sidenav.hidden = false;
+        sidenavBackdrop.hidden = false;
+        void sidenav.offsetHeight; // reflow for CSS transition
+        sidenav.classList.add('sidenav-open');
+    }
 
-    if (pageParam) {
-        switch (pageParam.toLowerCase()) {
-            case "overview":
-                selectedMenu = "menuOverview";
-                break;
-            case "dashboard":
-                selectedMenu = "menuDashboard";
-                break;
-            case "compare":
-                selectedMenu = "menuCompare";
-                break;
-            case "tables":
-                selectedMenu = "menuTables";
-                break;
+    function close_sidebar() {
+        sidenav.classList.remove('sidenav-open');
+        sidenavBackdrop.hidden = true;
+    }
+
+    hamburgerBtn.addEventListener('click', open_sidebar);
+    sidenavClose.addEventListener('click', close_sidebar);
+    sidenavBackdrop.addEventListener('click', close_sidebar);
+
+    // Build an ordered list of nav items for the sidebar, matching the
+    // actual section order on the page (which can be rearranged by the user).
+    function ordered_sidebar_items() {
+        const items = [];
+        const byId = id => document.getElementById(id);
+
+        // Helper: create an entry for a nav element (if it exists and should show)
+        const push = (el, forceShow) => {
+            if (!el) return;
+            const isOverviewSub = el.id && el.id.startsWith('overview-') && el.id.endsWith('Nav');
+            if (el.hidden && !isOverviewSub && !forceShow) return;
+            items.push(el);
+        };
+
+        // Overview
+        push(byId('menuOverview'));
+        // Overview sub-items in actual DOM section order
+        if (settings.menu && settings.menu.overview) {
+            const overviewBars = Array.from(document.querySelectorAll('#overview .overview-bar'))
+                .filter(el => el.offsetParent !== null || !el.hidden);
+            overviewBars.forEach(bar => {
+                const btn = byId(`overview-${bar.id}Nav`);
+                if (btn) items.push(btn);
+            });
         }
-        if (selectedMenu) {
-            settings.menu = {
-                overview: selectedMenu === "menuOverview",
-                dashboard: selectedMenu === "menuDashboard",
-                compare: selectedMenu === "menuCompare",
-                tables: selectedMenu === "menuTables",
-            };
+
+        // Dashboard
+        push(byId('menuDashboard'));
+        // Dashboard sub-items in settings order
+        if (settings.menu && settings.menu.dashboard && !settings.show.unified) {
+            const dashSections = settings.view.dashboard.sections;
+            dashSections.show.forEach(name => {
+                const navId = space_to_camelcase(name) + 'SectionNav';
+                push(byId(navId));
+            });
         }
+
+        // Remaining pages
+        push(byId('menuCompare'));
+        push(byId('menuTables'));
+        push(byId('openDashboard'));
+
+        return items;
     }
 
-    // Priority 2: fall back to settings if no valid URL param
-    if (!selectedMenu) {
-        const menuSettings = settings.menu;
-        if (menuSettings.overview) selectedMenu = "menuOverview";
-        else if (menuSettings.dashboard) selectedMenu = "menuDashboard";
-        else if (menuSettings.compare) selectedMenu = "menuCompare";
-        else if (menuSettings.tables) selectedMenu = "menuTables";
+    function build_sidebar_content() {
+        sidenavBody.innerHTML = '';
+
+        if (navInSidebar) {
+            const label = document.createElement('div');
+            label.className = 'sidenav-section-label';
+            label.textContent = 'Pages';
+            sidenavBody.appendChild(label);
+
+            ordered_sidebar_items().forEach(el => {
+                const isSubmenu = !!el.querySelector('i');
+                const item = document.createElement('a');
+                item.className = 'sidenav-nav-item' + (isSubmenu ? ' sidenav-nav-submenu' : '');
+                if (el.classList.contains('active')) item.classList.add('active');
+                item.textContent = el.textContent;
+                item.addEventListener('click', () => {
+                    el.click();
+                    close_sidebar();
+                    sidenavBody.querySelectorAll('.sidenav-nav-item').forEach(n => n.classList.remove('active'));
+                    item.classList.add('active');
+                });
+                sidenavBody.appendChild(item);
+            });
+        }
+
+        if (iconsInSidebar) {
+            const label = document.createElement('div');
+            label.className = 'sidenav-section-label';
+            label.textContent = 'Shortcuts';
+            sidenavBody.appendChild(label);
+
+            const row = document.createElement('div');
+            row.className = 'sidenav-icon-row';
+            iconLiEls.forEach(li => {
+                if (li.hidden) return;
+                const link = li.querySelector('a');
+                if (!link) return;
+                const clone = link.cloneNode(true);
+                clone.removeAttribute('id');  // prevent duplicate IDs conflicting with theme SVG updates
+                clone.addEventListener('click', (e) => {
+                    if (link.dataset.bsToggle) {
+                        e.preventDefault();
+                        close_sidebar();
+                        link.click();
+                    } else if (!link.getAttribute('target')) {
+                        e.preventDefault();
+                        close_sidebar();
+                        link.click();
+                    } else {
+                        close_sidebar();
+                    }
+                });
+                row.appendChild(clone);
+            });
+            sidenavBody.appendChild(row);
+        }
     }
-    update_menu(selectedMenu);
-}
 
-// function to update all graph data, function is called when updating filters and when the page loads
-function setup_data_and_graphs(menuUpdate = false, prepareOverviewProjectData = false) {
-    setup_spinner(false); // show spinner immediately
-    requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-            if (prepareOverviewProjectData) {
-                prepare_overview();
-                setup_overview_localstorage();
-                setup_overview_section_layout_buttons();
-                setup_overview_order_filters();
-                update_overview_version_select_list();
-            }
-            setup_filtered_data_and_filters();
-            setup_section_order();
-            setup_graph_order();
-            setup_information_popups();
-            setup_graph_view_buttons();
-            setup_theme();
+    function apply_nav_to_sidebar(on) {
+        if (on === navInSidebar) return;
+        navInSidebar = on;
+        nav_item_els().forEach(el => {
+            el.style.display = on ? 'none' : '';
+        });
+    }
 
-            // let the page sections and events be setup before removing the spinner
-            // then load the graphs
-            requestAnimationFrame(() => {
-                setup_spinner(true);
-                setup_dashboard_section_menu_buttons();
-                setup_overview_section_menu_buttons();
+    function apply_icons_to_sidebar(on) {
+        if (on === iconsInSidebar) return;
+        iconsInSidebar = on;
+        iconLiEls.forEach(li => {
+            li.style.display = on ? 'none' : '';
+        });
+    }
 
-                // Always create graphs from scratch because setup_graph_order()
-                // rebuilds all GridStack grids and canvas DOM elements above
-                create_dashboard_graphs();
+    function update_overflow() {
+        if (updating) return;
+        updating = true;
 
-                // Ensure overview titles reflect current prefix setting
-                update_overview_prefix_display();
+        // Reset to level 0 for fresh measurement
+        apply_icons_to_sidebar(false);
+        apply_nav_to_sidebar(false);
 
-                document.dispatchEvent(new Event("graphs-finalized"));
+        const shouldShowHamburger = is_overflowing();
 
-                if (!menuUpdate) {
-                    setTimeout(() => {
-                        const mostVisibleSectionId = get_most_visible_section();
-                        if (mostVisibleSectionId) {
-                            const offsetTop = document.getElementById(mostVisibleSectionId).getBoundingClientRect().top;
-                            window.scrollTo({
-                                top: offsetTop - 67,
-                                behavior: "auto"
-                            });
-                        }
-                    }, 100);
-                }
-            });
-        });
-    });
-}
+        if (shouldShowHamburger) {
+            apply_nav_to_sidebar(true);                        // level 1
+            if (is_overflowing()) {
+                apply_icons_to_sidebar(true);                  // level 2
+            }
+        }
 
-// function to add a spinner for slow loads
-function setup_spinner(hide) {
-    if (hide) {
-        // Instant transition - hide spinner and show all content immediately
-        $("#loading").fadeOut(200);
-        $("#overview").fadeIn(200);
-        $("#unified").fadeIn(200);
-        $("#dashboard").fadeIn(200);
-        $("#compare").fadeIn(200);
-        $("#tables").fadeIn(200);
-    } else {
-        $("#overview").hide()
-        $("#unified").hide()
-        $("#dashboard").hide()
-        $("#compare").hide()
-        $("#tables").hide()
-        $("#loading").show();
+        hamburgerBtn.hidden = !navInSidebar && !iconsInSidebar;
+        build_sidebar_content();
+        updating = false;
     }
+
+    let debounce = null;
+    const triggerUpdate = () => {
+        clearTimeout(debounce);
+        debounce = setTimeout(update_overflow, 40);
+    };
+    const ro = new ResizeObserver(triggerUpdate);
+    ro.observe(nav);
+
+    // Re-check when dynamic nav items are added/removed (e.g. overview sub-items)
+    const mo = new MutationObserver(triggerUpdate);
+    mo.observe(mainNavDiv, { childList: true, subtree: true, attributes: true, attributeFilter: ['hidden'] });
+
+    requestAnimationFrame(update_overflow);
 }
 
 export {
@@ -471,5 +648,6 @@ export {
     setup_data_and_graphs,
     setup_spinner,
     update_menu,
-    setup_overview_section_menu_buttons
-};
\ No newline at end of file
+    setup_overview_section_menu_buttons,
+    setup_navbar_overflow
+};
diff --git a/robotframework_dashboard/js/theme.js b/robotframework_dashboard/js/theme.js
index 8c2a947..3b5dca0 100644
--- a/robotframework_dashboard/js/theme.js
+++ b/robotframework_dashboard/js/theme.js
@@ -30,6 +30,7 @@ import {
     moveUpSVG,
     moveDownSVG,
     clockSVG,
+    menuSVG,
 } from "./variables/svg.js";
 
 // function to update the theme when the button is clicked
@@ -93,6 +94,7 @@ function setup_theme() {
                 "bug": bugSVG(color),
                 "customizeLayout": customizeViewSVG(color),
                 "saveLayout": saveSVG(color),
+                "navHamburger": menuSVG(color),
             },
             classes: {
                 ".percentage-graph": percentageSVG(color),
@@ -151,6 +153,8 @@ function setup_theme() {
     
     // Apply custom theme colors if set
     apply_theme_colors();
+    // Apply custom branding (logo and title) — must run after SVG map to override rflogo
+    apply_custom_branding();
 }
 
 // function to apply custom theme colors
@@ -197,8 +201,35 @@ function apply_theme_colors() {
     root.style.setProperty('--color-section-card-text', finalColors.text);
 }
 
+// function to apply custom branding (logo and title) from settings / localStorage
+function apply_custom_branding() {
+    // --- Custom title ---
+    const titleEl = document.getElementById("menuCustomTitle");
+    const customTitle = settings.branding?.title || "";
+    if (titleEl) {
+        if (customTitle) {
+            titleEl.textContent = customTitle;
+            titleEl.hidden = false;
+        } else {
+            titleEl.hidden = true;
+        }
+    }
+
+    // --- Custom logo ---
+    const rflogoEl = document.getElementById("rflogo");
+    const storedLogo = settings.branding?.logo;
+    if (storedLogo) {
+        rflogoEl.innerHTML = `<img src="${storedLogo}" alt="Logo" style="height:24px;width:24px;object-fit:contain;">`;
+    } else {
+        // Restore default RF logo (will be re-applied by setup_theme's SVG map)
+        const isDark = document.documentElement.classList.contains("dark-mode");
+        rflogoEl.innerHTML = isDark ? getRflogoDarkSVG() : getRflogoLightSVG();
+    }
+}
+
 export {
     toggle_theme,
     setup_theme,
-    apply_theme_colors
+    apply_theme_colors,
+    apply_custom_branding
 };
\ No newline at end of file
diff --git a/robotframework_dashboard/js/variables/globals.js b/robotframework_dashboard/js/variables/globals.js
index 40f7995..fdeeb0b 100644
--- a/robotframework_dashboard/js/variables/globals.js
+++ b/robotframework_dashboard/js/variables/globals.js
@@ -41,6 +41,12 @@ var ignoreSkips = false; // test most flaky graph
 var ignoreSkipsRecent = false; // test recent most flaky graph
 var onlyFailedFolders = false; // suite folder donut
 
+// Track overview nav listeners so we can cleanly remove them when leaving Overview
+let overviewNavStore = {
+    scrollHandler: null,
+    resizeHandler: null,
+};
+
 export {
     CARDS_PER_ROW,
     DEFAULT_DURATION_PERCENTAGE,
@@ -73,4 +79,5 @@ export {
     ignoreSkips,
     ignoreSkipsRecent,
     onlyFailedFolders,
+    overviewNavStore,
 };
\ No newline at end of file
diff --git a/robotframework_dashboard/js/variables/settings.js b/robotframework_dashboard/js/variables/settings.js
index ddf4605..11fc70f 100644
--- a/robotframework_dashboard/js/variables/settings.js
+++ b/robotframework_dashboard/js/variables/settings.js
@@ -57,6 +57,10 @@ var settings = {
             dark: {},
         }
     },
+    branding: {
+        title: "",
+        logo: "",
+    },
     menu: {
         overview: false,
         dashboard: true,
diff --git a/robotframework_dashboard/js/variables/svg.js b/robotframework_dashboard/js/variables/svg.js
index 7f153e4..dcadd3b 100644
--- a/robotframework_dashboard/js/variables/svg.js
+++ b/robotframework_dashboard/js/variables/svg.js
@@ -9,6 +9,7 @@ const pumpkin = `<g xmlns="http://www.w3.org/2000/svg" transform="translate(-5,-
 const pie = `<g xmlns="http://www.w3.org/2000/svg" transform="translate(-1,-20) scale(0.20)"><path d="M68.86 99.8L9.95 88.64s3.56 14.74 4.78 16.73c1.22 1.99 8.69 7.43 15.86 9.98s61.98.9 66.61-.86c4.62-1.75 12.96-5.53 14.75-7.85c1.52-1.97 5.9-18.97 5.9-18.97L68.86 99.8z" fill="#878787"/><path d="M16.45 96.14l4.09 14.15s2.93 2.09 7.11 3.98c4.24 1.92 9.9 3.39 9.9 3.39s6.41-10.22 6.3-10.92s-8.16-2.85-8.16-2.85s-6.54-1.81-10.16-3.21c-3.61-1.39-9.08-4.54-9.08-4.54z" fill="#e0e0e0"/><path d="M96.45 103.05s4.61-1.43 7.02-2.34c2.8-1.06 6.11-2.8 6.11-2.8l-3.42 12.6s-2.79 1.58-5.35 2.7a71.142 71.142 0 0 1-6.54 2.46l-2.44-5.83l4.62-6.79z" fill="#ababab"/><path d="M37.53 117.66s13.08 3.04 28.73 2.57c14.36-.43 28.03-4.55 28.03-4.55l2.23-12.65s-8.88 3.41-33.64 3.99c-14.95.35-27.18-3.13-27.18-3.13l1.83 13.77z" fill="#c8c8c8"/><radialGradient id="IconifyId17ecdb2904d178eab19532" cx="65.727" cy="51.905" r="43.314" gradientTransform="matrix(0 1 -2.179 0 178.83 -13.822)" gradientUnits="userSpaceOnUse"><stop offset=".386" stop-color="#fac470"/><stop offset=".767" stop-color="#ed9c2c"/></radialGradient><path d="M8.68 72.58c0 1.17 1.28 10.98 1.28 10.98s2.92 4.09 4.44 4.91c1.52.82 23.71 8.18 24.64 8.41s34.45 1.52 36.91 1.52s29.2-6.31 29.2-6.31l15.17-7.37s.73-6.52.73-7.1s-1.71-8.07-2.34-8.64c-.89-.81-5.62-3.05-5.62-3.05s-2.43-2.94-6.73-5.43c-4.42-2.55-16.24-7.47-23.36-9.22c-7.12-1.75-28.77-2.76-40.68.16s-20.09 6.07-23.83 10.04s-5.14 6.54-5.14 6.54l-4.67 4.56z" fill="url(#IconifyId17ecdb2904d178eab19532)"/><path d="M53.91 53.25c.22.98-1.97.8-6.83 3.03c-3.69 1.69-7.83 6.2-8.96 3.63c-1.2-2.71 2.73-5.2 8.04-6.41c3.88-.89 7.57-1.05 7.75-.25z" fill="#ce701d"/><path d="M58.84 57.5c-.81-.37-2.83 1.97-4.75 5.05s-4.45 7.16-1.82 8.09c3.08 1.09 3.94-4.06 4.58-6.02c1.24-3.8 2.66-6.82 1.99-7.12z" fill="#ce701d"/><path d="M69.05 56.94c-.59.29.33 2.66 1.35 5.6s1.98 8.03 5.13 6.93c3.15-1.09-1.27-7.04-2.12-8.21c-1.22-1.67-3.62-4.69-4.36-4.32z" fill="#ce701d"/><path d="M74.26 53.88c-.04 1.09 4.29 2.07 8.52 4.29c3.39 1.79 7.36 4.31 8.11 2.21c.75-2.12-1.19-3.13-6.39-4.98c-5.19-1.85-10.19-2.6-10.24-1.52z" fill="#ce701d"/><path d="M70.99 7.79c-1.38.79.09 4.17-1.36 7.24s-4.94 5.62-7.84 7.58c-2.9 1.96-11.54 7.08-10.73 16.36c.69 7.94 4.04 11.97 7.1 15.04c2.76 2.76 6.53 5.49 8.23 5.32s-.09-6.39 2.9-10.82c2.98-4.43 8.18-8.01 11.84-10.99c3.66-2.98 7.67-10.22 3.07-17.8c-4.61-7.59-12.02-12.61-13.21-11.93z" opacity=".6" fill="#eaeaea"/><path d="M79.1 94.4s3.71-3.88 9.57-3.96c5.86-.09 8.19 1.64 8.19 1.64s2.5-4.38 6.91-5.54c5.15-1.35 8.25 1.06 8.51.63c.26-.43 1.25-5.84 2.99-8.34c2.01-2.87 3.69-2.82 3.69-2.82s-.43-3.04-2.33-5.8c-1.6-2.33-3.52-4.28-3.52-4.28s4.23-.7 7.32 2.93c2.25 2.64 1.77 7.45 1.77 7.45s3.02 1.9 1.21 6.46s-5.39 7.91-10.94 11.37c-3.9 2.44-18.91 8.51-33.8 9.46c-15.57.99-33.55 1.52-50.85-4.85C15.38 94.18 5.3 87.12 3.95 80.22c-1.36-6.9 3.69-10.28 5.26-11.23c1.57-.95 4.15-.96 4.15-.96s-1.24 1.75-1.8 3.42c-.56 1.68-.79 3.15-.79 3.15s2.02 2.44 2.52 4.07c.5 1.62.56 5.53.56 5.53s2.4-2.55 6.27-.98c5.2 2.11 11 9.53 11 9.53s1.73-3.35 8.22-2.85s15.32 6.93 15.32 6.93s5.29-5.49 13.44-5.33c7.43.15 11 2.9 11 2.9z" fill="#e08013"/><path d="M119.56 78.24c-.88-.57-2.21.58-3.13 1.99c-1.2 1.82-1.51 4.14-.8 4.44c1.08.46 2.17-1.99 3.25-3.36c.72-.91 1.82-2.33.68-3.07z" fill="#ec9c2a"/><path d="M107.2 88.87c.64 1.05-1.56 1.93-2.42 3.07c-.85 1.14-.76 2.8-1.54 2.96c-1.71.36-3.31-2.28-3.19-3.25s2.51-2.56 3.36-2.85s3.17-.96 3.79.07z" fill="#ec9c2a"/><path d="M89.47 93.13c.35.84-2.39 3.25-3.42 4.39c-1.03 1.14-2.19 3.37-3.42 3.19c-1.54-.23-1.95-3.18-1.21-4.89c.74-1.71 2.09-3.24 4.12-3.6c1.59-.29 3.53-.06 3.93.91z" fill="#ec9c2a"/><path d="M57.5 102.3c1.89 1.75 4.8-2.23 5.58-3.25c2.34-3.02 4.97-3.86 5.01-4.84c.06-1.31-4.05-1.42-6.95.17c-2.61 1.44-5.92 5.81-3.64 7.92z" fill="#ec9c2a"/><path d="M40.08 92.6c-.05 1.16-1.88 1.65-3.19 3.25c-.97 1.18-2.05 4.44-4.27 3.36c-2.22-1.08-1.23-4.36.34-5.93c2.16-2.16 7.17-2.11 7.12-.68z" fill="#ec9c2a"/><path d="M15.56 91.02c1.2.68 1.31-2.19 2.28-3.33c.97-1.14 2.4-1.23 2.34-2.6c-.06-1.37-3.18-1.69-4.5-.8c-2.29 1.54-1.72 5.82-.12 6.73z" fill="#ec9c2a"/><path d="M7.75 83.16c1.54.28.97-2.62 1.77-3.82c.8-1.2 1.99-1.65 1.2-3.08c-.8-1.42-3.65-1.14-4.5 1.25c-.63 1.75-.75 5.22 1.53 5.65z" fill="#ec9c2a"/></g>`;
 const earthGlobe = `<g xmlns="http://www.w3.org/2000/svg" transform="translate(-3,-19) scale(0.45)"><path d="m18.68 10.74a26.63 26.63 0 0 1 11.25-3.53c4.25-.21 8.15.79 13.56 3.38s8.4 5.06 10.69 9.31 3.53 7.38 2.28 12.91-1.63 11.09-3.85 14.93-5.93 6.5-11.43 7.88-13.32 2.28-20.07-1.44-11.5-9.25-13.25-16.9-.31-11.63 1-15.22a23.64 23.64 0 0 1 9.82-11.32z" fill="#1d1d1b"/><path d="m20.55 11.31a22.85 22.85 0 0 1 7.69-2.6c4-.47 10.47 1.32 11.15 1.63s1.25.5 1 .69-2.53 2.18-3.34 2.31-3.62-.56-5.75-.47-3.56.5-4.59.5-2.5-1.13-3.5-1.22-3.13-.59-2.66-.84z" fill="#4eae4d"/><path d="m18.58 12.87a5.82 5.82 0 0 1 4.16.34c1.62.88 1.44 1.25 3.65 1.22s3.29-.4 3.94-.25 3.41 1.35 5.85.88a10.42 10.42 0 0 0 4.28-1.75c.72-.47 1.15-1.25 1.59-1.19s4.41 2.41 4.34 2.66a4.52 4.52 0 0 1 -1.71 1.5 7.43 7.43 0 0 0 -2.79 3.46c-.5 1.47-.78 5.88-.12 6.32s2.34-.19 3 .31.81 2.06 1.91 2.19 1.56-.69 2.56 0 1 1.21 2.56 1.25 3-.32 3.09 0a2.47 2.47 0 0 1 -.12 1.43c-.16.1-5.44.72-6.69.79s-1 .34-1.69 0-1.78-1.63-3.39-1.88-6.53-.56-7.5-.56-1.25 0-1.35.47.1 5.18-.4 6.72-.16 4.06 1.65 4.78 3.69 1.09 3.94 1.75 1.13 5 1.91 6.47 1.87 3.15 1.5 3.46a20.31 20.31 0 0 1 -6 1.54 23.64 23.64 0 0 1 -5.78 0s-1.16-6-1.47-6.54a4.67 4.67 0 0 1 -.41-2.34c.13-.41 2.34-4.87 2.06-6s-.72-2.28-1.75-2.56-2.75 0-5.53 0a27.84 27.84 0 0 1 -5.34-.44c-.56-.12-.88 0-1.13-.28s-2.28-4-2-4.34 3.13-1.16 3.25-1.82-.06-2.25.66-2.31 3.87.38 4.87-.15 1.13-1.75 1.16-2.82-.37-3.4-.84-3.84-5-1.81-6.72-2.72-3.17-1.62-2.98-2.22a12.45 12.45 0 0 1 3.78-3.53z" fill="#85bfe9"/><path d="m20.49 15c.54-.07.59.35.4.72s0 1.72.6 1.69a55.56 55.56 0 0 1 6.4-1.06 26.38 26.38 0 0 1 8 1.65c.75.41 1.1 2 1.16 2.47a29.44 29.44 0 0 1 -2.75 5.53c-.28.15-3.19-1-5.28-2s-3-1.47-3.09-1.88a6.23 6.23 0 0 0 -.5-1.69c-.19-.09-3-.28-4.35-1.09s-2.56-2.13-2.31-2.69a4.18 4.18 0 0 1 1.72-1.65z" fill="#1d1d1b"/><path d="m24.36 17.87a20.8 20.8 0 0 1 7.25.31c3.19.63 3.69 1.16 3.6 1.94s-1.28 4-1.72 3.84a41.78 41.78 0 0 1 -5.31-2.18c-.22-.32-.29-1.88-1.22-2.16s-2.88-.88-3.53-1.13-.5-.5-.35-.5 1.28-.12 1.28-.12z" fill="#4eae4d"/><path d="m47.58 15.21c.21-.07 2.94 1.07 4.81 4.63s2.47 7.94 2.25 8.34-.9.44-1.53.25-3.11-1.56-3.65-1.56-1.41.47-1.78 0-1.5-1.87-2.63-1.87-1.37.19-1.56-.06-.81-5.53.37-6.5 2.22-1.59 2.69-2 .75-1.13 1.03-1.23z" fill="#4eae4d"/><path d="m35.71 31c.36 0 5.72-.4 6.78.63s1.94 2.15 2.84 2.12 9.19-.75 9.19-.43-.94 7.5-2.38 11.15a15.91 15.91 0 0 1 -5.53 7.06c-1.15.66-2.34.91-2.43.72a21.82 21.82 0 0 1 -2.29-5.93c-.68-3.22-.87-4.72-1.93-5s-3.69-.9-4.19-1.53a4 4 0 0 1 -.56-1.87s.28-3.88.28-4.72.03-2.2.22-2.2z" fill="#4eae4d"/><path d="m17.43 38.21a12.74 12.74 0 0 0 4.84.91c3.31.06 6.56-.31 6.91.09s.28 1.78-.44 3.1a21.38 21.38 0 0 0 -1.19 2.59 26.16 26.16 0 0 0 -3.16-2.5.59.59 0 0 0 -.34.69c.13.28 3 2.22 3.13 2.47a9.75 9.75 0 0 1 -.1 1.75 25.76 25.76 0 0 0 -3-2.38c-.37-.06-.62.85-.5 1s3.53 2.5 4 2.91a6.06 6.06 0 0 1 .84 2.53c-.09 0-3.9-3.09-4.12-3.13s-.28 1-.28 1 4.5 3.19 4.65 3.44a6.49 6.49 0 0 1 .44 1.88 32.57 32.57 0 0 1 -3.59-.91c-1.25-.47-2.35-.72-2.35-.81s-1.17-3.78-2.81-5.38a12.91 12.91 0 0 1 -2.36-2.65 31.09 31.09 0 0 1 -.35-3.72c-.04-.85-.41-2.88-.22-2.88z" fill="#4eae4d"/><path d="m10.52 38.4c.19-.37 2.56.25 3.69.69s1.5 1 1.53 1.87-.13 4.66.65 5.35a10.71 10.71 0 0 1 3.07 3.28 7.26 7.26 0 0 1 1 2.19 20.15 20.15 0 0 1 -5.91-5.5c-3.19-4.13-4.12-7.69-4.03-7.88z" fill="#85bfe9"/><path d="m9.61 36.18a17.66 17.66 0 0 1 -.12-9.65c1.37-5.69 4-8.72 4.22-8.69s5.4 3 7.5 4 2.22 1 2.37 1.44a10.13 10.13 0 0 1 -.19 3.34c-.18.09-3.93-.09-5 0s-1.39 1.59-1.31 2.19.13.87-.12 1.06-3.6 1.09-3.78 2 2.37 5.37 2 5.5-4.57-.16-5.57-1.19z" fill="#4eae4d"/><g fill="#1d1d1b"><path d="m11.36 25.18a19.09 19.09 0 0 1 1.16-3.65c.5-.75.72-.91.94-.85s.84.35.78.53-1.13 2.25-1.41 3.16 0 .91-.4 1-.94.03-1.07-.19z"/><path d="m40 15.59c.16-.14 2.53-.72 2.69-.5s.34.44.18.56a11.75 11.75 0 0 1 -2.62.94c-.2-.1-.45-.85-.25-1z"/><path d="m38.46 22.93c.15.16 1.47 2.28 1.31 2.47s0 .47-.34.31a6.24 6.24 0 0 1 -1.54-2.22c.11-.25.57-.56.57-.56z"/><path d="m37 24.37a12.18 12.18 0 0 1 1.72 2.09c0 .19 0 .47-.31.38a8.07 8.07 0 0 1 -1.86-1.84c0-.16.45-.66.45-.63z"/><path d="m49.33 19.65a7.18 7.18 0 0 1 2.5 1.22c0 .19.1.69-.15.59s-2.54-1-2.63-1.12.25-.66.28-.69z"/><path d="m49.11 22c.08-.11 4 2.18 4 2.53s.35.59-.06.53a30.17 30.17 0 0 1 -4.25-2.16c-.12-.19.2-.75.31-.9z"/><path d="m48.74 24a25.43 25.43 0 0 1 4.84 2.62c.06.28.28.59-.12.56a40.58 40.58 0 0 1 -4.94-2.37c-.09-.13.09-.75.22-.81z"/><path d="m49.68 35.53a13.17 13.17 0 0 1 2.9 2.78c-.09.25 0 .37-.28.28a22.37 22.37 0 0 1 -3.12-2.72c.06-.16.34-.28.5-.34z"/><path d="m48.11 37.43a28.41 28.41 0 0 1 3.35 3.16c0 .25-.13.47-.25.44a41.72 41.72 0 0 1 -3.44-3 4.75 4.75 0 0 1 .34-.6z"/><path d="m47.11 39.46a23.35 23.35 0 0 1 3.35 3.32c-.07.25.06.4-.25.37a39.21 39.21 0 0 1 -3.53-3.15 3.19 3.19 0 0 1 .43-.54z"/><path d="m46.33 41.12a29.14 29.14 0 0 1 3.41 3.28c0 .25-.1.41-.22.31a43.92 43.92 0 0 1 -3.84-3.09.84.84 0 0 1 .65-.5z"/><path d="m45.71 44.12a16 16 0 0 1 3.06 2.72c0 .22-.16.37-.25.34a33.63 33.63 0 0 1 -3.19-2.5c-.03-.19.31-.53.38-.56z"/><path d="m45 45.93c.17 0 3.25 2.69 3 2.94s-.12.37-.37.28a22.27 22.27 0 0 1 -3.13-2.69c.11-.15.33-.53.5-.53z"/><path d="m35.18 43.43c.09-.14 1.31.31 1.28.6s0 .34-.16.34a5 5 0 0 1 -1.53-.44c0-.12.34-.4.41-.5z"/><path d="m33.14 47.28a1.46 1.46 0 0 1 1.16 0c.47.22 1.16 1 1.78 1.1s1.1-.28 1.25-.19a.37.37 0 0 1 .16.47c-.1.16-.16.31-.41.37a2 2 0 0 1 -1.5-.15c-.58-.39-.94-.88-1.58-.88s-.57.12-.69 0-.42-.51-.17-.72z"/><path d="m26 40.15c.25.16 2.06 1.75 2 2s-.19.5-.38.44a10.1 10.1 0 0 1 -2.15-1.82c-.01-.24.53-.62.53-.62z"/><path d="m24.21 30.43c.12 0 2.81 4.19 2.59 4.41s-.34.44-.47.31a44.75 44.75 0 0 1 -2.84-4.34 1.31 1.31 0 0 1 .72-.38z"/><path d="m25.24 30c0-.12.59-.38.78-.19a12 12 0 0 1 1.37 2.72c-.09.18 0 .47-.25.28a17.6 17.6 0 0 1 -1.9-2.81z"/><path d="m30.74 29.71c.08-.11 1-1 1.28-1s1 0 .91.22-1.41 1.91-1.66 1.75a1.66 1.66 0 0 1 -.53-.97z"/></g></g>`;
 const beerGlass = `<g xmlns="http://www.w3.org/2000/svg" transform="translate(-16,1) scale(0.55)"><path fill="#FFAC33" d="M31 5.718h-6v4h4s2 0 2 2v12c0 2-2 2-2 2h-4v4h6c2.206 0 4-1.794 4-4v-16c0-2.206-1.794-4-4-4z"/><path fill="#FFCC4D" d="M27 6H3v26a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4V6z"/><path fill="#F4900C" d="M8.5 32a1 1 0 0 1-1-1V15a1 1 0 0 1 2 0v16a1 1 0 0 1-1 1zm6.5 0a1 1 0 0 1-1-1V15a1 1 0 0 1 2 0v16a1 1 0 0 1-1 1zm6.5 0a1 1 0 0 1-1-1V15a1 1 0 1 1 2 0v16a1 1 0 0 1-1 1z"/><path fill="#FFAC33" d="M3 5v7.445c.59.344 1.268.555 2 .555a4 4 0 0 0 3.701-2.491c.35.302.801.491 1.299.491c.677 0 1.273-.338 1.635-.853A3.988 3.988 0 0 0 15 12a3.98 3.98 0 0 0 3.176-1.593A2.496 2.496 0 0 0 20.5 12c.949 0 1.765-.535 2.188-1.314l.147-.361a3.463 3.463 0 0 0 1.665.439c.981 0 1.865-.406 2.5-1.056V5H3z"/><path fill="#EEE" d="M24 0H4a3 3 0 0 0-3 3v4a4 4 0 0 0 7.701 1.509C9.051 8.811 9.502 9 10 9c.677 0 1.273-.338 1.635-.853A3.988 3.988 0 0 0 15 10a3.98 3.98 0 0 0 3.176-1.593A2.496 2.496 0 0 0 20.5 10c.949 0 1.765-.535 2.188-1.314c.398.195.839.314 1.312.314a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3z"/></g>`;
+const menuSVG = (stroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu"><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="18" y2="18"/></svg>`;
 const filterSVG = (stroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sliders-horizontal-icon lucide-sliders-horizontal"><path d="M10 5H3"/><path d="M12 19H3"/><path d="M14 3v4"/><path d="M16 17v4"/><path d="M21 12h-9"/><path d="M21 19h-5"/><path d="M21 5h-7"/><path d="M8 10v4"/><path d="M8 12H3"/></svg>`
 const customizeViewSVG = (stroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-dashboard-icon lucide-layout-dashboard"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>`
 const saveSVG = (stroke) => `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-save-icon lucide-save"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"/><path d="M7 3v4a1 1 0 0 0 1 1h7"/></svg>`
@@ -233,4 +234,5 @@ export {
     eyeOffSVG,
     moveDownSVG,
     moveUpSVG,
+    menuSVG,
 };
\ No newline at end of file
diff --git a/robotframework_dashboard/templates/dashboard.html b/robotframework_dashboard/templates/dashboard.html
index 3c9ffde..4a1494a 100644
--- a/robotframework_dashboard/templates/dashboard.html
+++ b/robotframework_dashboard/templates/dashboard.html
@@ -18,9 +18,20 @@
     <div class="position-relative alert-container">
         <div class="position-fixed top-20 start-50 translate-middle" id="alertContainer"></div>
     </div>
-    <nav class="navbar navbar-expand-sm sticky-top navbar-dark ps-4 pe-4 border-bottom pb-1" id="navigation">
-        <div class="navbar-nav ms-4">
+    <div id="sidenavBackdrop" class="sidenav-backdrop" hidden></div>
+    <div id="sidenav" class="sidenav" hidden>
+        <div class="sidenav-header">
+            <span class="sidenav-title">Menu</span>
+            <button class="sidenav-close" id="sidenavClose" aria-label="Close sidebar">&times;</button>
+        </div>
+        <div class="sidenav-body" id="sidenavBody"></div>
+    </div>
+
+    <nav class="navbar navbar-expand sticky-top navbar-dark ps-4 pe-4 border-bottom pb-1" id="navigation">
+        <div class="navbar-nav flex-nowrap ms-4" id="mainNavItems">
             <a class="nav-link information" id="rflogo" href="https://robotframework.org/" target="_blank"></a>
+            <a class="nav-item nav-link fw-bold" id="menuCustomTitle" hidden></a>
+            <a class="nav-link information px-1" id="navHamburger" role="button" hidden></a>
             <a class="nav-item nav-link" id="menuOverview">Overview</a>
             <a class="nav-item nav-link active" id="menuDashboard">Dashboard</a>
             <a class="nav-item nav-link" id="runStatisticsSectionNav"><i>Runs</i></a>
@@ -36,7 +47,7 @@
                     id="refreshDashboardSpinner" hidden></span>
             </button>
         </div>
-        <ul class="navbar-nav flex-row flex-wrap ms-md-auto me-4">
+        <ul class="navbar-nav flex-row flex-nowrap ms-md-auto me-4" id="iconNavItems">
             <li class="nav-item">
                 <a class="nav-link information" id="filters" data-bs-toggle="modal" data-bs-target="#filtersModal"></a>
             </li>
@@ -841,7 +852,6 @@ <h1 class="modal-title" id="settingsModalLabel">Settings</h1>
                                                 id="resetCardColor">Reset</button>
                                         </div>
                                     </div>
-
                                     <div class="list-group-item d-flex justify-content-between align-items-center">
                                         <span>Highlight Color</span>
                                         <div class="d-flex align-items-center gap-2">
@@ -859,6 +869,26 @@ <h1 class="modal-title" id="settingsModalLabel">Settings</h1>
                                             <button class="btn btn-outline-light btn-sm"
                                                 id="resetTextColor">Reset</button>
                                         </div>
+                                    </div>
+                                                                        <div class="list-group-item d-flex justify-content-between align-items-center">
+                                        <span>Custom Title</span>
+                                        <div class="d-flex align-items-center gap-2">
+                                            <input class="form-control form-control-sm" type="text"
+                                                id="customBrandingTitle" placeholder="Enter title..."
+                                                style="max-width: 200px;">
+                                            <button class="btn btn-outline-light btn-sm"
+                                                id="clearCustomTitle">Reset</button>
+                                        </div>
+                                    </div>
+                                    <div class="list-group-item d-flex justify-content-between align-items-center">
+                                        <span>Custom Logo <small class="text-muted">(PNG)</small></span>
+                                        <div class="d-flex align-items-center gap-2">
+                                            <input class="form-control form-control-sm" type="file"
+                                                id="customLogoUpload" accept=".png,image/png"
+                                                style="max-width: 200px;">
+                                            <button class="btn btn-outline-light btn-sm"
+                                                id="removeCustomLogo">Reset</button>
+                                        </div>
                                     </div>
                                 </div>
                             </div>