diff --git a/src/landing/_template/landing.st b/src/landing/_template/landing.st
index 218fda301..738dfb631 100644
--- a/src/landing/_template/landing.st
+++ b/src/landing/_template/landing.st
@@ -23,6 +23,8 @@
       }
     </script>
     <!-- OneTrust Cookies Consent Notice (Production Standard, scala-sbt.org, en-GB) end -->
+
+    <link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
   </head>
   <body class="landing">
     <header>
@@ -37,6 +39,10 @@
               </div>
             </div>
             <div class="col-md-9">
+              <div class="docsearch">
+                <input type="text" id="doc-search-bar" placeholder="Search...">
+                <ul class="result-container" id="result-container" style="display: none;"></ul>
+              </div>
               <div class="nav" id="topbar">
                 <a href="learn.html">Learn</a>
                 <a href="download.html">Download</a>
@@ -195,5 +201,13 @@ You can use sbt-native-packager to build native formats like Docker, sbt-release
       ga('tsTracker.linker:autoLink', ['typesafe.com','playframework.com','scala-lang.org','scaladays.org','spray.io','akka.io','scala-sbt.org']);
       ga('tsTracker.send', 'pageview');
     </script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script type="text/javascript"> docsearch({
+      apiKey: 'e47ee877a07ea1c48722f08430d54913',
+      indexName: 'scala-sbt',
+      inputSelector: '#doc-search-bar',
+      debug: false // Set debug to true if you want to inspect the dropdown
+    });
+    </script>
   </body>
 </html>
diff --git a/src/landing/_template/page.st b/src/landing/_template/page.st
index 55b62b517..5edb5e4c2 100644
--- a/src/landing/_template/page.st
+++ b/src/landing/_template/page.st
@@ -21,6 +21,8 @@
       }
     </script>
     <!-- OneTrust Cookies Consent Notice (Production Standard, scala-sbt.org, en-GB) end -->
+
+    <link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
   </head>
   <body class="default">
     <header>
@@ -35,6 +37,10 @@
               </div>
             </div>
             <div class="col-md-9">
+              <div class="docsearch">
+                <input type="text" class = "ds-input" id="doc-search-bar" placeholder="Search...">
+                <ul class="result-container" id="result-container" style="display: none;"></ul>
+              </div>
               <div class="nav" id="topbar">
                 <a href="/learn.html">Learn</a>
                 <a href="/download.html">Download</a>
@@ -152,5 +158,13 @@
       ga('tsTracker.linker:autoLink', ['lightbend.com','playframework.com','scala-lang.org','scaladays.org','spray.io','akka.io','scala-sbt.org']);
       ga('tsTracker.send', 'pageview');
     </script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+    <script type="text/javascript"> docsearch({
+      apiKey: 'e47ee877a07ea1c48722f08430d54913',
+      indexName: 'scala-sbt',
+      inputSelector: '#doc-search-bar',
+      debug: false // Set debug to true if you want to inspect the dropdown
+    });
+    </script>    
   </body>
 </html>
