diff --git a/ui/app/templates/clients/client/index.hbs b/ui/app/templates/clients/client/index.hbs
index 974714e4f5ff..63ca0fb748e1 100644
--- a/ui/app/templates/clients/client/index.hbs
+++ b/ui/app/templates/clients/client/index.hbs
@@ -431,7 +431,7 @@
             {{#if a.item.attributes.attributesStructured}}
               <div class="boxed-section-body is-full-bleed">
                 <AttributesTable
-                  @attributes={{a.item.attributesShort}}
+                  @attributePairs={{a.item.attributesShort}}
                   @class="attributes-table" />
               </div>
             {{else}}
@@ -454,7 +454,7 @@
     <div class="boxed-section-body is-full-bleed">
       <AttributesTable
         data-test-attributes
-        @attributes={{this.model.attributes.attributesStructured}}
+        @attributePairs={{this.model.attributes.attributesStructured}}
         @class="attributes-table" />
     </div>
     <div class="boxed-section-head">
@@ -464,7 +464,7 @@
       <div class="boxed-section-body is-full-bleed">
         <AttributesTable
           data-test-meta
-          @attributes={{this.model.meta.attributesStructured}}
+          @attributePairs={{this.model.meta.attributesStructured}}
           @class="attributes-table" />
       </div>
     {{else}}
diff --git a/ui/app/templates/components/attributes-table.hbs b/ui/app/templates/components/attributes-table.hbs
index 7ff899c8eeb4..cab625f4fa95 100644
--- a/ui/app/templates/components/attributes-table.hbs
+++ b/ui/app/templates/components/attributes-table.hbs
@@ -1,4 +1,4 @@
-<table class="table is-striped is-fixed is-compact is-darkened">
+<table class="table is-striped is-fixed is-compact is-darkened" ...attributes>
   <thead>
     <tr>
       <th class="is-one-third">Name</th>
@@ -6,6 +6,6 @@
     </tr>
   </thead>
   <tbody>
-    <AttributesSection @attributes={{this.attributes}} />
+    <AttributesSection @attributes={{@attributePairs}} />
   </tbody>
 </table>
diff --git a/ui/app/templates/components/job-deployment-details.hbs b/ui/app/templates/components/job-deployment-details.hbs
index 87bd0baf55ec..8d83e16b3c2b 100644
--- a/ui/app/templates/components/job-deployment-details.hbs
+++ b/ui/app/templates/components/job-deployment-details.hbs
@@ -1,5 +1,5 @@
 {{yield (hash
-  metrics=(component "job-deployment/deployment-metrics" deployment=this.deployment)
-  taskGroups=(component "job-deployment/task-groups" deployment=this.deployment)
-  allocations=(component "job-deployment/deployment-allocations" deployment=this.deployment)
+  metrics=(component "job-deployment/deployment-metrics" deployment=@deployment)
+  taskGroups=(component "job-deployment/task-groups" deployment=@deployment)
+  allocations=(component "job-deployment/deployment-allocations" deployment=@deployment)
 )}}
diff --git a/ui/app/templates/components/job-deployment/deployment-allocations.hbs b/ui/app/templates/components/job-deployment/deployment-allocations.hbs
index 7cf6549f1726..8f22b45b140d 100644
--- a/ui/app/templates/components/job-deployment/deployment-allocations.hbs
+++ b/ui/app/templates/components/job-deployment/deployment-allocations.hbs
@@ -4,7 +4,7 @@
   </div>
   <div class="boxed-section-body is-full-bleed">
     <ListTable
-      @source={{this.deployment.allocations}}
+      @source={{@deployment.allocations}}
       @class="allocations" as |t|>
       <t.head>
         <th class="is-narrow"></th>
diff --git a/ui/app/templates/components/job-deployment/task-groups.hbs b/ui/app/templates/components/job-deployment/task-groups.hbs
index 019abc40b979..95205b9b75d0 100644
--- a/ui/app/templates/components/job-deployment/task-groups.hbs
+++ b/ui/app/templates/components/job-deployment/task-groups.hbs
@@ -4,7 +4,7 @@
   </div>
   <div class="boxed-section-body is-full-bleed">
     <ListTable
-      @source={{this.deployment.taskGroupSummaries}}
+      @source={{@deployment.taskGroupSummaries}}
       @class="task-groups" as |t|>
       <t.head>
         <th>Name</th>
diff --git a/ui/app/templates/components/reschedule-event-timeline.hbs b/ui/app/templates/components/reschedule-event-timeline.hbs
index a030d55b4467..8aa844b55c43 100644
--- a/ui/app/templates/components/reschedule-event-timeline.hbs
+++ b/ui/app/templates/components/reschedule-event-timeline.hbs
@@ -1,29 +1,29 @@
 <ol class="timeline">
-  {{#if this.allocation.nextAllocation}}
+  {{#if @allocation.nextAllocation}}
     <RescheduleEventRow
       @label="Next Allocation"
-      @allocation={{this.allocation.nextAllocation}}
-      @time={{this.allocation.nextAllocation.modifyTime}} />
+      @allocation={{@allocation.nextAllocation}}
+      @time={{@allocation.nextAllocation.modifyTime}} />
   {{/if}}
-  {{#if this.allocation.hasStoppedRescheduling}}
+  {{#if @allocation.hasStoppedRescheduling}}
     <li class="timeline-note" data-test-stop-warning>
       {{x-icon "warning" class="is-warning is-text"}} Nomad has stopped attempting to reschedule this allocation.
     </li>
   {{/if}}
-  {{#if (and this.allocation.followUpEvaluation.waitUntil (not this.allocation.nextAllocation))}}
+  {{#if (and @allocation.followUpEvaluation.waitUntil (not @allocation.nextAllocation))}}
     <li class="timeline-note" data-test-attempt-notice>
       {{x-icon "clock" class="is-info is-text"}} Nomad will attempt to reschedule
-      <span class="tooltip" aria-label="{{format-ts this.allocation.followUpEvaluation.waitUntil}}">
-        {{moment-from-now this.allocation.followUpEvaluation.waitUntil interval=1000}}
+      <span class="tooltip" aria-label="{{format-ts @allocation.followUpEvaluation.waitUntil}}">
+        {{moment-from-now @allocation.followUpEvaluation.waitUntil interval=1000}}
       </span>
     </li>
   {{/if}}
   <RescheduleEventRow
-    @allocation={{this.allocation}}
+    @allocation={{@allocation}}
     @linkToAllocation={{false}}
-    @time={{this.allocation.modifyTime}} />
+    @time={{@allocation.modifyTime}} />
 
-  {{#each (reverse this.allocation.rescheduleEvents) as |event|}}
+  {{#each (reverse @allocation.rescheduleEvents) as |event|}}
     <RescheduleEventRow
       @allocationId={{event.previousAllocationId}}
       @time={{event.time}} />
diff --git a/ui/config/optional-features.json b/ui/config/optional-features.json
index 015413b19969..b26286e2ecdf 100644
--- a/ui/config/optional-features.json
+++ b/ui/config/optional-features.json
@@ -2,5 +2,5 @@
   "application-template-wrapper": false,
   "default-async-observers": true,
   "jquery-integration": false,
-  "template-only-glimmer-components": false
+  "template-only-glimmer-components": true
 }
diff --git a/ui/package.json b/ui/package.json
index 0bba44caf56f..4e66569999f4 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -136,6 +136,9 @@
   "engines": {
     "node": "10.* || >= 12"
   },
+  "ember": {
+    "edition": "octane"
+  },
   "private": true,
   "ember-addon": {
     "paths": [
diff --git a/ui/stories/components/table-configuration.stories.js b/ui/stories/components/table-configuration.stories.js
index 005f4ec138c3..bb943a8446ad 100644
--- a/ui/stories/components/table-configuration.stories.js
+++ b/ui/stories/components/table-configuration.stories.js
@@ -8,7 +8,7 @@ export let TableConfiguration = () => {
   return {
     template: hbs`
       <h5 class="title is-5">Table, configuration</h5>
-      <AttributesTable @attributes={{attributes}} @class="attributes-table" />
+      <AttributesTable @attributePairs={{attributes}} @class="attributes-table" />
       `,
     context: {
       attributes: {
diff --git a/ui/tests/integration/attributes-table-test.js b/ui/tests/integration/attributes-table-test.js
index 5690473c3225..c129e6143340 100644
--- a/ui/tests/integration/attributes-table-test.js
+++ b/ui/tests/integration/attributes-table-test.js
@@ -28,7 +28,7 @@ module('Integration | Component | attributes table', function(hooks) {
 
   test('should render a row for each key/value pair in a deep object', async function(assert) {
     this.set('attributes', commonAttributes);
-    await render(hbs`<AttributesTable @attributes={{attributes}} />`);
+    await render(hbs`<AttributesTable @attributePairs={{attributes}} />`);
 
     const rowsCount = Object.keys(flatten(commonAttributes)).length;
     assert.equal(
@@ -40,7 +40,7 @@ module('Integration | Component | attributes table', function(hooks) {
 
   test('should render the full path of key/value pair from the root of the object', async function(assert) {
     this.set('attributes', commonAttributes);
-    await render(hbs`<AttributesTable @attributes={{attributes}} />`);
+    await render(hbs`<AttributesTable @attributePairs={{attributes}} />`);
 
     assert.equal(find('[data-test-key]').textContent.trim(), 'key', 'Row renders the key');
     assert.equal(find('[data-test-value]').textContent.trim(), 'value', 'Row renders the value');
@@ -61,7 +61,7 @@ module('Integration | Component | attributes table', function(hooks) {
 
   test('should render a row for key/value pairs even when the value is another object', async function(assert) {
     this.set('attributes', commonAttributes);
-    await render(hbs`<AttributesTable @attributes={{attributes}} />`);
+    await render(hbs`<AttributesTable @attributePairs={{attributes}} />`);
 
     const countOfParentRows = countOfParentKeys(commonAttributes);
     assert.equal(