diff --git a/atst/routes/applications/settings.py b/atst/routes/applications/settings.py
index 309d684f..e12a66f9 100644
--- a/atst/routes/applications/settings.py
+++ b/atst/routes/applications/settings.py
@@ -7,45 +7,53 @@ from atst.domain.applications import Applications
 from atst.forms.app_settings import EnvironmentRolesForm
 from atst.forms.application import ApplicationForm, EditEnvironmentForm
 from atst.domain.authz.decorator import user_can_access_decorator as user_can
+from atst.models.environment_role import CSPRole
 from atst.domain.exceptions import NotFoundError
-
 from atst.models.permissions import Permissions
 from atst.utils.flash import formatted_flash as flash
 
 
 def get_environments_obj_for_app(application):
-    environments_obj = {}
-
+    environments_obj = []
     for env in application.environments:
-        environments_obj[env.name] = {
-            "edit_form": EditEnvironmentForm(obj=env),
+        env_data = {
             "id": env.id,
-            "members": [],
+            "name": env.name,
+            "edit_form": EditEnvironmentForm(obj=env),
+            "members_form": EnvironmentRolesForm(data=data_for_env_members_form(env)),
+            "members": sort_env_users_by_role(env),
         }
-        for user in env.users:
-            env_role = EnvironmentRoles.get(user.id, env.id)
-            environments_obj[env.name]["members"].append(
-                {"name": user.full_name, "role": env_role.displayname}
-            )
+        environments_obj.append(env_data)
 
     return environments_obj
 
 
-def serialize_env_member_form_data(application):
-    environments_list = []
-    for env in application.environments:
-        env_info = {"env_id": env.id, "team_roles": []}
-        for user in env.users:
-            env_role = EnvironmentRoles.get(user.id, env.id)
-            env_info["team_roles"].append(
-                {
-                    "name": user.full_name,
-                    "user_id": user.id,
-                    "role": env_role.displayname,
-                }
+def sort_env_users_by_role(env):
+    users_dict = {"no_access": []}
+    for role in CSPRole:
+        users_dict[role.value] = []
+
+    for user in env.application.users:
+        if user in env.users:
+            role = EnvironmentRoles.get(user.id, env.id)
+            users_dict[role.displayname].append(
+                {"name": user.full_name, "user_id": user.id}
             )
-        environments_list.append(env_info)
-    return environments_list
+        else:
+            users_dict["no_access"].append({"name": user.full_name, "user_id": user.id})
+
+    return users_dict
+
+
+def data_for_env_members_form(environment):
+    data = {"env_id": environment.id, "team_roles": []}
+    for user in environment.users:
+        env_role = EnvironmentRoles.get(user.id, environment.id)
+        data["team_roles"].append(
+            {"name": user.full_name, "user_id": user.id, "role": env_role.displayname}
+        )
+
+    return data
 
 
 def check_users_are_in_application(user_ids, application):
@@ -62,18 +70,12 @@ def settings(application_id):
     # refactor like portfolio admin render function
     application = Applications.get(application_id)
     form = ApplicationForm(name=application.name, description=application.description)
-    app_envs_data = serialize_env_member_form_data(application)
-
-    env_forms = {}
-    for env_data in app_envs_data:
-        env_forms[env_data["env_id"]] = EnvironmentRolesForm(data=env_data)
 
     return render_template(
         "portfolios/applications/settings.html",
         application=application,
         form=form,
         environments_obj=get_environments_obj_for_app(application=application),
-        env_forms=env_forms,
     )
 
 
@@ -116,17 +118,11 @@ def update(application_id):
             )
         )
     else:
-        env_data = serialize_env_member_form_data(application)
-        env_forms = {}
-        for data in env_data:
-            env_forms[data["env_id"]] = EnvironmentRolesForm(data=data)
-
         return render_template(
             "portfolios/applications/settings.html",
             application=application,
             form=form,
             environments_obj=get_environments_obj_for_app(application=application),
-            env_forms=env_forms,
         )
 
 
@@ -167,7 +163,6 @@ def update_env_roles(environment_id):
                 name=application.name, description=application.description
             ),
             environments_obj=get_environments_obj_for_app(application=application),
-            env_forms=env_roles_form,
         )
 
 
