diff --git a/src/pages/carrier/edit.tsx b/src/pages/carrier/edit.tsx
index 235ab5a..08ebd41 100644
--- a/src/pages/carrier/edit.tsx
+++ b/src/pages/carrier/edit.tsx
@@ -1,29 +1,44 @@
-import {Box, TextField} from '@mui/material'
-import {Edit} from '@refinedev/mui'
+import {Autocomplete, Box, TextField} from '@mui/material'
+import {Edit, useAutocomplete} from '@refinedev/mui'
 import {useForm} from '@refinedev/react-hook-form'
+import {Controller} from 'react-hook-form'
 
 export const CarrierEdit = () => {
   const {
     saveButtonProps,
     register,
+    control,
     formState: {errors},
   } = useForm()
 
+  const {autocompleteProps: cityAutocompleteProps} = useAutocomplete({
+    resource: 'city',
+  })
+
   return (
     <Edit saveButtonProps={saveButtonProps}>
       <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
-        <TextField
-          {...register('city_id', {
-            required: 'This field is required',
-          })}
-          error={!!(errors as any)?.city_id}
-          helperText={(errors as any)?.city_id?.message}
-          margin="normal"
-          fullWidth
-          InputLabelProps={{shrink: true}}
-          type="text"
-          label={'City ID'}
+        <Controller
+          control={control}
           name="city_id"
+          rules={{required: 'This field is required'}}
+          defaultValue={null}
+          render={({field}) => (
+            <Autocomplete
+              {...cityAutocompleteProps}
+              value={cityAutocompleteProps.options.find((option) => option.id === field.value) || null}
+              onChange={(_, value) => {
+                field.onChange(value?.id || '')
+              }}
+              getOptionLabel={(item) => {
+                return item ? item.name : ''
+              }}
+              isOptionEqualToValue={(option, value) => {
+                return option.id === value?.id
+              }}
+              renderInput={(params) => <TextField {...params} label="Select City" margin="normal" variant="outlined" error={!!errors.city_id} helperText={(errors as any)?.city_id?.message} required />}
+            />
+          )}
         />
 
         <TextField
diff --git a/src/pages/city/edit.tsx b/src/pages/city/edit.tsx
index 181ebdc..e03e34a 100644
--- a/src/pages/city/edit.tsx
+++ b/src/pages/city/edit.tsx
@@ -1,29 +1,44 @@
-import {Box, TextField} from '@mui/material'
-import {Edit} from '@refinedev/mui'
+import {Autocomplete, Box, TextField} from '@mui/material'
+import {Edit, useAutocomplete} from '@refinedev/mui'
 import {useForm} from '@refinedev/react-hook-form'
+import {Controller} from 'react-hook-form'
 
 export const CityEdit = () => {
   const {
     saveButtonProps,
     register,
+    control,
     formState: {errors},
   } = useForm({})
 
+  const {autocompleteProps: countryAutocompleteProps} = useAutocomplete({
+    resource: 'country',
+  })
+
   return (
     <Edit saveButtonProps={saveButtonProps}>
       <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
-        <TextField
-          {...register('country_code', {
-            required: 'This field is required',
-          })}
-          error={!!(errors as any)?.title}
-          helperText={(errors as any)?.title?.message}
-          margin="normal"
-          fullWidth
-          InputLabelProps={{shrink: true}}
-          type="text"
-          label={'Country code'}
+        <Controller
+          control={control}
           name="country_code"
+          rules={{required: 'This field is required'}}
+          defaultValue={null}
+          render={({field}) => (
+            <Autocomplete
+              {...countryAutocompleteProps}
+              value={countryAutocompleteProps.options.find((option) => option.code === field.value) || null}
+              onChange={(_, value) => {
+                field.onChange(value?.code || '')
+              }}
+              getOptionLabel={(item) => {
+                return item ? item.code : ''
+              }}
+              isOptionEqualToValue={(option, value) => {
+                return option.id === value?.id
+              }}
+              renderInput={(params) => <TextField {...params} label="Country Code" margin="normal" variant="outlined" error={!!errors.country_code} helperText={(errors as any)?.country_code?.message} required />}
+            />
+          )}
         />
 
         <TextField