diff --git a/client/components/boards/boardBody.css b/client/components/boards/boardBody.css
index 077a22843..cb091b57d 100644
--- a/client/components/boards/boardBody.css
+++ b/client/components/boards/boardBody.css
@@ -168,11 +168,28 @@
   color: #fff !important;
 }
 /* Modal Styles */
+.modal {
+  display: none;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+  background-color: rgba(0, 0, 0, 0.5);
+  width: 100%;
+  height: 100%;
+}
 .modal-dialog {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 70%;
+  height: 25%; /* Adjust the height to make it smaller */
+  position: relative;
+  margin: 10% auto; /* This margin will help center the modal vertically */
+  max-width: 400px; /* Adjust the max-width to make it smaller */
+  background-color: #fff;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }
 .modal-header {
   display: flex;
@@ -203,4 +220,5 @@
   top: 5px;
   right: 5px;
   font-size: 25px;
+  cursor: pointer;
 }
diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js
index 484e9ac22..3bf585fc8 100644
--- a/client/components/boards/boardBody.js
+++ b/client/components/boards/boardBody.js
@@ -417,35 +417,37 @@ BlazeComponent.extendComponent({
           revertFunc();
         }
       },
-      select: function(startDate) {
+      select: function (startDate) {
         const currentBoard = Utils.getCurrentBoard();
         const currentUser = ReactiveCache.getCurrentUser();
-        const $modal = $(`
-          <div class="modal fade" tabindex="-1" role="dialog">
-            <div class="modal-dialog justify-content-center align-items-center" role="document">
-              <div class="modal-content">
-                <div class="modal-header">
-                  <h5 class="modal-title">${TAPi18n.__('r-create-card')}</h5>
-                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-                </div>
-                <div class="modal-body text-center">
-                  <input type="text" class="form-control" id="card-title-input" placeholder="">
-                </div>
-                <div class="modal-footer">
-                  <button type="button" class="btn btn-primary" id="create-card-button">${TAPi18n.__('add-card')}</button>
-                </div>
-              </div>
+        const modalElement = document.createElement('div');
+        modalElement.classList.add('modal', 'fade');
+        modalElement.setAttribute('tabindex', '-1');
+        modalElement.setAttribute('role', 'dialog');
+        modalElement.innerHTML = `
+        <div class="modal-dialog justify-content-center align-items-center" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">${TAPi18n.__('r-create-card')}</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div class="modal-body text-center">
+              <input type="text" class="form-control" id="card-title-input" placeholder="">
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-primary" id="create-card-button">${TAPi18n.__('add-card')}</button>
             </div>
           </div>
-        `);
-        $modal.modal('show');
-        $modal.find('#create-card-button').click(function() {
-          const myTitle = $modal.find('#card-title-input').val();
+        </div>
+        `;
+        const createCardButton = modalElement.querySelector('#create-card-button');
+        createCardButton.addEventListener('click', function () {
+          const myTitle = modalElement.querySelector('#card-title-input').value;
           if (myTitle) {
-            const firstList = currentBoard.draggableLists().fetch()[0];
-            const firstSwimlane = currentBoard.swimlanes().fetch()[0];
+            const firstList = currentBoard.draggableLists()[0];
+            const firstSwimlane = currentBoard.swimlanes()[0];
             Meteor.call('createCardWithDueDate', currentBoard._id, firstList._id, myTitle, startDate.toDate(), firstSwimlane._id, function(error, result) {
               if (error) {
                 console.log(error);
@@ -453,10 +455,20 @@ BlazeComponent.extendComponent({
                 console.log("Card Created", result);
               }
             });
-            $modal.modal('hide');
+            closeModal();
           }
         });
-      },
+        document.body.appendChild(modalElement);
+        const openModal = function() {
+          modalElement.style.display = 'flex';
+        };
+        const closeModal = function() {
+          modalElement.style.display = 'none';
+        };
+        const closeButton = modalElement.querySelector('[data-dismiss="modal"]');
+        closeButton.addEventListener('click', closeModal);
+        openModal();
+      }
     };
   },
   isViewCalendar() {