diff --git a/src/component/calendar/Calendar.jsx b/src/component/calendar/Calendar.jsx
index 70d9e0c..034c38e 100644
--- a/src/component/calendar/Calendar.jsx
+++ b/src/component/calendar/Calendar.jsx
@@ -20,8 +20,8 @@ export default function Calendar(){
                             <div className="row">
                                 <div className="col-xl-3">
                                     <div id="external-events">
-                                        <button className="btn btn-primary btn-block" data-toggle="modal"
-                                                data-target="#eventModal">Add New Event
+                                        <button className="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#eventModal">
+                                            Add New Event
                                         </button>
                                         <p className="mt-3">
                                             Drag and drop your event or click in the calendar.
@@ -60,6 +60,42 @@ export default function Calendar(){
                     </div>
                 </div>
             </div>
+
+            {/* Event Modal */}
+            <div className="modal fade" id="eventModal" tabIndex="-1" role="dialog">
+                <div className="modal-dialog modal-dialog-centered" role="document">
+                    <div className="modal-content">
+                        <div className="modal-header">
+                            <h5 className="modal-title" id="verticalCenterTitle">Add New Event</h5>
+                            <button type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
+                                <span aria-hidden="true">&times;</span>
+                            </button>
+                        </div>
+                        <div className="modal-body">
+                            <form>
+                                <div className="form-group">
+                                    <label>Event Name</label>
+                                    <input type="email" className="form-control" id="eventname" />
+                                </div>
+                                <div className="form-group">
+                                    <label>Choose Event Color</label>
+                                    <select className="form-control">
+                                        <option>Primary</option>
+                                        <option>Warning</option>
+                                        <option>Success</option>
+                                        <option>Danger</option>
+                                    </select>
+                                </div>
+
+                            </form>
+                        </div>
+                        <div className="modal-footer">
+                            <button type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
+                            <button type="button" className="btn btn-success">Save changes</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </>
     )
 }
\ No newline at end of file