diff --git a/src/components/EventListCard/EventListCard.module.css b/src/components/EventListCard/EventListCard.module.css
index 5b128d075d..3f6cb9aa27 100644
--- a/src/components/EventListCard/EventListCard.module.css
+++ b/src/components/EventListCard/EventListCard.module.css
@@ -26,9 +26,7 @@
   justify-content: flex-end;
 }
 .icon {
-  transform: scale(1);
-  cursor: pointer;
-  color: #31bb6b;
+  margin: 1px;
 }
 
 .cards {
diff --git a/src/components/EventListCard/EventListCard.test.tsx b/src/components/EventListCard/EventListCard.test.tsx
index ee48e2f871..17edaf5050 100644
--- a/src/components/EventListCard/EventListCard.test.tsx
+++ b/src/components/EventListCard/EventListCard.test.tsx
@@ -149,6 +149,30 @@ describe('Testing Event List Card', () => {
     expect(screen.queryByText(props.eventName)).not.toBeInTheDocument();
   });
 
+  test('Testing for update modal', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <EventListCard {...props} />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    await wait();
+
+    userEvent.click(screen.getByTestId('card'));
+    userEvent.click(screen.getByTestId('editEventModalBtn'));
+
+    userEvent.click(screen.getByTestId('EventUpdateModalCloseBtn'));
+    userEvent.click(screen.getByTestId('createEventModalCloseBtn'));
+
+    await wait();
+  });
+
   test('Testing event update functionality', async () => {
     render(
       <MockedProvider addTypename={false} link={link}>
@@ -159,7 +183,8 @@ describe('Testing Event List Card', () => {
     );
 
     await wait();
-
+    userEvent.click(screen.getByTestId('card'));
+    userEvent.click(screen.getByTestId('editEventModalBtn'));
     userEvent.type(screen.getByTestId('updateTitle'), props.eventName);
     userEvent.type(
       screen.getByTestId('updateDescription'),
@@ -199,7 +224,8 @@ describe('Testing Event List Card', () => {
     );
 
     await wait();
-
+    userEvent.click(screen.getByTestId('card'));
+    userEvent.click(screen.getByTestId('editEventModalBtn'));
     userEvent.type(screen.getByTestId('updateTitle'), props.eventName);
     userEvent.type(
       screen.getByTestId('updateDescription'),
@@ -232,6 +258,11 @@ describe('Testing Event List Card', () => {
           <EventListCard {...props} />
         </MockedProvider>
       );
+      userEvent.click(screen.getByTestId('card'));
+      userEvent.click(screen.getByTestId('deleteEventModalBtn'));
+
+      userEvent.click(screen.getByTestId('EventDeleteModalCloseBtn'));
+      userEvent.click(screen.getByTestId('createEventModalCloseBtn'));
     });
 
     it('should call the delete event mutation when the "Yes" button is clicked', async () => {
@@ -240,7 +271,8 @@ describe('Testing Event List Card', () => {
           <EventListCard {...props} />
         </MockedProvider>
       );
-
+      userEvent.click(screen.getByTestId('card'));
+      userEvent.click(screen.getByTestId('deleteEventModalBtn'));
       const deleteBtn = screen.getByTestId('deleteEventBtn');
       fireEvent.click(deleteBtn);
     });
@@ -263,7 +295,8 @@ describe('Testing Event List Card', () => {
           <EventListCard {...props} />
         </MockedProvider>
       );
-
+      userEvent.click(screen.getByTestId('card'));
+      userEvent.click(screen.getByTestId('deleteEventModalBtn'));
       const deleteBtn = screen.getByTestId('deleteEventBtn');
       fireEvent.click(deleteBtn);
     });
diff --git a/src/components/EventListCard/EventListCard.tsx b/src/components/EventListCard/EventListCard.tsx
index 7f817890de..8053dfa828 100644
--- a/src/components/EventListCard/EventListCard.tsx
+++ b/src/components/EventListCard/EventListCard.tsx
@@ -38,6 +38,8 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {
   const [recurringchecked, setRecurringChecked] = useState(false);
   const [publicchecked, setPublicChecked] = useState(true);
   const [registrablechecked, setRegistrableChecked] = React.useState(false);
+  const [eventDeleteisOpen, setEventDeleteModalIsOpen] = useState(false);
+  const [eventUpdateisOpen, setEventUpdateModalIsOpen] = useState(false);
   const history = useHistory();
   const [formState, setFormState] = useState({
     title: '',
@@ -53,6 +55,20 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {
     setEventModalIsOpen(false);
   };
 
+  const showDeleteModal = (): void => {
+    setEventDeleteModalIsOpen(true);
+  };
+  const hideDeleteModal = (): void => {
+    setEventDeleteModalIsOpen(false);
+  };
+
+  const showUpdateModel = (): void => {
+    setEventUpdateModalIsOpen(true);
+  };
+  const hideUpdateModal = (): void => {
+    setEventUpdateModalIsOpen(false);
+  };
+
   useEffect(() => {
     setFormState({
       title: props.eventName,
@@ -196,247 +212,225 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {
               </Button>
             </div>
             <div className={styles.iconContainer}>
-              <a
+              <Button
+                size="sm"
                 data-testid="editEventModalBtn"
-                className={`${styles.icon} mr-2`}
-                data-toggle="modal"
-                data-target={`#editEventModal${props.id}`}
+                className={styles.icon}
+                onClick={showUpdateModel}
               >
+                {' '}
                 <i className="fas fa-edit"></i>
-              </a>
-              <a
+              </Button>
+              <Button
+                size="sm"
                 data-testid="deleteEventModalBtn"
                 className={styles.icon}
-                data-toggle="modal"
-                data-target={`#deleteEventModal${props.id}`}
+                onClick={showDeleteModal}
               >
+                {' '}
                 <i className="fa fa-trash"></i>
-              </a>
+              </Button>
             </div>
           </Form>
         </Modal.Body>
       </Modal>
 
       {/* delete modal */}
-      <div
-        className="modal fade"
+      <Modal
+        size="sm"
         id={`deleteEventModal${props.id}`}
-        tabIndex={-1}
-        role="dialog"
-        aria-labelledby={`deleteEventModalLabel${props.id}`}
-        aria-hidden="true"
+        show={eventDeleteisOpen}
+        onHide={hideDeleteModal}
+        backdrop="static"
+        keyboard={false}
       >
-        <div className="modal-dialog" role="document">
-          <div className="modal-content">
-            <div className="modal-header">
-              <h5
-                className="modal-title"
-                id={`deleteEventModalLabel${props.id}`}
-              >
-                {t('deleteEvent')}
-              </h5>
-              <Button
-                type="button"
-                className="close"
-                data-dismiss="modal"
-                aria-label="Close"
-              >
-                <span aria-hidden="true">&times;</span>
-              </Button>
-            </div>
-            <div className="modal-body">{t('deleteEventMsg')}</div>
-            <div className="modal-footer">
-              <Button
-                type="button"
-                className="btn btn-danger"
-                data-dismiss="modal"
-              >
-                {t('no')}
-              </Button>
-              <Button
-                type="button"
-                className="btn btn-success"
-                onClick={deleteEvent}
-                data-testid="deleteEventBtn"
-              >
-                {t('yes')}
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
+        <Modal.Header closeButton>
+          <Modal.Title id={`deleteEventModalLabel${props.id}`}>
+            {t('deleteEvent')}
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>{t('deleteEventMsg')}</Modal.Body>
+        <Modal.Footer>
+          <Button
+            type="button"
+            className="btn btn-danger"
+            data-dismiss="modal"
+            onClick={hideDeleteModal}
+            data-testid="EventDeleteModalCloseBtn"
+          >
+            {t('no')}
+          </Button>
+          <Button
+            type="button"
+            className="btn btn-success"
+            onClick={deleteEvent}
+            data-testid="deleteEventBtn"
+          >
+            {t('yes')}
+          </Button>
+        </Modal.Footer>
+      </Modal>
 
       {/* Edit Modal */}
-      <div
-        className="modal fade"
+      <Modal
         id={`editEventModal${props.id}`}
-        tabIndex={-1}
-        aria-labelledby={`editEventModal${props.id}Label`}
-        aria-hidden="true"
+        show={eventUpdateisOpen}
+        onHide={hideUpdateModal}
+        backdrop="static"
+        keyboard={false}
       >
-        <div className="modal-dialog">
-          <div className="modal-content">
-            <div className="modal-header">
-              <h5 className="modal-title" id={`editEventModal${props.id}Label`}>
-                {t('editEvent')}
-              </h5>
-              <Button
-                type="button"
-                className="close"
-                data-dismiss="modal"
-                aria-label="Close"
-              >
-                <span aria-hidden="true">&times;</span>
-              </Button>
-            </div>
-            <form onSubmit={updateEventHandler}>
-              <div className="modal-body">
-                <label htmlFor="eventtitle">{t('eventTitle')}</label>
-                <Form.Control
-                  type="title"
-                  id="eventitle"
-                  autoComplete="off"
-                  data-testid="updateTitle"
-                  required
-                  value={formState.title}
-                  onChange={(e): void => {
-                    setFormState({
-                      ...formState,
-                      title: e.target.value,
-                    });
-                  }}
+        <Modal.Header closeButton>
+          <Modal.Title id={`editEventModal${props.id}Label`}>
+            {' '}
+            {t('editEvent')}
+          </Modal.Title>
+        </Modal.Header>
+        <form onSubmit={updateEventHandler}>
+          <Modal.Body>
+            <label htmlFor="eventtitle">{t('eventTitle')}</label>
+            <Form.Control
+              type="title"
+              id="eventitle"
+              autoComplete="off"
+              data-testid="updateTitle"
+              required
+              value={formState.title}
+              onChange={(e): void => {
+                setFormState({
+                  ...formState,
+                  title: e.target.value,
+                });
+              }}
+            />
+            <label htmlFor="eventdescrip">{t('description')}</label>
+            <Form.Control
+              type="eventdescrip"
+              id="eventdescrip"
+              autoComplete="off"
+              data-testid="updateDescription"
+              required
+              value={formState.eventdescrip}
+              onChange={(e): void => {
+                setFormState({
+                  ...formState,
+                  eventdescrip: e.target.value,
+                });
+              }}
+            />
+            <label htmlFor="eventLocation">{t('location')}</label>
+            <Form.Control
+              type="text"
+              id="eventLocation"
+              autoComplete="off"
+              data-testid="updateLocation"
+              required
+              value={formState.location}
+              onChange={(e): void => {
+                setFormState({
+                  ...formState,
+                  location: e.target.value,
+                });
+              }}
+            />
+            {!alldaychecked && (
+              <div className={styles.datediv}>
+                <div className="mr-3">
+                  <label htmlFor="startTime">{t('startTime')}</label>
+                  <Form.Control
+                    id="startTime"
+                    value={formState.startTime}
+                    data-testid="updateStartTime"
+                    onChange={(e): void =>
+                      setFormState({
+                        ...formState,
+                        startTime: e.target.value,
+                      })
+                    }
+                  />
+                </div>
+                <div>
+                  <label htmlFor="endTime">{t('endTime')}</label>
+                  <Form.Control
+                    id="endTime"
+                    value={formState.endTime}
+                    data-testid="updateEndTime"
+                    onChange={(e): void =>
+                      setFormState({
+                        ...formState,
+                        endTime: e.target.value,
+                      })
+                    }
+                  />
+                </div>
+              </div>
+            )}
+            <div className={styles.checkboxdiv}>
+              <div className={styles.dispflex}>
+                <label htmlFor="allday">{t('allDay')}?</label>
+                <Form.Switch
+                  id="allday"
+                  type="checkbox"
+                  data-testid="updateAllDay"
+                  checked={alldaychecked}
+                  onChange={(): void => setAllDayChecked(!alldaychecked)}
                 />
-                <label htmlFor="eventdescrip">{t('description')}</label>
-                <Form.Control
-                  type="eventdescrip"
-                  id="eventdescrip"
-                  autoComplete="off"
-                  data-testid="updateDescription"
-                  required
-                  value={formState.eventdescrip}
-                  onChange={(e): void => {
-                    setFormState({
-                      ...formState,
-                      eventdescrip: e.target.value,
-                    });
-                  }}
+              </div>
+              <div className={styles.dispflex}>
+                <label htmlFor="recurring">{t('recurringEvent')}:</label>
+                <Form.Switch
+                  id="recurring"
+                  type="checkbox"
+                  data-testid="updateRecurring"
+                  checked={recurringchecked}
+                  onChange={(): void => setRecurringChecked(!recurringchecked)}
                 />
-                <label htmlFor="eventLocation">{t('location')}</label>
-                <Form.Control
-                  type="text"
-                  id="eventLocation"
-                  autoComplete="off"
-                  data-testid="updateLocation"
-                  required
-                  value={formState.location}
-                  onChange={(e): void => {
-                    setFormState({
-                      ...formState,
-                      location: e.target.value,
-                    });
-                  }}
+              </div>
+            </div>
+            <div className={styles.checkboxdiv}>
+              <div className={styles.dispflex}>
+                <label htmlFor="ispublic">{t('isPublic')}?</label>
+                <Form.Switch
+                  id="ispublic"
+                  type="checkbox"
+                  data-testid="updateIsPublic"
+                  checked={publicchecked}
+                  onChange={(): void => setPublicChecked(!publicchecked)}
                 />
-                {!alldaychecked && (
-                  <div className={styles.datediv}>
-                    <div className="mr-3">
-                      <label htmlFor="startTime">{t('startTime')}</label>
-                      <Form.Control
-                        id="startTime"
-                        value={formState.startTime}
-                        data-testid="updateStartTime"
-                        onChange={(e): void =>
-                          setFormState({
-                            ...formState,
-                            startTime: e.target.value,
-                          })
-                        }
-                      />
-                    </div>
-                    <div>
-                      <label htmlFor="endTime">{t('endTime')}</label>
-                      <Form.Control
-                        id="endTime"
-                        value={formState.endTime}
-                        data-testid="updateEndTime"
-                        onChange={(e): void =>
-                          setFormState({
-                            ...formState,
-                            endTime: e.target.value,
-                          })
-                        }
-                      />
-                    </div>
-                  </div>
-                )}
-                <div className={styles.checkboxdiv}>
-                  <div className={styles.dispflex}>
-                    <label htmlFor="allday">{t('allDay')}?</label>
-                    <Form.Control
-                      id="allday"
-                      type="checkbox"
-                      data-testid="updateAllDay"
-                      checked={alldaychecked}
-                      onChange={(): void => setAllDayChecked(!alldaychecked)}
-                    />
-                  </div>
-                  <div className={styles.dispflex}>
-                    <label htmlFor="recurring">{t('recurringEvent')}:</label>
-                    <Form.Control
-                      id="recurring"
-                      type="checkbox"
-                      data-testid="updateRecurring"
-                      checked={recurringchecked}
-                      onChange={(): void =>
-                        setRecurringChecked(!recurringchecked)
-                      }
-                    />
-                  </div>
-                </div>
-                <div className={styles.checkboxdiv}>
-                  <div className={styles.dispflex}>
-                    <label htmlFor="ispublic">{t('isPublic')}?</label>
-                    <Form.Control
-                      id="ispublic"
-                      type="checkbox"
-                      data-testid="updateIsPublic"
-                      checked={publicchecked}
-                      onChange={(): void => setPublicChecked(!publicchecked)}
-                    />
-                  </div>
-                  <div className={styles.dispflex}>
-                    <label htmlFor="registrable">{t('isRegistrable')}?</label>
-                    <Form.Control
-                      id="registrable"
-                      type="checkbox"
-                      data-testid="updateRegistrable"
-                      checked={registrablechecked}
-                      onChange={(): void =>
-                        setRegistrableChecked(!registrablechecked)
-                      }
-                    />
-                  </div>
-                </div>
               </div>
-              <div className="modal-footer">
-                <Button
-                  type="button"
-                  className="btn btn-danger"
-                  data-dismiss="modal"
-                >
-                  {t('close')}
-                </Button>
-                <Button
-                  type="submit"
-                  className="btn btn-success"
-                  data-testid="updatePostBtn"
-                >
-                  {t('updatePost')}
-                </Button>
+              <div className={styles.dispflex}>
+                <label htmlFor="registrable">{t('isRegistrable')}?</label>
+                <Form.Switch
+                  id="registrable"
+                  type="checkbox"
+                  data-testid="updateRegistrable"
+                  checked={registrablechecked}
+                  onChange={(): void =>
+                    setRegistrableChecked(!registrablechecked)
+                  }
+                />
               </div>
-            </form>
-          </div>
-        </div>
-      </div>
+            </div>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button
+              type="button"
+              className="btn btn-danger"
+              data-dismiss="modal"
+              data-testid="EventUpdateModalCloseBtn"
+              onClick={hideUpdateModal}
+            >
+              {t('close')}
+            </Button>
+            <Button
+              type="submit"
+              className="btn btn-success"
+              data-testid="updatePostBtn"
+            >
+              {t('updatePost')}
+            </Button>
+          </Modal.Footer>
+        </form>
+      </Modal>
     </>
   );
 }