diff --git a/components/AdoptProbe.vue b/components/AdoptProbe.vue
index 51b83173..ca221c4d 100644
--- a/components/AdoptProbe.vue
+++ b/components/AdoptProbe.vue
@@ -37,13 +37,14 @@
 						<Tab value="1" :class="{ grow: true }"><i class="pi pi-times mr-2"/>I'm not running a probe yet</Tab>
 					</TabList>
 					<TabPanels ref="tabPanels" class="box-content overflow-hidden transition-[height] duration-500">
-						<TabPanel value="0" class="overflow-auto">
-							<p class="mb-4 mt-2 text-lg font-bold">Set up your probe</p>
+						<TabPanel value="0">
+							<!-- inline-block is required so mt-2 is not collapsed -->
+							<p class="mb-4 mt-2 inline-block text-lg font-bold">Set up your probe</p>
 							<p>First, update your container by running the following commands:</p>
 							<CodeBlock :commands="setUpCommands" class="mt-4"/>
 						</TabPanel>
-						<TabPanel value="1" class="overflow-auto">
-							<p class="mb-4 mt-2 text-lg font-bold">Join the network</p>
+						<TabPanel value="1">
+							<p class="mb-4 mt-2 inline-block text-lg font-bold">Join the network</p>
 							<StartProbe/>
 						</TabPanel>
 					</TabPanels>
diff --git a/components/CodeBlock.vue b/components/CodeBlock.vue
index afa7da1e..dfdedc7f 100644
--- a/components/CodeBlock.vue
+++ b/components/CodeBlock.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="relative rounded-xl border bg-surface-0 p-4 pr-0 dark:bg-dark-900">
 		<div class="no-scrollbar overflow-scroll">
-			<pre v-for="line in commands" :key="line.toString()"><code>{{ line[0] }}</code><code class="mr-16 text-bluegray-300">{{ line[1] }}</code></pre>
+			<pre v-for="line in commands" :key="line.toString()" class="flex min-h-[22px] items-center"><code>{{ line[0] }}</code><code class="mr-16 text-bluegray-300">{{ line[1] }}</code></pre>
 		</div>
 		<div class="!absolute right-2 top-2">
 			<Button
diff --git a/components/StartProbe.vue b/components/StartProbe.vue
index 9a41f10e..2ebc44bb 100644
--- a/components/StartProbe.vue
+++ b/components/StartProbe.vue
@@ -12,27 +12,27 @@
 			@update:model-value="onChangePlatform"
 		/>
 	</div>
-	<div ref="codeWrapperElem" class="relative mt-4 box-content overflow-hidden rounded-xl border p-4 pr-0 transition-[height] duration-500 dark:bg-dark-900">
-		<!-- TODO: P1: related ^ all the modals may work better if they are closer to the top, not fully vertically centered -->
-
-		<!-- TODO: P3: collapse/expand thing could be a component -->
-		<div ref="codeElem">
-			<pre v-if="(size === 'compact')" class="no-scrollbar overflow-scroll"><code class="mr-16">{{ commands[platform][size] }}</code></pre>
-			<div v-if="size === 'expanded'" class="no-scrollbar overflow-scroll">
-				<pre v-for="line in commands[platform][size]" :key="line.toString()"><code>{{ line[0] }}</code><code class="mr-16 text-bluegray-300">{{ line[1] }}</code></pre>
+	<div class="relative">
+		<div ref="codeWrapperElem" class="mt-4 box-content overflow-hidden rounded-xl border p-4 pr-0 transition-[height] duration-500 dark:bg-dark-900">
+			<!-- TODO: P3: collapse/expand thing could be a component, collapse/expand is not smooth if triggered immideately after copy click -->
+			<div ref="codeElem">
+				<pre v-if="size === 'compact'" class="no-scrollbar flex min-h-[22px] items-center overflow-scroll"><code class="mr-16">{{ commands[platform][size] }}</code></pre>
+				<div v-if="size === 'expanded'" class="no-scrollbar overflow-scroll">
+					<pre v-for="line in commands[platform][size]" :key="line.toString()"><code>{{ line[0] }}</code><code class="mr-16 text-bluegray-300">{{ line[1] }}</code></pre>
+				</div>
 			</div>
