diff --git a/frontend/src/lib/components/EditAdventure.svelte b/frontend/src/lib/components/EditAdventure.svelte
index da038cc6..e68ad1e9 100644
--- a/frontend/src/lib/components/EditAdventure.svelte
+++ b/frontend/src/lib/components/EditAdventure.svelte
@@ -184,222 +184,221 @@
 <dialog id="my_modal_1" class="modal">
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-	<div class="modal-box w-11/12 max-w-6xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
+	<div class="modal-box w-11/12 max-w-2xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
 		<h3 class="font-bold text-lg">Edit {adventureToEdit.type} Adventure</h3>
 		{#if adventureToEdit.id === '' || isDetails}
 			<div class="modal-action items-center">
 				<form method="post" style="width: 100%;" on:submit={handleSubmit}>
 					<!-- Grid layout for form fields -->
 					<h2 class="text-2xl font-semibold mb-2">Basic Information</h2>
-					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
-						<div>
-							<label for="name">Name</label><br />
-							<input
-								type="text"
-								id="name"
-								name="name"
-								bind:value={adventureToEdit.name}
-								class="input input-bordered w-full"
-								required
-							/>
+					<!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3"> -->
+					<div>
+						<label for="name">Name</label><br />
+						<input
+							type="text"
+							id="name"
+							name="name"
+							bind:value={adventureToEdit.name}
+							class="input input-bordered w-full"
+							required
+						/>
+					</div>
+					<div>
+						<div class="form-control">
+							<label class="label cursor-pointer">
+								<span class="label-text">Visited</span>
+								<input
+									type="radio"
+									name="radio-10"
+									class="radio checked:bg-red-500"
+									on:click={() => (adventureToEdit.type = 'visited')}
+									checked={adventureToEdit.type == 'visited'}
+								/>
+							</label>
 						</div>
-						<div>
-							<div class="form-control">
-								<label class="label cursor-pointer">
-									<span class="label-text">Visited</span>
-									<input
-										type="radio"
-										name="radio-10"
-										class="radio checked:bg-red-500"
-										on:click={() => (adventureToEdit.type = 'visited')}
-										checked={adventureToEdit.type == 'visited'}
-									/>
-								</label>
-							</div>
-							<div class="form-control">
-								<label class="label cursor-pointer">
-									<span class="label-text">Planned</span>
-									<input
-										type="radio"
-										name="radio-10"
-										class="radio checked:bg-blue-500"
-										on:click={() => (adventureToEdit.type = 'planned')}
-										checked={adventureToEdit.type == 'planned'}
-									/>
-								</label>
-							</div>
+						<div class="form-control">
+							<label class="label cursor-pointer">
+								<span class="label-text">Planned</span>
+								<input
+									type="radio"
+									name="radio-10"
+									class="radio checked:bg-blue-500"
+									on:click={() => (adventureToEdit.type = 'planned')}
+									checked={adventureToEdit.type == 'planned'}
+								/>
+							</label>
 						</div>
+					</div>
 
+					<div>
+						<label for="date">Date</label><br />
+						<input
+							type="date"
+							id="date"
+							name="date"
+							min={startDate || ''}
+							max={endDate || ''}
+							bind:value={adventureToEdit.date}
+							class="input input-bordered w-full"
+						/>
+					</div>
+					<div>
+						<!-- link -->
 						<div>
-							<label for="date">Date</label><br />
-							<input
-								type="date"
-								id="date"
-								name="date"
-								min={startDate || ''}
-								max={endDate || ''}
-								bind:value={adventureToEdit.date}
-								class="input input-bordered w-full"
-							/>
-						</div>
-						<div>
-							<!-- link -->
-							<div>
-								<label for="link">Link</label><br />
-								<input
-									type="text"
-									id="link"
-									name="link"
-									bind:value={adventureToEdit.link}
-									class="input input-bordered w-full"
-								/>
-							</div>
-						</div>
-						<div>
-							<label for="description">Description</label><br />
-							<textarea
-								id="description"
-								name="description"
-								bind:value={adventureToEdit.description}
-								class="textarea textarea-bordered w-full h-32"
-							></textarea>
-						</div>
-						<div>
-							<label for="activity_types">Activity Types</label><br />
+							<label for="link">Link</label><br />
 							<input
 								type="text"
-								id="activity_types"
-								name="activity_types"
-								hidden
-								bind:value={adventureToEdit.activity_types}
+								id="link"
+								name="link"
+								bind:value={adventureToEdit.link}
 								class="input input-bordered w-full"
 							/>
-							<ActivityComplete bind:activities={adventureToEdit.activity_types} />
 						</div>
-						<div>
-							<label for="rating"
-								>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label
-							><br />
+					</div>
+					<div>
+						<label for="description">Description</label><br />
+						<textarea
+							id="description"
+							name="description"
+							bind:value={adventureToEdit.description}
+							class="textarea textarea-bordered w-full h-32"
+						></textarea>
+					</div>
+					<div>
+						<label for="activity_types">Activity Types</label><br />
+						<input
+							type="text"
+							id="activity_types"
+							name="activity_types"
+							hidden
+							bind:value={adventureToEdit.activity_types}
+							class="input input-bordered w-full"
+						/>
+						<ActivityComplete bind:activities={adventureToEdit.activity_types} />
+					</div>
+					<div>
+						<label for="rating"
+							>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label
+						><br />
+						<input
+							type="number"
+							min="0"
+							max="5"
+							hidden
+							bind:value={adventureToEdit.rating}
+							id="rating"
+							name="rating"
+							class="input input-bordered w-full max-w-xs mt-1"
+						/>
+						<div class="rating -ml-3 mt-1">
 							<input
-								type="number"
-								min="0"
-								max="5"
-								hidden
-								bind:value={adventureToEdit.rating}
-								id="rating"
-								name="rating"
-								class="input input-bordered w-full max-w-xs mt-1"
+								type="radio"
+								name="rating-2"
+								class="rating-hidden"
+								checked={Number.isNaN(adventureToEdit.rating)}
 							/>
-							<div class="rating -ml-3 mt-1">
-								<input
-									type="radio"
-									name="rating-2"
-									class="rating-hidden"
-									checked={Number.isNaN(adventureToEdit.rating)}
-								/>
-								<input
-									type="radio"
-									name="rating-2"
-									class="mask mask-star-2 bg-orange-400"
-									on:click={() => (adventureToEdit.rating = 1)}
-									checked={adventureToEdit.rating === 1}
-								/>
-								<input
-									type="radio"
-									name="rating-2"
-									class="mask mask-star-2 bg-orange-400"
-									on:click={() => (adventureToEdit.rating = 2)}
-									checked={adventureToEdit.rating === 2}
-								/>
-								<input
-									type="radio"
-									name="rating-2"
-									class="mask mask-star-2 bg-orange-400"
-									on:click={() => (adventureToEdit.rating = 3)}
-									checked={adventureToEdit.rating === 3}
-								/>
-								<input
-									type="radio"
-									name="rating-2"
-									class="mask mask-star-2 bg-orange-400"
-									on:click={() => (adventureToEdit.rating = 4)}
-									checked={adventureToEdit.rating === 4}
-								/>
-								<input
-									type="radio"
-									name="rating-2"
-									class="mask mask-star-2 bg-orange-400"
-									on:click={() => (adventureToEdit.rating = 5)}
-									checked={adventureToEdit.rating === 5}
-								/>
-								{#if adventureToEdit.rating}
-									<button
-										type="button"
-										class="btn btn-sm btn-error ml-2"
-										on:click={() => (adventureToEdit.rating = NaN)}
-									>
-										Remove
-									</button>
-								{/if}
-							</div>
+							<input
+								type="radio"
+								name="rating-2"
+								class="mask mask-star-2 bg-orange-400"
+								on:click={() => (adventureToEdit.rating = 1)}
+								checked={adventureToEdit.rating === 1}
+							/>
+							<input
+								type="radio"
+								name="rating-2"
+								class="mask mask-star-2 bg-orange-400"
+								on:click={() => (adventureToEdit.rating = 2)}
+								checked={adventureToEdit.rating === 2}
+							/>
+							<input
+								type="radio"
+								name="rating-2"
+								class="mask mask-star-2 bg-orange-400"
+								on:click={() => (adventureToEdit.rating = 3)}
+								checked={adventureToEdit.rating === 3}
+							/>
+							<input
+								type="radio"
+								name="rating-2"
+								class="mask mask-star-2 bg-orange-400"
+								on:click={() => (adventureToEdit.rating = 4)}
+								checked={adventureToEdit.rating === 4}
+							/>
+							<input
+								type="radio"
+								name="rating-2"
+								class="mask mask-star-2 bg-orange-400"
+								on:click={() => (adventureToEdit.rating = 5)}
+								checked={adventureToEdit.rating === 5}
+							/>
+							{#if adventureToEdit.rating}
+								<button
+									type="button"
+									class="btn btn-sm btn-error ml-2"
+									on:click={() => (adventureToEdit.rating = NaN)}
+								>
+									Remove
+								</button>
+							{/if}
 						</div>
+						<!-- </div> -->
 					</div>
 					<div class="divider"></div>
 					<h2 class="text-2xl font-semibold mb-2 mt-4">Location Information</h2>
-					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-						<div>
-							<label for="latitude">Location</label><br />
+					<!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> -->
+					<div>
+						<label for="latitude">Location</label><br />
+						<input
+							type="text"
+							id="location"
+							name="location"
+							bind:value={adventureToEdit.location}
+							class="input input-bordered w-full"
+						/>
+					</div>
+					<div>
+						<form on:submit={geocode} class="mt-2">
 							<input
 								type="text"
-								id="location"
-								name="location"
-								bind:value={adventureToEdit.location}
-								class="input input-bordered w-full"
+								placeholder="Seach for a location"
+								class="input input-bordered w-full max-w-xs"
+								id="search"
+								name="search"
+								bind:value={query}
 							/>
-						</div>
-						<div>
-							<form on:submit={geocode}>
-								<input
-									type="text"
-									placeholder="Seach for a location"
-									class="input input-bordered w-full max-w-xs"
-									id="search"
-									name="search"
-									bind:value={query}
-								/>
-								<button type="submit">Search</button>
-							</form>
-							{#if places.length > 0}
-								<div class="mt-4">
-									<h3 class="font-bold text-lg mb-4">Search Results</h3>
-									<ul>
-										{#each places as place}
-											<li>
-												<button
-													type="button"
-													class="btn btn-neutral mb-2"
-													on:click={() => {
-														markers = [
-															{
-																lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
-																location: place.display_name,
-																name: place.name,
-																activity_type: place.type
-															}
-														];
-													}}
-												>
-													{place.display_name}
-												</button>
-											</li>
-										{/each}
-									</ul>
-								</div>
-							{:else}
-								<p class="text-error text-lg">No results found</p>
-							{/if}
-						</div>
+							<button class="btn btn-neutral -mt-1" type="submit">Search</button>
+						</form>
 					</div>
+					{#if places.length > 0}
+						<div class="mt-4 max-w-full">
+							<h3 class="font-bold text-lg mb-4">Search Results</h3>
+
+							<div class="flex flex-wrap">
+								{#each places as place}
+									<button
+										type="button"
+										class="btn btn-neutral mb-2 mr-2 max-w-full break-words whitespace-normal text-left"
+										on:click={() => {
+											markers = [
+												{
+													lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
+													location: place.display_name,
+													name: place.name,
+													activity_type: place.type
+												}
+											];
+										}}
+									>
+										{place.display_name}
+									</button>
+								{/each}
+							</div>
+						</div>
+					{:else}
+						<p class="text-error text-lg">No results found</p>
+					{/if}
+					<!-- </div> -->
 					<div>
 						<MapLibre
 							style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
diff --git a/frontend/src/lib/components/NewAdventure.svelte b/frontend/src/lib/components/NewAdventure.svelte
index 3fb8e25f..48239db1 100644
--- a/frontend/src/lib/components/NewAdventure.svelte
+++ b/frontend/src/lib/components/NewAdventure.svelte
@@ -56,12 +56,11 @@
 	$: if (markers.length > 0) {
 		newAdventure.latitude = Math.round(markers[0].lngLat.lat * 1e6) / 1e6;
 		newAdventure.longitude = Math.round(markers[0].lngLat.lng * 1e6) / 1e6;
-		if (!newAdventure.location) {
-			newAdventure.location = markers[0].location;
-		}
-		if (!newAdventure.name) {
-			newAdventure.name = markers[0].name;
-		}
+		// if (!newAdventure.location) {
+		newAdventure.location = markers[0].location;
+		// }
+
+		newAdventure.name = markers[0].name;
 	}
 
 	async function geocode(e: Event | null) {
@@ -176,7 +175,7 @@
 <dialog id="my_modal_1" class="modal">
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-	<div class="modal-box w-11/12 max-w-6xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
+	<div class="modal-box w-11/12 max-w-2xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
 		<h3 class="font-bold text-lg">New {type} Adventure</h3>
 		{#if newAdventure.id === ''}
 			<div class="modal-action items-center">
@@ -188,236 +187,225 @@
 				>
 					<!-- Grid layout for form fields -->
 					<h2 class="text-2xl font-semibold mb-2">Basic Information</h2>
-					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
-						<div>
-							<label for="name">Name</label><br />
-							<input
-								type="text"
-								id="name"
-								name="name"
-								bind:value={newAdventure.name}
-								class="input input-bordered w-full"
-								required
-							/>
-						</div>
-						<div class="join">
-							<input
-								class="join-item btn btn-neutral"
-								type="radio"
-								name="type"
-								id="visited"
-								value="visited"
-								aria-label="Visited"
-								checked={newAdventure.type === 'visited'}
-								on:click={() => (type = 'visited')}
-							/>
-							<input
-								class="join-item btn btn-neutral"
-								type="radio"
-								name="type"
-								id="planned"
-								value="planned"
-								aria-label="Planned"
-								checked={newAdventure.type === 'planned'}
-								on:click={() => (type = 'planned')}
-							/>
-						</div>
-						<div>
-							<label for="location">Location</label><br />
-							<input
-								type="text"
-								id="location"
-								name="location"
-								bind:value={newAdventure.location}
-								class="input input-bordered w-full"
-							/>
-						</div>
-						<div>
-							<label for="date">Date</label><br />
-							<input
-								type="date"
-								id="date"
-								name="date"
-								min={startDate || ''}
-								max={endDate || ''}
-								bind:value={newAdventure.date}
-								class="input input-bordered w-full"
-							/>
-						</div>
-						<div>
-							<label for="description">Description</label><br />
-							<textarea
-								id="description"
-								name="description"
-								bind:value={newAdventure.description}
-								class="textarea textarea-bordered w-full h-32"
-							></textarea>
-						</div>
-						<div>
-							<label for="activity_types">Activity Types</label><br />
-							<input
-								type="text"
-								id="activity_types"
-								name="activity_types"
-								hidden
-								bind:value={newAdventure.activity_types}
-								class="input input-bordered w-full"
-							/>
-							<ActivityComplete bind:activities={newAdventure.activity_types} />
-						</div>
-						<div>
-							<label for="rating"
-								>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label
-							><br />
-							<input
-								type="number"
-								min="0"
-								max="5"
-								hidden
-								bind:value={newAdventure.rating}
-								id="rating"
-								name="rating"
-								class="input input-bordered w-full max-w-xs mt-1"
-							/>
-							<div class="rating -ml-3 mt-1">
-								<input
-									type="radio"
-									name="rating-2"
-									class="rating-hidden"
-									checked={Number.isNaN(newAdventure.rating)}
-								/>
-								<input
-									type="radio"
-									name="rating-2"
-									class="mask mask-star-2 bg-orange-400"
-									on:click={() => (newAdventure.rating = 1)}
-								/>
-								<input
-									type="radio"
-									name="rating-2"
-									class="mask mask-star-2 bg-orange-400"
-									on:click={() => (newAdventure.rating = 2)}
-								/>
-								<input
-									type="radio"
-									name="rating-2"
-									class="mask mask-star-2 bg-orange-400"
-									on:click={() => (newAdventure.rating = 3)}
-								/>
-								<input
-									type="radio"
-									name="rating-2"
-									class="mask mask-star-2 bg-orange-400"
-									on:click={() => (newAdventure.rating = 4)}
-								/>
-								<input
-									type="radio"
-									name="rating-2"
-									class="mask mask-star-2 bg-orange-400"
-									on:click={() => (newAdventure.rating = 5)}
-								/>
-								{#if newAdventure.rating}
-									<button
-										type="button"
-										class="btn btn-sm btn-error ml-2"
-										on:click={() => (newAdventure.rating = NaN)}
-									>
-										Remove
-									</button>
-								{/if}
-							</div>
-						</div>
-						<div>
-							<!-- link -->
-							<div>
-								<label for="link">Link</label><br />
-								<input
-									type="text"
-									id="link"
-									name="link"
-									bind:value={newAdventure.link}
-									class="input input-bordered w-full"
-								/>
-							</div>
-						</div>
-						<div>
-							<div>
-								<div>
-									<label for="is_public"
-										>Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
-									><br />
-									<input
-										type="checkbox"
-										class="toggle toggle-primary"
-										id="is_public"
-										name="is_public"
-										bind:checked={newAdventure.is_public}
-									/>
-								</div>
-								{#if newAdventure.is_public}
-									<p>
-										The link to this adventure will be copied to your clipboard once it is created!
-									</p>
-								{/if}
-							</div>
-						</div>
+					<!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3"> -->
+					<div>
+						<label for="name">Name</label><br />
+						<input
+							type="text"
+							id="name"
+							name="name"
+							bind:value={newAdventure.name}
+							class="input input-bordered w-full"
+							required
+						/>
 					</div>
-					<div class="divider"></div>
-					<h2 class="text-2xl font-semibold mb-2 mt-4">Location Information</h2>
-					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-						<div>
-							<label for="latitude">Location</label><br />
+					<div class="join">
+						<input
+							class="join-item btn btn-neutral"
+							type="radio"
+							name="type"
+							id="visited"
+							value="visited"
+							aria-label="Visited"
+							checked={newAdventure.type === 'visited'}
+							on:click={() => (type = 'visited')}
+						/>
+						<input
+							class="join-item btn btn-neutral"
+							type="radio"
+							name="type"
+							id="planned"
+							value="planned"
+							aria-label="Planned"
+							checked={newAdventure.type === 'planned'}
+							on:click={() => (type = 'planned')}
+						/>
+					</div>
+
+					<div>
+						<label for="date">Date</label><br />
+						<input
+							type="date"
+							id="date"
+							name="date"
+							min={startDate || ''}
+							max={endDate || ''}
+							bind:value={newAdventure.date}
+							class="input input-bordered w-full"
+						/>
+					</div>
+					<div>
+						<label for="description">Description</label><br />
+						<textarea
+							id="description"
+							name="description"
+							bind:value={newAdventure.description}
+							class="textarea textarea-bordered w-full h-32"
+						></textarea>
+					</div>
+					<div>
+						<label for="activity_types">Activity Types</label><br />
+						<input
+							type="text"
+							id="activity_types"
+							name="activity_types"
+							hidden
+							bind:value={newAdventure.activity_types}
+							class="input input-bordered w-full"
+						/>
+						<ActivityComplete bind:activities={newAdventure.activity_types} />
+					</div>
+					<div>
+						<label for="rating"
+							>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label
+						><br />
+						<input
+							type="number"
+							min="0"
+							max="5"
+							hidden
+							bind:value={newAdventure.rating}
+							id="rating"
+							name="rating"
+							class="input input-bordered w-full max-w-xs mt-1"
+						/>
+						<div class="rating -ml-3 mt-1">
 							<input
-								type="text"
-								id="location"
-								name="location"
-								bind:value={newAdventure.location}
-								class="input input-bordered w-full"
+								type="radio"
+								name="rating-2"
+								class="rating-hidden"
+								checked={Number.isNaN(newAdventure.rating)}
 							/>
-						</div>
-						<div>
-							<form on:submit={geocode}>
-								<input
-									type="text"
-									placeholder="Seach for a location"
-									class="input input-bordered w-full max-w-xs"
-									id="search"
-									name="search"
-									bind:value={query}
-								/>
-								<button type="submit">Search</button>
-							</form>
-							{#if places.length > 0}
-								<div class="mt-4">
-									<h3 class="font-bold text-lg mb-4">Search Results</h3>
-									<ul>
-										{#each places as place}
-											<li>
-												<button
-													type="button"
-													class="btn btn-neutral mb-2"
-													on:click={() => {
-														markers = [
-															{
-																lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
-																location: place.display_name,
-																name: place.name,
-																activity_type: place.type
-															}
-														];
-													}}
-												>
-													{place.display_name}
-												</button>
-											</li>
-										{/each}
-									</ul>
-								</div>
-							{:else}
-								<p class="text-error text-lg">No results found</p>
+							<input
+								type="radio"
+								name="rating-2"
+								class="mask mask-star-2 bg-orange-400"
+								on:click={() => (newAdventure.rating = 1)}
+							/>
+							<input
+								type="radio"
+								name="rating-2"
+								class="mask mask-star-2 bg-orange-400"
+								on:click={() => (newAdventure.rating = 2)}
+							/>
+							<input
+								type="radio"
+								name="rating-2"
+								class="mask mask-star-2 bg-orange-400"
+								on:click={() => (newAdventure.rating = 3)}
+							/>
+							<input
+								type="radio"
+								name="rating-2"
+								class="mask mask-star-2 bg-orange-400"
+								on:click={() => (newAdventure.rating = 4)}
+							/>
+							<input
+								type="radio"
+								name="rating-2"
+								class="mask mask-star-2 bg-orange-400"
+								on:click={() => (newAdventure.rating = 5)}
+							/>
+							{#if newAdventure.rating}
+								<button
+									type="button"
+									class="btn btn-sm btn-error ml-2"
+									on:click={() => (newAdventure.rating = NaN)}
+								>
+									Remove
+								</button>
 							{/if}
 						</div>
 					</div>
+					<div>
+						<!-- link -->
+						<div>
+							<label for="link">Link</label><br />
+							<input
+								type="text"
+								id="link"
+								name="link"
+								bind:value={newAdventure.link}
+								class="input input-bordered w-full"
+							/>
+						</div>
+					</div>
+					<div>
+						<div>
+							<div>
+								<label for="is_public"
+									>Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
+								><br />
+								<input
+									type="checkbox"
+									class="toggle toggle-primary"
+									id="is_public"
+									name="is_public"
+									bind:checked={newAdventure.is_public}
+								/>
+							</div>
+							{#if newAdventure.is_public}
+								<p>
+									The link to this adventure will be copied to your clipboard once it is created!
+								</p>
+							{/if}
+						</div>
+						<!-- </div> -->
+					</div>
+					<div class="divider"></div>
+					<h2 class="text-2xl font-semibold mb-2 mt-4">Location Information</h2>
+					<!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> -->
+					<div>
+						<label for="latitude">Location</label><br />
+						<input
+							type="text"
+							id="location"
+							name="location"
+							bind:value={newAdventure.location}
+							class="input input-bordered w-full"
+						/>
+					</div>
+					<div>
+						<form on:submit={geocode} class="mt-2">
+							<input
+								type="text"
+								placeholder="Seach for a location"
+								class="input input-bordered w-full max-w-xs"
+								id="search"
+								name="search"
+								bind:value={query}
+							/>
+							<button class="btn btn-neutral -mt-1" type="submit">Search</button>
+						</form>
+					</div>
+					{#if places.length > 0}
+						<div class="mt-4 max-w-full">
+							<h3 class="font-bold text-lg mb-4">Search Results</h3>
+
+							<div class="flex flex-wrap">
+								{#each places as place}
+									<button
+										type="button"
+										class="btn btn-neutral mb-2 mr-2 max-w-full break-words whitespace-normal text-left"
+										on:click={() => {
+											markers = [
+												{
+													lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
+													location: place.display_name,
+													name: place.name,
+													activity_type: place.type
+												}
+											];
+										}}
+									>
+										{place.display_name}
+									</button>
+								{/each}
+							</div>
+						</div>
+					{:else}
+						<p class="text-error text-lg">No results found</p>
+					{/if}
 					<div>
 						<MapLibre
 							style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"