diff --git a/js/mixins/modal.js b/js/mixins/modal.js
index 7da9caaa..4f6af652 100644
--- a/js/mixins/modal.js
+++ b/js/mixins/modal.js
@@ -11,6 +11,7 @@ export default {
     return {
       modals: {
         styleguideModal: false,
+        rolesModal: false,
         newProjectConfirmation: false,
         pendingFinancialVerification: false,
         pendingCCPOApproval: false,
diff --git a/styles/components/_modal.scss b/styles/components/_modal.scss
index 98851565..8893338b 100644
--- a/styles/components/_modal.scss
+++ b/styles/components/_modal.scss
@@ -1,3 +1,5 @@
+$fixed-footer-height: 5rem + ($gap * 4);
+
 .modal {
   position: fixed;
   z-index: 3;
@@ -7,13 +9,20 @@
   bottom: 0;
   background-color: $color-overlay;
 
+  .modal__container {
+    height: 100vh;
+  }
+
   .modal__dialog {
     padding: $gap;
-    height: 100vh;
+    margin: 0 auto;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
+    max-width: 80rem;
+    max-height: 100%;
+    position: relative;
 
     @include media($medium-screen) {
       padding: $gap * 2;
@@ -26,14 +35,11 @@
     .modal__body {
       background-color: $color-white;
       padding: $gap * 2;
-      flex-grow: 1;
+      width: 100%;
       overflow-y: auto;
-      max-width: 80rem;
-      position: relative;
 
       @include media($medium-screen) {
         padding: $gap * 4;
-        flex-grow: 0;
       }
 
       h1, h2 {
@@ -50,6 +56,56 @@
         right: 0;
         width: 8rem;
       }
+
+      .block-list {
+        margin: -$gap * 2;
+        padding-bottom: $fixed-footer-height;
+
+        @include media($medium-screen) {
+          margin: -$gap * 4;
+        }
+
+        .block-list__header {
+          border-top: 0;
+        }
+
+        .block-list__item {
+          &:last-child {
+            border: 0;
+          }
+        }
+
+        .block-list__footer {
+          height: $fixed-footer-height;
+          margin: 0;
+          padding: 0 ($gap * 2);
+          display: flex;
+          justify-content: space-between;
+          position: absolute;
+          bottom: $gap;
+          left: $gap;
+          right: $gap;
+          background: $color-white;
+          border-top: 1px solid $color-gray-light;
+
+          @include media($medium-screen) {
+            bottom: $gap * 2;
+            left: $gap * 2;
+            right: $gap * 2;
+          }
+
+          @include media($large-screen) {
+            bottom: $gap * 4;
+            left: $gap * 4;
+            right: $gap * 4;
+          }
+
+          .action-group {
+            margin: 0;
+          }
+        }
+      }
+
     }
   }
 
diff --git a/styles/elements/_block_lists.scss b/styles/elements/_block_lists.scss
index ac6936c0..1da1c14d 100644
--- a/styles/elements/_block_lists.scss
+++ b/styles/elements/_block_lists.scss
@@ -1,7 +1,7 @@
 @mixin block-list {
   @include panel-margin;
 
-  > ul {
+  ul, dl {
     list-style: none;
     margin: 0;
     padding: 0;
@@ -95,6 +95,30 @@
 
 .block-list__item {
   @include block-list-item;
+
+  &.block-list__item--selectable {
+    > label {
+      margin: 0;
+      max-width: none;
+      display: flex;
+      flex-direction: row-reverse;
+      align-items: center;
+      justify-content: space-between;
+      &::before {
+        flex-shrink: 0;
+      }
+
+      &:hover {
+        color: $color-primary;
+      }
+    }
+
+    input:checked {
+      + label {
+        color: $color-primary;
+      }
+    }
+  }
 }
 
 .block-list__footer {
diff --git a/styles/elements/_typography.scss b/styles/elements/_typography.scss
index ca8a3f38..a51d839f 100644
--- a/styles/elements/_typography.scss
+++ b/styles/elements/_typography.scss
@@ -18,11 +18,15 @@ h1, h2, h3, h4, h5, h6 {
   font-family: $font-sans;
   margin: ($gap * 2) 0;
 
-  + .subtitle * {
-    margin-top: 0;
+  .subtitle,
+  + .subtitle {
     color: $color-gray;
   }
 
+  + .subtitle, * {
+    margin-top: 0;
+  }
+
 }
 
 .h1 { @include h1; }
diff --git a/templates/components/modal.html b/templates/components/modal.html
index 43c1297a..970b444d 100644
--- a/templates/components/modal.html
+++ b/templates/components/modal.html
@@ -1,20 +1,22 @@
 {% from "components/icon.html" import Icon %}
 
 {% macro Modal(name, dismissable=False) -%}
-<div v-if='modals.{{name}} === true' v-cloak>
+  <template v-if='modals.{{name}} === true' v-cloak>
     <div class='modal {% if dismissable %}modal--dismissable{% endif%}'>
-      <div class='modal__dialog' role='dialog' aria-modal='true'>
-        <div class='modal__body'>
-            {{ caller() }}
+      <div class='modal__container'>
+        <div class='modal__dialog' role='dialog' aria-modal='true'>
+          <div class='modal__body'>
+              {{ caller() }}
 
-            {% if dismissable %}
-              <button type='button' class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
-                {{ Icon('x') }}
-                <span>Close</span>
-              </button>
-            {% endif %}
+              {% if dismissable %}
+                <button type='button' class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
+                  {{ Icon('x') }}
+                  <span>Close</span>
+                </button>
+              {% endif %}
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </template>
 {%- endmacro %}
diff --git a/templates/member_edit.html b/templates/member_edit.html
index 9b9affd1..db52347b 100644
--- a/templates/member_edit.html
+++ b/templates/member_edit.html
@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 
 {% from "components/icon.html" import Icon %}
+{% from "components/modal.html" import Modal %}
 
 {% block content %}
 
@@ -52,6 +53,85 @@
   </div>
 </form>
 
+{% call Modal(name='rolesModal', dismissable=False) %}
+  <div class="block-list">
+    <header class="block-list__header">
+      <h2 class="block-list__title">
+        Environment access for Danny Knight
+        <div class='subtitle'>Project Name - Environment Name</div>
+      </h2>
+    </header>
+
+    <form method="post" action="">
+      <ul>
+        <li class='block-list__item block-list__item--selectable'>
+          <input type='radio' name='radio' id='radio-1' />
+          <label for='radio-1'>
+            <dl>
+              <dt>CCPO</dt>
+              <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dicta voluptate vitae quasi, cumque rem dolores, quae quas cum in recusandae? Libero deleniti minus ab accusantium vel necessitatibus placeat, rerum?</dd>
+            </dl>
+          </label>
+        </li>
+        <li class='block-list__item block-list__item--selectable'>
+          <input type='radio' name='radio' id='radio-2' />
+          <label for='radio-2'>
+            <dl>
+              <dt>Security</dt>
+              <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat vel ea, eaque, odio sint explicabo officia, debitis dolore, et repudiandae possimus deserunt eveniet laborum. Sunt blanditiis deleniti minus. Et, mollitia.</dd>
+            </dl>
+          </label>
+        </li>
+        <li class='block-list__item block-list__item--selectable'>
+          <input type='radio' name='radio' id='radio-3' />
+          <label for='radio-3'>
+            <dl>
+              <dt>Audit</dt>
+              <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem itaque reprehenderit dolorum nobis voluptatibus quae, facilis voluptatum necessitatibus alias laboriosam, esse blanditiis culpa possimus tempore consectetur recusandae. Nihil, vel, dolorem!</dd>
+            </dl>
+          </label>
+        </li>
+        <li class='block-list__item block-list__item--selectable'>
+          <input type='radio' name='radio' id='radio-4' />
+          <label for='radio-4'>
+            <dl>
+              <dt>Application Developer</dt>
+              <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea esse ab consequuntur aliquam. Porro ea mollitia sapiente blanditiis quaerat quam beatae vitae adipisci quisquam dolore reiciendis tenetur, eius nemo quibusdam!</dd>
+            </dl>
+          </label>
+        </li>
+        <li class='block-list__item block-list__item--selectable'>
+          <input type='radio' name='radio' id='radio-5' />
+          <label for='radio-5'>
+            <dl>
+              <dt>Dev Ops</dt>
+              <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore incidunt obcaecati, quidem ullam sint iusto. Natus ex distinctio eveniet cumque laudantium veritatis nemo asperiores, esse hic quis perspiciatis, quia impedit.</dd>
+            </dl>
+          </label>
+        </li>
+        <li class='block-list__item block-list__item--selectable'>
+          <input type='radio' name='radio' id='radio-6' />
+          <label for='radio-6'>
+            <dl>
+              <dt>Billing</dt>
+              <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem delectus at, voluptatibus dolores, nobis temporibus. Ipsum dignissimos corrupti qui nisi et alias totam commodi maiores hic possimus ipsam error, ullam.</dd>
+            </dl>
+          </label>
+        </li>
+      </ul>
+
+      <div class='block-list__footer'>
+        <div class='action-group'>
+          <a v-on:click="closeModal('rolesModal')" class='action-group__action usa-button'>Select Access Role</a>
+          <a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('rolesModal')">No Access</a>
+        </div>
+      </div>
+    </form>
+
+  </div>
+
+{% endcall %}
+
 <div is='toggler' default-visible class='block-list project-list-item'>
   <template slot-scope='{ isVisible, toggle }'>
     <header class='block-list__header'>
@@ -68,7 +148,7 @@
           Development
         </span>
         <div class='project-list-item__environment__actions'>
-          <span class="label">no access </span><a href="#" class="icon-link">set role</a>
+          <span class="label">no access </span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
         </div>
       </li>
       <li class='block-list__item project-list-item__environment'>
@@ -76,7 +156,7 @@
           Sandbox
         </span>
         <div class='project-list-item__environment__actions'>
-          <span class="label">no access</span><a href="#" class="icon-link">set role</a>
+          <span class="label">no access</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
         </div>
       </li>
       <li class='block-list__item project-list-item__environment'>
@@ -84,7 +164,7 @@
           Production
         </span>
         <div class='project-list-item__environment__actions'>
-          <span class="label label--success">Billing</span><a href="#" class="icon-link">set role</a>
+          <span class="label label--success">Billing</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
         </div>
       </li>
     </ul>
@@ -107,7 +187,7 @@
           Development
         </span>
         <div class='project-list-item__environment__actions'>
-          <span class="label">no access </span><a href="#" class="icon-link">set role</a>
+          <span class="label">no access </span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
         </div>
       </li>
       <li class='block-list__item project-list-item__environment'>
@@ -115,7 +195,7 @@
           Sandbox
         </span>
         <div class='project-list-item__environment__actions'>
-          <span class="label">no access</span><a href="#" class="icon-link">set role</a>
+          <span class="label">no access</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
         </div>
       </li>
       <li class='block-list__item project-list-item__environment'>
@@ -123,7 +203,7 @@
           Production
         </span>
         <div class='project-list-item__environment__actions'>
-          <span class="label">no access</span><a href="#" class="icon-link">set role</a>
+          <span class="label">no access</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
         </div>
       </li>
     </ul>
@@ -142,4 +222,4 @@
 
 
 
-{% endblock %}
\ No newline at end of file
+{% endblock %}