diff --git a/package.json b/package.json
index 56388f7..033da98 100644
--- a/package.json
+++ b/package.json
@@ -39,8 +39,8 @@
 		"quilljs-markdown": "^1.2.0",
 		"radix-icons-svelte": "^1.2.1",
 		"svelte-inview": "^4.0.2",
-		"svelte-loading-spinners": "^0.3.6",
 		"svelte-radix": "^1.0.1",
+		"svelte-sonner": "0.3.27",
 		"tailwind-merge": "^2.2.1",
 		"tailwind-variants": "^0.2.0",
 		"yjs": "^13.6.12"
@@ -70,6 +70,7 @@
 		"svelte": "^4.2.8",
 		"svelte-awesome-icons": "^1.2.0",
 		"svelte-check": "^3.6.2",
+		"svelte-loading-spinners": "^0.3.6",
 		"svelte-quill": "^1.2.0",
 		"tailwindcss": "^3.3.3",
 		"tslib": "^2.6.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fb61aa8..bf7d67d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,12 +71,12 @@ dependencies:
   svelte-inview:
     specifier: ^4.0.2
     version: 4.0.2(svelte@4.2.12)
-  svelte-loading-spinners:
-    specifier: ^0.3.6
-    version: 0.3.6
   svelte-radix:
     specifier: ^1.0.1
     version: 1.1.0(svelte@4.2.12)
+  svelte-sonner:
+    specifier: 0.3.27
+    version: 0.3.27(svelte@4.2.12)
   tailwind-merge:
     specifier: ^2.2.1
     version: 2.2.2
@@ -160,6 +160,9 @@ devDependencies:
   svelte-check:
     specifier: ^3.6.2
     version: 3.6.9(postcss@8.4.38)(svelte@4.2.12)
+  svelte-loading-spinners:
+    specifier: ^0.3.6
+    version: 0.3.6
   svelte-quill:
     specifier: ^1.2.0
     version: 1.2.0
@@ -4158,7 +4161,7 @@ packages:
 
   /svelte-loading-spinners@0.3.6:
     resolution: {integrity: sha512-mthHQ2TwiwzTWzbFry3CBnVEfzqPOD9WkVw84OfSYzHRq6N9wgQ+yv37u81uPeuLU/ZOIPqhujpXquB1aol5ZQ==}
-    dev: false
+    dev: true
 
   /svelte-preprocess@5.1.3(postcss@8.4.38)(svelte@4.2.12)(typescript@5.4.4):
     resolution: {integrity: sha512-xxAkmxGHT+J/GourS5mVJeOXZzne1FR5ljeOUAMXUkfEhkLEllRreXpbl3dIYJlcJRfL1LO1uIAPpBpBfiqGPw==}
@@ -4221,6 +4224,14 @@ packages:
       svelte: 4.2.12
     dev: false
 
+  /svelte-sonner@0.3.27(svelte@4.2.12):
+    resolution: {integrity: sha512-+PvbuePNTyTNCepCWqKcFeu+Lo27yYuwfSc7zJvrWjCRMJrWAmccPg3j7jO1W13QoN3TySXU5Trb956VBQiM5Q==}
+    peerDependencies:
+      svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.1
+    dependencies:
+      svelte: 4.2.12
+    dev: false
+
   /svelte-time@0.8.2:
     resolution: {integrity: sha512-sBLLrWMMInx5iidGlbtlCBAu8CzSixdqOkbhizdalULXBvYMPACp0GtzmyBLEa77hbaMVySZzApIaNG4B4OVmg==}
     dependencies:
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index ef2f4ef..069f367 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,13 +1,20 @@
 <script lang="ts">
-    export let onClick: () => void;
-    export let notifs = 0
+	export let onClick: () => void;
+	export let notifs = 0;
+	export let disabled: boolean = false;
 </script>
