diff --git a/frontend/dashboard/src/@types/diagnosis.ts b/frontend/dashboard/src/@types/diagnosis.ts
index a33734b5..2d2d65db 100755
--- a/frontend/dashboard/src/@types/diagnosis.ts
+++ b/frontend/dashboard/src/@types/diagnosis.ts
@@ -9,3 +9,6 @@ export type Icd = {
   childs?: Icd[];
   status: string;
 };
+
+
+export type IcdType = Icd
\ No newline at end of file
diff --git a/frontend/dashboard/src/components/autocomplete/AutocompleteDiagnosis.tsx b/frontend/dashboard/src/components/autocomplete/AutocompleteDiagnosis.tsx
index 5fc38880..c5ce22e8 100644
--- a/frontend/dashboard/src/components/autocomplete/AutocompleteDiagnosis.tsx
+++ b/frontend/dashboard/src/components/autocomplete/AutocompleteDiagnosis.tsx
@@ -1,14 +1,97 @@
 import axios from "@/utils/axios";
 import { Autocomplete, TextField, CircularProgress } from "@mui/material";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { IcdType } from "@/@types/diagnosis";
 
-export default function AutocompleteDiagnosis({ onChange, textLabel, currentValue = null })
+type autocompleteValueType = {
+  title: string,
+  value: string | number | null,
+  readonly: boolean
+}
+
+type autocompleteDiagnosisType = {
+  onChange: void,
+  textLabel: string,
+  currentValue: autocompleteValueType | null,
+  currentOptions: autocompleteValueType[]
+}
+
+type optionType = {
+  title: string,
+  value: string | number | null,
+}
+
+// import TextField from '@material-ui/core/TextField';
+// import Autocomplete from '@material-ui/lab/Autocomplete';
+
+
+// const ControlledAutocomplete = ({ options = [], renderInput, getOptionLabel, onChange: ignored, control, defaultValue, name, renderOption }) => {
+//   return (
+//     <Controller
+//       render={({ onChange, ...props }) => (
+//         <Autocomplete
+//           options={options}
+//           getOptionLabel={getOptionLabel}
+//           renderOption={renderOption}
+//           renderInput={renderInput}
+//           onChange={(e, data) => onChange(data)}
+//           {...props}
+//         />
+//       )}
+//       onChange={([, data]) => data}
+//       defaultValue={defaultValue}
+//       name={name}
+//       control={control}
+//     />
+//   );
+// }
+
+export default function AutocompleteDiagnosis({ onChange, textLabel, currentValue, currentOptions = [] }: autocompleteDiagnosisType)
 {
-    const [options, setOptions] = useState([])
+    const [options, setOptions] = useState<autocompleteValueType>([])
     const [loading, setLoading] = useState(false)
+    // const [defaultValue, setDefaultValue] = useState(currentValue ?? {title: 'A00-CHOLERA', value: 1})
+
+    function icdsToOptions(icds: IcdType[]) : autocompleteValueType[] {
+      return icds.map(function(icd: IcdType) {
+          return {
+              title: icd.code + '-' + icd.name,
+              value: icd.id
+          }
+      })
+    }
+
+    useEffect(() => {
+      setOptions(icdsToOptions(currentOptions))
+      // setDefaultValue(currentValue)
+    }, [currentOptions])
+
+    const defaultValue = useMemo(
+      () => (currentValue)
+      , [currentValue]
+    )
+
+    // useEffect(() => {
+    //   if (currentValue && currentValue.value) {
+    //     onChange(currentValue)
+    //   }
+    //   console.log(currentValue)
+    // }, [currentValue])
+
+    const getOptions = (search: string) => {
+      axios.get('options?type=diagnosis&search='+search)
+        .then((res) => {
+            setOptions(icdsToOptions(res.data))
+        })
+        .then(() => {
+            setLoading(false);
+        })
+    }
+
+    // console.log('defaultValue', defaultValue)
 
     return (<Autocomplete
-        defaultValue={currentValue ?? null}
+        defaultValue={defaultValue ?? {title: '', value: null}}
         onChange={(event, value) => {onChange(value)}}
         isOptionEqualToValue={(option, value) => option.title === value.title}
         getOptionLabel={(option) => option.title}
@@ -20,18 +103,7 @@ export default function AutocompleteDiagnosis({ onChange, textLabel, currentValu
             label={textLabel != null ? textLabel : "Diagnosa ICD-X"}
             onChange={(event) => {
                 setLoading(true);
-                axios.get('options?type=diagnosis&search='+event.target.value)
-                    .then((res) => {
-                        setOptions(res.data.map(function(icd) {
-                            return {
-                                title: icd.code + '-' + icd.name,
-                                value: icd.id
-                            }
-                        }))
-                    })
-                    .then(() => {
-                        setLoading(false);
-                    })
+                getOptions(event.target.value)
             }}
             InputProps={{
               ...params.InputProps,
diff --git a/frontend/dashboard/src/components/autocomplete/AutocompleteDiagnosisControlled.tsx b/frontend/dashboard/src/components/autocomplete/AutocompleteDiagnosisControlled.tsx
new file mode 100644
index 00000000..b47ea78c
--- /dev/null
+++ b/frontend/dashboard/src/components/autocomplete/AutocompleteDiagnosisControlled.tsx
@@ -0,0 +1,80 @@
+import axios from '@/utils/axios';
+import { Autocomplete, TextField, CircularProgress } from '@mui/material';
+import { useEffect, useMemo, useState } from 'react';
+import { IcdType } from '@/@types/diagnosis';
+import { Controller } from 'react-hook-form';
+
+type autocompleteValueType = {
+  title: string;
+  value: string | number | null;
+  readonly: string;
+};
+
+type autocompleteDiagnosisType = {
+  onChange: any;
+  textLabel: string;
+  currentValue: any | null;
+  currentOptions: IcdType[];
+};
+
+export default function AutocompleteDiagnosisControlled({
+  onChange,
+  currentValue,
+  textLabel,
+  currentOptions = [],
+}: autocompleteDiagnosisType) {
+  const [options, setOptions] = useState<IcdType>(currentOptions);
+  const [loading, setLoading] = useState(false);
+
+
+  function icdsToOptions(icds: IcdType[]): IcdType[] {
+    return icds.map(function (icd: IcdType) {
+        return icd;
+    //   return {
+    //     title: icd.code + '-' + icd.name,
+    //     value: icd.id,
+    //     readonly: false,
+    //   };
+    });
+  }
+
+  // To Receive Options from Props
+  useEffect(() => {
+    setOptions(icdsToOptions(currentOptions));
+  }, [currentOptions]);
+
+//   useEffect(() => {
+//     console.log('setting Value', currentValue);
+//     setValue(currentValue || null);
+//   }, [currentValue]);
+
+//   const defaultValue = useMemo(() => currentValue, [currentValue]);
+
+  const getOptions = (search: string) => {
+    axios
+      .get('options?type=diagnosis&search=' + search)
+      .then((res) => {
+        setOptions(icdsToOptions(res.data));
+      })
+      .then(() => {
+        setLoading(false);
+      });
+  };
+
+  return (
+    <Autocomplete
+      options={options}
+      getOptionLabel={(option) => (`${option.code} - ${option.name}`)}
+      value={currentValue}
+      isOptionEqualToValue={(option, value) => option.id == value.id}
+      onChange={(event: any, newValue: any) => {
+        // setValue('primary_diagnosis_id', newValue?.id ?? null);
+        onChange(newValue);
+      }}
+      loading={loading}
+      renderInput={(params) => (
+        <TextField {...params} label={textLabel} variant="outlined" fullWidth onChange={(event) => {getOptions(event.target.value)}}/>
+      )}
+    />
+  );
+}
diff --git a/frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx b/frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx
index 0b6534b0..ed6d188f 100755
--- a/frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx
+++ b/frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx
@@ -66,7 +66,7 @@ const navConfig = [
         // ],
       },
       {
-        title: 'CASE MANAGEMENT',
+        title: 'CLAIM MANAGEMENT',
         path: '/claims',
         // children: [
         //   { title: 'Request', path: '/case-request' },
diff --git a/frontend/dashboard/src/pages/Claims/Show.tsx b/frontend/dashboard/src/pages/Claims/Show.tsx
index de19c504..82412004 100644
--- a/frontend/dashboard/src/pages/Claims/Show.tsx
+++ b/frontend/dashboard/src/pages/Claims/Show.tsx
@@ -39,6 +39,7 @@ import DiagnosisHistory from './components/DiagnosisHistory';
 import ClaimItems from './components/ClaimItems';
 import DialogMemberBenefit from './components/DialogMemberBenefit';
 import AutocompleteDiagnosis from '@/components/autocomplete/AutocompleteDiagnosis';
+import AutocompleteDiagnosisControlled from '@/components/autocomplete/AutocompleteDiagnosisControlled';
 
 export default function ClaimsCreateUpdate() {
   const { themeStretch } = useSettings();
@@ -97,9 +98,17 @@ export default function ClaimsCreateUpdate() {
   const [primaryDiagnosis, setPrimaryDiagnosis] = useState(null);
   const [secondaryDiagnosis, setSecondaryDiagnosis] = useState(null);
   const [loadingDiagnosis, setLoadingDiagnosis] = useState(false);
+  const [primaryDiagnosisOptions, setPrimaryDiagnosisOptions] = useState([]);
+  const [secondaryDiagnosisOptions, setSecondaryDiagnosisOptions] = useState([]);
 
-  const handlePrimaryDiagnosisChange = ({ title, value }) => {
-    setPrimaryDiagnosis(value);
+  const handlePrimaryDiagnosisChange = (diagnosisOption) => {
+    console.log('handle', diagnosisOption);
+    if (diagnosisOption) {
+      const { title, value } = diagnosisOption;
+      setPrimaryDiagnosis(value);
+    } else {
+      setPrimaryDiagnosis(null);
+    }
   };
 
   const handleSecondaryDiagnosisChange = ({ title, value }) => {
@@ -174,48 +183,84 @@ export default function ClaimsCreateUpdate() {
       });
   };
 
-  
   // ---------------------------------------------------------------
   // Initial LOG
-  const [loadingLog, setLoadingLog] = useState(false)
+  const [loadingLog, setLoadingLog] = useState(false);
 
   const handleDownloadLog = (claim_id) => {
     setLoadingLog(true);
-      axios
-        .post(`generate-log/${claim_id}`, {
-          responseType: 'blob',
-        })
-        .then((response) => {
-          window.open(URL.createObjectURL(response.data));
-          setLoadingLog(false);
-          setOpenDialog(false);
-        })
-        .catch((response) => {
-          enqueueSnackbar(response.message, { variant: 'error' });
-          setLoadingLog(false);
-        });
-  }
-
+    axios
+      .post(`generate-log/${claim_id}`, {
+        responseType: 'blob',
+      })
+      .then((response) => {
+        window.open(URL.createObjectURL(response.data));
+        setLoadingLog(false);
+        setOpenDialog(false);
+      })
+      .catch((response) => {
+        enqueueSnackbar(response.message, { variant: 'error' });
+        setLoadingLog(false);
+      });
+  };
 
   // -------------------------------------------------
   // Final LOG
-  const [loadingFinalLog, setLoadingFinalLog] = useState(false)
+  const [loadingFinalLog, setLoadingFinalLog] = useState(false);
   const handleDownloadFinalLog = (claim_id) => {
     setLoadingFinalLog(true);
-      axios
-        .get(`final-log/${claim_id}`, {
-          responseType: 'blob',
-        })
-        .then((response) => {
-          window.open(URL.createObjectURL(response.data));
-          setLoadingFinalLog(false);
-        })
-        .catch((response) => {
-          enqueueSnackbar(response.message, { variant: 'error' });
-          setLoadingFinalLog(false);
-        });
+    axios
+      .get(`final-log/${claim_id}`, {
+        responseType: 'blob',
+      })
+      .then((response) => {
+        window.open(URL.createObjectURL(response.data));
+        setLoadingFinalLog(false);
+      })
+      .catch((response) => {
+        enqueueSnackbar(response.message, { variant: 'error' });
+        setLoadingFinalLog(false);
+      });
+  };
+
+  // ---------------------------------------------------
+  // Primary ICD
+
+  const NewCorporateSchema = Yup.object().shape({
+    primary_diagnosis_id: Yup.string().required('Name is required'),
+  });
+
+  interface FormValuesProps extends Partial<any> {
+    primary_diagnosis_id: number;
   }
-  
+
+  const defaultValues = useMemo(
+    () => ({
+      primary_diagnosis: currentClaim?.primary_diagnosis[0]?.icd ?? null,
+      secondary_diagnosis: currentClaim?.secondary_diagnosis[0]?.icd ?? null
+    }),
+    [currentClaim]
+  );
+
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(NewCorporateSchema),
+    defaultValues,
+  });
+
+  const {
+    reset,
+    watch,
+    control,
+    setValue,
+    getValues,
+    setError,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  const values = watch();
+
+  // ----------------------------------------------------------------
 
   useEffect(() => {
     axios.get('/claims/' + id).then(({ data }) => {
@@ -225,6 +270,30 @@ export default function ClaimsCreateUpdate() {
       setCurrentClaim(claim);
       setDocuments(allFiles);
       setClaimItems(claim.benefit_items);
+
+      // SET Default Primary Diagnosis
+      if (claim.primary_diagnosis.length && claim.primary_diagnosis[0].icd) {
+        setPrimaryDiagnosisOptions(
+          claim.primary_diagnosis.map((diagnosis) => {
+            if (diagnosis.icd) {
+              return diagnosis.icd;
+            }
+          })
+        );
+        setValue('primary_diagnosis', claim.primary_diagnosis[0].icd);
+      }
+
+      // SET Default Secondary Diagnosis
+      if (claim.secondary_diagnosis.length && claim.secondary_diagnosis[0].icd) {
+        setSecondaryDiagnosisOptions(
+          claim.secondary_diagnosis.map((diagnosis) => {
+            if (diagnosis.icd) {
+              return diagnosis.icd;
+            }
+          })
+        );
+        setValue('secondary_diagnosis', claim.secondary_diagnosis[0].icd)
+      }
     });
   }, [id]);
 
@@ -280,24 +349,22 @@ export default function ClaimsCreateUpdate() {
                 Re-Open
               </LoadingButton>
             )}
-
-
           </Stack>
         </Stack>
 
         <Paper variant="outlined" sx={{ background: '#f4f6f8', p: 2, marginY: 2 }}>
           <Stack direction="row" justifyContent="space-between" alignItems="center">
             <Typography>Status : {currentClaim?.status}</Typography>
-            { currentClaim?.status == 'approved' && (
-                <LoadingButton
-                  loading={loadingFinalLog}
-                  variant="contained"
-                  onClick={() => {
-                    handleDownloadFinalLog(currentClaim.id);
-                  }}
-                >
-                  Download Final LOG
-                </LoadingButton>
+            {currentClaim?.status == 'approved' && (
+              <LoadingButton
+                loading={loadingFinalLog}
+                variant="contained"
+                onClick={() => {
+                  handleDownloadFinalLog(currentClaim.id);
+                }}
+              >
+                Download Final LOG
+              </LoadingButton>
             )}
           </Stack>
         </Paper>
@@ -381,35 +448,46 @@ export default function ClaimsCreateUpdate() {
               <Paper variant="outlined" sx={{ background: '#f4f6f8', p: 2 }}>
                 <Paper variant="outlined" sx={{ background: 'white', p: 2 }}>
                   <Stack spacing={2}>
-                    <AutocompleteDiagnosis
-                      onChange={handlePrimaryDiagnosisChange}
-                      textLabel="Diagnosa Utama (ICD-X)"
-                      currentValue={
-                        currentClaim?.primary_diagnosis ? currentClaim?.primary_diagnosis : null
-                      }
-                    ></AutocompleteDiagnosis>
-                    <AutocompleteDiagnosis
-                      onChange={handleSecondaryDiagnosisChange}
-                      textLabel="Diagnosa Tambahan (ICD-X)"
-                      currentValue={
-                        currentClaim?.secondary_diagnosis ? currentClaim?.secondary_diagnosis : null
-                      }
-                    ></AutocompleteDiagnosis>
+                    {/* {JSON.stringify(getValues('primary_diagnosis'))} */}
+                    <Controller
+                      name="primary_diagnosis"
+                      control={control}
+                      render={({ field: { onChange, value } }) => (
+                        <AutocompleteDiagnosisControlled
+                          onChange={onChange}
+                          currentOptions={primaryDiagnosisOptions}
+                          currentValue={value}
+                          textLabel="Diagnosis Utama (ICD-X)"
+                        />
+                      )}
+                    />
+
+                    <Controller
+                      name="secondary_diagnosis"
+                      control={control}
+                      render={({ field: { onChange, value } }) => (
+                        <AutocompleteDiagnosisControlled
+                          onChange={onChange}
+                          currentOptions={secondaryDiagnosisOptions}
+                          currentValue={value}
+                          textLabel="Diagnosis Tambahan (ICD-X)"
+                        />
+                      )}
+                    />
                   </Stack>
                 </Paper>
 
                 {(currentClaim?.status == 'requested' || currentClaim?.status == 'received') && (
-
-<LoadingButton
-variant="contained"
-sx={{ marginTop: 2 }}
-loading={loadingDiagnosis}
-onClick={() => {
-  handleSaveDiagnosis();
-}}
->
-Simpan Claim Item
-</LoadingButton>
+                  <LoadingButton
+                    variant="contained"
+                    sx={{ marginTop: 2 }}
+                    loading={loadingDiagnosis}
+                    onClick={() => {
+                      handleSaveDiagnosis();
+                    }}
+                  >
+                    Simpan Diagnosa
+                  </LoadingButton>
                 )}
               </Paper>
 
@@ -426,20 +504,18 @@ Simpan Claim Item
                 </Stack>
                 <ClaimItems items={claimItems} setItems={setClaimItems}></ClaimItems>
                 <Stack alignItems={'flex-end'}>
-                  
-                {(currentClaim?.status == 'requested' || currentClaim?.status == 'received') && (
-
-                  <LoadingButton
-                    variant="contained"
-                    sx={{ marginTop: 2 }}
-                    loading={loadingClaimItems}
-                    onClick={() => {
-                      handleSaveClaimItems();
-                    }}
-                  >
-                    Simpan Claim Item
-                  </LoadingButton>
-                )}
+                  {(currentClaim?.status == 'requested' || currentClaim?.status == 'received') && (
+                    <LoadingButton
+                      variant="contained"
+                      sx={{ marginTop: 2 }}
+                      loading={loadingClaimItems}
+                      onClick={() => {
+                        handleSaveClaimItems();
+                      }}
+                    >
+                      Simpan Claim Item
+                    </LoadingButton>
+                  )}
                 </Stack>
 
                 <DialogMemberBenefit