diff --git a/src/lib/components/Toast.svelte b/src/lib/components/Toast.svelte
index ed7ef95..e20b3d4 100644
--- a/src/lib/components/Toast.svelte
+++ b/src/lib/components/Toast.svelte
@@ -8,7 +8,7 @@
 		<!-- Use fly in and fade out for a sleek animation -->
 		<div
 			class="toast-msg type-{msg.type}"
-			in:fly={{ y: -20, duration: 300 }}
+			in:fly={{ y: 20, duration: 300 }}
 			out:fade={{ duration: 200 }}
 		>
 			{#if msg.type === 'success'}
@@ -43,7 +43,7 @@
 <style>
 	.toast-container {
 		position: fixed;
-		top: 25px;
+		bottom: 25px;
 		right: 25px;
 		z-index: 9999;
 		display: flex;
diff --git a/src/lib/stores/toast.svelte.ts b/src/lib/stores/toast.svelte.ts
index 4a6f08c..2cfbaa5 100644
--- a/src/lib/stores/toast.svelte.ts
+++ b/src/lib/stores/toast.svelte.ts
@@ -1,3 +1,5 @@
+import { untrack } from 'svelte';
+
 export type ToastType = 'success' | 'error' | 'info';
 
 export interface ToastMessage {
@@ -11,18 +13,22 @@ class ToastState {
 	private nextId = 0;
 
 	add(text: string, type: ToastType = 'info', duration: number = 3000) {
-		const id = this.nextId++;
-		this.messages.push({ id, text, type });
+		untrack(() => {
+			const id = this.nextId++;
+			this.messages.push({ id, text, type });
 
-		if (duration > 0) {
-			setTimeout(() => {
-				this.remove(id);
-			}, duration);
-		}
+			if (duration > 0) {
+				setTimeout(() => {
+					this.remove(id);
+				}, duration);
+			}
+		});
 	}
 
 	remove(id: number) {
-		this.messages = this.messages.filter((msg) => msg.id !== id);
+		untrack(() => {
+			this.messages = this.messages.filter((msg) => msg.id !== id);
+		});
 	}
 }