diff --git a/frontend/dashboard/src/pages/Claims/Detail.tsx b/frontend/dashboard/src/pages/Claims/Detail.tsx
index 985ce031..ddf476ad 100644
--- a/frontend/dashboard/src/pages/Claims/Detail.tsx
+++ b/frontend/dashboard/src/pages/Claims/Detail.tsx
@@ -540,7 +540,7 @@ export default function Detail() {
     //Date Discharge
     const [dateDis, setDateDis] = useState(currentDate);
     //Service Type
-    const [valServiceType, setValServiceType] = useState(serviceTypeData?.[0].id);
+    const [valServiceType, setValServiceType] = useState('');
     const [valServiceTypeError, setValServiceTypeError] = useState('');
     //Benefit Name
     const [valBenefitNames, setValBenefitNames] = useState([]);
@@ -564,6 +564,7 @@ export default function Detail() {
         try {
             const response = await axios.get('/claims/get-services/' + id);
             setServiceTypeData(response.data.data.service_type);
+            setValServiceType(response.data.data.service_type[0].id);
             setBenefitNameData(response.data.data.benefit_name);
             setHospitalData(response.data.data.hospital);
             await Promise.all([
@@ -1327,7 +1328,7 @@ export default function Detail() {
                                         </InputLabel>
                                         <Select
                                             id="service_type"
-                                            value={valServiceType ? serviceTypeData?.[0].id : ''}
+                                            value={valServiceType}
                                             fullWidth
                                             label="Service Type"
                                             error={!!valServiceTypeError}