-		</div>
-		<div class="!absolute right-2 top-2">
-			<!-- TODO: P3: copy button could be a component -->
-			<Button
-				icon="pi pi-copy"
-				severity="secondary"
-				aria-label="Copy"
-				outlined
-				@click="copyCommand"
-			/>
-			<div v-if="copyTooltip" class="absolute -top-10 left-1/2 -translate-x-1/2 rounded-md bg-bluegray-700 p-2 text-surface-0">
-				Copied!
+			<div class="!absolute right-2 top-2">
+				<!-- TODO: P3: copy button could be a component -->
+				<Button
+					icon="pi pi-copy"
+					severity="secondary"
+					aria-label="Copy"
+					outlined
+					@click="copyCommand"
+				/>
+				<div v-if="copyTooltip" class="absolute -top-10 left-1/2 -translate-x-1/2 rounded-md bg-bluegray-700 p-2 text-surface-0">
+					Copied!
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/components/TokenDetails.vue b/components/TokenDetails.vue
index 9f36beef..63f99521 100644
--- a/components/TokenDetails.vue
+++ b/components/TokenDetails.vue
@@ -66,16 +66,16 @@
 		</div>
 		<div class="text-xs">{{ expire ? `Token will expire ${formatDate(expire)}.` : 'Token will never expire.' }}</div>
 		<label for="origins" class="mt-6 block">Origins</label>
-		<!-- TODO: P1: finish migrating this: storing doesn't seem to work at all, the separator param would be nice to bring back, input needs padding -->
 		<AutoComplete
 			id="origins"
 			v-model="origins"
 			class="mt-2"
-			input-class="h-[22px]"
 			remove-token-icon="pi pi-times"
 			multiple
 			:typeahead="false"
+			:pt="{ inputChip: { id: 'token-details-origins-input-wrapper'}, chipItem: 'my-0.5' }"
 			@update:model-value="updateOrigins"
+			@blur="onAutoCompleteBlur"
 		/>
 		<p class="mt-1 text-xs">
 			A list of origins which are allowed to use the token. If empty, any origin is valid.
@@ -102,7 +102,7 @@
 <script setup lang="ts">
 	import { createItem, customEndpoint, updateItem } from '@directus/sdk';
 	import { formatDate } from '~/utils/date-formatters';
-	import { sendToast } from '~/utils/send-toast';
+	import { sendErrorToast, sendToast } from '~/utils/send-toast';
 
 	const props = defineProps({
 		token: {
@@ -175,6 +175,39 @@
 		origins.value = value.filter(v => !!v);
 	};
 
+	const onAutoCompleteBlur = (event: Event) => {
+		const input = event?.target as HTMLInputElement | null;
+
+		if (input?.value) {
+			origins.value.push(input.value);
+			input.value = '';
+		}
+	};
+
+	let inputElem: HTMLInputElement | null;
+	const inputChangeValueHandler = () => {
+		if (!inputElem || !inputElem.value) {
+			return;
+		} else if (inputElem.value === ',') {
+			inputElem.value = '';
+			return;
+		}
+
+		if (inputElem.value.endsWith(',') && inputElem.value.replaceAll(',', '')) {
+			origins.value.push(inputElem.value.replaceAll(',', ''));
+			inputElem.value = '';
+		}
+	};
+
+	onMounted(() => {
+		inputElem = document.querySelector<HTMLInputElement>('#token-details-origins-input-wrapper input');
+		inputElem && inputElem.addEventListener('input', inputChangeValueHandler);
+	});
+
+	onUnmounted(() => {
+		inputElem && inputElem.removeEventListener('input', inputChangeValueHandler);
+	});
+
 	// ACTIONS
 
 	const generateTokenLoading = ref(false);
@@ -198,7 +231,7 @@
 
 			emit('generate', response.id, token);
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 	};
 
@@ -218,9 +251,11 @@
 				expire: expire.value && expire.value.toISOString().split('T')[0],
 			}));
 
+			sendToast('success', 'Done', 'Token info was successfully updated');
+
 			emit('save');
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 	};
 
@@ -243,9 +278,11 @@
 				value: token,
 			}));
 
+			sendToast('success', 'Done', 'Token was successfully regenerated');
+
 			emit('regenerate', response.id, token);
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 	};
 </script>
diff --git a/pages/credits.vue b/pages/credits.vue
index 4f3e422a..abe0f6a5 100644
--- a/pages/credits.vue
+++ b/pages/credits.vue
@@ -71,7 +71,7 @@
 	import type { PageState } from 'primevue/paginator';
 	import { useAuth } from '~/store/auth';
 	import { formatDateForTable } from '~/utils/date-formatters';
