diff --git a/NEWS b/NEWS
index aa6ca5f1..7ad2f218 100644
--- a/NEWS
+++ b/NEWS
@@ -8,6 +8,7 @@
    "password_transport" option is "pipe".
  * Add a development script for upgrading pinned dependencies.
  * Fix the PostgreSQL database hook to properly parse "*options" values containing quoted spaces.
+ * Update the documentation to use Pagefind's component-based search UI.
 
 2.1.5
  * #1229: Document the permissions needed for the PostgreSQL database hook:
diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
index ff46536d..15375e3e 100644
--- a/docs/_includes/layouts/base.njk
+++ b/docs/_includes/layouts/base.njk
@@ -23,6 +23,7 @@
 {% if feedTitle and feedUrl %}
 		<link rel="alternate" href="{{ feedUrl }}" title="{{ feedTitle }}" type="application/atom+xml">
 {% endif %}
+    {{ head_additions | safe }}
 	</head>
 	<body>
 
diff --git a/docs/search.md b/docs/search.md
index 8a4183a9..a1a997d4 100644
--- a/docs/search.md
+++ b/docs/search.md
@@ -1,14 +1,48 @@
 ---
 title: Search the documentation
 eleventyExcludeFromCollections: true
+templateEngineOverride: md
+head_additions: >
+  <link href="/borgmatic/pagefind/pagefind-component-ui.css" rel="stylesheet">
+  <script src="/borgmatic/pagefind/pagefind-component-ui.js" type="module"></script>
+  <style>
+  @media (prefers-color-scheme: light) {
+      :root {
+          --pf-summary-font-size: 14px;
+          --pf-result-title-font-size: 16px;
+          --pf-result-excerpt-font-size: 15px;
+      }
+  }
+  @media (prefers-color-scheme: dark) {
+      :root {
+          --pf-summary-font-size: 14px;
+          --pf-result-title-font-size: 16px;
+          --pf-result-excerpt-font-size: 15px;
+      }
+  }
+
+  .pf-result .pf-result-title, .pf-heading-link {
+      font-weight: 600 !important;
+  }
+
+  .pf-result .pf-result-excerpt mark, .pf-heading-excerpt mark {
+      background-color: yellow !important;
+  }
+  </style>
 ---
-<link href="/borgmatic/pagefind/pagefind-ui.css" rel="stylesheet">
-<script src="/borgmatic/pagefind/pagefind-ui.js"></script>
-<div id="search"></div>
-<script>
+
+<pagefind-config bundle-path="/borgmatic/pagefind/" base-url="/borgmatic/"></pagefind-config>
+
+<p><pagefind-input placeholder="Search"></pagefind-input></p>
+<p><pagefind-summary></pagefind-summary></p>
+<p><pagefind-results></pagefind-results></p>
+
+<script type="module">
+    const manager = window.PagefindComponents.getInstanceManager();
+    const instance = manager.getInstance('default');
+
     window.addEventListener('DOMContentLoaded', (event) => {
-        let search = new PagefindUI({ element: '#search', showSubResults: true, autofocus: true });
         let url_parameters = new URLSearchParams(window.location.search);
-        search.triggerSearch(url_parameters.get('query'));
+        instance.triggerSearch(url_parameters.get('query'));
     });
 </script>
