diff --git a/js/index.js b/js/index.js
index d807790551..17b1f70844 100644
--- a/js/index.js
+++ b/js/index.js
@@ -10,6 +10,7 @@ import dropdownMenu from './dropdown-menu'
 import anchorsIndicator from './anchors-indicator'
 import codeExample from './code-example'
 import popover from './popover'
+import searchBar404 from './search-bar-404'
 
 feedback()
 accordion()
@@ -21,3 +22,4 @@ dropdownMenu()
 anchorsIndicator()
 codeExample()
 popover()
+searchBar404()
diff --git a/js/popover/index.js b/js/popover/index.js
index 7961573902..1c5f654b5e 100644
--- a/js/popover/index.js
+++ b/js/popover/index.js
@@ -3,30 +3,32 @@ const COMPONENT_SELECTOR = `[${COMPONENT_NAME}]`
 const BODY_SELECTOR = 'data-popover-body'
 const TRIGGER_SELECTOR = '[data-popover-target]'
 
-const components = document.querySelectorAll(COMPONENT_SELECTOR)
+export default function () {
+  const components = document.querySelectorAll(COMPONENT_SELECTOR)
 
-for (let i = 0; i < components.length; i++) {
-  const triggers = components[i].querySelectorAll(TRIGGER_SELECTOR)
+  for (let i = 0; i < components.length; i++) {
+    const triggers = components[i].querySelectorAll(TRIGGER_SELECTOR)
 
-  for (let i = 0; i < triggers.length; i++) {
-    triggers[i].addEventListener('click', e => {
-      e.preventDefault()
+    for (let i = 0; i < triggers.length; i++) {
+      triggers[i].addEventListener('click', e => {
+        e.preventDefault()
 
-      const targetBody = document.querySelector(`[${BODY_SELECTOR}=${e.target.dataset.popoverTarget}]`)
+        const targetBody = document.querySelector(`[${BODY_SELECTOR}=${e.target.dataset.popoverTarget}]`)
 
-      components[i].classList.toggle(components[i].dataset.activeClass)
-    })
-  }
+        components[i].classList.toggle(components[i].dataset.activeClass)
+      })
+    }
 
-  document.addEventListener('click', e => {
-    if (components[i].classList.contains(components[i].dataset.activeClass)) {
-      const popoverBody = components[i].querySelector(`[${BODY_SELECTOR}]`)
+    document.addEventListener('click', e => {
+      if (components[i].classList.contains(components[i].dataset.activeClass)) {
+        const popoverBody = components[i].querySelector(`[${BODY_SELECTOR}]`)
 
-      for (let i = 0; i < triggers.length; i++) {
-        if (!popoverBody.contains(e.target) && e.target !== triggers[i]) {
-          components[i].classList.remove(components[i].dataset.activeClass)
+        for (let i = 0; i < triggers.length; i++) {
+          if (!popoverBody.contains(e.target) && e.target !== triggers[i]) {
+            components[i].classList.remove(components[i].dataset.activeClass)
+          }
         }
       }
-    }
-  })
+    })
+  }
 }
diff --git a/js/search-bar-404/index.js b/js/search-bar-404/index.js
new file mode 100644
index 0000000000..dd7b6a1d25
--- /dev/null
+++ b/js/search-bar-404/index.js
@@ -0,0 +1,13 @@
+const COMPONENT_NAME = 'data-search'
+const COMPONENT_SELECTOR = `[${COMPONENT_NAME}]`
+
+export default function () {
+  const search = document.querySelectorAll(COMPONENT_SELECTOR)
+  const pathParts = window.location.pathname.split("/")
+  const searchWord = pathParts[pathParts.length - 1]
+
+  for (let i = 0; i < search.length; i++) {
+    const input = search[i].querySelector('input')
+    input.value = searchWord
+  }
+}
diff --git a/src/404.html b/src/404.html
index 1a4e3c6d68..a174b18b2a 100644
--- a/src/404.html
+++ b/src/404.html
@@ -24,7 +24,7 @@ <h1>The page you were looking for doesn’t exist.</h1>
                 <div class="flex__column--10 markdown">
                   <p>You may have mistyped the address or the page may have moved. Double-check the URL and try again or search the term.</p>
 
-                  <div class="search">
+                  <div class="search" data-search>
                     {% include navbar/search.html placeholder="Enter a search term" %}
                   </div>
                 </div>