diff --git a/innovate/static/innovate/img/step1.png b/innovate/static/innovate/img/step1.png
new file mode 100644
index 0000000..ecd23de
Binary files /dev/null and b/innovate/static/innovate/img/step1.png differ
diff --git a/innovate/static/innovate/img/step1.png:Zone.Identifier b/innovate/static/innovate/img/step1.png:Zone.Identifier
new file mode 100644
index 0000000..e69de29
diff --git a/innovate/static/innovate/img/step2.png b/innovate/static/innovate/img/step2.png
new file mode 100644
index 0000000..075527f
Binary files /dev/null and b/innovate/static/innovate/img/step2.png differ
diff --git a/innovate/static/innovate/img/step2.png:Zone.Identifier b/innovate/static/innovate/img/step2.png:Zone.Identifier
new file mode 100644
index 0000000..e69de29
diff --git a/innovate/static/innovate/img/step3.png b/innovate/static/innovate/img/step3.png
new file mode 100644
index 0000000..d62f013
Binary files /dev/null and b/innovate/static/innovate/img/step3.png differ
diff --git a/innovate/static/innovate/img/step3.png:Zone.Identifier b/innovate/static/innovate/img/step3.png:Zone.Identifier
new file mode 100644
index 0000000..e69de29
diff --git a/innovate/static/innovate/img/step4.png b/innovate/static/innovate/img/step4.png
new file mode 100644
index 0000000..39ebfb1
Binary files /dev/null and b/innovate/static/innovate/img/step4.png differ
diff --git a/innovate/static/innovate/img/step4.png:Zone.Identifier b/innovate/static/innovate/img/step4.png:Zone.Identifier
new file mode 100644
index 0000000..e69de29
diff --git a/innovate/static/innovate/signup.css b/innovate/static/innovate/signup.css
index d2a41c9..a1168c4 100644
--- a/innovate/static/innovate/signup.css
+++ b/innovate/static/innovate/signup.css
@@ -53,4 +53,45 @@ button {
 
 #payment-instructions:hover {
   text-decoration: underline;
+}
+
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+}
+
+.modal-content {
+  background-color: #fefefe;
+  margin: 15% auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+  color: black;
+}
+
+.modal-content img {
+  width: 50%;
+}
+
+
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
 }
\ No newline at end of file
diff --git a/innovate/static/innovate/signup.js b/innovate/static/innovate/signup.js
new file mode 100644
index 0000000..04d4bc8
--- /dev/null
+++ b/innovate/static/innovate/signup.js
@@ -0,0 +1,17 @@
+var modal = document.getElementById("payment-modal")
+var openBtn = document.getElementById("payment-modal-open")
+var closeBtn = document.getElementById("payment-modal-close")
+
+openBtn.onclick = () => {
+  modal.style.display = "block"
+}
+
+closeBtn.onclick = () => {
+  modal.style.display = "none"
+}
+
+window.onclick = (e) => {
+  if (e.target == modal) {
+    modal.style.display = "none"
+  }
+}
\ No newline at end of file
diff --git a/innovate/templates/innovate/signup.html b/innovate/templates/innovate/signup.html
index cbaab8c..71a2134 100644
--- a/innovate/templates/innovate/signup.html
+++ b/innovate/templates/innovate/signup.html
@@ -4,20 +4,35 @@
 {% block styles %}
     <link rel="stylesheet" href="{% static 'innovate/signup.css' %}">
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-    <script src="{% static 'innovate/formsets.js' %}"></script>
-    <script type="text/javascript">
-        $(function() {
-            $('form .competitor-container').formset({
-                extraClasses: ['row1', 'row2', 'row3', 'row4']
-            })
-        })
-    </script>
 {% endblock %}
 
 
 {% load crispy_forms_tags %}
 {% block content %}
-
+    <div id="payment-modal" class="modal">
+        <div class="modal-content">
+            <span class="close" id="payment-modal-close">&times;</span>
+            <h1>How to pay</h1>
+            <h3>Step 0:</h3>
+            <a href="https://www.myschoolbucks.com/ver2/stores/catalog/getproduct?productKey=ZZVR1J3QQUX02D5&OPTZZVR1J3QQUX02D5=ZZVR1J3R37E0D5S">Click here to open the payment link</a>
+            <br>
+            <h3>Step 1:</h3>
+            <p>Determine donation amount. Recommended $20 per team. Enter “Amount to Pay” and “School Name (For Non TJ Students)” fields. Then click the blue “Purchase” button. Do not click other forms (you are already filling out those forms on this registration form).</p>
+            <img src="{% static 'innovate/img/step1.png' %}">
+            <br>
+            <h3>Step 2:</h3>
+            <p>If you have a MySchoolBucks account, log in. Otherwise, click the green “Continue as Guest” button.</p>
+            <img src="{% static 'innovate/img/step2.png' %}">
+            <br>
+            <h3>Step 3:</h3>
+            <p>Enter all fields. Double check the information is correct. Click the blue “Continue” button.</p>
+            <img src="{% static 'innovate/img/step3.png' %}">
+            <br>
+            <h3>Step 4:</h3>
+            <p>Confirm all fields are correct. Then click the blue “Place Order” button. Screenshot or take a picture of your payment confirmation page and upload to this form. Thank you for donating to InnovateTJ!</p>
+            <img src="{% static 'innovate/img/step4.png' %}">
+        </div>
+    </div>
     <form class="form col-sm-6 offset-sm-3" method="POST" action="" enctype="multipart/form-data">
         {% csrf_token %}
         {{ formset.management_form|crispy }}
@@ -70,11 +85,25 @@
         <fieldset class="container col reciept">
             <legend class="team-header row">
                 Team Payment (Optional)
-                <a id="payment-instructions" href="#">How do I pay?</a>
+                <button class="btn btn-light" type="button" id="payment-modal-open">How do I pay?</button>
             </legend>
             <div class="form-floating row">
                 {{ team_form.reciept }}
             </div>
         </fieldset>
         <button class="mt-3 btn btn-light" type="submit">Sign Up!</button>
+{% endblock %}
+
+{% block scripts %}
+
+<script src="{% static 'innovate/formsets.js' %}"></script>
+<script src="{% static 'innovate/signup.js' %}"></script>
+<script type="text/javascript">
+    $(function() {
+        $('form .competitor-container').formset({
+            extraClasses: ['row1', 'row2', 'row3', 'row4']
+        })
+    })
+</script>
+
 {% endblock %}
\ No newline at end of file
diff --git a/launchx/templates/launchx/base.html b/launchx/templates/launchx/base.html
index 8d821d9..a90b2c5 100644
--- a/launchx/templates/launchx/base.html
+++ b/launchx/templates/launchx/base.html
@@ -45,7 +45,7 @@
         </div>
       </nav>
     </header>
-    {% block scripts %}{% endblock %}
+    
     <main role="main" class="container">
       {% block content %}{% endblock %}
     </main>
@@ -53,6 +53,7 @@
 
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>    
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
+    {% block scripts %}{% endblock %}  
   </body>
 </html>