diff --git a/_includes/footer.html b/_includes/footer.html
index 4767f2e7ab..7171b3c1f5 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -95,6 +95,17 @@
 });
 </script>
 {% endif %}
+
+<!-- Alogolia search for doc -->
+<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: 'fbc439670f5d4e3730cdcb715c359391',
+indexName: 'scala-lang',
+inputSelector: '#doc-search-bar',
+algoliaOptions: { 'facetFilters': ["language:en"] },
+debug: false // Set debug to true if you want to inspect the dropdown
+});
+</script>
 </body>
 
 </html>
diff --git a/_includes/headertop.html b/_includes/headertop.html
index bf2150c17b..383d5eacfa 100644
--- a/_includes/headertop.html
+++ b/_includes/headertop.html
@@ -23,3 +23,6 @@
     <!-- Atom feeds -->
     <link rel="alternate" type="application/atom+xml" title="News Feed" href="http://scala-lang.org/feed/index.xml" />
     <link rel="alternate" type="application/atom+xml" title="Blog Feed" href="http://scala-lang.org/feed/blog.xml" />
+
+    <!-- Algolia stylesheet -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
diff --git a/_layouts/inner-page-parent.html b/_layouts/inner-page-parent.html
index 8940ae4e54..3ed25753ca 100644
--- a/_layouts/inner-page-parent.html
+++ b/_layouts/inner-page-parent.html
@@ -1,6 +1,4 @@
-
-{% include headertop.html %}
-{% include headerbottom.html %}
+ {% include headertop.html %} {% include headerbottom.html %}
 
 <div class="navigation-fade-screen"></div>
 
@@ -11,13 +9,23 @@
 	<!-- Title -->
 	<section class="title-page">
 		<div class="wrap">
-			<h1>{{page.title}}</h1>
+			<div class="content-title-documentation">
+
+				<h1>{{page.title}}</h1>
+				<div class="search-container">
+					<div class="icon-search">
+						<i class="fa fa-search"></i>
+					</div>
+					<input type="text" class="doc-search" id="doc-search-bar" placeholder="Search in doc...">
+					<ul class="result-container" id="result-container" style="display: none;"></ul>
+				</div>
+			</div>
+
 		</div>
 	</section>
 
-	{% comment %}Specific content from child layouts{% endcomment %}
-	{{content}}
+	{% comment %}Specific content from child layouts{% endcomment %} {{content}}
 
 </main>
 
-{% include footer.html %}
+{% include footer.html %}
\ No newline at end of file
diff --git a/_sass/components/search.scss b/_sass/components/search.scss
index 6bccdd20b8..de18915531 100755
--- a/_sass/components/search.scss
+++ b/_sass/components/search.scss
@@ -4,7 +4,19 @@
 
 .search-container {
     position: relative;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    
+    .algolia-autocomplete {
+        width: 100%;
+    }
 
+    @media screen and (min-width: 768px) {
+        margin: 0;
+        margin-top: -20px;
+        float: right;
+        width: 24%;
+    }
     .icon-search {
         position: absolute;
         left: 14px;