diff --git a/themes/jquery/css/docsearch.css b/themes/jquery/css/docsearch.css
new file mode 100644
index 00000000..96f93107
--- /dev/null
+++ b/themes/jquery/css/docsearch.css
@@ -0,0 +1,19 @@
+/* Custom DocSeach CSS to adapt the generic one * See https://community.algolia.com/docsearch/styling.html for more info */
+nav#main .searchform {
+	text-shadow: none;
+}
+
+.searchform label {
+	width: 100%;
+	display: block;
+}
+
+.algolia-autocomplete {
+	width: 99%;
+}
+
+@media only screen and (max-width: 480px) {
+	.ds-dropdown-menu {
+		min-width: 100% !important;
+	}
+}
diff --git a/themes/jquery/footer.php b/themes/jquery/footer.php
index efd52f26..c7e38b79 100755
--- a/themes/jquery/footer.php
+++ b/themes/jquery/footer.php
@@ -37,6 +37,11 @@
 </footer>
 
 <?php wp_footer(); ?>
-
+	<!-- at the end of the BODY -->
+	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"  onload="docsearch({apiKey: '3cfde9aca378c8aab554d5bf1b23489b',
+		indexName: 'jquery',
+		inputSelector: 'input[name=\'s\']',
+		debug: true // Set debug to true if you want to inspect the dropdown
+	})" async></script>
 </body>
 </html>
diff --git a/themes/jquery/header.php b/themes/jquery/header.php
index b53dc5f1..5bde27b9 100755
--- a/themes/jquery/header.php
+++ b/themes/jquery/header.php
@@ -35,6 +35,9 @@
 
 	<script src="https://use.typekit.net/wde1aof.js"></script>
 	<script>try{Typekit.load();}catch(e){}</script>
+	<!-- at the end of the HEAD -->
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
+	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/docsearch.css">
 
 <?php
 	if ( is_singular() && get_option( 'thread_comments' ) )