diff --git a/bin/updateSiteSearch.mjs b/bin/updateSiteSearch.mjs
new file mode 100644
index 00000000..85658297
--- /dev/null
+++ b/bin/updateSiteSearch.mjs
@@ -0,0 +1,48 @@
+import fs from "fs";
+
+const metadataFilePath = "templates/data/meta-info.json";
+const siteSearchFilePath = "templates/data/site-search.json";
+
+/* Read from site metadata file and create search directory based on existing information */
+function updateSearchJSON() {
+    const searchList = [];
+
+    fs.readFile(metadataFilePath, (error, data) => {
+        if (error) {
+            console.log(`Error occurred in reading file ${metadataFilePath}`, error);
+            return;
+        }
+
+        const obj = JSON.parse(data);
+        let count = 0;
+
+        for (const [key, entry] of Object.entries(obj)) {
+            if (entry["searchable"] == true) {
+                const searchEntry = {};
+
+                try {
+                    searchEntry["id"] = count;
+                    searchEntry["title"] = entry["shortTitle"]? entry["shortTitle"] : entry["title"];
+                    searchEntry["desc"] = entry["desc"];
+                    searchEntry["link"] = `/${key}`;
+                    searchList.push(searchEntry);
+                } catch (e) {
+                    console.log(`Error in adding key ${key}: ${e}`);
+                }
+            }
+            count += 1;
+        }
+
+        try {
+            fs.writeFileSync(
+                siteSearchFilePath,
+                JSON.stringify(searchList, null, 2),
+                "utf-8",
+            );
+        } catch (e) {
+            console.log(`Error in writing file ${siteSearchFilePath}}: ${e}`);
+        }
+    });
+}
+
+updateSearchJSON();
diff --git a/content/head/combobox.php b/content/head/combobox.php
index adf05795..596831de 100644
--- a/content/head/combobox.php
+++ b/content/head/combobox.php
@@ -1,5 +1,6 @@
 <link rel="stylesheet" type="text/css" href="css/combobox.css" >
 <link rel="stylesheet" type="text/css" href="css/form.css" >