-	import { sendToast } from '~/utils/send-toast';
+	import { sendErrorToast } from '~/utils/send-toast';
 
 	useHead({
 		title: 'Credits -',
@@ -114,7 +114,7 @@
 
 			return { total: total[0]?.amount || 0, additions, deductions };
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 			throw e;
 		}
 	}, { default: () => ({ total: 0, additions: [], deductions: [] }) });
@@ -156,7 +156,7 @@
 
 			creditsChangesCount.value = additionsCount + deductionsCount;
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 
 		loading.value = false;
diff --git a/pages/index.vue b/pages/index.vue
index 0757cab2..5aab56d5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -122,6 +122,7 @@
 		</div>
 		<Dialog
 			v-model:visible="adoptProbeDialog"
+			position="top"
 			class="min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
@@ -140,7 +141,7 @@
 	import isEmpty from 'lodash/isEmpty';
 	import CountryFlag from 'vue-country-flag-next';
 	import { useAuth } from '~/store/auth';
-	import { sendToast } from '~/utils/send-toast';
+	import { sendErrorToast } from '~/utils/send-toast';
 
 	useHead({
 		title: 'Overview -',
@@ -158,7 +159,7 @@
 			}));
 			return result;
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 			throw e;
 		}
 	}, { default: () => [] });
@@ -181,7 +182,7 @@
 			}));
 			return result;
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 			throw e;
 		}
 	}, { default: () => [] });
@@ -203,7 +204,7 @@
 			}));
 			return result;
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 			throw e;
 		}
 	}, { default: () => [] });
diff --git a/pages/probes.vue b/pages/probes.vue
index 86f1a380..7bcbf634 100644
--- a/pages/probes.vue
+++ b/pages/probes.vue
@@ -288,6 +288,7 @@
 		</div>
 		<Dialog
 			v-model:visible="startProbeDialog"
+			position="top"
 			class="min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
@@ -298,7 +299,8 @@
 		</Dialog>
 		<Dialog
 			v-model:visible="adoptProbeDialog"
-			class="max-h-[95vh] min-w-[700px] max-md:min-w-[95%]"
+			position="top"
+			class="min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
@@ -318,7 +320,7 @@
 	import CountryFlag from 'vue-country-flag-next';
 	import { useAuth } from '~/store/auth';
 	import { initGoogleMap } from '~/utils/init-google-map';
-	import { sendToast } from '~/utils/send-toast';
+	import { sendErrorToast } from '~/utils/send-toast';
 
 	const config = useRuntimeConfig();
 
@@ -387,7 +389,7 @@
 			probes.value = adoptedProbes;
 			probesCount.value = count;
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 
 		loading.value = false;
@@ -524,7 +526,7 @@
 			const updatedProbe = await $directus.request(updateItem('gp_adopted_probes', id, newData));
 			probes.value = [ ...probes.value.map(probe => probe.id === updatedProbe.id ? updatedProbe : probe) ];
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 	};
 </script>
diff --git a/pages/settings.vue b/pages/settings.vue
index 2cff65d7..66b1c149 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -96,6 +96,7 @@
 		<!-- TODO: P3: we have many of these in the same style, might be worth to wrap in our own component (possibly same applies to other components). -->
 		<Dialog
 			v-model:visible="deleteDialog"
+			position="top"
 			class="min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
@@ -122,7 +123,7 @@
 <script setup lang="ts">
 	import { customEndpoint, deleteUser, updateMe } from '@directus/sdk';
 	import { useAuth } from '~/store/auth';
