diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
index 90bc0473a..3848f7453 100644
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@@ -18,9 +18,14 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
+      -
+        name: Install pagefind
+        uses: jaxxstorm/action-install-gh-release@v1.10.0
+        with:
+          repo: cloudcannon/pagefind
       -
         name: Checkout source code
-        uses: actions/checkout@v4.1.5
+        uses: actions/checkout@v4.1.6
       -
         name: Set up QEMU
         uses: docker/setup-qemu-action@v3
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 57deb79b9..7e196cf62 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -19,7 +19,11 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4.1.5
+    - name: Install pagefind
+      uses: jaxxstorm/action-install-gh-release@v1.10.0
+      with:
+          repo: cloudcannon/pagefind
+    - uses: actions/checkout@v4.1.6
     - name: Set up Python 3.8
       uses: actions/setup-python@v5
       with:
diff --git a/Makefile b/Makefile
index 299496721..ca8607406 100644
--- a/Makefile
+++ b/Makefile
@@ -1,15 +1,24 @@
 ESPHOME_PATH = ../esphome
 ESPHOME_REF = dev
+PAGEFIND_VERSION=1.1.0
+PAGEFIND=pagefind
+NET_PAGEFIND=../pagefindbin/pagefind
 
-.PHONY: html html-strict cleanhtml deploy help live-html Makefile netlify netlify-api api netlify-dependencies svg2png copy-svg2png minify
+.PHONY: html html-strict cleanhtml deploy help live-html live-pagefind Makefile netlify netlify-api api netlify-dependencies svg2png copy-svg2png minify
 
 html:
 	sphinx-build -M html . _build -j auto -n $(O)
-live-html:
+	${PAGEFIND}
+
+live-html:	html
 	sphinx-autobuild . _build -j auto -n $(O) --host 0.0.0.0
 
+live-pagefind:	html
+	${PAGEFIND} --serve
+
 html-strict:
 	sphinx-build -M html . _build -W -j auto -n $(O)
+	${PAGEFIND}
 
 minify:
 	minify _static/webserver-v1.js > _static/webserver-v1.min.js
@@ -32,6 +41,10 @@ api:
 	fi
 	ESPHOME_PATH=$(ESPHOME_PATH) doxygen Doxygen
 
+net-html:
+	sphinx-build -M html . _build -j auto -n $(O)
+	${NET_PAGEFIND}
+
 netlify-api: netlify-dependencies
 	mkdir -p _build/html/api
 	@if [ ! -d "$(ESPHOME_PATH)" ]; then \
@@ -40,15 +53,23 @@ netlify-api: netlify-dependencies
 	fi
 	ESPHOME_PATH=$(ESPHOME_PATH) ../doxybin/doxygen Doxygen
 
-netlify-dependencies:
+netlify-dependencies: pagefind-binary
 	mkdir -p ../doxybin
 	curl -L https://github.com/esphome/esphome-docs/releases/download/v1.10.1/doxygen-1.8.13.xz | xz -d >../doxybin/doxygen
 	chmod +x ../doxybin/doxygen
 
+pagefind-binary:
+	mkdir -p ../pagefindbin
+	curl -o pagefind-v$(PAGEFIND_VERSION)-x86_64-unknown-linux-musl.tar.gz https://github.com/CloudCannon/pagefind/releases/download/v$(PAGEFIND_VERSION)/pagefind-v$(PAGEFIND_VERSION)-x86_64-unknown-linux-musl.tar.gz -L
+	tar xzf pagefind-v$(PAGEFIND_VERSION)-x86_64-unknown-linux-musl.tar.gz
+	rm pagefind-v$(PAGEFIND_VERSION)-x86_64-unknown-linux-musl.tar.gz
+	mv pagefind ${NET_PAGEFIND}
+
+
 copy-svg2png:
 	cp svg2png/*.png _build/html/_images/
 
-netlify: netlify-dependencies netlify-api html copy-svg2png
+netlify: netlify-dependencies netlify-api net-html copy-svg2png
 
 lint: html-strict
 	python3 lint.py
diff --git a/_static/changelog-2024.5.0.png b/_static/changelog-2024.5.0.png
index 7d8a5f5cc..9dc41a69e 100644
Binary files a/_static/changelog-2024.5.0.png and b/_static/changelog-2024.5.0.png differ
diff --git a/_static/custom.css b/_static/custom.css
index 182ffa4ab..e7bd6737d 100644
--- a/_static/custom.css
+++ b/_static/custom.css
@@ -248,6 +248,34 @@ a:has(> img:only-child) {
 div.body p, div.body dd, div.body li, div.body blockquote {
   hyphens: none;
 }
+.pagefind-ui__form {
+    width: 100%;
+    max-width: 300px;
+    left: auto;
+    right: auto;
+    position: relative;
+}
+
+.pagefind-modular-list-excerpt, .pagefind-modular-list-title {
+    color: #111111 !important;
+}
+
+.search-results {
+    background-color: #f8f8f8;
+    box-shadow: 0 6px 10px rgb(0 0 0 / 0.2);
+    position: absolute;
+    z-index: 1500;
+    margin-top: 4px;
+    padding-right: 6px;
+    padding-left: 6px;
+    border-radius: 12px;
+    overflow: auto;
+    width: 0;
+    height: fit-content;
+    max-width: 650px;
+    transition: height, width 0.1s ease-in-out;
+    display: none;
+}
 
 /* dark theme */
 @media (prefers-color-scheme: dark) {
@@ -344,4 +372,24 @@ div.body p, div.body dd, div.body li, div.body blockquote {
     background-color: #8e8129;
   }
 
+  .search-results {
+    background-color: #313131;
+    box-shadow: 0 6px 10px rgb(0 0 0 / 0.8);
+  }
+  .pagefind-modular-list-excerpt, .pagefind-modular-list-title {
+      color: #eeeeee !important;
+  }
+
+  .pagefind-ui__form, .pagefind-modular-input, .search-results {
+    color: #ececec !important;
+  }
+  :root {
+    --pagefind-ui-primary: #eeeeee;
+    --pagefind-ui-text: #eeeeee;
+    --pagefind-ui-background: #152028;
+    --pagefind-ui-border: #152028;
+    --pagefind-ui-tag: #152028;
+  }
+
+
 }
