diff --git a/src/_includes/layouts/common-js.njk b/src/_includes/layouts/common-js.njk
index 2c0c652c26..8f855a2eaa 100644
--- a/src/_includes/layouts/common-js.njk
+++ b/src/_includes/layouts/common-js.njk
@@ -17,3 +17,108 @@
 
 <!-- Syntax Highlighting CSS -->
 <link rel="preload" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'" crossorigin="anonymous" referrerpolicy="no-referrer"/>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@8.5.1/themes/reset-min.css" integrity="sha256-KvFgFCzgqSErAPu6y9gz/AhZAvzK48VJASu3DpNLCEQ=" crossorigin="anonymous">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic@1.6.1"/>
+
+<script type="text/javascript">
+    const searchScope = document.head.querySelector('[property="article:section"][content]')?.content ?? '';
+
+    function initSearchBar() {
+        const {autocomplete, getAlgoliaResults} = window['@algolia/autocomplete-js'];
+        const searchClient = algoliasearch('KWE0727TZS', '595ee07f069991380e9c3036cfad8e5e');
+        const scopeTitles = {
+            'ama': 'Ask Me Anything',
+            'blog': 'Blog',
+            'changelog': 'Changelog',
+            'customer-stories': 'Customer Stories',
+            'docs': 'Docs',
+            'ebooks': 'E-Books',
+            'handbook': 'Handbook',
+            'node-red': 'Node-RED',
+            'webinars': 'Webinars',
+        }
+        const placeholder = Object.prototype.hasOwnProperty.call(scopeTitles, searchScope) ? `Search in ${scopeTitles[searchScope]}...` : 'Search...'
+
+        const searchQuery = (searchClient, query, scope) => {
+            return {
+                sourceId : scope,
+                getItems : () => getAlgoliaResults({
+                    searchClient,
+                    queries: [
+                        {
+                            indexName            : 'netlify_00f8cf60-997f-4c4d-9427-a97924358648_live_all',
+                            params               : {
+                                query,
+                                hitsPerPage: 5,
+                            },
+                            attributesToHighlight: '*',
+                            filters: scope.length === 0 ?  undefined : `category:${scope}`
+                        },
+                    ],
+                }),
+                templates: {
+                    header({html}) {
+                        if (!Object.prototype.hasOwnProperty.call(scopeTitles, scope)) {
+                            return null;
+                        }
+
+                        return html`
+                            <span class="aa-SourceHeaderTitle">In ${scopeTitles[scope]}</span>
+                            <div class="aa-SourceHeaderLine"/>
+                        `;
+                    },
+                    item({item, components, html}) {
+                        return html`
+                            <a href="${item.url}" class="aa-ItemWrapper">
+                                <div class="aa-ItemContent">
+                                    <div class="aa-ItemIcon aa-ItemIcon--alignTop">
+                                        <img
+                                                src="${item.image}"
+                                                alt="${item.name}"
+                                                width="40"
+                                                height="40"
+                                        />
+                                    </div>
+                                    <div class="aa-ItemContentBody">
+                                        <div class="aa-ItemContentTitle">
+                                            ${components.Highlight({
+                                                hit      : item,
+                                                attribute: ['hierarchy', 'lvl0'],
+                                            })}
+                                        </div>
+                                          <div class="aa-ItemContentSubTitle ${item.type === 'lvl0' ? 'hidden' : ''}">
+                                            ${components.Highlight({
+                                                hit      : item,
+                                                attribute: ['hierarchy', item.type],
+                                            })}
+                                          </div>
+                                        <div class="aa-ItemContentDescription">
+                                            ${components.Snippet({
+                                                hit      : item,
+                                                attribute: 'description',
+                                            })}
+                                        </div>
+                                    </div>
+                                </div>
+                            </a>`;
+                    },
+                },
+            };
+        }
+
+        autocomplete({
+            container: '#algolia-search',
+            placeholder,
+            getSources({query}) {
+                return [
+                    searchQuery(searchClient, query, searchScope)
+                ]
+            }
+        });
+    }
+</script>
+
+<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.24.0/dist/algoliasearch-lite.umd.js"
+        integrity="sha256-b2n6oSgG4C1stMT/yc/ChGszs9EY/Mhs6oltEjQbFCQ=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js@1.6.1" onload="initSearchBar()"></script>