diff --git a/components/page/detail-news.tsx b/components/page/detail-news.tsx
index 0cfb100..b473064 100644
--- a/components/page/detail-news.tsx
+++ b/components/page/detail-news.tsx
@@ -67,22 +67,22 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
     switch (platform) {
       case "facebook":
         shareLink = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
-          urls
+          urls,
         )}`;
         break;
       case "x":
         shareLink = `https://x.com/intent/tweet?url=${encodeURIComponent(
-          urls
+          urls,
         )}&text=${encodeURIComponent(shareText)}`;
         break;
       case "linkedin":
         shareLink = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(
-          urls
+          urls,
         )}`;
         break;
       case "whatsapp":
         shareLink = `https://wa.me/?text=${encodeURIComponent(
-          shareText + " " + urls
+          shareText + " " + urls,
         )}`;
         break;
       default:
@@ -97,14 +97,14 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
     window.open(
       shareLink,
       "_blank",
-      `width=${popupWidth},height=${popupHeight},top=${top},left=${left},resizable=no,scrollbars=no,toolbar=no,menubar=no,status=no`
+      `width=${popupWidth},height=${popupHeight},top=${top},left=${left},resizable=no,scrollbars=no,toolbar=no,menubar=no,status=no`,
     );
   };
 
   useEffect(() => {
     if (listArticle) {
       const index = listArticle?.findIndex(
-        (item: any) => item?.id === data?.id
+        (item: any) => item?.id === data?.id,
       );
       if (index - 1 == -1) {
         setPrevArticle("");
@@ -165,6 +165,18 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
           {data?.viewCount === null ? 0 : data?.viewCount}
         </p>
       </div>
+      {data?.files?.length < 1 && data?.thumbnailUrl !== "" && (
+        <Image
+          classNames={{
+            wrapper: "!w-full !max-w-full",
+            img: "!w-full",
+          }}
+          alt="Main Image"
+          src={data.thumbnailUrl}
+          className="object-cover w-[100%] rounded-md"
+        />
+      )}{" "}
+      <div className="flex justify-center my-2 lg:my-5"></div>
       <div className="flex justify-center my-2 lg:my-5">
         {data?.files?.length > 0 ? (
           data.files[0]?.file_name.split(".")[1].includes("doc") ||
@@ -273,11 +285,10 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
         ))}
       <div
         dangerouslySetInnerHTML={removeImgTags(
-          formatTextToHtmlTag(data?.htmlDescription)
+          formatTextToHtmlTag(data?.htmlDescription),
         )}
         className="text-sm lg:text-xl lg:leading-8 text-justify space-y-4"
       />
-
       <div className="bg-gray-50 dark:bg-black text-black dark:text-white rounded-lg justify-center items-center p-4 flex flex-col gap-3">
         <p className="text-lg border-b-3 border-red-600 font-semibold">TAGS</p>
         <div className="flex flex-wrap gap-2">
@@ -306,7 +317,7 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
                     {tag}
                   </Button>
                 </Link>
-              )
+              ),
           )}
         </div>
       </div>