diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index e63b139b..e6184607 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -87,20 +87,20 @@ jobs:
       fail-fast: false
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
-        python-version: ["3.9", "3.10", "3.11", "3.12", "3.13", "pypy3.9"]
+        python-version: ["3.10", "3.11", "3.12", "3.13", "3.14", "pypy3.10"]
         include:
           - os: ubuntu-latest
             python-version: "3.10"
             with-coverage: true
 
           - os: ubuntu-latest
-            python-version: 3.13
+            python-version: 3.14
             tox-env: devel
           - os: windows-latest
-            python-version: 3.13
+            python-version: 3.14
             tox-env: devel
           - os: macos-latest
-            python-version: 3.13
+            python-version: 3.14
             tox-env: devel
 
     steps:
@@ -163,11 +163,11 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        python-version: ["3.9", "3.10", "3.11", "3.12", "3.13", "pypy3.9"]
+        python-version: ["3.10", "3.11", "3.12", "3.13", "3.14", "pypy3.10"]
         include:
           - python-version: "3.10"
             with-coverage: true
-          - python-version: 3.13
+          - python-version: 3.14
             tox-env: devel
 
     steps:
@@ -233,9 +233,9 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        python-version: ["3.9", "3.10", "3.11", "3.12", "3.13", "pypy3.9"]
+        python-version: ["3.10", "3.11", "3.12", "3.13", "3.14", "pypy3.10"]
         include:
-          - python-version: 3.13
+          - python-version: 3.14
             tox-env: devel
 
     steps:
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index ec69769c..30d58ea2 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -48,7 +48,7 @@ repos:
     rev: v3.21.2
     hooks:
       - id: pyupgrade
-        args: [--py39-plus]
+        args: [--py310-plus]
 
   - repo: https://github.com/pre-commit/mirrors-eslint
     rev: v10.0.0-beta.0
diff --git a/docs/user_guide.rst b/docs/user_guide.rst
index 8415bfb0..4862606e 100644
--- a/docs/user_guide.rst
+++ b/docs/user_guide.rst
@@ -51,10 +51,117 @@ The plugin will issue a warning when adding files or links to the standalone rep
 Enhancing reports
 -----------------
 
+Themes
+~~~~~~
+
+pytest-html supports pluggable themes via Jinja2 template inheritance. Two
+built-in themes are included: **classic** (the default, preserving the
+traditional appearance) and **modern** (a card-based dashboard style).
+
+Selecting a theme
+^^^^^^^^^^^^^^^^^
+
+Set the ``html_theme`` option in your pytest configuration:
+
+Using ``pyproject.toml``:
+
+.. code-block:: toml
+
+  [tool.pytest.ini_options]
+  html_theme = "modern"
+
+Using ``pytest.ini``:
+
+.. code-block:: ini
+
+  [pytest]
+  html_theme = modern
+
+Using a local theme directory
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+You can point to a custom theme directory using ``html_theme_path``. This
+overrides entry point-based theme discovery and does not require packaging:
+
+.. code-block:: toml
+
+  [tool.pytest.ini_options]
+  html_theme_path = "./my_theme"
+
+The theme directory must contain at least a ``layout.jinja2`` file that extends
+the base template:
+
+.. code-block:: jinja
+
+  {% extends "base.jinja2" %}
+
+  {% block header %}
+  <h1 id="title">{{ title }}</h1>
+  <p>Custom header content here</p>
+  {% endblock header %}
+
+Optionally include a ``style.css`` to replace the default stylesheet entirely.
+If no ``style.css`` is present, the classic theme's CSS is used as a fallback.
+
+The ``--css`` flag continues to work and appends additional CSS on top of
+whatever the theme provides.
+
+Creating a theme package
+^^^^^^^^^^^^^^^^^^^^^^^^
+
+Theme packages register via the ``pytest_html.themes`` entry point group. The
+entry point value must be a Python package (directory with ``__init__.py``)
+containing the theme resources.
+
+Example package structure:
+
+.. code-block:: text
+
+  pytest-html-dark/
+    src/
+      pytest_html_dark/
+        __init__.py
+        theme/
+          __init__.py
+          layout.jinja2
+          style.css
+    pyproject.toml
+
+Register the entry point in ``pyproject.toml``:
+
+.. code-block:: toml
+
+  [project.entry-points."pytest_html.themes"]
+  dark = "pytest_html_dark.theme"
+
+Users can then select the theme:
+
+.. code-block:: toml
+
+  [tool.pytest.ini_options]
+  html_theme = "dark"
+
+Available template blocks
+^^^^^^^^^^^^^^^^^^^^^^^^^
+
+The base template (``base.jinja2``) provides the following overridable blocks:
+
+- ``styles`` -- CSS delivery (inline ``<style>`` or ``<link>``)
+- ``head_extra`` -- additional content in ``<head>``
+- ``header`` -- page title and generation info
+- ``environment`` -- environment table and its row template
+- ``summary`` -- run statistics, filters, controls, and row templates
+- ``results_table`` -- the results ``<table>`` with its ``<thead>``
+- ``footer`` -- data container and script include
+
+All template variables (``title``, ``date``, ``time``, ``version``, ``styles``,
+``run_count``, ``outcomes``, ``table_head``, ``test_data``, etc.) are available
+in every block.
+
 Appearance
 ~~~~~~~~~~
 
-Custom CSS (Cascasding Style Sheets) can be passed on the command line using
+Custom CSS (Cascading Style Sheets) can be passed on the command line using
 the :code:`--css` option. These will be applied in the order specified, and can
 be used to change the appearance of the report.
 
