diff --git a/frappe/templates/doc.html b/frappe/templates/doc.html
index 3e1cc5509a..1c70aace98 100644
--- a/frappe/templates/doc.html
+++ b/frappe/templates/doc.html
@@ -22,7 +22,7 @@
 			</div>
 			<div class="col-12 col-lg-8">
 				<div class="doc-search-container">
-					<div class="doc-search">
+					<div class="doc-search" id="search-container">
 						<div class="dropdown">
 							<div class="search-icon">
 								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
@@ -117,73 +117,11 @@ id="page-{{ name or route | e }}" data-path="{{ pathname | e }}"
 {%- block script -%}
 <script>
 	frappe.ready(() => {
-		setup_search();
+		frappe.setup_search('#search-container', '{{ docs_search_scope or "" }}');
 
 		$('.web-footer .container')
 			.removeClass('container')
 			.addClass('container-fluid doc-container');
 	});
-
-	function setup_search() {
-		let $dropdown = $('.doc-search .dropdown');
-		let $dropdown_menu = $('.doc-search .dropdown-menu');
-		let $input = $('.doc-search input');
-
-		$(document).on('keypress', e => {
-			if (e.key === '/') {
-				e.preventDefault();
-				$input.focus();
-			}
-		});
-
-		$input.on('input', frappe.utils.debounce(() => {
-			if (!$input.val()) {
-				clear_dropdown();
-				return;
-			}
-
-			frappe.call({
-				method: 'frappe.modules.full_text_search.web_search',
-				args: {
-					index_name: 'web_routes',
-					scope: '{{ docs_search_scope or "" }}' || null,
-					query: $input.val(),
-					limit: 5
-				}
-			}).then(r => {
-				let results = r.message || [];
-				let dropdown_html;
-				if (results.length == 0) {
-					dropdown_html = `<div class="dropdown-item">No results found</div>`;
-				} else {
-					dropdown_html = results.map(r => {
-						return `<a class="dropdown-item" href="/${r.path}">
-							<h6>${r.title_highlights || r.title}</h6>
-							<div style="white-space: normal;">${r.content_highlights}</div>
-						</a>`
-					}).join('')
-				}
-				$dropdown_menu.html(dropdown_html);
-				$dropdown_menu.addClass('show');
-			});
-		}, 500));
-
-		$input.on('focus', () => {
-			if (!$input.val()) {
-				clear_dropdown();
-			}
-		});
-
-		$input.on('blur', () => {
-			setTimeout(() => {
-				clear_dropdown();
-			}, 300);
-		});
-
-		function clear_dropdown() {
-			$dropdown_menu.html('');
-			$dropdown_menu.removeClass('show');
-		}
-	}
 </script>
 {%- endblock -%}
diff --git a/frappe/website/js/website.js b/frappe/website/js/website.js
index cd9609cfd3..b69077f482 100644
--- a/frappe/website/js/website.js
+++ b/frappe/website/js/website.js
@@ -380,9 +380,93 @@ $.extend(frappe, {
 	}
 });
 
+frappe.setup_search = function (target, search_scope) {
+	if (typeof target === "string") {
+		target = $(target);
+	}
+
+	let $search_input = $(`<div class="dropdown">
+			<div class="search-icon">
+				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor" stroke-width="2" stroke-linecap="round"
+					stroke-linejoin="round"
+					class="feather feather-search">
+					<circle cx="11" cy="11" r="8"></circle>
+					<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+				</svg>
+			</div>
+			<input type="search" class="form-control" placeholder="Search the docs (Press ? to focus)" />
+			<div class="overflow-hidden shadow dropdown-menu w-100">
+			</div>
+		</div>`);
+
+	target.empty();
+	$search_input.appendTo(target);
+
+	let $dropdown = $search_input.find('.dropdown');
+	let $dropdown_menu = $search_input.find('.dropdown-menu');
+	let $input = $search_input.find('input');
+
+	$(document).on('keypress', e => {
+		if (e.key === '/') {
+			e.preventDefault();
+			$input.focus();
+		}
+	});
+
+	$input.on('input', frappe.utils.debounce(() => {
+		if (!$input.val()) {
+			clear_dropdown();
+			return;
+		}
+
+		frappe.call({
+			method: 'frappe.modules.full_text_search.web_search',
+			args: {
+				index_name: 'web_routes',
+				scope: search_scope || null,
+				query: $input.val(),
+				limit: 5
+			}
+		}).then(r => {
+			let results = r.message || [];
+			let dropdown_html;
+			if (results.length == 0) {
+				dropdown_html = `<div class="dropdown-item">No results found</div>`;
+			} else {
+				dropdown_html = results.map(r => {
+					return `<a class="dropdown-item" href="/${r.path}">
+						<h6>${r.title_highlights || r.title}</h6>
+						<div style="white-space: normal;">${r.content_highlights}</div>
+					</a>`
+				}).join('')
+			}
+			$dropdown_menu.html(dropdown_html);
+			$dropdown_menu.addClass('show');
+		});
+	}, 500));
+
+	$input.on('focus', () => {
+		if (!$input.val()) {
+			clear_dropdown();
+		}
+	});
+
+	$input.on('blur', () => {
+		setTimeout(() => {
+			clear_dropdown();
+		}, 300);
+	});
+
+	function clear_dropdown() {
+		$dropdown_menu.html('');
+		$dropdown_menu.removeClass('show');
+	}
+}
+
 
 // Utility functions
-
 window.valid_email = function(id) {
 	// eslint-disable-next-line
 	// copied regex from frappe/utils.js validate_type