diff --git a/js/modals.mjs b/js/modals.mjs
new file mode 100644
index 00000000..e24c7d47
--- /dev/null
+++ b/js/modals.mjs
@@ -0,0 +1,12 @@
+
+function toggleModal() {
+    let modal = document.querySelector("#volunteer-modal");
+    modal.classList.toggle("hidden");
+}
+
+//Opens the modal
+document.querySelector(".volunteer-form-btn").addEventListener("click", toggleModal);
+
+//Hides the modal
+document.querySelector("#close-icon").addEventListener("click", toggleModal);
+
diff --git a/pages/support-page.html b/pages/support-page.html
index d933bfbb..fc26484d 100644
--- a/pages/support-page.html
+++ b/pages/support-page.html
@@ -22,6 +22,7 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     />
+    <script  type="module" src="/js/modals.mjs"></script>
   </head>
   <body>
     <header class="flex h-24 items-center justify-between px-10 mt-6">
@@ -276,14 +277,14 @@ <h2 class="font-semibold text-2xl m-0">
         </div>
         <!-- Volunteer modal -->
         <div
-          class="volunteer-modal flex justify-center items-center w-full h-full bg-[rgba(0,0,0,0.7)] absolute top-0 right-0 hidden"
+          class="volunteer-modal flex justify-center items-center w-full h-full bg-[rgba(0,0,0,0.7)] absolute top-0 right-0 hidden" id="volunteer-modal"
         >
           <!-- Not displayed(hidden) initially until volunteer-form-btn is clicked -->
           <div
             class="modal-content w-[1346px] h-[864px] bg-white flex flex-col items-center relative"
           >
             <i
-              class="fa-solid fa-x text-dark-green text-3xl ml-auto pt-8 pr-8 cursor-pointer absolute top-4 right-4"
+              class="fa-solid fa-x text-dark-green text-3xl ml-auto pt-8 pr-8 cursor-pointer absolute top-4 right-4" id="close-icon"
             ></i>
             <!-- Add JS - close modal when clicking icon -->
             <div
