diff --git a/config.toml b/config.toml
index 38e9358b76..8f05e80fd5 100644
--- a/config.toml
+++ b/config.toml
@@ -8,11 +8,11 @@ title = "Bevy Engine"
 compile_sass = true
 
 # Whether to build a search index to be used later on by a JavaScript library
+default_language = "en"
 build_search_index = true
 
-generate_feed = true
-rss_limit = 1000
-highlight_theme = "charcoal"
+generate_feeds = true
+feed_limit = 1000
 
 taxonomies = [
     {name = "news", feed = true},
@@ -26,3 +26,7 @@ highlight_theme = "css"
 
 [extra]
 # Put all your custom variables here
+
+[search]
+index_format="fuse_json"
+include_path = true
\ No newline at end of file
diff --git a/generate-wasm-examples/generate_wasm_examples.sh b/generate-wasm-examples/generate_wasm_examples.sh
index 304eb47cda..53a45da394 100755
--- a/generate-wasm-examples/generate_wasm_examples.sh
+++ b/generate-wasm-examples/generate_wasm_examples.sh
@@ -1,4 +1,4 @@
-#!/bin/bash
+#!/usr/bin/env bash
 
 echo Generating WASM example list...
 
diff --git a/sass/components/_main-menu.scss b/sass/components/_main-menu.scss
index 69c4a5a3e0..f958f83db8 100644
--- a/sass/components/_main-menu.scss
+++ b/sass/components/_main-menu.scss
@@ -28,6 +28,9 @@
 
     &:hover {
       color: $color-blue;
+      svg {
+        fill: $color-blue; // (2024-05-15) only actually used by search button
+      }
     }
 
     &--active {
@@ -51,6 +54,10 @@
       outline: $focus-outline;
     }
   }
+
+  &__search {
+    display: none; // re-enabled below
+  }
 }
 
 // MODE: Off-Canvas Mobile Menu
@@ -59,9 +66,10 @@
     $padding: 8px;
     $bottom-buffer: 60px; // Add extra length to compensate for address-bar
 
-    --main-menu-switch-height: 0px;
-
     position: fixed;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
     top: 0px;
     left: -$mobile-menu-width;
     width: $mobile-menu-width;
@@ -75,8 +83,6 @@
     box-shadow: 0px 0px 16px rgba(#000, 0.3);
 
     &--with-page-menu {
-      --main-menu-switch-height: 56px;
-
       .main-menu__page-menu-switch {
         display: block;
       }
@@ -97,15 +103,22 @@
       }
     }
 
+    &__search__mobile {
+      display: flex;
+      padding: 0 $padding;
+      .search-button {
+        flex-grow: 1;
+      }
+    }
+
     &__page-menu-switch {
       display: none;
-      padding: $padding $padding 0 $padding;
-      height: var(--main-menu-switch-height);
+      padding: 0 $padding;
     }
 
     &__content {
       position: relative;
-      height: calc(100% - var(--header-height) - var(--main-menu-switch-height));
+      flex-grow: 1;
       overflow-x: hidden;
     }
 
@@ -124,13 +137,13 @@
     &__menu {
       display: flex;
       flex-direction: column;
-      padding: $padding;
+      padding: 0 $padding;
       transform: translateX(0px);
     }
 
     &__page-menu {
       margin: 0;
-      padding: $padding;
+      padding: 0 $padding;
       transform: translateX(#{$mobile-menu-width});
     }
 
@@ -180,5 +193,9 @@
       font-weight: 500;
       text-decoration: none;
     }
+
+    &__search__desktop {
+      display: block;
+    }
   }
 }
