diff --git a/package-lock.json b/package-lock.json
index 9fdfdb8a4..43deeace9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "open-webui",
-	"version": "v1.0.0-alpha.101",
+	"version": "0.1.106",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "open-webui",
-			"version": "v1.0.0-alpha.101",
+			"version": "0.1.106",
 			"dependencies": {
 				"@sveltejs/adapter-node": "^1.3.1",
 				"async": "^3.2.5",
@@ -17,7 +17,7 @@
 				"js-sha256": "^0.10.1",
 				"katex": "^0.16.9",
 				"marked": "^9.1.0",
-				"svelte-french-toast": "^1.2.0",
+				"svelte-sonner": "^0.3.19",
 				"tippy.js": "^6.3.7",
 				"uuid": "^9.0.1"
 			},
@@ -3211,17 +3211,6 @@
 				}
 			}
 		},
-		"node_modules/svelte-french-toast": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/svelte-french-toast/-/svelte-french-toast-1.2.0.tgz",
-			"integrity": "sha512-5PW+6RFX3xQPbR44CngYAP1Sd9oCq9P2FOox4FZffzJuZI2mHOB7q5gJBVnOiLF5y3moVGZ7u2bYt7+yPAgcEQ==",
-			"dependencies": {
-				"svelte-writable-derived": "^3.1.0"
-			},
-			"peerDependencies": {
-				"svelte": "^3.57.0 || ^4.0.0"
-			}
-		},
 		"node_modules/svelte-hmr": {
 			"version": "0.15.3",
 			"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz",
@@ -3307,15 +3296,12 @@
 				"node": ">=12"
 			}
 		},
-		"node_modules/svelte-writable-derived": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/svelte-writable-derived/-/svelte-writable-derived-3.1.0.tgz",
-			"integrity": "sha512-cTvaVFNIJ036vSDIyPxJYivKC7ZLtcFOPm1Iq6qWBDo1fOHzfk6ZSbwaKrxhjgy52Rbl5IHzRcWgos6Zqn9/rg==",
-			"funding": {
-				"url": "https://ko-fi.com/pixievoltno1"
-			},
+		"node_modules/svelte-sonner": {
+			"version": "0.3.19",
+			"resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-0.3.19.tgz",
+			"integrity": "sha512-jpPOgLtHwRaB6Vqo2dUQMv15/yUV/BQWTjKpEqQ11uqRSHKjAYUKZyGrHB2cQsGmyjR0JUzBD58btpgNqINQ/Q==",
 			"peerDependencies": {
-				"svelte": "^3.2.1 || ^4.0.0-next.1"
+				"svelte": ">=3 <5"
 			}
 		},
 		"node_modules/tailwindcss": {
@@ -5882,14 +5868,6 @@
 				"postcss-scss": "^4.0.8"
 			}
 		},
-		"svelte-french-toast": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/svelte-french-toast/-/svelte-french-toast-1.2.0.tgz",
-			"integrity": "sha512-5PW+6RFX3xQPbR44CngYAP1Sd9oCq9P2FOox4FZffzJuZI2mHOB7q5gJBVnOiLF5y3moVGZ7u2bYt7+yPAgcEQ==",
-			"requires": {
-				"svelte-writable-derived": "^3.1.0"
-			}
-		},
 		"svelte-hmr": {
 			"version": "0.15.3",
 			"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz",
@@ -5920,10 +5898,10 @@
 				}
 			}
 		},
-		"svelte-writable-derived": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/svelte-writable-derived/-/svelte-writable-derived-3.1.0.tgz",
-			"integrity": "sha512-cTvaVFNIJ036vSDIyPxJYivKC7ZLtcFOPm1Iq6qWBDo1fOHzfk6ZSbwaKrxhjgy52Rbl5IHzRcWgos6Zqn9/rg==",
+		"svelte-sonner": {
+			"version": "0.3.19",
+			"resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-0.3.19.tgz",
+			"integrity": "sha512-jpPOgLtHwRaB6Vqo2dUQMv15/yUV/BQWTjKpEqQ11uqRSHKjAYUKZyGrHB2cQsGmyjR0JUzBD58btpgNqINQ/Q==",
 			"requires": {}
 		},
 		"tailwindcss": {
diff --git a/package.json b/package.json
index 2ce66e783..ce9c8fcce 100644
--- a/package.json
+++ b/package.json
@@ -49,8 +49,8 @@
 		"js-sha256": "^0.10.1",
 		"katex": "^0.16.9",
 		"marked": "^9.1.0",
-		"svelte-french-toast": "^1.2.0",
+		"svelte-sonner": "^0.3.19",
 		"tippy.js": "^6.3.7",
 		"uuid": "^9.0.1"
 	}