-	import { sendToast } from '~/utils/send-toast';
+	import { sendErrorToast } from '~/utils/send-toast';
 
 	useHead({
 		title: 'Settings -',
@@ -163,7 +164,7 @@
 
 			toast.add({ severity: 'success', summary: 'Saved', detail: 'All settings saved', life: 4000 });
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 
 		saveLoading.value = false;
@@ -195,7 +196,7 @@
 
 			toast.add({ severity: 'success', summary: 'Synced', detail: 'GitHub data synced', life: 4000 });
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 
 		loadingIconId.value = null;
@@ -209,7 +210,7 @@
 			await $directus.request(deleteUser(user.id!));
 			reloadNuxtApp();
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 	};
 </script>
diff --git a/pages/tokens.vue b/pages/tokens.vue
index feac8c27..168a77d6 100644
--- a/pages/tokens.vue
+++ b/pages/tokens.vue
@@ -88,6 +88,7 @@
 		</div>
 		<Dialog
 			v-model:visible="tokenDetailsDialog"
+			position="top"
 			class="min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
@@ -105,6 +106,7 @@
 		</Dialog>
 		<Dialog
 			v-model:visible="deleteDialog"
+			position="top"
 			class="min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
@@ -127,6 +129,7 @@
 		</Dialog>
 		<Dialog
 			v-model:visible="regenerateDialog"
+			position="top"
 			class="min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
@@ -155,7 +158,7 @@
 	import type { PageState } from 'primevue/paginator';
 	import { useAuth } from '~/store/auth';
 	import { formatDate, getRelativeTimeString } from '~/utils/date-formatters';
-	import { sendToast } from '~/utils/send-toast';
+	import { sendErrorToast, sendToast } from '~/utils/send-toast';
 
 	useHead({
 		title: 'Tokens -',
@@ -189,7 +192,7 @@
 			tokens.value = gpTokens;
 			tokensCount.value = count;
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 
 		loading.value = false;
@@ -280,8 +283,10 @@
 			expandedRows.value = { [id]: true };
 			tokenToRegenerate.value = null;
 			regenerateDialog.value = false;
+
+			sendToast('success', 'Done', 'Token was successfully regenerated');
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 	};
 
@@ -309,8 +314,10 @@
 			await loadLazyData();
 			tokenToDelete.value = null;
 			deleteDialog.value = false;
+
+			sendToast('success', 'Done', 'Token was deleted');
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 	};
 </script>
diff --git a/presets/aura/autocomplete/index.js b/presets/aura/autocomplete/index.js
index 52d98fba..e0c3190f 100644
--- a/presets/aura/autocomplete/index.js
+++ b/presets/aura/autocomplete/index.js
@@ -28,11 +28,11 @@ export default {
 
 			// Flex
 			'flex items-center flex-wrap',
-			'gap-2',
+			'gap-x-2',
 
 			// Spacing
 			'm-0 list-none',
-			'py-1 px-1',
+			'px-1',
 
 			// Size
 			'w-full',
@@ -67,7 +67,7 @@ export default {
 		class: [ 'py-1 px-0 ml-2', 'inline-flex flex-auto' ],
 	},
 	inputChip: {
-		class: 'flex-auto inline-flex pt-1 pb-1',
+		class: 'flex-auto inline-flex h-[35px] only:pl-2',
 	},
 	input: {
 		class: 'border-none outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full',
diff --git a/presets/aura/dialog/index.js b/presets/aura/dialog/index.js
index 6725567e..ff40dd9b 100644
--- a/presets/aura/dialog/index.js
+++ b/presets/aura/dialog/index.js
@@ -1,5 +1,5 @@
 export default {
-	root: ({ state }) => ({
+	root: ({ props, state }) => ({
 		class: [
 			// Shape
 			'rounded-lg',
@@ -7,7 +7,8 @@ export default {
 			'border-0',
 
 			// Size
-			'max-h-[90vh]',
+			props.position === 'top' ? 'max-h[calc(95vh-7*16px)]' : 'max-h-[90vh]',
+			{ 'mt-28': props.position === 'top' },
 			'w-[50vw]',
 			'm-0',
 
@@ -115,7 +116,10 @@ export default {
 		],
 	}),
 	transition: ({ props }) => {
-		return props.position === 'top'
+		// Use default animation for the "position": "top"
+		// return props.position === 'top'
+		// eslint-disable-next-line no-constant-condition
+		return false
 			? {
 				enterFromClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
 				enterActiveClass: 'transition-all duration-200 ease-out',
diff --git a/utils/send-toast.ts b/utils/send-toast.ts
index 9fe0c3e3..7df50d97 100644
--- a/utils/send-toast.ts
+++ b/utils/send-toast.ts
@@ -1,6 +1,12 @@
+import type { ToastMessageOptions } from 'primevue/toast';
 import { useToastService } from '~/composables/useToastService';
 
-export const sendToast = (error: unknown) => {
+export const sendToast = (severity: ToastMessageOptions['severity'], summary: string, detail: string = '') => {
+	const toastService = useToastService();
+	toastService.add({ severity, summary, detail, life: 5000 });
+};
+
+export const sendErrorToast = (error: unknown) => {
 	const toastService = useToastService();
 	const e = error as DashboardError;