diff --git a/ui/app/models/task-group.js b/ui/app/models/task-group.js
index 8db1771f06c..7cab8d4ce11 100644
--- a/ui/app/models/task-group.js
+++ b/ui/app/models/task-group.js
@@ -62,7 +62,7 @@ export default class TaskGroup extends Fragment {
 
   @fragment('group-scaling') scaling;
 
-  @attr() meta;
+  @fragment('structured-attributes') meta;
 
   @computed('job.meta.raw', 'meta')
   get mergedMeta() {
diff --git a/ui/app/models/task.js b/ui/app/models/task.js
index d5dd382327e..4a71fe842ff 100644
--- a/ui/app/models/task.js
+++ b/ui/app/models/task.js
@@ -21,7 +21,7 @@ export default class Task extends Fragment {
   @fragmentArray('action', { defaultValue: () => [] })
   actions;
 
-  @attr() meta;
+  @fragment('structured-attributes') meta;
 
   @fragment('task-schedule') schedule;
 
diff --git a/ui/app/templates/allocations/allocation/task/index.hbs b/ui/app/templates/allocations/allocation/task/index.hbs
index 3942021b0a9..5ea113d36e3 100644
--- a/ui/app/templates/allocations/allocation/task/index.hbs
+++ b/ui/app/templates/allocations/allocation/task/index.hbs
@@ -287,4 +287,9 @@
       </ListTable>
     </div>
   </div>
+  {{#if this.model.meta}}
+    <JobPage::Parts::Meta
+      @meta={{this.model.meta}}
+    />
+  {{/if}}
 </section>
diff --git a/ui/app/templates/components/job-page.hbs b/ui/app/templates/components/job-page.hbs
index 44f62cfbec7..996386b63fb 100644
--- a/ui/app/templates/components/job-page.hbs
+++ b/ui/app/templates/components/job-page.hbs
@@ -22,7 +22,7 @@
       PlacementFailures=(component "job-page/parts/placement-failures" job=@job)
       TaskGroups=(component "job-page/parts/task-groups" job=@job)
       RecentAllocations=(component "job-page/parts/recent-allocations" job=@job activeTask=@activeTask setActiveTaskQueryParam=@setActiveTaskQueryParam)
-      Meta=(component "job-page/parts/meta" job=@job)
+      Meta=(component "job-page/parts/meta" meta=@job.meta)
       DasRecommendations=(component
         "job-page/parts/das-recommendations" job=@job
       )
@@ -35,4 +35,4 @@
 
     )
   )
-}}
\ No newline at end of file
+}}
diff --git a/ui/app/templates/components/job-page/parts/meta.hbs b/ui/app/templates/components/job-page/parts/meta.hbs
index 27b67ca5850..120fec48491 100644
--- a/ui/app/templates/components/job-page/parts/meta.hbs
+++ b/ui/app/templates/components/job-page/parts/meta.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-{{#if @job.meta.structured}}
+{{!-- {{#if @job.meta.structured}}
   <div class="boxed-section">
     <div class="boxed-section-head">
       Meta
@@ -15,4 +15,19 @@
         @class="attributes-table" />
     </div>
   </div>
+{{/if}} --}}
+
+
+{{#if @meta.structured}}
+  <div class="boxed-section">
+    <div class="boxed-section-head">
+      Meta
+    </div>
+    <div class="boxed-section-body is-full-bleed">
+      <AttributesTable
+        data-test-meta
+        @attributePairs={{@meta.structured.root}}
+        @class="attributes-table" />
+    </div>
+  </div>
 {{/if}}
diff --git a/ui/app/templates/jobs/job/task-group.hbs b/ui/app/templates/jobs/job/task-group.hbs
index ebd0eb386ac..88fdb6e226c 100644
--- a/ui/app/templates/jobs/job/task-group.hbs
+++ b/ui/app/templates/jobs/job/task-group.hbs
@@ -220,7 +220,7 @@
             </t.head>
             <t.body @key="model.id" as |row|>
               <AllocationRow
-                {{keyboard-shortcut 
+                {{keyboard-shortcut
                   enumerated=true
                   action=(action "gotoAllocation" row.model)
                 }}
@@ -360,4 +360,10 @@
       </div>
     </div>
   {{/if}}
+
+  {{#if this.model.meta}}
+    <JobPage::Parts::Meta
+      @meta={{this.model.meta}}
+    />
+  {{/if}}
 </section>
diff --git a/ui/tests/acceptance/task-group-detail-test.js b/ui/tests/acceptance/task-group-detail-test.js
index 694c286dca5..c42e36c95ee 100644
--- a/ui/tests/acceptance/task-group-detail-test.js
+++ b/ui/tests/acceptance/task-group-detail-test.js
@@ -453,6 +453,12 @@ module('Acceptance | task group detail', function (hooks) {
     assert.notOk(TaskGroup.hasVolumes);
   });
 
+  test('when the task group has metadata, the metadata table is shown', async function (assert) {
+    await TaskGroup.visit({ id: job.id, name: taskGroup.name });
+
+    assert.ok(TaskGroup.hasMeta);
+  });
+
   test('each row in the volumes table lists information about the volume', async function (assert) {
     await TaskGroup.visit({ id: job.id, name: taskGroup.name });