diff --git a/src/components/DoctorSelector.jsx b/src/components/DoctorSelector.jsx
index 9ec27c5..a894f87 100644
--- a/src/components/DoctorSelector.jsx
+++ b/src/components/DoctorSelector.jsx
@@ -9,12 +9,11 @@ const DoctorSelector = ({ doctors, selectedDoctorIndex, onChange }) => (
       onChange={(e) => onChange(e.target.value !== '' ? parseInt(e.target.value, 10) : null)}
       className="p-2 border border-gray-300 rounded-md"
       id="doc-select"
-      defaultValue={selectedDoctorIndex}
     >
       <option value="">Select a doctor</option>
       {doctors.map((doctor) => (
         <option key={doctor.id} value={doctor.id}>
-          {doctor.name}
+          {`${doctor.name}, ${doctor.specialization.name}`}
         </option>
       ))}
     </select>
@@ -26,8 +25,12 @@ DoctorSelector.propTypes = {
     id: PropTypes.number.isRequired,
     name: PropTypes.string.isRequired,
   })).isRequired,
-  selectedDoctorIndex: PropTypes.number.isRequired,
+  selectedDoctorIndex: PropTypes.number,
   onChange: PropTypes.func.isRequired,
 };
 
+DoctorSelector.defaultProps = {
+  selectedDoctorIndex: null,
+};
+
 export default DoctorSelector;
diff --git a/src/components/TimeSelector.jsx b/src/components/TimeSelector.jsx
index b0de3ad..32b44cd 100644
--- a/src/components/TimeSelector.jsx
+++ b/src/components/TimeSelector.jsx
@@ -53,7 +53,6 @@ const TimeSelector = ({ selectedTime, doctor, onChange }) => {
         onChange={handleTimeChange}
         id="hour-select"
         className="p-2 border border-gray-300 rounded-md"
-        defaultValue={selectedTime}
       >
         <option value="">Select a time</option>
         {availableTimes.map((time) => (
diff --git a/src/routes/AppointmentUpdate.jsx b/src/routes/AppointmentUpdate.jsx
index 1182fa3..7b7e0d8 100644
--- a/src/routes/AppointmentUpdate.jsx
+++ b/src/routes/AppointmentUpdate.jsx
@@ -21,7 +21,7 @@ const AppointmentUpdate = () => {
   const doctorsState = useSelector((state) => state.doctors);
   const appointment = appointmentsState.appointments.filter((elem) => elem.id === +appId);
   const [selectedDate, setSelectedDate] = useState(
-    appointment[0]?.appointment_date || new Date(),
+    appointment[0]?.appointment_date ? new Date(appointment[0].appointment_date) : new Date(),
   );
   const [selectedTime, setSelectedTime] = useState(
     appointment[0]?.appointment_time || '',
@@ -82,7 +82,7 @@ const AppointmentUpdate = () => {
   return (
     <div className="flex flex-col items-center justify-center w-full min-h-screen p-4 space-y-4 bg-gray-100 appointment-booking-container">
       <div className="bg-white md:px-24 md:py-6 md:rounded-2xl md:border-2 md:border-green-400">
-        <h1 className="my-5 text-2xl font-bold text-center md:mt-10">Schedule a new Appointment</h1>
+        <h1 className="my-5 text-2xl font-bold text-center md:mt-10">Update Your Appointment</h1>
         <form className="flex flex-col items-center justify-center w-full gap-4">
           <DoctorSelector
             doctors={doctorsState.doctors}
@@ -90,7 +90,7 @@ const AppointmentUpdate = () => {
             onChange={handleDoctorChange}
           />
           <DateSelector selectedDate={selectedDate} onChange={handleDateChange} />
-          {selectedDoctorIndex !== null && (
+          {selectedDoctorIndex !== null && doctorsState.doctors.length > 0 && (
             <TimeSelector
               selectedTime={selectedTime}
               doctor={
diff --git a/src/routes/CreateAppointment.jsx b/src/routes/CreateAppointment.jsx
index 5d17f48..2b1ef61 100644
--- a/src/routes/CreateAppointment.jsx
+++ b/src/routes/CreateAppointment.jsx
@@ -15,7 +15,6 @@ const CreateAppointment = () => {
   const dispatch = useDispatch();
   const doctorsState = useSelector((state) => state.doctors);
   const navigate = useNavigate();
-
   useEffect(() => {
     dispatch(fetchdoctors());
   }, [dispatch]);