-}
\ No newline at end of file
+}
diff --git a/src/lib/components/admin/EditUserModal.svelte b/src/lib/components/admin/EditUserModal.svelte
index 09005b30a..d8ceb1457 100644
--- a/src/lib/components/admin/EditUserModal.svelte
+++ b/src/lib/components/admin/EditUserModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import dayjs from 'dayjs';
 	import { createEventDispatcher } from 'svelte';
 	import { onMount } from 'svelte';
diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index f9ff8fc39..81a581be6 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import { onMount, tick } from 'svelte';
 	import { settings } from '$lib/stores';
 	import { blobToFile, calculateSHA256, findWordIndices } from '$lib/utils';
diff --git a/src/lib/components/chat/MessageInput/Documents.svelte b/src/lib/components/chat/MessageInput/Documents.svelte
index 616cf7be2..03eea0c62 100644
--- a/src/lib/components/chat/MessageInput/Documents.svelte
+++ b/src/lib/components/chat/MessageInput/Documents.svelte
@@ -4,7 +4,7 @@
 	import { documents } from '$lib/stores';
 	import { removeFirstHashWord, isValidHttpUrl } from '$lib/utils';
 	import { tick } from 'svelte';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	export let prompt = '';
 
diff --git a/src/lib/components/chat/MessageInput/Models.svelte b/src/lib/components/chat/MessageInput/Models.svelte
index e671bceca..cedd1d5b6 100644
--- a/src/lib/components/chat/MessageInput/Models.svelte
+++ b/src/lib/components/chat/MessageInput/Models.svelte
@@ -3,7 +3,7 @@
 	import { models } from '$lib/stores';
 	import { splitStream } from '$lib/utils';
 	import { tick } from 'svelte';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	export let prompt = '';
 	export let user = null;
diff --git a/src/lib/components/chat/MessageInput/PromptCommands.svelte b/src/lib/components/chat/MessageInput/PromptCommands.svelte
index 962a7f1d1..da3c1149b 100644
--- a/src/lib/components/chat/MessageInput/PromptCommands.svelte
+++ b/src/lib/components/chat/MessageInput/PromptCommands.svelte
@@ -2,7 +2,7 @@
 	import { prompts } from '$lib/stores';
 	import { findWordIndices } from '$lib/utils';
 	import { tick } from 'svelte';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	export let prompt = '';
 	let selectedCommandIdx = 0;
diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte
index ca65b530d..fd0a6e835 100644
--- a/src/lib/components/chat/Messages.svelte
+++ b/src/lib/components/chat/Messages.svelte
@@ -4,7 +4,7 @@
 	import { chats, config, modelfiles, settings, user } from '$lib/stores';
 	import { tick } from 'svelte';
 
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import { getChatList, updateChatById } from '$lib/apis/chats';
 
 	import UserMessage from './Messages/UserMessage.svelte';
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 9ad58c785..69b301e32 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import dayjs from 'dayjs';
 	import { marked } from 'marked';
 	import tippy from 'tippy.js';
diff --git a/src/lib/components/chat/ModelSelector.svelte b/src/lib/components/chat/ModelSelector.svelte
index 8f4789168..eb5fe67be 100644
--- a/src/lib/components/chat/ModelSelector.svelte
+++ b/src/lib/components/chat/ModelSelector.svelte
@@ -2,7 +2,7 @@
 	import { setDefaultModels } from '$lib/apis/configs';
 	import { models, showSettings, settings, user } from '$lib/stores';
 	import { onMount, tick } from 'svelte';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	export let selectedModels = [''];
 	export let disabled = false;
diff --git a/src/lib/components/chat/Settings/Account.svelte b/src/lib/components/chat/Settings/Account.svelte
index 2d87acaf7..66d107332 100644
--- a/src/lib/components/chat/Settings/Account.svelte
+++ b/src/lib/components/chat/Settings/Account.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import { onMount } from 'svelte';
 
 	import { user } from '$lib/stores';
diff --git a/src/lib/components/chat/Settings/Account/UpdatePassword.svelte b/src/lib/components/chat/Settings/Account/UpdatePassword.svelte
index f15d0b50d..dc3d35528 100644
--- a/src/lib/components/chat/Settings/Account/UpdatePassword.svelte
+++ b/src/lib/components/chat/Settings/Account/UpdatePassword.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import { updateUserPassword } from '$lib/apis/auths';
 
 	let show = false;
diff --git a/src/lib/components/chat/Settings/Audio.svelte b/src/lib/components/chat/Settings/Audio.svelte
index 289ec0bb0..5cc45f434 100644
--- a/src/lib/components/chat/Settings/Audio.svelte
+++ b/src/lib/components/chat/Settings/Audio.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount } from 'svelte';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	const dispatch = createEventDispatcher();
 
 	export let saveSettings: Function;