diff --git a/sass/components/_search.scss b/sass/components/_search.scss
new file mode 100644
index 0000000000..9917fe60a2
--- /dev/null
+++ b/sass/components/_search.scss
@@ -0,0 +1,130 @@
+.search-button {
+  display: flex;
+  gap: 1em;
+  // reset <button> defaults
+  border: none;
+  background: none;
+
+  &__svg {
+    height: 1em;
+    fill: $default-color;
+    aspect-ratio: 1/1;
+  }
+}
+
+#search-dialog {
+  $highlight: $color-pink;
+  width: min(80ch, 90%);
+  max-height: 80vh;
+  border: none;
+  padding: 0;
+  background-color: transparent;
+  overflow: visible;
+
+  &::backdrop {
+    background-color: rgba($color-grey-800, 0.7);
+  }
+
+  .search-dialog__close {
+    position: absolute;
+    right: -24px;
+    background: none;
+    border: none;
+  }
+
+  .search-dialog__inner {
+    flex-grow: 1;
+    padding: 1em;
+    border: 2px solid $highlight;
+    border-radius: $border-radius;
+    background-color: $color-grey-900;
+    aspect-ratio: 3/2;
+  }
+
+  [role=form] {
+    $input-height: 2em;
+    display: flex;
+    gap: 1em;
+    align-items: center;
+    margin-bottom: 1em;
+
+    input {
+      width: 100%;
+      outline: none;
+      border: none;
+      font-size: $input-height;
+      background-color: transparent;
+      border-radius: 0;
+    }
+
+    label svg {
+      height: $input-height;
+      fill: $highlight;
+    }
+  }
+
+  #search-dialog__results {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    margin: 0;
+    padding: 1em;
+    gap: 1em;
+
+    a {
+      &::before {
+        color: $subtitle-color;
+        text-decoration: none;
+        display: inline-block;
+        padding-right: 8px;
+      }
+
+      // &[href*="/examples/"], &[href*="/examples-webgpu"] {
+      //   order: 10;
+      // }
+
+      // vaguely in top bar order
+
+      &[href^="/learn/book/"]::before {
+        content: "book:";
+      }
+
+      &[href^="/learn/quick-start/"]::before {
+        content: "quick start:";
+      }
+
+      &[href^="/news/"]::before {
+        content: "news:";
+      }
+
+      &[href^="/foundation/"]::before {
+        content: "foundation:";
+      }
+
+      &[href^="/examples/"]::before {
+        content: "examples (webgl):";
+      }
+
+      &[href^="/examples-webgpu/"]::before {
+        content: "examples (webgpu):";
+      }
+
+      &[href^="/donate/"]::before {
+        content: "donate:";
+      }
+    }
+  }
+
+  .search-dialog__tip ul {
+    display: inline;
+    margin: 0;
+    padding: 0;
+
+    li {
+      display: none;
+    }
+
+    li[data-chosen=true] {
+      display: inline;
+    }
+  }
+}
diff --git a/sass/site.scss b/sass/site.scss
index 1f9f0e089e..3e0f6429e4 100644
--- a/sass/site.scss
+++ b/sass/site.scss
@@ -45,6 +45,7 @@
 @import "components/on-this-page";
 @import "components/page-with-menu";
 @import "components/pr-list";
+@import "components/search";
 @import "components/sponsors";
 @import "components/syntax-theme";
 @import "components/tree-menu";
diff --git a/static/search.mjs b/static/search.mjs
new file mode 100644
index 0000000000..ff0d15a943
--- /dev/null
+++ b/static/search.mjs
@@ -0,0 +1,111 @@
+import Fuse from 'https://cdn.jsdelivr.net/npm/fuse.js@7.0.0/dist/fuse.mjs'
+
+document.getElementById("search-dialog").addEventListener('click', function (event) {
+    // allow clicking out of the search dialog
+    // based on https://stackoverflow.com/a/69421512
+    var rect = this.getBoundingClientRect();
+    if (event.target == this && !(rect.top <= event.clientY && event.clientY <= rect.top + rect.height
+        && rect.left <= event.clientX && event.clientX <= rect.left + rect.width)) {
+        this.close();
+    }
+});
+
+document.addEventListener("keydown", event => {
+    if (event.ctrlKey && event.key == "k") {
+        event.preventDefault();
+        SEARCH.open();
+    }
+})
+
+class Search {
+    RESULTS_LIMIT = 10;
+    FUSE_OPTIONS = {
+        keys: ["title", "body"],
+        includeMatches: true,
+        minMatchCharLength: 3,
+    };
+    index = null;
+    previous_search = null;
+    $dialog = document.getElementById("search-dialog")
+    $input = document.getElementById("search-dialog__input")
+    $results = document.getElementById("search-dialog__results")
+    $select = document.getElementById("search-dialog__select")
+    $search_tip_list = document.querySelector("#search-dialog aside ul");
+
+    async setup() {
+        this.index ??= await (await fetch("/search_index.en.json")).json();
+        this.fuse ??= new Fuse(this.index, this.FUSE_OPTIONS);
+        console.debug("fetched search index", this.index);
+    }
+
+    async open() {
+        if(this.$dialog.getAttribute("open") !== null) {
+            // already open
+            this.$input.focus();
+        } else {
+            this.$dialog.showModal();
+            this.change_tip();
+            this.change_placeholder();
+            await this.setup();
+            await this.search();
+        }
+    }
+
+    close() {
+        this.$dialog.close();
+    }
+
+    change_tip() {
+        let length = this.$search_tip_list.children.length;
+        let choice = Math.floor(Math.random() * length);
+        console.debug("chose tip", choice);
+        Array.from(this.$search_tip_list.children).forEach(
+            (tip, i) => tip.setAttribute("data-chosen", i == choice
+            ));
+    }
+
+    change_placeholder() {
+        let second_part = "";
+        switch (this.$select.value) {
+            case "docs":
+                second_part = "'s Documentation";
+                break;
+            case "assets":
+                second_part = "'s Assets";
+                break;
+            case "examples":
+                second_part = "'s Examples";
+                break;
+        }
+        this.$input.setAttribute("placeholder", `Search Bevy${second_part}...`);
+    }
+
+    async search() {
+        let current_path = window.location.pathname.split("/");
+        /** @type {string} */
+        const query = this.$input.value;
+        console.debug(`search: "${query}"`);
+        if (query == this.previous_search) {
+            // cursor movements trigger this function
+            return;
+        }
+        this.previous_search = query;
+        if (query.length == 0) {
+            return;
+        }
+        /** @type {{item: any}[]} */
+        let results = this.fuse.search(query);
+        console.debug(results);
+        let results_limit = results.slice(0, this.RESULTS_LIMIT);
+        this.$results.innerHTML = "";
+        results_limit.forEach((result) => {
+            let a = document.createElement("a");
+            a.innerText = result.item.title;
+            a.href = result.item.path;
+            this.$results.appendChild(a);
+        });
+    }
+
+}
+
+window.SEARCH = new Search()
\ No newline at end of file
diff --git a/templates/layouts/base.html b/templates/layouts/base.html
index b109aceaad..ac18a49feb 100644
--- a/templates/layouts/base.html
+++ b/templates/layouts/base.html
@@ -1,4 +1,5 @@
 {% import "macros/header.html" as header_macros %}