diff --git a/src/landing/assets/stylesheet.css b/src/landing/assets/stylesheet.css
index 5b1f8a46d..711855258 100644
--- a/src/landing/assets/stylesheet.css
+++ b/src/landing/assets/stylesheet.css
@@ -16,7 +16,7 @@ body {
   text-rendering: optimizeLegibility;
 }
 body header nav .row > div {
-  float: left;
+  /* float: left; */
 }
 body header nav .row > div:last-child {
   float: right;
@@ -465,4 +465,17 @@ body .optanon-alert-box-wrapper .optanon-alert-box-bottom-padding {
     color: white
 }
 
-/* test */
+div.docsearch {
+  height:75px;
+  display:block;
+  float: left;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div.docsearch input.ds-input {
+  max-width:200px;
+  float:left;
+}
diff --git a/src/reference/_sphinx/themes/sbt/layout.html b/src/reference/_sphinx/themes/sbt/layout.html
index 9c321116d..fb8d22009 100644
--- a/src/reference/_sphinx/themes/sbt/layout.html
+++ b/src/reference/_sphinx/themes/sbt/layout.html
@@ -13,6 +13,8 @@
 {% set css_files = css_files + ['_static/docs.css'] %}
 {% set css_files = css_files + ['_static/syntax.css'] %}
 {% set css_files = css_files + ['https://fonts.googleapis.com/css?family=Exo:300,400,600,700'] %}
+{% set css_files = css_files + ['https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css'] %}
+
 
 {# do not display relbars #}
 {% block relbar1 %}{% endblock %}
diff --git a/src/reference/custom.css b/src/reference/custom.css
index a0e3b0d81..20819bb04 100644
--- a/src/reference/custom.css
+++ b/src/reference/custom.css
@@ -10,10 +10,8 @@ div.toccolumn {
 
 div.header {
   font-size: 18px;
-  color: #ffffff;
-  background-color: #ffffff;
   height: 75px;
-  border-top: 5px solid #1a84ad; /* Lightbend azure */
+  border-top: 5px solid #1a84ad; 
   -webkit-box-shadow: 0px 4px 2px 0px rgba(0,0,0,0.3);
   -moz-box-shadow: 0px 4px 2px 0px rgba(0,0,0,0.3);
   box-shadow: 0px 4px 2px 0px rgba(0,0,0,0.3);
@@ -48,10 +46,22 @@ div.header .nav {
   border-bottom: 0px solid transparent;
 }
 
-div.header #topbar {
+div.docsearch {
+  height:75px;
+  display:block;
+  float: left;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div.docsearch input.ds-input {
+  max-width:200px;
+  float:left;
 }
 
-div.header .nav a {
+div.header .nav>a {
   display: inline-block;
   font-weight: 400;
   font-style: normal;
diff --git a/src/reference/layouts/footer.md b/src/reference/layouts/footer.md
index c0af50491..a5f023ce2 100644
--- a/src/reference/layouts/footer.md
+++ b/src/reference/layouts/footer.md
@@ -34,3 +34,11 @@
 </footer>
 <script src="/assets/versions.js"></script>
 <script src="/assets/set-versions.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+<script type="text/javascript"> docsearch({
+  apiKey: 'e47ee877a07ea1c48722f08430d54913',
+  indexName: 'scala-sbt',
+  inputSelector: '#doc-search-bar',
+  debug: false // Set debug to true if you want to inspect the dropdown
+});
+</script>
diff --git a/src/reference/layouts/header.md b/src/reference/layouts/header.md
index 73c070e9a..c1252a4b4 100644
--- a/src/reference/layouts/header.md
+++ b/src/reference/layouts/header.md
@@ -1,5 +1,7 @@
 <link href="https://fonts.googleapis.com/css?family=Roboto:100normal,100italic,300normal,300italic,400normal,400italic,500normal,500italic,700normal,700italic,900normal,900italicc" rel="stylesheet" type="text/css"/>
 <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,900,400italic,700italic" rel="stylesheet" type="text/css">
+<!-- Algolia stylesheet -->
+<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet" type = "text/css">
 <div class="container-fluid top nav">
   <div class="row w-100">
     <div class="col-md-4">
@@ -9,15 +11,19 @@
       </div>
     </div>
     <div class="col-md-8">
-      <div class="nav" id="topbar">
-        <a href="../../learn.html">Learn</a>
-        <a href="../../download.html">Download</a>
-        <a href="../../support.html">Support</a>
-        <a href="../../community.html">Get Involved</a>
-        <a id="source-code" href="https://github.com/sbt/sbt"><img src="files/github-logo-teal.svg" alt="Source code" class="social"></a>
-        <a id="twitter" href="https://twitter.com/scala_sbt"><img src="files/twitter-logo-teal.svg" alt="sbt on Twitter" class="social"></a>
-        <a id="edit-on-github" href="https://github.com/sbt/website/edit/develop/src/reference/$page.localPath$"><img src="files/octicon-pencil.svg" alt="Edit on GitHub"></a>
-      </div>
+        <div class="docsearch">
+          <input type="text" id="doc-search-bar" placeholder="Search...">
+          <ul class="result-container" id="result-container" style="display: none;"></ul>
+        </div>
+        <div class="nav" id="topbar">
+          <a href="../../learn.html">Learn</a>
+          <a href="../../download.html">Download</a>
+          <a href="../../support.html">Support</a>
+          <a href="../../community.html">Get Involved</a>
+          <a id="source-code" href="https://github.com/sbt/sbt"><img src="files/github-logo-teal.svg" alt="Source code" class="social"></a>
+          <a id="twitter" href="https://twitter.com/scala_sbt"><img src="files/twitter-logo-teal.svg" alt="sbt on Twitter" class="social"></a>
+          <a id="edit-on-github" href="https://github.com/sbt/website/edit/develop/src/reference/$page.localPath$"><img src="files/octicon-pencil.svg" alt="Edit on GitHub"></a>
+        </div>
     </div>
   </div>
 </div>