diff --git a/src/lib/components/chat/Settings/Chats.svelte b/src/lib/components/chat/Settings/Chats.svelte
index b8befb68c..bab3acc77 100644
--- a/src/lib/components/chat/Settings/Chats.svelte
+++ b/src/lib/components/chat/Settings/Chats.svelte
@@ -15,7 +15,7 @@
 	import { getImportOrigin, convertOpenAIChats } from '$lib/utils';
 	import { onMount } from 'svelte';
 	import { goto } from '$app/navigation';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	export let saveSettings: Function;
 	// Chats
diff --git a/src/lib/components/chat/Settings/Connections.svelte b/src/lib/components/chat/Settings/Connections.svelte
index f4c0e04df..fc0de9a1c 100644
--- a/src/lib/components/chat/Settings/Connections.svelte
+++ b/src/lib/components/chat/Settings/Connections.svelte
@@ -5,7 +5,7 @@
 
 	import { getOllamaAPIUrl, getOllamaVersion, updateOllamaAPIUrl } from '$lib/apis/ollama';
 	import { getOpenAIKey, getOpenAIUrl, updateOpenAIKey, updateOpenAIUrl } from '$lib/apis/openai';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	export let getModels: Function;
 
diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index 43826f1aa..567c67a8f 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import { createEventDispatcher, onMount } from 'svelte';
 	const dispatch = createEventDispatcher();
 
diff --git a/src/lib/components/chat/Settings/Images.svelte b/src/lib/components/chat/Settings/Images.svelte
index cf64b7d4c..b36eae12e 100644
--- a/src/lib/components/chat/Settings/Images.svelte
+++ b/src/lib/components/chat/Settings/Images.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { config, user } from '$lib/stores';
diff --git a/src/lib/components/chat/Settings/Interface.svelte b/src/lib/components/chat/Settings/Interface.svelte
index f2dfac5ca..e8dd77c47 100644
--- a/src/lib/components/chat/Settings/Interface.svelte
+++ b/src/lib/components/chat/Settings/Interface.svelte
@@ -3,7 +3,7 @@
 	import { setDefaultPromptSuggestions } from '$lib/apis/configs';
 	import { config, models, user } from '$lib/stores';
 	import { createEventDispatcher, onMount } from 'svelte';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	const dispatch = createEventDispatcher();
 
 	export let saveSettings: Function;
diff --git a/src/lib/components/chat/Settings/Models.svelte b/src/lib/components/chat/Settings/Models.svelte
index 92e6b7dd5..dc73ab069 100644
--- a/src/lib/components/chat/Settings/Models.svelte
+++ b/src/lib/components/chat/Settings/Models.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import queue from 'async/queue';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	import { createModel, deleteModel, getOllamaVersion, pullModel } from '$lib/apis/ollama';
 	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index b112180b3..b7b21e4f4 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import { models, settings, user } from '$lib/stores';
 
 	import { getOllamaModels } from '$lib/apis/ollama';
diff --git a/src/lib/components/documents/AddDocModal.svelte b/src/lib/components/documents/AddDocModal.svelte
index bf24f9c6f..922996fdf 100644
--- a/src/lib/components/documents/AddDocModal.svelte
+++ b/src/lib/components/documents/AddDocModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import dayjs from 'dayjs';
 	import { onMount } from 'svelte';
 
diff --git a/src/lib/components/documents/EditDocModal.svelte b/src/lib/components/documents/EditDocModal.svelte
index 4974da5a1..f37232a50 100644
--- a/src/lib/components/documents/EditDocModal.svelte
+++ b/src/lib/components/documents/EditDocModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import dayjs from 'dayjs';
 	import { onMount } from 'svelte';
 
diff --git a/src/lib/components/documents/Settings/General.svelte b/src/lib/components/documents/Settings/General.svelte
index 503cbc84d..9bf496a23 100644
--- a/src/lib/components/documents/Settings/General.svelte
+++ b/src/lib/components/documents/Settings/General.svelte
@@ -9,7 +9,7 @@
 	} from '$lib/apis/rag';
 	import { documents } from '$lib/stores';
 	import { onMount } from 'svelte';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	export let saveHandler: Function;
 
diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
index 986eca381..95923c75a 100644
--- a/src/lib/components/layout/Navbar.svelte
+++ b/src/lib/components/layout/Navbar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 238b9e66f..711e4fd64 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -16,7 +16,7 @@
 		updateChatById,
 		getAllChatTags
 	} from '$lib/apis/chats';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import { slide } from 'svelte/transition';
 	import { WEBUI_BASE_URL } from '$lib/constants';
 
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index ceee2209d..8afe2fd84 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import { openDB, deleteDB } from 'idb';
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
index 581db7c09..b1407f26e 100644
--- a/src/routes/(app)/+page.svelte
+++ b/src/routes/(app)/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { v4 as uuidv4 } from 'uuid';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	import { onMount, tick } from 'svelte';
 	import { goto } from '$app/navigation';
