diff --git a/frontend/src/lib/components/AdventureCard.svelte b/frontend/src/lib/components/AdventureCard.svelte
index da80e43..0d903ee 100644
--- a/frontend/src/lib/components/AdventureCard.svelte
+++ b/frontend/src/lib/components/AdventureCard.svelte
@@ -41,6 +41,24 @@
 		}
 	}
 
+	let unlinked: boolean = false;
+
+	// Reactive block to update `unlinked` when dependencies change
+	$: {
+		if (collection && collection?.start_date && collection.end_date) {
+			unlinked = adventure.visits.every((visit) => {
+				// Check if visit dates exist
+				if (!visit.start_date || !visit.end_date) return true; // Consider "unlinked" for incomplete visit data
+
+				// Check if collection dates are completely outside this visit's range
+				const isBeforeVisit = collection.end_date && collection.end_date < visit.start_date;
+				const isAfterVisit = collection.start_date && collection.start_date > visit.end_date;
+
+				return isBeforeVisit || isAfterVisit;
+			});
+		}
+	}
+
 	async function deleteAdventure() {
 		let res = await fetch(`/adventures/${adventure.id}?/delete`, {
 			method: 'POST',
@@ -140,6 +158,9 @@
 				{adventure.is_public ? $t('adventures.public') : $t('adventures.private')}
 			</div>
 		</div>
+		{#if unlinked}
+			<div class="badge badge-error">{$t('adventures.out_of_range')}</div>
+		{/if}
 		{#if adventure.location && adventure.location !== ''}
 			<div class="inline-flex items-center">
 				<MapMarker class="w-5 h-5 mr-1" />
diff --git a/frontend/src/lib/components/ChecklistCard.svelte b/frontend/src/lib/components/ChecklistCard.svelte
index e4d0ee2..13814dc 100644
--- a/frontend/src/lib/components/ChecklistCard.svelte
+++ b/frontend/src/lib/components/ChecklistCard.svelte
@@ -16,6 +16,24 @@
 
 	let isWarningModalOpen: boolean = false;
 
+	let unlinked: boolean = false;
+
+	$: {
+		if (collection?.start_date && collection.end_date) {
+			const startOutsideRange =
+				checklist.date &&
+				collection.start_date < checklist.date &&
+				collection.end_date < checklist.date;
+
+			const endOutsideRange =
+				checklist.date &&
+				collection.start_date > checklist.date &&
+				collection.end_date > checklist.date;
+
+			unlinked = !!(startOutsideRange || endOutsideRange);
+		}
+	}
+
 	function editChecklist() {
 		dispatch('edit', checklist);
 	}
@@ -61,6 +79,9 @@
 				{checklist.items.length > 1 ? $t('checklist.items') : $t('checklist.item')}
 			</p>
 		{/if}
+		{#if unlinked}
+			<div class="badge badge-error">{$t('adventures.out_of_range')}</div>
+		{/if}
 		{#if checklist.date && checklist.date !== ''}
 			<div class="inline-flex items-center">
 				<Calendar class="w-5 h-5 mr-1" />
@@ -71,7 +92,7 @@
 			<button class="btn btn-neutral-200 mb-2" on:click={editChecklist}>
 				<Launch class="w-6 h-6" />{$t('notes.open')}
 			</button>
-			{#if checklist.user_id == user?.uuid || (collection && user && collection.shared_with.includes(user.uuid))}
+			{#if checklist.user_id == user?.uuid || (collection && user && collection.shared_with && collection.shared_with.includes(user.uuid))}
 				<button
 					id="delete_adventure"
 					data-umami-event="Delete Checklist"
diff --git a/frontend/src/lib/components/ChecklistModal.svelte b/frontend/src/lib/components/ChecklistModal.svelte
index cb0fa9d..d6388dc 100644
--- a/frontend/src/lib/components/ChecklistModal.svelte
+++ b/frontend/src/lib/components/ChecklistModal.svelte
@@ -12,10 +12,16 @@
 
 	let items: ChecklistItem[] = [];
 
+	let constrainDates: boolean = false;
+
 	items = checklist?.items || [];
 
 	let warning: string | null = '';
 
+	let isReadOnly =
+		!(checklist && user?.uuid == checklist?.user_id) &&
+		!(user && collection && collection.shared_with && collection.shared_with.includes(user.uuid)) &&
+		!!checklist;
 	let newStatus: boolean = false;
 	let newItem: string = '';
 
@@ -56,8 +62,6 @@
 		is_public: collection.is_public
 	};
 
-	let initialName: string = checklist?.name || '';
-
 	onMount(() => {
 		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
 		if (modal) {
@@ -127,86 +131,130 @@
 </script>
 
 <dialog id="my_modal_1" class="modal">
-	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-	<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
-		<h3 class="font-bold text-lg mb-2">{$t('checklist.checklist_editor')}</h3>
-		{#if initialName}
-			<p class="font-semibold text-md mb-2">{$t('checklist.editing_checklist')} {initialName}</p>
-		{/if}
-
-		{#if (checklist && user?.uuid == checklist?.user_id) || (user && collection && collection.shared_with.includes(user.uuid)) || !checklist}
-			<form on:submit|preventDefault>
-				<div class="form-control mb-2">
-					<label for="name">{$t('adventures.name')}</label>
-					<input
-						type="text"
-						id="name"
-						class="input input-bordered w-full max-w-xs"
-						bind:value={newChecklist.name}
-					/>
-				</div>
-				<div class="form-control mb-2">
-					<label for="content">{$t('adventures.date')}</label>
-					<input
-						type="date"
-						id="date"
-						name="date"
-						min={collection.start_date || ''}
-						max={collection.end_date || ''}
-						bind:value={newChecklist.date}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-				</div>
-				<div class="form-control mb-2 flex flex-row">
-					<input type="checkbox" bind:checked={newStatus} class="checkbox mt-4 mr-2" />
-					<input
-						type="text"
-						id="new_item"
-						placeholder={$t('checklist.new_item')}
-						name="new_item"
-						bind:value={newItem}
-						class="input input-bordered w-full max-w-xs mt-1"
-						on:keydown={(e) => {
-							if (e.key === 'Enter') {
-								e.preventDefault();
-								addItem();
-							}
-						}}
-					/>
-					<button
-						type="button"
-						class="btn btn-sm btn-primary absolute right-0 mt-2.5 mr-4"
-						on:click={addItem}
-					>
-						{$t('adventures.add')}
-					</button>
-				</div>
-				{#if items.length > 0}
-					<div class="divider"></div>
-					<h2 class=" text-xl font-semibold mb-4 -mt-3">{$t('checklist.items')}</h2>
-				{/if}
-
-				{#each items as item, i}
-					<div class="form-control mb-2 flex flex-row">
-						<input type="checkbox" bind:checked={item.is_checked} class="checkbox mt-4 mr-2" />
-						<input
-							type="text"
-							id="item_{i}"
-							name="item_{i}"
-							bind:value={item.name}
-							class="input input-bordered w-full max-w-xs mt-1"
-						/>
-						<button
-							type="button"
-							class="btn btn-sm btn-error absolute right-0 mt-2.5 mr-4"
-							on:click={() => removeItem(i)}
-						>
-							{$t('adventures.remove')}
-						</button>
+	<!-- 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">
+			{#if checklist?.id}
+				<p class="font-semibold text-md mb-2">
+					{$t('checklist.checklist_editor')}
+				</p>
+			{:else}
+				{$t('checklist.new_checklist')}
+			{/if}
+		</h3>
+		<div class="modal-action items-center">
+			<form method="post" style="width: 100%;" on:submit|preventDefault>
+				<!-- Basic Information Section -->
+				<div class="collapse collapse-plus bg-base-200 mb-4">
+					<input type="checkbox" id="collapse-plus-1" checked />
+					<div class="collapse-title text-lg font-bold">
+						{$t('adventures.basic_information')}
 					</div>
-				{/each}
-
+					<div class="collapse-content">
+						<div class="form-control mb-2">
+							<label for="name">{$t('adventures.name')}</label>
+							<input
+								type="text"
+								id="name"
+								class="input input-bordered w-full max-w-xs"
+								bind:value={newChecklist.name}
+								readonly={isReadOnly}
+							/>
+						</div>
+						<div class="form-control mb-2">
+							<label for="content">{$t('adventures.date')}</label>
+							{#if collection && collection.start_date && collection.end_date && !isReadOnly}<label
+									class="label cursor-pointer flex items-start space-x-2"
+								>
+									<span class="label-text">{$t('adventures.date_constrain')}</span>
+									<input
+										type="checkbox"
+										class="toggle toggle-primary"
+										id="constrain_dates"
+										name="constrain_dates"
+										on:change={() => (constrainDates = !constrainDates)}
+									/></label
+								>
+							{/if}
+							<input
+								type="date"
+								id="date"
+								name="date"
+								min={constrainDates ? collection.start_date : ''}
+								max={constrainDates ? collection.end_date : ''}
+								bind:value={newChecklist.date}
+								class="input input-bordered w-full max-w-xs mt-1"
+								readonly={isReadOnly}
+							/>
+						</div>
+					</div>
+				</div>
+				<!-- Items Section -->
+				<div class="collapse collapse-plus bg-base-200 mb-4">
+					<input type="checkbox" id="collapse-plus-2" checked />
+					<div class="collapse-title text-lg font-bold">
+						{$t('checklist.items')}
+					</div>
+					<div class="collapse-content">
+						{#if !isReadOnly}
+							<div class="form-control mb-2 flex flex-row">
+								<input type="checkbox" bind:checked={newStatus} class="checkbox mt-4 mr-2" />
+								<input
+									type="text"
+									id="new_item"
+									placeholder={$t('checklist.new_item')}
+									name="new_item"
+									bind:value={newItem}
+									class="input input-bordered w-full max-w-xs mt-1"
+									on:keydown={(e) => {
+										if (e.key === 'Enter') {
+											e.preventDefault();
+											addItem();
+										}
+									}}
+								/>
+								<button
+									type="button"
+									class="btn btn-sm btn-primary absolute right-0 mt-2.5 mr-4"
+									on:click={addItem}
+								>
+									{$t('adventures.add')}
+								</button>
+							</div>
+						{/if}
+						{#if items.length > 0}
+							<div class="divider"></div>
+							<h2 class=" text-xl font-semibold mb-4 -mt-3">{$t('checklist.items')}</h2>
+						{/if}
+						{#each items as item, i}
+							<div class="form-control mb-2 flex flex-row">
+								<input
+									type="checkbox"
+									bind:checked={item.is_checked}
+									class="checkbox mt-4 mr-2"
+									readonly={isReadOnly}
+								/>
+								<input
+									type="text"
+									id="item_{i}"
+									name="item_{i}"
+									bind:value={item.name}
+									class="input input-bordered w-full max-w-xs mt-1"
+									readonly={isReadOnly}
+								/>
+								<button
+									type="button"
+									class="btn btn-sm btn-error absolute right-0 mt-2.5 mr-4"
+									on:click={() => removeItem(i)}
+									disabled={isReadOnly}
+								>
+									{$t('adventures.remove')}
+								</button>
+							</div>
+						{/each}
+					</div>
+				</div>
 				{#if warning}
 					<div role="alert" class="alert alert-error">
 						<svg
@@ -225,10 +273,6 @@
 						<span>{warning}</span>
 					</div>
 				{/if}
-
-				<button class="btn btn-primary mr-1" on:click={save}>{$t('notes.save')}</button>
-				<button class="btn btn-neutral" on:click={close}>{$t('about.close')}</button>
-
 				{#if collection.is_public}
 					<div role="alert" class="alert mt-4">
 						<svg
@@ -247,60 +291,14 @@
 						<span>{$t('checklist.checklist_public')}</span>
 					</div>
 				{/if}
-			</form>
-		{:else}
-			<form>
-				<div class="form-control mb-2">
-					<label for="name">{$t('adventures.name')}</label>
-					<input
-						type="text"
-						id="name"
-						class="input input-bordered w-full max-w-xs"
-						bind:value={newChecklist.name}
-						readonly
-					/>
+
+				<div class="mt-4">
+					<button class="btn btn-neutral" on:click={close}>{$t('about.close')}</button>
+					<button class="btn btn-primary mr-1" disabled={isReadOnly} on:click={save}
+						>{$t('notes.save')}</button
+					>
 				</div>
-				<div class="form-control mb-2">
-					<label for="content">{$t('adventures.date')}</label>
-					<input
-						type="date"
-						id="date"
-						name="date"
-						min={collection.start_date || ''}
-						max={collection.end_date || ''}
-						bind:value={newChecklist.date}
-						readonly
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-				</div>
-
-				{#if items.length > 0}
-					<div class="divider"></div>
-					<h2 class=" text-xl font-semibold mb-4 -mt-3">{$t('checklist.items')}</h2>
-				{/if}
-
-				{#each items as item, i}
-					<div class="form-control mb-2 flex flex-row">
-						<input
-							type="checkbox"
-							checked={item.is_checked}
-							class="checkbox mt-4 mr-2"
-							readonly={true}
-							disabled
-						/>
-						<input
-							type="text"
-							id="item_{i}"
-							name="item_{i}"
-							bind:value={item.name}
-							readonly
-							class="input input-bordered w-full max-w-xs mt-1"
-						/>
-					</div>
-				{/each}
-
-				<button class="btn btn-neutral" on:click={close}>{$t('about.close')}</button>
 			</form>
-		{/if}
+		</div>
 	</div>
 </dialog>
diff --git a/frontend/src/lib/components/CollectionModal.svelte b/frontend/src/lib/components/CollectionModal.svelte
index a6fb823..5c134e0 100644
--- a/frontend/src/lib/components/CollectionModal.svelte
+++ b/frontend/src/lib/components/CollectionModal.svelte
@@ -21,7 +21,7 @@
 		is_public: collectionToEdit?.is_public || false,
 		adventures: collectionToEdit?.adventures || [],
 		link: collectionToEdit?.link || '',
-		shared_with: collectionToEdit?.shared_with || []
+		shared_with: undefined
 	};
 
 	console.log(collection);
@@ -47,6 +47,10 @@
 		event.preventDefault();
 		console.log(collection);
 
+		if (collection.start_date && !collection.end_date) {
+			collection.end_date = collection.start_date;
+		}
+
 		if (collection.id === '') {
 			let res = await fetch('/api/collections', {
 				method: 'POST',
diff --git a/frontend/src/lib/components/NoteCard.svelte b/frontend/src/lib/components/NoteCard.svelte
index 492e6cb..f513f78 100644
--- a/frontend/src/lib/components/NoteCard.svelte
+++ b/frontend/src/lib/components/NoteCard.svelte
@@ -15,6 +15,19 @@
 	export let collection: Collection | null = null;
 
 	let isWarningModalOpen: boolean = false;
+	let unlinked: boolean = false;
+
+	$: {
+		if (collection?.start_date && collection.end_date) {
+			const startOutsideRange =
+				note.date && collection.start_date < note.date && collection.end_date < note.date;
+
+			const endOutsideRange =
+				note.date && collection.start_date > note.date && collection.end_date > note.date;
+
+			unlinked = !!(startOutsideRange || endOutsideRange);
+		}
+	}
 
 	function editNote() {
 		dispatch('edit', note);
@@ -55,6 +68,9 @@
 			</h2>
 		</div>
 		<div class="badge badge-primary">{$t('adventures.note')}</div>
+		{#if unlinked}
+			<div class="badge badge-error">{$t('adventures.out_of_range')}</div>
+		{/if}
 		{#if note.links && note.links.length > 0}
 			<p>
 				{note.links.length}
@@ -74,7 +90,7 @@
 			<button class="btn btn-neutral-200 mb-2" on:click={editNote}>
 				<Launch class="w-6 h-6" />{$t('notes.open')}
 			</button>
-			{#if note.user_id == user?.uuid || (collection && user && collection.shared_with.includes(user.uuid))}
+			{#if note.user_id == user?.uuid || (collection && user && collection.shared_with && collection.shared_with.includes(user.uuid))}
 				<button
 					id="delete_adventure"
 					data-umami-event="Delete Adventure"
diff --git a/frontend/src/lib/components/NoteModal.svelte b/frontend/src/lib/components/NoteModal.svelte
index af9648c..8b37a7c 100644
--- a/frontend/src/lib/components/NoteModal.svelte
+++ b/frontend/src/lib/components/NoteModal.svelte
@@ -5,12 +5,25 @@
 	const dispatch = createEventDispatcher();
 	import { onMount } from 'svelte';
 	import { t } from 'svelte-i18n';
+	import MarkdownEditor from './MarkdownEditor.svelte';
 	let modal: HTMLDialogElement;
+	import { marked } from 'marked'; // Import the markdown parser
+
+	const renderMarkdown = (markdown: string) => {
+		return marked(markdown);
+	};
 
 	export let note: Note | null = null;
 	export let collection: Collection;
 	export let user: User | null = null;
 
+	let constrainDates: boolean = false;
+
+	let isReadOnly =
+		!(note && user?.uuid == note?.user_id) &&
+		!(user && collection && collection.shared_with && collection.shared_with.includes(user.uuid)) &&
+		!!note;
+
 	let warning: string | null = '';
 
 	let newLink: string = '';
@@ -105,85 +118,137 @@
 </script>
 
 <dialog id="my_modal_1" class="modal">
-	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-	<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
-		<h3 class="font-bold text-lg">{$t('notes.note_editor')}</h3>
-		{#if initialName}
-			<p class="font-semibold text-md mb-2">{$t('notes.editing_note')} {initialName}</p>
-		{/if}
+	<!-- 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">
+			{#if note?.id && !isReadOnly}
+				<p class="font-semibold text-md mb-2">
+					{$t('notes.editing_note')}
+					{initialName}
+				</p>
+			{:else if !isReadOnly}
+				{$t('notes.note_editor')}
+			{:else}
+				{$t('notes.note_viewer')}
+			{/if}
+		</h3>
 
-		{#if (note && user?.uuid == note?.user_id) || (collection && user && collection.shared_with.includes(user.uuid)) || !note}
-			<form on:submit|preventDefault>
-				<div class="form-control mb-2">
-					<label for="name">{$t('adventures.name')}</label>
-					<input
-						type="text"
-						id="name"
-						class="input input-bordered w-full max-w-xs"
-						bind:value={newNote.name}
-					/>
-				</div>
-				<div class="form-control mb-2">
-					<label for="content">{$t('adventures.date')}</label>
-					<input
-						type="date"
-						id="date"
-						name="date"
-						min={collection.start_date || ''}
-						max={collection.end_date || ''}
-						bind:value={newNote.date}
-						class="input input-bordered w-full max-w-xs mt-1"
-					/>
-				</div>
-				<div class="form-control mb-2">
-					<label for="content">{$t('notes.content')}</label>
-					<textarea
-						id="content"
-						class="textarea textarea-bordered"
-						bind:value={newNote.content}
-						rows="5"
-					></textarea>
-				</div>
-				<div class="form-control mb-2">
-					<label for="content">{$t('adventures.links')}</label>
-					<input
-						type="url"
-						class="input input-bordered w-full mb-1"
-						placeholder="{$t('notes.add_a_link')} (e.g. https://example.com)"
-						bind:value={newLink}
-						on:keydown={(e) => {
-							if (e.key === 'Enter') {
-								e.preventDefault();
-								addLink();
-							}
-						}}
-					/>
-					<button type="button" class="btn btn-sm btn-primary" on:click={addLink}
-						>{$t('adventures.add')}</button
-					>
-				</div>
-				{#if newNote.links.length > 0}
-					<ul class="list-none">
-						{#each newNote.links as link, i}
-							<li class="mb-4">
-								<a href={link} class="link link-primary" target="_blank">{link}</a>
-								<button
-									type="button"
-									class="btn btn-sm btn-error absolute right-0 mr-4"
-									on:click={() => {
-										newNote.links = newNote.links.filter((_, index) => index !== i);
-									}}
+		<div class="modal-action items-center">
+			<form method="post" style="width: 100%;" on:submit|preventDefault>
+				<!-- Basic Information Section -->
+				<div class="collapse collapse-plus bg-base-200 mb-4">
+					<input type="checkbox" id="collapse-plus-1" checked />
+					<div class="collapse-title text-lg font-bold">
+						{$t('adventures.basic_information')}
+					</div>
+					<div class="collapse-content">
+						<!-- Name Input -->
+						<div class="form-control mb-2">
+							<label for="name">{$t('adventures.name')}</label>
+							<input
+								type="text"
+								id="name"
+								readonly={isReadOnly}
+								class="input input-bordered w-full max-w-xs"
+								bind:value={newNote.name}
+							/>
+						</div>
+
+						<!-- Date Input -->
+						<div class="form-control mb-2">
+							<label for="content">{$t('adventures.date')}</label>
+							{#if collection && collection.start_date && collection.end_date && !isReadOnly}<label
+									class="label cursor-pointer flex items-start space-x-2"
 								>
-									{$t('adventures.remove')}
-								</button>
-							</li>
-						{/each}
-					</ul>
-				{/if}
+									<span class="label-text">{$t('adventures.date_constrain')}</span>
+									<input
+										type="checkbox"
+										class="toggle toggle-primary"
+										id="constrain_dates"
+										name="constrain_dates"
+										on:change={() => (constrainDates = !constrainDates)}
+									/></label
+								>
+							{/if}
+							<input
+								type="date"
+								id="date"
+								name="date"
+								readonly={isReadOnly}
+								min={constrainDates ? collection.start_date : ''}
+								max={constrainDates ? collection.end_date : ''}
+								bind:value={newNote.date}
+								class="input input-bordered w-full max-w-xs mt-1"
+							/>
+						</div>
 
+						<!-- Content Textarea -->
+
+						<div>
+							<label for="content">{$t('notes.content')}</label><br />
+							{#if !isReadOnly}
+								<MarkdownEditor bind:text={newNote.content} editor_height={'h-32'} />
+							{:else if note}
+								<p class="text-sm text-muted-foreground" style="white-space: pre-wrap;"></p>
+								<article
+									class="prose overflow-auto h-full max-w-full p-4 border border-base-300 rounded-lg mb-4 mt-4"
+								>
+									{@html renderMarkdown(note.content || '')}
+								</article>
+							{/if}
+						</div>
+
+						<!-- Links Section -->
+						{#if !isReadOnly}
+							<div class="form-control mb-2">
+								<label for="content">{$t('adventures.links')}</label>
+								<input
+									type="url"
+									class="input input-bordered w-full mb-1"
+									placeholder="{$t('notes.add_a_link')} (e.g. https://example.com)"
+									bind:value={newLink}
+									on:keydown={(e) => {
+										if (e.key === 'Enter') {
+											e.preventDefault();
+											addLink();
+										}
+									}}
+								/>
+								<button type="button" class="btn btn-sm btn-primary mt-1" on:click={addLink}>
+									{$t('adventures.add')}
+								</button>
+							</div>
+						{/if}
+
+						<!-- Links List -->
+						{#if newNote.links.length > 0}
+							<ul class="list-none">
+								{#each newNote.links as link, i}
+									<li class="mb-4 flex justify-between items-center">
+										<a href={link} class="link link-primary" target="_blank">
+											{link}
+										</a>
+										<button
+											type="button"
+											class="btn btn-sm btn-error"
+											disabled={isReadOnly}
+											on:click={() => {
+												newNote.links = newNote.links.filter((_, index) => index !== i);
+											}}
+										>
+											{$t('adventures.remove')}
+										</button>
+									</li>
+								{/each}
+							</ul>
+						{/if}
+					</div>
+				</div>
+
+				<!-- Warning Message -->
 				{#if warning}
-					<div role="alert" class="alert alert-error">
+					<div role="alert" class="alert alert-error mb-4">
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
 							class="h-6 w-6 shrink-0 stroke-current"
@@ -201,11 +266,9 @@
 					</div>
 				{/if}
 
-				<button class="btn btn-primary mr-1" on:click={save}>{$t('notes.save')}</button>
-				<button class="btn btn-neutral" on:click={close}>{$t('about.close')}</button>
-
+				<!-- Public Note Alert -->
 				{#if collection.is_public}
-					<div role="alert" class="alert mt-4">
+					<div role="alert" class="alert mb-4">
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
 							fill="none"
@@ -222,57 +285,17 @@
 						<span>{$t('notes.note_public')}</span>
 					</div>
 				{/if}
-			</form>
-		{:else}
-			<form>
-				<div class="form-control mb-2">
-					<label for="name">{$t('adventures.public')}</label>
-					<input
-						type="text"
-						id="name"
-						class="input input-bordered w-full max-w-xs"
-						bind:value={newNote.name}
-						readonly
-					/>
-				</div>
-				<div class="form-control mb-2">
-					<label for="content">{$t('adventures.date')}</label>
-					<input
-						type="date"
-						id="date"
-						name="date"
-						min={collection.start_date || ''}
-						max={collection.end_date || ''}
-						bind:value={newNote.date}
-						class="input input-bordered w-full max-w-xs mt-1"
-						readonly
-					/>
-				</div>
-				<div class="form-control mb-2">
-					<label for="content">{$t('notes.content')}</label>
-					<textarea
-						id="content"
-						class="textarea textarea-bordered"
-						bind:value={newNote.content}
-						rows="5"
-						readonly
-					></textarea>
-				</div>
-				<div class="form-control mb-2">
-					<label for="content">{$t('adventures.links')}</label>
-				</div>
-				{#if newNote.links.length > 0}
-					<ul class="list-none">
-						{#each newNote.links as link, i}
-							<li class="mb-1">
-								<a href={link} target="_blank">{link}</a>
-							</li>
-						{/each}
-					</ul>
-				{/if}
 
-				<button class="btn btn-neutral" on:click={close}>{$t('about.close')}</button>
+				<!-- Action Buttons -->
+				<div class="mt-4">
+					<button class="btn btn-neutral" on:click={close}>
+						{$t('about.close')}
+					</button>
+					<button class="btn btn-primary mr-1" disabled={isReadOnly} on:click={save}>
+						{$t('notes.save')}
+					</button>
+				</div>
 			</form>
-		{/if}
+		</div>
 	</div>
 </dialog>
diff --git a/frontend/src/lib/components/ShareModal.svelte b/frontend/src/lib/components/ShareModal.svelte
index d4bb98b..0f4fcec 100644
--- a/frontend/src/lib/components/ShareModal.svelte
+++ b/frontend/src/lib/components/ShareModal.svelte
@@ -24,7 +24,11 @@
 		});
 		if (res.ok) {
 			sharedWithUsers = sharedWithUsers.concat(user);
-			collection.shared_with.push(user.uuid);
+			if (collection.shared_with) {
+				collection.shared_with.push(user.uuid);
+			} else {
+				collection.shared_with = [user.uuid];
+			}
 			notSharedWithUsers = notSharedWithUsers.filter((u) => u.uuid !== user.uuid);
 			addToast(
 				'success',
@@ -42,7 +46,9 @@
 		});
 		if (res.ok) {
 			notSharedWithUsers = notSharedWithUsers.concat(user);
-			collection.shared_with = collection.shared_with.filter((u) => u !== user.uuid);
+			if (collection.shared_with) {
+				collection.shared_with = collection.shared_with.filter((u) => u !== user.uuid);
+			}
 			sharedWithUsers = sharedWithUsers.filter((u) => u.uuid !== user.uuid);
 			addToast(
 				'success',
@@ -60,8 +66,12 @@
 		if (res.ok) {
 			let data = await res.json();
 			allUsers = data;
-			sharedWithUsers = allUsers.filter((user) => collection.shared_with.includes(user.uuid));
-			notSharedWithUsers = allUsers.filter((user) => !collection.shared_with.includes(user.uuid));
+			sharedWithUsers = allUsers.filter((user) =>
+				(collection.shared_with ?? []).includes(user.uuid)
+			);
+			notSharedWithUsers = allUsers.filter(
+				(user) => !(collection.shared_with ?? []).includes(user.uuid)
+			);
 			console.log(sharedWithUsers);
 			console.log(notSharedWithUsers);
 		}
diff --git a/frontend/src/lib/components/TransportationCard.svelte b/frontend/src/lib/components/TransportationCard.svelte
index 529ba1c..a9f6261 100644
--- a/frontend/src/lib/components/TransportationCard.svelte
+++ b/frontend/src/lib/components/TransportationCard.svelte
@@ -20,6 +20,25 @@
 		dispatch('edit', transportation);
 	}
 
+	let unlinked: boolean = false;
+
+	// unlinked if collection.start_date and collection.end_date are not within transportation.date and transportation.end_date. check for null in the collection dates first to avoid errors
+	$: {
+		if (collection?.start_date && collection.end_date) {
+			const startOutsideRange =
+				transportation.date &&
+				collection.start_date < transportation.date &&
+				collection.end_date < transportation.date;
+
+			const endOutsideRange =
+				transportation.end_date &&
+				collection.start_date > transportation.end_date &&
+				collection.end_date > transportation.end_date;
+
+			unlinked = !!(startOutsideRange || endOutsideRange);
+		}
+	}
+
 	async function deleteTransportation() {
 		let res = await fetch(`/api/transportations/${transportation.id}`, {
 			method: 'DELETE',
@@ -64,6 +83,9 @@
 				{/if}
 			</div>
 		</div>
+		{#if unlinked}
+			<div class="badge badge-error">{$t('adventures.out_of_range')}</div>
+		{/if}
 
 		<!-- Locations -->
 		<div class="space-y-2">
@@ -100,7 +122,7 @@
 		</div>
 
 		<!-- Actions -->
-		{#if transportation.user_id == user?.uuid || (collection && user && collection.shared_with.includes(user.uuid))}
+		{#if transportation.user_id == user?.uuid || (collection && user && collection.shared_with && collection.shared_with.includes(user.uuid))}
 			<div class="card-actions justify-end">
 				<button
 					class="btn btn-primary btn-sm flex items-center gap-1"
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index 57342f4..9dac462 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -93,7 +93,7 @@ export type Collection = {
 	notes?: Note[];
 	checklists?: Checklist[];
 	is_archived?: boolean;
-	shared_with: string[];
+	shared_with: string[] | undefined;
 	link?: string | null;
 };
 
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index c5dc2e4..d847826 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -235,6 +235,7 @@
 		"download_calendar": "Download Calendar",
 		"date_information": "Date Information",
 		"flight_information": "Flight Information",
+		"out_of_range": "Not in itinerary date range",
 		"preview": "Preview",
 		"md_instructions": "Write your markdown here...",
 		"days": "days",
@@ -384,6 +385,7 @@
 		"open": "Open",
 		"failed_to_save": "Failed to save note",
 		"note_editor": "Note Editor",
+		"note_viewer": "Note Viewer",
 		"editing_note": "Editing note",
 		"content": "Content",
 		"save": "Save",
@@ -396,7 +398,9 @@
 		"checklist_delete_error": "Error deleting checklist",
 		"failed_to_save": "Failed to save checklist",
 		"checklist_editor": "Checklist Editor",
+		"checklist_viewer": "Checklist Viewer",
 		"editing_checklist": "Editing checklist",
+		"new_checklist": "New Checklist",
 		"item": "Item",
 		"items": "Items",
 		"add_item": "Add Item",
diff --git a/frontend/src/routes/collections/+page.svelte b/frontend/src/routes/collections/+page.svelte
index 40633dc..171a5d4 100644
--- a/frontend/src/routes/collections/+page.svelte
+++ b/frontend/src/routes/collections/+page.svelte
@@ -2,6 +2,7 @@
 	import { enhance } from '$app/forms';
 	import { goto } from '$app/navigation';
 	import CollectionCard from '$lib/components/CollectionCard.svelte';
+	import CollectionLink from '$lib/components/CollectionLink.svelte';
 	import CollectionModal from '$lib/components/CollectionModal.svelte';
 	import NotFound from '$lib/components/NotFound.svelte';
 	import type { Collection } from '$lib/types';
@@ -73,26 +74,31 @@
 		collections = collections.filter((collection) => collection.id !== event.detail);
 	}
 
-	function sort({ attribute, order }: { attribute: string; order: string }) {
-		currentSort.attribute = attribute;
-		currentSort.order = order;
-		if (attribute === 'name') {
-			if (order === 'asc') {
-				collections = collections.sort((a, b) => b.name.localeCompare(a.name));
-			} else {
-				collections = collections.sort((a, b) => a.name.localeCompare(b.name));
-			}
-		}
-	}
+	// function sort({ attribute, order }: { attribute: string; order: string }) {
+	// 	currentSort.attribute = attribute;
+	// 	currentSort.order = order;
+	// 	if (attribute === 'name') {
+	// 		if (order === 'asc') {
+	// 			collections = collections.sort((a, b) => b.name.localeCompare(a.name));
+	// 		} else {
+	// 			collections = collections.sort((a, b) => a.name.localeCompare(b.name));
+	// 		}
+	// 	}
+	// }
 
 	let collectionToEdit: Collection | null = null;
 
-	function deleteAdventure(event: CustomEvent<string>) {
-		collections = collections.filter((adventure) => adventure.id !== event.detail);
-	}
-
-	function createAdventure(event: CustomEvent<Collection>) {
-		collections = [event.detail, ...collections];
+	function saveOrCreate(event: CustomEvent<Collection>) {
+		if (collections.find((collection) => collection.id === event.detail.id)) {
+			collections = collections.map((collection) => {
+				if (collection.id === event.detail.id) {
+					return event.detail;
+				}
+				return collection;
+			});
+		} else {
+			collections = [event.detail, ...collections];
+		}
 		isShowingCollectionModal = false;
 	}
 
@@ -123,6 +129,7 @@
 		{collectionToEdit}
 		on:close={() => (isShowingCollectionModal = false)}
 		on:saveEdit={saveEdit}
+		on:save={saveOrCreate}
 	/>
 {/if}
 <div class="fixed bottom-4 right-4 z-[999]">
@@ -256,6 +263,6 @@
 </div>
 
 <svelte:head>
-	<title>{$t(`navbar.collections`)}</title>
+	<title>Collections</title>
 	<meta name="description" content="View your adventure collections." />
 </svelte:head>
diff --git a/frontend/src/routes/collections/[id]/+page.svelte b/frontend/src/routes/collections/[id]/+page.svelte
index a3d6596..0265ba4 100644
--- a/frontend/src/routes/collections/[id]/+page.svelte
+++ b/frontend/src/routes/collections/[id]/+page.svelte
@@ -315,7 +315,7 @@
 	</div>
 {/if}
 {#if collection}
-	{#if data.user && data.user.uuid && (data.user.uuid == collection.user_id || collection.shared_with.includes(data.user.uuid)) && !collection.is_archived}
+	{#if data.user && data.user.uuid && (data.user.uuid == collection.user_id || (collection.shared_with && collection.shared_with.includes(data.user.uuid))) && !collection.is_archived}
 		<div class="fixed bottom-4 right-4 z-[999]">
 			<div class="flex flex-row items-center justify-center gap-4">
 				<div class="dropdown dropdown-top dropdown-end">
@@ -428,7 +428,8 @@
 	{#if collection.description}
 		<div class="flex justify-center mt-4">
 			<article
-				class="prose overflow-auto h-96 max-w-full p-4 border border-base-300 rounded-lg bg-base-300"
+				class="prose overflow-auto max-h-96 max-w-full p-4 border border-base-300 rounded-lg bg-base-300 mb-4"
+				style="overflow-y: auto;"
 			>
 				{@html renderMarkdown(collection.description)}
 			</article>
@@ -451,40 +452,42 @@
 		</div>
 	{/if}
 
-	<div class="flex justify-center mx-auto">
-		<!-- svelte-ignore a11y-missing-attribute -->
-		<div role="tablist" class="tabs tabs-boxed tabs-lg max-w-xl">
+	{#if collection.start_date}
+		<div class="flex justify-center mx-auto">
 			<!-- svelte-ignore a11y-missing-attribute -->
-			<a
-				role="tab"
-				class="tab {currentView === 'itinerary' ? 'tab-active' : ''}"
-				tabindex="0"
-				on:click={() => (currentView = 'itinerary')}
-				on:keydown={(e) => e.key === 'Enter' && (currentView = 'itinerary')}>Itinerary</a
-			>
-			<a
-				role="tab"
-				class="tab {currentView === 'all' ? 'tab-active' : ''}"
-				tabindex="0"
-				on:click={() => (currentView = 'all')}
-				on:keydown={(e) => e.key === 'Enter' && (currentView = 'all')}>All Linked Items</a
-			>
-			<a
-				role="tab"
-				class="tab {currentView === 'calendar' ? 'tab-active' : ''}"
-				tabindex="0"
-				on:click={() => (currentView = 'calendar')}
-				on:keydown={(e) => e.key === 'Enter' && (currentView = 'calendar')}>Calendar</a
-			>
-			<a
-				role="tab"
-				class="tab {currentView === 'map' ? 'tab-active' : ''}"
-				tabindex="0"
-				on:click={() => (currentView = 'map')}
-				on:keydown={(e) => e.key === 'Enter' && (currentView = 'map')}>Map</a
-			>
+			<div role="tablist" class="tabs tabs-boxed tabs-lg max-w-xl">
+				<!-- svelte-ignore a11y-missing-attribute -->
+				<a
+					role="tab"
+					class="tab {currentView === 'itinerary' ? 'tab-active' : ''}"
+					tabindex="0"
+					on:click={() => (currentView = 'itinerary')}
+					on:keydown={(e) => e.key === 'Enter' && (currentView = 'itinerary')}>Itinerary</a
+				>
+				<a
+					role="tab"
+					class="tab {currentView === 'all' ? 'tab-active' : ''}"
+					tabindex="0"
+					on:click={() => (currentView = 'all')}
+					on:keydown={(e) => e.key === 'Enter' && (currentView = 'all')}>All Linked Items</a
+				>
+				<a
+					role="tab"
+					class="tab {currentView === 'calendar' ? 'tab-active' : ''}"
+					tabindex="0"
+					on:click={() => (currentView = 'calendar')}
+					on:keydown={(e) => e.key === 'Enter' && (currentView = 'calendar')}>Calendar</a
+				>
+				<a
+					role="tab"
+					class="tab {currentView === 'map' ? 'tab-active' : ''}"
+					tabindex="0"
+					on:click={() => (currentView = 'map')}
+					on:keydown={(e) => e.key === 'Enter' && (currentView = 'map')}>Map</a
+				>
+			</div>
 		</div>
-	</div>
+	{/if}
 
 	{#if currentView == 'all'}
 		{#if adventures.length > 0}
@@ -559,6 +562,11 @@
 				{/each}
 			</div>
 		{/if}
+
+		<!-- if none found -->
+		{#if adventures.length == 0 && transportations.length == 0 && notes.length == 0 && checklists.length == 0}
+			<NotFound error={undefined} />
+		{/if}
 	{/if}
 
 	{#if collection.start_date && collection.end_date}