diff --git a/components/landing/HeaderNews.tsx b/components/landing/HeaderNews.tsx
index c24592f..89241a6 100644
--- a/components/landing/HeaderNews.tsx
+++ b/components/landing/HeaderNews.tsx
@@ -82,7 +82,7 @@ export default function HeaderNews() {
     <div className="w-full">
       <div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white dark:bg-black  p-1 lg:p-8 lg:h-[540px] w-full lg:w-[75%] lg:mx-auto">
         <div className="lg:hidden w-[90%] h-[300px] md:h-[500px] mx-auto">
-          {banner?.length > 0 ? (
+          {hotNews?.length > 0 ? (
             <Swiper
               centeredSlides={true}
               autoplay={{
@@ -222,7 +222,7 @@ export default function HeaderNews() {
         </div>
 
         <div className="hidden lg:block w-full lg:w-[50%] h-[500px]">
-          {banner?.length > 0 ? (
+          {hotNews?.length > 0 ? (
             <Swiper
               centeredSlides={true}
               autoplay={{
@@ -249,49 +249,48 @@ export default function HeaderNews() {
                 );
               }}
             >
-              {banner?.lenth > 0 &&
-                banner.map((newsItem: any, index: number) => (
-                  <SwiperSlide key={newsItem?.id} className="!w-full h-[50vh]">
-                    <Card
-                      isFooterBlurred
-                      radius="lg"
-                      className="border-none h-[50vh] lg:h-[500px] shadow-none"
-                    >
-                      <Image
-                        alt="headernews"
-                        src={
-                          newsItem?.thumbnailUrl == ""
-                            ? "/no-image.jpg"
-                            : newsItem?.thumbnailUrl
-                        }
-                        className="!w-full !h-[500px] !object-cover !rounded-none"
-                      />
+              {hotNews.map((newsItem: any, index: number) => (
+                <SwiperSlide key={newsItem?.id} className="!w-full h-[50vh]">
+                  <Card
+                    isFooterBlurred
+                    radius="lg"
+                    className="border-none h-[50vh] lg:h-[500px] shadow-none"
+                  >
+                    <Image
+                      alt="headernews"
+                      src={
+                        newsItem?.thumbnailUrl == ""
+                          ? "/no-image.jpg"
+                          : newsItem?.thumbnailUrl
+                      }
+                      className="!w-full !h-[500px] !object-cover !rounded-none"
+                    />
 
-                      <CardFooter className="mb-1 max-h-[20vh] before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
-                        <div className="text-white">
-                          <Link
-                            href={`news/detail/${newsItem.id}-${newsItem?.slug}`}
-                          >
-                            <p className="text-left font-semibold text-lg lg:text-2xl">
-                              {textEllipsis(newsItem.title, 40)}
-                            </p>
-                          </Link>
-                          <div className="flex flex-row gap-1">
-                            <p className="py-[2px] text-left text-sm">
-                              {convertDateFormat(newsItem.createdAt)} WIB
-                            </p>
-                            <p className="flex items-center gap-1 text-sm">
-                              <EyeIcon />
-                              {newsItem.viewCount === null
-                                ? 0
-                                : newsItem.viewCount}
-                            </p>
-                          </div>
+                    <CardFooter className="mb-1 max-h-[20vh] before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
+                      <div className="text-white">
+                        <Link
+                          href={`news/detail/${newsItem.id}-${newsItem?.slug}`}
+                        >
+                          <p className="text-left font-semibold text-lg lg:text-2xl">
+                            {textEllipsis(newsItem.title, 40)}
+                          </p>
+                        </Link>
+                        <div className="flex flex-row gap-1">
+                          <p className="py-[2px] text-left text-sm">
+                            {convertDateFormat(newsItem.createdAt)} WIB
+                          </p>
+                          <p className="flex items-center gap-1 text-sm">
+                            <EyeIcon />
+                            {newsItem.viewCount === null
+                              ? 0
+                              : newsItem.viewCount}
+                          </p>
                         </div>
-                      </CardFooter>
-                    </Card>
-                  </SwiperSlide>
-                ))}
+                      </div>
+                    </CardFooter>
+                  </Card>
+                </SwiperSlide>
+              ))}
             </Swiper>
           ) : (
             <Skeleton className="rounded-lg">
@@ -322,8 +321,8 @@ export default function HeaderNews() {
                 </a>
               </div>
               <ScrollShadow hideScrollBar className="h-[39vh] lg:h-[400px]">
-                {article.length > 0 ? (
-                  article.map((list: any, index: number) => (
+                {article?.length > 0 ? (
+                  article?.map((list: any, index: number) => (
                     <div
                       key={list?.id}
                       className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md"