diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 7b426e19..0360e2e5 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { useCallback, useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useDispatch } from 'react-redux';
@@ -35,6 +35,7 @@ function Upload({
   }>();
 
   const { t } = useTranslation();
+  const setTimeoutRef = useRef<number | null>();
 
   const urlOptions: { label: string; value: string }[] = [
     { label: 'Crawler', value: 'crawler' },
@@ -48,6 +49,31 @@ function Upload({
     value: 'url',
   });
 
+  useEffect(() => {
+    if (setTimeoutRef.current) {
+      clearTimeout(setTimeoutRef.current);
+    }
+  }, []);
+
+  function ProgressBar({ progress }: { progress: number }) {
+    return (
+      <div className="my-5 w-[50%]">
+        <div
+          className={`h-4 overflow-hidden rounded-lg border border-purple-30 text-xs text-white outline-none `}
+        >
+          <div
+            className={`h-full border-none p-1 w-${
+              progress || 0
+            }%  flex items-center justify-center bg-purple-30 outline-none transition-all`}
+            style={{ width: `${progress || 0}%` }}
+          >
+            {progress >= 5 && `${progress}%`}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   function Progress({
     title,
     isCancellable = false,
@@ -64,15 +90,10 @@ function Upload({
         <p className={`ml-5 text-xl text-red-400 ${isFailed ? '' : 'hidden'}`}>
           Over the token limit, please consider uploading smaller document
         </p>
-        <p className="mt-10 text-2xl">{progress?.percentage || 0}%</p>
+        {/* <p className="mt-10 text-2xl">{progress?.percentage || 0}%</p> */}
 
-        <div className="mb-10 w-[50%]">
-          <div className="h-1 w-[100%] bg-purple-30"></div>
-          <div
-            className={`relative bottom-1 h-1 bg-purple-30 transition-all`}
-            style={{ width: `${progress?.percentage || 0}%` }}
-          ></div>
-        </div>
+        {/* progress bar */}
+        <ProgressBar progress={progress?.percentage as number} />
 
         <button
           onClick={() => {
@@ -194,7 +215,9 @@ function Upload({
     });
     xhr.onload = () => {
       const { task_id } = JSON.parse(xhr.responseText);
-      setProgress({ type: 'TRAINIING', percentage: 0, taskId: task_id });
+      setTimeoutRef.current = setTimeout(() => {
+        setProgress({ type: 'TRAINIING', percentage: 0, taskId: task_id });
+      }, 3000);
     };
     xhr.open('POST', `${apiHost + '/api/upload'}`);
     xhr.send(formData);
@@ -223,7 +246,9 @@ function Upload({
     });
     xhr.onload = () => {
       const { task_id } = JSON.parse(xhr.responseText);
-      setProgress({ type: 'TRAINIING', percentage: 0, taskId: task_id });
+      setTimeoutRef.current = setTimeout(() => {
+        setProgress({ type: 'TRAINIING', percentage: 0, taskId: task_id });
+      }, 3000);
     };
     xhr.open('POST', `${apiHost + '/api/remote'}`);
     xhr.send(formData);