diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index 75cd073e..129a1d12 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -146,6 +146,19 @@ export const removeFirstHashWord = (inputString) => {
 	return resultString;
 };
 
+export const transformFileName = (fileName) => {
+	// Convert to lowercase
+	const lowerCaseFileName = fileName.toLowerCase();
+
+	// Remove special characters using regular expression
+	const sanitizedFileName = lowerCaseFileName.replace(/[^\w\s]/g, '');
+
+	// Replace spaces with dashes
+	const finalFileName = sanitizedFileName.replace(/\s+/g, '-');
+
+	return finalFileName;
+};
+
 export const calculateSHA256 = async (file) => {
 	// Create a FileReader to read the file asynchronously
 	const reader = new FileReader();
diff --git a/src/routes/(app)/documents/+page.svelte b/src/routes/(app)/documents/+page.svelte
index 747adec8..f0ad1a54 100644
--- a/src/routes/(app)/documents/+page.svelte
+++ b/src/routes/(app)/documents/+page.svelte
@@ -9,6 +9,7 @@
 
 	import { SUPPORTED_FILE_TYPE } from '$lib/constants';
 	import { uploadDocToVectorDB } from '$lib/apis/rag';
+	import { transformFileName } from '$lib/utils';
 
 	let importFiles = '';
 
@@ -30,7 +31,7 @@
 				localStorage.token,
 				res.collection_name,
 				res.filename,
-				res.filename,
+				transformFileName(res.filename),
 				res.filename
 			);
 			await documents.set(await getDocs(localStorage.token));
@@ -165,14 +166,70 @@
 				<hr class=" dark:border-gray-700 my-2.5" />
 				<div class=" flex space-x-4 cursor-pointer w-full mb-3">
 					<div class=" flex flex-1 space-x-4 cursor-pointer w-full">
-						<a href={`#`}>
-							<div class=" flex-1 self-center pl-5">
+						<div class=" flex items-center space-x-3">
+							<div class="p-2.5 bg-red-400 text-white rounded-lg">
+								{#if doc}
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 24 24"
+										fill="currentColor"
+										class="w-6 h-6"
+									>
+										<path
+											fill-rule="evenodd"
+											d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z"
+											clip-rule="evenodd"
+										/>
+										<path
+											d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z"
+										/>
+									</svg>
+								{:else}
+									<svg
+										class=" w-6 h-6 translate-y-[0.5px]"
+										fill="currentColor"
+										viewBox="0 0 24 24"
+										xmlns="http://www.w3.org/2000/svg"
+										><style>
+											.spinner_qM83 {
+												animation: spinner_8HQG 1.05s infinite;
+											}
+											.spinner_oXPr {
+												animation-delay: 0.1s;
+											}
+											.spinner_ZTLf {
+												animation-delay: 0.2s;
+											}
+											@keyframes spinner_8HQG {
+												0%,
+												57.14% {
+													animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
+													transform: translate(0);
+												}
+												28.57% {
+													animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
+													transform: translateY(-6px);
+												}
+												100% {
+													transform: translate(0);
+												}
+											}
+										</style><circle class="spinner_qM83" cx="4" cy="12" r="2.5" /><circle
+											class="spinner_qM83 spinner_oXPr"
+											cx="12"
+											cy="12"
+											r="2.5"
+										/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="2.5" /></svg
+									>
+								{/if}
+							</div>
+							<div class=" flex-1 self-center flex-1">
 								<div class=" font-bold line-clamp-1">#{doc.name} ({doc.filename})</div>
 								<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
 									{doc.title}
 								</div>
 							</div>
-						</a>
+						</div>
 					</div>
 					<div class="flex flex-row space-x-1 self-center">
 						<a