diff --git a/_templates/layout.html b/_templates/layout.html
index b11da1a47..fe0c58b89 100644
--- a/_templates/layout.html
+++ b/_templates/layout.html
@@ -5,6 +5,7 @@
 {% endblock %}
 
 {%- block extrahead %}
+  <link href="/pagefind/pagefind-modular-ui.css" rel="stylesheet">
   <link rel="stylesheet" href="{{ pathto('_static/custom.css', 1) }}?hash={{ custom_css_hash }}" type="text/css" />
   <link rel="apple-touch-icon" sizes="180x180" href="/_static/apple-touch-icon.png">
   <link rel="shortcut icon" href="/_static/favicon.ico">
@@ -29,14 +30,16 @@
 {% endblock %}
 
 {% block relbar_top %}
-  {% if parents|length > 0 %}
   <ul class="breadcrumbs">
+  {% if parents|length > 0 %}
     {%- for doc in parents %}
       <li><a href="{{ doc.link|e }}">{{ doc.title }}</a> ➔</li>
     {%- endfor %}
       <li>{{title}}</li>
-  </ul>
+
   {% endif %}
+  </ul>
+  <div class="search-results" id="search-results"></div>
 {% endblock %}
 
 {% block footer %}
diff --git a/_templates/search.html b/_templates/search.html
new file mode 100644
index 000000000..04783c2dd
--- /dev/null
+++ b/_templates/search.html
@@ -0,0 +1,36 @@
+<!-- docs/_templates/search.html -->
+{% extends "page.html" %}
+
+{%- block htmltitle -%}
+<title>{{ _("Search") }} - {{ docstitle }}</title>
+{%- endblock htmltitle -%}
+
+{% block content %}
+<h1>{{ _("Search") }}</h1>
+<div id="search"></div>
+{% endblock %}
+
+{% block scripts -%}
+{{ super() }}
+{%- endblock scripts %}
+
+{% block extra_styles -%}
+{{ super() }}
+  <style type="text/css">
+    #search form input[type="text"] {
+      box-sizing: border-box;
+      width: 100%;
+      line-height: 2em;
+      padding-inline: 0.6em;
+      font-size: 1.2rem;
+      border-radius: 0.05rem;
+      border: 2px solid var(--color-foreground-border);
+      border-bottom-color: 2px solid var(--color-foreground-secondary);
+      transition: border-color 20ms ease;
+    }
+    #search form input[type="text"]:focus {
+      border-color: var(--color-foreground-primary);
+    }
+  </style>
+{%- endblock extra_styles %}
+
diff --git a/_templates/searchbox.html b/_templates/searchbox.html
new file mode 100644
index 000000000..7a7de9aaa
--- /dev/null
+++ b/_templates/searchbox.html
@@ -0,0 +1,82 @@
+<script src="/pagefind/pagefind-modular-ui.js"></script>
+<div class="pagefind-ui__form" id="search"></div>
+<div class="search-results" id="mobile-search-results"></div>
+<script>
+    let callbackAdded = null;
+
+    window.addEventListener('DOMContentLoaded', (event) => {
+        const std_target = document.getElementById("search-results");
+        const mobile_target = document.getElementById("mobile-search-results");
+        const inpel = document.getElementById("search");
+
+        function showTarget() {
+            var target = std_target;
+            if (window.innerWidth <= 875) {
+                target = mobile_target;
+                std_target.style.display = "none";
+            } else {
+                mobile_target.style.display = "none";
+            }
+            target.style.display = "block";
+            const rect = target.getBoundingClientRect();
+            const height = window.innerHeight;
+            target.style.width = "100%";
+            target.style.height = "fit-content";
+            target.style.maxHeight = (height - rect.top - 10) + "px";
+            if (!callbackAdded) {
+                callbackAdded = true;
+                document.addEventListener('click', clickCallback);
+            }
+        }
+
+        function hideTargets() {
+            std_target.style.display = "none";
+            mobile_target.style.display = "none";
+            std_target.style.height = "0";
+            mobile_target.style.height = "0";
+            if (callbackAdded) {
+                document.removeEventListener('click', clickCallback);
+                callbackAdded = false;
+            }
+        }
+
+
+        const instance = new PagefindModularUI.Instance({
+            showSubResults: true,
+            showImages: false,
+            ranking: {
+                pageLength: 0.0,
+                termSaturation: 1.6,
+                termFrequency: 0.4,
+                termSimilarity: 6.0
+            }
+        });
+
+        instance.add(new PagefindModularUI.Input({
+            containerElement: "#search"
+        }));
+
+        instance.add(new PagefindModularUI.ResultList({
+            containerElement: "#search-results"
+        }));
+        instance.add(new PagefindModularUI.ResultList({
+            containerElement: "#mobile-search-results"
+        }));
+
+        const clickCallback = (event) => {
+            const path = event.composedPath();
+            if (path.includes(std_target) || path.includes(mobile_target) || path.includes(inpel))
+                return;
+            hideTargets();
+        };
+        if (std_target && mobile_target) {
+            instance.on("results", (results) => {
+                if (results.results.length) {
+                    showTarget();
+                } else {
+                    hideTargets();
+                }
+            });
+        }
+    });
+</script>
diff --git a/components/display_menu/images/graphical_display_menu.png b/components/display_menu/images/graphical_display_menu.png
index 0f624696a..38c18c871 100644
Binary files a/components/display_menu/images/graphical_display_menu.png and b/components/display_menu/images/graphical_display_menu.png differ
diff --git a/components/esp32_camera.rst b/components/esp32_camera.rst
index 0de4c1ffd..5db3104ff 100644
--- a/components/esp32_camera.rst
+++ b/components/esp32_camera.rst
@@ -80,24 +80,24 @@ Image Settings:
 - **resolution** (*Optional*, enum): The resolution the camera will capture images at. Higher
   resolutions require more memory, if there's not enough memory you will see an error during startup.
 