diff --git a/styles/sections/_application_edit.scss b/styles/sections/_application_edit.scss
index ce05522f..c11c2f87 100644
--- a/styles/sections/_application_edit.scss
+++ b/styles/sections/_application_edit.scss
@@ -17,3 +17,45 @@
     margin-right: -$gap;
   }
 }
+
+.app-team-settings-link {
+  font-size: $small-font-size;
+  font-weight: $font-normal;
+  padding-left: $gap * 2;
+}
+
+.environment-role {
+  padding: $gap * 3;
+
+  h4 {
+    margin-bottom: $gap / 4;
+  }
+
+  .environment-role__users {
+    background-color: $color-gray-lightest;
+    padding: ($gap * 1.2) ($gap * 0.6);
+    font-size: $small-font-size;
+    display: flex;
+    flex-wrap: wrap;
+
+    .environment-role__user {
+      background-color: $color-white;
+      border-radius: 0.5rem;
+      padding: ($gap / 2) $gap;
+      border: solid 2px $color-blue;
+      margin: $gap;
+      white-space: nowrap;
+      width: 20rem;
+
+      &.unassigned {
+        border: solid 1px $color-gray-light;
+      }
+    }
+
+    .environment-role__no-user {
+      margin: $gap;
+      padding: ($gap / 2) $gap;
+      font-weight: $font-normal;
+    }
+  }
+}
diff --git a/templates/fragments/applications/edit_environments.html b/templates/fragments/applications/edit_environments.html
index 607d854e..3532ff1e 100644
--- a/templates/fragments/applications/edit_environments.html
+++ b/templates/fragments/applications/edit_environments.html
@@ -3,6 +3,28 @@
 {% from "components/text_input.html" import TextInput %}
 {% from "components/save_button.html" import SaveButton %}
 
+{% macro RolePanel(users=[], role='no_access') %}
+  {% if role == 'no_access' %}
+    {% set role = 'Unassigned (No Access)' %}
+    {% set unassigned = True %}
+  {% endif %}
+
+  <div class='environment-role'>
+    <h4>{{ role }}</h4>
+      <ul class='environment-role__users'>
+        {% for user in users %}
+          <li class="environment-role__user {{ 'unassigned' if unassigned }}">
+            {{ user.name }}{{ Icon('edit', classes="icon--medium right") }}
+          </li>
+        {% endfor %}
+
+        {% if users == [] %}
+          <div class='environment-role__no-user'>Currently no members are in this role</div>
+        {% endif %}
+      </ul>
+    </div>
+{% endmacro %}
+
 <div class="application-list-item">
   <header>
     <div class="responsive-table-wrapper__header">
@@ -22,12 +44,16 @@
     </div>
 
     <ul class="accordion-table__items">
-      {% for name, environment_info in environments_obj.items() %}
+      {% for env in environments_obj %}
+        {% set member_count = env['members_form'].data['team_roles'] | length %}
+        {% set members_by_role = env['members'] %}
+        {% set unassigned = members_by_role['no_access'] %}
+
         <toggler inline-template>
           <li class="accordion-table__item">
             <div class="accordion-table__item-content">
               <span>
-                {{ name }}
+                {{ env['name'] }}
               </span>
               <span class="icon-link">
                 {% set edit_environment_button %}
@@ -44,11 +70,11 @@
               </span>
               <span class="icon-link icon-link--large accordion-table__item__toggler">
                 {% set open_members_button %}
-                  {{ "common.members" | translate }} ({{ members_list | length }}) {{ Icon('caret_down') }}
+                  {{ "common.members" | translate }} ({{ member_count }}) {{ Icon('caret_down') }}
                 {% endset %}
 
                 {% set close_members_button %}
