diff --git a/enjoy/src/renderer/components/medias/media-caption.tsx b/enjoy/src/renderer/components/medias/media-caption.tsx
index 17519ada..99d02847 100644
--- a/enjoy/src/renderer/components/medias/media-caption.tsx
+++ b/enjoy/src/renderer/components/medias/media-caption.tsx
@@ -337,33 +337,8 @@ export const MediaCaption = () => {
       <ScrollArea className="flex-1 px-6 py-4 font-serif h-full border shadow-lg rounded-lg">
         <div className="flex flex-wrap mb-4">
           {/* use the words splitted by caption text if it is matched with the timeline length, otherwise use the timeline */}
-          {caption.text.split(" ").length === caption.timeline.length
-            ? caption.text.split(" ").map((word, index) => (
-                <div
-                  key={index}
-                  id={`word-${currentSegmentIndex}-${index}`}
-                  className={`pr-2 pb-2 cursor-pointer hover:bg-red-500/10 ${
-                    index === activeIndex ? "text-red-500" : ""
-                  } ${selectedIndices.includes(index) ? "bg-red-500/10" : ""}`}
-                  onClick={() => toggleRegion(index)}
-                >
-                  <div className="">
-                    <div className="text-2xl">{word}</div>
-                    {displayIpa && (
-                      <div className="text-muted-foreground">
-                        {caption.timeline[index].timeline
-                          .map((t) =>
-                            t.timeline
-                              .map((s) => convertIpaToNormal(s.text))
-                              .join("")
-                          )
-                          .join(" · ")}
-                      </div>
-                    )}
-                  </div>
-                </div>
-              ))
-            : (caption.timeline || []).map((w, index) => (
+          {caption.text.includes("-")
+            ? (caption.timeline || []).map((w, index) => (
                 <div
                   key={index}
                   id={`word-${currentSegmentIndex}-${index}`}
@@ -391,6 +366,31 @@ export const MediaCaption = () => {
                     )}
                   </div>
                 </div>
+              ))
+            : caption.text.split(" ").map((word, index) => (
+                <div
+                  key={index}
+                  id={`word-${currentSegmentIndex}-${index}`}
+                  className={`pr-2 pb-2 cursor-pointer hover:bg-red-500/10 ${
+                    index === activeIndex ? "text-red-500" : ""
+                  } ${selectedIndices.includes(index) ? "bg-red-500/10" : ""}`}
+                  onClick={() => toggleRegion(index)}
+                >
+                  <div className="">
+                    <div className="text-2xl">{word}</div>
+                    {displayIpa && (
+                      <div className="text-muted-foreground">
+                        {caption.timeline[index].timeline
+                          .map((t) =>
+                            t.timeline
+                              .map((s) => convertIpaToNormal(s.text))
+                              .join("")
+                          )
+                          .join(" · ")}
+                      </div>
+                    )}
+                  </div>
+                </div>
               ))}
         </div>
 
diff --git a/enjoy/src/renderer/components/medias/media-loading-modal.tsx b/enjoy/src/renderer/components/medias/media-loading-modal.tsx
index 51d05357..a64d8e7d 100644
--- a/enjoy/src/renderer/components/medias/media-loading-modal.tsx
+++ b/enjoy/src/renderer/components/medias/media-loading-modal.tsx
@@ -31,7 +31,7 @@ export const MediaLoadingModal = () => {
   } = useContext(MediaPlayerProviderContext);
 
   return (
-    <AlertDialog open={!decoded || !Boolean(transcription?.result)}>
+    <AlertDialog open={!decoded || !Boolean(transcription?.result?.timeline)}>
       <AlertDialogOverlay className="z-[100]" />
       <AlertDialogContent className="z-[100]">
         <AlertDialogHeader>
@@ -59,7 +59,7 @@ export const MediaLoadingModal = () => {
               <LoaderIcon className="w-4 h-4 animate-spin" />
               <span>{t("loadingTranscription")}</span>
             </div>
-          ) : transcription.result ? (
+          ) : transcription.result?.timeline ? (
             <div className="flex items-center space-x-4">
               <CheckCircleIcon className="w-4 h-4 text-green-500" />
               <span>{t("transcribedSuccessfully")}</span>
diff --git a/enjoy/src/renderer/hooks/use-transcriptions.tsx b/enjoy/src/renderer/hooks/use-transcriptions.tsx
index 0a35921f..9671fead 100644
--- a/enjoy/src/renderer/hooks/use-transcriptions.tsx
+++ b/enjoy/src/renderer/hooks/use-transcriptions.tsx
@@ -54,10 +54,8 @@ export const useTranscriptions = (media: AudioType | VideoType) => {
     };
 
   const generateTranscription = async () => {
-    if (transcription?.targetId === media.id) return;
-
     let originalText: string;
-    if (transcription) {
+    if (transcription?.targetId === media.id) {
       originalText = transcription.result?.originalText;
     } else {
       const r = await findOrCreateTranscription();