diff --git a/ui-v2/app/components/consul-role-list/pageobject.js b/ui-v2/app/components/consul-role-list/pageobject.js
index 9650a8f98e..95dc939ea3 100644
--- a/ui-v2/app/components/consul-role-list/pageobject.js
+++ b/ui-v2/app/components/consul-role-list/pageobject.js
@@ -1,5 +1,6 @@
 export default (collection, clickable, attribute, text, actions) => () => {
-  return collection('.consul-role-list li:not(:first-child)', {
+  return collection('.consul-role-list [data-test-list-row]', {
+    role: clickable('a'),
     name: attribute('data-test-role', '[data-test-role]'),
     description: text('[data-test-description]'),
     policy: text('[data-test-policy].policy', { multiple: true }),
diff --git a/ui-v2/app/controllers/dc/acls/roles/index.js b/ui-v2/app/controllers/dc/acls/roles/index.js
index 510563886b..f99cde37f3 100644
--- a/ui-v2/app/controllers/dc/acls/roles/index.js
+++ b/ui-v2/app/controllers/dc/acls/roles/index.js
@@ -1,6 +1,7 @@
 import Controller from '@ember/controller';
 export default Controller.extend({
   queryParams: {
+    sortBy: 'sort',
     search: {
       as: 'filter',
       replace: true,
diff --git a/ui-v2/app/initializers/sort.js b/ui-v2/app/initializers/sort.js
index 7b9159df92..83d6827cd6 100644
--- a/ui-v2/app/initializers/sort.js
+++ b/ui-v2/app/initializers/sort.js
@@ -2,6 +2,7 @@ import service from 'consul-ui/sort/comparators/service';
 import check from 'consul-ui/sort/comparators/check';
 import intention from 'consul-ui/sort/comparators/intention';
 import token from 'consul-ui/sort/comparators/token';
+import role from 'consul-ui/sort/comparators/role';
 
 export function initialize(container) {
   // Service-less injection using private properties at a per-project level
@@ -11,6 +12,7 @@ export function initialize(container) {
     check: check(),
     intention: intention(),
     token: token(),
+    role: role(),
   };
   Sort.reopen({
     comparator: function(type) {
diff --git a/ui-v2/app/routes/dc/acls/roles/index.js b/ui-v2/app/routes/dc/acls/roles/index.js
index e6d0acc97e..7ddc7a9661 100644
--- a/ui-v2/app/routes/dc/acls/roles/index.js
+++ b/ui-v2/app/routes/dc/acls/roles/index.js
@@ -7,6 +7,7 @@ import WithRoleActions from 'consul-ui/mixins/role/with-actions';
 export default Route.extend(WithRoleActions, {
   repo: service('repository/role'),
   queryParams: {
+    sortBy: 'sort',
     search: {
       as: 'filter',
       replace: true,
diff --git a/ui-v2/app/sort/comparators/role.js b/ui-v2/app/sort/comparators/role.js
new file mode 100644
index 0000000000..62e718f7a1
--- /dev/null
+++ b/ui-v2/app/sort/comparators/role.js
@@ -0,0 +1,3 @@
+export default () => key => {
+  return key;
+};
diff --git a/ui-v2/app/templates/dc/acls/roles/index.hbs b/ui-v2/app/templates/dc/acls/roles/index.hbs
index 9fe9de7612..fbb485f514 100644
--- a/ui-v2/app/templates/dc/acls/roles/index.hbs
+++ b/ui-v2/app/templates/dc/acls/roles/index.hbs
@@ -3,6 +3,17 @@
 {{else}}
   {{title 'Access Controls'}}
 {{/if}}
+
+{{#let (selectable-key-values
+    (array "Name:asc" "A to Z")
+    (array "Name:desc" "Z to A")
+    (array "CreateIndex:asc" "Newest to oldest")
+    (array "CreateIndex:desc" "Oldest to newest")
+      selected=sortBy
+  )
+  as |sort|
+}}
+
 <AppView
   @class="role list"
   @loading={{isLoading}}
@@ -31,17 +42,24 @@
   <BlockSlot @name="actions">
     <a data-test-create href="{{href-to 'dc.acls.roles.create'}}" class="type-create">Create</a>
   </BlockSlot>
-  <BlockSlot @name="content">
-{{#if (gt items.length 0) }}
+  <BlockSlot @name="toolbar">
+  {{#if (gt items.length 0) }}
     <SearchBar
       @value={{search}}
       @onsearch={{action (mut search) value="target.value"}}
+      @secondary="sort"
+      @selected={{sort.selected}}
+      @options={{sort.items}}
+      @onchange={{action (mut sortBy) value='target.selected.key'}}
     />
-{{/if}}
-    <ChangeableSet @dispatcher={{searchable 'role' items}} @terms={{search}}>
+  {{/if}}
+  </BlockSlot>
+  <BlockSlot @name="content">
+  {{#let (sort-by (comparator 'role' sort.selected.key) items) as |sorted|}}
+    <ChangeableSet @dispatcher={{searchable 'role' sorted}} @terms={{search}}>
       <BlockSlot @name="set" as |filtered|>
         <ConsulRoleList
-          @items={{sort-by "CreateTime:desc" "Name:asc" filtered}}
+          @items={{filtered}}
           @ondelete={{action send 'delete'}}
         />
       </BlockSlot>
@@ -76,5 +94,7 @@
         </EmptyState>
       </BlockSlot>
     </ChangeableSet>
+  {{/let}}
   </BlockSlot>
-</AppView>
\ No newline at end of file
+</AppView>
+{{/let}}
\ No newline at end of file
diff --git a/ui-v2/tests/acceptance/dc/acls/roles/navigation.feature b/ui-v2/tests/acceptance/dc/acls/roles/navigation.feature
new file mode 100644
index 0000000000..d91dcd8326
--- /dev/null
+++ b/ui-v2/tests/acceptance/dc/acls/roles/navigation.feature
@@ -0,0 +1,16 @@
+@setupApplicationTest
+Feature: dc / roles / navigation
+  Scenario: Clicking a role in the listing and back again
+    Given 1 datacenter model with the value "dc-1"
+    And 3 role models
+    When I visit the roles page for yaml
+    ---
+      dc: dc-1
+    ---
+    Then the url should be /dc-1/acls/roles
+    And the title should be "Roles - Consul"
+    Then I see 3 role models
+    When I click role on the roles
+    And I click "[data-test-back]"
+    Then the url should be /dc-1/acls/roles
+
diff --git a/ui-v2/tests/acceptance/dc/acls/roles/sorting.feature b/ui-v2/tests/acceptance/dc/acls/roles/sorting.feature
new file mode 100644
index 0000000000..29ba2a6aad
--- /dev/null
+++ b/ui-v2/tests/acceptance/dc/acls/roles/sorting.feature
@@ -0,0 +1,57 @@
+@setupApplicationTest
+Feature: dc / acls / roles / sorting
+  Scenario: Sorting Roles
+    Given 1 datacenter model with the value "dc-1"
+    And 4 role models from yaml
+    ---
+    - Name: "system-A"
+      CreateIndex: 3
+    - Name: "system-D"
+      CreateIndex: 2
+    - Name: "system-C"
+      CreateIndex: 1
+    - Name: "system-B"
+      CreateIndex: 4
+    ---
+    When I visit the roles page for yaml
+    ---
+      dc: dc-1
+    ---
+    Then the url should be /dc-1/acls/roles
+    Then I see 4 role models
+    When I click selected on the sort
+    When I click options.1.button on the sort
+    Then I see name on the roles vertically like yaml
+    ---
+    - "system-D"
+    - "system-C"
+    - "system-B"
+    - "system-A"
+    ---
+    When I click selected on the sort
+    When I click options.0.button on the sort
+    Then I see name on the roles vertically like yaml
+    ---
+    - "system-A"
+    - "system-B"
+    - "system-C"
+    - "system-D"
+    ---
+    When I click selected on the sort
+    When I click options.2.button on the sort
+    Then I see name on the roles vertically like yaml
+    ---
+    - "system-C"
+    - "system-D"
+    - "system-A"
+    - "system-B"
+    ---
+    When I click selected on the sort
+    When I click options.3.button on the sort
+    Then I see name on the roles vertically like yaml
+    ---
+    - "system-B"
+    - "system-A"
+    - "system-D"
+    - "system-C"
+    ---
diff --git a/ui-v2/tests/acceptance/steps/dc/acls/roles/navigation-steps.js b/ui-v2/tests/acceptance/steps/dc/acls/roles/navigation-steps.js
new file mode 100644
index 0000000000..3231912b98
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/dc/acls/roles/navigation-steps.js
@@ -0,0 +1,10 @@
+import steps from '../../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/acceptance/steps/dc/acls/roles/sorting-steps.js b/ui-v2/tests/acceptance/steps/dc/acls/roles/sorting-steps.js
new file mode 100644
index 0000000000..3231912b98
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/dc/acls/roles/sorting-steps.js
@@ -0,0 +1,10 @@
+import steps from '../../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}
diff --git a/ui-v2/tests/pages.js b/ui-v2/tests/pages.js
index 40f737bf02..c80ff1e44b 100644
--- a/ui-v2/tests/pages.js
+++ b/ui-v2/tests/pages.js
@@ -170,7 +170,7 @@ export default {
   acl: create(acl(visitable, submitable, deletable, cancelable, clickable)),
   policies: create(policies(visitable, creatable, consulPolicyList, freetextFilter)),
   policy: create(policy(visitable, submitable, deletable, cancelable, clickable, tokenList)),
-  roles: create(roles(visitable, creatable, consulRoleList, freetextFilter)),
+  roles: create(roles(visitable, creatable, consulRoleList, popoverSelect)),
   // TODO: This needs a policyList
   role: create(role(visitable, submitable, deletable, cancelable, policySelector, tokenList)),
   tokens: create(tokens(visitable, creatable, text, consulTokenList, popoverSelect)),
diff --git a/ui-v2/tests/pages/dc/acls/roles/index.js b/ui-v2/tests/pages/dc/acls/roles/index.js
index b226f708a6..851fcbe19b 100644
--- a/ui-v2/tests/pages/dc/acls/roles/index.js
+++ b/ui-v2/tests/pages/dc/acls/roles/index.js
@@ -1,8 +1,8 @@
-export default function(visitable, creatable, roles, filter) {
+export default function(visitable, creatable, roles, popoverSelect) {
   return {
     visit: visitable('/:dc/acls/roles'),
     roles: roles(),
-    filter: filter(),
+    sort: popoverSelect(),
     ...creatable(),
   };
 }