diff --git a/app/[locale]/(protected)/admin/add-experts/component/column.tsx b/app/[locale]/(protected)/admin/add-experts/component/column.tsx
index 37b97cab..309e8f46 100644
--- a/app/[locale]/(protected)/admin/add-experts/component/column.tsx
+++ b/app/[locale]/(protected)/admin/add-experts/component/column.tsx
@@ -61,6 +61,12 @@ const columns: ColumnDef<any>[] = [
     cell: ({ row }) => <span>{row.getValue("experience")}</span>,
   },
 
+  {
+    accessorKey: "experience",
+    header: "Posisi",
+    cell: ({ row }) => <span>{row.getValue("experience")}</span>,
+  },
+
   {
     id: "actions",
     accessorKey: "action",
diff --git a/app/[locale]/(protected)/admin/add-experts/create/page.tsx b/app/[locale]/(protected)/admin/add-experts/create/page.tsx
index 3612d814..f0421ff4 100644
--- a/app/[locale]/(protected)/admin/add-experts/create/page.tsx
+++ b/app/[locale]/(protected)/admin/add-experts/create/page.tsx
@@ -24,7 +24,13 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { useEffect, useState } from "react";
-import { AdministrationLevelList, getListCompetencies, getListExperiences, saveUserInternal, saveUserRolePlacements } from "@/service/management-user/management-user";
+import {
+  AdministrationLevelList,
+  getListCompetencies,
+  getListExperiences,
+  saveUserInternal,
+  saveUserRolePlacements,
+} from "@/service/management-user/management-user";
 import { loading } from "@/config/swal";
 
 const FormSchema = z.object({
@@ -58,7 +64,7 @@ export type Placements = {
   index: number;
   roleId?: string;
   userLevelId?: number;
-}
+};
 
 export default function AddExpertForm() {
   const MySwal = withReactContent(Swal);
@@ -67,7 +73,9 @@ export default function AddExpertForm() {
     resolver: zodResolver(FormSchema),
   });
   const [incrementId, setIncrementId] = useState(1);
-  const [placementRows, setPlacementRows] = useState<Placements[]>([{ index: 0, roleId: "", userLevelId: 0 }]);
+  const [placementRows, setPlacementRows] = useState<Placements[]>([
+    { index: 0, roleId: "", userLevelId: 0 },
+  ]);
   const [userCompetencies, setUserCompetencies] = useState<any>();
   const [userExperiences, setUserExperiences] = useState<any>();
   const [userLevels, setUserLevels] = useState<any>();
@@ -80,7 +88,7 @@ export default function AddExpertForm() {
     {
       id: "12",
       name: "Kurator",
-    }
+    },
   ];
 
   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
@@ -113,12 +121,12 @@ export default function AddExpertForm() {
       userCompetencyId: data.skills,
       userExperienceId: data.experiences,
       companyName: data.company,
-    }
+    };
 
     loading();
     const res = await saveUserInternal(dataReq);
     const resData = res?.data?.data;