-    - ``160x120`` (QQVGA)
-    - ``176x144`` (QCIF)
-    - ``240x176`` (HQVGA)
-    - ``320x240`` (QVGA)
-    - ``400x296`` (CIF)
-    - ``640x480`` (VGA, default)
-    - ``800x600`` (SVGA)
-    - ``1024x768`` (XGA)
-    - ``1280x1024`` (SXGA)
-    - ``1600x1200`` (UXGA)
-    - ``1920x1080`` (FHD)
-    - ``720x1280`` (Portrait HD)
-    - ``864x1536`` (Portrait 3MP)
-    - ``2048x1536`` (QXGA)
-    - ``2560x1440`` (QHD)
-    - ``2560x1600`` (WQXGA)
-    - ``1080x1920`` (Portrait FHD)
-    - ``2560x1920`` (QSXGA)
+    - ``160x120`` (QQVGA, 4:3)
+    - ``176x144`` (QCIF, 11:9)
+    - ``240x176`` (HQVGA, 15:11)
+    - ``320x240`` (QVGA, 4:3)
+    - ``400x296`` (CIF, 50:37)
+    - ``640x480`` (VGA, 4:3, default)
+    - ``800x600`` (SVGA, 4:3)
+    - ``1024x768`` (XGA, 4:3)
+    - ``1280x1024`` (SXGA, 5:4)
+    - ``1600x1200`` (UXGA, 4:3)
+    - ``1920x1080`` (FHD, 16:9)
+    - ``720x1280`` (Portrait HD, 9:16)
+    - ``864x1536`` (Portrait 3MP, 9:16)
+    - ``2048x1536`` (QXGA, 4:3)
+    - ``2560x1440`` (QHD, 16:9)
+    - ``2560x1600`` (WQXGA, 8:5)
+    - ``1080x1920`` (Portrait FHD, 9:16)
+    - ``2560x1920`` (QSXGA, 4:3)
 
 
 - **jpeg_quality** (*Optional*, int): The JPEG quality that the camera should encode images with.