-                  {{ "common.members" | translate }} ({{ members_list | length }}) {{ Icon('caret_up') }}
+                  {{ "common.members" | translate }} ({{ member_count }}) {{ Icon('caret_up') }}
                 {% endset %}
 
                 {{
@@ -62,21 +88,17 @@
             </div>
 
             {% call ToggleSection(section_name="members") %}
-              <ul>
-                {% for member in environment_info['members'] %}
-                <li class="accordion-table__item__expanded">
-                  <div class="accordion-table__item__expanded_first">{{ member.name }}</div>
-                  <div class="right">{{ member.role }}</div>
-                </li>
+                <div class='app-team-settings-link'>Need to add someone new to the team? <a href='{{ url_for("applications.team", application_id=application.id) }}'>Jump to Team Settings</a></div>
+                {% for role, members in members_by_role.items() %}
+                  {{ RolePanel(users=members, role=role) }}
                 {% endfor %}
-              </ul>
             {% endcall %}
 
             {% call ToggleSection(section_name="edit") %}
               <ul>
                 <li class="accordion-table__item__expanded">
-                  {% set edit_form = environment_info['edit_form'] %}
-                  <form action="{{ url_for('applications.update_environment', environment_id=environment_info['id']) }}" method="post">
+                  {% set edit_form = env['edit_form'] %}
+                  <form action="{{ url_for('applications.update_environment', environment_id=env['id']) }}" method="post">
                     {{ edit_form.csrf_token }}
                     {{ TextInput(edit_form.name) }}
                     {{
diff --git a/templates/fragments/applications/read_only_environments.html b/templates/fragments/applications/read_only_environments.html
index 6cd9ed8d..4a91fb3f 100644
--- a/templates/fragments/applications/read_only_environments.html
+++ b/templates/fragments/applications/read_only_environments.html
@@ -16,21 +16,21 @@
     </div>
 
     <ul class="accordion-table__items">
-      {% for name, members_list in environments_obj.items() %}
+      {% for env in environments_obj %}
         <toggler inline-template>
           <li class="accordion-table__item">
             <div class="accordion-table__item-content">
               <span>
-                {{ name }}
+                {{ env['name'] }}
               </span>
 
               <span class="icon-link icon-link--large accordion-table__item__toggler">
                 {% set open_members_button %}
-                  {{ "common.members" | translate }} ({{ members_list | length }}) {{ Icon('caret_down') }}
+                  {{ "common.members" | translate }} ({{ env['members'] | length }}) {{ Icon('caret_down') }}
                 {% endset %}
 
                 {% set close_members_button %}
-                  {{ "common.members" | translate }} ({{ members_list | length }}) {{ Icon('caret_up') }}
+                  {{ "common.members" | translate }} ({{ env['members'] | length }}) {{ Icon('caret_up') }}
                 {% endset %}
 
                 {{
@@ -45,7 +45,7 @@
 
             {% call ToggleSection(section_name="members") %}
               <ul>
-                {% for member in members_list %}
+                {% for member in env['members'] %}
                 <li class="accordion-table__item__expanded">
                   <div class="accordion-table__item__expanded_first">{{ member.name }}</div>
                 </li>
diff --git a/tests/routes/applications/test_settings.py b/tests/routes/applications/test_settings.py
index d411de41..8bcf7bc7 100644
--- a/tests/routes/applications/test_settings.py
+++ b/tests/routes/applications/test_settings.py
@@ -22,6 +22,7 @@ from atst.domain.exceptions import NotFoundError
 from atst.models.environment_role import CSPRole
 from atst.models.portfolio_role import Status as PortfolioRoleStatus
 from atst.forms.application import EditEnvironmentForm
+from atst.forms.app_settings import EnvironmentRolesForm
 
 from tests.utils import captured_templates
 
@@ -72,15 +73,18 @@ def test_edit_application_environments_obj(app, client, user_session):
         portfolio,
         "Snazzy Application",
         "A new application for me and my friends",
-        {"env1", "env2"},
+        {"env"},
     )
-    user1 = UserFactory.create()
-    user2 = UserFactory.create()
-    env1 = application.environments[0]
-    env2 = application.environments[1]
-    env_role1 = EnvironmentRoleFactory.create(environment=env1, user=user1)
-    env_role2 = EnvironmentRoleFactory.create(environment=env1, user=user2)
-    env_role3 = EnvironmentRoleFactory.create(environment=env2, user=user1)
+    env = application.environments[0]
+    app_role = ApplicationRoleFactory.create(application=application)
+    env_role1 = EnvironmentRoleFactory.create(
+        environment=env, role=CSPRole.BASIC_ACCESS.value
+    )
+    ApplicationRoleFactory.create(application=application, user=env_role1.user)
+    env_role2 = EnvironmentRoleFactory.create(
+        environment=env, role=CSPRole.NETWORK_ADMIN.value
+    )
+    ApplicationRoleFactory.create(application=application, user=env_role2.user)
 
     user_session(portfolio.owner)
 
@@ -92,54 +96,24 @@ def test_edit_application_environments_obj(app, client, user_session):
         assert response.status_code == 200
         _, context = templates[0]
 
-        env_obj_1 = context["environments_obj"][env1.name]
-        assert env_obj_1["id"] == env1.id
-        assert isinstance(env_obj_1["edit_form"], EditEnvironmentForm)
-        assert env_obj_1["members"] == [
-            {"name": user1.full_name, "role": env_role1.role},
-            {"name": user2.full_name, "role": env_role2.role},
-        ]
-
-
-def test_edit_app_serialize_env_member_form_data(app, client, user_session):
-    portfolio = PortfolioFactory.create()
-    application = Applications.create(
-        portfolio,
-        "Snazzy Application",
-        "A new application for me and my friends",
-        {"env1", "env2"},
-    )
-    user1 = UserFactory.create()
-    user2 = UserFactory.create()
-    env1 = application.environments[0]
-    env2 = application.environments[1]
-    env_role1 = EnvironmentRoleFactory.create(environment=env1, user=user1)
-    env_role2 = EnvironmentRoleFactory.create(environment=env1, user=user2)
-    env_role3 = EnvironmentRoleFactory.create(environment=env2, user=user1)
-
-    user_session(portfolio.owner)
-
-    with captured_templates(app) as templates:
-        response = app.test_client().get(
-            url_for("applications.settings", application_id=application.id)
-        )
-
-        assert response.status_code == 200
-        _, context = templates[0]
-        for env_id in context["env_forms"]:
-            env = Environments.get(environment_id=env_id)
-            form_data = {"env_id": env_id, "team_roles": []}
-            for user in env.users:
-                env_role = EnvironmentRoles.get(user.id, env.id)
-                form_data["team_roles"].append(
-                    {
-                        "name": user.full_name,
-                        "user_id": user.id,
-                        "role": env_role.displayname,
-                    }
-                )
-
-            assert context["env_forms"][env_id].data == form_data
+        env_obj = context["environments_obj"][0]
+        assert env_obj["name"] == env.name
+        assert env_obj["id"] == env.id
+        assert isinstance(env_obj["edit_form"], EditEnvironmentForm)
+        assert isinstance(env_obj["members_form"], EnvironmentRolesForm)
+        assert env_obj["members"] == {
+            "no_access": [
+                {"name": app_role.user.full_name, "user_id": app_role.user_id}
+            ],
+            CSPRole.BASIC_ACCESS.value: [
+                {"name": env_role1.user.full_name, "user_id": env_role1.user_id}
+            ],
+            CSPRole.NETWORK_ADMIN.value: [
+                {"name": env_role2.user.full_name, "user_id": env_role2.user_id}
+            ],
+            CSPRole.BUSINESS_READ.value: [],
+            CSPRole.TECHNICAL_READ.value: [],
+        }
 
 
 def test_user_with_permission_can_update_application(client, user_session):
diff --git a/tests/test_access.py b/tests/test_access.py
index 651b5a99..0b568c58 100644
--- a/tests/test_access.py
+++ b/tests/test_access.py
@@ -16,6 +16,7 @@ from tests.factories import (
     ApplicationFactory,
     ApplicationRoleFactory,
     EnvironmentFactory,
+    EnvironmentRoleFactory,
     InvitationFactory,
     PortfolioFactory,
     PortfolioRoleFactory,
@@ -264,6 +265,11 @@ def test_application_settings_access(get_url_assert_status):
         applications=[{"name": "Mos Eisley", "description": "Where Han shot first"}],
     )
     app = portfolio.applications[0]
+    env = EnvironmentFactory.create(application=app)
+    env_role = EnvironmentRoleFactory.create(
+        environment=env, role=CSPRole.NETWORK_ADMIN.value
+    )
+    ApplicationRoleFactory.create(application=app, user=env_role.user)
 
     url = url_for("applications.settings", application_id=app.id)
     get_url_assert_status(ccpo, url, 200)