diff --git a/src/lib/components/FilePanel.svelte b/src/lib/components/FilePanel.svelte
index b4dc038..3b7e486 100644
--- a/src/lib/components/FilePanel.svelte
+++ b/src/lib/components/FilePanel.svelte
@@ -18,6 +18,7 @@
 	import { Trash, Pencil } from 'lucide-svelte';
 
 	import { Loader2, Check, X } from 'lucide-svelte';
+	import StatusSpinner from './StatusSpinner.svelte';
 	let isLoading = false;
 	let isUploaded = false;
 	let isError = false;
@@ -116,6 +117,10 @@
 		dispatcher('onUpload');
 	}
 
+	let deleting = false;
+	let delMessage = null;
+	let success = -1;
+
 	async function deleteRecording(event) {
 		const delId = event.currentTarget.id;
 
@@ -125,6 +130,8 @@
 		}
 
 		try {
+			delMessage = `Deleting record ${delId}`;
+			deleting = true;
 			// Delete the template
 			const deleteResponse = await fetch(`/api/records?id=${delId}`, {
 				method: 'DELETE'
@@ -133,15 +140,26 @@
 			if (deleteResponse.ok) {
 				const deleteResult = await deleteResponse.json();
 				console.log('Record deleted successfully:', deleteResult);
+				delMessage = 'Deleted';
+				success = 1;
 
 				// dispatch('templatesModified');
 				dispatcher('recordsModified');
 			} else {
 				const error = await deleteResponse.json();
 				console.error('Error deleting record:', error);
+				delMessage = `Delete failed`;
+				success = 0;
 			}
 		} catch (err) {
 			console.error('Error during API call:', err);
+			delMessage = `Delete failed`;
+			success = 0;
+		} finally {
+			setInterval(() => {
+				deleting = false;
+				success = -1;
+			}, 3000);
 		}
 	}
 
@@ -252,8 +270,13 @@
 </script>
 
 <div
-	class="items-top z-0 h-[704px] w-full justify-start gap-2 p-1 lg:flex lg:h-[700px] 2xl:h-[900px]"
+	class="items-top relative z-0 h-[704px] w-full justify-start gap-2 p-1 lg:flex lg:h-[700px] 2xl:h-[900px]"
 >
+	{#if deleting}
+		<div class="absolute bottom-0 right-0">
+			<StatusSpinner bind:msg={delMessage} {success} />
+		</div>
+	{/if}
 	<div
 		class="flex h-full w-full flex-shrink-0 rounded bg-carbongray-50 p-2 text-lg dark:bg-carbongray-700 lg:w-[300px]"
 	>
diff --git a/src/lib/components/StatusSpinner.svelte b/src/lib/components/StatusSpinner.svelte
index cead4af..47ccd89 100644
--- a/src/lib/components/StatusSpinner.svelte
+++ b/src/lib/components/StatusSpinner.svelte
@@ -1,9 +1,17 @@
 <script lang="ts">
-	import { Loader } from 'lucide-svelte';
+	import { Loader, CircleCheck, CircleX } from 'lucide-svelte';
 	export let msg;
-	export let size = 15;
+	export let size = 13;
+	export let success = -1;
 </script>
 
-<div class="flex w-fit items-center justify-center gap-1 p-2">
-	<Loader {size} class="animate-spin" />
+<div class="flex w-fit items-center justify-center gap-2 p-2">
+	<div class="text-base">{msg}</div>
+	{#if success < 0}
+		<Loader {size} class="animate-spin text-carbonblue-500" />
+	{:else if success > 0}
+		<CircleCheck {size} class="animate-pulse text-[#24a147]" />
+	{:else}
+		<CircleX {size} class="animate-pulse" />
+	{/if}
 </div>
diff --git a/src/lib/components/TemplatesPane.svelte b/src/lib/components/TemplatesPane.svelte
index 2413d8c..7006ddb 100644
--- a/src/lib/components/TemplatesPane.svelte
+++ b/src/lib/components/TemplatesPane.svelte
@@ -4,6 +4,7 @@
 	import { createEventDispatcher } from 'svelte';
 	import { ContextMenu } from 'bits-ui';
 	import { Plus, Trash } from 'lucide-svelte';
+	import StatusSpinner from './StatusSpinner.svelte';
 
 	export let templates;
 	let dispatch = createEventDispatcher();
@@ -26,15 +27,25 @@
 		}
 	}
 
+	let deleting = false;
+	let delMessage = null;
+	let success = -1;
+
 	async function deleteTemplate(event) {
-		const delId = event.target.id;
+		const delId = event.currentTarget.id;
 
 		if (!delId) {
 			console.error('Template ID is missing');
 			return;
 		}
 
+		if (delId === clickedId) {
+			dispatch('onTemplateClick', null);
+		}
+
 		try {
+			delMessage = `Deleting record ${delId}`;
+			deleting = true;
 			// Delete the template
 			const deleteResponse = await fetch(`/api/templates?id=${delId}`, {
 				method: 'DELETE'
@@ -43,19 +54,35 @@
 			if (deleteResponse.ok) {
 				const deleteResult = await deleteResponse.json();
 				console.log('Template deleted successfully:', deleteResult);
+				delMessage = `Deleted`;
+				success = 1;
 
 				dispatch('templatesModified');
 			} else {
 				const error = await deleteResponse.json();
 				console.error('Error deleting template:', error);
+				delMessage = `Delete failed`;
+				success = 0;
 			}
 		} catch (err) {
 			console.error('Error during API call:', err);
+			delMessage = `Delete failed`;
+			success = 0;
+		} finally {
+			setInterval(() => {
+				deleting = false;
+				success = -1;
+			}, 3000);
 		}
 	}
 </script>
 
-<ScrollArea.Root class="h-[480px] w-full px-0 2xl:h-[784px]">
+{#if deleting}
+	<div class="absolute bottom-0 right-0">
+		<StatusSpinner bind:msg={delMessage} {success} />
+	</div>
+{/if}
+<ScrollArea.Root class=" h-[480px] w-full px-0 2xl:h-[784px]">
 	<ScrollArea.Viewport class="h-full w-full">
 		<div class="flex w-full justify-end">
 			<Button.Root
@@ -88,10 +115,11 @@
 									<Button.Root
 										class="flex items-center justify-center gap-3"
 										on:click={deleteTemplate}
+										id={rec.id}
 									>
-										<Trash size={15} id={rec.id} />
+										<Trash size={15} />
 
-										<div class="text-base" id={rec.id}>Delete</div>
+										<div class="text-base">Delete</div>
 									</Button.Root>
 								</ContextMenu.Item>
 							</ContextMenu.Content>
diff --git a/src/lib/components/UploadPane.svelte b/src/lib/components/UploadPane.svelte
index ddff662..6816eef 100644
--- a/src/lib/components/UploadPane.svelte
+++ b/src/lib/components/UploadPane.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
-	import { AudioLines, Upload } from 'lucide-svelte';
+	import { CircleX, AudioLines, CircleCheck, Upload } from 'lucide-svelte';
 	import { createEventDispatcher } from 'svelte';
 	import { Button, Progress } from 'bits-ui';
 	import StatusSpinner from './StatusSpinner.svelte';
 
 	let draggedFiles: File[] = [];
+	let selectedFiles: File[] = [];
 	const dispatch = createEventDispatcher();
 	let uploading = false;
+	let error = false;
 
 	// Function to validate if the file is an audio file
 	function isValidAudioFile(file: File): boolean {
@@ -25,33 +27,41 @@
 			});
 
 			if (!response.ok) {
+				error = true;
 				throw new Error(`Failed to upload ${file.name}`);
 			}
 			const result = await response.json();
 
 			console.log(`Upload successful for ${file.name}:`, result);
 		} catch (error) {
-			console.log('hit api ');
+			error = true;
 			console.error(`Error uploading file ${file.name}:`, error);
 		}
 	}
 
 	let nfiles = 0;
+	let ctr = 0;
 	let currFile;
 
 	// Function to iterate over all files and upload only valid audio files
 	async function uploadFiles(files: File[]) {
 		nfiles = files.length;
+		uploading = true;
 		for (const file of files) {
 			currFile = file.name;
 			if (isValidAudioFile(file)) {
-				uploading = true;
 				await uploadFile(file); // Upload only if the file is valid
-				uploading = false;
 			} else {
+				error = true;
 				console.error(`Invalid file type: ${file.name} (${file.type})`);
 			}
+			ctr = ctr + 1;
 		}
+		setTimeout(() => {
+			uploading = false;
+			ctr = 0;
+			nfiles = 0;
+		}, 1000); // Delay for 2 seconds
 	}
 
 	// Drag & Drop Handlers
@@ -69,30 +79,69 @@
 		await uploadFiles(draggedFiles);
 		dispatch('onUpload');
 	}
