diff --git a/ui/app/components/job-page/abstract.js b/ui/app/components/job-page/abstract.js
index ecd0cc2b2..e9ea804a4 100644
--- a/ui/app/components/job-page/abstract.js
+++ b/ui/app/components/job-page/abstract.js
@@ -11,6 +11,7 @@ export default Component.extend({
   // Provide actions that require routing
   onNamespaceChange() {},
   gotoTaskGroup() {},
+  gotoJob() {},
 
   breadcrumbs: computed('job.{name,id}', function() {
     const job = this.get('job');
diff --git a/ui/app/components/job-page/batch.js b/ui/app/components/job-page/batch.js
new file mode 100644
index 000000000..559b3c8b8
--- /dev/null
+++ b/ui/app/components/job-page/batch.js
@@ -0,0 +1,3 @@
+import AbstractJobPage from './abstract';
+
+export default AbstractJobPage.extend();
diff --git a/ui/app/components/job-page/parameterized-child.js b/ui/app/components/job-page/parameterized-child.js
new file mode 100644
index 000000000..559b3c8b8
--- /dev/null
+++ b/ui/app/components/job-page/parameterized-child.js
@@ -0,0 +1,3 @@
+import AbstractJobPage from './abstract';
+
+export default AbstractJobPage.extend();
diff --git a/ui/app/components/job-page/parameterized.js b/ui/app/components/job-page/parameterized.js
new file mode 100644
index 000000000..559b3c8b8
--- /dev/null
+++ b/ui/app/components/job-page/parameterized.js
@@ -0,0 +1,3 @@
+import AbstractJobPage from './abstract';
+
+export default AbstractJobPage.extend();
diff --git a/ui/app/components/job-page/parts/children.js b/ui/app/components/job-page/parts/children.js
new file mode 100644
index 000000000..30772cd0a
--- /dev/null
+++ b/ui/app/components/job-page/parts/children.js
@@ -0,0 +1,31 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { alias } from '@ember/object/computed';
+import Sortable from 'nomad-ui/mixins/sortable';
+
+export default Component.extend(Sortable, {
+  job: null,
+
+  classNames: ['boxed-section'],
+
+  // Provide a value that is bound to a query param
+  sortProperty: null,
+  sortDescending: null,
+  currentPage: null,
+
+  // Provide an action with access to the router
+  gotoJob() {},
+
+  pageSize: 10,
+
+  taskGroups: computed('job.taskGroups.[]', function() {
+    return this.get('job.taskGroups') || [];
+  }),
+
+  children: computed('job.children.[]', function() {
+    return this.get('job.children') || [];
+  }),
+
+  listToSort: alias('children'),
+  sortedChildren: alias('listSorted'),
+});
diff --git a/ui/app/components/job-page/parts/task-groups.js b/ui/app/components/job-page/parts/task-groups.js
index a1829c33b..f5ce33757 100644
--- a/ui/app/components/job-page/parts/task-groups.js
+++ b/ui/app/components/job-page/parts/task-groups.js
@@ -12,6 +12,7 @@ export default Component.extend(Sortable, {
   sortProperty: null,
   sortDescending: null,
 
+  // Provide an action with access to the router
   gotoTaskGroup() {},
 
   taskGroups: computed('job.taskGroups.[]', function() {
diff --git a/ui/app/components/job-page/periodic-child.js b/ui/app/components/job-page/periodic-child.js
new file mode 100644
index 000000000..559b3c8b8
--- /dev/null
+++ b/ui/app/components/job-page/periodic-child.js
@@ -0,0 +1,3 @@
+import AbstractJobPage from './abstract';
+
+export default AbstractJobPage.extend();
diff --git a/ui/app/components/job-page/periodic.js b/ui/app/components/job-page/periodic.js
new file mode 100644
index 000000000..559b3c8b8
--- /dev/null
+++ b/ui/app/components/job-page/periodic.js
@@ -0,0 +1,3 @@
+import AbstractJobPage from './abstract';
+
+export default AbstractJobPage.extend();
diff --git a/ui/app/controllers/jobs/job/index.js b/ui/app/controllers/jobs/job/index.js
index 97b97efb5..c5cb709a9 100644
--- a/ui/app/controllers/jobs/job/index.js
+++ b/ui/app/controllers/jobs/job/index.js
@@ -1,11 +1,9 @@
 import { inject as service } from '@ember/service';
 import { alias } from '@ember/object/computed';
 import Controller, { inject as controller } from '@ember/controller';
-import { computed } from '@ember/object';
-import Sortable from 'nomad-ui/mixins/sortable';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 
-export default Controller.extend(Sortable, WithNamespaceResetting, {
+export default Controller.extend(WithNamespaceResetting, {
   system: service(),
   jobController: controller('jobs.job'),
 
@@ -16,7 +14,6 @@ export default Controller.extend(Sortable, WithNamespaceResetting, {
   },
 
   currentPage: 1,
-  pageSize: 10,
 
   sortProperty: 'name',
   sortDescending: false,
@@ -24,20 +21,15 @@ export default Controller.extend(Sortable, WithNamespaceResetting, {
   breadcrumbs: alias('jobController.breadcrumbs'),
   job: alias('model'),
 
-  taskGroups: computed('model.taskGroups.[]', function() {
-    return this.get('model.taskGroups') || [];
-  }),
-
-  listToSort: alias('taskGroups'),
-  sortedTaskGroups: alias('listSorted'),
-
-  sortedEvaluations: computed('model.evaluations.@each.modifyIndex', function() {
-    return (this.get('model.evaluations') || []).sortBy('modifyIndex').reverse();
-  }),
-
   actions: {
     gotoTaskGroup(taskGroup) {
       this.transitionToRoute('jobs.job.task-group', taskGroup.get('job'), taskGroup);
     },
+
+    gotoJob(job) {
+      this.transitionToRoute('jobs.job', job, {
+        queryParams: { jobNamespace: job.get('namespace.name') },
+      });
+    },
   },
 });
diff --git a/ui/app/templates/jobs/job/index.hbs b/ui/app/templates/jobs/job/index.hbs
index bc2e6b7ce..7d81851b2 100644
--- a/ui/app/templates/jobs/job/index.hbs
+++ b/ui/app/templates/jobs/job/index.hbs
@@ -1,162 +1,8 @@
-{{#global-header class="page-header"}}
-  {{#each breadcrumbs as |breadcrumb index|}}
-    <li class="{{if (eq (inc index) breadcrumbs.length) "is-active"}}">
-      {{#link-to data-test-breadcrumb=breadcrumb.label params=breadcrumb.args}}{{breadcrumb.label}}{{/link-to}}
-    </li>
-  {{/each}}
-{{/global-header}}
-{{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}}
-  {{partial "jobs/job/subnav"}}
-  <section class="section">
-    <h1 class="title">
-      {{model.name}}
-      <span class="bumper-left tag {{model.statusClass}}" data-test-job-status>{{model.status}}</span>
-      {{#if model.periodic}}
-        <span class="tag is-hollow">periodic</span>
-      {{else if model.parameterized}}
-        <span class="tag is-hollow">parameterized</span>
-      {{/if}}
-    </h1>
-
-    <div class="boxed-section job-stats">
-      <div class="boxed-section-body">
-        <span data-test-job-stat="type"><strong>Type:</strong> {{model.type}} | </span>
-        <span data-test-job-stat="priority"><strong>Priority:</strong> {{model.priority}} </span>
-        {{#if (and model.namespace system.shouldShowNamespaces)}}
-          <span data-test-job-stat="namespace"> | <strong>Namespace:</strong> {{model.namespace.name}}</span>
-        {{/if}}
-      </div>
-    </div>
-
-    <div class="boxed-section">
-      <div class="boxed-section-head">
-        <div>Allocation Status <span class="badge is-white">{{taskGroups.length}}</span></div>
-      </div>
-      <div class="boxed-section-body">
-        {{#allocation-status-bar allocationContainer=model class="split-view" as |chart|}}
-          <ol data-test-allocations-legend class="legend">
-            {{#each chart.data as |datum index|}}
-              <li class="{{datum.className}} {{if (eq datum.index chart.activeDatum.index) "is-active"}} {{if (eq datum.value 0) "is-empty"}}">
-                <span class="color-swatch {{if datum.className datum.className (concat "swatch-" index)}}" />
-                <span class="value" data-test-legend-value="{{datum.className}}">{{datum.value}}</span>
-                <span class="label">
-                  {{datum.label}}
-                </span>
-              </li>
-            {{/each}}
-          </ol>
-        {{/allocation-status-bar}}
-      </div>
-    </div>
-
-    {{#if model.hasPlacementFailures}}
-      <div class="boxed-section is-danger" data-test-placement-failures>
-        <div class="boxed-section-head">
-          Placement Failures
-        </div>
-        <div class="boxed-section-body">
-          {{#each model.taskGroups as |taskGroup|}}
-            {{placement-failure taskGroup=taskGroup}}
-          {{/each}}
-        </div>
-      </div>
-    {{/if}}
-
-    {{#if model.runningDeployment}}
-      <div class="boxed-section is-info" data-test-active-deployment>
-        <div class="boxed-section-head">
-          <div class="boxed-section-row">
-            Active Deployment
-            <span class="badge is-white is-subtle bumper-left" data-test-active-deployment-stat="id">{{model.runningDeployment.shortId}}</span>
-            {{#if model.runningDeployment.version.submitTime}}
-              <span class="pull-right submit-time" data-test-active-deployment-stat="submit-time">{{moment-from-now model.runningDeployment.version.submitTime}}</span>
-            {{/if}}
-          </div>
-          <div class="boxed-section-row">
-            <span class="tag is-info is-outlined">Running</span>
-            {{#if model.runningDeployment.requiresPromotion}}
-              <span class="tag bumper-left is-warning no-text-transform">Deployment is running but requires promotion</span>
-            {{/if}}
-          </div>
-        </div>
-        <div class="boxed-section-body with-foot">
-          {{#job-deployment-details deployment=model.runningDeployment as |d|}}
-            {{d.metrics}}
-            {{#if isShowingDeploymentDetails}}
-              {{d.taskGroups}}
-              {{d.allocations}}
-            {{/if}}
-          {{/job-deployment-details}}
-        </div>
-        <div class="boxed-section-foot">
-          <a class="pull-right" {{action (toggle "isShowingDeploymentDetails" this)}} data-test-deployment-toggle-details>
-            {{if isShowingDeploymentDetails "Hide" "Show"}} deployment task groups and allocations
-          </a>
-        </div>
-      </div>
-    {{/if}}
-
-    <div class="boxed-section">
-      <div class="boxed-section-head">
-        Task Groups
-      </div>
-      <div class="boxed-section-body is-full-bleed">
-        {{#list-pagination
-          source=sortedTaskGroups
-          sortProperty=sortProperty
-          sortDescending=sortDescending as |p|}}
-          {{#list-table
-            source=p.list
-            sortProperty=sortProperty
-            sortDescending=sortDescending as |t|}}
-            {{#t.head}}
-              {{#t.sort-by prop="name"}}Name{{/t.sort-by}}
-              {{#t.sort-by prop="count"}}Count{{/t.sort-by}}
-              {{#t.sort-by prop="queuedOrStartingAllocs" class="is-3"}}Allocation Status{{/t.sort-by}}
-              {{#t.sort-by prop="reservedCPU"}}Reserved CPU{{/t.sort-by}}
-              {{#t.sort-by prop="reservedMemory"}}Reserved Memory{{/t.sort-by}}
-              {{#t.sort-by prop="reservedEphemeralDisk"}}Reserved Disk{{/t.sort-by}}
-            {{/t.head}}
-            {{#t.body as |row|}}
-              {{task-group-row data-test-task-group taskGroup=row.model onClick=(action "gotoTaskGroup" row.model)}}
-            {{/t.body}}
-          {{/list-table}}
-        {{/list-pagination}}
-      </div>
-    </div>
-
-    <div class="boxed-section">
-      <div class="boxed-section-head">
-        Evaluations
-      </div>
-      <div class="boxed-section-body is-full-bleed evaluations">
-        {{#list-table source=sortedEvaluations as |t|}}
-          {{#t.head}}
-            <th>ID</th>
-            <th>Priority</th>
-            <th>Triggered By</th>
-            <th>Status</th>
-            <th>Placement Failures</th>
-          {{/t.head}}
-          {{#t.body as |row|}}
-            <tr data-test-evaluation="{{row.model.shortId}}">
-              <td data-test-id>{{row.model.shortId}}</td>
-              <td data-test-priority>{{row.model.priority}}</td>
-              <td data-test-triggered-by>{{row.model.triggeredBy}}</td>
-              <td data-test-status>{{row.model.status}}</td>
-              <td data-test-blocked>
-                {{#if (eq row.model.status "blocked")}}
-                  N/A - In Progress
-                {{else if row.model.hasPlacementFailures}}
-                  True
-                {{else}}
-                  False
-                {{/if}}
-              </td>
-            </tr>
-          {{/t.body}}
-        {{/list-table}}
-      </div>
-    </div>
-  </section>
-{{/gutter-menu}}
+{{component (concat "job-page/" model.templateType)
+  job=model
+  sortProperty=sortProperty
+  sortDescending=sortDescending
+  currentPage=currentPage
+  onNamespaceChange=(action "gotoJobs")
+  gotoJob=(action "gotoJob")
+  gotoTaskGroup=(action "gotoTaskGroup")}}