diff --git a/client/src/components/DayView/Calendar.js b/client/src/components/DayView/Calendar.js
index daf9b5c..5838f43 100644
--- a/client/src/components/DayView/Calendar.js
+++ b/client/src/components/DayView/Calendar.js
@@ -23,6 +23,7 @@ class Calendar extends React.Component {
       readOnly: false,
       title: '',
       description: '',
+      noOfPeople: null,
     },
     hiddenDays: [0],
     minTime: '00:00',
@@ -49,6 +50,7 @@ class Calendar extends React.Component {
         readOnly: false,
         title: '',
         description: '',
+        noOfPeople: null,
       },
     });
     this.showModal();
@@ -95,6 +97,7 @@ class Calendar extends React.Component {
             resourceId: event.room_id,
             userid: event.user_id,
             userName: event.name,
+            noOfPeople: event.noofpeople,
           })),
         });
       })
@@ -120,6 +123,7 @@ class Calendar extends React.Component {
         title: '',
         description: '',
         readOnly: false,
+        noOfPeople: null,
       },
     });
     this.showModal();
@@ -131,7 +135,7 @@ class Calendar extends React.Component {
       start,
       end,
       title,
-      extendedProps: { description, userName, userid },
+      extendedProps: { description, userName, userid, noOfPeople },
     } = event;
     this.setState({
       modalData: {
@@ -144,6 +148,7 @@ class Calendar extends React.Component {
         userName,
         userid,
         readOnly: true,
+        noOfPeople,
       },
     });
     this.showModal();
diff --git a/client/src/components/Form/Reservation/index.js b/client/src/components/Form/Reservation/index.js
index 4d05785..a5ac050 100644
--- a/client/src/components/Form/Reservation/index.js
+++ b/client/src/components/Form/Reservation/index.js
@@ -171,7 +171,15 @@ class BookingForm extends React.Component {
       hiddenDays.includes(Number(current.format('e')));
 
     const { repeat, confirmLoading } = this.state;
-    const { start, end, roomId, title, description, readOnly } = modalData;
+    const {
+      start,
+      end,
+      roomId,
+      title,
+      description,
+      readOnly,
+      noOfPeople,
+    } = modalData;
     const disabled = confirmLoading || readOnly;
     const { admin, userID } = this.context;
     const couldCancel = readOnly && (modalData.userid === userID || admin);
@@ -196,7 +204,7 @@ class BookingForm extends React.Component {
       >
         <Form
           labelCol={{
-            span: 5,
+            span: 8,
           }}
           labelAlign="left"
           initialValues={{
@@ -207,6 +215,7 @@ class BookingForm extends React.Component {
             description,
             repeat: 'once',
             remind: true,
+            noOfPeople,
           }}
           ref={this.formRef}
           onFinish={(values) => {
@@ -248,6 +257,13 @@ class BookingForm extends React.Component {
             <Input disabled={disabled} />
           </Form.Item>
 
+          <Form.Item
+            name="noOfPeople"
+            label="Number of attendees:"
+            rules={[{ required: true, message: 'Add People Number' }]}
+          >
+            <Input disabled={disabled} />
+          </Form.Item>
           <Form.Item name="description" label="Description">
             <Input.TextArea disabled={disabled} />
           </Form.Item>
@@ -353,6 +369,7 @@ BookingForm.propTypes = {
     userName: PropTypes.string,
     userid: PropTypes.number,
     readOnly: PropTypes.bool,
+    noOfPeople: PropTypes.number,
   }).isRequired,
   fetchEvents: PropTypes.func.isRequired,
   minTime: PropTypes.string.isRequired,