+
+	// Handle file selection from input dialog
+	function handleFileSelect(event: Event) {
+		const input = event.target as HTMLInputElement;
+		if (input.files) {
+			selectedFiles = Array.from(input.files); // Get files from the input
+			uploadFiles(selectedFiles);
+			dispatch('onUpload');
+		}
+	}
+
+	// Trigger the file input dialog when the box is clicked
+	function triggerFileInput() {
+		document.getElementById('fileInput')!.click(); // Simulate click on hidden input
+	}
 </script>
 
 <div class="w-full">
 	<!-- Drag and Drop Area -->
 	<div
-		class="my-4 flex h-[150px] w-full items-center justify-center border border-dashed border-carbongray-200 text-carbongray-300 dark:border-carbongray-600"
+		class="my-4 flex h-[150px] w-full cursor-pointer items-center justify-center border border-dashed border-carbongray-200 text-carbongray-300 dark:border-carbongray-600"
 		on:dragover={handleDragOver}
 		on:drop={handleDrop}
+		on:click={triggerFileInput}
 	>
 		<div class="flex flex-col items-center justify-center">
-			<div>Drag and Drop audio</div>
 			{#if uploading}
-				<StatusSpinner msg={'Uploading'} />
+				{#if ctr < nfiles}
+					<StatusSpinner msg={'Uploading'} />
+					<Progress.Root
+						bind:value={ctr}
+						max={nfiles}
+						class="relative h-1 w-[100px] overflow-hidden rounded-full bg-carbongray-100"
+					>
+						<div
+							class="h-full w-full bg-carbongray-700 transition-all duration-1000 ease-in-out"
+							style={`transform: translateX(-${100 - (100 * (ctr ?? 0)) / nfiles}%)`}
+						></div>
+					</Progress.Root>
+					<div class="text-sm">
+						Uploading {currFile}
+					</div>
+				{:else if !error}
+					<CircleCheck size={40} class="animate-ping" />
+				{:else}
+					<div class="flex flex-col items-center gap-2">
+						<div class="text-base">Upload failed</div>
+						<CircleX size={40} class="animate-pulse" color={'red'} />
+					</div>
+				{/if}
 			{:else}
+				<div>Drag and Drop audio</div>
 				<Upload size={40} />
+				<div class="mt-6">Or click to select</div>
 			{/if}
 		</div>
 	</div>
-
-	<!-- Upload Button -->
-	<Button.Root
-		class="flex items-center gap-1 rounded-md bg-black p-1 text-white hover:bg-carbongray-600 dark:bg-carbongray-700 dark:hover:bg-carbongray-600"
-	>
-		<div class="text-base">Upload</div>
-		<AudioLines size={20} />
-	</Button.Root>
+	<input
+		id="fileInput"
+		type="file"
+		accept="audio/*"
+		class="hidden"
+		on:change={handleFileSelect}
+		multiple
+	/>
 </div>
diff --git a/src/routes/api/templates/+server.ts b/src/routes/api/templates/+server.ts
index b482520..ed50199 100644
--- a/src/routes/api/templates/+server.ts
+++ b/src/routes/api/templates/+server.ts
@@ -62,3 +62,35 @@ export const POST: RequestHandler = async ({ request, locals }) => {
 		});
 	}
 };
+
+export const DELETE: RequestHandler = async ({ url, locals }) => {
+	const pb = locals.pb;
+	await ensureCollectionExists(pb);
+
+	try {
+		// Extract the 'id' query parameter from the request URL
+		const id = url.searchParams.get('id');
+
+		if (!id) {
+			return new Response(JSON.stringify({ error: 'Record ID is required' }), {
+				status: 400,
+				headers: { 'Content-Type': 'application/json' }
+			});
+		}
+
+		// Delete the record from the PocketBase collection 'templates'
+		await pb.collection('templates').delete(id);
+
+		// Respond with a success message
+		return new Response(JSON.stringify({ message: 'Record deleted successfully' }), {
+			status: 200,
+			headers: { 'Content-Type': 'application/json' }
+		});
+	} catch (err) {
+		console.log('API records | Error deleting record', err);
+		return new Response(JSON.stringify({ error: err.message }), {
+			status: 500,
+			headers: { 'Content-Type': 'application/json' }
+		});
+	}
+};