diff --git a/web/index.html b/web/index.html
index 2eb31a0..ad73161 100644
--- a/web/index.html
+++ b/web/index.html
@@ -8,10 +8,18 @@
 		<script type="module" src="traveldrafter.js"></script>
 	</head>
 	<body>
-		<div id="journey-search-from">Select…</div>
-		<div id="journey-search-to">Select…</div>
-		<div id="journey-search-submit">Search</div>
-		<div id="journey-search-result"></div>
+		<div id="journeys-search-button">Search journeys</div>
+		<div id="journeys-search" class="popup">
+			<div class="popup-close">&times;</div>
+			<div id="journeys-search-content" class="popup-content">
+				<div class="container">
+					<input id="journey-search-from" class="form-control" type="text" placeholder="From" readonly/>
+					<input id="journey-search-to" class="form-control" type="text" placeholder="To" readonly/>
+					<div id="journey-search-submit">Search</div>
+					<div id="journey-search-result"></div>
+				</div>
+			</div>
+		</div>
 
 		<div id="locations-search" class="popup">
 			<div class="popup-close">&times;</div>
diff --git a/web/journeys-search.js b/web/journeys-search.js
index 6ba47a8..32dbcc3 100644
--- a/web/journeys-search.js
+++ b/web/journeys-search.js
@@ -1,6 +1,7 @@
 import { fetchJourneys } from './api.js';
 import { attachLocationsSearch } from './locations-search.js';
 
+let element_journeys_search = document.querySelector("#journeys-search");
 let element_from = document.querySelector("#journey-search-from");
 let element_to = document.querySelector("#journey-search-to");
 let element_submit = document.querySelector("#journey-search-submit");
@@ -37,3 +38,13 @@ function createJourneyLegElement(leg) {
 	el.innerText = leg?.line?.name + ": " + leg.origin.name + " > " + leg.destination.name;
 	return el;
 }
+
+
+export function attachJourneysSearch(search_element) {
+	search_element.addEventListener("click", event => {
+		element_from.value = "";
+		element_to.value = "";
+		element_result.innerText = "";
+		element_journeys_search.style.display = "block";
+	});
+}
diff --git a/web/locations-search.js b/web/locations-search.js
index e2711e8..d55472d 100644
--- a/web/locations-search.js
+++ b/web/locations-search.js
@@ -36,7 +36,7 @@ function createLocationElement(location) {
 export function attachLocationsSearch(search_element) {
 	search_element.addEventListener("click", event => {
 		element_locations_search.locationSelectedCallback = (location_name, location_id) => {
-			search_element.innerText = location_name;
+			search_element.value = location_name;
 			search_element.dataset.locationId = location_id;
 		};
 		element_query.value = "";
diff --git a/web/style.css b/web/style.css
index a4c17de..f63a12f 100644
--- a/web/style.css
+++ b/web/style.css
@@ -25,6 +25,14 @@
 	display: none;
 }
 
+#journeys-search {
+	z-index: 8000;
+}
+
+#locations-search {
+	z-index: 9000;
+}
+
 .popup .popup-close {
 	margin: 60px;
 	margin-left: auto;
diff --git a/web/traveldrafter.js b/web/traveldrafter.js
index 881b811..5f356fa 100644
--- a/web/traveldrafter.js
+++ b/web/traveldrafter.js
@@ -1,10 +1,12 @@
 import * as Api from './api.js';
 import { setupPopups } from "./popup.js";
 import { setupLocationsSearch } from './locations-search.js';
-import { setupJourneysSearch } from './journeys-search.js';
+import { setupJourneysSearch, attachJourneysSearch } from './journeys-search.js';
 
 window.Api = Api;
 
 setupPopups();
 setupLocationsSearch();
 setupJourneysSearch();
+
+attachJourneysSearch(document.querySelector("#journeys-search-button"));
