diff --git a/package.json b/package.json
index d618d49..05a852f 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
 		"dayjs": "^1.11.11",
 		"mixpanel-browser": "^2.53.0",
 		"svelte-persisted-store": "^0.11.0",
+		"svelte-sonner": "^0.3.27",
 		"tippy.js": "^6.3.7"
 	}
 }
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index eb9cce9..cabf983 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -8,6 +8,7 @@
 	import mixpanel from 'mixpanel-browser'
 	import { slide } from 'svelte/transition'
 	import { supabase } from '$lib/db/supabaseClient'
+	import { Toaster } from 'svelte-sonner'
 
 	//Import Mixpanel SDK
 	mixpanel.init(PUBLIC_MIX_TOKEN, {
@@ -24,6 +25,12 @@
 </script>
 
 <main class="h-[100svh] flex flex-col">
+	<Toaster
+		richColors
+		toastOptions={{
+			class: 'py-2'
+		}}
+	/>
 	{#if $navigating}
 		<div
 			class="absolute bg-white bg-opacity-80 flex h-full w-full items-center justify-center z-10"
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 0c47998..ca234f5 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -15,6 +15,7 @@
 	import Icon from '@iconify/svelte'
 	import mixpanel from 'mixpanel-browser'
 	import { onMount, tick } from 'svelte'
+	import { toast } from 'svelte-sonner'
 
 	const paperFields = {
 		id: '',
@@ -46,8 +47,6 @@
 	}
 
 	const removePaper = async (idx: string) => {
-		// const element = document.getElementById(idx)
-		// if (element) inputGroupRef.removeChild(element)
 		paperCount = paperCount.filter((field) => field.id != idx)
 		if (perPaperResult.has(idx)) perPaperResult.delete(idx)
 		perPaperResult = perPaperResult
@@ -86,6 +85,7 @@
 				papers: paperCount
 			})
 			$totalHistoryStore = await getTotalHistory()
+			toast.success('Cost details saved successfully')
 		}
 	}
 
diff --git a/src/routes/(app)/history/+page.svelte b/src/routes/(app)/history/+page.svelte
index 9773555..daaca7f 100644
--- a/src/routes/(app)/history/+page.svelte
+++ b/src/routes/(app)/history/+page.svelte
@@ -5,6 +5,7 @@
 	import Icon from '@iconify/svelte'
 	import days from 'dayjs'
 	import mixpanel from 'mixpanel-browser'
+	import { toast } from 'svelte-sonner'
 
 	export let data
 	let isLoading = false
@@ -19,6 +20,19 @@
 		await deleteHistory(id)
 		await invalidateAll()
 		isLoading = false
+		toast.message('History deleted successfully')
+	}
+
+	const sortedByCreatedAt = (data: any) => {
+		return data.sort((a: any, b: any) => {
+			// Convert 'created_at' strings to Date objects
+			let dateA = new Date(a.created_at)
+			let dateB = new Date(b.created_at)
+
+			if (dateA > dateB) return -1
+			if (dateA < dateB) return 1
+			return 0
+		})
 	}
 </script>
 
@@ -38,7 +52,7 @@
 		<div class="relative flex flex-col h-full gap-2 overflow-y-auto w-full max-w-3xl py-2 z-0">
 			{#if !isLoading}
 				{#if data.histories.length}
-					{#each data.histories as { name, id, final_price, created_at }}
+					{#each sortedByCreatedAt(data.histories) as { name, id, final_price, created_at }}
 						<div
 							class="flex flex-col gap-1 items-center w-full p-1 border border-dashed rounded shadow-sm"
 						>