diff --git a/apps/frontend/doctor/pages/index.tsx b/apps/frontend/doctor/pages/index.tsx
index 40b2209..10a9307 100644
--- a/apps/frontend/doctor/pages/index.tsx
+++ b/apps/frontend/doctor/pages/index.tsx
@@ -1,4 +1,5 @@
-import { PatientDetails, UpcomingDetails } from '@hospe/ui';
+import { UpcomingDetails } from '@hospe/ui';
+import { Api } from '@hospe/next';
 import {
   Paper,
   SimpleGrid,
@@ -7,9 +8,39 @@ import {
   Text,
   Group,
 } from '@mantine/core';
-import { Users, Report } from 'tabler-icons-react';
+import { Report } from 'tabler-icons-react';
+import { useEffect, useState } from 'react';
 
+
+interface Session {
+  __v: string;
+  docId: string;
+  _id: string;
+  date: string;
+  time: string;
+  maximumPatients: number;
+  doctorFee: number;
+}
+
+export interface Formdata {
+  _id: string;
+}
 export function Index() {
+  const [session, setSession] = useState<Session[]>([]);
+
+  useEffect(() => {
+    Api.Doctor.GetAll().then((res) => {
+      setSession(res);
+    });
+  }, []);
+
+  const onSubmit = async (values: Formdata) => {
+    await Api.Doctor.Delete(values._id);
+    Api.Doctor.GetAll().then((res) => {
+      setSession(res);
+    });
+  };
+
   return (
     <>
       <SimpleGrid
@@ -20,121 +51,6 @@ export function Index() {
           { maxWidth: 'sm', cols: 1, spacing: 'sm' },
         ]}
       >
-        {/* Patients Details */}
-        <div style={{ height: 450 }}>
-          <Paper
-            radius="md"
-            shadow="sm"
-            withBorder
-            p="lg"
-            m="md"
-            style={{ height: '100%' }}
-            sx={(theme) => ({
-              backgroundColor:
-                theme.colorScheme === 'dark'
-                  ? theme.colors.dark[8]
-                  : theme.white,
-            })}
-          >
-            <Text size="md" pb={12}>
-              Today Appointments
-            </Text>
-            <Divider my="sm" />
-            <Group mb={'sm'}>
-              <Users size={18} />
-              <Text size="xs">10 Active Patients</Text>
-            </Group>
-
-            <ScrollArea
-              style={{ height: '80%', width: '100%', paddingBottom: 12 }}
-              type="hover"
-            >
-              <PatientDetails
-                patientdata={[
-                  {
-                    name: 'John Davis',
-                    gender: 'Male',
-                    age: 54,
-                    appointmentNumber: 1,
-                  },
-                  {
-                    name: 'John Harison',
-                    gender: 'Male',
-                    age: 22,
-                    appointmentNumber: 2,
-                  },
-                  {
-                    name: 'John Paker',
-                    gender: 'Male',
-                    age: 95,
-                    appointmentNumber: 3,
-                  },
-                  {
-                    name: 'John Hamilton',
-                    gender: 'Female',
-                    age: 22,
-                    appointmentNumber: 4,
-                  },
-                  {
-                    name: 'John',
-                    gender: 'Female',
-                    age: 30,
-                    appointmentNumber: 5,
-                  },
-                  {
-                    name: 'John Paker',
-                    gender: 'Male',
-                    age: 95,
-                    appointmentNumber: 6,
-                  },
-                  {
-                    name: 'John Hamilton',
-                    gender: 'Female',
-                    age: 22,
-                    appointmentNumber: 7,
-                  },
-                  {
-                    name: 'John',
-                    gender: 'Female',
-                    age: 30,
-                    appointmentNumber: 5,
-                  },
-                  {
-                    name: 'John Paker',
-                    gender: 'Male',
-                    age: 95,
-                    appointmentNumber: 6,
-                  },
-                  {
-                    name: 'John Hamilton',
-                    gender: 'Female',
-                    age: 22,
-                    appointmentNumber: 7,
-                  },
-                  {
-                    name: 'John',
-                    gender: 'Female',
-                    age: 30,
-                    appointmentNumber: 5,
-                  },
-                  {
-                    name: 'John Paker',
-                    gender: 'Male',
-                    age: 95,
-                    appointmentNumber: 6,
-                  },
-                  {
-                    name: 'John Hamilton',
-                    gender: 'Female',
-                    age: 22,
-                    appointmentNumber: 7,
-                  },
-                ]}
-              />
-            </ScrollArea>
-          </Paper>
-        </div>
-
         {/* Upcoming Appointments */}
         <div style={{ height: 450 }}>
           <Paper
@@ -163,49 +79,8 @@ export function Index() {
 
             <ScrollArea style={{ height: '80%', width: '100%' }}>
               <UpcomingDetails
-                upcomingDetailsdata={[
-                  {
-                    time: '8.30 PM',
-                    date: '2022-08-15',
-                    patientsNumber: 12,
-                    location: 'Room 06',
-                  },
-
-                  {
-                    time: '10.30 PM',
-                    date: '2022-08-16',
-                    patientsNumber: 25,
-                    location: 'Room 08',
-                  },
-
-                  {
-                    time: '8.30 PM',
-                    date: '2022-08-16',
-                    patientsNumber: 32,
-                    location: 'Room 10',
-                  },
-
-                  {
-                    time: '8.30 PM',
-                    date: '2022-08-15',
-                    patientsNumber: 12,
-                    location: 'Room 06',
-                  },
-
-                  {
-                    time: '8.30 PM',
-                    date: '2022-08-15',
-                    patientsNumber: 12,
-                    location: 'Room 06',
-                  },
-
-                  {
-                    time: '8.30 PM',
-                    date: '2022-08-15',
-                    patientsNumber: 12,
-                    location: 'Room 06',
-                  },
-                ]}
+                upcomingDetailsdata={session}
+                onSubmit={onSubmit}
               />
             </ScrollArea>
           </Paper>
diff --git a/apps/frontend/management/pages/doctorRegistration.tsx b/apps/frontend/management/pages/doctorRegistration.tsx
index 660f0a9..0fcf514 100644
--- a/apps/frontend/management/pages/doctorRegistration.tsx
+++ b/apps/frontend/management/pages/doctorRegistration.tsx
@@ -13,8 +13,7 @@ const doctorRegistration = () => {
   ];
 
   const onSubmit = async (values: IDoctorCreate) => {
-    const res = await Api.Employee.CreateDoctor(values);
-    console.log(res);
+    await Api.Employee.CreateDoctor(values);
   };
 
   return (
diff --git a/apps/frontend/user/pages/index.tsx b/apps/frontend/user/pages/index.tsx
index 7020420..71d1622 100644
--- a/apps/frontend/user/pages/index.tsx
+++ b/apps/frontend/user/pages/index.tsx
@@ -1,56 +1,54 @@
-import { useAuthStore } from '@hospe/next';
-import { ResultCard, SearchBar } from '@hospe/ui';
+import { SearchBar, SearchRes } from '@hospe/ui';
 import { Center, SimpleGrid } from '@mantine/core';
+import { Api } from '@hospe/next';
+import { useEffect, useState } from 'react';
+
+export interface Formdata {
+  Doctype: string;
+}
+
+interface SearchData {
+  _id: string;
+  docType: string;
+  docFee: number;
+  time: string;
+  maximumPatients: number;
+  date: string;
+  docName: string;
+}
+
+interface docFee {
+  docFee: number;
+}
 
 const IndexPage = () => {
-  const { displayName } = useAuthStore();
+  const [session, setSession] = useState<SearchData[]>([]);
+  const [fee, setFee] = useState<docFee[]>([]);
+
+  useEffect(() => {
+    setSession([]);
+  }, []);
+
+  const onSubmit = async (values: Formdata) => {
+    const data = await Api.Doctor.GetTypes(values.Doctype);
+    setSession(data);
+    setFee(data.docFee);
+  };
 
   const mockDataSearch = {
     searchData: [
       {
-        specializations: ['General Physician', 'Dentist', 'Cardiologist'],
+        specializations: ['Surgeon', 'ENT', 'VOG'],
         time: ['Any', 'Morning', 'Afternoon', 'Evening'],
         gender: ['Any', 'Male', 'Female'],
       },
     ],
   };
 
-  const mockDataResult = {
-    data: [
-      {
-        name: 'John Doe',
-        specialization: 'General Physician',
-        patientCount: 10,
-        time: 10,
-        fee: 100,
-      },
-      {
-        name: 'John Doe',
-        specialization: 'General Physician',
-        patientCount: 10,
-        time: 10,
-        fee: 100,
-      },
-      {
-        name: 'John Doe',
-        specialization: 'General Physician',
-        patientCount: 10,
-        time: 10,
-        fee: 100,
-      },
-    ],
-  };
-
-  const items = mockDataResult.data.map((item) => (
-    <div key={item.name}>
-      <ResultCard {...mockDataResult}></ResultCard>
-    </div>
-  ));
-
   return (
     <>
       <div>
-        <SearchBar {...mockDataSearch}></SearchBar>
+        <SearchBar {...mockDataSearch} onSubmit={onSubmit}></SearchBar>
         <Center>
           <SimpleGrid
             cols={3}
@@ -61,9 +59,10 @@ const IndexPage = () => {
               { maxWidth: 755, cols: 1, spacing: 'sm' },
             ]}
           >
-            {items}
+            {/* {items} */}
           </SimpleGrid>
         </Center>
+        <SearchRes searchData={session}></SearchRes>
       </div>
     </>
   );
diff --git a/apps/services/api/src/apps/channeling/channeling.controller.ts b/apps/services/api/src/apps/channeling/channeling.controller.ts
index 12a1c3b..0cc9939 100644
--- a/apps/services/api/src/apps/channeling/channeling.controller.ts
+++ b/apps/services/api/src/apps/channeling/channeling.controller.ts
@@ -6,8 +6,12 @@ import {
   FindOneChanneling,
   UpdateChanneling,
   FindAllChanneling,
+  FindAllChannelingByDocId,
+  FindAllChannelingByDocType,
 } from './channeling.service';
 
+import { FindOneEmployee } from '../employee/employee.service';
+
 export const router = Router();
 
 /* find channeling session by id */
@@ -30,6 +34,25 @@ router.get('/', async (req, res) => {
     ExpressErrorResponseHandler(res, error);
   }
 });
+
+router.get('/doctor/:docId', async (req, res) => {
+  try {
+    const data = await FindAllChannelingByDocId(req.params.docId);
+    res.status(200).json(data);
+  } catch (error) {
+    ExpressErrorResponseHandler(res, error);
+  }
+});
+
+router.get('/type/:docType', async (req, res) => {
+  try {
+    const data = await FindAllChannelingByDocType(req.params.docType);
+    res.status(200).json(data);
+  } catch (error) {
+    ExpressErrorResponseHandler(res, error);
+  }
+});
+
 /* delete channeling session by id */
 router.delete('/:id', async (req, res) => {
   try {
@@ -44,7 +67,15 @@ router.delete('/:id', async (req, res) => {
 /* create channeling session */
 router.post('/create-channeling', async (req, res) => {
   try {
-    const data = await CreateChanneling(req.user.id, req.body);
+    const docData = await FindOneEmployee(req.user.id);
+    const docType = docData.specialization;
+    const docName = docData.name;
+    const data = await CreateChanneling(
+      req.user.id,
+      docType,
+      docName,
+      req.body
+    );
     res.status(200).json(data);
   } catch (error) {
     ExpressErrorResponseHandler(res, error);
diff --git a/apps/services/api/src/apps/channeling/channeling.dto.ts b/apps/services/api/src/apps/channeling/channeling.dto.ts
index 491e62d..1dd6266 100644
--- a/apps/services/api/src/apps/channeling/channeling.dto.ts
+++ b/apps/services/api/src/apps/channeling/channeling.dto.ts
@@ -1,8 +1,11 @@
 export interface CreateChannelingDto {
+  readonly docId: string;
+  readonly docType: string;
   readonly date: Date;
   readonly time: string;
   readonly maximumPatients: number;
   readonly doctorFee: number;
+  readonly docName: string;
 }
 
 export type UpdateChannelingDto = Partial<CreateChannelingDto>;
diff --git a/apps/services/api/src/apps/channeling/channeling.schema.ts b/apps/services/api/src/apps/channeling/channeling.schema.ts
index 0549851..7387f23 100644
--- a/apps/services/api/src/apps/channeling/channeling.schema.ts
+++ b/apps/services/api/src/apps/channeling/channeling.schema.ts
@@ -2,10 +2,12 @@ import { model, Schema } from 'mongoose';
 
 const ChannelingSchema = new Schema({
   docId: { type: String, required: true },
+  docType: { type: String, required: true },
   date: { type: Date, required: true, index: -1, default: Date.now },
   time: { type: String, required: true, index: -1 },
   maximumPatients: { type: Number, required: true },
   doctorFee: { type: Number, required: true },
+  docName: { type: String, required: true },
 });
 
 export const ChannelingModel = model('Channeling', ChannelingSchema);
diff --git a/apps/services/api/src/apps/channeling/channeling.service.ts b/apps/services/api/src/apps/channeling/channeling.service.ts
index 8105fb2..c0fdc36 100644
--- a/apps/services/api/src/apps/channeling/channeling.service.ts
+++ b/apps/services/api/src/apps/channeling/channeling.service.ts
@@ -3,15 +3,26 @@ import { ChannelingModel } from './channeling.schema';
 
 export const CreateChanneling = async (
   docId: string,
+  docType: string,
+  docName: string,
   params: CreateChannelingDto
 ) => {
-  return await ChannelingModel.create({ ...params, docId });
+  return await ChannelingModel.create({ ...params, docId, docType, docName });
 };
 
 export const FindOneChanneling = async (id: string) => {
   return await ChannelingModel.findOne({ _id: id });
 };
 
+export const FindAllChannelingByDocId = async (docId: string) => {
+  return await ChannelingModel.find({ docId });
+};
+
+export const FindAllChannelingByDocType = async (docType: string) => {
+  console.log(docType);
+  return await ChannelingModel.find({ docType });
+};
+
 export const FindAllChanneling = async () => {
   return await ChannelingModel.find();
 };
diff --git a/libs/next/src/api/doctor.ts b/libs/next/src/api/doctor.ts
index f1663cf..7929147 100644
--- a/libs/next/src/api/doctor.ts
+++ b/libs/next/src/api/doctor.ts
@@ -1,6 +1,34 @@
 import { ISessionForm } from '@hospe/types';
 import { instance } from './axios';
 
+interface CreateSessionProps {
+  docId: string;
+  docName: string;
+  docType: string;
+  date: string;
+  time: string;
+  maximumPatients: number;
+  doctorFee: number;
+}
+
+const CreateSession = (props: CreateSessionProps) => {
+  return instance
+    .post('/channeling/create-channeling', props)
+    .then((res) => res.data);
+};
+
+const GetAll = () => {
+  return instance.get('/channeling/').then((res) => res.data);
+};
+
+const Delete = (props: string) => {
+  return instance.delete(`/channeling/${props}`).then((res) => res.data);
+};
+
+const GetTypes = (type: string) => {
+  return instance.get(`/channeling/type/${type}`).then((res) => res.data);
+};
+
 const CreateSession = (props: ISessionForm) => {
   return instance
     .post('/channeling/create-channeling', props)
@@ -9,4 +37,7 @@ const CreateSession = (props: ISessionForm) => {
 
 export const Doctor = {
   CreateSession,
+  GetAll,
+  Delete,
+  GetTypes,
 };
diff --git a/libs/ui/src/lib/components/channeling/searching/index.tsx b/libs/ui/src/lib/components/channeling/searching/index.tsx
index d393228..42aa67f 100644
--- a/libs/ui/src/lib/components/channeling/searching/index.tsx
+++ b/libs/ui/src/lib/components/channeling/searching/index.tsx
@@ -1,3 +1,4 @@
 export * from './profileCard';
 export * from './resultCard';
 export * from './searchBar';
+export * from './searchres';
diff --git a/libs/ui/src/lib/components/channeling/searching/searchBar.stories.tsx b/libs/ui/src/lib/components/channeling/searching/searchBar.stories.tsx
index 6067dcc..14ef96f 100644
--- a/libs/ui/src/lib/components/channeling/searching/searchBar.stories.tsx
+++ b/libs/ui/src/lib/components/channeling/searching/searchBar.stories.tsx
@@ -15,6 +15,9 @@ const mockData: SearchDetailsProps = {
       gender: ['Any', 'Male', 'Female'],
     },
   ],
+  onSubmit: (values) => {
+    console.log(values);
+  },
 };
 
 const Template: ComponentStory<typeof SearchBar> = () => (
diff --git a/libs/ui/src/lib/components/channeling/searching/searchBar.tsx b/libs/ui/src/lib/components/channeling/searching/searchBar.tsx
index 984d4d3..8594dcd 100644
--- a/libs/ui/src/lib/components/channeling/searching/searchBar.tsx
+++ b/libs/ui/src/lib/components/channeling/searching/searchBar.tsx
@@ -8,8 +8,11 @@ import {
   NativeSelect,
   Select,
   Center,
+  Paper,
+  Group,
 } from '@mantine/core';
 import { DatePicker } from '@mantine/dates';
+import { useForm } from '@mantine/hooks';
 
 interface SearchBarProps {
   specializations: string[];
@@ -17,73 +20,63 @@ interface SearchBarProps {
   gender: string[];
 }
 
+export interface Formdata {
+  Doctype: string;
+}
+
 export interface SearchDetailsProps {
   searchData: SearchBarProps[];
+  onSubmit: (values: Formdata) => void;
 }
 
-export const SearchBar: FC<SearchDetailsProps> = ({ searchData }) => {
+export const SearchBar: FC<SearchDetailsProps> = (props) => {
+  const form = useForm<Formdata>({
+    initialValues: {
+      Doctype: '',
+    },
+  });
   return (
     <Container>
       <Box>
-        <Grid
-          sx={(theme) => ({
-            backgroundColor: '#e6f3fa',
-            padding: theme.spacing.xl,
-            borderRadius: theme.radius.md,
-          })}
+        <form
+          onSubmit={(evt) => {
+            evt.preventDefault();
+            props.onSubmit(form.values);
+          }}
         >
-          <Grid.Col md={4}>
-            <Select
-              data={searchData[0].specializations}
-              placeholder="Select Specialization"
-              label="Specialization"
-              radius="md"
-              size="md"
-            />
-          </Grid.Col>
-          <Grid.Col md={8}>
-            <TextInput
-              radius="md"
-              size="md"
-              label="Doctor Name"
-              rightSectionWidth={42}
-            />
-          </Grid.Col>
-          <Grid.Col md={4}>
-            <NativeSelect
-              data={searchData[0].time}
-              label="Prefered Time"
-              placeholder="Any"
-              radius="md"
-              size="md"
-            />
-          </Grid.Col>
-          <Grid.Col md={4}>
-            <NativeSelect
-              data={searchData[0].gender}
-              label="Gender"
-              placeholder="Any"
-              radius="md"
-              size="md"
-            />
-          </Grid.Col>
-          <Grid.Col md={4}>
-            <DatePicker
-              placeholder="Any /Any /Any"
-              label="Date"
-              radius="md"
-              size="md"
-            />
-          </Grid.Col>
-
-          <Grid.Col md={12}>
+          <Paper
+            radius="md"
+            shadow="sm"
+            withBorder
+            p="lg"
+            m="md"
+            style={{ height: '100%' }}
+            sx={(theme) => ({
+              backgroundColor:
+                theme.colorScheme === 'dark'
+                  ? theme.colors.dark[8]
+                  : theme.white,
+            })}
+          >
+            <Center>
+              <Grid>
+                <Select
+                  data={props.searchData[0].specializations}
+                  placeholder="Select Specialization"
+                  label="Specialization"
+                  radius="md"
+                  size="md"
+                  {...form.getInputProps('Doctype')}
+                />
+              </Grid>
+            </Center>
             <Center>
-              <Button variant="filled" radius="md" size="md">
-                Channel Search
-              </Button>
+              <Grid mt={'sm'}>
+                <Button type="submit">Search</Button>
+              </Grid>
             </Center>
-          </Grid.Col>
-        </Grid>
+          </Paper>
+        </form>
       </Box>
     </Container>
   );
diff --git a/libs/ui/src/lib/components/channeling/searching/searchres.stories.tsx b/libs/ui/src/lib/components/channeling/searching/searchres.stories.tsx
new file mode 100644
index 0000000..0fb52f6
--- /dev/null
+++ b/libs/ui/src/lib/components/channeling/searching/searchres.stories.tsx
@@ -0,0 +1,29 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { SearchRes } from './searchres';
+import { searchDataProps } from './searchres';
+
+export default {
+  component: SearchRes,
+  title: 'channeling/searching/SearchRes',
+} as ComponentMeta<typeof SearchRes>;
+
+const mockdata: searchDataProps = {
+  searchData: [
+    {
+      _id: '1',
+      docType: 'General',
+      docFee: 100,
+      time: '8.30 PM',
+      maximumPatients: 12,
+      date: '2022-08-15',
+      docName: 'Dr. John',
+    },
+  ],
+};
+
+const Template: ComponentStory<typeof SearchRes> = () => (
+  <SearchRes {...mockdata} />
+);
+
+export const Primary = Template.bind({});
+Primary.args = {};
diff --git a/libs/ui/src/lib/components/channeling/searching/searchres.tsx b/libs/ui/src/lib/components/channeling/searching/searchres.tsx
new file mode 100644
index 0000000..bb57312
--- /dev/null
+++ b/libs/ui/src/lib/components/channeling/searching/searchres.tsx
@@ -0,0 +1,77 @@
+import { Center, Group, ScrollArea, Text, Table } from '@mantine/core';
+import { FC } from 'react';
+import { Calendar, Clock, User } from 'tabler-icons-react';
+import { Payment } from '../../common/payment';
+
+interface RowDetailsProps {
+  _id: string;
+  docType: string;
+  docFee: number;
+  time: string;
+  maximumPatients: number;
+  date: string;
+  docName: string;
+}
+
+export interface searchDataProps {
+  searchData: RowDetailsProps[];
+}
+
+export const SearchRes: FC<searchDataProps> = ({ searchData }, doctorfee) => {
+  const rows = searchData.map((item) => (
+    <tr key={item._id}>
+      {/* Appointment Date and time */}
+      <td>
+        <Text size="sm" weight={500}>
+          <Group>
+            <Calendar size={18} /> {item.date.slice(0, 10)}
+          </Group>
+        </Text>
+        <Text size="sm" weight={500} mt={'xs'}>
+          <Group>
+            <Clock size={18} /> {item.time.slice(11, -8)}
+          </Group>
+        </Text>
+      </td>
+
+      <td>
+        {/* Doctor's name */}
+        <Center>
+          <Text size="sm" weight={500}>
+            {item.docName}
+          </Text>
+        </Center>
+        <Center>
+          <User size={18} />
+          <Text size="sm" weight={500}>
+            {item.docType}
+          </Text>
+        </Center>
+      </td>
+
+      <td>
+        {/* View button */}
+        <Center>
+          <Group>
+            <Payment paymentData={doctorfee} />
+          </Group>
+        </Center>
+      </td>
+    </tr>
+  ));
+  return (
+    <ScrollArea>
+      <Table sx={{ minWidth: 500 }} verticalSpacing="lg">
+        <thead>
+          <tr>
+            <th></th>
+            <th></th>
+            <th></th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>{rows}</tbody>
+      </Table>
+    </ScrollArea>
+  );
+};
diff --git a/libs/ui/src/lib/components/common/payment.tsx b/libs/ui/src/lib/components/common/payment.tsx
index ebd16df..b09a1e3 100644
--- a/libs/ui/src/lib/components/common/payment.tsx
+++ b/libs/ui/src/lib/components/common/payment.tsx
@@ -1,5 +1,4 @@
 import { FC, useState } from 'react';
-import { useForm } from '@mantine/form';
 import {
   Text,
   Modal,
@@ -10,7 +9,7 @@ import {
   TextInput,
   Image,
 } from '@mantine/core';
-import { BrandPaypal, Icons } from 'tabler-icons-react';
+import { BrandPaypal } from 'tabler-icons-react';
 
 interface RowDetailsProps {
   amount: number;
@@ -28,7 +27,7 @@ export const Payment: FC<PaymentProps> = ({ paymentData }) => {
       <Modal opened={opened} onClose={() => setOpened(false)}>
         <Center>
           <Group>
-            <BrandPaypal size={30} strokeWidth={2} color={'black'} />;
+            <BrandPaypal size={30} strokeWidth={2} color={'black'} />
             <Text size="xl" weight={500}>
               Checkout
             </Text>
@@ -77,7 +76,7 @@ export const Payment: FC<PaymentProps> = ({ paymentData }) => {
       </Modal>
 
       <Group position="center">
-        <Button onClick={() => setOpened(true)}>Open Modal</Button>
+        <Button onClick={() => setOpened(true)}>Book</Button>
       </Group>
     </div>
   );
diff --git a/libs/ui/src/lib/components/doctor/doctorDetailCard.tsx b/libs/ui/src/lib/components/doctor/doctorDetailCard.tsx
index 3288d12..fa7ea12 100644
--- a/libs/ui/src/lib/components/doctor/doctorDetailCard.tsx
+++ b/libs/ui/src/lib/components/doctor/doctorDetailCard.tsx
@@ -1,14 +1,5 @@
 import { FC } from 'react';
-import {
-  Text,
-  Table,
-  ScrollArea,
-  Avatar,
-  Group,
-  createStyles,
-  Card,
-} from '@mantine/core';
-import { At, ReportMedical } from 'tabler-icons-react';
+import { Text, Table, ScrollArea } from '@mantine/core';
 
 interface RowDetailsProps {
   _id: string;
diff --git a/libs/ui/src/lib/components/doctor/upcomingDetails.stories.tsx b/libs/ui/src/lib/components/doctor/upcomingDetails.stories.tsx
index 2d9b779..3b6d588 100644
--- a/libs/ui/src/lib/components/doctor/upcomingDetails.stories.tsx
+++ b/libs/ui/src/lib/components/doctor/upcomingDetails.stories.tsx
@@ -10,45 +10,13 @@ export default {
 const mockdata: UpcomingDetailsProps = {
   upcomingDetailsdata: [
     {
+      __v: '1',
+      docId: '1',
+      _id: '1',
       time: '8.30 PM',
       date: '2022-08-15',
-      patientsNumber: 12,
-      location: 'Room 06',
-    },
-
-    {
-      time: '10.30 PM',
-      date: '2022-08-16',
-      patientsNumber: 25,
-      location: 'Room 08',
-    },
-
-    {
-      time: '8.30 PM',
-      date: '2022-08-16',
-      patientsNumber: 32,
-      location: 'Room 10',
-    },
-
-    {
-      time: '8.30 PM',
-      date: '2022-08-15',
-      patientsNumber: 12,
-      location: 'Room 06',
-    },
-
-    {
-      time: '8.30 PM',
-      date: '2022-08-15',
-      patientsNumber: 12,
-      location: 'Room 06',
-    },
-
-    {
-      time: '8.30 PM',
-      date: '2022-08-15',
-      patientsNumber: 12,
-      location: 'Room 06',
+      maximumPatients: 12,
+      doctorFee: 1000,
     },
   ],
 };
diff --git a/libs/ui/src/lib/components/doctor/upcomingDetails.tsx b/libs/ui/src/lib/components/doctor/upcomingDetails.tsx
index 01e71b9..ab7876f 100644
--- a/libs/ui/src/lib/components/doctor/upcomingDetails.tsx
+++ b/libs/ui/src/lib/components/doctor/upcomingDetails.tsx
@@ -1,46 +1,51 @@
-import { FC, useState } from 'react';
-import {
-  Text,
-  Table,
-  ScrollArea,
-  Group,
-  Center,
-  Button,
-  Modal,
-  Box,
-} from '@mantine/core';
-import { Clock, Calendar, User, Location } from 'tabler-icons-react';
+import { FC } from 'react';
+import { Text, Table, ScrollArea, Group, Center, Button } from '@mantine/core';
+import { Clock, Calendar, User } from 'tabler-icons-react';
+import { useForm } from '@mantine/hooks';
 interface RowDetailsProps {
-  time: string;
+  __v: string;
+  _id: string;
+  docId: string;
   date: string;
-  patientsNumber: number;
-  location: string;
+  time: string;
+  maximumPatients: number;
+  doctorFee: number;
+}
+
+export interface Formdata {
+  _id: string;
 }
 
 export interface UpcomingDetailsProps {
   upcomingDetailsdata: RowDetailsProps[];
+  onSubmit: (values: Formdata) => void;
 }
 
 export const UpcomingDetails: FC<UpcomingDetailsProps> = ({
   upcomingDetailsdata,
+  onSubmit,
 }) => {
-  const [opened, setOpened] = useState(false);
-  const rows = upcomingDetailsdata.map((item) => (
+  const form = useForm<Formdata>({
+    initialValues: {
+      _id: '',
+    },
+  });
+
+  const newRows = upcomingDetailsdata.map((item) => (
     <tr key={item.time}>
       {/* Appointment Date and time */}
       <td>
         <Text size="sm" weight={500}>
           <Group>
-            <Calendar size={18} /> {item.date}
+            <Calendar size={18} /> {item.date.slice(0, 10)}
           </Group>
         </Text>
         <Text size="sm" weight={500} mt={'xs'}>
           <Group>
-            <Clock size={18} /> {item.time}
+            <Clock size={18} /> {item.time.slice(11, -8)}
           </Group>
         </Text>
       </td>
-
       <td>
         {/* Number of active patients */}
         <Center>
@@ -52,96 +57,29 @@ export const UpcomingDetails: FC<UpcomingDetailsProps> = ({
           <Group>
             <User size={18} />
             <Text size="sm" weight={500}>
-              {item.patientsNumber}
-            </Text>
-          </Group>
-        </Center>
-      </td>
-
-      <td>
-        <Center>
-          <Group>
-            <Location size={18} />
-            <Text size="sm" weight={500}>
-              {item.location}
+              {item.maximumPatients}
             </Text>
           </Group>
         </Center>
       </td>
-      <td>
-        <Center>
-          <Group>
-            <Button
-              variant="outline"
-              color="dark"
-              onClick={() => setOpened(true)}
-            >
-              View
-            </Button>
-          </Group>
-        </Center>
-      </td>
-    </tr>
-  ));
-
-  const newRows = upcomingDetailsdata.map((item) => (
-    <tr key={item.time}>
-      {/* Appointment Date and time */}
-      <td>
-        <Text size="sm" weight={500}>
-          <Group>
-            <Calendar size={18} /> {item.date}
-          </Group>
-        </Text>
-        <Text size="sm" weight={500} mt={'xs'}>
-          <Group>
-            <Clock size={18} /> {item.time}
-          </Group>
-        </Text>
-      </td>
 
       <td>
-        {/* Number of active patients */}
-        <Center>
-          <Text size="xs" weight={500}>
-            Active Patients
-          </Text>
-        </Center>
-        <Center>
-          <Group>
-            <User size={18} />
-            <Text size="sm" weight={500}>
-              {item.patientsNumber}
-            </Text>
-          </Group>
-        </Center>
+        {/* Button */}
+        <form onSubmit={form.onSubmit(onSubmit)}>
+          <Button
+            type="submit"
+            color="red"
+            onClick={() => form.setFieldValue('_id', item._id)}
+          >
+            Delete
+          </Button>
+        </form>
       </td>
     </tr>
   ));
 
   return (
-    <Box>
-      setOpened ?
-      <Modal
-        size={'xl'}
-        opened={opened}
-        onClose={() => setOpened(false)}
-        title="Introduce yourself!"
-      >
-        <ScrollArea>
-          <Table sx={{ minWidth: 500 }} verticalSpacing="lg">
-            <thead>
-              <tr>
-                <th></th>
-                <th></th>
-                <th></th>
-              </tr>
-            </thead>
-            <tbody>{newRows}</tbody>
-          </Table>
-        </ScrollArea>
-      </Modal>
-      :
+    <div>
       <ScrollArea>
         <Table sx={{ minWidth: 500 }} verticalSpacing="lg">
           <thead>
@@ -149,12 +87,11 @@ export const UpcomingDetails: FC<UpcomingDetailsProps> = ({
               <th></th>
               <th></th>
               <th></th>
-              <th></th>
             </tr>
           </thead>
-          <tbody>{rows}</tbody>
+          <tbody>{newRows}</tbody>
         </Table>
       </ScrollArea>
-    </Box>
+    </div>
   );
 };