diff --git a/package.json b/package.json
index e5b957d3..7da43c1b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,9 @@
 {
   "scripts": {
     "build": "npm run build:css && npm run build:jsapp",
-    "build:css": "sass --no-source-map --no-error-css src/layout/css/style.scss src/pytest_html/resources/style.css",
+    "build:css": "npm run build:css:classic && npm run build:css:modern",
+    "build:css:classic": "sass --no-source-map --no-error-css src/layout/css/classic.scss src/pytest_html/resources/classic/style.css",
+    "build:css:modern": "sass --no-source-map --no-error-css src/layout/css/modern.scss src/pytest_html/resources/modern/style.css",
     "build:jsapp": "browserify ./src/pytest_html/scripts/index.js > ./src/pytest_html/resources/app.js",
     "lint": "eslint src/pytest_html/scripts/ testing/",
     "unit": "nyc mocha testing/**/unittest.js --require mock-local-storage",
diff --git a/pyproject.toml b/pyproject.toml
index d2968422..ba2dc239 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -19,7 +19,7 @@ authors = [
   { name = "Dave Hunt", email = "dhunt@mozilla.com" },
   { name = "Jim Brannlund", email = "jimbrannlund@fastmail.com" },
 ]
-requires-python = ">=3.9"
+requires-python = ">=3.10"
 classifiers = [
   "Development Status :: 5 - Production/Stable",
   "Framework :: Pytest",
@@ -30,7 +30,6 @@ classifiers = [
   "Operating System :: Microsoft :: Windows",
   "Operating System :: POSIX",
   "Programming Language :: Python :: 3 :: Only",
-  "Programming Language :: Python :: 3.9",
   "Programming Language :: Python :: 3.10",
   "Programming Language :: Python :: 3.11",
   "Programming Language :: Python :: 3.12",
@@ -71,6 +70,8 @@ urls.Source = "https://github.com/pytest-dev/pytest-html"
 urls.Tracker = "https://github.com/pytest-dev/pytest-html/issues"
 entry-points.pytest11.html = "pytest_html.plugin"
 entry-points.pytest11.html_fixtures = "pytest_html.fixtures"
+entry-points."pytest_html.themes".classic = "pytest_html.resources.classic"
+entry-points."pytest_html.themes".modern = "pytest_html.resources.modern"
 
 [tool.hatch.envs.test]
 features = [
diff --git a/src/.gitattributes b/src/.gitattributes
index 9a59a76d..da7a2cc7 100644
--- a/src/.gitattributes
+++ b/src/.gitattributes
@@ -1,3 +1,4 @@
 
 # see https://github.com/github/linguist#generated-code
-pytest_html/resources/style.css    linguist-generated
+pytest_html/resources/classic/style.css    linguist-generated
+pytest_html/resources/modern/style.css     linguist-generated
diff --git a/src/layout/css/style.scss b/src/layout/css/classic.scss
similarity index 100%
rename from src/layout/css/style.scss
rename to src/layout/css/classic.scss
diff --git a/src/layout/css/modern.scss b/src/layout/css/modern.scss
new file mode 100644
index 00000000..45b26fc9
--- /dev/null
+++ b/src/layout/css/modern.scss
@@ -0,0 +1,520 @@
+$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+$font-family-mono: "JetBrains Mono", "Fira Code", "Courier New", Courier, monospace;
+$font-size-text: 14px;
+$font-size-h1: 28px;
+$font-size-h2: 18px;
+$font-size-small: 13px;
+$font-size-xs: 12px;
+$font-size-label: 11px;
+
+$color-passed: #2e7d32;
+$color-failed: #c62828;
+$color-error: #c62828;
+$color-skipped: #f57c00;
+$color-xfailed: #f57c00;
+$color-xpassed: #c62828;
+$color-rerun: #f57c00;
+$color-retried: #f57c00;
+
+$color-bg: #fafafa;
+$color-surface: #ffffff;
+$color-border: #e0e0e0;
+$color-text: #212121;
+$color-text-secondary: #616161;
+$color-accent: #1976d2;
+
+$radius: 8px;
+$shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+
+$spacing: 8px;
+$spacing-sm: 4px;
+$spacing-lg: 12px;
+$spacing-xl: 16px;
+$spacing-xxl: 24px;
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: $font-family;
+  font-size: $font-size-text;
+  min-width: 800px;
+  color: $color-text-secondary;
+  background: $color-bg;
+  margin: 0;
+  padding: $spacing-xxl;
+  line-height: 1.5;
+}
+
+h1 {
+  font-size: $font-size-h1;
+  color: $color-text;
+  margin: 0 0 $spacing-sm 0;
+  font-weight: 600;
+}
+
+h2 {
+  font-size: $font-size-h2;
+  color: $color-text;
+  font-weight: 600;
+}
+
+p {
+  color: $color-text-secondary;
+}
+
+a {
+  color: $color-accent;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+table {
+  border-collapse: collapse;
+}
+
+/******************************
+ * HEADER
+ ******************************/
+.modern-header {
+  margin-bottom: $spacing-xxl;
+  padding-bottom: $spacing-xl;
+  border-bottom: 1px solid $color-border;
+
+  .meta {
+    color: $color-text-secondary;
+    font-size: $font-size-small;
+  }
+}
+
+/******************************
+ * ENVIRONMENT
+ ******************************/
+#environment-header {
+  cursor: pointer;
+
+  h2 {
+    &:hover::after {
+      content: ' (hide details)';
+      color: $color-text-secondary;
+      font-style: italic;
+      cursor: pointer;
+      font-size: $font-size-xs;
+    }
+  }
+
+  &.collapsed h2 {
+    &:hover::after {
+      content: ' (show details)';
+      color: $color-text-secondary;
+      font-style: italic;
+      cursor: pointer;
+      font-size: $font-size-xs;
+    }
+  }
+}
+
+#environment {
+  td {
+    padding: $spacing $spacing-lg;
+    border: 1px solid $color-border;
+    vertical-align: top;
+  }
+  tr:nth-child(odd) {
+    background-color: $color-bg;
+  }
+  ul {
+    margin: 0;
+    padding: 0 20px;
+  }
+}
+
+/******************************
+ * DASHBOARD
+ ******************************/
+.dashboard {
+  background: $color-surface;
+  border: 1px solid $color-border;
+  border-radius: $radius;
+  padding: $spacing-xxl;
+  margin-bottom: $spacing-xxl;
+  box-shadow: $shadow;
+}
+
+.stat-cards {
+  display: flex;
+  gap: $spacing-lg;
+  flex-wrap: wrap;
+  margin-bottom: $spacing-xl;
+}
+
+.stat-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: $spacing-xl $spacing-xxl;
+  border-radius: $radius;
+  border: 1px solid $color-border;
+  background: $color-bg;
+  min-width: 100px;
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: $shadow;
+  }
+
+  &__value {
+    font-size: 28px;
+    font-weight: 700;
+    line-height: 1.2;
+  }
+
+  &__label {
+    font-size: $font-size-label;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: $color-text-secondary;
+    margin-top: $spacing-sm;
+  }
+
+  &.passed .stat-card__value { color: $color-passed; }
+  &.failed .stat-card__value { color: $color-failed; }
+  &.error .stat-card__value { color: $color-error; }
+  &.skipped .stat-card__value { color: $color-skipped; }
+  &.xfailed .stat-card__value { color: $color-xfailed; }
+  &.xpassed .stat-card__value { color: $color-xpassed; }
+  &.rerun .stat-card__value { color: $color-rerun; }
+  &.retried .stat-card__value { color: $color-retried; }
+}
+
+.run-count {
+  color: $color-text;
+  font-weight: 500;
+  margin: $spacing 0 $spacing-xl 0;
+}
+
+/******************************
+ * CONTROLS & FILTERS
+ ******************************/
+.controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: $spacing-lg 0;
+  border-top: 1px solid $color-border;
+}
+
+.filters {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  flex-wrap: wrap;
+}
+
+.filter-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-sm;
+  padding: $spacing-sm 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: $font-size-small;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background: $color-bg;
+  }
+
+  input[type="checkbox"] {
+    cursor: pointer;
+  }
+
+  &.passed span { color: $color-passed; }
+  &.failed span { color: $color-failed; }
+  &.error span { color: $color-error; }
+  &.skipped span { color: $color-skipped; }
+  &.xfailed span { color: $color-xfailed; }
+  &.xpassed span { color: $color-xpassed; }
+  &.rerun span { color: $color-rerun; }
+  &.retried span { color: $color-retried; }
+}
+
+.collapse {
+  display: flex;
+  align-items: center;
+  gap: $spacing;
+
+  button {
+    color: $color-accent;
+    border: 1px solid $color-border;
+    background: $color-surface;
+    cursor: pointer;
+    padding: 6px $spacing-lg;
+    border-radius: 4px;
+    font-size: $font-size-small;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background: $color-bg;
+    }
+  }
+}
+
+/******************************
+ * TEST RESULT COLORS
+ ******************************/
+span.passed,
+.passed .col-result {
+  color: $color-passed;
+}
+
+span.skipped,
+span.xfailed,
+span.rerun,
+.skipped .col-result,
+.xfailed .col-result,
+.rerun .col-result {
+  color: $color-skipped;
+}
+
+span.error,
+span.failed,
+span.xpassed,
+.error .col-result,
+.failed .col-result,
+.xpassed .col-result {
+  color: $color-failed;
+}
+
+.col-links__extra {
+  margin-right: 5px;
+  color: $color-accent;
+}
+
+/******************************
+ * RESULTS TABLE
+ ******************************/
+#results-table {
+  background: $color-surface;
+  border: 1px solid $color-border;
+  border-radius: $radius;
+  color: $color-text-secondary;
+  font-size: $font-size-small;
+  width: 100%;
+  overflow: hidden;
+  box-shadow: $shadow;
+
+  th,
+  td {
+    padding: 10px $spacing-lg;
+    border: 1px solid $color-border;
+    text-align: left;
+  }
+
+  th {
+    font-weight: 600;
+    background: $color-bg;
+    color: $color-text;
+    font-size: $font-size-xs;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+  }
+}
+
+/******************************
+ * LOG & EXTRAS
+ ******************************/
+$extra-height: 240px;
+$extra-media-width: 320px;
+
+.logwrapper {
+  max-height: $extra-height - 2 * $spacing;
+  overflow-y: scroll;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+
+  &.expanded {
+    max-height: none;
+    .logexpander:after {
+      content: 'collapse [-]';
+    }
+  }
+
+  .logexpander {
+    z-index: 1;
+    position: sticky;
+    top: 10px;
+    width: max-content;
+    border: 1px solid $color-border;
+    border-radius: 4px;
+    padding: 5px 10px;
+    margin: 10px 0 10px calc(100% - 90px);
+    cursor: pointer;
+    background-color: $color-surface;
+    font-size: $font-size-xs;
+    color: $color-text-secondary;
+
+    &:after {
+      content: 'expand [+]';
+    }
+    &:hover {
+      color: $color-text;
+      border-color: $color-text-secondary;
+    }
+  }
+
+  .log {
+    min-height: 40px;
+    position: relative;
+    top: -50px;
+    height: calc(100% + 50px);
+    border: 1px solid $color-border;
+    color: $color-text;
+    display: block;
+    font-family: $font-family-mono;
+    font-size: $font-size-xs;
+    padding: $spacing $spacing-lg;
+    padding-right: 80px;
+    white-space: pre-wrap;
+  }
+}
+
+div.media {
+  border: 1px solid $color-border;
+  border-radius: 4px;
+  float: right;
+  height: $extra-height;
+  margin: 0 5px;
+  overflow: hidden;
+  width: $extra-media-width;
+}
+
+.media-container {
+  display: grid;
+  grid-template-columns: 25px auto 25px;
+  align-items: center;
+  flex: 1 1;
+  overflow: hidden;
+  height: 200px;
+
+  &--fullscreen {
+    grid-template-columns: 0px auto 0px;
+  }
+
+  &__nav--right,
+  &__nav--left {
+    text-align: center;
+    cursor: pointer;
+  }
+
+  &__viewport {
+    cursor: pointer;
+    text-align: center;
+    height: inherit;
+
+    img,
+    video {
+      object-fit: cover;
+      width: 100%;
+      max-height: 100%;
+    }
+  }
+}
+
+.media__name,
+.media__counter {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  flex: 0 0 25px;
+  align-items: center;
+}
+
+/******************************
+ * COLLAPSIBLE ROWS
+ ******************************/
+.collapsible td:not(.col-links) {
+  cursor: pointer;
+  &:hover::after {
+    color: #bbb;
+    font-style: italic;
+    cursor: pointer;
+  }
+}
+
+.col-result {
+  width: 130px;
+  font-weight: 500;
+
+  &:hover::after {
+    content: ' (hide details)';
+  }
+
+  &.collapsed:hover::after {
+    content: ' (show details)';
+  }
+}
+
+/******************************
+ * SORTING
+ ******************************/
+.sortable {
+  cursor: pointer;
+
+  &.desc:after {
+    content: ' ';
+    position: relative;
+    left: 5px;
+    bottom: -12.5px;
+    border: 10px solid $color-accent;
+    border-bottom: 0;
+    border-left-color: transparent;
+    border-right-color: transparent;
+  }
+
+  &.asc:after {
+    content: ' ';
+    position: relative;
+    left: 5px;
+    bottom: 12.5px;
+    border: 10px solid $color-accent;
+    border-top: 0;
+    border-left-color: transparent;
+    border-right-color: transparent;
+  }
+}
+
+/******************************
+ * RELOAD & UTILITIES
+ ******************************/
+.hidden, .summary__reload__button.hidden {
+  display: none;
+}
+
+.summary__reload {
+  display: flex;
+  justify-content: center;
+  margin: $spacing-lg 0;
+
+  &__button {
+    display: flex;
+    color: white;
+    font-weight: 600;
+    background-color: $color-accent;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    border-radius: $radius;
+    cursor: pointer;
+    padding: $spacing-lg $spacing-xxl;
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+}
diff --git a/src/pytest_html/extras.py b/src/pytest_html/extras.py
index f736a017..89b8d809 100644
--- a/src/pytest_html/extras.py
+++ b/src/pytest_html/extras.py
@@ -1,7 +1,6 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
-from typing import Optional
 
 FORMAT_HTML = "html"
 FORMAT_IMAGE = "image"
@@ -14,10 +13,10 @@
 def extra(
     content: str,
     format_type: str,
-    name: Optional[str] = None,
-    mime_type: Optional[str] = None,
-    extension: Optional[str] = None,
-) -> dict[str, Optional[str]]:
+    name: str | None = None,
+    mime_type: str | None = None,
+    extension: str | None = None,
+) -> dict[str, str | None]:
     return {
         "name": name,
         "format_type": format_type,
@@ -27,7 +26,7 @@ def extra(
     }
 
 
-def html(content: str) -> dict[str, Optional[str]]:
+def html(content: str) -> dict[str, str | None]:
     return extra(content, FORMAT_HTML)
 
 
@@ -36,31 +35,31 @@ def image(
     name: str = "Image",
     mime_type: str = "image/png",
     extension: str = "png",
-) -> dict[str, Optional[str]]:
+) -> dict[str, str | None]:
     return extra(content, FORMAT_IMAGE, name, mime_type, extension)
 
 