+<link rel="stylesheet" type="text/css" href="css/site-search.css" >
 
 <style>
   .combobox-example {
diff --git a/css/enable-flyout.css b/css/enable-flyout.css
index 2adc7240..aecfa8bf 100644
--- a/css/enable-flyout.css
+++ b/css/enable-flyout.css
@@ -179,7 +179,7 @@
   color: #fff !important;
   display: block;
   font-family: "Helvetica", "Arial", "sans-serif";
-  font-size: 1.125rem;
+  font-size: 1rem;
   line-height: 1.6;
   padding: 0.625rem 0.75rem;
   text-decoration: none;
diff --git a/css/site-search.css b/css/site-search.css
new file mode 100644
index 00000000..383b23ee
--- /dev/null
+++ b/css/site-search.css
@@ -0,0 +1,163 @@
+:root {
+  --focus-color: #097efb;
+  --focus-color-dark-bg: #3b99fc;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --focus-color: #3b99fc;
+    --focus-color-dark-bg: #097efb;
+  }
+}
+.site-search {
+  display: flex;
+  flex-direction: row;
+}
+.site-search__term {
+  width: 100%;
+  border: #2b2929;
+  border-right: none;
+  padding: 5px;
+  height: 2.25rem;
+  color: #000;
+}
+.site-search__button {
+  width: 2.5rem;
+  height: 2.25rem;
+  background: white;
+  border: none;
+  text-align: center;
+  cursor: pointer;
+  padding: 0 0 10px 10px;
+  margin: 0 !important;
+}
+.site-search__icon {
+  width: 1.25rem;
+}
+.site-search__inner-container {
+  text-align: left;
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  font-size: 100%;
+  font-family: sans-serif;
+  box-shadow: 0 4px 19px 0 rgba(122, 122, 122, 0.2), 0 6px 18px 0 rgba(122, 122, 122, 0.2);
+}
+.site-search__group {
+  padding: 10px;
+}
+.site-search__reset-button {
+  position: absolute;
+  z-index: 1;
+  right: 5px;
+  top: 0;
+  bottom: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  -webkit-appearance: none;
+  -khtml-appearance: none;
+  -ms-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+.enable-combobox input[role="combobox"]:not(:valid) ~ .site-search__reset-button {
+  display: none;
+  border: solid 1px red;
+}
+.site-search [role="alert"] {
+  position: absolute;
+  top: 0.8em;
+  right: 2em;
+  font-size: 0.8em;
+  color: #777;
+  z-index: 2;
+}
+.site-search input[role="combobox"]:focus {
+  outline: none;
+}
+.site-search [hidden] {
+  display: none !important;
+}
+.site-search__reset-button-image {
+  display: inherit;
+}
+.site-search [role="listbox"] {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  top: 2.2em;
+  left: 0;
+  background-color: #fff;
+  border: solid 1px #ccc;
+  width: 100%;
+  box-sizing: border-box;
+  z-index: 9999999;
+  max-height: 200px;
+  overflow: auto;
+}
+.site-search [role="listbox"] a {
+  margin: inherit;
+  display: block;
+  text-decoration: none !important;
+  color: inherit;
+  padding: 0.3em 0.5em;
+}
+.site-search [role="listbox"] li {
+  padding: 0;
+}
+.site-search [role="option"] {
+  display: block;
+  margin: 0;
+  padding: 0.3em 0.5em;
+  list-style: none;
+  font-size: 1rem;
+  cursor: pointer;
+  border-bottom: 1px solid #ccc;
+}
+.site-search [role="option"]:hover {
+  color: #000;
+  background-color: #ccc;
+}
+.site-search [aria-selected="true"] {
+  color: #fff;
+  background-color: #ccc;
+}
+.site-search [aria-selected="true"] p,
+.site-search [aria-selected="true"] strong {
+  color: #000;
+}
+.site-search__controls-container {
+  display: flex;
+  flex-direction: row;
+}
+.site-search input[role="combobox"] {
+  font-size: inherit !important;
+  height: inherit !important;
+  padding: inherit !important;
+  border: none !important;
+}
+.site-search [role="option"]:hover {
+  color: #000;
+  background-color: #ccc;
+}
+.site-search [role="option"]:hover p,
+.site-search [role="option"]:hover strong {
+  color: #000;
+}
+.enable__is-dark-mode .enable-combobox [role="listbox"] {
+  background: #121212;
+}
+.enable__is-dark-mode .enable-combobox .site-search__button {
+  background: #121212;
+}
+.enable__is-dark-mode .enable-combobox .site-search__icon {
+  background: #121212;
+  content: url('../images/search.svg');
+}
+.highlight {
+  background-color: yellow;
+  color: black;
+  font-weight: bold;
+}
+/*# sourceMappingURL=site-search.css.map */
\ No newline at end of file
diff --git a/css/site.css b/css/site.css
index d01c00c7..749cfa57 100644
--- a/css/site.css
+++ b/css/site.css
@@ -16,7 +16,7 @@
 .enable-logo {
   text-decoration: none;
   text-align: center;
-  width: 150px;
+  width: 120px;
   min-height: 85px;
   display: flex;
   vertical-align: middle;
@@ -46,11 +46,11 @@
   display: flex;
   justify-content: space-between;
   background: #5d5c5c;
-  padding: 0 10px;
+  padding: 0px 10px;
 }
 @media only screen and (min-width: 960px) {
   .nav-container {
-    padding: 0 30px;
+    padding: -20px 30px;
   }
 }
 .nav-container__level .nav-container__menu-item {
diff --git a/images/search-dark.svg b/images/search-dark.svg
new file mode 100644
index 00000000..70bdbaf9
--- /dev/null
+++ b/images/search-dark.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 446.25 446.25">
+    <path
+        d="M318.75,280.5h-20.4l-7.65-7.65c25.5-28.05,40.8-66.3,40.8-107.1A165.75,165.75,0,1,0,165.75,331.5c40.8,0,79.05-15.3,107.1-40.8l7.65,7.65v20.4L408,446.25,446.25,408Zm-153,0A114.75,114.75,0,1,1,280.5,165.75,114.27,114.27,0,0,1,165.75,280.5Z"
+        fill="#2b2929">
+    </path>
+</svg>
diff --git a/js/modules/es4/site-search.js b/js/modules/es4/site-search.js
new file mode 100644
index 00000000..b93ba851
--- /dev/null
+++ b/js/modules/es4/site-search.js
@@ -0,0 +1,112 @@
+const search = new (function() {
+    // global constants
+    const { body } = document;
+    let inputTarget = null;
+
+    function removeListItems(listId) {
+
+        if (!list || !list.firstChild) return;
+        var list = document.getElementById(listId);
+        while (list.firstChild){
+            list.firstChild.remove();
+        }
+    }
+
+    function fetchSearchData() {
+        fetch('/templates/data/site-search.json')
+            .then(response => response.json())
+            .then(data => {
+                const inputField = document.querySelector('[role="combobox"]');
+                const list = document.getElementById('home-search__list');
+    
+                inputField.addEventListener('input', () => {
+                    const searchTerm = inputField.value.trim().toLowerCase();
+    
+                    removeListItems('home-search__list');
+                    clearComboboxState();
+    
+                    // Separate title and descriptions to order accordingly
+                    const titleMatches = [];
+                    const descMatches = [];
+    
+                    data.forEach(item => {
+                        const originalTitle = item.title;
+                        const originalDesc = item.desc;
+    
+                        if (originalTitle.toLowerCase().includes(searchTerm)) {
+                            titleMatches.push(item);
+                        } else if (originalDesc.toLowerCase().includes(searchTerm)) {
+                            descMatches.push(item);
+                        }
+                    });
+    
+                    // Helper function to populate list
+                    const populateList = (items) => {
+                        items.forEach(item => {
+                            const listItem = document.createElement('li');
+                            listItem.setAttribute('role', 'option');
+                            listItem.setAttribute('tabindex', '-1');
+    
+                            const link = document.createElement('a');
+                            link.setAttribute('href', item.link);
+                            link.style.display = 'block';
+                            link.style.textDecoration = 'none';
+    
+                            const title = document.createElement('strong');
+                            title.innerHTML = highlightText(item.title, searchTerm);
+    
+                            const desc = document.createElement('p');
+                            desc.innerHTML = highlightText(item.desc, searchTerm);
+                            desc.style.margin = '4px 0';
+    
+                            link.appendChild(title);
+                            link.appendChild(document.createElement('br'));
+                            link.appendChild(desc);
+    
+                            listItem.appendChild(link);
+                            list.appendChild(listItem);
+
+                            listItem.addEventListener('keydown', (event) => {
+                                    if (event.key === 'Enter') {
+                                     link.click();
+                                 }
+                                });
+                            });
+                    };
+    
+                    populateList(titleMatches);
+                    populateList(descMatches);
+    
+                    enableComboboxes.init();
+                });
+            })
+            .catch(error => {
+                console.error('Error fetching the JSON file:', error);
+            });
+    }
+
+    function highlightText(text, searchTerm) {
+        if (!searchTerm) return text;
+        const regex = new RegExp(`(${searchTerm})`, "gi");
+        return text.replace(regex, '<span class="highlight">$1</span>');
+    }
+
+    function clearComboboxState() {
+        const listbox = document.querySelector('[role="listbox"]');
+        if (listbox) {
+            listbox.innerHTML = '';
+        }
+        enableComboboxes.list = [];
+    }
+
+    this.init = () => {
+        body.addEventListener('click', this.handleClick);
+        fetchSearchData();
+    }
+
+    this.handleClick = (e) => {
+        if (e.target != inputTarget){
+            removeListItems(e.target);
+        }
+    }
+})
\ No newline at end of file
diff --git a/js/modules/site-search.js b/js/modules/site-search.js
new file mode 100644
index 00000000..323e5153
--- /dev/null
+++ b/js/modules/site-search.js
@@ -0,0 +1,116 @@
+import enableComboboxes from "./combobox.js";
+
+const search = new function () {
+    // global constants
+    const { body } = document;
+    let inputTarget = null;
+
+    function removeListItems(listId) {
+
+        if (!list || !list.firstChild) return;
+        var list = document.getElementById(listId);
+        while (list.firstChild){
+            list.firstChild.remove();
+        }
+    }
+
+    function fetchSearchData() {
+        fetch('/templates/data/site-search.json')
+            .then(response => response.json())
+            .then(data => {
+                const inputField = document.querySelector('[role="combobox"]');
+                const list = document.getElementById('home-search__list');
+    
+                inputField.addEventListener('input', () => {
+                    const searchTerm = inputField.value.trim().toLowerCase();
+    
+                    removeListItems('home-search__list');
+                    clearComboboxState();
+    
+                    // Separate title and descriptions to order accordingly
+                    const titleMatches = [];
+                    const descMatches = [];
+    
+                    data.forEach(item => {
+                        const originalTitle = item.title;
+                        const originalDesc = item.desc;
+    
+                        if (originalTitle.toLowerCase().includes(searchTerm)) {
+                            titleMatches.push(item);
+                        } else if (originalDesc.toLowerCase().includes(searchTerm)) {
+                            descMatches.push(item);
+                        }
+                    });
+    
+                    // Helper function to populate list
+                    const populateList = (items) => {
+                        items.forEach(item => {
+                            const listItem = document.createElement('li');
+                            listItem.setAttribute('role', 'option');
+                            listItem.setAttribute('tabindex', '-1');
+    
+                            const link = document.createElement('a');
+                            link.setAttribute('href', item.link);
+                            link.style.display = 'block';
+                            link.style.textDecoration = 'none';
+    
+                            const title = document.createElement('strong');
+                            title.innerHTML = highlightText(item.title, searchTerm);
+    
+                            const desc = document.createElement('p');
+                            desc.innerHTML = highlightText(item.desc, searchTerm);
+                            desc.style.margin = '4px 0';
+    
+                            link.appendChild(title);
+                            link.appendChild(document.createElement('br'));
+                            link.appendChild(desc);
+    
+                            listItem.appendChild(link);
+                            list.appendChild(listItem);
+
+                            listItem.addEventListener('keydown', (event) => {
+                                    if (event.key === 'Enter') {
+                                     link.click();
+                                 }
+                                });
+                            });
+                    };
+    
+                    populateList(titleMatches);
+                    populateList(descMatches);
+    
+                    enableComboboxes.init();
+                });
+            })
+            .catch(error => {
+                console.error('Error fetching the JSON file:', error);
+            });
+    }
+
+    function highlightText(text, searchTerm) {
+        if (!searchTerm) return text;
+        const regex = new RegExp(`(${searchTerm})`, "gi");
+        return text.replace(regex, '<span class="highlight">$1</span>');
+    }
+
+    function clearComboboxState() {
+        const listbox = document.querySelector('[role="listbox"]');
+        if (listbox) {
+            listbox.innerHTML = '';
+        }
+        enableComboboxes.list = [];
+    }
+
+    this.init = () => {
+        body.addEventListener('click', this.handleClick);
+        fetchSearchData();
+    }
+
+    this.handleClick = (e) => {
+        if (e.target != inputTarget){
+            removeListItems(e.target);
+        }
+    }
+}
+
+export default search;
\ No newline at end of file
diff --git a/less/enable-flyout.less b/less/enable-flyout.less
index b1df64f2..1bf7a1b2 100644
--- a/less/enable-flyout.less
+++ b/less/enable-flyout.less
@@ -241,7 +241,7 @@
         color: @color0 !important;
         display: block;
         font-family: "Helvetica", "Arial", "sans-serif";
-        font-size: (18 / @px);
+        font-size: (16 / @px);
         line-height: 1.6;
         padding: (10 / @px) (12 / @px);
         text-decoration: none;
diff --git a/less/site-search.less b/less/site-search.less
new file mode 100644
index 00000000..c417d04b
--- /dev/null
+++ b/less/site-search.less
@@ -0,0 +1,181 @@
+
+@import "shared/mixins-and-vars";
+
+.site-search {
+    display: flex;
+    flex-direction: row;
+
+    &__term {
+        width: 100%;
+        border: @dark-grey;
+        border-right: none;
+        padding: 5px;
+        height: (36 / @px);
+        color: #000;
+    }
+
+    &__button {
+        width: (40 / @px);
+        height: (36 / @px);
+        background: white;
+        border: none;
+        text-align: center;
+        cursor: pointer;
+        padding: 0 0 10px 10px;
+        margin: 0 !important;
+    }
+
+    &__icon {
+        width: (20 / @px);
+    }
+
+    &__inner-container {
+        text-align: left;
+        position: relative;
+        width: 100%;
+        max-width: 100%;
+        font-size: 100%;
+        font-family: sans-serif;
+        box-shadow: 0 4px 19px 0 rgba(122, 122, 122, 0.2), 0 6px 18px 0 rgba(122, 122, 122, 0.2);
+    }
+
+    &__group {
+        padding: 10px;
+    }
+
+    &__reset-button {
+        position: absolute;
+        z-index: 1;
+        right: 5px;
+        top: 0;
+        bottom: 0;
+        padding: 0;
+        border: none;
+        background: transparent;
+        .vendor(appearance, none);
+
+        .enable-combobox input[role="combobox"]:not(:valid) ~ & {
+            display: none;
+            border: solid 1px red;
+        }
+    }
+
+    [role="alert"] {
+        position: absolute;
+        top: 0.8em;
+        right: 2em;
+        font-size: 0.8em;
+        color: #777;
+        z-index: 2;
+    }
+
+    input[role="combobox"]:focus {
+        outline: none;
+    }
+
+    [hidden] {
+        display: none !important;
+    }
+
+    &__reset-button-image {
+        display: inherit;
+    }
+
+    [role="listbox"] {
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        top: 2.2em;
+        left: 0;
+        background-color: #fff;
+        border: solid 1px #ccc;
+        width: 100%;
+        box-sizing: border-box;
+        z-index: 9999999;
+        max-height: 200px;
+        overflow: auto;
+
+        a {
+            margin: inherit;
+            display: block;
+            text-decoration: none !important;
+            color: inherit;
+            padding: 0.3em 0.5em;
+        }
+
+        li {
+            padding: 0;
+        }
+    }
+
+    [role="option"] {
+        display: block;
+        margin: 0;
+        padding: 0.3em 0.5em;
+        list-style: none;
+        font-size: (16 / @px);
+        cursor: pointer;
+        border-bottom: 1px solid #ccc;
+    }
+
+    [role="option"]:hover {
+        color: #000;
+        background-color: #ccc;
+    }
+
+    [aria-selected="true"] {
+        color: #fff;
+        background-color: #ccc;
+
+        p,
+        strong {
+            color: #000;
+        }
+    }
+
+    &__controls-container {
+        display: flex;
+        flex-direction: row;
+    }
+
+    input[role="combobox"] {
+        font-size: inherit !important;
+        height: inherit !important;
+        padding: inherit !important;
+        border: none !important;
+    }
+
+        [role="option"]:hover {
+          color: #000;
+          background-color: #ccc;
+    
+          p,
+          strong {
+            color: #000;
+          }
+        }
+    
+}
+
+.enable__is-dark-mode {
+    .enable-combobox {
+      [role="listbox"] {
+        background: #121212;
+      }
+      .site-search__button {
+        background: #121212;
+      }
+      .site-search__icon {
+        background: #121212;
+        content: url('../images/search.svg');
+      }
+    }
+  }
+
+  .highlight {
+    background-color: yellow;
+    color: black;
+    font-weight: bold;
+  }
+
diff --git a/less/site.less b/less/site.less
index 0e08e910..d5bae075 100644
--- a/less/site.less
+++ b/less/site.less
@@ -13,7 +13,7 @@
 .enable-logo {
     text-decoration: none;
     text-align: center;
-    width: 150px;
+    width: 120px;
     min-height: 85px;
     display: flex;
     vertical-align: middle;
@@ -49,10 +49,10 @@
     display: flex;
     justify-content: space-between;
     background: @grey;
-    padding: 0 10px;
+    padding: 0px 10px;
 
     @media @desktop {
-        padding: 0 30px;
+        padding: -20px 30px;
     }
 
     &__level &__menu-item {
diff --git a/package.json b/package.json
index d39349da..51f1ba35 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,8 @@
     "watch": "npm-watch",
     "convert-modules-to-libs": "bash bin/convert-modules-to-libs.sh",
     "prepare": "node .husky/install.mjs",
-    "validate:version": "node bin/validate-node-version.mjs"
+    "validate:version": "node bin/validate-node-version.mjs",
+    "update-site-search": "node bin/updateSiteSearch.mjs"
   },
   "jest": {
     "verbose": true,
diff --git a/templates/data/meta-info.json b/templates/data/meta-info.json
index 2c469e75..1e780919 100644
--- a/templates/data/meta-info.json
+++ b/templates/data/meta-info.json
@@ -8,13 +8,15 @@
   "link.php": {
     "sectionPages": [ {"controls": "Simple Controls"}],
     "title": "Links",
-    "desc": "Links are easy to code accessibly, but it's nice to give more context."
+    "desc": "Links are easy to code accessibly, but it's nice to give more context.",
+    "searchable": true
   },
   "accessible-text-svg.php": {
     "sectionPages": [ { "code-patterns": "Typography" }],
     "title": "Accessible Text in SVG",
     "desc": "How to ensure text in SVG respects WCAG 1.4.4 (Resize text) and WCAG 1.4.12 (Text Spacing).",
-    "mainClass": "with-full-bleed-hero"
+    "mainClass": "with-full-bleed-hero",
+    "searchable": true
   },
   "alert-dialog.php": {
     "title": "Alert Dialog",
@@ -27,6 +29,7 @@
     "title": "ARIA Alert: Understanding, Live Example and Code Walkthrough",
     "desc": "Learn about the ARIA alert property, how it enhances web accessibility, and explore practical examples with code samples. Master ARIA alerts for better UX.",
     "url": "https://www.useragentman.com/enable/alert.php",
+    "searchable": true,
     "mainEntity":[
       {
       "type": "Article",
@@ -52,7 +55,8 @@
     "sectionPages": [ { "content": "Animated Content" }],
     "title": "Animated GIFs with Pause Buttons",
     "desc": "How to code Animated GIFs can be paused using the HTML5 details tag.",
-    "isNPM": "true"
+    "isNPM": "true",
+    "searchable": true
   },
   "animated-hide-show.php": {
     "title": "Animated Hide Show",
@@ -74,6 +78,7 @@
     "shortTitle": "Accessible Buttons",
     "desc": "Native HTML5 buttons are the best when you have existing inaccessible code, using roles can help.",
     "url": "https://www.useragentman.com/enable/button.php",
+    "searchable": true,
     "mainEntity":[
       {
       "type": "Article",
@@ -123,7 +128,8 @@
     "sectionPages": [ {"controls": "Complex Controls"}],
     "title": "Carousels",
     "desc": "If you absolutely need carousels, you should really make them accessible and easily bypassed for keyboard and screen reader users.",
-    "isNPM": "true"
+    "isNPM": "true",
+    "searchable": true
   },
   "checkbox.php": {
     "sectionPages": [ {"forms": "Form Elements"}],
@@ -131,6 +137,7 @@
     "shortTitle": "Checkboxes",
     "desc": "Here is a step-by-step guide to creating accessible checkboxes",
     "url": "https://www.useragentman.com/enable/checkbox.php",
+    "searchable": true,
     "mainEntity":[
       {
       "type": "Article",
@@ -202,27 +209,32 @@
   },
   "code-patterns-section.php": {
     "title": "Code Patterns",
-    "desc": "A list of all the accessible code patterns which can be found in the Enable project."
+    "desc": "A list of all the accessible code patterns which can be found in the Enable project.",
+    "searchable": true
   },
   "combobox.php": {
     "sectionPages": [ {"forms": "Form Elements"}],
     "title": "Accessible Autocomplete (a.k.a Combobox)",
     "desc": "One exception to the First Rule of ARIA is HTML5 autocomplete using the datalist tag, which is not as accessible as the ARIA datalist role.",
-    "isNPM": "true"
+    "isNPM": "true",
+    "searchable": true
   },
   "content-section.php": {
     "title": "Content",
-    "desc": "Page that organizes the components that fall under Content."
+    "desc": "Page that organizes the components that fall under Content.",
+    "searchable": true
   },
   "controls-section.php": {
     "title": "Controls",
-    "desc": "Page that organizes the components that fall under Controls."
+    "desc": "Page that organizes the components that fall under Controls.",
+    "searchable": true
   },
   "dark-mode.php": {
     "sectionPages": [ { "code-patterns-removed": "Visual Design" }],
     "title": "Dark Mode",
     "desc": "This page will show you how to ensure your website has proper contrast as well as the overall function for dark mode.",
-    "thumbFileType": "png"
+    "thumbFileType": "png",
+    "searchable": true
   },
   "date.php": {
     "title": "Date Widget",
@@ -232,24 +244,28 @@
   "description-list.php": {
     "sectionPages": [ { "content": "Static Content" }],
     "title": "Description List (neé Definition List)",
-    "desc": "Lists of name/value pairs should be coded in a definition list.  This page covers the HTML5 and ARIA variants."
+    "desc": "Lists of name/value pairs should be coded in a definition list.  This page covers the HTML5 and ARIA variants.",
+    "searchable": true
   },
   "dialog.php": {
     "title": "Modal Dialog",
     "sectionPages": [ {"controls": "Complex Controls"}],
     "desc": "Modal dialogs are often not made accessible.  This page covers, step by step, how to ensure your are.",
-    "isNPM": "true"
+    "isNPM": "true",
+    "searchable": true
   },
   "dropdown.php": {
     "sectionPages": [ {"controls": "Simple Controls"}],
     "title": "Dropdowns/Drawers/Expandos",
     "desc": "No matter what you can them, dropdowns, drawers and expandos can be easily made accessible with just a little bit of markup.",
-    "isNPM": "true"
+    "isNPM": "true",
+    "searchable": true
   },
   "figure.php": {
     "sectionPages": [ { "content": "Static Content" }],
     "title": "Figures",
-    "desc": "Often overlooked, self-contained content that is references in a document, like a photo, chart, diagram or code, should be marked up as a figure to help screen reader users understand context."
+    "desc": "Often overlooked, self-contained content that is references in a document, like a photo, chart, diagram or code, should be marked up as a figure to help screen reader users understand context.",
+    "searchable": true
   },
   "focus-styling.php": {
     "sectionPages": [ { "code-patterns": "Focus Management" }],
@@ -257,6 +273,7 @@
     "shortTitle": "Focus Styling Tips",
     "desc": "Explore best practices for focus outlines in web design. Improve accessibility and keyboard navigation with our comprehensive guide.",
     "url": "https://www.useragentman.com/enable/focus-styling.php",
+    "searchable": true,
     "mainEntity": [
       {
         "@type": "Article",
@@ -296,6 +313,7 @@
     "shortTitle": "Form Validation and Errors",
     "desc": "Learn how to make your form validation and error checking accessible. Follow best practices to ensure your web forms are compliant with WCAG guidelines and user-friendly for everyone.",
     "url": "https://www.useragentman.com/enable/form-error-checking.php",
+    "searchable": true,
     "mainEntity": [
       {
         "@type": "HowTo",
@@ -315,44 +333,52 @@
     "sectionPages": [ {"forms": "Form UX Patterns"}],
     "title": "Form Structure",
     "desc": "Learn about proper HTML form structure. You'd be surprised how often this is not done correctly.",
-    "toRefactor": false
+    "toRefactor": false,
+    "searchable": true
   },
   "forms-section.php": {
     "title": "Forms",
-    "desc": "Page that organizes the components that fall under Forms."
+    "desc": "Page that organizes the components that fall under Forms.",
+    "searchable": true
   },
   "heading.php": {
     "sectionPages": [ { "content": "Static Content" }],
     "title": "Headings",
-    "desc": "How headings are used by screen reader users, and how to code them in an existing document without a lot of rework."
+    "desc": "How headings are used by screen reader users, and how to code them in an existing document without a lot of rework.",
+    "searchable": true
   },
   "hero-image-text-resize.php": {
     "sectionPages": [ { "code-patterns": "Typography" }],
     "title": "Advanced Text Resizing",
     "desc": "How to make text in things like hero images be coded via HTML (WCAG 1.4.5) while still allowing text resizing (WCAG 1.4.4).",
-    "isNPM": "true"
+    "isNPM": "true",
+    "searchable": true
   },
   "img.php": {
     "sectionPages": [ { "content": "Static Content" }],
     "title": "Images",
-    "desc": "How to code both &gt;img&lt; tags and background images so they are understandable by screen reader users."
+    "desc": "How to code both &lt;img&gt; tags and background images so they are understandable by screen reader users.",
+    "searchable": true
   },
   "infographic.php": {
     "sectionPages": [ { "content": "Static Content" }],
     "title": "Infographics",
-    "desc": "How to code SVG and bitmap images so they are understandable by screen reader users."
+    "desc": "How to code SVG and bitmap images so they are understandable by screen reader users.",
+    "searchable": true
   },
   "input-mask.php": {
     "sectionPages": [ {"forms": "Form UX Patterns"}],
     "title": "Input Masking",
-    "desc": "How to code masking of keyboard input in form fields so they are accessible."
+    "desc": "How to code masking of keyboard input in form fields so they are accessible.",
+    "searchable": true
   },
   
   "listbox.php": {
     "sectionPages": [ {"forms": "Form Elements"}],
     "title": "Select Boxes (a.k.a. Listboxes)",
     "desc": "Why it's preferable to use native HTML5 select controls vs custom controls, and what developers must do if they have to use a custom one.",
-    "isNPM": "true"
+    "isNPM": "true",
+    "searchable": true
   },
   "log.php": {
     "sectionPages": [ { "code-patterns": "ARIA Live Regions" }],
@@ -361,6 +387,7 @@
     "desc": "Discover how to implement an Accessible Log Display with a live example and detailed code walkthrough. Enhance web accessibility with best practices.",
     "url": "https://www.useragentman.com/enable/log.php",
     "thumbFileType": "png",
+    "searchable": true,
     "mainEntity":[
       {
       "type": "Article",
@@ -388,6 +415,7 @@
     "shortTitle": "ARIA Marquee",
     "desc": "Learn how to create an auto-scrolling Marquee for your web pages. Explore a live example and get detailed code samples to implement it effortlessly.",
     "url": "https://www.useragentman.com/enable/marquee.php",
+    "searchable": true,
     "mainEntity":[
       {
       "type": "Article",
@@ -417,31 +445,36 @@
   "meter.php": {
     "sectionPages": [ { "content": "Static Content" }],
     "title": "Meter",
-    "desc": "Meter component which is supported by non html5 browsers."
+    "desc": "Meter component which is supported by non html5 browsers.",
+    "searchable": true
   },
   "multimedia-content.php": {
     "sectionPages": [ { "content": "Animated Content" }],
     "title": "Multimedia Content",
     "desc": "Is AI auto-captioning from services like Google, Facebook and Microsoft sufficient? Do you know what a transcript really is (hint: YouTube doesn't)? How can we make sure our videos don't cause seizures?  Learn how to make video content accessible.",
-    "thumbFileType": "png"
+    "thumbFileType": "png",
+    "searchable": true
   },
   "multi-level-hamburger-menu.php": {
     "sectionPages": [ {"controls": "Complex Controls"}],
     "title": "Flyout/Hamburger Hybrid Menus",
     "desc": "A hard thing to code from scratch, many developers will use an existing library to create hybrid flyout/hamburger menus.  Most of them aren't accessible. Let's show you how they can be.",
-    "isNPM": "true"
+    "isNPM": "true",
+    "searchable": true
   },
   "pause-anim-control.php": {
     "sectionPages": [ { "content": "Animated Content" }],
     "title": "Pause Animation Controls",
     "desc": "Instructions on how you can create a global control on you site that pauses animations while respecting your operating animation system settings.",
     "mainClass": "with-full-bleed-hero",
-    "isNPM": "true"
+    "isNPM": "true",
+    "searchable": true
   },
   "progress.php": {
     "sectionPages": [ { "content": "Static Content" }],
     "title": "Accessible Progress Bars",
-    "desc": "HTML5 Progress Bars should be coded so users who use screen readers and assistive technology know they are there what they are trying to tell them."
+    "desc": "HTML5 Progress Bars should be coded so users who use screen readers and assistive technology know they are there what they are trying to tell them.",
+    "searchable": true
   },
   "radiogroup.php": {
     "sectionPages": [ {"forms": "Form Elements"}],
@@ -449,6 +482,7 @@
     "shortTitle": "Radio Groups",
     "desc": "Here is a step-by-step guide to creating accessible radio groups",
     "url": "https://www.useragentman.com/enable/radiogroup.php",
+    "searchable": true,
     "mainEntity": [
       {
       "type": "Article",
@@ -504,17 +538,20 @@
     "sectionPages": [ {"controls": "Simple Controls"}],
     "title": "Skip Links (That Work In Mobile Too!)",
     "desc": "Traditional skip links (e.g. Skip Navigation Links) that are visible only on focus don't work on mobile. This page presents an example of one that does.",
-    "isNPM": "true"
+    "isNPM": "true",
+    "searchable": true
   },
   "slider.php": {
     "sectionPages": [ {"forms": "Form Elements"}],
     "title": "Sliders (a.k.a Range Input)",
-    "desc": "This page is a perfect example of why the First Rule of ARIA (i.e. don't use ARIA) is so relevant, especially for mobile screen reader users."
+    "desc": "This page is a perfect example of why the First Rule of ARIA (i.e. don't use ARIA) is so relevant, especially for mobile screen reader users.",
+    "searchable": true
   },
   "spinner.php": {
     "sectionPages": [ {"forms": "Form Elements"}],
     "title": "Numeric Fields",
-    "desc": "Many developers think form fields with numeric values must always be coded as &gt;input type=\"number\"&lt;.  There are exceptions."
+    "desc": "Many developers think form fields with numeric values must always be coded as &gt;input type=\"number\"&lt;.  There are exceptions.",
+    "searchable": true
   },
   "status.php": {
     "sectionPages": [ { "code-patterns": "ARIA Live Regions" }],
@@ -522,6 +559,7 @@
     "shortTitle": "ARIA Status",
     "desc": "Learn about the ARIA status role, its importance in accessibility, and see a live example with supporting code samples to improve user experience.",
     "url": "https://www.useragentman.com/enable/status.php",
+    "searchable": true,
     "mainEntity":[
       {
       "type": "Article",
@@ -546,30 +584,35 @@
   "switch.php": {
     "sectionPages": [ {"controls": "Simple Controls"}],
     "title": "ARIA Switch (a.k.a. Toggle)",
-    "desc": "A control with no native HTML5 equivalent, switches have become popular recently in web and mobile applications, but many are inaccessible to screen reader and keyboard-only users.  Here's how to code them correctly."
+    "desc": "A control with no native HTML5 equivalent, switches have become popular recently in web and mobile applications, but many are inaccessible to screen reader and keyboard-only users.  Here's how to code them correctly.",
+    "searchable": true
   },
   "table.php": {
     "sectionPages": [ { "content": "Tables" }],
     "title": "Simple Accessible Tables",
-    "desc": "Learn the small things you didn't know were needed for HTML5 tables. Also learn how to make sortable and paginated tables accessible to everyone."
+    "desc": "Learn the small things you didn't know were needed for HTML5 tables. Also learn how to make sortable and paginated tables accessible to everyone.",
+    "searchable": true
   },
   "sortable-table.php": {
     "sectionPages": [ { "content": "Tables" }],
     "title": "Accessible Sortable Tables",
     "desc": "With a little bit of JavaScript, you can make your tables sortable, but you should make sure you mark them up correctly.",
-    "isNPM": "true"
+    "isNPM": "true",
+    "searchable": true
   },
   "pagination-table.php": {
     "sectionPages": [ { "content": "Tables" }],
     "title": "Accessible Pagination Table",
     "desc": "If you have a large amount of data, many developers will code pagination widgets to show small portions of data in the table at a time.  Learn how to make that UI accessible, or just use our NPM module to do this.",
-    "isNPM": "true"
+    "isNPM": "true",
+    "searchable": true
   },
   "reflow.php": {
     "sectionPages": [ { "content": "Static Content" }],
     "title": "Content That Scrolls In Two Dimensions (a WCAG Reflow Violation)",
     "desc": "In all breakpoints, you should ensure users don't have to scroll horizontally and vertically to understand the content (with some exceptions).  This page talks about common solutions you can use to fix these type of issues.",
-    "hasIframes": true
+    "hasIframes": true,
+    "searchable": true
   },
   "reflow__example-of-issue.php": {
     "bodyClass": "iframed-example",
@@ -586,7 +629,8 @@
   "search.php": {
     "sectionPages": [ {"forms": "Form UX Patterns"}],
     "title": "Search Form",
-    "desc": "If you have a search form on your page, make sure it is coded correctly so it can not only be read by screen reader users, but also have the right landmark applied to it."
+    "desc": "If you have a search form on your page, make sure it is coded correctly so it can not only be read by screen reader users, but also have the right landmark applied to it.",
+    "searchable": true
   },
   "sortable-pagination-table.php": {
     "title": "Sortable Paginated Tables",
@@ -597,12 +641,14 @@
     "sectionPages": [ {"controls": "Complex Controls"}],
     "title": "Tabs",
     "desc": "Another control with no native HTML5 tag, many developers don't realize their tab components aren't accessible. We've got your back.",
-    "isNPM": "true"
+    "isNPM": "true",
+    "searchable": true
   },
   "textbox.php": {
     "sectionPages": [ {"forms": "Form Elements"}],
     "title": "Textboxes",
-    "desc": "If you are using custom (i.e. non-native HTML5) textboxes, it's simple to add a few ARIA attributes to make them accessible, if you absolutely have to."
+    "desc": "If you are using custom (i.e. non-native HTML5) textboxes, it's simple to add a few ARIA attributes to make them accessible, if you absolutely have to.",
+    "searchable": true
   },
   "text-contrast.php": {
     "title": "Accessible Text Contrast",
@@ -612,12 +658,14 @@
   "text-resize.php": {
     "sectionPages": [ { "code-patterns": "Typography" }],
     "title": "Resizable Typography",
-    "desc": "How you can ensure that your website's typography resizes/zooms for people that use their browser's text zooming feature."
+    "desc": "How you can ensure that your website's typography resizes/zooms for people that use their browser's text zooming feature.",
+    "searchable": true
   },
   "text-spacing.php": {
     "sectionPages": [ { "code-patterns": "Typography" }],
     "title": "Space-Adjusting Typography",
-    "desc": "How you can ensure that your website's typography is legible for users that adjust text-spacing because of dyslexia or due to visual or cognitive disabilities."
+    "desc": "How you can ensure that your website's typography is legible for users that adjust text-spacing because of dyslexia or due to visual or cognitive disabilities.",
+    "searchable": true
   },
   "timer.php": {
     "sectionPages": [ { "code-patterns": "ARIA Live Regions" }],
@@ -625,6 +673,7 @@
     "shortTitle": "ARIA Timer",
     "desc": "Discover what ARIA Timer is, see a live example, and explore the supporting code. Learn how to implement an accessible countdown timer with ARIA roles and attributes.",
     "url": "https://www.useragentman.com/enable/timer.php",
+    "searchable": true,
     "mainEntity":[
       {
       "type": "Article",
@@ -650,13 +699,15 @@
     "sectionPages": [ {"controls": "Simple Controls"}],
     "title": "Tooltip",
     "desc": "If you have a tooltip, ensure it follows accessibility best practices.",
-    "isNPM": "true"
+    "isNPM": "true",
+    "searchable": true
   },
   "video-player.php": {
     "sectionPages": [ {"controls": "Complex Controls"}],
     "title": "Video Player",
     "desc": "Videos on the web must have audio descriptions as well as captions to be WCAG AA compliant. Learn how to do so without a lot of cost and time and get a WCAG AAA transcript for free!",
-    "isNPM": "true"
+    "isNPM": "true",
+    "searchable": true
   },
   "video-content.php": {
     "title": "Video Content",
@@ -687,25 +738,30 @@
   },
   "code-quality.php": {
     "title": "Accessible Code Quality",
-    "desc": "What are the automated tools we use in Enable to ensure code quality."
+    "desc": "What are the automated tools we use in Enable to ensure code quality.",
+    "searchable": true
   },
   "exposing-style-info-to-screen-readers.php": {
     "sectionPages": [ { "code-patterns": "Typography" }],
     "title": "Exposing Style Information To Screen Readers",
-    "desc": "If you think the style of text on the page is important to screen reader users, how do you code it?"
+    "desc": "If you think the style of text on the page is important to screen reader users, how do you code it?",
+    "searchable": true
   },
   "screen-reader-only-text.php": {
     "sectionPages": [ { "content": "Static Content" }],
     "title": "Screen Reader Only Text",
-    "desc": "What is screen reader only text, when it should be used and how it differs from aria-labels."
+    "desc": "What is screen reader only text, when it should be used and how it differs from aria-labels.",
+    "searchable": true
   },
   "bookmarklets.php": {
     "title": "Bookmarklets to Test Accessibility Features On A Page",
-    "desc": "The bookmarklets on this page are designed to help developers check if certain features are coded correctly on a webpage."
+    "desc": "The bookmarklets on this page are designed to help developers check if certain features are coded correctly on a webpage.",
+    "searchable": true
   },
   "accessible-pdf-generation.php": {
     "sectionPages": [ { "content": "Static Content" }],
     "title": "Generating Accessible PDFs",
-    "desc": "Step-by-step guide to generate accessible PDFs with Open HTML to PDF and SpringBoot."
+    "desc": "Step-by-step guide to generate accessible PDFs with Open HTML to PDF and SpringBoot.",
+    "searchable": true
   }
 }
diff --git a/templates/data/site-search.json b/templates/data/site-search.json
new file mode 100644
index 00000000..055f965c
--- /dev/null
+++ b/templates/data/site-search.json
@@ -0,0 +1,338 @@
+[
+  {
+    "id": 1,
+    "title": "Links",
+    "desc": "Links are easy to code accessibly, but it's nice to give more context.",
+    "link": "/link.php"
+  },
+  {
+    "id": 2,
+    "title": "Accessible Text in SVG",
+    "desc": "How to ensure text in SVG respects WCAG 1.4.4 (Resize text) and WCAG 1.4.12 (Text Spacing).",
+    "link": "/accessible-text-svg.php"
+  },
+  {
+    "id": 4,
+    "title": "ARIA Alert",
+    "desc": "Learn about the ARIA alert property, how it enhances web accessibility, and explore practical examples with code samples. Master ARIA alerts for better UX.",
+    "link": "/alert.php"
+  },
+  {
+    "id": 5,
+    "title": "Animated GIFs with Pause Buttons",
+    "desc": "How to code Animated GIFs can be paused using the HTML5 details tag.",
+    "link": "/animated-gif-with-pause-button.php"
+  },
+  {
+    "id": 9,
+    "title": "Accessible Buttons",
+    "desc": "Native HTML5 buttons are the best when you have existing inaccessible code, using roles can help.",
+    "link": "/button.php"
+  },
+  {
+    "id": 10,
+    "title": "Carousels",
+    "desc": "If you absolutely need carousels, you should really make them accessible and easily bypassed for keyboard and screen reader users.",
+    "link": "/carousel.php"
+  },
+  {
+    "id": 11,
+    "title": "Checkboxes",
+    "desc": "Here is a step-by-step guide to creating accessible checkboxes",
+    "link": "/checkbox.php"
+  },
+  {
+    "id": 12,
+    "title": "Code Patterns",
+    "desc": "A list of all the accessible code patterns which can be found in the Enable project.",
+    "link": "/code-patterns-section.php"
+  },
+  {
+    "id": 13,
+    "title": "Accessible Autocomplete (a.k.a Combobox)",
+    "desc": "One exception to the First Rule of ARIA is HTML5 autocomplete using the datalist tag, which is not as accessible as the ARIA datalist role.",
+    "link": "/combobox.php"
+  },
+  {
+    "id": 14,
+    "title": "Content",
+    "desc": "Page that organizes the components that fall under Content.",
+    "link": "/content-section.php"
+  },
+  {
+    "id": 15,
+    "title": "Controls",
+    "desc": "Page that organizes the components that fall under Controls.",
+    "link": "/controls-section.php"
+  },
+  {
+    "id": 16,
+    "title": "Dark Mode",
+    "desc": "This page will show you how to ensure your website has proper contrast as well as the overall function for dark mode.",
+    "link": "/dark-mode.php"
+  },
+  {
+    "id": 18,
+    "title": "Description List (neé Definition List)",
+    "desc": "Lists of name/value pairs should be coded in a definition list.  This page covers the HTML5 and ARIA variants.",
+    "link": "/description-list.php"
+  },
+  {
+    "id": 19,
+    "title": "Modal Dialog",
+    "desc": "Modal dialogs are often not made accessible.  This page covers, step by step, how to ensure your are.",
+    "link": "/dialog.php"
+  },
+  {
+    "id": 20,
+    "title": "Dropdowns/Drawers/Expandos",
+    "desc": "No matter what you can them, dropdowns, drawers and expandos can be easily made accessible with just a little bit of markup.",
+    "link": "/dropdown.php"
+  },
+  {
+    "id": 21,
+    "title": "Figures",
+    "desc": "Often overlooked, self-contained content that is references in a document, like a photo, chart, diagram or code, should be marked up as a figure to help screen reader users understand context.",
+    "link": "/figure.php"
+  },
+  {
+    "id": 22,
+    "title": "Focus Styling Tips",
+    "desc": "Explore best practices for focus outlines in web design. Improve accessibility and keyboard navigation with our comprehensive guide.",
+    "link": "/focus-styling.php"
+  },
+  {
+    "id": 23,
+    "title": "Form Validation and Errors",
+    "desc": "Learn how to make your form validation and error checking accessible. Follow best practices to ensure your web forms are compliant with WCAG guidelines and user-friendly for everyone.",
+    "link": "/form-error-checking.php"
+  },
+  {
+    "id": 24,
+    "title": "Form Structure",
+    "desc": "Learn about proper HTML form structure. You'd be surprised how often this is not done correctly.",
+    "link": "/form.php"
+  },
+  {
+    "id": 25,
+    "title": "Forms",
+    "desc": "Page that organizes the components that fall under Forms.",
+    "link": "/forms-section.php"
+  },
+  {
+    "id": 26,
+    "title": "Headings",
+    "desc": "How headings are used by screen reader users, and how to code them in an existing document without a lot of rework.",
+    "link": "/heading.php"
+  },
+  {
+    "id": 27,
+    "title": "Advanced Text Resizing",
+    "desc": "How to make text in things like hero images be coded via HTML (WCAG 1.4.5) while still allowing text resizing (WCAG 1.4.4).",
+    "link": "/hero-image-text-resize.php"
+  },
+  {
+    "id": 28,
+    "title": "Images",
+    "desc": "How to code both &lt;img&gt; tags and background images so they are understandable by screen reader users.",
+    "link": "/img.php"
+  },
+  {
+    "id": 29,
+    "title": "Infographics",
+    "desc": "How to code SVG and bitmap images so they are understandable by screen reader users.",
+    "link": "/infographic.php"
+  },
+  {
+    "id": 30,
+    "title": "Input Masking",
+    "desc": "How to code masking of keyboard input in form fields so they are accessible.",
+    "link": "/input-mask.php"
+  },
+  {
+    "id": 31,
+    "title": "Select Boxes (a.k.a. Listboxes)",
+    "desc": "Why it's preferable to use native HTML5 select controls vs custom controls, and what developers must do if they have to use a custom one.",
+    "link": "/listbox.php"
+  },
+  {
+    "id": 32,
+    "title": "ARIA Log",
+    "desc": "Discover how to implement an Accessible Log Display with a live example and detailed code walkthrough. Enhance web accessibility with best practices.",
+    "link": "/log.php"
+  },
+  {
+    "id": 33,
+    "title": "ARIA Marquee",
+    "desc": "Learn how to create an auto-scrolling Marquee for your web pages. Explore a live example and get detailed code samples to implement it effortlessly.",
+    "link": "/marquee.php"
+  },
+  {
+    "id": 35,
+    "title": "Meter",
+    "desc": "Meter component which is supported by non html5 browsers.",
+    "link": "/meter.php"
+  },
+  {
+    "id": 36,
+    "title": "Multimedia Content",
+    "desc": "Is AI auto-captioning from services like Google, Facebook and Microsoft sufficient? Do you know what a transcript really is (hint: YouTube doesn't)? How can we make sure our videos don't cause seizures?  Learn how to make video content accessible.",
+    "link": "/multimedia-content.php"
+  },
+  {
+    "id": 37,
+    "title": "Flyout/Hamburger Hybrid Menus",
+    "desc": "A hard thing to code from scratch, many developers will use an existing library to create hybrid flyout/hamburger menus.  Most of them aren't accessible. Let's show you how they can be.",
+    "link": "/multi-level-hamburger-menu.php"
+  },
+  {
+    "id": 38,
+    "title": "Pause Animation Controls",
+    "desc": "Instructions on how you can create a global control on you site that pauses animations while respecting your operating animation system settings.",
+    "link": "/pause-anim-control.php"
+  },
+  {
+    "id": 39,
+    "title": "Accessible Progress Bars",
+    "desc": "HTML5 Progress Bars should be coded so users who use screen readers and assistive technology know they are there what they are trying to tell them.",
+    "link": "/progress.php"
+  },
+  {
+    "id": 40,
+    "title": "Radio Groups",
+    "desc": "Here is a step-by-step guide to creating accessible radio groups",
+    "link": "/radiogroup.php"
+  },
+  {
+    "id": 41,
+    "title": "Skip Links (That Work In Mobile Too!)",
+    "desc": "Traditional skip links (e.g. Skip Navigation Links) that are visible only on focus don't work on mobile. This page presents an example of one that does.",
+    "link": "/skip-link.php"
+  },
+  {
+    "id": 42,
+    "title": "Sliders (a.k.a Range Input)",
+    "desc": "This page is a perfect example of why the First Rule of ARIA (i.e. don't use ARIA) is so relevant, especially for mobile screen reader users.",
+    "link": "/slider.php"
+  },
+  {
+    "id": 43,
+    "title": "Numeric Fields",
+    "desc": "Many developers think form fields with numeric values must always be coded as &gt;input type=\"number\"&lt;.  There are exceptions.",
+    "link": "/spinner.php"
+  },
+  {
+    "id": 44,
+    "title": "ARIA Status",
+    "desc": "Learn about the ARIA status role, its importance in accessibility, and see a live example with supporting code samples to improve user experience.",
+    "link": "/status.php"
+  },
+  {
+    "id": 45,
+    "title": "ARIA Switch (a.k.a. Toggle)",
+    "desc": "A control with no native HTML5 equivalent, switches have become popular recently in web and mobile applications, but many are inaccessible to screen reader and keyboard-only users.  Here's how to code them correctly.",
+    "link": "/switch.php"
+  },
+  {
+    "id": 46,
+    "title": "Simple Accessible Tables",
+    "desc": "Learn the small things you didn't know were needed for HTML5 tables. Also learn how to make sortable and paginated tables accessible to everyone.",
+    "link": "/table.php"
+  },
+  {
+    "id": 47,
+    "title": "Accessible Sortable Tables",
+    "desc": "With a little bit of JavaScript, you can make your tables sortable, but you should make sure you mark them up correctly.",
+    "link": "/sortable-table.php"
+  },
+  {
+    "id": 48,
+    "title": "Accessible Pagination Table",
+    "desc": "If you have a large amount of data, many developers will code pagination widgets to show small portions of data in the table at a time.  Learn how to make that UI accessible, or just use our NPM module to do this.",
+    "link": "/pagination-table.php"
+  },
+  {
+    "id": 49,
+    "title": "Content That Scrolls In Two Dimensions (a WCAG Reflow Violation)",
+    "desc": "In all breakpoints, you should ensure users don't have to scroll horizontally and vertically to understand the content (with some exceptions).  This page talks about common solutions you can use to fix these type of issues.",
+    "link": "/reflow.php"
+  },
+  {
+    "id": 52,
+    "title": "Search Form",
+    "desc": "If you have a search form on your page, make sure it is coded correctly so it can not only be read by screen reader users, but also have the right landmark applied to it.",
+    "link": "/search.php"
+  },
+  {
+    "id": 54,
+    "title": "Tabs",
+    "desc": "Another control with no native HTML5 tag, many developers don't realize their tab components aren't accessible. We've got your back.",
+    "link": "/tabs.php"
+  },
+  {
+    "id": 55,
+    "title": "Textboxes",
+    "desc": "If you are using custom (i.e. non-native HTML5) textboxes, it's simple to add a few ARIA attributes to make them accessible, if you absolutely have to.",
+    "link": "/textbox.php"
+  },
+  {
+    "id": 57,
+    "title": "Resizable Typography",
+    "desc": "How you can ensure that your website's typography resizes/zooms for people that use their browser's text zooming feature.",
+    "link": "/text-resize.php"
+  },
+  {
+    "id": 58,
+    "title": "Space-Adjusting Typography",
+    "desc": "How you can ensure that your website's typography is legible for users that adjust text-spacing because of dyslexia or due to visual or cognitive disabilities.",
+    "link": "/text-spacing.php"
+  },
+  {
+    "id": 59,
+    "title": "ARIA Timer",
+    "desc": "Discover what ARIA Timer is, see a live example, and explore the supporting code. Learn how to implement an accessible countdown timer with ARIA roles and attributes.",
+    "link": "/timer.php"
+  },
+  {
+    "id": 60,
+    "title": "Tooltip",
+    "desc": "If you have a tooltip, ensure it follows accessibility best practices.",
+    "link": "/tooltip.php"
+  },
+  {
+    "id": 61,
+    "title": "Video Player",
+    "desc": "Videos on the web must have audio descriptions as well as captions to be WCAG AA compliant. Learn how to do so without a lot of cost and time and get a WCAG AAA transcript for free!",
+    "link": "/video-player.php"
+  },
+  {
+    "id": 68,
+    "title": "Accessible Code Quality",
+    "desc": "What are the automated tools we use in Enable to ensure code quality.",
+    "link": "/code-quality.php"
+  },
+  {
+    "id": 69,
+    "title": "Exposing Style Information To Screen Readers",
+    "desc": "If you think the style of text on the page is important to screen reader users, how do you code it?",
+    "link": "/exposing-style-info-to-screen-readers.php"
+  },
+  {
+    "id": 70,
+    "title": "Screen Reader Only Text",
+    "desc": "What is screen reader only text, when it should be used and how it differs from aria-labels.",
+    "link": "/screen-reader-only-text.php"
+  },
+  {
+    "id": 71,
+    "title": "Bookmarklets to Test Accessibility Features On A Page",
+    "desc": "The bookmarklets on this page are designed to help developers check if certain features are coded correctly on a webpage.",
+    "link": "/bookmarklets.php"
+  },
+  {
+    "id": 72,
+    "title": "Generating Accessible PDFs",
+    "desc": "Step-by-step guide to generate accessible PDFs with Open HTML to PDF and SpringBoot.",
+    "link": "/accessible-pdf-generation.php"
+  }
+]
\ No newline at end of file
diff --git a/templates/includes/documentation-header.php b/templates/includes/documentation-header.php
index 3109b19c..54e9b0ce 100755
--- a/templates/includes/documentation-header.php
+++ b/templates/includes/documentation-header.php
@@ -1,3 +1,5 @@
+<link rel="stylesheet" type="text/css" href="css/form.css" >
+<link rel="stylesheet" type="text/css" href="css/site-search.css" >
 <header id="header" data-is-sticky="top">
     <!-- Skip Link -->
     <div class="enable-mobile-visible-on-focus__container enable-skip-link--begin">
@@ -23,6 +25,48 @@
         <?php include "includes/pause-anim-control.php"; ?>
     </div>
 
+    <!-- Main search bar -->
+    <form role="search" aria-label="site wide search" tabindex="-1" class="combobox-example">
+        <div class="enable-combobox site-search">
+            <div class="site-search__inner-container">
+                <div id="home-search__close-desc" class="sr-only">
+                Please choose a value using the arrow keys or clear the combobox by either pressing the escape key or activating the
+                clear button.  Pressing enter will search for the item on Google.
+                </div>
+
+                <div class="enable-combobox__controls-container site-search__controls-container">
+                    <div class="sr-only" id="home-search__desc">
+                        As you type, use the up and down arrow keys or press ENTER and swipe to choose the autocomplete
+                        search terms.
+                    </div>
+
+                    <div role="alert" aria-atomic="true" aria-live="polite">
+                    </div>
+
+                    <button type="submit" class="combobox-example__button site-search__button">
+                    <img
+                        class="site-search__icon"
+                        src="images/search-dark.svg"
+                        alt="Search"
+                    >
+                    </button>
+                    <input class="site-search__term" type="text" tabindex="0" id="home-search" role="combobox" aria-autocomplete="list"
+                    aria-label="Search" aria-owns="home-search__list" aria-expanded="false" autocomplete="off" autocorrect="off" autocapitalize="off"
+                        aria-describedby="home-search__desc" placeholder="Search for specific knowledge articles...">
+
+                    <button class="enable-combobox__reset-button site-search__reset-button" aria-controls="home-search__list" type="reset"
+                        aria-describedby="home-search__label">
+                        <img class="enable-combobox__reset-button-image" src="images/close-window.svg" alt="Clear"
+                        aria-describedby="home-search__label">
+                    </button>
+                    <ul role="listbox" id="home-search__list" tabindex="-1" hidden></ul>
+                </div>
+            </div>
+        </div>
+    </form>
+    
+  </div>
+
     <!--  HTML Templates that the Flyout menu uses  -->
     <template id="flyout__root">
         <ul class="enable-flyout__list">
@@ -111,6 +155,12 @@ class="enable-flyout enable-flyout__level enable-flyout__dropdown">
         </span>
     </template>
 
+    <script src="https://cdn.jsdelivr.net/npm/minisearch@7.1.0/dist/umd/index.min.js"></script>
+    <script type="module">
+        import search from '../../js/modules/site-search.js';
+        search.init();
+    </script>
+
     <!-- id, props, content -->
     <script id="flyout-props" type="application/json">
         {