diff --git a/src/lib/components/admin/Settings/Models.svelte b/src/lib/components/admin/Settings/Models.svelte
index 20c0948d0..6e1daefae 100644
--- a/src/lib/components/admin/Settings/Models.svelte
+++ b/src/lib/components/admin/Settings/Models.svelte
@@ -12,7 +12,8 @@
 		deleteAllModels,
 		getBaseModels,
 		toggleModelById,
-		updateModelById
+		updateModelById,
+		getModelById
 	} from '$lib/apis/models';
 
 	import { getModels } from '$lib/apis';
@@ -36,6 +37,9 @@
 	import Eye from '$lib/components/icons/Eye.svelte';
 	import { copyToClipboard } from '$lib/utils';
 
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+
 	let shiftKey = false;
 
 	let importFiles;
@@ -67,6 +71,24 @@
 
 	let searchValue = '';
 
+	$: {
+		if ($page.url.pathname === '/admin/settings/models/edit') {
+			const modelIdFromUrl = $page.url.searchParams.get('id');
+			if (modelIdFromUrl && models) {
+				const modelExists = models.some((m) => m.id === modelIdFromUrl);
+				if (modelExists) {
+					selectedModelId = modelIdFromUrl;
+				} else {
+					goto('/admin/settings/models', { replaceState: true });
+				}
+			} else if (!modelIdFromUrl) {
+				goto('/admin/settings/models', { replaceState: true });
+			}
+		} else if ($page.url.pathname === '/admin/settings/models' && selectedModelId !== null) {
+			selectedModelId = null;
+		}
+	}
+
 	const downloadModels = async (models) => {
 		let blob = new Blob([JSON.stringify(models)], {
 			type: 'application/json'
@@ -316,7 +338,7 @@
 							class=" flex flex-1 text-left space-x-3.5 cursor-pointer w-full"
 							type="button"
 							on:click={() => {
-								selectedModelId = model.id;
+								goto(`/admin/settings/models/edit?id=${model.id}`);
 							}}
 						>
 							<div class=" self-center w-8">
@@ -380,7 +402,7 @@
 									class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
 									type="button"
 									on:click={() => {
-										selectedModelId = model.id;
+										goto(`/admin/settings/models/edit?id=${model.id}`);
 									}}
 								>
 									<svg
@@ -554,10 +576,10 @@
 			onSubmit={(model) => {
 				console.log(model);
 				upsertModelHandler(model);
-				selectedModelId = null;
+				goto('/admin/settings/models');
 			}}
 			onBack={() => {
-				selectedModelId = null;
+				goto('/admin/settings/models');
 			}}
 		/>
 	{/if}
diff --git a/src/routes/(app)/admin/settings/models/edit/+page.svelte b/src/routes/(app)/admin/settings/models/edit/+page.svelte
new file mode 100644
index 000000000..2b3ffe2d4
--- /dev/null
+++ b/src/routes/(app)/admin/settings/models/edit/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Models from '$lib/components/admin/Settings/Models.svelte';
+</script>
+
+<Models />