diff --git a/atst/forms/new_request.py b/atst/forms/new_request.py
index bc05f412..73f005f5 100644
--- a/atst/forms/new_request.py
+++ b/atst/forms/new_request.py
@@ -113,7 +113,7 @@ class DetailsOfUseForm(CacheableForm):
     # Details of Use: Financial Usage
     estimated_monthly_spend = IntegerField(
         "Estimated Monthly Spend",
-        description='Use the <a href="#" target="_blank" class="icon-link">JEDI CSP Calculator</a> to estimate your <b>monthly</b> cloud resource usage and enter the dollar amount below. Note these estimates are for initial approval only. After the request is approved, you will be asked to provide a valid Task Order number with specific CLIN amounts for cloud services.',
+        description='Use the <a href="/jedi-csp-calculator" target="_blank" class="icon-link">JEDI CSP Calculator</a> to estimate your <b>monthly</b> cloud resource usage and enter the dollar amount below. Note these estimates are for initial approval only. After the request is approved, you will be asked to provide a valid Task Order number with specific CLIN amounts for cloud services.',
     )
 
     dollar_value = IntegerField(
diff --git a/atst/routes/__init__.py b/atst/routes/__init__.py
index 93f04601..339cd219 100644
--- a/atst/routes/__init__.py
+++ b/atst/routes/__init__.py
@@ -143,3 +143,13 @@ def activity_history():
 @bp.route("/about")
 def about():
     return render_template("about.html")
+
+
+@bp.route("/csp-environment-access")
+def csp_environment_access():
+    return render_template("mock_csp.html", text="console for this environment")
+
+
+@bp.route("/jedi-csp-calculator")
+def jedi_csp_calculator():
+    return render_template("mock_csp.html", text="service and price calculator")
diff --git a/static/img/cloud-background-2.gif b/static/img/cloud-background-2.gif
new file mode 100644
index 00000000..9635cef2
Binary files /dev/null and b/static/img/cloud-background-2.gif differ
diff --git a/static/img/cloud-background-3.jpg b/static/img/cloud-background-3.jpg
new file mode 100644
index 00000000..a1567faa
Binary files /dev/null and b/static/img/cloud-background-3.jpg differ
diff --git a/static/img/cloud_background.jpg b/static/img/cloud_background.jpg
new file mode 100644
index 00000000..07c57b07
Binary files /dev/null and b/static/img/cloud_background.jpg differ
diff --git a/templates/mock_csp.html b/templates/mock_csp.html
new file mode 100644
index 00000000..66128752
--- /dev/null
+++ b/templates/mock_csp.html
@@ -0,0 +1,66 @@
+<label for="toggle">
+  <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 16 16" width="100" height="100">
+    <path fill="white" id="cloud_icon" d="M11.5 15H5c-2.757 0-5-2.243-5-5 0-2.204 1.446-4.126 3.511-4.769C4.395 3.277 6.335 2 8.5 2c2.773 0 5.058 2.034 5.434 4.727C15.205 7.548 16 8.972 16 10.5c0 2.481-2.019 4.5-4.5 4.5zm-3-11c-1.493 0-2.819.962-3.3 2.394-.115.342-.407.596-.762.664C3.025 7.326 2 8.563 2 10c0 1.654 1.346 3 3 3h6.5c1.379 0 2.5-1.121 2.5-2.5 0-.972-.553-1.835-1.441-2.254-.339-.16-.561-.495-.573-.869C11.918 5.483 10.387 4 8.5 4z"/>
+  </svg>
+</label>
+<input type="checkbox" id="toggle" />
+
+<div class="main">
+  <p align="center" >Once the Cloud Service Provider is selected, this link will take you to the CSP's {{ text }}!</p>
+</div>
+
+<style>
+  html, body {
+    height: 100%;
+  }
+
+  .main p {
+    font-family: "Source Sans Pro", sans-serif;
+    margin: 1.6rem 0;
+    font-size: 1.8rem;
+    font-weight: 700;
+    color: black;
+    position: fixed;
+    top: 9em;
+    width: 70%;
+    left: 15%;
+  }
+
+  /* Toggle Switch */
+  label {
+    display: block;
+    height: 100px;
+    width: 100px;
+    margin: 20px 0;
+    position: fixed;
+    left: 50%;
+    margin-left: -50px;
+    top: 8em;
+  }
+
+  input#toggle {
+     position: absolute;
+     top: -9999px;
+     left: -9999px;
+  }
+
+  /* Wrapper */
+  .main {
+    padding: 20px;
+    width: 100%;
+    height: 100%;
+    background: url(static/img/cloud_background.jpg);
+    background-size: cover;
+  }
+
+  /* Toggle Background Image */
+  input#toggle:checked + .main {
+    background: url(static/img/cloud-background-2.gif);
+    /* background: url(static/img/cloud-background-3.jpg); */
+    background-size: cover;
+  }
+
+  input#toggle:checked + .main p {
+    color: white;
+  }
+</style>
diff --git a/templates/workspaces/projects/index.html b/templates/workspaces/projects/index.html
index 3c073ade..fc907b90 100644
--- a/templates/workspaces/projects/index.html
+++ b/templates/workspaces/projects/index.html
@@ -35,7 +35,7 @@
       <ul>
         {% for environment in project.environments %}
           <li class='block-list__item project-list-item__environment'>
-            <a href='/' target='_blank' rel='noopener noreferrer' class='project-list-item__environment__link'>
+            <a href='{{ url_for("atst.csp_environment_access")}}' target='_blank' rel='noopener noreferrer' class='project-list-item__environment__link'>
               {{ Icon('link') }}
               <span>{{ environment.name }}</span>
             </a>