From 7c68dc839ad7cca930cdadd8ab8998617e216c56 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Thu, 19 Dec 2024 18:46:52 -0500
Subject: [PATCH] Add geographic coordinates to Transportation model and update
 related components

---
 ...portation_destination_latitude_and_more.py |  33 +
 backend/server/adventures/models.py           |   4 +
 backend/server/adventures/serializers.py      |   2 +-
 frontend/src/lib/components/AboutModal.svelte | 173 ++++--
 .../src/lib/components/MarkdownEditor.svelte  |   3 +-
 .../lib/components/TransportationCard.svelte  |  75 ++-
 .../lib/components/TransportationModal.svelte | 562 ++++++++++++++++++
 frontend/src/lib/types.ts                     |   6 +-
 frontend/src/locales/en.json                  |  10 +
 .../src/routes/collections/[id]/+page.svelte  |  70 +--
 frontend/src/routes/settings/+page.svelte     | 376 ++++++------
 11 files changed, 1025 insertions(+), 289 deletions(-)
 create mode 100644 backend/server/adventures/migrations/0015_transportation_destination_latitude_and_more.py
 create mode 100644 frontend/src/lib/components/TransportationModal.svelte

diff --git a/backend/server/adventures/migrations/0015_transportation_destination_latitude_and_more.py b/backend/server/adventures/migrations/0015_transportation_destination_latitude_and_more.py
new file mode 100644
index 0000000..7971839
--- /dev/null
+++ b/backend/server/adventures/migrations/0015_transportation_destination_latitude_and_more.py
@@ -0,0 +1,33 @@
+# Generated by Django 5.0.8 on 2024-12-19 17:16
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('adventures', '0014_alter_category_unique_together'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='transportation',
+            name='destination_latitude',
+            field=models.DecimalField(blank=True, decimal_places=6, max_digits=9, null=True),
+        ),
+        migrations.AddField(
+            model_name='transportation',
+            name='destination_longitude',
+            field=models.DecimalField(blank=True, decimal_places=6, max_digits=9, null=True),
+        ),
+        migrations.AddField(
+            model_name='transportation',
+            name='origin_latitude',
+            field=models.DecimalField(blank=True, decimal_places=6, max_digits=9, null=True),
+        ),
+        migrations.AddField(
+            model_name='transportation',
+            name='origin_longitude',
+            field=models.DecimalField(blank=True, decimal_places=6, max_digits=9, null=True),
+        ),
+    ]
diff --git a/backend/server/adventures/models.py b/backend/server/adventures/models.py
index a8460d7..98ae268 100644
--- a/backend/server/adventures/models.py
+++ b/backend/server/adventures/models.py
@@ -167,6 +167,10 @@ class Transportation(models.Model):
     end_date = models.DateTimeField(blank=True, null=True)
     flight_number = models.CharField(max_length=100, blank=True, null=True)
     from_location = models.CharField(max_length=200, blank=True, null=True)
+    origin_latitude = models.DecimalField(max_digits=9, decimal_places=6, null=True, blank=True)
+    origin_longitude = models.DecimalField(max_digits=9, decimal_places=6, null=True, blank=True)
+    destination_latitude = models.DecimalField(max_digits=9, decimal_places=6, null=True, blank=True)
+    destination_longitude = models.DecimalField(max_digits=9, decimal_places=6, null=True, blank=True)
     to_location = models.CharField(max_length=200, blank=True, null=True)
     is_public = models.BooleanField(default=False)
     collection = models.ForeignKey('Collection', on_delete=models.CASCADE, blank=True, null=True)
diff --git a/backend/server/adventures/serializers.py b/backend/server/adventures/serializers.py
index 9b538ed..45a2141 100644
--- a/backend/server/adventures/serializers.py
+++ b/backend/server/adventures/serializers.py
@@ -170,7 +170,7 @@ class TransportationSerializer(CustomModelSerializer):
         fields = [
             'id', 'user_id', 'type', 'name', 'description', 'rating', 
             'link', 'date', 'flight_number', 'from_location', 'to_location', 
-            'is_public', 'collection', 'created_at', 'updated_at', 'end_date'
+            'is_public', 'collection', 'created_at', 'updated_at', 'end_date', 'origin_latitude', 'origin_longitude', 'destination_latitude', 'destination_longitude'
         ]
         read_only_fields = ['id', 'created_at', 'updated_at', 'user_id']
 
diff --git a/frontend/src/lib/components/AboutModal.svelte b/frontend/src/lib/components/AboutModal.svelte
index 60faa89..7b8fbf2 100644
--- a/frontend/src/lib/components/AboutModal.svelte
+++ b/frontend/src/lib/components/AboutModal.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
-	const dispatch = createEventDispatcher();
 	import { onMount } from 'svelte';
-	let modal: HTMLDialogElement;
 	import { t } from 'svelte-i18n';
 	import { appVersion, copyrightYear, versionChangelog } from '$lib/config';
 