diff --git a/src/routes/(app)/admin/+page.svelte b/src/routes/(app)/admin/+page.svelte
index b1169709e..13fb99b6f 100644
--- a/src/routes/(app)/admin/+page.svelte
+++ b/src/routes/(app)/admin/+page.svelte
@@ -4,7 +4,7 @@
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	import { updateUserRole, getUsers, deleteUserById } from '$lib/apis/users';
 	import { getSignUpEnabledStatus, toggleSignUpEnabledStatus } from '$lib/apis/auths';
diff --git a/src/routes/(app)/c/[id]/+page.svelte b/src/routes/(app)/c/[id]/+page.svelte
index 32af2b178..1ff694649 100644
--- a/src/routes/(app)/c/[id]/+page.svelte
+++ b/src/routes/(app)/c/[id]/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { v4 as uuidv4 } from 'uuid';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	import { onMount, tick } from 'svelte';
 	import { goto } from '$app/navigation';
diff --git a/src/routes/(app)/documents/+page.svelte b/src/routes/(app)/documents/+page.svelte
index 79fe691b8..72b4987c3 100644
--- a/src/routes/(app)/documents/+page.svelte
+++ b/src/routes/(app)/documents/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
diff --git a/src/routes/(app)/modelfiles/+page.svelte b/src/routes/(app)/modelfiles/+page.svelte
index 143984179..cb3b9d70c 100644
--- a/src/routes/(app)/modelfiles/+page.svelte
+++ b/src/routes/(app)/modelfiles/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
diff --git a/src/routes/(app)/modelfiles/create/+page.svelte b/src/routes/(app)/modelfiles/create/+page.svelte
index 12ffe063e..d54e9709c 100644
--- a/src/routes/(app)/modelfiles/create/+page.svelte
+++ b/src/routes/(app)/modelfiles/create/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { v4 as uuidv4 } from 'uuid';
-	import { toast } from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
 	import { settings, user, config, modelfiles, models } from '$lib/stores';
 
diff --git a/src/routes/(app)/modelfiles/edit/+page.svelte b/src/routes/(app)/modelfiles/edit/+page.svelte
index b2a5545c3..4759eb921 100644
--- a/src/routes/(app)/modelfiles/edit/+page.svelte
+++ b/src/routes/(app)/modelfiles/edit/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { v4 as uuidv4 } from 'uuid';
-	import { toast } from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
 
 	import { onMount } from 'svelte';
diff --git a/src/routes/(app)/prompts/+page.svelte b/src/routes/(app)/prompts/+page.svelte
index 784c86939..a02eaf00e 100644
--- a/src/routes/(app)/prompts/+page.svelte
+++ b/src/routes/(app)/prompts/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
diff --git a/src/routes/(app)/prompts/create/+page.svelte b/src/routes/(app)/prompts/create/+page.svelte
index 4dad57955..548aa431b 100644
--- a/src/routes/(app)/prompts/create/+page.svelte
+++ b/src/routes/(app)/prompts/create/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	import { goto } from '$app/navigation';
 	import { prompts } from '$lib/stores';
diff --git a/src/routes/(app)/prompts/edit/+page.svelte b/src/routes/(app)/prompts/edit/+page.svelte
index 0611056a4..f6b2dc5f7 100644
--- a/src/routes/(app)/prompts/edit/+page.svelte
+++ b/src/routes/(app)/prompts/edit/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	import { goto } from '$app/navigation';
 	import { prompts } from '$lib/stores';
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 93ccad19b..7124789b2 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,7 +2,7 @@
 	import { onMount, tick } from 'svelte';
 	import { config, user, theme, WEBUI_NAME } from '$lib/stores';
 	import { goto } from '$app/navigation';
-	import toast, { Toaster } from 'svelte-french-toast';
+	import { Toaster, toast } from 'svelte-sonner';
 
 	import { getBackendConfig } from '$lib/apis';
 	import { getSessionUser } from '$lib/apis/auths';
@@ -68,4 +68,4 @@
 	<slot />
 {/if}
 
-<Toaster />
+<Toaster richColors position="top-right" />
diff --git a/src/routes/auth/+page.svelte b/src/routes/auth/+page.svelte
index 30c5a93ee..3dbe12714 100644
--- a/src/routes/auth/+page.svelte
+++ b/src/routes/auth/+page.svelte
@@ -4,7 +4,7 @@
 	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 	import { WEBUI_NAME, config, user } from '$lib/stores';
 	import { onMount } from 'svelte';
-	import toast from 'svelte-french-toast';
+	import { toast } from 'svelte-sonner';
 
 	let loaded = false;
 	let mode = 'signin';