diff --git a/_config.yml b/_config.yml
index 9d87fb5e..a10d0efe 100644
--- a/_config.yml
+++ b/_config.yml
@@ -91,9 +91,12 @@ docs:
     name:         Quick Start Guide
     url:          https://userguide.mdanalysis.org/stable/examples/quickstart.html
 
+# The algolia.read_only_api_key may be safely put into frontend code
+# and this is not a security issue.
 algolia:
-  index_name: mdanalysis
-  read_only_api_key: 307d780013d06fdde7a4eae462db0e74
+  index_name:        mdanalysis
+  appId:             Y8HJT3NO22
+  read_only_api_key: 68fa6789d0a275a311f68914e0c2366e
 
 numfocus:
   donate:            https://numfocus.org/donate-to-mdanalysis
diff --git a/_includes/footer.html b/_includes/footer.html
index a114f51e..ad8bf9ed 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,12 +1,12 @@
 
 
 <!-- Algolia DocSearch https://community.algolia.com/docsearch/ -->
-<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: '{{ site.algolia.read_only_api_key }}', 
-indexName: '{{ site.algolia.index_name }}', 
-inputSelector: 'input[type=text]', 
-debug: true // Set debug to true if you want to inspect the dropdown 
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
+<script type="text/javascript"> docsearch({
+     container: '#docsearch',     
+     appId:  '{{ site.algolia.appId }}', 
+     indexName: '{{ site.algolia.index_name }}', 
+     apiKey: '{{ site.algolia.read_only_api_key }}', 
 }); 
 </script>
 
diff --git a/_includes/head.html b/_includes/head.html
index b9954631..c9a893e2 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -20,7 +20,9 @@
   <link rel="stylesheet" href="{{ site.baseurl }}/public/css/hyde.css">
   <link rel="stylesheet" href="{{ site.baseurl }}/public/css/local.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
-
+  <!-- Algolia DocSearch https://community.algolia.com/docsearch/ -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha" /> 
+  <link rel="stylesheet" href="{{ site.baseurl }}/public/css/search.css">
   <!-- Icons -->
   <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.baseurl }}/public/apple-touch-icon-144-precomposed.png">
   <link rel="shortcut icon" href="{{ site.baseurl }}/public/favicon.ico">
@@ -37,7 +39,4 @@
      anchors.add('h1, h2, h3, h4, h5, h6');
      });
   </script>
-
-  <!-- Algolia DocSearch https://community.algolia.com/docsearch/ -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" /> 
 </head>
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index fb3cbec4..65845181 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -9,7 +9,7 @@ <h1>
       <p class="lead">{{ site.description }}</p>
     </div>
 
-    <input type="text" class="searchbox" autocomplete="off" name="query" placeholder="Search mdanalysis.org..." />
+    <div id="docsearch">Enable javascript for search.</div>
 
     <nav class="sidebar-nav">
       {% assign site_base_url = site.baseurl | append: "/" %}
diff --git a/public/css/search.css b/public/css/search.css
new file mode 100644
index 00000000..00c9c248
--- /dev/null
+++ b/public/css/search.css
@@ -0,0 +1,12 @@
+/* CSS for customizing Algolia search box */
+/* https://github.com/algolia/docsearch/tree/next/packages/docsearch-css/src */
+
+/* override variables in _variables.css */
+
+:root {
+    --docsearch-primary-color: #FF9200;    
+    --docsearch-text-color: #343131;    
+    --docsearch-muted-color: #808080;
+    --docsearch-logo-color: rgba(0, 0, 0);
+}
+