diff --git a/components/form/article/edit-article-form.tsx b/components/form/article/edit-article-form.tsx
index d499d6e..2f060a7 100644
--- a/components/form/article/edit-article-form.tsx
+++ b/components/form/article/edit-article-form.tsx
@@ -797,16 +797,16 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
               ))
             ) : (
               <>
-                <div>
+                <div className="w-full h-[480px] flex justify-center items-center">
                   <Image
                     alt="main"
                     width={720}
                     height={480}
                     src={detailfiles[mainImage]?.file_url}
-                    className="w-[75%] mx-auto"
+                    className={`h-[480px] object-cover w-auto`}
                   />
                 </div>
-                <div className="flex flex-row gap-2">
+                <div className="flex flex-row gap-2 mt-2">
                   {detailfiles?.map((file: any, index: number) => (
                     <a
                       key={index}
diff --git a/components/form/form-master-user-edit.tsx b/components/form/form-master-user-edit.tsx
index 5f36cf6..66716bf 100644
--- a/components/form/form-master-user-edit.tsx
+++ b/components/form/form-master-user-edit.tsx
@@ -43,10 +43,10 @@ const masterUserSchema = z.object({
   fullname: z.string().min(1, { message: "Required" }),
   username: z.string().min(1, { message: "Required" }),
   email: z.string().min(1, { message: "Required" }),
-  identityNumber: z.string().min(1, { message: "Required" }),
-  genderType: z.string().min(1, { message: "Required" }),
-  phoneNumber: z.string().min(1, { message: "Required" }),
-  address: z.string().min(1, { message: "Required" }),
+  identityNumber: z.string().optional(),
+  genderType: z.string().optional(),
+  phoneNumber: z.string().optional(),
+  address: z.string().optional(),
   userLevelType: userSchema,
   userRoleType: userSchema,
 });
@@ -62,6 +62,7 @@ export default function FormMasterUserEdit() {
 
   const formOptions = {
     resolver: zodResolver(masterUserSchema),
+    defaultValues: { identityNumber: "" },
   };
   type MicroIssueSchema = z.infer<typeof masterUserSchema>;
   const {
@@ -140,10 +141,10 @@ export default function FormMasterUserEdit() {
     setValue("fullname", profile?.fullname);
     setValue("username", profile?.username);
     setValue("email", profile?.email);
-    setValue("address", profile?.address);
-    setValue("identityNumber", profile?.identityNumber);
-    setValue("genderType", profile?.genderType);
-    setValue("phoneNumber", profile?.phoneNumber);
+    setValue("address", profile?.address || "");
+    setValue("identityNumber", profile?.identityNumber || "");
+    setValue("genderType", profile?.genderType || "");
+    setValue("phoneNumber", profile?.phoneNumber || "");
     if (findLevel) {
       setValue("userLevelType", findLevel);
     }
@@ -154,7 +155,12 @@ export default function FormMasterUserEdit() {
   };
 
   const fetchUserLevel = async () => {
-    const res = await getAllUserLevels({ timeStamp: getUnixTimestamp() });
+    const request = {
+      limit: 1000,
+      page: 1,
+    };
+
+    const res = await getAllUserLevels(request);
     if (res?.data?.data) {
       return setupParent(res?.data?.data, "level");
     }
diff --git a/components/form/form-master-user.tsx b/components/form/form-master-user.tsx
index b42f3ef..e21b75e 100644
--- a/components/form/form-master-user.tsx
+++ b/components/form/form-master-user.tsx
@@ -53,10 +53,10 @@ const masterUserSchema = z.object({
     }),
   passwordValidate: z.string().min(1, { message: "Required" }),
   email: z.string().min(1, { message: "Required" }),
-  identityNumber: z.string().min(1, { message: "Required" }),
-  genderType: z.string().min(1, { message: "Required" }),
-  phoneNumber: z.string().min(1, { message: "Required" }),
-  address: z.string().min(1, { message: "Required" }),
+  identityNumber: z.string().optional(),
+  genderType: z.string().optional(),
+  phoneNumber: z.string().optional(),
+  address: z.string().optional(),
   userLevelType: userSchema,
   userRoleType: userSchema,
 });
@@ -247,7 +247,11 @@ export default function FormMasterUser() {
 
   return (
     <div className="mx-5 my-5 overflow-y-auto">
-      <form method="POST" onSubmit={handleSubmit(onSubmit)}>
+      <form
+        method="POST"
+        onSubmit={handleSubmit(onSubmit)}
+        className="w-full lg:w-1/2 lg:ml-4"
+      >
         <Card className="rounded-md p-5 flex flex-col gap-3">
           <Controller
             control={control}
diff --git a/components/landing/HeaderNews.tsx b/components/landing/HeaderNews.tsx
index 58deb71..eb085df 100644
--- a/components/landing/HeaderNews.tsx
+++ b/components/landing/HeaderNews.tsx
@@ -78,10 +78,22 @@ export default function HeaderNews() {
     setHotNews(response?.data?.data);
   }
 
+  const [portraitMap, setPortraitMap] = useState<any>({});
+
+  const handleImageLoad = (e: any, index: number) => {
+    const { naturalWidth, naturalHeight } = e.target;
+    const isPortrait = naturalHeight > naturalWidth;
+
+    setPortraitMap((prev: any) => ({
+      ...prev,
+      [index]: isPortrait,
+    }));
+  };
+
   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-[540px] w-full lg:w-[75%] lg:mx-auto">
-        <div className="lg:hidden w-[90%] h-[300px] md:h-[500px] mx-auto">
+        <div className="lg:hidden w-[90%] h-[200px] md:h-[400px] mx-auto mt-1">
           {hotNews?.length > 0 ? (
             <Swiper
               centeredSlides={true}
@@ -110,23 +122,38 @@ export default function HeaderNews() {
               }}
             >
               {hotNews?.map((newsItem: any, index: number) => (
-                <SwiperSlide key={newsItem?.id}>
+                <SwiperSlide
+                  key={newsItem?.id}
+                  className="!w-full h-[200px] md:h-[400px]"
+                >
                   <Card
+                    isFooterBlurred
                     radius="lg"
-                    className="border-none rounded-xl shadow-none"
+                    className="border-none h-[200px] md:h-[400px] shadow-none dark:bg-stone-800 bg-[#f0f0f0]"
                   >
-                    <Image
-                      alt="headernews"
-                      src={
-                        newsItem?.thumbnailUrl == ""
-                          ? "/no-image.jpg"
-                          : newsItem?.thumbnailUrl
-                      }
-                      className="!w-[90vh] md:!w-[95vh] !h-[200px] md:!h-[400px] object-cover !rounded-b-none"
-                    />
+                    <div className="relative w-full h-[200px] md:h-[400px]">
+                      <Image
+                        alt="headernews"
+                        width={480}
+                        height={480}
+                        onLoad={(e) => handleImageLoad(e, index)}
+                        src={
+                          newsItem?.thumbnailUrl === ""
+                            ? "/no-image.jpg"
+                            : newsItem?.thumbnailUrl
+                        }
+                        className={`!object-cover !rounded-none ${
+                          portraitMap[index]
+                            ? "!w-auto object-cover mx-auto"
+                            : "!w-[90vw]"
+                        } !h-[200px] md:!h-[400px]`}
+                      />
 
-                    <CardFooter className="before:bg-white/10 border-gray-100 border-1 rounded-b-xl shadow-sm bottom-1 w-full">
-                      <div className="text-black dark:text-white">
+                      <div className="absolute inset-0 bg-black/20 flex items-center justify-center text-white text-lg font-semibold"></div>
+                    </div>
+
+                    <CardFooter className="mb-1 max-h-[50px] before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute bottom-0 before:rounded-xl rounded-large  w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
+                      <div className="text-white py-1">
                         <Link
                           href={`news/detail/${newsItem.id}-${newsItem?.slug}`}
                         >
@@ -138,7 +165,7 @@ export default function HeaderNews() {
                           {convertDateFormat(newsItem.createdAt)} WIB
                         </p>
                         <p className="flex items-center gap-1 text-xs">
-                          <EyeIcon className="text-black dark:text-white" />
+                          <EyeIcon className="text-white" />
                           {newsItem.viewCount === null ? 0 : newsItem.viewCount}
                         </p>
                       </div>
@@ -149,13 +176,12 @@ export default function HeaderNews() {
             </Swiper>
           ) : (
             <Skeleton className="rounded-lg">
-              <div className="h-[200px] rounded-lg bg-default-300" />
+              <div className="w-full !h-[500px] rounded-lg bg-default-300" />
             </Skeleton>
           )}
         </div>
         <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-[500px] mx-auto">
           <p className="text-base font-bold text-center dark:text-white text-black">
-            {/* {t("berita")} */}
             Hot Topik
           </p>
           <ScrollShadow hideScrollBar className="h-[29vh] lg:h-[400px] ">
@@ -254,17 +280,28 @@ export default function HeaderNews() {
                   <Card
                     isFooterBlurred
                     radius="lg"
-                    className="border-none h-[50vh] lg:h-[500px] shadow-none"
+                    className="border-none h-[50vh] lg:h-[500px] shadow-none dark:bg-stone-800  bg-[#f0f0f0]"
                   >
-                    <Image
-                      alt="headernews"
-                      src={
-                        newsItem?.thumbnailUrl == ""
-                          ? "/no-image.jpg"
-                          : newsItem?.thumbnailUrl
-                      }
-                      className="!w-[90vw] !h-[500px] !object-cover !rounded-none"
-                    />
+                    <div className="relative w-full h-[50vh] lg:h-[500px]">
+                      <Image
+                        alt="headernews"
+                        width={480}
+                        height={480}
+                        onLoad={(e) => handleImageLoad(e, index)}
+                        src={
+                          newsItem?.thumbnailUrl === ""
+                            ? "/no-image.jpg"
+                            : newsItem?.thumbnailUrl
+                        }
+                        className={`!object-cover !rounded-none ${
+                          portraitMap[index]
+                            ? "!w-auto object-cover mx-auto"
+                            : "!w-[90vw]"
+                        } !h-[500px]`}
+                      />
+
+                      <div className="absolute inset-0 bg-black/20 flex items-center justify-center text-white text-lg font-semibold"></div>
+                    </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">
@@ -299,8 +336,6 @@ export default function HeaderNews() {
           )}
         </div>
         <div className="w-[90%] lg:w-[25%] h-[50vh] lg:h-[500px]  rounded-md text-white dark:text-black mx-auto lg:mx-0">
-          {/* <GPRKominfo /> */}
-
           {selectedTab === "media" ? (
             <div className="lg:h-[500px] 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">
diff --git a/components/page/detail-news.tsx b/components/page/detail-news.tsx
index ee74b16..2ced954 100644
--- a/components/page/detail-news.tsx
+++ b/components/page/detail-news.tsx
@@ -171,13 +171,13 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
         ) : (
           data?.files?.length > 0 && (
             <Image
-              classNames={{
-                wrapper: "!w-full !max-w-full",
-                img: "!w-full",
-              }}
+              // classNames={{
+              //   wrapper: "!w-full !max-w-full",
+              //   img: "!w-full",
+              // }}
               alt="Main Image"
               src={data?.files[imageNow]?.file_url}
-              className="object-cover w-[100%] rounded-md"
+              className="object-cover w-auto h-[360px] md:h-[480px] mx-auto rounded-md"
             />
           )
         )}