diff --git a/densysme-frontend/src/components/details/confirmation.js b/densysme-frontend/src/components/details/confirmation.js
index cb752d5..8c4e72c 100644
--- a/densysme-frontend/src/components/details/confirmation.js
+++ b/densysme-frontend/src/components/details/confirmation.js
@@ -2,14 +2,22 @@ import "./confirmation.css";
 import FormInput from "./component/FormInput";
 import { useState } from "react";
 
+
 export const Confirmation = () => {
   const [values, setValues] = useState({
     name: "",
     surname: "",
     email: "",
-    phonenumber: ""
+    phonenumber: "",
+    timeslot: ""
   });
 
+
+  const timeslot = {
+      value: '12:00'
+  }
+
+
   const inputs = [
     {
       id: 1,
@@ -62,6 +70,10 @@ export const Confirmation = () => {
     setValues({ ...values, [e.target.name]: e.target.value });
   };
 
+  const onChangeForTimeSlot = (e) => {
+    timeslot.value = e.target.value
+  }
+
   console.log(values);
   return (
     <div className="app">
@@ -75,8 +87,19 @@ export const Confirmation = () => {
             onChange={onChange}
           />
         ))}
+      <label>
+        Pick available time slot:
+        <select value={timeslot} onChange={onChangeForTimeSlot}>
+          <option value="0">09:00</option>
+          <option value="1">10:00</option>
+          <option value="2">11:00</option>
+          <option value="3">12:00</option>
+          <option value="4">13:00</option>6
+        </select>
+      </label>
         <button> Confirm </button>
       </form>
+
     </div>
   );
 }
diff --git a/densysme-frontend/src/components/layout/app-layout.js b/densysme-frontend/src/components/layout/app-layout.js
index ab34e74..80468af 100644
--- a/densysme-frontend/src/components/layout/app-layout.js
+++ b/densysme-frontend/src/components/layout/app-layout.js
@@ -28,7 +28,6 @@ import {DoctorsDetails} from "../details/doctors_details";
 import { ScheduleList } from "../list/schedule-list";
 import { Confirmation} from "../details/confirmation";
 
-
 export  const AppLayout = () => {
     const [openLoginDialog, setOpenLoginDialog] = useState(false)
     const [anchorElUser, setAnchorElUser] = useState(null)
diff --git a/densysme-frontend/src/components/list/schedule-list.js b/densysme-frontend/src/components/list/schedule-list.js
index ccb04e1..565854f 100644
--- a/densysme-frontend/src/components/list/schedule-list.js
+++ b/densysme-frontend/src/components/list/schedule-list.js
@@ -26,16 +26,19 @@ export const ScheduleList = () => {
     {
         "name": "static doctor",
         "specialization": "Surg",
-        "appointment_day": "Wednesday",
-        "available_time": "13:00"
     },
     {
         "name": "static doctor 2",
         "specialization": "Eye",
-        "appointment_day": "Wednesday",
-        "available_time": "12:00"
     }
-    ])   
+    ])
+    const appointmentDay = {
+        value: '0'
+    }
+
+    const onChangeDay = (e) => {
+        appointmentDay.value = e.target.value
+    }
     const [page, setPage] = useState(0)
     const [rowsPerPage, setRowsPerPage] = useState(10)
     const [openModal, setOpenModal] = useState(false)
@@ -102,8 +105,7 @@ export const ScheduleList = () => {
                                     <TableRow>
                                         <TableCell>Name</TableCell>
                                         <TableCell align="right">Specialization</TableCell>
-                                        <TableCell align="right">Appointment day</TableCell>
-                                        <TableCell align="right">Available time</TableCell>
+                                        <TableCell align="right">Appointment Day</TableCell>
                                         <TableCell>Action</TableCell>
                                     </TableRow>
                                 </TableHead>
@@ -117,8 +119,16 @@ export const ScheduleList = () => {
                                                 {schedule.name}
                                             </TableCell>
                                             <TableCell align="right">{schedule.specialization}</TableCell>
-                                            <TableCell align="right">{schedule.appointment_day}</TableCell>
-                                            <TableCell align="right">{schedule.available_time}</TableCell>
+                                            <TableCell align="right">
+                                                <select value={appointmentDay} onChange={onChangeDay}>
+                                                    <option value="0">Monday</option>
+                                                    <option value="1">Tuesday</option>
+                                                    <option value="2">Wednesday</option>
+                                                    <option value="3">Thursday</option>
+                                                    <option value="4">Friday</option>
+                                                </select>
+
+                                            </TableCell>
                                             <TableCell>
                                                 <div className={classes.actionsContainer}>
                                                  <Button