diff --git a/ui-v2/app/templates/dc/acls/index.hbs b/ui-v2/app/templates/dc/acls/index.hbs
index f4668373c9..1ca1224ed0 100644
--- a/ui-v2/app/templates/dc/acls/index.hbs
+++ b/ui-v2/app/templates/dc/acls/index.hbs
@@ -15,7 +15,7 @@
     {{#block-slot 'content'}}
 {{#if (gt filtered.length 0)}}
         {{#tabular-collection
-            items=filtered as |item index|
+            items=(sort-by 'Name:asc' filtered) as |item index|
         }}
             {{#block-slot 'header'}}
                 <th>Name</th>
diff --git a/ui-v2/tests/acceptance/dc/acls/list-order.feature b/ui-v2/tests/acceptance/dc/acls/list-order.feature
new file mode 100644
index 0000000000..a7c75d901f
--- /dev/null
+++ b/ui-v2/tests/acceptance/dc/acls/list-order.feature
@@ -0,0 +1,38 @@
+@setupApplicationTest
+Feature: dc / acls / list-order
+  In order to be able to find ACL tokens easier
+  As a user
+  I want to see the ACL listed alphabetically by Name
+
+  Scenario: I have 10 randomly sorted tokens
+    Given 1 datacenter model with the value "datacenter"
+    And 10 acl model from yaml
+    ---
+      - Name: zz
+      - Name: 123
+      - Name: aa
+      - Name: 9857
+      - Name: sfgr
+      - Name: foo
+      - Name: bar
+      - Name: xft
+      - Name: z-35y
+      - Name: __acl
+    ---
+    When I visit the acls page for yaml
+    ---
+      dc: datacenter
+    ---
+    Then I see name on the acls like yaml
+    ---
+      - __acl
+      - 123
+      - 9857
+      - aa
+      - bar
+      - foo
+      - sfgr
+      - xft
+      - z-35y
+      - zz
+    ---
diff --git a/ui-v2/tests/acceptance/steps/dc/acls/list-order-steps.js b/ui-v2/tests/acceptance/steps/dc/acls/list-order-steps.js
new file mode 100644
index 0000000000..a7eff3228b
--- /dev/null
+++ b/ui-v2/tests/acceptance/steps/dc/acls/list-order-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/steps.js b/ui-v2/tests/steps.js
index 4a429f6bb1..74281d1636 100644
--- a/ui-v2/tests/steps.js
+++ b/ui-v2/tests/steps.js
@@ -216,7 +216,12 @@ export default function(assert) {
         const iterator = new Array(_component.length).fill(true);
         iterator.forEach(function(item, i, arr) {
           const actual = _component.objectAt(i)[property];
-          const expected = yaml[i];
+          // anything coming from the DOM is going to be text/strings
+          // if the yaml has numbers, cast them to strings
+          // TODO: This would get problematic for deeper objects
+          // will have to look to do this recursively
+          const expected = typeof yaml[i] === 'number' ? yaml[i].toString() : yaml[i];
+
           assert.deepEqual(
             actual,
             expected,