diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index 30397cf209..f843f512a8 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -7,26 +7,37 @@
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { faDisplay, faExternalLink, faHand } from '@fortawesome/free-solid-svg-icons'
 	import { getContext } from 'svelte'
+	import { sendUserToast } from '../../../utils'
 	import type { AppEditorContext, EditorMode } from '../types'
 
-	export let title: string
-	export let mode: EditorMode
-
 	const { app } = getContext<AppEditorContext>('AppEditorContext')
+	export let title: string = $app.title || ''
+	export let mode: EditorMode
+	const loading = {
+		publish: false,
+		save: false
+	}
 
 	async function save() {
-		await AppService.updateApp({
+		loading.save = true
+		AppService.updateApp({
 			workspace: $workspaceStore!,
 			path: $page.params.path,
 			requestBody: {
 				value: $app!,
-				summary: 'App summary',
+				summary: title,
 				policy: {
 					triggerables: {},
 					execution_mode: Policy.execution_mode.PUBLISHER,
 					on_behalf_of: `u/${$userStore?.username}`
 				}
 			}
+		}).then(() => {
+			sendUserToast('Saved successfully.')
+		}).catch(() => {
+			sendUserToast('Error during saving. Please try again later.', true)
+		}).finally(() => {
+			loading.save = false
 		})
 	}
 </script>
@@ -47,6 +58,6 @@
 		<Button color="dark" size="xs" variant="border" startIcon={{ icon: faExternalLink }}>
 			Publish
 		</Button>
-		<Button on:click={save} color="dark" size="xs">Save</Button>
+		<Button loading={loading.save} on:click={save} color="dark" size="xs">Save</Button>
 	</div>
 </div>
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index 6716caa0d3..f5863627c1 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -21,8 +21,8 @@
 	export let id: string = ''
 	export let nonCaptureEvent: boolean = false
 	export let buttonType: 'button' | 'submit' | 'reset' = 'button'
+	export let loading = false
 
-	let loading = false
 
 	const dispatch = createEventDispatcher()
 	// Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
@@ -68,7 +68,6 @@
 			btnClasses,
 			disabled ? 'bg-gray-300' : ''
 		),
-		disabled,
 		href,
 		target,
 		tabindex: disabled ? -1 : 0,
@@ -106,6 +105,7 @@
 	on:focus
 	on:blur
 	{...buttonProps}
+	disabled={disabled || loading}
 	type="submit"
 >
 	{#if loading}