+{% import "macros/search.html" as search %}
 {% import "macros/public_draft.html" as public_draft %}
 
 {# Shortcut to get the section/page. This variable will have a value except in some special pages like `404.html`. #}
@@ -86,6 +87,7 @@
     <link rel="stylesheet" href="/site.css" />
     <link href="/atom.xml" rel="alternate" type="application/atom+xml" />
     <title>{{ page_title }}</title>
+    <script defer type="module" src="/search.mjs"></script>
     {% block head_extensions %}{% endblock head_extensions %}
   </head>
   <body>
@@ -156,12 +158,18 @@
                       height="16">
               </label>
             </div>
+            <div class="main-menu__search main-menu__search__mobile">
+              {{ search::search_button(icon=false, class="main-menu__link") }}
+            </div>
             {% block mobile_page_menu_switch %}{% endblock mobile_page_menu_switch %}
             <div class="main-menu__content">
               <div class="main-menu__page-menu">
                 {% block mobile_page_menu %}{% endblock mobile_page_menu %}
               </div>
               <ul class="main-menu__menu">
+                <li class="main-menu__entry main-menu__search main-menu__search__desktop">
+                  {{ search::search_button(icon=true, class="main-menu__link") }}
+                </li>
                 {{ header_macros::header_item(name="Getting Started", path="/learn/quick-start/getting-started",
                                 extra_class="main-menu__entry--getting-started", current_path=current_path) }}
                 {{ header_macros::header_item(name="Learn", current_path=current_path) }}
@@ -257,5 +265,6 @@
       }
     }
     </script>
+    {{ search::search_dialog() }}
   </body>
 </html>
diff --git a/templates/macros/search.html b/templates/macros/search.html
new file mode 100644
index 0000000000..ca86b7a7d8
--- /dev/null
+++ b/templates/macros/search.html
@@ -0,0 +1,51 @@
+{% macro search_icon() %}
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="search-button__svg">
+  <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+  <path
+    d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z" />
+</svg>
+{% endmacro %}
+
+{% macro search_button(icon=false, text="Search Bevy...", class="") %}
+<button class="search-button {{ class }}" aria-label="{{ text }}" onclick="SEARCH.open()">
+  {{ search::search_icon() }}
+  {% if not icon %}
+  <span> {{ text }} </span>
+  {% endif %}
+</button>
+{% endmacro %}
+
+{% macro search_dialog() %}
+<dialog id="search-dialog">
+  <button aria-label="Close Dialog" class="search-dialog__close" onclick="SEARCH.close()">
+    <img src="/assets/icon-times.svg" alt="A saltire or x-cross" width="16" height="16">
+  </button>
+  <div style="display: flex; flex-direction: column; height: 100%;">
+    <div class="search-dialog__inner">
+      <div role="form">
+        <label aria-label="Search all of Bevy..." for="search-dialog__input">
+          {{ search::search_icon() }}
+        </label>
+        <input id="search-dialog__input" autofocus onkeyup="SEARCH.search()">
+        <select id="search-dialog__select" onchange="SEARCH.change_placeholder()">
+          <option value="everything">Everything</option>
+          <option value="docs">Documentation</option>
+          <option value="assets">Assets</option>
+          <option value="examples">Examples</option>
+        </select>
+      </div>
+      <ul id="search-dialog__results"> </ul>
+    </div>
+    <aside class="search-dialog__tip" aria-label="tip" style="display: flex; padding-top: 0.5em;">
+      <div style="margin-inline: auto">
+        <b>Tip!</b>
+        <ul>
+          <li>Open this dialog with <kbd>Ctrl+K</kbd></li>
+          <li>#TODO some second thing</li>
+          <li>#TODO some third thing</li>
+        </ul>
+      </div>
+    </aside>
+  </div>
+</dialog>
+{% endmacro %}