-<button on:click={onClick} class="relative text-slate-800 dark:text-slate-200 font-medium rounded-lg text-sm p-2.5 text-center inline-flex items-center">
-    <slot></slot>
-    {#if notifs > 0}
-    <div
-    class="absolute inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-orange-500 rounded-sm -top-1 -end-1"
+
+<button
+	on:click={onClick}
+	class="relative inline-flex items-center rounded-lg p-2.5 text-center text-sm font-medium text-slate-800 dark:text-slate-200"
+	{disabled}
 >
-    {notifs}
-</div>{/if}
+	<slot />
+	{#if notifs > 0}
+		<div
+			class="absolute -end-1 -top-1 inline-flex h-5 w-5 items-center justify-center rounded-sm bg-orange-500 text-xs font-bold text-white"
+		>
+			{notifs}
+		</div>
+	{/if}
 </button>
diff --git a/src/lib/components/MessageInput.svelte b/src/lib/components/MessageInput.svelte
index 951d817..20ae64d 100644
--- a/src/lib/components/MessageInput.svelte
+++ b/src/lib/components/MessageInput.svelte
@@ -4,42 +4,58 @@
 	import { currentUser, ndk } from '@/ndk/ndk';
 	import { NDKEvent, type NDKTag } from '@nostr-dev-kit/ndk';
 	import { Textarea } from './ui/textarea';
+	import { Circle } from 'svelte-loading-spinners';
+	import { toast } from 'svelte-sonner';
 
 	export let selected = true;
 	export let content = '';
 	export let tags: NDKTag[] = [];
 	export let horsenote = false;
 
-	function publish(c: string) {
-		if (c.length < 1) {alert("invalid note length")}
-		console.log(15, c)
+	let isPublishing = false;
+
+	async function publish(c: string) {
+		if (c.length < 1) {
+			toast.error('Invalid note length');
+			return;
+		}
+		console.log(15, c);
 		if (!$currentUser) {
-			alert('could not find your event signer');
+			toast.error('Could not find your event signer');
 			throw new Error('invalid user');
 		} else {
+			isPublishing = true;
 			let e = new NDKEvent($ndk);
 			e.kind = 1;
 			e.created_at = Math.floor(new Date().getTime() / 1000);
 			e.content = c + (horsenote ? '\nPublished with humble.horse 🐎🐎🐎' : '');
 			e.tags = tags;
 			e.author = $currentUser;
-			console.log(e)
-			e.publish().then((r) => {
+			console.log(e);
+			try {
+				const r = await e.publish();
 				console.log(r);
 				console.log(e);
-			});
+				content = '';
+				toast.success('Note published successfully!');
+			} catch (error) {
+				console.error('Failed to publish note:', error);
+				toast.error('Failed to publish note. Please try again.');
+			} finally {
+				isPublishing = false;
+			}
 		}
 	}
 </script>
 
-<div class="flex items-center h-16 focus-within:h-36 w-full px-3 py-2 bg-zinc-300 dark:bg-cyan-900">
+<div class="flex h-16 w-full items-center bg-zinc-300 px-3 py-2 focus-within:h-36 dark:bg-cyan-900">
 	<div class="">
 		<button
 			type="button"
-			class="inline-flex justify-center p-2 text-gray-500 rounded-lg cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
+			class="inline-flex cursor-pointer justify-center rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
 		>
 			<svg
-				class="w-5 h-5"
+				class="h-5 w-5"
 				aria-hidden="true"
 				xmlns="http://www.w3.org/2000/svg"
 				fill="none"
@@ -68,10 +84,10 @@
 		</button>
 		<button
 			type="button"
-			class="p-2 text-gray-500 rounded-lg cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
+			class="cursor-pointer rounded-lg p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
 		>
 			<svg
-				class="w-5 h-5"
+				class="h-5 w-5"
 				aria-hidden="true"
 				xmlns="http://www.w3.org/2000/svg"
 				fill="none"
@@ -94,11 +110,11 @@
 			selected = true;
 		}}
 		id="chat"
-		class="resize-none block mx-4 p-2.5 w-full h-full text-sm text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+		class="mx-4 block h-full w-full resize-none rounded-lg border border-gray-300 bg-white p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
 		placeholder="Start typing..."
 		bind:value={content}
 	></Textarea>
-	<div class="flex flex-col">
+	<div class="flex flex-col items-center justify-center">
 		<Button
 			onClick={() => {
 				alert('ghost mode: implement me!');
@@ -106,21 +122,25 @@
 		>
 		<Button
 			onClick={() => {
-				//console.log(content)
 				publish(content);
 			}}
+			disabled={isPublishing}
 		>
-			<svg
-				class="w-5 h-5 rotate-90 rtl:-rotate-90"
-				aria-hidden="true"
-				xmlns="http://www.w3.org/2000/svg"
-				fill="currentColor"
-				viewBox="0 0 18 20"
-			>
-				<path
-					d="m17.914 18.594-8-18a1 1 0 0 0-1.828 0l-8 18a1 1 0 0 0 1.157 1.376L8 18.281V9a1 1 0 0 1 2 0v9.281l6.758 1.689a1 1 0 0 0 1.156-1.376Z"
-				/>
-			</svg>
+			{#if isPublishing}
+				<Circle size="20" color="#FFFFFF" unit="px" duration="1s" />
+			{:else}
+				<svg
+					class="h-5 w-5 rotate-90 rtl:-rotate-90"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="currentColor"
+					viewBox="0 0 18 20"
+				>
+					<path
+						d="m17.914 18.594-8-18a1 1 0 0 0-1.828 0l-8 18a1 1 0 0 0 1.157 1.376L8 18.281V9a1 1 0 0 1 2 0v9.281l6.758 1.689a1 1 0 0 0 1.156-1.376Z"
+					/>
+				</svg>
+			{/if}
 			<span class="sr-only">Send message</span>
 		</Button>
 	</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index df71da5..697474b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,6 +6,7 @@
 	import { init } from '@/views/messages/snort';
 	import { connect, currentUser } from '@/ndk/ndk';
 	import { stableShortList } from '@/stores/shortlist';
+	import { Toaster } from 'svelte-sonner';
 
 	currentUser.subscribe((c) => {
 		if (c && c.pubkey) {
@@ -23,4 +24,5 @@
 </script>
 
 <ModeWatcher />
+<Toaster />
 <slot />