-def png(content: str, name: str = "Image") -> dict[str, Optional[str]]:
+def png(content: str, name: str = "Image") -> dict[str, str | None]:
     return image(content, name, mime_type="image/png", extension="png")
 
 
-def jpg(content: str, name: str = "Image") -> dict[str, Optional[str]]:
+def jpg(content: str, name: str = "Image") -> dict[str, str | None]:
     return image(content, name, mime_type="image/jpeg", extension="jpg")
 
 
-def svg(content: str, name: str = "Image") -> dict[str, Optional[str]]:
+def svg(content: str, name: str = "Image") -> dict[str, str | None]:
     return image(content, name, mime_type="image/svg+xml", extension="svg")
 
 
-def json(content: str, name: str = "JSON") -> dict[str, Optional[str]]:
+def json(content: str, name: str = "JSON") -> dict[str, str | None]:
     return extra(content, FORMAT_JSON, name, "application/json", "json")
 
 
-def text(content: str, name: str = "Text") -> dict[str, Optional[str]]:
+def text(content: str, name: str = "Text") -> dict[str, str | None]:
     return extra(content, FORMAT_TEXT, name, "text/plain", "txt")
 
 
-def url(content: str, name: str = "URL") -> dict[str, Optional[str]]:
+def url(content: str, name: str = "URL") -> dict[str, str | None]:
     return extra(content, FORMAT_URL, name)
 
 
