diff --git a/components/landing/HeaderNews.tsx b/components/landing/HeaderNews.tsx
index f99c6ef..19a334b 100644
--- a/components/landing/HeaderNews.tsx
+++ b/components/landing/HeaderNews.tsx
@@ -65,8 +65,8 @@ export default function HeaderNews() {
 
   return (
     <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-[55vh] w-[75%] lg:mx-auto">
-        <div className="lg:hidden w-full h-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-[55vh] w-full lg:w-[75%] lg:mx-auto">
+        <div className="lg:hidden w-[90%] h-[40vh] mx-auto">
           {article ? (
             <Swiper
               centeredSlides={true}
@@ -97,17 +97,17 @@ export default function HeaderNews() {
               {article?.map((newsItem: any, index: number) => (
                 <SwiperSlide key={newsItem?.id}>
                   <Card isFooterBlurred radius="lg" className="border-none">
-                    {/* <Image
-                      width={1920}
-                      height={1080}
+                    <Image
+                      width={720}
+                      height={480}
                       alt="headernews"
                       src={
                         newsItem?.thumbnailUrl == ""
                           ? "/no-image.jpg"
                           : newsItem?.thumbnailUrl
                       }
-                      className="h-[25vh] object-cover"
-                    /> */}
+                      className="w-full h-[100px] object-cover"
+                    />
 
                     <CardFooter className="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-black dark:text-white">
@@ -135,11 +135,11 @@ export default function HeaderNews() {
             <CircularProgress aria-label="Loading..." size="lg" />
           )}
         </div>
-        <div className="w-auto lg:w-[25%] p-2 dark:bg-stone-800  bg-[#f0f0f0] dark:text-white text-black rounded-xl mb-2 md:mb-0 h-[37vh] lg:h-[50vh]">
+        <div className="w-[90%] lg:w-[25%] p-2 dark:bg-stone-800  bg-[#f0f0f0] dark:text-white text-black rounded-xl mb-2 md:mb-0 h-[40vh] lg:h-[50vh] mx-auto">
           <p className="text-base font-bold text-center dark:text-white text-black">
             {t("berita")}
           </p>
-          <ScrollShadow hideScrollBar className="h-[33vh] lg:h-[39vh] ">
+          <ScrollShadow hideScrollBar className="h-[29vh] lg:h-[39vh] ">
             {hotNews?.map((data: any, index: number) => (
               <div
                 className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md flex flex-row gap-2"
@@ -272,16 +272,16 @@ export default function HeaderNews() {
             <CircularProgress aria-label="Loading..." size="lg" />
           )}
         </div>
-        <div className="lg:w-[25%] h-[50vh]  rounded-md text-white dark:text-black ">
+        <div className="w-[90%] lg:w-[25%] h-[50vh]  rounded-md text-white dark:text-black mx-auto lg:mx-0">
           {/* <GPRKominfo /> */}
 
           {selectedTab === "media" ? (
-            <div className="lg:!h-[50vh] p-2 dark:bg-stone-800  bg-[#f0f0f0]  dark:text-white text-black rounded-lg">
+            <div className="lg:!h-[50vh] p-2 dark:bg-stone-800  bg-[#f0f0f0] text-black dark:text-white rounded-lg">
               <div className="text-sm flex flex-row gap-3 mx-2 mb-2">
                 <a
                   onClick={() => setSelectedTab("media")}
                   className={
-                    "text-black border-b-3 border-red-400 cursor-pointer p-0"
+                    "text-black dark:text-white border-b-3 border-red-400 cursor-pointer p-0"
                   }
                 >
                   {t("terkini")}
@@ -322,55 +322,59 @@ export default function HeaderNews() {
               </Button>
             </div>
           ) : (
-            <div className="lg:!h-[35vh] dark:bg-stone-800  bg-[#f0f0f0]  dark:text-white text-black rounded-lg flex flex-col p-2 lg:p-8 gap-2 lg:gap-5">
-              <div className="text-[15px] flex flex-row gap-10">
+            <div className="lg:!h-[50vh] p-2 dark:bg-stone-800  bg-[#f0f0f0] text-black dark:text-white rounded-lg">
+              <div className="text-sm flex flex-row gap-3 mx-2 mb-2">
                 <a
+                  className={"text-slate-300 cursor-pointer"}
                   onClick={() => setSelectedTab("media")}
-                  className={"text-slate-300 cursor-pointer py-2"}
                 >
                   {t("terkini")}
                 </a>
                 <a
                   onClick={() => setSelectedTab("video")}
                   className={
-                    "text-black border-b-3 border-red-400 cursor-pointer py-2"
+                    "text-black dark:text-white border-b-3 border-red-400 cursor-pointer p-0"
                   }
                 >
                   Video Virtual
                 </a>
               </div>
-              <Link
-                target="_blank"
-                href="https://www.youtube.com/watch?v=6_g_PyiFcNo"
-                className="border-b-2 py-2 lg:py-4"
-              >
-                IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - POLRI PRESISI UNTUK
-                INDONESIA
-              </Link>
-              <Link
-                target="_blank"
-                href="https://www.youtube.com/watch?v=p0AJEwvJ7gU"
-                className="border-b-2 py-2 lg:py-4"
-              >
-                ILM DIVHUMAS POLRI - POLRI PRESISI MENGAWAL PROSES VAKSINASI
-                UNTUK MENGATASI PANDEMI COVID 19
-              </Link>
-              <Link
-                target="_blank"
-                href="https://www.youtube.com/watch?v=jaihQPjxcy4"
-                className="border-b-2 py-2 lg:py-4"
-              >
-                IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - INDONESIA MENOLAK
-                RADIKALISME
-              </Link>
-              <Link
-                target="_blank"
-                href="https://www.youtube.com/watch?v=umPEo0FYTQk"
-                className="border-b-2 py-2 lg:py-4"
-              >
-                IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - BHABINKAMTIBMAS
-                SAHABAT MASYARAKAT
-              </Link>
+              <ScrollShadow hideScrollBar className="h-[39vh]">
+                <div className="p-2 flex flex-col gap-2 text-sm">
+                  <Link
+                    target="_blank"
+                    href="https://www.youtube.com/watch?v=6_g_PyiFcNo"
+                    className="dark:bg-[#1E1616] bg-white rounded-lg p-3 text-xs"
+                  >
+                    IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - POLRI PRESISI
+                    UNTUK INDONESIA
+                  </Link>
+                  <Link
+                    target="_blank"
+                    href="https://www.youtube.com/watch?v=p0AJEwvJ7gU"
+                    className="dark:bg-[#1E1616] bg-white rounded-lg p-3 text-xs"
+                  >
+                    ILM DIVHUMAS POLRI - POLRI PRESISI MENGAWAL PROSES VAKSINASI
+                    UNTUK MENGATASI PANDEMI COVID 19
+                  </Link>
+                  <Link
+                    target="_blank"
+                    href="https://www.youtube.com/watch?v=jaihQPjxcy4"
+                    className="dark:bg-[#1E1616] bg-white rounded-lg p-3 text-xs"
+                  >
+                    IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - INDONESIA MENOLAK
+                    RADIKALISME
+                  </Link>
+                  <Link
+                    target="_blank"
+                    href="https://www.youtube.com/watch?v=umPEo0FYTQk"
+                    className="dark:bg-[#1E1616] bg-white rounded-lg p-3 text-xs"
+                  >
+                    IKLAN LAYANAN MASYARAKAT DIVHUMAS POLRI - BHABINKAMTIBMAS
+                    SAHABAT MASYARAKAT
+                  </Link>
+                </div>
+              </ScrollShadow>
             </div>
           )}
         </div>
diff --git a/components/landing/MedolUpdate.tsx b/components/landing/MedolUpdate.tsx
index 9b04591..63171bb 100644
--- a/components/landing/MedolUpdate.tsx
+++ b/components/landing/MedolUpdate.tsx
@@ -109,11 +109,11 @@ export default function MedolUpdate() {
   };
 
   return (
-    <div className="border-1 rounded-xl py-2 w-[75%] mx-auto">
-      <div className="text-xl font-semibold w-full">
+    <div className="border-1 rounded-xl py-2 w-[90%] lg:w-[75%] mx-auto bg-white text-black">
+      <div className="text-xl font-semibold w-full ">
         <p className="border-b-2 border-red-600 w-fit mx-auto">Media Update</p>
       </div>
-      <div className="bg-white text-black p-1 md:p-5 space-y-5">
+      <div className=" p-1 md:p-5 space-y-5">
         <Tabs
           classNames={{
             tabList: "bg-white shadow-lg border p-2 rounded-lg",
diff --git a/components/landing/adds-carousel.tsx b/components/landing/adds-carousel.tsx
index 93c5dae..6aad4f0 100644
--- a/components/landing/adds-carousel.tsx
+++ b/components/landing/adds-carousel.tsx
@@ -22,7 +22,7 @@ const datas = [
 ];
 export default function AddsCarousel() {
   return (
-    <div className="w-[75%] mx-auto">
+    <div className="w-[90%] lg:w-[75%] mx-auto">
       {datas ? (
         <Swiper
           centeredSlides={true}
@@ -51,18 +51,18 @@ export default function AddsCarousel() {
           }}
         >
           {datas?.map((newsItem: any, index: number) => (
-            <SwiperSlide key={newsItem?.id} className="h-[50vh]">
+            <SwiperSlide key={newsItem?.id} className="h-[20vh] lg:h-[50vh]">
               <Card
                 isFooterBlurred
                 radius="lg"
-                className="border-none h-[50vh] shadow-none"
+                className="border-none h-[20vh] lg:h-[50vh] shadow-none"
               >
                 <Image
                   alt="headernews"
                   width={1440}
                   height={1080}
                   src={newsItem?.src == "" ? "/no-image.jpg" : newsItem?.src}
-                  className="w-full !h-[50vh] object-cover rounded-lg"
+                  className="w-full h-[20vh] lg:!h-[50vh] object-cover rounded-lg"
                 />
               </Card>
             </SwiperSlide>
diff --git a/components/landing/banner-new.tsx b/components/landing/banner-new.tsx
index d01392d..2b9a1b9 100644
--- a/components/landing/banner-new.tsx
+++ b/components/landing/banner-new.tsx
@@ -67,7 +67,7 @@ export default function BannerHumasNew() {
   return (
     <div className="h-fit relative text-white overflow-hidden">
       <div
-        className="flex w-full h-[78vh] lg:h-[60vh] transition-transform duration-700 ease-in-out"
+        className="flex w-full h-[45vh] lg:h-[60vh] transition-transform duration-700 ease-in-out"
         style={{ transform: `translateX(-${currentIndex * 100}%)` }}
       >
         {images.map((img, index) => (
@@ -84,13 +84,15 @@ export default function BannerHumasNew() {
       </div>
       <div className="absolute inset-0 bg-black bg-opacity-40" />
       <div className="absolute z-50 lg:mt-[50px] top-44 left-1/2  transform -translate-x-1/2 -translate-y-1/2 text-center w-full lg:w-[75%]">
-        <div className="flex flex-col gap-3 justify-between">
+        <div className="flex flex-col gap-3 justify-between p-5">
           <div className="flex justify-between items-center mb-10">
             <div className="flex flex-col gap-1 justify-start items-start">
-              <p className="text-5xl font-bold text-left leading-0">
+              <p className="text-lg lg:text-5xl font-bold text-left leading-0">
                 SELAMAT DATANG DI WEBSITE RESMI DIVISI HUMAS POLRI
               </p>
-              <p>OBYEKTIF - DIPERCAYA - PARTISIPASI</p>
+              <p className="text-xs lg:text-base">
+                OBYEKTIF - DIPERCAYA - PARTISIPASI
+              </p>
             </div>
             <Image
               src="/divhumas.png"
@@ -100,12 +102,12 @@ export default function BannerHumasNew() {
               className="w-[200px]"
             />
           </div>
-          <div className="flex justify-between">
-            <div className="flex flex-row gap-6">
+          <div className="flex flex-col lg:flex-row lg:justify-between gap-4 mt-10">
+            <div className="flex flex-row  gap-6">
               <Dropdown onOpenChange={setOnOpen}>
                 <DropdownTrigger>
                   <Button
-                    className="w-[200px] bg-white dark:bg-stone-900"
+                    className="w-full lg:w-[200px] bg-white dark:bg-stone-900"
                     radius="sm"
                     endContent={
                       onOpen ? <ChevronUpIcon /> : <ChevronDownIcon />
@@ -163,7 +165,7 @@ export default function BannerHumasNew() {
       >
         <ChevronRightIcon />
       </button>
-      <div className="absolute bottom-4 right-60">
+      <div className="absolute bottom-4 right-5 lg:right-60 lg:mx-5">
         <div className="flex">
           <div className="flex gap-1 lg:gap-3 items-center">
             <Link
diff --git a/components/landing/footer-new.tsx b/components/landing/footer-new.tsx
index e034ce6..b0c6c1c 100644
--- a/components/landing/footer-new.tsx
+++ b/components/landing/footer-new.tsx
@@ -20,16 +20,18 @@ export default function FooterNew() {
 
   return (
     <div className="mb-[60px] relative text-xs leading-4 md:leading-loose lg:leading-8 font-semibold">
-      <div className="py-10 px-36 flex flex-col gap-4 text-white bg-gradient-to-r from-[#A88155] via-[#ad1719] to-[#AA0004] from-3% via-50% to-70%  ">
-        <div className="flex justify-center text-2xl">Channel Humas Polri</div>
-        <div className="flex flex-row gap-4 justify-around items-center">
-          <Link href="">
+      <div className="py-10 px-12 lg:px-36 flex flex-col gap-4 text-white bg-gradient-to-r from-[#A88155] via-[#ad1719] to-[#AA0004] from-3% via-50% to-70%  ">
+        <div className="flex justify-center text-xl lg:text-2xl">
+          Channel Humas Polri
+        </div>
+        <div className="grid grid-cols-3 lg:flex lg:flex-row gap-4 justify-around items-center">
+          <Link href="" className="flex justify-center">
             <Image
               src="/assets/portal-humas.png"
               width={480}
               height={480}
               alt="portal-humas"
-              className="w-[100px]"
+              className="w-[50px] lg:w-[100px]"
             />
           </Link>
           <Link href="" className="flex flex-col justify-center items-center">
@@ -38,7 +40,7 @@ export default function FooterNew() {
               width={480}
               height={480}
               alt="mediahub"
-              className="w-[100px]"
+              className="w-[50px] lg:w-[100px]"
             />
             <p className="text-[#FED882] text-lg">MediaHub</p>
           </Link>
@@ -48,7 +50,7 @@ export default function FooterNew() {
               width={480}
               height={480}
               alt="spit"
-              className="w-[170px]"
+              className="w-[85px] lg:w-[170px]"
             />
           </Link>
           <Link href="">
@@ -57,7 +59,7 @@ export default function FooterNew() {
               width={480}
               height={480}
               alt="polritv"
-              className="w-[170px]"
+              className="w-[85px] lg:w-[170px]"
             />
           </Link>
           <Link href="">
@@ -66,7 +68,7 @@ export default function FooterNew() {
               width={480}
               height={480}
               alt="tbn"
-              className="w-[170px]"
+              className="w-[85px] lg:w-[170px]"
             />
           </Link>
           <Link href="">
@@ -75,11 +77,11 @@ export default function FooterNew() {
               width={480}
               height={480}
               alt="inp"
-              className="w-[170px]"
+              className="w-[85px] lg:w-[170px]"
             />
           </Link>
         </div>
-        <div className="grid grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
           <div className="flex flex-col gap-1 text-md font-light">
             <p className="text-lg font-normal">Tentang Kami</p>
             <div className="flex flex-row gap-2 items-center">
@@ -163,8 +165,8 @@ export default function FooterNew() {
           </div>
         </div>
       </div>
-      <div className="bg-red-800 text-white text-center py-5 flex justify-center font-light text-base">
-        &copy; Copyright Humas&nbsp; POLRI &reg; &nbsp; All Rights Reserved
+      <div className="bg-red-800 text-white text-center py-5 flex justify-center font-light text-sm lg:text-base">
+        &copy; Copyright Humas&nbsp; POLRI &reg;&nbsp;All Rights Reserved
       </div>
     </div>
   );
diff --git a/components/landing/social-media.tsx b/components/landing/social-media.tsx
index 7d425ab..5388f5d 100644
--- a/components/landing/social-media.tsx
+++ b/components/landing/social-media.tsx
@@ -37,13 +37,13 @@ export default function SocialMediaNew() {
 
   const t = useTranslations("Landing");
   return (
-    <div className="border-1 rounded-xl py-2 w-[75%] mx-auto">
+    <div className="border-1 rounded-xl py-2 w-[90%] lg:w-[75%] mx-auto bg-white text-black">
       <div className="text-xl font-semibold w-full">
         <p className="border-b-2 border-red-600 w-fit mx-auto">
           Media Sosial Humas
         </p>
       </div>
-      <div className="bg-white text-black p-1 md:p-5 space-y-5">
+      <div className=" p-1 md:p-5 space-y-5">
         <Tabs
           classNames={{
             tabList: "bg-white shadow-lg border p-2 rounded-lg",