diff --git a/app/dashboard/state/details/[stateID]/page.tsx b/app/dashboard/state/details/[stateID]/page.tsx
index 5f31032..9d4b562 100644
--- a/app/dashboard/state/details/[stateID]/page.tsx
+++ b/app/dashboard/state/details/[stateID]/page.tsx
@@ -110,6 +110,7 @@ export default function Details() {
     register,
     handleSubmit,
     control,
+    reset,
     formState: { errors },
   } = useForm<UpdateStateActivities>();
 
@@ -307,7 +308,10 @@ export default function Details() {
                 bgColor={"#185C99"}
                 borderRadius={"full"}
                 _hover={{ bgColor: "#295278" }}
-                onClick={onOpen}
+                onClick={() => {
+                  reset();
+                  onOpen();
+                }}
               >
                 <Flex alignItems={"center"} color={"white"}>
                   <Icon as={MdEdit} boxSize={4} />
@@ -431,19 +435,28 @@ export default function Details() {
       <Modal size={"2xl"} onClose={onClose} isOpen={isOpen} isCentered>
         <ModalOverlay />
         <ModalContent borderRadius={"xl"}>
+          <ModalHeader>Sunting STATE {dataState?.name}</ModalHeader>
+          <ModalCloseButton />
+
           <form
             // to handle multipart, please use formData :)
             onSubmit={handleSubmit((data) => {
               const formData = new FormData();
-              formData.append("name", data.name);
-              formData.append("day", data.day);
+              formData.append("name", data.name ?? dataState?.name);
+              formData.append("day", data.day ?? dataState?.day);
               formData.append("stateDesc", data.stateDesc);
-              formData.append("location", data.location);
-              formData.append("quota", data.quota.toString());
-              formData.append("test_file", data.stateLogo);
+              formData.append("location", data.location ?? dataState?.location);
+              formData.append(
+                "quota",
+                data.quota ? data.quota.toString() : dataState!.quota.toString()
+              );
+
+              if (data.stateLogo) {
+                formData.append("test_file", data.stateLogo);
+              }
 
               api
-                .put(`/stateAct/update/`, formData, {
+                .put(`/stateAct/update/${params.stateID}`, formData, {
                   headers: {
                     "Content-Type": "multipart/form-data",
                   },
@@ -460,86 +473,84 @@ export default function Details() {
               onClose();
             })}
           >
-            <ModalBody>
-              <Center w={"full"} my={"1em"}>
-                <Text fontSize={"2xl"} fontWeight={"semibold"} color={"#11D22"}>
-                  Sunting
-                </Text>
-              </Center>
-              <Box w={"full"}>
-                <ModalBody textColor="#1e1d22">
-                  <FormControl isInvalid={!!errors.stateLogo}>
-                    <Box w={"full"} mb={"2em"}>
-                      <FormLabel
-                        fontSize={"md"}
-                        fontWeight={"semibold"}
-                        color={"#11D22"}
-                      >
-                        Logo
-                      </FormLabel>
-
-                      <Box
-                        padding={"1em"}
-                        border={"solid #CBD5E0"}
-                        width={"100%"}
-                        height={"100%"}
-                        borderRadius={10}
-                        transition={"0.1s ease-in-out"}
-                        _hover={{ border: "solid #CBD5E0" }}
-                      >
-                        <DropZone
-                          control={control}
-                          name="stateLogo"
-                          rules={{
-                            required: "Logo STATE tidak boleh kosong.",
-                          }}
-                        />
-                        {/* <Input
+            <ModalBody textColor="#1e1d22">
+              <FormControl isInvalid={!!errors.stateLogo}>
+                <Box w={"full"} mb={"2em"}>
+                  <FormLabel
+                    fontSize={"md"}
+                    fontWeight={"semibold"}
+                    color={"#11D22"}
+                  >
+                    Ganti Logo
+                  </FormLabel>
+
+                  <Box
+                    padding={"1em"}
+                    border={"solid #CBD5E0"}
+                    width={"100%"}
+                    height={"100%"}
+                    borderRadius={10}
+                    transition={"0.1s ease-in-out"}
+                    _hover={{ border: "solid #CBD5E0" }}
+                  >
+                    <DropZone
+                      control={control}
+                      name="stateLogo"
+                      defaultValue={dataState?.stateLogo}
+                      // rules={{
+                      //   required: "Logo STATE tidak boleh kosong.",
+                      // }}
+                    />
+                    {/* <Input
                           id="stateLogo"
                           type="file"
                           {...register("stateLogo", {
                             required: "Logo STATE tidak boleh kosong.",
                           })}
                         /> */}
-                      </Box>
-                      <FormErrorMessage>
-                        {errors.stateLogo && errors.stateLogo.message}
-                      </FormErrorMessage>
-                    </Box>
-                  </FormControl>
+                  </Box>
+                  <FormErrorMessage>
+                    {errors.stateLogo && errors.stateLogo.message}
+                  </FormErrorMessage>
+                </Box>
+              </FormControl>
 
-                  <FormControl isInvalid={!!errors.name}>
-                    <FormLabel>Name</FormLabel>
-                    <Input
-                      id="name"
-                      {...register("name", {
-                        value: dataState?.name,
-                        required: "Nama STATE tidak boleh kosong.",
-                        pattern: {
-                          value: /^[A-Za-z .]*$/,
-                          message: "Nama STATE tidak valid",
-                        },
-                      })}
-                    />
-                    <FormErrorMessage>
-                      {errors.name && errors.name.message}
-                    </FormErrorMessage>
-                  </FormControl>
+              {auth.role !== "organisator" && (
+                <FormControl isInvalid={!!errors.name}>
+                  <FormLabel>Name</FormLabel>
+                  <Input
+                    id="name"
+                    {...register("name", {
+                      value: dataState?.name,
+                      required: "Nama STATE tidak boleh kosong.",
+                      pattern: {
+                        value: /^[A-Za-z .]*$/,
+                        message: "Nama STATE tidak valid",
+                      },
+                    })}
+                  />
+                  <FormErrorMessage>
+                    {errors.name && errors.name.message}
+                  </FormErrorMessage>
+                </FormControl>
+              )}
 
-                  <FormControl isInvalid={!!errors.stateDesc}>
-                    <FormLabel>Deksripsi</FormLabel>
-                    <Textarea
-                      id="stateDesc"
-                      {...register("stateDesc", {
-                        value: dataState?.stateDesc,
-                        required: "Deskripsi STATE tidak boleh kosong",
-                      })}
-                    />
-                    <FormErrorMessage>
-                      {errors.stateDesc && errors.stateDesc.message}
-                    </FormErrorMessage>
-                  </FormControl>
+              <FormControl isInvalid={!!errors.stateDesc}>
+                <FormLabel>Deksripsi</FormLabel>
+                <Textarea
+                  id="stateDesc"
+                  {...register("stateDesc", {
+                    value: dataState?.stateDesc,
+                    required: "Deskripsi STATE tidak boleh kosong",
+                  })}
+                />
+                <FormErrorMessage>
+                  {errors.stateDesc && errors.stateDesc.message}
+                </FormErrorMessage>
+              </FormControl>
 
+              {auth.role !== "organisator" && (
+                <>
                   <FormControl isInvalid={!!errors.location}>
                     <FormLabel>Lokasi</FormLabel>
                     <Input
@@ -600,8 +611,8 @@ export default function Details() {
                       {errors.quota && errors.quota.message}
                     </FormErrorMessage>
                   </FormControl>
-                </ModalBody>
-              </Box>
+                </>
+              )}
             </ModalBody>
             <ModalFooter>
               <Button type="submit" color="#185C99" mr={3}>
diff --git a/components/DropZone.tsx b/components/DropZone.tsx
index fdac296..c5fb8bc 100644
--- a/components/DropZone.tsx
+++ b/components/DropZone.tsx
@@ -1,10 +1,14 @@
 import { useState, useEffect } from "react";
-import { Box, Text, Image, Center } from "@chakra-ui/react";
+import { Box, Text, Image, Center, Progress } from "@chakra-ui/react";
 import { useController } from "react-hook-form";
 import { useDropzone } from "react-dropzone";
 import imageCompression from "browser-image-compression";
 import Swal from "sweetalert2";
 
+const validateImg = (url: string) => {
+  return url.match(/(https?:\/\/.*\.(?:png|jpg|jpeg|gif))/) != null;
+};
+
 const DropZone = ({
   control,
   name,
@@ -13,26 +17,23 @@ const DropZone = ({
 }: {
   control: any;
   name: string;
-  rules: any;
-  defaultValue?: any;
+  rules?: any;
+  defaultValue?: string;
 }) => {
   // yep ini buat nge hook ke react-hook-form
   const {
     field: { value, onChange },
     fieldState: { error },
-  } = useController({ control, name, rules, defaultValue });
-
-  useEffect(() => {
-    return () => {
-      if (value && value.preview) {
-        URL.revokeObjectURL(value.preview);
-      }
-    };
-  }, [value]);
+  } = useController({
+    control,
+    name,
+    rules,
+  });
 
   const { getRootProps, getInputProps } = useDropzone({
     maxFiles: 1,
-    accept: { "image/jpeg": [], "image/jpg": [], "image/png": [] },
+    // "image/jpg": [".jpg"],
+    accept: { "image/jpeg": [".jpeg", ".jpg"], "image/png": [".png"] },
     onDrop: (acceptedFiles: File[]) => {
       if (acceptedFiles.length) {
         imageCompression(acceptedFiles[0], {
@@ -40,7 +41,14 @@ const DropZone = ({
           maxWidthOrHeight: 512,
           useWebWorker: true,
         })
-          .then((file) => onChange(file))
+          .then((file) =>
+            onChange(
+              new File([file], file.name, {
+                lastModified: file.lastModified,
+                type: file.type,
+              })
+            )
+          )
           .catch((err) => {
             console.error(err);
             Swal.fire(
@@ -78,6 +86,28 @@ const DropZone = ({
     </Box>
   );
 
+  const before = defaultValue && validateImg(defaultValue) && (
+    <Box
+      display={"inline-flex"}
+      borderRadius={4}
+      border={"2px solid #eaeaea"}
+      mt={"16px"}
+      mx={1}
+      w={"auto"}
+      h={"auto"}
+      p={1}
+      boxSizing={"border-box"}
+    >
+      <Box display={"flex"} w={"auto"} h={"100%"}>
+        <Image
+          src={defaultValue}
+          style={{ display: "block", width: "auto", height: "100%" }}
+          alt={"before"}
+        />
+      </Box>
+    </Box>
+  );
+
   return (
     <>
       <Center
@@ -96,7 +126,7 @@ const DropZone = ({
         </Text>
       </Center>
       <Box display={"flex"} flexDirection={"row"} flexWrap={"wrap"}>
-        {thumb}
+        {value ? thumb : before}
       </Box>
     </>
   );