@@ -69,9 +68,9 @@ def video(
     name: str = "Video",
     mime_type: str = "video/mp4",
     extension: str = "mp4",
-) -> dict[str, Optional[str]]:
+) -> dict[str, str | None]:
     return extra(content, FORMAT_VIDEO, name, mime_type, extension)
 
 
-def mp4(content: str, name: str = "Video") -> dict[str, Optional[str]]:
+def mp4(content: str, name: str = "Video") -> dict[str, str | None]:
     return video(content, name)
diff --git a/src/pytest_html/plugin.py b/src/pytest_html/plugin.py
index 949a6ffa..dd5e8770 100644
--- a/src/pytest_html/plugin.py
+++ b/src/pytest_html/plugin.py
@@ -1,6 +1,8 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+import importlib.metadata
+import importlib.resources
 import os
 import warnings
 from pathlib import Path
@@ -79,6 +81,50 @@ def pytest_addoption(parser):
         help="the HTML report will be generated after each test "
         "instead of at the end of the run.",
     )
+    parser.addini(
+        "html_theme",
+        type="string",
+        default="classic",
+        help="HTML report theme name (default: 'classic').",
+    )
+    parser.addini(
+        "html_theme_path",
+        type="string",
+        default="",
+        help="path to a custom theme directory containing layout.jinja2 "
+        "(overrides html_theme entry point lookup).",
+    )
+
+
+def _resolve_theme(config: pytest.Config, resources_path: Path) -> Path:
+    theme_name = config.getini("html_theme")
+
+    theme_path_str = config.getini("html_theme_path")
+    if theme_path_str:
+        theme_path = Path(os.path.expandvars(theme_path_str)).expanduser().resolve()
+        if not (theme_path / "layout.jinja2").exists():
+            raise pytest.UsageError(
+                f"html_theme_path '{theme_path}' does not contain layout.jinja2"
+            )
+        return theme_path
+
+    eps = importlib.metadata.entry_points(group="pytest_html.themes")
+    for ep in eps:
+        if ep.name == theme_name:
+            theme_module = ep.load()
+            theme_traversable = importlib.resources.files(theme_module)
+            theme_path = Path(str(theme_traversable))
+            if not (theme_path / "layout.jinja2").exists():
+                raise pytest.UsageError(
+                    f"Theme '{theme_name}' (from entry point '{ep.value}') "
+                    "does not contain layout.jinja2"
+                )
+            return theme_path
+
+    raise pytest.UsageError(
+        f"Unknown html_theme '{theme_name}'. "
+        "Install a theme package or set html_theme_path."
+    )
 
 
 def pytest_configure(config):
@@ -103,8 +149,16 @@ def pytest_configure(config):
         if not hasattr(config, "workerinput"):
             # prevent opening html_path on worker nodes (xdist)
             resources_path = Path(__file__).parent.joinpath("resources")
-            default_css = Path(resources_path, "style.css")
-            template = _read_template([resources_path])
+            theme_path = _resolve_theme(config, resources_path)
+
+            theme_css = theme_path / "style.css"
+            default_css = (
+                theme_css
+                if theme_css.exists()
+                else resources_path / "classic" / "style.css"
+            )
+
+            template = _read_template([theme_path, resources_path])
             processed_css = _process_css(default_css, extra_css)
             report_data = ReportData(config)
             if config.getoption("self_contained_html"):
diff --git a/src/pytest_html/report.py b/src/pytest_html/report.py
index 22ef7e14..8ee6c394 100644
--- a/src/pytest_html/report.py
+++ b/src/pytest_html/report.py
@@ -21,7 +21,7 @@ def __init__(self, report_path, config, report_data, template, css):
 
     @property
     def css(self):
-        return Path(self._assets_path.name, "style.css")
+        return f"./{self._assets_path.name}/style.css"
 
     def _data_content(self, content, asset_name, *args, **kwargs):
         content = content.encode("utf-8")
@@ -38,4 +38,5 @@ def _media_content(self, content, asset_name, *args, **kwargs):
     def _write_content(self, content, asset_name):
         content_relative_path = Path(self._assets_path, asset_name)
         content_relative_path.write_bytes(content)
-        return str(content_relative_path.relative_to(self._report_path.parent))
+        rel = content_relative_path.relative_to(self._report_path.parent)
+        return f"./{rel}"
diff --git a/src/pytest_html/resources/__init__.py b/src/pytest_html/resources/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pytest_html/resources/index.jinja2 b/src/pytest_html/resources/base.jinja2
similarity index 91%
rename from src/pytest_html/resources/index.jinja2
rename to src/pytest_html/resources/base.jinja2
index d899375e..0aa7dbd1 100644
--- a/src/pytest_html/resources/index.jinja2
+++ b/src/pytest_html/resources/base.jinja2
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8"/>
     <title id="head-title">{{ title }}</title>
+    {% block styles %}
     {%- if self_contained %}
       <style type="text/css">
         {{- styles|safe }}
@@ -10,11 +11,16 @@
     {% else %}
       <link href="{{ styles }}" rel="stylesheet" type="text/css"/>
     {%- endif %}
+    {% endblock styles %}
+    {% block head_extra %}{% endblock head_extra %}
   </head>
   <body>
+    {% block header %}
     <h1 id="title">{{ title }}</h1>
     <p>Report generated on {{ date }} at {{ time }} by <a href="https://pypi.python.org/pypi/pytest-html">pytest-html</a>
         v{{ version }}</p>
+    {% endblock header %}
+    {% block environment %}
     <div id="environment-header">
       <h2>Environment</h2>
     </div>
@@ -26,6 +32,8 @@
         <td></td>
       </tr>
     </template>
+    {% endblock environment %}
+    {% block summary %}
     <template id="template_results-table__body--empty">
       <tbody class="results-table-row">
         <tr id="not-found-message">
@@ -102,6 +110,8 @@
         {%- endfor %}
       </div>
     </div>
+    {% endblock summary %}
+    {% block results_table %}
     <table id="results-table">
       <thead id="results-table-head">
         <tr>
@@ -111,11 +121,14 @@
         </tr>
       </thead>
     </table>
+    {% endblock results_table %}
+  {% block footer %}
   <footer>
     <div id="data-container" data-jsonblob="{{ test_data }}"></div>
     <script>
       {% include "app.js" %}
     </script>
   </footer>
+  {% endblock footer %}
   </body>
 </html>