+	const dispatch = createEventDispatcher();
+	let modal: HTMLDialogElement;
+
 	onMount(() => {
-		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
+		modal = document.getElementById('about_modal') as HTMLDialogElement;
 		if (modal) {
 			modal.showModal();
 		}
@@ -24,56 +25,126 @@
 	}
 </script>
 
-<dialog id="my_modal_1" class="modal">
-	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<dialog id="about_modal" class="modal backdrop-blur-md bg-opacity-70">
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-	<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
-		<h3 class="font-bold text-lg">
-			{$t('about.about')} AdventureLog<span class=" inline-block"
-				><img src="/favicon.png" alt="Map Logo" class="w-10 -mb-3 ml-2" /></span
+	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+	<div
+		class="modal-box rounded-xl shadow-lg backdrop-blur-lg bg-white/80 dark:bg-gray-900/80 transition-transform duration-300 ease-out transform scale-100"
+		role="dialog"
+		on:keydown={handleKeydown}
+		tabindex="0"
+	>
+		<!-- Branding -->
+		<div class="text-center">
+			<h3
+				class="text-2xl font-extrabold text-gray-800 dark:text-white flex items-center justify-center"
 			>
-		</h3>
-		<p class="py-1">
-			AdventureLog <a
-				target="_blank"
-				rel="noopener noreferrer"
-				class="text-primary-500 underline"
-				href={versionChangelog}>{appVersion}</a
-			>
-		</p>
-		<p class="py-1">
-			© {copyrightYear}
-			<a
-				href="https://seanmorley.com"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="text-primary-500 underline">Sean Morley</a
-			>
-		</p>
-		<p class="py-1">{$t('about.license')}</p>
-		<p class="py-1">
-			<a
-				href="https://github.com/seanmorley15/AdventureLog"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="text-primary-500 underline">{$t('about.source_code')}</a
-			>
-		</p>
-		<p class="py-1">{$t('about.message')}</p>
-		<div class="divider"></div>
-		<h3 class="font-bold text-md">{$t('about.oss_attributions')}</h3>
-		<p class="py-1 mb-4">
-			{$t('about.nominatim_1')}
-			<a
-				target="_blank"
-				rel="noopener noreferrer"
-				class="text-primary-500 underline"
-				href="https://operations.osmfoundation.org/policies/nominatim/">OpenStreepMap</a
-			>. {$t('about.nominatim_2')}
-			<br />
-			{$t('about.other_attributions')}
-		</p>
+				{$t('about.about')} AdventureLog
+				<img src="/favicon.png" alt="Map Logo" class="w-12 h-12 ml-3 inline-block" />
+			</h3>
+			<p class="mt-2 text-gray-500 dark:text-gray-300 text-sm">
+				AdventureLog
+				<a
+					href={versionChangelog}
+					target="_blank"
+					rel="noopener noreferrer"
+					class="text-primary hover:underline"
+				>
+					{appVersion}
+				</a>
+			</p>
+		</div>
 
-		<button class="btn btn-primary" on:click={close}>{$t('about.close')}</button>
+		<!-- Links and Details -->
+		<div class="mt-4 text-center">
+			<p class="text-sm text-gray-600 dark:text-gray-400">
+				© {copyrightYear}
+				<a
+					href="https://seanmorley.com"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="text-primary hover:underline"
+				>
+					Sean Morley
+				</a>
+			</p>
+			<p class="text-sm text-gray-600 dark:text-gray-400">{$t('about.license')}</p>
+			<p class="text-sm text-gray-600 dark:text-gray-400">
+				<a
+					href="https://github.com/seanmorley15/AdventureLog"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="text-primary hover:underline"
+				>
+					{$t('about.source_code')}
+				</a>
+			</p>
+			<p class="text-sm text-gray-600 dark:text-gray-400">{$t('about.message')}</p>
+		</div>
+
+		<!-- Divider -->
+		<div class="my-6 border-t border-gray-200 dark:border-gray-700"></div>
+
+		<!-- OSS Acknowledgments -->
+		<div class="text-left">
+			<h3 class="text-lg font-semibold text-gray-800 dark:text-white">
+				{$t('about.oss_attributions')}
+			</h3>
+			<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
+				{$t('about.nominatim_1')}
+				<a
+					href="https://operations.osmfoundation.org/policies/nominatim/"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="text-primary hover:underline"
+				>
+					OpenStreetMap
+				</a>
+				. {$t('about.nominatim_2')}
+			</p>
+			<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">{$t('about.other_attributions')}</p>
+		</div>
+
+		<!-- Close Button -->
+		<div class="flex justify-center mt-6">
+			<button
+				class="px-6 py-2 text-sm font-medium text-white bg-primary rounded-full shadow-md hover:shadow-lg hover:scale-105 transform transition"
+				on:click={close}
+			>
+				{$t('about.close')}
+			</button>
+		</div>
 	</div>
 </dialog>
+
+<style>
+	.modal {
+		display: grid;
+		place-items: center;
+		background: rgba(0, 0, 0, 0.5);
+		animation: fadeIn 0.3s ease-in-out;
+	}
+	.modal-box {
+		max-width: 600px;
+		padding: 2rem;
+		animation: slideUp 0.4s ease-out;
+	}
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+	@keyframes slideUp {
+		from {
+			transform: translateY(20%);
+			opacity: 0;
+		}
+		to {
+			transform: translateY(0);
+			opacity: 1;
+		}
+	}
+</style>
diff --git a/frontend/src/lib/components/MarkdownEditor.svelte b/frontend/src/lib/components/MarkdownEditor.svelte
index 6ed5914..a280d7e 100644
--- a/frontend/src/lib/components/MarkdownEditor.svelte
+++ b/frontend/src/lib/components/MarkdownEditor.svelte
@@ -3,6 +3,7 @@
 	import { t } from 'svelte-i18n';
 
 	export let text: string | null | undefined = ''; // Markdown text
+	export let editor_height: string = 'h-64'; // Editor height
 	let is_preview: boolean = false; // Toggle between Edit and Preview mode
 
 	// Function to parse markdown to HTML
@@ -46,7 +47,7 @@
 	<!-- Markdown Editor -->
 	{#if !is_preview}
 		<textarea
-			class="textarea textarea-bordered resize-none h-64 w-full"
+			class="textarea textarea-bordered resize-none {editor_height}  w-full"
 			bind:this={editorRef}
 			bind:value={text}
 			placeholder={$t('adventures.md_instructions')}
diff --git a/frontend/src/lib/components/TransportationCard.svelte b/frontend/src/lib/components/TransportationCard.svelte
index 20ee433..f24afeb 100644
--- a/frontend/src/lib/components/TransportationCard.svelte
+++ b/frontend/src/lib/components/TransportationCard.svelte
@@ -5,8 +5,7 @@
 	import type { Collection, Transportation, User } from '$lib/types';
 	import { addToast } from '$lib/toasts';
 	import { t } from 'svelte-i18n';
-
-	import ArrowDownThick from '~icons/mdi/arrow-down-thick';
+	// import ArrowDownThick from '~icons/mdi/arrow-down-thick';
 
 	const dispatch = createEventDispatcher();
 
@@ -37,35 +36,67 @@
 <div
 	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl"
 >
-	<div class="card-body">
-		<h2 class="card-title overflow-ellipsis">{transportation.name}</h2>
-		<div class="badge badge-secondary">{$t(`transportation.modes.${transportation.type}`)}</div>
-		<div>
+	<div class="card-body space-y-4">
+		<!-- Title and Type -->
+		<div class="flex items-center justify-between">
+			<h2 class="card-title text-lg font-semibold truncate">{transportation.name}</h2>
+			<div class="badge badge-secondary">
+				{$t(`transportation.modes.${transportation.type}`)}
+			</div>
+		</div>
+
+		<!-- Locations -->
+		<div class="space-y-2">
 			{#if transportation.from_location}
-				<p class="break-words text-wrap">{transportation.from_location}</p>
+				<div class="flex items-center gap-2">
+					<span class="font-medium text-sm">{$t('adventures.from')}:</span>
+					<p class="break-words">{transportation.from_location}</p>
+				</div>
 			{/if}
 			{#if transportation.to_location}
-				<ArrowDownThick class="w-6 h-6" />
-				<p class="break-words text-wrap">{transportation.to_location}</p>
-			{/if}
-		</div>
-		<div>
-			{#if transportation.date}
-				<p>{new Date(transportation.date).toLocaleString(undefined, { timeZone: 'UTC' })}</p>
-			{/if}
-			{#if transportation.end_date}
-				<ArrowDownThick class="w-6 h-6" />
-				<p>{new Date(transportation.end_date).toLocaleString(undefined, { timeZone: 'UTC' })}</p>
+				<!-- <ArrowDownThick class="w-4 h-4" /> -->
+				<div class="flex items-center gap-2">
+					<span class="font-medium text-sm">{$t('adventures.to')}:</span>
+
+					<p class="break-words">{transportation.to_location}</p>
+				</div>
 			{/if}
 		</div>
 
+		<!-- Dates -->
+		<div class="space-y-2">
+			{#if transportation.date}
+				<div class="flex items-center gap-2">
+					<span class="font-medium text-sm">{$t('adventures.start')}:</span>
+					<p>{new Date(transportation.date).toLocaleString(undefined, { timeZone: 'UTC' })}</p>
+				</div>
+			{/if}
+			{#if transportation.end_date}
+				<div class="flex items-center gap-2">
+					<span class="font-medium text-sm">{$t('adventures.end')}:</span>
+					<p>{new Date(transportation.end_date).toLocaleString(undefined, { timeZone: 'UTC' })}</p>
+				</div>
+			{/if}
+		</div>
+
+		<!-- Actions -->
 		{#if transportation.user_id == user?.uuid || (collection && user && collection.shared_with.includes(user.uuid))}
 			<div class="card-actions justify-end">
-				<button on:click={deleteTransportation} class="btn btn-secondary"
-					><TrashCanOutline class="w-5 h-5 mr-1" /></button
+				<button
+					class="btn btn-primary btn-sm flex items-center gap-1"
+					on:click={editTransportation}
+					title="Edit"
 				>
-				<button class="btn btn-primary" on:click={editTransportation}>
-					<FileDocumentEdit class="w-6 h-6" />
+					<FileDocumentEdit class="w-5 h-5" />
+					<span>{$t('transportation.edit')}</span>
+				</button>
+				<button
+					on:click={deleteTransportation}
+					class="btn btn-secondary btn-sm flex items-center gap-1"
+					title="Delete"
+				>
+					<TrashCanOutline class="w-5 h-5" />
+					<span>{$t('adventures.delete')}</span>
 				</button>
 			</div>
 		{/if}
diff --git a/frontend/src/lib/components/TransportationModal.svelte b/frontend/src/lib/components/TransportationModal.svelte
new file mode 100644
index 0000000..41515e1
--- /dev/null
+++ b/frontend/src/lib/components/TransportationModal.svelte
@@ -0,0 +1,562 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import type { Collection, Transportation } from '$lib/types';
+	const dispatch = createEventDispatcher();
+	import { onMount } from 'svelte';
+	import { addToast } from '$lib/toasts';
+	let modal: HTMLDialogElement;
+	import { t } from 'svelte-i18n';
+
+	import MarkdownEditor from './MarkdownEditor.svelte';
+	import { appVersion } from '$lib/config';
+	import { DefaultMarker, MapLibre } from 'svelte-maplibre';
+
+	export let collection: Collection;
+	export let transportationToEdit: Transportation | null = null;
+
+	function toLocalDatetime(value: string | null): string {
+		if (!value) return '';
+		const date = new Date(value);
+		return date.toISOString().slice(0, 16); // Format: YYYY-MM-DDTHH:mm
+	}
+
+	let transportation: Transportation = {
+		id: transportationToEdit?.id || '',
+		type: transportationToEdit?.type || '',
+		name: transportationToEdit?.name || '',
+		description: transportationToEdit?.description || '',
+		date: transportationToEdit?.date ? toLocalDatetime(transportationToEdit.date) : null,
+		end_date: transportationToEdit?.end_date
+			? toLocalDatetime(transportationToEdit.end_date)
+			: null,
+		rating: transportationToEdit?.rating || 0,
+		link: transportationToEdit?.link || '',
+		flight_number: transportationToEdit?.flight_number || '',
+		from_location: transportationToEdit?.from_location || '',
+		to_location: transportationToEdit?.to_location || '',
+		user_id: transportationToEdit?.user_id || '',
+		is_public: transportationToEdit?.is_public || false,
+		collection: transportationToEdit?.collection || collection.id,
+		created_at: transportationToEdit?.created_at || '',
+		updated_at: transportationToEdit?.updated_at || '',
+		origin_latitude: transportationToEdit?.origin_latitude || NaN,
+		origin_longitude: transportationToEdit?.origin_longitude || NaN,
+		destination_latitude: transportationToEdit?.destination_latitude || NaN,
+		destination_longitude: transportationToEdit?.destination_longitude || NaN
+	};
+
+	let fullStartDate: string = '';
+	let fullEndDate: string = '';
+
+	let starting_airport: string = '';
+	let ending_airport: string = '';
+
+	if (collection.start_date && collection.end_date) {
+		fullStartDate = `${collection.start_date}T00:00`;
+		fullEndDate = `${collection.end_date}T23:59`;
+	}
+
+	$: {
+		if (!transportation.rating) {
+			transportation.rating = NaN;
+		}
+	}
+
+	console.log(transportation);
+
+	onMount(async () => {
+		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
+		if (modal) {
+			modal.showModal();
+		}
+	});
+
+	function close() {
+		dispatch('close');
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			close();
+		}
+	}
+
+	async function geocode(e: Event | null) {
+		if (e) {
+			e.preventDefault();
+		}
+
+		const fetchLocation = async (query: string) => {
+			let res = await fetch(`https://nominatim.openstreetmap.org/search?q=${query}&format=jsonv2`, {
+				headers: {
+					'User-Agent': `AdventureLog / ${appVersion} `
+				}
+			});
+			let data = await res.json();
+			return data;
+		};
+
+		let startingData = null;
+		let endingData = null;
+
+		if (transportation.type == 'plane') {
+			if (!starting_airport || !ending_airport) {
+				alert($t('adventures.no_location'));
+				return;
+			}
+			startingData = await fetchLocation(starting_airport + ' Airport');
+			endingData = await fetchLocation(ending_airport + ' Airport');
+		} else {
+			if (!transportation.from_location || !transportation.to_location) {
+				alert($t('adventures.no_location'));
+				return;
+			}
+			startingData = await fetchLocation(transportation?.from_location || '');
+			endingData = await fetchLocation(transportation?.to_location || '');
+		}
+
+		if (startingData.length === 0 || endingData.length === 0) {
+			alert($t('adventures.no_location_found'));
+			return;
+		}
+
+		if (transportation.type == 'plane') {
+			transportation.from_location = startingData[0].name + ' (' + starting_airport + ')';
+			transportation.to_location = endingData[0].name + ' (' + ending_airport + ')';
+		} else {
+			transportation.from_location = startingData[0].display_name;
+			transportation.to_location = endingData[0].display_name;
+		}
+		transportation.origin_latitude = startingData[0].lat;
+		transportation.origin_longitude = startingData[0].lon;
+		transportation.destination_latitude = endingData[0].lat;
+		transportation.destination_longitude = endingData[0].lon;
+	}
+
+	async function handleSubmit(event: Event) {
+		event.preventDefault();
+		console.log(transportation);
+
+		// If the user has entered airport codes, but not location names, fetch the location names
+		if (
+			starting_airport &&
+			ending_airport &&
+			(!transportation.from_location || !transportation.to_location)
+		) {
+			transportation.from_location = starting_airport;
+			transportation.to_location = ending_airport;
+		}
+
+		// Round coordinates to 6 decimal places
+		if (transportation.origin_latitude) {
+			transportation.origin_latitude = Math.round(transportation.origin_latitude * 1e6) / 1e6;
+		}
+		if (transportation.origin_longitude) {
+			transportation.origin_longitude = Math.round(transportation.origin_longitude * 1e6) / 1e6;
+		}
+		if (transportation.destination_latitude) {
+			transportation.destination_latitude =
+				Math.round(transportation.destination_latitude * 1e6) / 1e6;
+		}
+		if (transportation.destination_longitude) {
+			transportation.destination_longitude =
+				Math.round(transportation.destination_longitude * 1e6) / 1e6;
+		}
+
+		if (transportation.id === '') {
+			let res = await fetch('/api/transportations', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(transportation)
+			});
+			let data = await res.json();
+			if (data.id) {
+				transportation = data as Transportation;
+				addToast('success', $t('adventures.adventure_created'));
+				dispatch('save', transportation);
+			} else {
+				console.error(data);
+				addToast('error', $t('adventures.adventure_create_error'));
+			}
+		} else {
+			let res = await fetch(`/api/transportations/${transportation.id}`, {
+				method: 'PATCH',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(transportation)
+			});
+			let data = await res.json();
+			if (data.id) {
+				transportation = data as Transportation;
+				addToast('success', $t('adventures.adventure_updated'));
+				dispatch('save', transportation);
+			} else {
+				addToast('error', $t('adventures.adventure_update_error'));
+			}
+		}
+	}
+</script>
+
+<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-3xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
+		<h3 class="font-bold text-2xl">
+			{transportationToEdit
+				? $t('transportation.edit_transportation')
+				: $t('transportation.new_transportation')}
+		</h3>
+		<div class="modal-action items-center">
+			<form method="post" style="width: 100%;" on:submit={handleSubmit}>
+				<!-- Basic Information Section -->
+				<div class="collapse collapse-plus bg-base-200 mb-4">
+					<input type="checkbox" checked />
+					<div class="collapse-title text-xl font-medium">
+						{$t('adventures.basic_information')}
+					</div>
+					<div class="collapse-content">
+						<!-- Type selection -->
+						<div>
+							<label for="type">
+								{$t('transportation.type')}<span class="text-red-500">*</span>
+							</label>
+							<div>
+								<select
+									class="select select-bordered w-full max-w-xs"
+									name="type"
+									id="type"
+									bind:value={transportation.type}
+								>
+									<option disabled selected>{$t('transportation.type')}</option>
+									<option value="car">{$t('transportation.modes.car')}</option>
+									<option value="plane">{$t('transportation.modes.plane')}</option>
+									<option value="train">{$t('transportation.modes.train')}</option>
+									<option value="bus">{$t('transportation.modes.bus')}</option>
+									<option value="boat">{$t('transportation.modes.boat')}</option>
+									<option value="bike">{$t('transportation.modes.bike')}</option>
+									<option value="walking">{$t('transportation.modes.walking')}</option>
+									<option value="other">{$t('transportation.modes.other')}</option>
+								</select>
+							</div>
+						</div>
+						<!-- Name -->
+						<div>
+							<label for="name">
+								{$t('adventures.name')}<span class="text-red-500">*</span>
+							</label>
+							<input
+								type="text"
+								id="name"
+								name="name"
+								bind:value={transportation.name}
+								class="input input-bordered w-full"
+								required
+							/>
+						</div>
+						<!-- Description -->
+						<div>
+							<label for="description">{$t('adventures.description')}</label><br />
+							<MarkdownEditor bind:text={transportation.description} editor_height={'h-32'} />
+						</div>
+						<!-- Rating -->
+						<div>
+							<label for="rating">{$t('adventures.rating')}</label><br />
+							<input
+								type="number"
+								min="0"
+								max="5"
+								hidden
+								bind:value={transportation.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(transportation.rating)}
+								/>
+								<input
+									type="radio"
+									name="rating-2"
+									class="mask mask-star-2 bg-orange-400"
+									on:click={() => (transportation.rating = 1)}
+									checked={transportation.rating === 1}
+								/>
+								<input
+									type="radio"
+									name="rating-2"
+									class="mask mask-star-2 bg-orange-400"
+									on:click={() => (transportation.rating = 2)}
+									checked={transportation.rating === 2}
+								/>
+								<input
+									type="radio"
+									name="rating-2"
+									class="mask mask-star-2 bg-orange-400"
+									on:click={() => (transportation.rating = 3)}
+									checked={transportation.rating === 3}
+								/>
+								<input
+									type="radio"
+									name="rating-2"
+									class="mask mask-star-2 bg-orange-400"
+									on:click={() => (transportation.rating = 4)}
+									checked={transportation.rating === 4}
+								/>
+								<input
+									type="radio"
+									name="rating-2"
+									class="mask mask-star-2 bg-orange-400"
+									on:click={() => (transportation.rating = 5)}
+									checked={transportation.rating === 5}
+								/>
+								{#if transportation.rating}
+									<button
+										type="button"
+										class="btn btn-sm btn-error ml-2"
+										on:click={() => (transportation.rating = NaN)}
+									>
+										{$t('adventures.remove')}
+									</button>
+								{/if}
+							</div>
+						</div>
+						<!-- Link -->
+						<div>
+							<label for="link">{$t('adventures.link')}</label>
+							<input
+								type="url"
+								id="link"
+								name="link"
+								bind:value={transportation.link}
+								class="input input-bordered w-full"
+							/>
+						</div>
+					</div>
+				</div>
+				<div class="collapse collapse-plus bg-base-200 mb-4">
+					<input type="checkbox" checked />
+					<div class="collapse-title text-xl font-medium">
+						{$t('adventures.date_information')}
+					</div>
+					<div class="collapse-content">
+						<!-- Start Date -->
+						<div>
+							<label for="date">
+								{$t('adventures.start_date')}
+							</label>
+							<div>
+								<input
+									type="datetime-local"
+									id="date"
+									name="date"
+									bind:value={transportation.date}
+									min={fullStartDate || ''}
+									max={fullEndDate || ''}
+									class="input input-bordered w-full max-w-xs mt-1"
+								/>
+							</div>
+						</div>
+						<!-- End Date -->
+						{#if transportation.date}
+							<div>
+								<label for="end_date">
+									{$t('adventures.end_date')}
+								</label>
+								<div>
+									<input
+										type="datetime-local"
+										id="end_date"
+										name="end_date"
+										min={fullStartDate || ''}
+										max={fullEndDate || ''}
+										bind:value={transportation.end_date}
+										class="input input-bordered w-full max-w-xs mt-1"
+									/>
+								</div>
+							</div>
+						{/if}
+					</div>
+				</div>
+
+				<!-- Flight Information -->
+
+				<div class="collapse collapse-plus bg-base-200 mb-4">
+					<input type="checkbox" checked />
+					<div class="collapse-title text-xl font-medium">
+						{$t('adventures.flight_information')}
+					</div>
+
+					<div class="collapse-content">
+						{#if transportation?.type == 'plane'}
+							<!-- Flight Number -->
+							<div class="mb-4">
+								<label for="flight_number" class="label">
+									<span class="label-text">{$t('transportation.flight_number')}</span>
+								</label>
+								<input
+									type="text"
+									id="flight_number"
+									name="flight_number"
+									bind:value={transportation.flight_number}
+									class="input input-bordered w-full"
+								/>
+							</div>
+
+							<!-- Starting Airport -->
+							{#if !transportation.from_location || !transportation.to_location}
+								<div class="mb-4">
+									<label for="starting_airport" class="label">
+										<span class="label-text">{$t('adventures.starting_airport')}</span>
+									</label>
+									<input
+										type="text"
+										id="starting_airport"
+										bind:value={starting_airport}
+										name="starting_airport"
+										class="input input-bordered w-full"
+										placeholder="Enter starting airport code (e.g., JFK)"
+									/>
+									<label for="ending_airport" class="label">
+										<span class="label-text">{$t('adventures.ending_airport')}</span>
+									</label>
+									<input
+										type="text"
+										id="ending_airport"
+										bind:value={ending_airport}
+										name="ending_airport"
+										class="input input-bordered w-full"
+										placeholder="Enter ending airport code (e.g., LAX)"
+									/>
+									<button type="button" class="btn btn-primary mt-2" on:click={geocode}>
+										Fetch Location Information
+									</button>
+								</div>
+							{/if}
+
+							{#if transportation.from_location && transportation.to_location}
+								<!-- From Location -->
+								<div class="mb-4">
+									<label for="from_location" class="label">
+										<span class="label-text">{$t('transportation.from_location')}</span>
+									</label>
+									<input
+										type="text"
+										id="from_location"
+										name="from_location"
+										bind:value={transportation.from_location}
+										class="input input-bordered w-full"
+									/>
+								</div>
+								<!-- To Location -->
+								<div class="mb-4">
+									<label for="to_location" class="label">
+										<span class="label-text">{$t('transportation.to_location')}</span>
+									</label>
+									<input
+										type="text"
+										id="to_location"
+										name="to_location"
+										bind:value={transportation.to_location}
+										class="input input-bordered w-full"
+									/>
+								</div>
+							{/if}
+						{:else}
+							<!-- From Location -->
+							<div class="mb-4">
+								<label for="from_location" class="label">
+									<span class="label-text">{$t('transportation.from_location')}</span>
+								</label>
+								<input
+									type="text"
+									id="from_location"
+									name="from_location"
+									bind:value={transportation.from_location}
+									class="input input-bordered w-full"
+								/>
+							</div>
+							<!-- To Location -->
+							<div class="mb-4">
+								<label for="to_location" class="label">
+									<span class="label-text">{$t('transportation.to_location')}</span>
+								</label>
+								<input
+									type="text"
+									id="to_location"
+									name="to_location"
+									bind:value={transportation.to_location}
+									class="input input-bordered w-full"
+								/>
+							</div>
+							<button type="button" class="btn btn-primary mt-2" on:click={geocode}>
+								Fetch Location Information
+							</button>
+						{/if}
+						<div class="mt-4">
+							<MapLibre
+								style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
+								class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full"
+								standardControls
+							>
+								<!-- MapEvents gives you access to map events even from other components inside the map,
+where you might not have access to the top-level `MapLibre` component. In this case
+it would also work to just use on:click on the MapLibre component itself. -->
+								<!-- @ts-ignore -->
+
+								{#if transportation.origin_latitude && transportation.origin_longitude}
+									<DefaultMarker
+										lngLat={[transportation.origin_longitude, transportation.origin_latitude]}
+									/>
+								{/if}
+								{#if transportation.destination_latitude && transportation.destination_longitude}
+									<DefaultMarker
+										lngLat={[
+											transportation.destination_longitude,
+											transportation.destination_latitude
+										]}
+									/>
+								{/if}
+							</MapLibre>
+							<!-- button to clear to and from location -->
+						</div>
+						{#if transportation.from_location && transportation.to_location}
+							<button
+								type="button"
+								class="btn btn-error btn-sm mt-2"
+								on:click={() => {
+									transportation.from_location = '';
+									transportation.to_location = '';
+									starting_airport = '';
+									ending_airport = '';
+									transportation.origin_latitude = NaN;
+									transportation.origin_longitude = NaN;
+									transportation.destination_latitude = NaN;
+									transportation.destination_longitude = NaN;
+								}}
+							>
+								{$t('adventures.clear_location')}
+							</button>
+						{/if}
+					</div>
+				</div>
+
+				<!-- Form Actions -->
+				<div class="mt-4">
+					<button type="submit" class="btn btn-primary">
+						{$t('adventures.save_next')}
+					</button>
+					<button type="button" class="btn" on:click={close}>
+						{$t('about.close')}
+					</button>
+				</div>
+			</form>
+		</div>
+	</div>
+</dialog>
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index 181017b..aadf545 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -127,8 +127,12 @@ export type Transportation = {
 	flight_number: string | null;
 	from_location: string | null;
 	to_location: string | null;
+	origin_latitude: number | null;
+	origin_longitude: number | null;
+	destination_latitude: number | null;
+	destination_longitude: number | null;
 	is_public: boolean;
-	collection: Collection | null;
+	collection: Collection | null | string;
 	created_at: string; // ISO 8601 date string
 	updated_at: string; // ISO 8601 date string
 };
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 54dc04f..5e46cc0 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -216,8 +216,18 @@
 		"copy_failed": "Copy failed",
 		"show": "Show",
 		"hide": "Hide",
+		"clear_location": "Clear Location",
+		"starting_airport": "Starting Airport",
+		"ending_airport": "Ending Airport",
+		"no_location_found": "No location found",
+		"from": "From",
+		"to": "To",
+		"start": "Start",
+		"end": "End",
 		"emoji_picker": "Emoji Picker",
 		"download_calendar": "Download Calendar",
+		"date_information": "Date Information",
+		"flight_information": "Flight Information",
 		"preview": "Preview",
 		"md_instructions": "Write your markdown here...",
 		"days": "days",
diff --git a/frontend/src/routes/collections/[id]/+page.svelte b/frontend/src/routes/collections/[id]/+page.svelte
index 10bc85b..c0da75c 100644
--- a/frontend/src/routes/collections/[id]/+page.svelte
+++ b/frontend/src/routes/collections/[id]/+page.svelte
@@ -12,8 +12,6 @@
 	import NotFound from '$lib/components/NotFound.svelte';
 	import { DefaultMarker, MapLibre, Popup } from 'svelte-maplibre';
 	import TransportationCard from '$lib/components/TransportationCard.svelte';
-	import EditTransportation from '$lib/components/EditTransportation.svelte';
-	import NewTransportation from '$lib/components/NewTransportation.svelte';
 	import NoteCard from '$lib/components/NoteCard.svelte';
 	import NoteModal from '$lib/components/NoteModal.svelte';
 
@@ -26,6 +24,7 @@
 	import ChecklistCard from '$lib/components/ChecklistCard.svelte';
 	import ChecklistModal from '$lib/components/ChecklistModal.svelte';
 	import AdventureModal from '$lib/components/AdventureModal.svelte';
+	import TransportationModal from '$lib/components/TransportationModal.svelte';
 
 	export let data: PageData;
 	console.log(data);
@@ -108,9 +107,8 @@
 	}
 
 	let adventureToEdit: Adventure | null = null;
-	let transportationToEdit: Transportation;
+	let transportationToEdit: Transportation | null = null;
 	let isAdventureModalOpen: boolean = false;
-	let isTransportationEditModalOpen: boolean = false;
 	let isNoteModalOpen: boolean = false;
 	let noteToEdit: Note | null;
 	let checklistToEdit: Checklist | null;
@@ -122,17 +120,12 @@
 		isAdventureModalOpen = true;
 	}
 
-	function saveNewTransportation(event: CustomEvent<Transportation>) {
-		transportations = transportations.map((transportation) => {
-			if (transportation.id === event.detail.id) {
-				return event.detail;
-			}
-			return transportation;
-		});
-		isTransportationEditModalOpen = false;
+	function editTransportation(event: CustomEvent<Transportation>) {
+		transportationToEdit = event.detail;
+		isShowingTransportationModal = true;
 	}
 
-	function saveOrCreate(event: CustomEvent<Adventure>) {
+	function saveOrCreateAdventure(event: CustomEvent<Adventure>) {
 		if (adventures.find((adventure) => adventure.id === event.detail.id)) {
 			adventures = adventures.map((adventure) => {
 				if (adventure.id === event.detail.id) {
@@ -145,6 +138,22 @@
 		}
 		isAdventureModalOpen = false;
 	}
+
+	function saveOrCreateTransportation(event: CustomEvent<Transportation>) {
+		if (transportations.find((transportation) => transportation.id === event.detail.id)) {
+			// Update existing transportation
+			transportations = transportations.map((transportation) => {
+				if (transportation.id === event.detail.id) {
+					return event.detail;
+				}
+				return transportation;
+			});
+		} else {
+			// Create new transportation
+			transportations = [event.detail, ...transportations];
+		}
+		isShowingTransportationModal = false;
+	}
 </script>
 
 {#if isShowingLinkModal}
@@ -157,13 +166,12 @@
 	/>
 {/if}
 
-{#if isTransportationEditModalOpen}
-	<EditTransportation
+{#if isShowingTransportationModal}
+	<TransportationModal
 		{transportationToEdit}
-		on:close={() => (isTransportationEditModalOpen = false)}
-		on:saveEdit={saveNewTransportation}
-		startDate={collection.start_date}
-		endDate={collection.end_date}
+		on:close={() => (isShowingTransportationModal = false)}
+		on:save={saveOrCreateTransportation}
+		{collection}
 	/>
 {/if}
 
@@ -171,7 +179,7 @@
 	<AdventureModal
 		{adventureToEdit}
 		on:close={() => (isAdventureModalOpen = false)}
-		on:save={saveOrCreate}
+		on:save={saveOrCreateAdventure}
 		{collection}
 	/>
 {/if}
@@ -221,19 +229,6 @@
 	/>
 {/if}
 
-{#if isShowingTransportationModal}
-	<NewTransportation
-		on:close={() => (isShowingTransportationModal = false)}
-		on:add={(event) => {
-			transportations = [event.detail, ...transportations];
-			isShowingTransportationModal = false;
-		}}
-		{collection}
-		startDate={collection.start_date}
-		endDate={collection.end_date}
-	/>
-{/if}
-
 {#if notFound}
 	<div
 		class="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8 -mt-20"
@@ -300,6 +295,8 @@
 						<button
 							class="btn btn-primary"
 							on:click={() => {
+								// Reset the transportation object for creating a new one
+								transportationToEdit = null;
 								isShowingTransportationModal = true;
 								newType = '';
 							}}
@@ -415,10 +412,7 @@
 					on:delete={(event) => {
 						transportations = transportations.filter((t) => t.id != event.detail);
 					}}
-					on:edit={(event) => {
-						transportationToEdit = event.detail;
-						isTransportationEditModalOpen = true;
-					}}
+					on:edit={editTransportation}
 					{collection}
 				/>
 			{/each}
@@ -534,7 +528,7 @@
 							}}
 							on:edit={(event) => {
 								transportationToEdit = event.detail;
-								isTransportationEditModalOpen = true;
+								isShowingTransportationModal = true;
 							}}
 						/>
 					{/each}
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index 2ad898b..0c0b10a 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -7,6 +7,7 @@
 	import { browser } from '$app/environment';
 	import { t } from 'svelte-i18n';
 	import TotpModal from '$lib/components/TOTPModal.svelte';
+	import { appTitle, appVersion } from '$lib/config.js';
 
 	export let data;
 	let user: User;
@@ -154,195 +155,220 @@
 	/>
 {/if}
 
-<h1 class="text-center font-extrabold text-4xl mb-6">{$t('settings.settings_page')}</h1>
-
-<h1 class="text-center font-extrabold text-xl">{$t('settings.account_settings')}</h1>
-<div class="flex justify-center">
-	<form
-		method="post"
-		action="?/changeDetails"
-		use:enhance
-		class="w-full max-w-xs"
-		enctype="multipart/form-data"
-	>
-		<label for="username">{$t('auth.username')}</label>
-		<input
-			bind:value={user.username}
-			name="username"
-			id="username"
-			class="block mb-2 input input-bordered w-full max-w-xs"
-		/><br />
-		<label for="first_name">{$t('auth.first_name')}</label>
-		<input
-			type="text"
-			bind:value={user.first_name}
-			name="first_name"
-			id="first_name"
-			class="block mb-2 input input-bordered w-full max-w-xs"
-		/><br />
-
-		<label for="last_name">{$t('auth.last_name')}</label>
-		<input
-			type="text"
-			bind:value={user.last_name}
-			name="last_name"
-			id="last_name"
-			class="block mb-2 input input-bordered w-full max-w-xs"
-		/><br />
-		<label for="profilePicture">{$t('auth.profile_picture')}</label>
-		<input
-			type="file"
-			name="profile_pic"
-			id="profile_pic"
-			class="file-input file-input-bordered w-full max-w-xs mb-2"
-		/><br />
-		<div class="form-control">
-			<div class="tooltip tooltip-info" data-tip={$t('auth.public_tooltip')}>
-				<label class="label cursor-pointer">
-					<span class="label-text">{$t('auth.public_profile')}</span>
+<div class="container mx-auto p-6 max-w-4xl">
+	<h1 class="text-3xl font-extrabold text-center mb-6">
+		{$t('settings.settings_page')}
+	</h1>
 
+	<!-- Account Settings Section -->
+	<section class="space-y-8">
+		<h2 class="text-2xl font-semibold text-center">
+			{$t('settings.account_settings')}
+		</h2>
+		<div class=" bg-neutral p-6 rounded-lg shadow-md">
+			<form
+				method="post"
+				action="?/changeDetails"
+				use:enhance
+				enctype="multipart/form-data"
+				class="space-y-6"
+			>
+				<div>
+					<label for="username" class="text-sm font-medium">{$t('auth.username')}</label>
 					<input
+						type="text"
+						id="username"
+						name="username"
+						bind:value={user.username}
+						class="block w-full mt-1 input input-bordered input-primary"
+					/>
+				</div>
+
+				<div>
+					<label for="first_name" class="text-sm font-medium">{$t('auth.first_name')}</label>
+					<input
+						type="text"
+						id="first_name"
+						name="first_name"
+						bind:value={user.first_name}
+						class="block w-full mt-1 input input-bordered input-primary"
+					/>
+				</div>
+
+				<div>
+					<label for="last_name" class="text-sm font-medium">{$t('auth.last_name')}</label>
+					<input
+						type="text"
+						id="last_name"
+						name="last_name"
+						bind:value={user.last_name}
+						class="block w-full mt-1 input input-bordered input-primary"
+					/>
+				</div>
+
+				<div>
+					<label for="profile_pic" class="text-sm font-medium">{$t('auth.profile_picture')}</label>
+					<input
+						type="file"
+						id="profile_pic"
+						name="profile_pic"
+						class="file-input file-input-bordered file-input-primary mt-1 w-full"
+					/>
+				</div>
+
+				<div class="flex items-center">
+					<input
+						type="checkbox"
 						id="public_profile"
 						name="public_profile"
-						type="checkbox"
-						class="toggle"
-						checked={user.public_profile}
+						bind:checked={user.public_profile}
+						class="toggle toggle-primary"
 					/>
-				</label>
-			</div>
+					<label for="public_profile" class="ml-2 text-sm">{$t('auth.public_profile')}</label>
+				</div>
+
+				<button class="w-full mt-4 btn btn-primary py-2">{$t('settings.update')}</button>
+			</form>
 		</div>
-		<button class="py-2 mt-2 px-4 btn btn-primary">{$t('settings.update')}</button>
-	</form>
-</div>
+	</section>
 
-{#if $page.form?.message}
-	<div class="text-center text-error mt-4">
-		{$t($page.form.message)}
-	</div>
-{/if}
-
-<h1 class="text-center font-extrabold text-xl mt-4 mb-2">{$t('settings.password_change')}</h1>
-<div class="flex justify-center">
-	<form action="?/changePassword" method="post" class="w-full max-w-xs" use:enhance>
-		<input
-			type="password"
-			name="current_password"
-			placeholder={$t('settings.current_password')}
-			id="current_password"
-			class="block mb-2 input input-bordered w-full max-w-xs"
-		/>
-		<br />
-		<input
-			type="password"
-			name="password1"
-			placeholder={$t('settings.new_password')}
-			id="password1"
-			class="block mb-2 input input-bordered w-full max-w-xs"
-		/>
-		<br />
-		<input
-			type="password"
-			name="password2"
-			id="password2"
-			placeholder={$t('settings.confirm_new_password')}
-			class="block mb-2 input input-bordered w-full max-w-xs"
-		/>
-		<div class="tooltip tooltip-warning" data-tip={$t('settings.password_change_lopout_warning')}>
-			<button class="py-2 px-4 btn btn-primary mt-2">{$t('settings.password_change')}</button>
-		</div>
-		<br />
-	</form>
-</div>
-
-<h1 class="text-center font-extrabold text-xl mt-4 mb-2">{$t('settings.email_change')}</h1>
-
-<div class="flex justify-center mb-4">
-	<div>
-		{#each emails as email}
-			<p class="mb-2">
-				{email.email}
-				{#if email.verified}
-					<div class="badge badge-success">{$t('settings.verified')}</div>
-				{:else}
-					<div class="badge badge-error">{$t('settings.not_verified')}</div>
-				{/if}
-				{#if email.primary}
-					<div class="badge badge-primary">{$t('settings.primary')}</div>
-				{/if}
-				{#if !email.verified}
-					<button class="btn btn-sm btn-secondary ml-2" on:click={() => verifyEmail(email)}
-						>{$t('settings.verify')}</button
+	<!-- Password Change Section -->
+	<section class="space-y-8">
+		<h2 class="text-2xl font-semibold text-center mt-8">
+			{$t('settings.password_change')}
+		</h2>
+		<div class="bg-neutral p-6 rounded-lg shadow-md">
+			<form method="post" action="?/changePassword" use:enhance class="space-y-6">
+				<div>
+					<label for="current_password" class="text-sm font-medium"
+						>{$t('settings.current_password')}</label
 					>
-				{/if}
-				{#if !email.primary}
-					<button class="btn btn-sm btn-secondary ml-2" on:click={() => primaryEmail(email)}
-						>{$t('settings.make_primary')}</button
+					<input
+						type="password"
+						id="current_password"
+						name="current_password"
+						class="block w-full mt-1 input input-bordered input-primary"
+					/>
+				</div>
+
+				<div>
+					<label for="password1" class="text-sm font-medium">{$t('settings.new_password')}</label>
+					<input
+						type="password"
+						id="password1"
+						name="password1"
+						class="block w-full mt-1 input input-bordered input-primary"
+					/>
+				</div>
+
+				<div>
+					<label for="password2" class="text-sm font-medium"
+						>{$t('settings.confirm_new_password')}</label
 					>
-				{/if}
-				<button class="btn btn-sm btn-warning ml-2" on:click={() => removeEmail(email)}
-					>{$t('adventures.remove')}</button
+					<input
+						type="password"
+						id="password2"
+						name="password2"
+						class="block w-full mt-1 input input-bordered input-primary"
+					/>
+				</div>
+
+				<div
+					class="tooltip tooltip-warning"
+					data-tip={$t('settings.password_change_lopout_warning')}
 				>
-			</p>
-		{/each}
-		{#if emails.length === 0}
-			<p>{$t('settings.no_emai_set')}</p>
-		{/if}
-	</div>
-</div>
-
-<div class="flex justify-center mt-4">
-	<form class="w-full max-w-xs" on:submit={addEmail}>
-		<div class="mb-4">
-			<input
-				type="email"
-				name="new_email"
-				placeholder={$t('settings.new_email')}
-				bind:value={new_email}
-				id="new_email"
-				class="block mb-2 input input-bordered w-full max-w-xs"
-			/>
+					<button class="w-full btn btn-primary py-2 mt-4">{$t('settings.password_change')}</button>
+				</div>
+			</form>
 		</div>
-		<div>
-			<button class="py-2 px-4 mb-4 btn btn-primary">{$t('settings.email_change')}</button>
+	</section>
+
+	<!-- Email Change Section -->
+	<section class="space-y-8">
+		<h2 class="text-2xl font-semibold text-center mt-8">
+			{$t('settings.email_change')}
+		</h2>
+		<div class="bg-neutral p-6 rounded-lg shadow-md">
+			<div>
+				{#each emails as email}
+					<div class="flex items-center space-x-2 mb-2">
+						<span>{email.email}</span>
+						{#if email.verified}
+							<div class="badge badge-success">{$t('settings.verified')}</div>
+						{:else}
+							<div class="badge badge-error">{$t('settings.not_verified')}</div>
+						{/if}
+						{#if email.primary}
+							<div class="badge badge-primary">{$t('settings.primary')}</div>
+						{/if}
+						{#if !email.verified}
+							<button class="btn btn-sm btn-secondary" on:click={() => verifyEmail(email)}
+								>{$t('settings.verify')}</button
+							>
+						{/if}
+						{#if !email.primary}
+							<button class="btn btn-sm btn-secondary" on:click={() => primaryEmail(email)}
+								>{$t('settings.make_primary')}</button
+							>
+						{/if}
+						<button class="btn btn-sm btn-warning" on:click={() => removeEmail(email)}
+							>{$t('adventures.remove')}</button
+						>
+					</div>
+				{/each}
+				{#if emails.length === 0}
+					<p class="text-center">{$t('settings.no_email_set')}</p>
+				{/if}
+			</div>
+
+			<form class="mt-4" on:submit={addEmail}>
+				<input
+					type="email"
+					id="new_email"
+					name="new_email"
+					bind:value={new_email}
+					placeholder={$t('settings.new_email')}
+					class="block w-full input input-bordered input-primary"
+				/>
+				<button class="w-full mt-4 btn btn-primary py-2">{$t('settings.email_change')}</button>
+			</form>
 		</div>
-	</form>
+	</section>
+
+	<!-- MFA Section -->
+	<section class="space-y-8">
+		<h2 class="text-2xl font-semibold text-center mt-8">
+			{$t('settings.mfa_page_title')}
+		</h2>
+		<div class="bg-neutral p-6 rounded-lg shadow-md text-center">
+			{#if !data.props.authenticators}
+				<p>{$t('settings.mfa_not_enabled')}</p>
+				<button class="btn btn-primary mt-4" on:click={() => (isMFAModalOpen = true)}
+					>{$t('settings.enable_mfa')}</button
+				>
+			{:else}
+				<button class="btn btn-warning mt-4" on:click={disableMfa}
+					>{$t('settings.disable_mfa')}</button
+				>
+			{/if}
+		</div>
+	</section>
+
+	<!-- Visited Region Check Section -->
+	<section class="text-center mt-8">
+		<h2 class="text-2xl font-semibold">{$t('adventures.visited_region_check')}</h2>
+		<p>{$t('adventures.visited_region_check_desc')}</p>
+		<button class="btn btn-neutral mt-4" on:click={checkVisitedRegions}
+			>{$t('adventures.update_visited_regions')}</button
+		>
+	</section>
+
+	<small class="text-center block mt-8">
+		<b>For Debug Use:</b> UUID={user.uuid} | Staff user: {user.is_staff} | {appTitle}
+		{appVersion}
+	</small>
 </div>
 
-<h1 class="text-center font-extrabold text-xl mt-4 mb-2">{$t('settings.mfa_page_title')}</h1>
-
-<div class="flex justify-center mb-4">
-	<div>
-		{#if !data.props.authenticators}
-			<p>{$t('settings.mfa_not_enabled')}</p>
-			<button class="btn btn-primary mt-2" on:click={() => (isMFAModalOpen = true)}
-				>{$t('settings.enable_mfa')}</button
-			>
-		{:else}
-			<button class="btn btn-warning mt-2" on:click={disableMfa}
-				>{$t('settings.disable_mfa')}</button
-			>
-		{/if}
-	</div>
-</div>
-
-<div class="flex flex-col items-center mt-4">
-	<h1 class="text-center font-extrabold text-xl mt-4 mb-2">
-		{$t('adventures.visited_region_check')}
-	</h1>
-	<p>
-		{$t('adventures.visited_region_check_desc')}
-	</p>
-	<p>{$t('adventures.update_visited_regions_disclaimer')}</p>
-
-	<button class="btn btn-neutral mt-2 mb-2" on:click={checkVisitedRegions}
-		>{$t('adventures.update_visited_regions')}</button
-	>
-</div>
-
-<small class="text-center"
-	><b>For Debug Use:</b> UUID={user.uuid} | Staff user: {user.is_staff}</small
->
-
 <svelte:head>
 	<title>User Settings | AdventureLog</title>
 	<meta