diff --git a/components/images/DFR0627.jpg b/components/images/DFR0627.jpg
index 5a112ccc9..078872618 100644
Binary files a/components/images/DFR0627.jpg and b/components/images/DFR0627.jpg differ
diff --git a/components/output/pca9685.rst b/components/output/pca9685.rst
index 00e9b6293..a95f7878e 100644
--- a/components/output/pca9685.rst
+++ b/components/output/pca9685.rst
@@ -58,7 +58,7 @@ Configuration variables:
 
 -  **frequency** (*Optional*, float): The frequency to let the
    component drive all PWM outputs at. Must be in range from 24Hz to
-   1525.88Hz. Default ``1000Hz``.
+   1525.88Hz. Defaults to ``1000Hz``.
 -  **external_clock_input** (*Optional*, bool): Enable external clock input. PRE_SCALE register will by set to 3. Default to ``false``.
 -  **address** (*Optional*, int): The I²C address of the driver.
    Defaults to ``0x40``.
@@ -96,7 +96,7 @@ Configuration variables:
 ************************
 
 - **id** (**Required**, :ref:`config-id`): The id to use for this output component.
-- **channel** (**Required**, int): Chose the channel of the PCA9685 of
+- **channel** (**Required**, int): Choose the channel of the PCA9685 of
   this output component. Must be in range from 0 to 15.
 - **pca9685_id** (*Optional*, :ref:`config-id`): Manually specify the ID of the
   :ref:`PCA9685 hub <pca9685-component>`.
diff --git a/components/touchscreen/index.rst b/components/touchscreen/index.rst
index 2b9170fc3..b1c2d0e6f 100644
--- a/components/touchscreen/index.rst
+++ b/components/touchscreen/index.rst
@@ -56,7 +56,9 @@ Configuration variables:
     - **mirror_x** (*Optional*, boolean): If true, mirror the x axis.
     - **mirror_y** (*Optional*, boolean): If true, mirror the y axis.
 
-- **update_interval** (*Optional*, :ref:`config-time`): The interval to check the touchscreen. Defaults to ``never``. **NOTE:** You should set this to ``50ms`` when you dont have set the **interupt_pin**.
+
+- **update_interval** (*Optional*, :ref:`config-time`): The interval to check the touchscreen. Defaults to ``never``. **NOTE:** Set this to ``50ms`` when you dont have set the **interupt_pin**.
+- **touch_timeout** (*Optional*, :ref:`config-time`): The time to automatically check if touch was released. Defaults to ``never``.
 - **calibration** (*Optional*): When the touchscreen is not given the right configuration settings. You can set them here.
 
     - **x_min** (*Optional*, int): The raw value corresponding to the left
diff --git a/components/touchscreen/lilygo_t5_47.rst b/components/touchscreen/lilygo_t5_47.rst
index 3a1c3e2b1..d4b3b8975 100644
--- a/components/touchscreen/lilygo_t5_47.rst
+++ b/components/touchscreen/lilygo_t5_47.rst
@@ -22,9 +22,7 @@ Configuration variables:
 ------------------------
 
 - **id** (*Optional*, :ref:`config-id`): Manually set the ID of this touchscreen.
-- **interrupt_pin** (*Optional*, :ref:`Pin Schema <config-pin_schema>`): The touch detection pin.
-  Must be ``GPIO13``.
-
+- **interrupt_pin** (*Optional*, :ref:`Pin Schema <config-pin_schema>`): The touch detection pin. Must be ``GPIO13``.
 - All other options from :ref:`config-touchscreen`.
 
 See Also
diff --git a/components/valve/images/valve-ui.png b/components/valve/images/valve-ui.png
index 33c91f984..fe4b492f4 100644
Binary files a/components/valve/images/valve-ui.png and b/components/valve/images/valve-ui.png differ
diff --git a/conf.py b/conf.py
index e0edb4501..54bcc2cd3 100644
--- a/conf.py
+++ b/conf.py
@@ -167,6 +167,7 @@ html_sidebars = {
 }
 
 
+
 # -- Options for HTMLHelp output ------------------------------------------
 
 # Output file base name for HTML help builder.
diff --git a/images/graphical_display_menu.png b/images/graphical_display_menu.png
index 9848f835b..ea935e0e8 100644
Binary files a/images/graphical_display_menu.png and b/images/graphical_display_menu.png differ
diff --git a/images/wk2168.jpg b/images/wk2168.jpg
index 284699c93..6333b5120 100644
Binary files a/images/wk2168.jpg and b/images/wk2168.jpg differ
diff --git a/pagefind.yml b/pagefind.yml
new file mode 100644
index 000000000..c034230ce
--- /dev/null
+++ b/pagefind.yml
@@ -0,0 +1,9 @@
+site: _build/html
+exclude_selectors:
+  - "a.headerlink"
+  - ".toctree-wrapper"
+  - ".sphinxsidebar"
+  - ".breadcrumbs"
+glob: "{components,cookbook,guides,projects,web-api}/**/*.html"
+root_selector: div[role=main]
+