diff --git a/app/[locale]/(public)/image/filter/page.tsx b/app/[locale]/(public)/image/filter/page.tsx
index 8ef407d3..32a75b58 100644
--- a/app/[locale]/(public)/image/filter/page.tsx
+++ b/app/[locale]/(public)/image/filter/page.tsx
@@ -371,7 +371,7 @@ const FilterPage = () => {
 
       {/* Left */}
       <div className="flex flex-col lg:flex-row gap-6 p-4">
-        <div className="lg:w-96 h-fit w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
+        <div className="lg:w-[25%] h-fit w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
           <h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
             <Icon icon="stash:filter-light" fontSize={30} />
             Filter
diff --git a/app/[locale]/(public)/video/filter/page.tsx b/app/[locale]/(public)/video/filter/page.tsx
index e0e1514b..b24a6279 100644
--- a/app/[locale]/(public)/video/filter/page.tsx
+++ b/app/[locale]/(public)/video/filter/page.tsx
@@ -96,10 +96,6 @@ const FilterPage = () => {
     }
   }, [categorie]);
 
-  // useEffect(() => {
-  //   fetchData();
-  // }, [page, sortBy, sortByOpt, title]);
-
   useEffect(() => {
     async function initState() {
       if (isRegional) {
@@ -108,9 +104,8 @@ const FilterPage = () => {
         getDataAll();
       }
     }
-    console.log(monthYearFilter, "monthFilter");
     initState();
-  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
+  }, [locale, change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
 
   async function getCategories() {
     const category = await listCategory("2");
@@ -290,7 +285,7 @@ const FilterPage = () => {
       size: 6,
       sortBy: "createdAt",
       contentTypeId: "2",
-      isInt: locale == "en" ? true : false,
+      isInt: locale == "in" ? true : false,
     });
     console.log(response);
     setVideoData(response?.data?.data?.content);
diff --git a/app/[locale]/auth/registration/page.tsx b/app/[locale]/auth/registration/page.tsx
index b59c4eec..7a369845 100644
--- a/app/[locale]/auth/registration/page.tsx
+++ b/app/[locale]/auth/registration/page.tsx
@@ -1,11 +1,11 @@
 "use client";
 
+import React from "react";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import Image from "next/image";
-
 import { close, error, loading, registerConfirm } from "@/config/swal";
 import { Link, useRouter } from "@/i18n/routing";
 import { getDataByNIK, getDataByNRP, getDataJournalist, getDataPersonil, listCity, listDistricts, listInstitusi, listProvince, postRegistration, saveInstitutes } from "@/service/auth";
@@ -52,7 +52,6 @@ const page = () => {
   const [emailValidate, setEmailValidate] = useState("");
   const [otpValidate, setOtpValidate] = useState("");
   const [password, setPassword] = useState("");
-  const [passwordConf, setPasswordConf] = useState("");
   const [city, setCity] = useState([]);
   const [isValidPassword, setIsValidPassword] = useState(false);
   const MySwal = withReactContent(Swal);
@@ -80,6 +79,14 @@ const page = () => {
   const nSecondInMiliseconds = 1000;
   const [, setRefreshTimer] = useState(false);
 
+  const [passwordType, setPasswordType] = React.useState("password");
+  const [passwordConf, setPasswordConf] = React.useState("password");
+
+  const togglePasswordType = () => {
+    setPasswordType((prevType) => (prevType === "password" ? "text" : "password"));
+    setPasswordConf((prevType) => (prevType === "same password" ? "text" : "same password"));
+  };
+
   const validationSchema = Yup.object().shape({
     firstName: Yup.string().required("Nama Lengkap tidak boleh kosong"),
     username: Yup.string().required("Username tidak boleh kosong"),
@@ -106,22 +113,6 @@ const page = () => {
   let [timerCount, setTimerCount] = useState(convertMinutesToMiliseconds(1));
   let interval: any;
 
-  const showPass = () => {
-    setTypePass("text");
-  };
-
-  const hidePass = () => {
-    setTypePass("password");
-  };
-
-  const showPassConf = () => {
-    setTypePassConf("text");
-  };
-
-  const hidePassConf = () => {
-    setTypePassConf("password");
-  };
-
   const setValUsername = (e: any) => {
     const uname = e.replaceAll(/[^\w.-]/g, "");
     setValue("username", uname.toLowerCase());
@@ -513,19 +504,6 @@ const page = () => {
     initState();
   }, [institusi]);
 
-  useEffect(() => {
-    async function initState() {
-      if (category != undefined) {
-        const resInstiution = await listInstitusi(category);
-        const res = await listProvince();
-        setInstitution(resInstiution?.data.data);
-        setProvince(res?.data.data);
-      }
-    }
-
-    initState();
-  }, [category]);
-
   return (
     <div className="overflow-y-auto flex flex-wrap w-full h-dvh">
       <div className="lg:block hidden flex-1 overflow-hidden bg-black text-[40px] leading-[48px] text-default-600 relative z-[1]">
@@ -618,10 +596,10 @@ const page = () => {
                     }
               }
             >
-              <label htmlFor="association" className="mb-3">
+              <label htmlFor="association" className="mb-2">
                 <b>Jenis Keanggotaan</b> <span className="text-red-500">*</span>
               </label>
-              <select className={`py-3 rounded-md border border-black ${errors.association ? "block" : ""}`} {...register("association")} id="association" onChange={(e) => setAssociation(e.target.value)}>
+              <select className={`py-3 px-2 rounded-md border border-black ${errors.association ? "block" : ""}`} {...register("association")} id="association" onChange={(e) => setAssociation(e.target.value)}>
                 <option disabled selected>
                   Pilih Asosiasi
                 </option>
@@ -645,7 +623,7 @@ const page = () => {
             </div>
 
             {Number(category) == 7 ? (
-              <div className="px-8">
+              <div className="px-[34px]">
                 <label htmlFor="userIdentity" className="mb-3">
                   <b>Nomor Registrasi Polri (NRP)</b> <span className="text-red-500">*</span>
                 </label>
@@ -657,7 +635,7 @@ const page = () => {
             )}
             {Number(category) == 6 ? (
               <div
-                className="px-8 mb-3"
+                className="px-[34px]"
                 style={
                   Number(category) == 6
                     ? {}
@@ -666,9 +644,9 @@ const page = () => {
                       }
                 }
               >
-                <label htmlFor="journalistCertificate">
-                  <b>Nomor Sertifikasi Wartawan</b> <span className="text-red-500">*</span>
-                </label>
+                <Label htmlFor="journalistCertificate">
+                  Nomor Sertifikasi Wartawan <span className="text-red-500">*</span>
+                </Label>
                 <Input className="rounded-md py-3" autoComplete="off" placeholder="Masukan Nomor Sertifikasi" type="text" onChange={(event: any) => setJournalistCertificate(event.target.value)} />
               </div>
             ) : (
@@ -715,17 +693,18 @@ const page = () => {
             </div>
           </div>
 
-          <div className={`flex flex-col gap-3 my-4 px-12 ${formProfile == false ? "hidden" : ""}`}>
+          <div className={`flex flex-col px-12 ${formProfile == false ? "hidden" : ""}`}>
             <div>
               {Number(category) == 6 || Number(category) == 7 ? (
-                <div className="">
-                  <label className="">
-                    <b>{`${Number(category) == 6 ? "Nomor Sertifikasi Wartawan" : "NRP"}`}</b> <span className="text-red-500">*</span>
+                <div className="px-[34px]">
+                  <label className="mb-2">
+                    {`${Number(category) == 6 ? "Nomor Sertifikasi Wartawan" : "NRP"}`}
+                    <span className="text-red-500">*</span>
                   </label>
                   <Input
                     type="text"
                     autoComplete="off"
-                    className={` ${errors.memberIdentity ? "block" : ""}`}
+                    className={`mb-3 ${errors.memberIdentity ? "block" : ""}`}
                     {...register("memberIdentity")}
                     placeholder="Masukan Nomor Identitas"
                     onChange={(e) => handleIdentity(e.target.value)}
@@ -736,21 +715,21 @@ const page = () => {
               ) : (
                 ""
               )}
-              <div className="mb-4">
+              <div className="mb-4 px-[34px]">
                 <label className="mb-2">
-                  <b>Nama Lengkap</b> <span className="text-red-500">*</span>
+                  Nama Lengkap <span className="text-red-500">*</span>
                 </label>
                 <Input type="text" autoComplete="off" className={` ${errors.firstName ? "block" : ""}`} {...register("firstName")} placeholder="Masukan Nama Lengkap Anda" />
                 <div className="text-red-500">{errors.firstName?.message}</div>
               </div>
-              <div className="mb-4">
+              <div className="mb-4 px-[34px]">
                 <label className="mb-2">
-                  <b>Username</b> <span className="text-red-500">*</span>
+                  Username <span className="text-red-500">*</span>
                 </label>
                 <Input
                   type="text"
                   autoComplete="off"
-                  className={`form-control ${errors.username ? "block" : ""}`}
+                  className={`${errors.username ? "block" : ""}`}
                   {...register("username")}
                   placeholder="Masukan Username"
                   onChange={(e) => {
@@ -765,35 +744,35 @@ const page = () => {
                 />
                 <div className="text-red-500">{errors.username?.message}</div>
               </div>
-              <div className="mb-4">
+              <div className="mb-4 px-[34px]">
                 <label className="mb-2">
-                  <b>Email</b> <span className="text-red-500">*</span>
+                  Email <span className="text-red-500">*</span>
                 </label>
-                <Input type="email" autoComplete="off" className={` ${errors.email ? "block" : ""}`} {...register("email")} placeholder="Masukan Email Anda" disabled />
+                <Input type="email" autoComplete="off" className={`${errors.email ? "block" : ""}`} {...register("email")} placeholder="Masukan Email Anda" disabled />
                 <div className="text-red-500">{errors.email?.message}</div>
               </div>
             </div>
-            <div className="flex flex-col">
+            <div className="flex flex-col px-[34px]">
               <label className="mb-2">
-                <b>No. HP</b> <span className="text-red-500">*</span>
+                No. HP<span className="text-red-500">*</span>
               </label>
-              <Input type="number" autoComplete="off" className={` ${errors.phoneNumber ? "block" : ""}`} {...register("phoneNumber")} placeholder="Masukan Nomor Telepon Anda" />
+              <Input type="number" autoComplete="off" className={`mb-3 ${errors.phoneNumber ? "block" : ""}`} {...register("phoneNumber")} placeholder="Masukan Nomor Telepon Anda" />
               <div className="text-red-500">{errors.phoneNumber?.message}</div>
             </div>
-            <div className="mb-4">
+            <div className="mb-4 px-[34px]">
               <label htmlFor="address" className="mb-2">
-                <b>Alamat</b> <span className="text-red-500">*</span>
+                Alamat <span className="text-red-500">*</span>
               </label>
               <Textarea className={`form-control ${errors.address ? "block" : ""}`} {...register("address")} placeholder="Masukan Alamat Lengkap Anda" rows={3} />
               <div className="text-red-500">{errors.address?.message}</div>
             </div>
             {Number(category) == 6 ? (
-              <div className="flex flex-col gap-3">
-                <div className="">
+              <div className="flex flex-col gap-3 px-[34px]">
+                <div className="flex flex-col mb-2">
                   <label htmlFor="provinsi">
-                    <b>Pilih Institusi</b> <span className="text-red-500">*</span>
+                    Institusi <span className="text-red-500">*</span>
                   </label>
-                  <select className="" id="provinsi" onChange={(event) => handleInstituteOption(event)}>
+                  <select className="mb-3 py-2" id="provinsi" onChange={(event) => handleInstituteOption(event)}>
                     <option disabled selected>
                       Pilih Institusi
                     </option>
@@ -808,7 +787,7 @@ const page = () => {
                   </select>
                 </div>
                 <div
-                  className=""
+                  className="px-[34px]"
                   style={
                     isCustomActive == false
                       ? {
@@ -818,25 +797,25 @@ const page = () => {
                   }
                 >
                   <label htmlFor="alamat" className="mb-2">
-                    <b>Nama Institusi</b> <span className="text-red-500">*</span>
+                    Nama Institusi <span className="text-red-500">*</span>
                   </label>
-                  <Input className="" autoComplete="off" placeholder="Masukan Nama Lengkap Institusi Anda" type="text" onChange={(event) => setCustomInstituteName(event.target.value)} />
+                  <Input className="mb-3" autoComplete="off" placeholder="Masukan Nama Lengkap Institusi Anda" type="text" onChange={(event) => setCustomInstituteName(event.target.value)} />
                 </div>
                 <div className="">
-                  <label htmlFor="alamat" className="">
-                    <b>Alamat Institusi</b> <span className="text-red-500">*</span>
+                  <label htmlFor="alamat" className="mb-2">
+                    Alamat Institusi <span className="text-red-500">*</span>
                   </label>
-                  <Textarea className="" placeholder="Masukan Alamat Lengkap Institusi Anda" rows={3} value={institusiAddress} onChange={(event) => setInstitusiAddress(event.target.value)} />
+                  <Textarea className="mb-3" placeholder="Masukan Alamat Lengkap Institusi Anda" rows={3} value={institusiAddress} onChange={(event) => setInstitusiAddress(event.target.value)} />
                 </div>
               </div>
             ) : (
               ""
             )}
-            <div className="flex flex-col">
+            <div className="flex flex-col px-[34px]">
               <label htmlFor="provinsi" className="mb-2">
-                <b>Provinsi</b> <span className="text-red-500">*</span>
+                Provinsi <span className="text-red-500">*</span>
               </label>
-              <select className={` ${errors.provinsi ? "block" : ""}`} {...register("provinsi")} id="provinsi" name="provinsi" onChange={(event) => getCity(event.target.value)}>
+              <select className={`mb-3 py-2 ${errors.provinsi ? "block" : ""}`} {...register("provinsi")} id="provinsi" name="provinsi" onChange={(event) => getCity(event.target.value)}>
                 <option disabled selected>
                   Pilih Provinsi
                 </option>
@@ -848,11 +827,11 @@ const page = () => {
               </select>
               <div className="text-red-500">{errors.provinsi?.message}</div>
             </div>
-            <div className="flex flex-col">
+            <div className="flex flex-col px-[34px]">
               <label htmlFor="kota" className="mb-2">
-                <b>Kota/Kabupaten</b> <span className="text-red-500">*</span>
+                Kota/Kabupaten <span className="text-red-500">*</span>
               </label>
-              <select className={` ${errors.kota ? "block" : ""}`} {...register("kota")} id="kota" onChange={(event) => getDistricts(event.target.value)}>
+              <select className={`mb-3 py-2 ${errors.kota ? "block" : ""}`} {...register("kota")} id="kota" onChange={(event) => getDistricts(event.target.value)}>
                 <option disabled selected>
                   Pilih Kota/Kabupaten
                 </option>
@@ -864,11 +843,11 @@ const page = () => {
               </select>
               <div className="text-red-500">{errors.kota?.message}</div>
             </div>
-            <div className="flex flex-col">
+            <div className="flex flex-col px-[34px]">
               <label htmlFor="kecamatan" className="mb-2">
-                <b>Kecamatan</b> <span className="text-red-500">*</span>
+                Kecamatan <span className="text-red-500">*</span>
               </label>
-              <select className={` ${errors.kecamatan ? "block" : ""}`} {...register("kecamatan")} id="kecamatan">
+              <select className={`py-2 ${errors.kecamatan ? "block" : ""}`} {...register("kecamatan")} id="kecamatan">
                 <option disabled selected>
                   Pilih Kecamatan
                 </option>
@@ -880,7 +859,7 @@ const page = () => {
               </select>
               <div className="text-red-500">{errors.kecamatan?.message}</div>
             </div>
-            <div className="flex flex-col">
+            {/* <div className="flex flex-col">
               <label htmlFor="password" className="mb-2">
                 <b>Kata Sandi</b> <span className="text-red-500">*</span>
               </label>
@@ -900,16 +879,45 @@ const page = () => {
                   setValPassword(e.target.value.trim());
                 }}
                 required
-              />
-              <div className="text-red-500">{errors.password?.message}</div>
-              <a className={`text-black  ${typePass == "text" ? "hidden" : ""}`} onClick={showPass}>
+              />{" "}
+              <a className={`text-black place-items-end -top-44 ${typePass == "text" ? "hidden" : ""}`} onClick={showPass}>
                 <Icon icon="fa:eye" />
               </a>
               <a className={`text-black ${typePass == "password" ? "hidden" : ""}`} onClick={hidePass}>
                 <Icon icon="fa:eye-slash" />
               </a>
+              <div className="text-red-500">{errors.password?.message}</div>
+            </div> */}
+            <div className="mt-3.5 space-y-2 px-[34px]">
+              <Label htmlFor="password" className="mb-2 font-medium text-default-600">
+                Kata Sandi <span className="text-red-500">*</span>
+              </Label>
+              <div className="relative">
+                <Input
+                  size="lg"
+                  type={passwordType}
+                  autoComplete="off"
+                  className={` ${errors.password ? "block" : ""}`}
+                  {...register("password")}
+                  placeholder="Masukan Kata Sandi"
+                  onChange={(e) => {
+                    setValPassword(e.target.value.trim());
+                  }}
+                  onPaste={(e: any) => {
+                    setValPassword(e.target.value.trim());
+                  }}
+                  onCopy={(e: any) => {
+                    setValPassword(e.target.value.trim());
+                  }}
+                  required
+                />
+                <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>
+              </div>
+              {errors.password?.message && <div className="text-destructive mt-2 text-sm">{errors.password.message}</div>}
             </div>
-            <div className="flex flex-col">
+            {/* <div className="flex flex-col">
               <label htmlFor="password" className="mb-2">
                 <b>Konfirmasi Kata Sandi</b> <span className="text-red-500">*</span>
               </label>
@@ -937,8 +945,37 @@ const page = () => {
               <a className={`text-dark show-pass ${typePassConf == "password" ? "hidden" : ""}`} onClick={hidePassConf}>
                 <Icon icon="fa:eye-slash" />
               </a>
+            </div> */}
+            <div className="mt-3.5 space-y-2 px-[34px]">
+              <Label htmlFor="password" className="mb-2 font-medium text-default-600">
+                Konfirmasi Kata Sandi <span className="text-red-500">*</span>
+              </Label>
+              <div className="relative">
+                <Input
+                  size="lg"
+                  type={passwordConf}
+                  autoComplete="off"
+                  className={` ${errors.passwordConf ? "block" : ""}`}
+                  {...register("passwordConf")}
+                  placeholder="Masukan Kata Sandi yang Sama"
+                  onChange={(e) => {
+                    setValPasswordConf(e.target.value.trim());
+                  }}
+                  onPaste={(e: any) => {
+                    setValPasswordConf(e.target.value.trim());
+                  }}
+                  onCopy={(e: any) => {
+                    setValPasswordConf(e.target.value.trim());
+                  }}
+                  required
+                />
+                <div className="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 cursor-pointer" onClick={togglePasswordType}>
+                  {passwordConf === "same 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>
+              </div>
+              <div className="text-red-500">{warningPassConf}</div>
             </div>
-            <div className="form-group">
+            <div className="form-group px-[34px]">
               <PasswordChecklist
                 rules={["minLength", "specialChar", "number", "capital", "match"]}
                 minLength={8}
@@ -959,7 +996,7 @@ const page = () => {
           </div>
 
           <div
-            className="flex flex-col mt-8 mb-2 px-12"
+            className="flex flex-col mt-8 mb-2"
             style={
               (stepOneActive && !stepTwoActive) || stepThreeActive
                 ? {}
@@ -968,7 +1005,7 @@ const page = () => {
                   }
             }
           >
-            <div className="text-center mb-2">
+            <div className="text-center mb-2 px-[34px]">
               <p>
                 Dengan mendaftar, saya telah menyetujui <br />{" "}
                 <a href="/privacy" target="_blank" className="text-red-500">
@@ -980,10 +1017,10 @@ const page = () => {
                 </a>
               </p>
             </div>
-            <div className={`mb-5 mt-7 w-full text-center flex justify-center ${formProfile == true || stepTwoActive ? "hidden" : ""}`}>
+            <div className={`mb-5 mt-7 px-[34px] w-full text-center flex justify-center ${formProfile == true || stepTwoActive ? "hidden" : ""}`}>
               {/* <a className="border cursor-pointer border-red-500 px-4 py-3 rounded-lg text-white bg-[#dc3545] w-full" onClick={() => handleSendOTP()}> */}
               <a
-                className="border cursor-pointer border-red-500 px-4 py-3 rounded-lg text-white bg-[#dc3545] w-[400px]"
+                className="border cursor-pointer border-red-500 px-4 py-3 rounded-lg text-white bg-[#dc3545] w-[550px]"
                 onClick={() => {
                   setStepOneActive(false);
                   setStepTwoActive(true);
@@ -994,7 +1031,7 @@ const page = () => {
             </div>
           </div>
           <div
-            className="flex flex-row mt-2 mb-4"
+            className="flex justify-center items-center mt-2 mb-4 px-[34px]"
             style={
               formProfile == false
                 ? {
@@ -1003,11 +1040,9 @@ const page = () => {
                 : {}
             }
           >
-            <div className="text-center">
-              <button type="submit" className="border border-red-500 text-red-500">
-                Daftar
-              </button>
-            </div>
+            <Button type="submit" className="border w-[550px] text-center bg-red-700 text-white hover:bg-white hover:text-red-700 ">
+              Daftar
+            </Button>
           </div>
         </div>
       </form>