diff --git a/src/pytest_html/resources/classic/__init__.py b/src/pytest_html/resources/classic/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pytest_html/resources/classic/layout.jinja2 b/src/pytest_html/resources/classic/layout.jinja2
new file mode 100644
index 00000000..bd365936
--- /dev/null
+++ b/src/pytest_html/resources/classic/layout.jinja2
@@ -0,0 +1 @@
+{% extends "base.jinja2" %}
diff --git a/src/pytest_html/resources/style.css b/src/pytest_html/resources/classic/style.css
similarity index 100%
rename from src/pytest_html/resources/style.css
rename to src/pytest_html/resources/classic/style.css
diff --git a/src/pytest_html/resources/modern/__init__.py b/src/pytest_html/resources/modern/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pytest_html/resources/modern/layout.jinja2 b/src/pytest_html/resources/modern/layout.jinja2
new file mode 100644
index 00000000..a4dc0efd
--- /dev/null
+++ b/src/pytest_html/resources/modern/layout.jinja2
@@ -0,0 +1,128 @@
+{% extends "base.jinja2" %}
+
+{% block header %}
+<header class="modern-header">
+  <h1 id="title">{{ title }}</h1>
+  <div class="meta">Report generated on {{ date }} at {{ time }} · <a href="https://pypi.python.org/pypi/pytest-html">pytest-html</a> v{{ version }}</div>
+</header>
+{% endblock header %}
+
+{% block environment %}
+<div class="top-grid">
+  <div class="environment-card">
+    <div id="environment-header">
+      <h2>Environment</h2>
+    </div>
+    <table id="environment"></table>
+    <template id="template_environment_row">
+      <tr>
+        <td></td>
+        <td></td>
+      </tr>
+    </template>
+  </div>
+  <div class="result-cards">
+    {%- for result, values in outcomes.items() %}
+    <div class="result-card {{ result }}">
+      <span class="result-card__icon">
+        {%- if result == "passed" %}✔
+        {%- elif result == "failed" %}✘
+        {%- elif result == "error" %}⚠
+        {%- elif result == "skipped" %}⏭
+        {%- elif result == "xfailed" %}↳
+        {%- elif result == "xpassed" %}‼
+        {%- elif result == "rerun" %}↻
+        {%- elif result == "retried" %}↻
+        {%- else %}•
+        {%- endif %}
+      </span>
+      <span class="count {{ result }}">{{ values["value"] }}</span>
+      <span class="label">{{ values["label"] }}</span>
+    </div>
+    {%- endfor %}
+  </div>
+</div>
+{% endblock environment %}
+
+{% block summary %}
+<template id="template_results-table__body--empty">
+  <tbody class="results-table-row">
+    <tr id="not-found-message">
+      <td colspan="{{ table_head|length }}">No results found. Check the filters.</td>
+    </tr>
+  </tbody>
+</template>
+<template id="template_results-table__tbody">
+  <tbody class="results-table-row">
+    <tr class="collapsible">
+    </tr>
+    <tr class="extras-row">
+      <td class="extra" colspan="{{ table_head|length }}">
+        <div class="extraHTML"></div>
+        <div class="media">
+          <div class="media-container">
+              <div class="media-container__nav--left">&lt;</div>
+              <div class="media-container__viewport">
+                <img src="" />
+                <video controls>
+                  <source src="" type="video/mp4">
+                </video>
+              </div>
+              <div class="media-container__nav--right">&gt;</div>
+            </div>
+            <div class="media__name"></div>
+            <div class="media__counter"></div>
+        </div>
+        <div class="logwrapper">
+          <div class="logexpander"></div>
+          <div class="log"></div>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</template>
+
+<div class="summary-panel">
+  <div class="summary-panel__header">
+    <p class="run-count">{{ run_count }}</p>
+    <div class="summary__reload">
+      <div class="summary__reload__button {{ 'hidden' if running_state == 'finished' }}" onclick="location.reload()">
+        <div>Tests still running — reload for latest results</div>
+      </div>
+    </div>
+  </div>
+  <div class="controls">
+    <div class="filters">
+    {%- for result, values in outcomes.items() %}
+      <label class="filter-switch filter-switch--{{ result }}{{ ' disabled' if values['value'] == 0 }}"{{ ' data-disabled' if values['value'] == 0 }}>
+        <span class="switch-track">
+          <input checked="true" class="filter" name="filter_checkbox" type="checkbox"
+                 data-test-result="{{ result }}" {{ "disabled" if values["value"] == 0 }}>
+          <span class="switch-thumb"></span>
+        </span>
+        <span class="switch-label-text">{{ values["label"] }}</span>
+      </label>
+    {%- endfor %}
+    </div>
+    <div class="collapse">
+      <button id="show_all_details" class="btn btn--primary">Show details</button>
+      <button id="hide_all_details" class="btn btn--outline">Show summary</button>
+    </div>
+  </div>
+  <div class="additional-summary prefix">
+    {%- for p in additional_summary['prefix'] %}
+    {{ p|safe }}
+    {%- endfor %}
+  </div>
+  <div class="additional-summary summary">
+    {%- for s in additional_summary['summary'] %}
+    {{ s|safe }}
+    {%- endfor %}
+  </div>
+  <div class="additional-summary postfix">
+    {%- for p in additional_summary['postfix'] %}
+    {{ p|safe }}
+    {%- endfor %}
+  </div>
+</div>
+{% endblock summary %}
diff --git a/src/pytest_html/resources/modern/style.css b/src/pytest_html/resources/modern/style.css
new file mode 100644
index 00000000..46b6ca37
--- /dev/null
+++ b/src/pytest_html/resources/modern/style.css
@@ -0,0 +1,746 @@
+@charset "UTF-8";
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --primary-color: #16192c;
+  --secondary-color: #2c3e50;
+  --success-color: #2ecc71;
+  --danger-color: #e74c3c;
+  --warning-color: #f39c12;
+  --info-color: #1abc9c;
+  --light-color: #ecf0f1;
+  --text-color: #333;
+  --border-radius: 8px;
+  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --transition: all 0.3s ease;
+  --accent: #5c60f5;
+  --accent-shade: #5356dd;
+  --skipped-color: #95a5a6;
+}
+
+body {
+  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 14px;
+  color: var(--text-color);
+  background-color: #f5f9fc;
+  line-height: 1.6;
+  min-width: 800px;
+  padding: 24px;
+}
+
+h1 {
+  font-size: 28px;
+  color: var(--secondary-color);
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+h2 {
+  font-size: 20px;
+  color: var(--secondary-color);
+  font-weight: 500;
+}
+
+p {
+  color: var(--text-color);
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+  transition: var(--transition);
+}
+a:hover {
+  color: var(--accent-shade);
+  text-decoration: underline;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+/******************************
+ * HEADER
+ ******************************/
+.modern-header {
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #e7eaf0;
+}
+.modern-header .meta {
+  color: #7f8c8d;
+  font-size: 13px;
+}
+
+/******************************
+ * TOP GRID (cards + environment)
+ ******************************/
+.top-grid {
+  display: grid;
+  grid-template-columns: 320px 1fr;
+  gap: 24px;
+  margin-bottom: 24px;
+  align-items: start;
+}
+
+/******************************
+ * ENVIRONMENT CARD
+ ******************************/
+.environment-card {
+  background-color: white;
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  padding: 16px 20px;
+  overflow: hidden;
+}
+#environment-header {
+  cursor: pointer;
+  margin-bottom: 8px;
+}
+#environment-header h2:hover::after {
+  content: " (toggle)";
+  color: #7f8c8d;
+  font-style: italic;
+  font-size: 12px;
+}
+#environment {
+  margin-bottom: 0;
+}
+#environment td {
+  padding: 6px 12px;
+  border-bottom: 1px solid #eceef3;
+  font-size: 13px;
+}
+#environment tr:nth-child(odd) {
+  background-color: #f8f9fa;
+}
+#environment ul {
+  margin: 0;
+  padding: 0 20px;
+}
+
+/******************************
+ * RESULT CARDS
+ ******************************/
+.result-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  gap: 12px;
+}
+
+.result-card {
+  flex: 1;
+  min-width: 120px;
+  background-color: white;
+  border-radius: var(--border-radius);
+  padding: 16px 20px;
+  box-shadow: var(--box-shadow);
+  text-align: center;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.result-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+}
+
+.result-card__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  font-size: 16px;
+  margin-bottom: 8px;
+  background-color: #f0f0f0;
+}
+.result-card.passed .result-card__icon {
+  background-color: rgba(46, 204, 113, 0.12);
+  color: var(--success-color);
+}
+.result-card.failed .result-card__icon {
+  background-color: rgba(231, 76, 60, 0.12);
+  color: var(--danger-color);
+}
+.result-card.error .result-card__icon {
+  background-color: rgba(231, 76, 60, 0.12);
+  color: var(--danger-color);
+}
+.result-card.skipped .result-card__icon {
+  background-color: rgba(149, 165, 166, 0.12);
+  color: var(--skipped-color);
+}
+.result-card.xfailed .result-card__icon {
+  background-color: rgba(243, 156, 18, 0.12);
+  color: var(--warning-color);
+}
+.result-card.xpassed .result-card__icon {
+  background-color: rgba(26, 188, 156, 0.12);
+  color: var(--info-color);
+}
+.result-card.rerun .result-card__icon {
+  background-color: rgba(92, 96, 245, 0.12);
+  color: var(--accent);
+}
+.result-card.retried .result-card__icon {
+  background-color: rgba(249, 115, 22, 0.12);
+  color: #f97316;
+}
+
+.result-card.passed {
+  border-top: 4px solid var(--success-color);
+}
+.result-card.failed {
+  border-top: 4px solid var(--danger-color);
+}
+.result-card.error {
+  border-top: 4px solid var(--danger-color);
+}
+.result-card.skipped {
+  border-top: 4px solid var(--skipped-color);
+}
+.result-card.xfailed {
+  border-top: 4px solid var(--warning-color);
+}
+.result-card.xpassed {
+  border-top: 4px solid var(--info-color);
+}
+.result-card.rerun {
+  border-top: 4px solid var(--accent);
+}
+.result-card.retried {
+  border-top: 4px solid #f97316;
+}
+
+.result-card .count {
+  display: block;
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 4px;
+}
+.result-card .count.passed {
+  color: var(--success-color);
+}
+.result-card .count.failed {
+  color: var(--danger-color);
+}
+.result-card .count.error {
+  color: var(--danger-color);
+}
+.result-card .count.skipped {
+  color: var(--skipped-color);
+}
+.result-card .count.xfailed {
+  color: var(--warning-color);
+}
+.result-card .count.xpassed {
+  color: var(--info-color);
+}
+.result-card .count.rerun {
+  color: var(--accent);
+}
+.result-card .count.retried {
+  color: #f97316;
+}
+
+.result-card .label {
+  display: block;
+  color: #7f8c8d;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+/******************************
+ * SUMMARY PANEL
+ ******************************/
+.summary-panel {
+  background-color: white;
+  border-radius: var(--border-radius);
+  padding: 20px 24px;
+  margin-bottom: 24px;
+  box-shadow: var(--box-shadow);
+}
+
+.summary-panel__header {
+  margin-bottom: 16px;
+}
+
+.run-count {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--primary-color);
+}
+
+/******************************
+ * CONTROLS
+ ******************************/
+.controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  border-top: 1px solid #eceef3;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.filters {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.collapse {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/******************************
+ * TOGGLE SWITCHES
+ ******************************/
+.filter-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+  padding: 4px 0;
+}
+.filter-switch[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.switch-track {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 22px;
+  border-radius: 11px;
+  background-color: #c0ccda;
+  transition: background-color 0.3s ease;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.switch-track input[type=checkbox] {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  cursor: pointer;
+  margin: 0;
+  z-index: 2;
+}
+.switch-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transition: left 0.3s ease;
+  z-index: 1;
+}
+.switch-track input:checked + .switch-thumb {
+  left: 20px;
+}
+
+.switch-label-text {
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.filter-switch--passed .switch-track:has(input:checked) {
+  background-color: var(--success-color);
+}
+.filter-switch--passed .switch-label-text {
+  color: var(--success-color);
+}
+.filter-switch--failed .switch-track:has(input:checked) {
+  background-color: var(--danger-color);
+}
+.filter-switch--failed .switch-label-text {
+  color: var(--danger-color);
+}
+.filter-switch--error .switch-track:has(input:checked) {
+  background-color: var(--danger-color);
+}
+.filter-switch--error .switch-label-text {
+  color: var(--danger-color);
+}
+.filter-switch--skipped .switch-track:has(input:checked) {
+  background-color: var(--skipped-color);
+}
+.filter-switch--skipped .switch-label-text {
+  color: var(--skipped-color);
+}
+.filter-switch--xfailed .switch-track:has(input:checked) {
+  background-color: var(--warning-color);
+}
+.filter-switch--xfailed .switch-label-text {
+  color: var(--warning-color);
+}
+.filter-switch--xpassed .switch-track:has(input:checked) {
+  background-color: var(--info-color);
+}
+.filter-switch--xpassed .switch-label-text {
+  color: var(--info-color);
+}
+.filter-switch--rerun .switch-track:has(input:checked) {
+  background-color: var(--accent);
+}
+.filter-switch--rerun .switch-label-text {
+  color: var(--accent);
+}
+.filter-switch--retried .switch-track:has(input:checked) {
+  background-color: #f97316;
+}
+.filter-switch--retried .switch-label-text {
+  color: #f97316;
+}
+
+/******************************
+ * BUTTONS
+ ******************************/
+.btn {
+  padding: 6px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition);
+  border: 1.5px solid var(--accent);
+}
+.btn--primary {
+  background-color: var(--accent);
+  color: #fff;
+}
+.btn--primary:hover {
+  background-color: var(--accent-shade);
+  border-color: var(--accent-shade);
+}
+.btn--outline {
+  background-color: transparent;
+  color: var(--accent);
+}
+.btn--outline:hover {
+  background-color: var(--accent);
+  color: #fff;
+}
+
+/******************************
+ * TEST RESULT COLORS
+ ******************************/
+span.passed,
+.passed .col-result {
+  color: var(--success-color);
+  font-weight: 500;
+}
+span.skipped,
+.skipped .col-result {
+  color: var(--skipped-color);
+  font-weight: 500;
+}
+span.xfailed,
+.xfailed .col-result {
+  color: var(--warning-color);
+  font-weight: 500;
+}
+span.rerun,
+.rerun .col-result {
+  color: var(--accent);
+  font-weight: 500;
+}
+span.failed,
+.failed .col-result {
+  color: var(--danger-color);
+  font-weight: 500;
+}
+span.error,
+.error .col-result {
+  color: var(--danger-color);
+  font-weight: 500;
+}
+span.xpassed,
+.xpassed .col-result {
+  color: var(--info-color);
+  font-weight: 500;
+}
+
+.col-links__extra {
+  margin-right: 5px;
+  color: var(--accent);
+}
+
+/******************************
+ * RESULTS TABLE
+ ******************************/
+#results-table {
+  background-color: white;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  box-shadow: var(--box-shadow);
+  font-size: 14px;
+  border: none;
+}
+#results-table th {
+  padding: 12px 16px;
+  text-align: left;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  background-color: #f8f9fa;
+  color: var(--primary-color);
+  border-bottom: 2px solid #eceef3;
+}
+#results-table td {
+  padding: 12px 16px;
+  border-bottom: 1px solid #eceef3;
+  transition: background-color 0.15s ease;
+}
+#results-table tr:hover td {
+  background-color: #f8f9fa;
+}
+
+/******************************
+ * COLLAPSIBLE ROWS
+ ******************************/
+.collapsible {
+  cursor: pointer;
+}
+.collapsible td:not(.col-links):hover {
+  background-color: #f1f3f5;
+}
+
+.col-result {
+  width: 130px;
+  font-weight: 500;
+}
+.col-result:hover::after {
+  content: " (hide details)";
+  color: #bbb;
+  font-style: italic;
+  font-size: 11px;
+}
+.col-result.collapsed:hover::after {
+  content: " (show details)";
+  color: #bbb;
+  font-style: italic;
+  font-size: 11px;
+}
+
+/******************************
+ * LOG & EXTRAS
+ ******************************/
+.extras-row {
+  background-color: #f8f9fa;
+}
+.extra {
+  padding: 0;
+}
+.extraHTML {
+  padding: 15px;
+}
+
+.logwrapper {
+  max-height: 400px;
+  overflow-y: auto;
+  background-color: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: var(--border-radius);
+  margin-top: 10px;
+}
+.logwrapper.expanded {
+  max-height: none;
+}
+.logwrapper.expanded .logexpander:after {
+  content: "collapse [-]";
+}
+.logwrapper .logexpander {
+  z-index: 1;
+  position: sticky;
+  top: 10px;
+  width: max-content;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  padding: 5px 10px;
+  margin: 10px 0 10px calc(100% - 100px);
+  cursor: pointer;
+  background-color: #ffffff;
+  font-size: 12px;
+  color: #616161;
+  transition: var(--transition);
+}
+.logwrapper .logexpander:after {
+  content: "expand [+]";
+}
+.logwrapper .logexpander:hover {
+  color: var(--primary-color);
+  border-color: var(--accent);
+}
+.logwrapper .log {
+  min-height: 40px;
+  position: relative;
+  top: -50px;
+  height: calc(100% + 50px);
+  border: 1px solid #e9ecef;
+  color: var(--primary-color);
+  display: block;
+  font-family: "JetBrains Mono", "Fira Code", "Courier New", Courier, monospace;
+  font-size: 12px;
+  padding: 8px 12px;
+  padding-right: 80px;
+  white-space: pre-wrap;
+  background-color: var(--light-color);
+}
+
+/******************************
+ * MEDIA
+ ******************************/
+div.media {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e9ecef;
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  margin: 15px 0;
+  width: 100%;
+  max-width: 500px;
+  float: right;
+}
+.media-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  background-color: #f8f9fa;
+}
+.media-container__nav--left,
+.media-container__nav--right {
+  padding: 8px 12px;
+  cursor: pointer;
+  background-color: var(--light-color);
+  border-radius: 50%;
+  transition: var(--transition);
+}
+.media-container__nav--left:hover,
+.media-container__nav--right:hover {
+  background-color: #e2e6ea;
+}
+.media-container__viewport {
+  flex: 1;
+  text-align: center;
+  padding: 10px;
+}
+.media-container__viewport img,
+.media-container__viewport video {
+  max-width: 100%;
+  max-height: 300px;
+  object-fit: contain;
+  border-radius: var(--border-radius);
+}
+.media__name,
+.media__counter {
+  padding: 10px;
+  text-align: center;
+  background-color: #f8f9fa;
+  border-top: 1px solid #e9ecef;
+}
+
+/******************************
+ * SORTING
+ ******************************/
+.sortable {
+  cursor: pointer;
+  position: relative;
+  padding-right: 20px;
+}
+.sortable:after {
+  content: "";
+  position: absolute;
+  right: 5px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+.sortable.desc:after {
+  border-bottom: 6px solid var(--accent);
+}
+.sortable.asc:after {
+  border-top: 6px solid var(--accent);
+}
+
+/******************************
+ * RELOAD & UTILITIES
+ ******************************/
+.hidden,
+.summary__reload__button.hidden {
+  display: none;
+}
+
+.summary__reload {
+  display: flex;
+  justify-content: center;
+  margin: 12px 0;
+}
+.summary__reload__button {
+  display: flex;
+  color: white;
+  font-weight: 500;
+  background-color: var(--warning-color);
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  padding: 10px 20px;
+  border: none;
+  transition: var(--transition);
+}
+.summary__reload__button:hover {
+  background-color: #e67e22;
+}
+
+/******************************
+ * RESPONSIVE
+ ******************************/
+@media (max-width: 1100px) {
+  .top-grid {
+    grid-template-columns: 1fr;
+  }
+}
+@media (max-width: 992px) {
+  body {
+    min-width: auto;
+    padding: 16px;
+  }
+  .result-cards {
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: 8px;
+  }
+  .result-card {
+    padding: 12px;
+  }
+  .controls {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
diff --git a/src/pytest_html/util.py b/src/pytest_html/util.py
index a6547916..d8707f95 100644
--- a/src/pytest_html/util.py
+++ b/src/pytest_html/util.py
@@ -20,7 +20,7 @@
     _ansi_styles = []
 
 
-def _read_template(search_paths, template_name="index.jinja2"):
+def _read_template(search_paths, template_name="layout.jinja2"):
     env = Environment(
         loader=FileSystemLoader(search_paths),
         autoescape=select_autoescape(
diff --git a/testing/legacy_test_pytest_html.py b/testing/legacy_test_pytest_html.py
index 08ad208d..ffbc01b5 100644
--- a/testing/legacy_test_pytest_html.py
+++ b/testing/legacy_test_pytest_html.py
@@ -335,7 +335,7 @@ def test_resources_inline_css(self, testdir):
         assert result.ret == 0
 
         content = pkg_resources.resource_string(
-            "pytest_html", os.path.join("resources", "style.css")
+            "pytest_html", os.path.join("resources", "classic", "style.css")
         )
         content = content.decode("utf-8")
         assert content
@@ -352,7 +352,7 @@ def test_resources(self, testdir):
         content = content.decode("utf-8")
         assert content
         assert content in html
-        regex_css_link = '<link href="assets/style.css" rel="stylesheet"'
+        regex_css_link = '<link href="./assets/style.css" rel="stylesheet"'
         assert re.search(regex_css_link, html) is not None
 
     @pytest.mark.parametrize("result", ["pass", "fail"])
diff --git a/testing/test_integration.py b/testing/test_integration.py
index 891c8877..8f188acd 100644
--- a/testing/test_integration.py
+++ b/testing/test_integration.py
@@ -6,7 +6,6 @@
 import re
 import urllib.parse
 from base64 import b64encode
-from pathlib import Path
 
 import pytest
 from assertpy import assert_that
@@ -111,21 +110,13 @@ def get_log(page, test_id=None):
 
 
 def file_content():
-    try:
-        return (
-            importlib.resources.files("pytest_html")
-            .joinpath("resources", "style.css")
-            .read_bytes()
-            .decode("utf-8")
-            .strip()
-        )
-    except AttributeError:
-        # Needed for python < 3.9
-        import pkg_resources
-
-        return pkg_resources.resource_string(
-            "pytest_html", os.path.join("resources", "style.css")
-        ).decode("utf-8")
+    return (
+        importlib.resources.files("pytest_html")
+        .joinpath("resources", "classic", "style.css")
+        .read_bytes()
+        .decode("utf-8")
+        .strip()
+    )
 
 
 class TestHTML:
@@ -408,7 +399,7 @@ def test_resources_css(self, pytester):
         page = run(pytester)
 
         assert_that(page.select_one("head link")["href"]).is_equal_to(
-            str(Path("assets", "style.css"))
+            "./assets/style.css"
         )
 
     def test_custom_content_in_summary(self, pytester):
diff --git a/testing/test_themes.py b/testing/test_themes.py
new file mode 100644
index 00000000..12c6d01d
--- /dev/null
+++ b/testing/test_themes.py
@@ -0,0 +1,119 @@
+from __future__ import annotations
+
+pytest_plugins = ("pytester",)
+
+
+def run(pytester, path="report.html", cmd_flags=None):
+    cmd_flags = cmd_flags or []
+    path = pytester.path.joinpath(path)
+    return pytester.runpytest("--html", path, *cmd_flags)
+
+
+class TestBuiltinClassicTheme:
+    def test_default_theme_generates_report(self, pytester):
+        pytester.makepyfile("def test_pass(): pass")
+        result = run(pytester)
+        result.assert_outcomes(passed=1)
+        assert (pytester.path / "report.html").exists()
+
+    def test_explicit_classic_theme(self, pytester):
+        pytester.makeini("[pytest]\nhtml_theme = classic")
+        pytester.makepyfile("def test_pass(): pass")
+        result = run(pytester)
+        result.assert_outcomes(passed=1)
+        report = (pytester.path / "report.html").read_text()
+        assert "pytest-html" in report
+
+
+class TestBuiltinModernTheme:
+    def test_modern_theme_generates_report(self, pytester):
+        pytester.makeini("[pytest]\nhtml_theme = modern")
+        pytester.makepyfile("def test_pass(): pass")
+        result = run(pytester)
+        result.assert_outcomes(passed=1)
+        report = (pytester.path / "report.html").read_text()
+        assert "modern-header" in report
+        assert "result-card" in report
+
+    def test_modern_theme_uses_modern_css(self, pytester):
+        pytester.makeini("[pytest]\nhtml_theme = modern")
+        pytester.makepyfile("def test_pass(): pass")
+        result = run(pytester)
+        result.assert_outcomes(passed=1)
+        css_path = pytester.path / "assets" / "style.css"
+        css = css_path.read_text()
+        assert ".result-card" in css
+        assert ".filter-switch" in css
+
+
+class TestThemePath:
+    def test_ini_theme_path_overrides_entry_points(self, pytester):
+        theme_dir = pytester.path / "my_theme"
+        theme_dir.mkdir()
+        (theme_dir / "layout.jinja2").write_text(
+            '{% extends "base.jinja2" %}\n'
+            "{% block header %}\n"
+            '<h1 id="title">CUSTOM THEME: {{ title }}</h1>\n'
+            "{% endblock header %}\n"
+        )
+        pytester.makeini(f"[pytest]\nhtml_theme_path = {theme_dir}\n")
+        pytester.makepyfile("def test_pass(): pass")
+        result = run(pytester)
+        result.assert_outcomes(passed=1)
+        report = (pytester.path / "report.html").read_text()
+        assert "CUSTOM THEME:" in report
+
+    def test_theme_path_with_custom_css(self, pytester):
+        theme_dir = pytester.path / "my_theme"
+        theme_dir.mkdir()
+        (theme_dir / "layout.jinja2").write_text('{% extends "base.jinja2" %}\n')
+        (theme_dir / "style.css").write_text("body { background: pink; }\n")
+        pytester.makeini(f"[pytest]\nhtml_theme_path = {theme_dir}\n")
+        pytester.makepyfile("def test_pass(): pass")
+        result = run(pytester)
+        result.assert_outcomes(passed=1)
+        css_path = pytester.path / "assets" / "style.css"
+        css = css_path.read_text()
+        assert "background: pink" in css
+
+    def test_theme_path_without_layout_raises_error(self, pytester):
+        theme_dir = pytester.path / "bad_theme"
+        theme_dir.mkdir()
+        pytester.makeini(f"[pytest]\nhtml_theme_path = {theme_dir}\n")
+        pytester.makepyfile("def test_pass(): pass")
+        result = run(pytester)
+        result.stderr.fnmatch_lines(["*does not contain layout.jinja2*"])
+
+    def test_theme_path_falls_back_to_classic_css(self, pytester):
+        theme_dir = pytester.path / "minimal_theme"
+        theme_dir.mkdir()
+        (theme_dir / "layout.jinja2").write_text('{% extends "base.jinja2" %}\n')
+        pytester.makeini(f"[pytest]\nhtml_theme_path = {theme_dir}\n")
+        pytester.makepyfile("def test_pass(): pass")
+        result = run(pytester)
+        result.assert_outcomes(passed=1)
+        css_path = pytester.path / "assets" / "style.css"
+        css = css_path.read_text()
+        assert "font-family: Helvetica" in css
+
+
+class TestThemeNotFound:
+    def test_unknown_theme_raises_error(self, pytester):
+        pytester.makeini("[pytest]\nhtml_theme = nonexistent")
+        pytester.makepyfile("def test_pass(): pass")
+        result = run(pytester)
+        result.stderr.fnmatch_lines(["*Unknown html_theme 'nonexistent'*"])
+
+
+class TestThemeWithExtraCss:
+    def test_extra_css_appended_to_theme_css(self, pytester):
+        pytester.makeini("[pytest]\nhtml_theme = modern")
+        extra_css = pytester.path / "extra.css"
+        extra_css.write_text("body { margin: 99px; }\n")
+        pytester.makepyfile("def test_pass(): pass")
+        result = run(pytester, cmd_flags=["--css", str(extra_css)])
+        result.assert_outcomes(passed=1)
+        css_path = pytester.path / "assets" / "style.css"
+        css = css_path.read_text()
+        assert ".result-card" in css
+        assert "margin: 99px" in css
diff --git a/testing/test_unit.py b/testing/test_unit.py
index 1ea945ea..68dd18bc 100644
--- a/testing/test_unit.py
+++ b/testing/test_unit.py
@@ -17,7 +17,7 @@ def run(pytester, path="report.html", cmd_flags=None):
 def file_content():
     return (
         importlib.resources.files("pytest_html")
-        .joinpath("assets", "style.css")
+        .joinpath("resources", "classic", "style.css")
         .read_bytes()
         .decode("utf-8")
         .strip()