-    const userProfileId = resData.id;
+    const userProfileId = resData?.id;
 
     var placementArr: any[] = [];
     placementRows.forEach((row: any) => {
@@ -131,15 +139,14 @@ export default function AddExpertForm() {
 
     const dataReq2 = {
       userId: userProfileId,
-      placements: placementArr
-    }
+      placements: placementArr,
+    };
     const res2 = await saveUserRolePlacements(dataReq2);
     const resData2 = res2?.data?.data;
 
     success("/admin/add-experts");
   };
 
-  
   function success(redirect: string): void {
     MySwal.fire({
       title: '<p class="text-green-600 font-bold">Sukses</p>',
@@ -180,7 +187,6 @@ export default function AddExpertForm() {
     setUserLevels(levelsArr);
   }
 
-
   function successSubmit() {
     MySwal.fire({
       title: "Sukses",
@@ -194,7 +200,11 @@ export default function AddExpertForm() {
     });
   }
 
-  const handleSelectionChange = (index: number, type: "roleId" | "userLevelId", value: string) => {
+  const handleSelectionChange = (
+    index: number,
+    type: "roleId" | "userLevelId",
+    value: string
+  ) => {
     setPlacementRows((prevRows) =>
       prevRows.map((row) =>
         row.index === index ? { ...row, [type]: value } : row
@@ -202,7 +212,6 @@ export default function AddExpertForm() {
     );
   };
 
-
   const handleRemoveRow = (index: number) => {
     console.log(index);
     console.log(placementRows);
@@ -212,7 +221,10 @@ export default function AddExpertForm() {
   };
 
   const handleAddRow = () => {
-    setPlacementRows((prevRows: any) => [...prevRows, { index: incrementId, roleId: "", userLevelId: 0 }]);
+    setPlacementRows((prevRows: any) => [
+      ...prevRows,
+      { index: incrementId, roleId: "", userLevelId: 0 },
+    ]);
     setIncrementId((prevId) => prevId + 1);
   };
 
@@ -375,7 +387,11 @@ export default function AddExpertForm() {
             <FormLabel>Penempatan</FormLabel>
             {placementRows?.map((row: any) => (
               <div key={row.index} className="flex items-center gap-2 my-2">
-                <Select onValueChange={(e) => handleSelectionChange(row.index, "roleId", e)} >
+                <Select
+                  onValueChange={(e) =>
+                    handleSelectionChange(row.index, "roleId", e)
+                  }
+                >
                   <FormControl>
                     <SelectTrigger>
                       <SelectValue placeholder="Pilih Role" />
@@ -389,7 +405,11 @@ export default function AddExpertForm() {
                     ))}
                   </SelectContent>
                 </Select>
-                <Select onValueChange={(e) => handleSelectionChange(row.index, "userLevelId", e)}>
+                <Select
+                  onValueChange={(e) =>
+                    handleSelectionChange(row.index, "userLevelId", e)
+                  }
+                >
                   <FormControl>
                     <SelectTrigger>
                       <SelectValue placeholder="Pilih User Level" />
@@ -415,11 +435,7 @@ export default function AddExpertForm() {
                 )}
               </div>
             ))}
-            <Button
-              type="button"
-              size="md"
-              onClick={() => handleAddRow()}
-            >
+            <Button type="button" size="md" onClick={() => handleAddRow()}>
               Tambah
             </Button>
           </div>
diff --git a/app/[locale]/auth/page.tsx b/app/[locale]/auth/page.tsx
index c5eef2eb..145ffcc4 100644
--- a/app/[locale]/auth/page.tsx
+++ b/app/[locale]/auth/page.tsx
@@ -25,11 +25,23 @@ const Login = ({ params: { locale } }: { params: { locale: string } }) => {
           <div className="lg:block hidden flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 relative z-[1] bg-default-50">
             <div className="max-w-[520px] pt-16 ps-20 ">
               <Link href="/" className="mb-6 inline-block">
-                <Image src="/assets/mediahub-logo.png" alt="" width={250} height={250} className="mb-10 w-full h-full" />
+                <Image
+                  src="/assets/mediahub-logo.png"
+                  alt=""
+                  width={250}
+                  height={250}
+                  className="mb-10 w-full h-full"
+                />
               </Link>
             </div>
             <div className="absolute left-0 2xl:bottom-[-160px] bottom-[-130px] h-full w-full z-[-1]">
-              <Image src="/assets/vector-login.svg" alt="" width={300} height={300} className="mb-10 w-full h-full" />
+              <Image
+                src="/assets/vector-login.svg"
+                alt=""
+                width={300}
+                height={300}
+                className="mb-10 w-full h-full"
+              />
             </div>
           </div>
           <div className="flex-1 relative">
@@ -40,12 +52,12 @@ const Login = ({ params: { locale } }: { params: { locale: string } }) => {
                     <Logo />
                   </Link>
                 </div> */}
-                <div className="text-left 2xl:mb-10 mb-4 mt-10">
+                {/* <div className="text-left 2xl:mb-10 mb-4 mt-10">
                   <h4 className="font-semibold text-3xl text-left">{t("logInPlease")}</h4>
                   <div className="text-default-500 text-base">
                     {t("acc")} <span className="text-red-500">{t("reg")}</span>
                   </div>
-                </div>
+                </div> */}
                 <LoginForm />
                 {/* <div className="relative border-b-[#9AA2AF] border-opacity-[16%] border-b pt-6">
                   <div className="absolute inline-block bg-default-50 dark:bg-default-100 left-1/2 top-1/2 transform -translate-x-1/2 px-4 min-w-max text-sm text-default-500 font-normal">
diff --git a/components/form/content/spit-convert-form.tsx b/components/form/content/spit-convert-form.tsx
index f272446e..54ea4b48 100644
--- a/components/form/content/spit-convert-form.tsx
+++ b/components/form/content/spit-convert-form.tsx
@@ -813,7 +813,7 @@ export default function FormConvertSPIT() {
                   <Label className="text-xl">Penempatan file</Label>
                 </div>
                 {files?.length > 1 && (
-                  <div className="flex flex-wrap gap-2 mt-2">
+                  <div className="flex flex-wrap gap-2 mt-2 justify-center">
                     <div className="flex items-center space-x-2">
                       <Checkbox
                         id="all-content"
@@ -879,20 +879,12 @@ export default function FormConvertSPIT() {
                   >
                     <img
                       src={file.contentFile}
-                      className="w-[150px] rounded-md"
+                      className="w-[180px] rounded-md"
                     />
-                    <div className="flex flex-col gap-2 w-full">
+                    <div className="flex flex-col gap-2 w-full pl-4">
                       <div className="flex justify-between text-sm">
                         {file.fileName}
-                        {/* <a
-                                               onClick={() =>
-                                                 handleDeleteFileApproval(file.id)
-                                               }
-                                             >
-                                               <Icon icon="humbleicons:times" color="red" />
-                                             </a> */}
                       </div>
-
                       <div className="flex flex-wrap gap-2">
                         <div className="flex items-center space-x-2">
                           <Checkbox
diff --git a/components/landing-page/hero.tsx b/components/landing-page/hero.tsx
index 8ae450cb..b42518bf 100644
--- a/components/landing-page/hero.tsx
+++ b/components/landing-page/hero.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { formatDateToIndonesian, textEllipsis } from "@/utils/globals";
 import React, { useEffect, useState } from "react";
 import "swiper/css/bundle";
@@ -5,9 +6,27 @@ import "swiper/css/navigation";
 import { getHeroData } from "@/service/landing/landing";
 import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
 import { Skeleton } from "../ui/skeleton";
 import Image from "next/image";
+import { TabsList, TabsTrigger, TabsContent } from "@radix-ui/react-tabs";
+import { Input } from "postcss";
+import { Button } from "react-day-picker";
+import { Label } from "recharts";
+import {
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from "../ui/card";
+import { Tabs } from "../ui/tabs";
 
 const Hero: React.FC = () => {
   const router = useRouter();
@@ -52,7 +71,7 @@ const Hero: React.FC = () => {
     console.log(response);
     setHeroData(response?.data?.data?.content);
   };
-  
+
   return (
     <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20 py-4 mx-auto w-auto mt-6">
       {/* Section Gambar Utama */}
@@ -70,15 +89,31 @@ const Hero: React.FC = () => {
             {heroData?.map((list: any) => (
               <CarouselItem key={list?.id}>
                 <div className="relative h-[310px] lg:h-[420px]">
-                  <Image src={list?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[850px] h-[310px] lg:h-[420px] rounded-lg object-cover" />
+                  <Image
+                    src={list?.thumbnailLink}
+                    alt="gambar-utama"
+                    width={1920}
+                    height={1080}
+                    className="w-full lg:w-[850px] h-[310px] lg:h-[420px] rounded-lg object-cover"
+                  />
                   <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg">
-                    <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{list?.categoryName}</span>
+                    <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">
+                      {list?.categoryName}
+                    </span>
                     <Link href={`${locale}/image/detail/${list?.slug}`}>
-                      <h2 className="text-lg text-slate-200 dark:text-white font-bold mt-2">{list?.title}</h2>
+                      <h2 className="text-lg text-slate-200 dark:text-white font-bold mt-2">
+                        {list?.title}
+                      </h2>
                     </Link>
                     <p className="text-xs flex flex-row items-center text-slate-200 dark:text-white gap-1 mt-1">
-                      {formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone ? list?.timezone : "WIB"}|{" "}
-                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+                      {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
+                      {list?.timezone ? list?.timezone : "WIB"}|{" "}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="1.2em"
+                        height="1.2em"
+                        viewBox="0 0 24 24"
+                      >
                         <path
                           fill="currentColor"
                           d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
@@ -137,31 +172,61 @@ const Hero: React.FC = () => {
             </div>
           </>
         ) : (
-          <ul className="py-4 lg:py-0 flex flex-row lg:flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
-            {heroData?.map((item: any) => (
-              <li key={item?.id} className="flex gap-4 flex-row lg:w-full ">
-                <div className="flex-shrink-0 w-24 rounded-lg">
-                  <Image width={720} height={480} src={item?.thumbnailLink} alt={item?.title} className="w-full h-[73px] object-cover rounded-lg" />
-                </div>
-                <div className="w-[280px] lg:w-auto">
-                  <span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">{item?.categoryName}</span>
-                  <Link href={`${locale}/image/detail/${item?.slug}`}>
-                    <h3 className="text-base font-bold mt-2  h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{item?.title}</h3>
-                  </Link>
-                  <p className="text-[10px] flex flex-row items-center gap-1 text-gray-500 mt-1">
-                    {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"} |{" "}
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
-                      <path
-                        fill="currentColor"
-                        d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
-                      />
-                    </svg>{" "}
-                    {item?.clickCount}
-                  </p>
-                </div>
-              </li>
-            ))}
-          </ul>
+          <div>
+            <div className="my-3">
+              <Tabs defaultValue="national" className="w-[400px] ">
+                <TabsList className="grid w-full grid-cols-3" color="black">
+                  <TabsTrigger value="national">Nasional</TabsTrigger>
+                  <TabsTrigger value="wilayah">Polda</TabsTrigger>
+                  <TabsTrigger value="satker">Satker</TabsTrigger>
+                </TabsList>
+                <TabsContent value="national"></TabsContent>
+                <TabsContent value="wilayah"></TabsContent>
+                <TabsContent value="satker"></TabsContent>
+              </Tabs>
+            </div>
+            <ul className="py-4 lg:py-0 flex flex-row lg:flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
+              {heroData?.map((item: any) => (
+                <li key={item?.id} className="flex gap-4 flex-row lg:w-full ">
+                  <div className="flex-shrink-0 w-24 rounded-lg">
+                    <Image
+                      width={720}
+                      height={480}
+                      src={item?.thumbnailLink}
+                      alt={item?.title}
+                      className="w-full h-[73px] object-cover rounded-lg"
+                    />
+                  </div>
+                  <div className="w-[280px] lg:w-auto">
+                    <span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">
+                      {item?.categoryName}
+                    </span>
+                    <Link href={`${locale}/image/detail/${item?.slug}`}>
+                      <h3 className="text-base font-bold mt-2  h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
+                        {item?.title}
+                      </h3>
+                    </Link>
+                    <p className="text-[10px] flex flex-row items-center gap-1 text-gray-500 mt-1">
+                      {formatDateToIndonesian(new Date(item?.createdAt))}{" "}
+                      {item?.timezone ? item?.timezone : "WIB"} |{" "}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="1.2em"
+                        height="1.2em"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          fill="currentColor"
+                          d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
+                        />
+                      </svg>{" "}
+                      {item?.clickCount}
+                    </p>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
         )}
       </div>
     </div>
diff --git a/components/landing-page/news-tickers.tsx b/components/landing-page/news-tickers.tsx
index 72b01cdc..85d00090 100644
--- a/components/landing-page/news-tickers.tsx
+++ b/components/landing-page/news-tickers.tsx
@@ -8,7 +8,7 @@ import { useTranslations } from "next-intl";
 
 export default function NewsTicker() {
   const [article, setArticle] = useState<any>([]);
-  const [currentNewsIndex, setCurrentNewsIndex] = useState(0);
+  const [currentNewsIndex, setCurrentNewsIndex] = useState<any>(0);
   const [animate, setAnimate] = useState(false);
   const t = useTranslations("LandingPage");
 
@@ -38,13 +38,13 @@ export default function NewsTicker() {
     triggerAnimation(newIndex);
   };
 
-  useEffect(() => {
-    const interval = setInterval(() => {
-      triggerAnimation((currentNewsIndex + 1) % article.length);
-    }, 7000);
+  // useEffect(() => {
+  //   const interval = setInterval(() => {
+  //     triggerAnimation((currentNewsIndex + 1) % article.length);
+  //   }, 7000);
 
-    return () => clearInterval(interval);
-  }, [article?.length]);
+  //   return () => clearInterval(interval);
+  // }, [article?.length]);
 
   return (
     <div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between dark:bg-stone-800 bg-gray-50">
@@ -52,20 +52,42 @@ export default function NewsTicker() {
         <span className="mr-2"></span> {t("breakingNews")}
         <div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clip-path-triangle"></div>
       </div>
-      <div className={`w-full  px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"}`}>
-        <Link href={`news/detail/${article[currentNewsIndex]?.id}`} className="hidden lg:block">
-          <p className="text-sm lg:text-base">{article[currentNewsIndex]?.title}</p>
+      {/* <div
+        className={`w-full  px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${
+          animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"
+        }`}
+      >
+        <Link
+          href={`news/detail/${article[currentNewsIndex]?.id}`}
+          className="hidden lg:block"
+        >
+          <p className="text-sm lg:text-base">
+            {article[currentNewsIndex]?.title}
+          </p>
         </Link>
-        <Link href={`news/detail/${article[currentNewsIndex]?.id}`} className="lg:hidden">
-          <p className="text-sm lg:text-base">{textEllipsis(article[currentNewsIndex]?.title, 28)}</p>
+        <Link
+          href={`news/detail/${article[currentNewsIndex]?.id}`}
+          className="lg:hidden"
+        >
+          <p className="text-sm lg:text-base">
+            {textEllipsis(article[currentNewsIndex]?.title, 28)}
+          </p>
         </Link>
-        <p className="text-xs">{formatDateToIndonesian(article[currentNewsIndex]?.createdAt)}</p>
-      </div>
+        <p className="text-xs">
+          {formatDateToIndonesian(article[currentNewsIndex]?.createdAt)}
+        </p>
+      </div> */}
       <div className="flex flex-row text-white h-full gap-[1px]">
-        <a className="bg-[#bb3523] h-full flex items-center" onClick={() => handlePrev()}>
+        <a
+          className="bg-[#bb3523] h-full flex items-center"
+          onClick={() => handlePrev()}
+        >
           <Icon icon="ic:twotone-arrow-left" fontSize={30} />
         </a>
-        <a className="bg-[#bb3523] h-full flex items-center" onClick={() => handleNext()}>
+        <a
+          className="bg-[#bb3523] h-full flex items-center"
+          onClick={() => handleNext()}
+        >
           <Icon icon="ic:twotone-arrow-right" fontSize={30} />
         </a>
       </div>
diff --git a/components/partials/auth/login-form.tsx b/components/partials/auth/login-form.tsx
index 654a2860..a5481c7c 100644
--- a/components/partials/auth/login-form.tsx
+++ b/components/partials/auth/login-form.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
@@ -11,12 +11,19 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { cn, setCookiesEncrypt } from "@/lib/utils";
 import { Loader2 } from "lucide-react";
-import { getProfile, login } from "@/service/auth";
+import { getProfile, login, requestOTP } from "@/service/auth";
 import { toast } from "sonner";
 import { useRouter } from "@/components/navigation";
 import { warning } from "@/lib/swal";
 import { Link } from "@/i18n/routing";
 import { useTranslations } from "next-intl";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/components/ui/input-otp";
+import { error, loading } from "@/config/swal";
 
 // Schema validasi menggunakan zod
 const schema = z.object({
@@ -38,6 +45,24 @@ const LoginForm = () => {
   const [passwordType, setPasswordType] = React.useState("password");
   const t = useTranslations("LandingPage");
 
+  const [isOtpStep, setIsOtpStep] = useState(false);
+  const [otpValue, setOtpValue] = useState("");
+  const [userIdentity] = useState();
+  const [email, setEmail] = useState();
+  const [category, setCategory] = useState("5");
+
+  const handleSignInClick = () => {
+    handleSendOTP();
+    setIsOtpStep(true);
+  };
+
+  const [otp1, setOtp1] = useState();
+  const [otp2, setOtp2] = useState();
+  const [otp3, setOtp3] = useState();
+  const [otp4, setOtp4] = useState();
+  const [otp5, setOtp5] = useState();
+  const [otp6, setOtp6] = useState();
+
   const togglePasswordType = () => {
     setPasswordType((prevType) =>
       prevType === "password" ? "text" : "password"
@@ -53,6 +78,40 @@ const LoginForm = () => {
     mode: "all",
   });
 
+  const handleTypeOTP = (event: any) => {
+    const { form } = event.target;
+    const index = [...form].indexOf(event.target);
+    form.elements[index + 1].focus();
+    event.preventDefault();
+  };
+
+  // const handleNextStep = () => {
+  //   setIsOtpStep(true);
+  // };
+
+  const handleSendOTP = async () => {
+    console.log(userIdentity, email);
+
+    console.log("UMUM");
+    if (email != "") {
+      const data = {
+        memberIdentity: null,
+        email: "",
+        category,
+      };
+
+      // loading();
+      const response = await requestOTP(data);
+
+      if (response.error) {
+        error(response.message);
+        return false;
+      }
+
+      close();
+    }
+  };
+
   // Fungsi submit form
   const onSubmit: SubmitHandler<LoginFormValues> = async (data) => {
     try {
@@ -202,77 +261,129 @@ const LoginForm = () => {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="mt-5 2xl:mt-7 space-y-4">
-      <div className="space-y-2">
-        <Label htmlFor="username" className="font-medium text-default-600">
-          Username
-        </Label>
-        <Input
-          size="lg"
-          disabled={isPending}
-          {...register("username")}
-          id="username"
-          type="username"
-          className={cn("", {
-            "border-destructive": errors.username,
-          })}
-        />
-        {errors.username?.message && (
-          <div className="text-destructive mt-2 text-sm">
-            {errors.username.message}
+      {!isOtpStep && (
+        <>
+          <div className="text-left 2xl:mb-10 mb-4 mt-10">
+            <h4 className="font-semibold text-3xl text-left">
+              {t("logInPlease")}
+            </h4>
+            <div className="text-default-500 text-base">
+              {t("acc")} <span className="text-red-500">{t("reg")}</span>
+            </div>
           </div>
-        )}
-      </div>
-
-      <div className="mt-3.5 space-y-2">
-        <Label htmlFor="password" className="mb-2 font-medium text-default-600">
-          {t("password")}
-        </Label>
-        <div className="relative">
-          <Input
-            size="lg"
-            disabled={isPending}
-            {...register("password")}
-            id="password"
-            type={passwordType}
-            className="peer"
-          />
-          <div
-            className="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 cursor-pointer"
-            onClick={togglePasswordType}
-          >
-            {passwordType === "password" ? (
-              <Icon icon="heroicons:eye" className="w-5 h-5 text-default-400" />
-            ) : (
-              <Icon
-                icon="heroicons:eye-slash"
-                className="w-5 h-5 text-default-400"
-              />
+          <div className="space-y-2">
+            <Label htmlFor="username" className="font-medium text-default-600">
+              Username
+            </Label>
+            <Input
+              size="lg"
+              disabled={isPending}
+              {...register("username")}
+              id="username"
+              type="text"
+              className={cn("", {
+                "border-destructive": errors.username,
+              })}
+            />
+            {errors.username?.message && (
+              <div className="text-destructive mt-2 text-sm">
+                {errors.username.message}
+              </div>
             )}
           </div>
-        </div>
-        {errors.password?.message && (
-          <div className="text-destructive mt-2 text-sm">
-            {errors.password.message}
-          </div>
-        )}
-      </div>
 
-      <div className="flex justify-between">
-        <div className="flex gap-2 items-center">
-          <Checkbox id="checkbox" defaultChecked />
-          <Label htmlFor="checkbox">{t("rememberMe")}</Label>
-        </div>
-        <Link
-          href="/auth/forgot-password"
-          className="text-sm text-default-800 dark:text-default-400 leading-6 font-medium"
-        >
-          {t("forgotPass")}
-        </Link>
-      </div>
-      <Button fullWidth disabled={isPending}>
-        {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-        {isPending ? "Loading..." : "Sign In"}
-      </Button>
+          <div className="mt-3.5 space-y-2">
+            <Label htmlFor="password" className="font-medium text-default-600">
+              {t("password")}
+            </Label>
+            <div className="relative">
+              <Input
+                size="lg"
+                disabled={isPending}
+                {...register("password")}
+                id="password"
+                type="password"
+                className="peer"
+              />
+            </div>
+            {errors.password?.message && (
+              <div className="text-destructive mt-2 text-sm">
+                {errors.password.message}
+              </div>
+            )}
+          </div>
+          <div className="flex justify-between">
+            <div className="flex gap-2 items-center">
+              <Checkbox id="checkbox" defaultChecked />
+              <Label htmlFor="checkbox">{t("rememberMe")}</Label>
+            </div>
+            <Link
+              href="/auth/forgot-password"
+              className="text-sm text-default-800 dark:text-default-400 leading-6 font-medium"
+            >
+              {t("forgotPass")}
+            </Link>
+          </div>
+          <Button fullWidth onClick={handleSignInClick}>
+            Selanjutnya
+          </Button>
+        </>
+      )}
+
+      {isOtpStep && (
+        <>
+          <div className="text-left 2xl:mb-10 mb-4 mt-10">
+            <h4 className="font-semibold text-3xl text-left">
+              {t("pleaseEnterOtp")}
+            </h4>
+          </div>
+          <div className="flex justify-center mb-6">
+            <InputOTP maxLength={6} onChange={(e) => setOtpValue(e)}>
+              <InputOTPGroup>
+                <InputOTPSlot
+                  index={0}
+                  onChange={(e: any) => setOtp1(e.target.value)}
+                  onKeyUp={handleTypeOTP}
+                />
+                <InputOTPSlot
+                  index={1}
+                  onChange={(e: any) => setOtp2(e.target.value)}
+                  onKeyUp={handleTypeOTP}
+                />
+              </InputOTPGroup>
+              <InputOTPSeparator />
+              <InputOTPGroup>
+                <InputOTPSlot
+                  index={2}
+                  onChange={(e: any) => setOtp3(e.target.value)}
+                  onKeyUp={handleTypeOTP}
+                />
+                <InputOTPSlot
+                  index={3}
+                  onChange={(e: any) => setOtp4(e.target.value)}
+                  onKeyUp={handleTypeOTP}
+                />
+              </InputOTPGroup>
+              <InputOTPSeparator />
+              <InputOTPGroup>
+                <InputOTPSlot
+                  index={4}
+                  onChange={(e: any) => setOtp5(e.target.value)}
+                  onKeyUp={handleTypeOTP}
+                />
+                <InputOTPSlot
+                  index={5}
+                  onChange={(e: any) => setOtp6(e.target.value)}
+                  onKeyUp={handleTypeOTP}
+                />
+              </InputOTPGroup>
+            </InputOTP>
+          </div>
+          <Button fullWidth className="bg-red-500">
+            Sign in
+          </Button>
+        </>
+      )}
     </form>
   );
 };
diff --git a/lib/menus.ts b/lib/menus.ts
index 3a46061f..d03f9fd7 100644
--- a/lib/menus.ts
+++ b/lib/menus.ts
@@ -2312,6 +2312,70 @@ export function getMenuList(pathname: string, t: any): Group[] {
             },
           ],
         },
+        {
+          groupLabel: "",
+          id: "settings",
+          menus: [
+            {
+              id: "settings",
+              href: "/admin/settings",
+              label: t("settings"),
+              active: pathname.includes("/settinng"),
+              icon: "material-symbols:settings",
+              submenus: [
+                {
+                  href: "/admin/settings/category",
+                  label: t("category"),
+                  active: pathname === "/admin/settings/category",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/admin/settings/tag",
+                  label: "Tag",
+                  active: pathname === "/admin/settings/tag",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/admin/settings/banner",
+                  label: "Banner",
+                  active: pathname === "/admin/settings/banner",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/admin/settings/feedback",
+                  label: "Feedback",
+                  active: pathname === "/admin/settings/feedback",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/admin/settings/faq",
+                  label: "FAQ",
+                  active: pathname === "/admin/settings/faq",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "https://nat-mediahub.polri.go.id/",
+                  label: "Mediahub 2022",
+                  active: pathname === "/admin/settings/mediahub-2022",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/admin/settings/privacy",
+                  label: t("privacy"),
+                  active: pathname === "/admin/settings/privacy",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+              ],
+            },
+          ],
+        },
       ];
     } else if (Number(userParentLevelId) == 761) {
       menusSelected = [
@@ -2521,6 +2585,70 @@ export function getMenuList(pathname: string, t: any): Group[] {
             },
           ],
         },
+        {
+          groupLabel: "",
+          id: "settings",
+          menus: [
+            {
+              id: "settings",
+              href: "/admin/settings",
+              label: t("settings"),
+              active: pathname.includes("/settinng"),
+              icon: "material-symbols:settings",
+              submenus: [
+                {
+                  href: "/admin/settings/category",
+                  label: t("category"),
+                  active: pathname === "/admin/settings/category",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/admin/settings/tag",
+                  label: "Tag",
+                  active: pathname === "/admin/settings/tag",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/admin/settings/banner",
+                  label: "Banner",
+                  active: pathname === "/admin/settings/banner",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/admin/settings/feedback",
+                  label: "Feedback",
+                  active: pathname === "/admin/settings/feedback",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/admin/settings/faq",
+                  label: "FAQ",
+                  active: pathname === "/admin/settings/faq",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "https://nat-mediahub.polri.go.id/",
+                  label: "Mediahub 2022",
+                  active: pathname === "/admin/settings/mediahub-2022",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/admin/settings/privacy",
+                  label: t("privacy"),
+                  active: pathname === "/admin/settings/privacy",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+              ],
+            },
+          ],
+        },
       ];
     }
   } else if (Number(roleId) == 9) {
diff --git a/messages/en.json b/messages/en.json
index bde88e71..36d622b5 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -420,6 +420,7 @@
     "audioSize": "Audio Size Options",
     "relatedPosts": "Related Posts",
     "logInPlease": "Please Log In to Your Account First",
+    "pleaseEnterOtp": "Please enter the OTP code first",
     "acc": "Don't have an account yet?",
     "reg": "Register",
     "password": "Password",
diff --git a/messages/in.json b/messages/in.json
index 69d234dd..36199c24 100644
--- a/messages/in.json
+++ b/messages/in.json
@@ -421,6 +421,7 @@
     "audioSize": "Opsi Ukuran Audio",
     "relatedPosts": "Post Terkait",
     "logInPlease": "Silahkan masuk ke akun Anda terlebih dahulu",
+    "pleaseEnterOtp": "Silahkan masukan Kode OTP terlebih dahulu",
     "acc": "Belum Punya Akun?",
     "reg": "Daftar",
     "password": "Kata Sandi",