diff --git a/ui/app/components/forbidden-message.js b/ui/app/components/forbidden-message.js
index 0334535df6a9..f9d0a2cf90a5 100644
--- a/ui/app/components/forbidden-message.js
+++ b/ui/app/components/forbidden-message.js
@@ -1,5 +1,8 @@
 import Component from '@ember/component';
 import { tagName } from '@ember-decorators/component';
+import { inject as service } from '@ember/service';
 
 @tagName('')
-export default class ForbiddenMessage extends Component {}
+export default class ForbiddenMessage extends Component {
+  @service token;
+}
diff --git a/ui/app/components/hamburger-menu.js b/ui/app/components/hamburger-menu.js
new file mode 100644
index 000000000000..133c7241b3e1
--- /dev/null
+++ b/ui/app/components/hamburger-menu.js
@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import { tagName } from '@ember-decorators/component';
+
+@tagName('')
+export default class HamburgerMenu extends Component {
+}
diff --git a/ui/app/components/job-subnav.js b/ui/app/components/job-subnav.js
new file mode 100644
index 000000000000..5e180f67b770
--- /dev/null
+++ b/ui/app/components/job-subnav.js
@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import { tagName } from '@ember-decorators/component';
+
+@tagName('')
+export default class JobSubnav extends Component {
+}
diff --git a/ui/app/components/loading-spinner.js b/ui/app/components/loading-spinner.js
new file mode 100644
index 000000000000..f1f1f8734bbe
--- /dev/null
+++ b/ui/app/components/loading-spinner.js
@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import { tagName } from '@ember-decorators/component';
+
+@tagName('')
+export default class LoadingSpinner extends Component {
+}
diff --git a/ui/app/components/stats-time-series.js b/ui/app/components/stats-time-series.js
index 0bce656165e1..58b9643d545b 100644
--- a/ui/app/components/stats-time-series.js
+++ b/ui/app/components/stats-time-series.js
@@ -5,11 +5,14 @@ import d3Format from 'd3-format';
 import d3Scale from 'd3-scale';
 import d3Array from 'd3-array';
 import LineChart from 'nomad-ui/components/line-chart';
+import layout from '../templates/components/line-chart';
 import formatDuration from 'nomad-ui/utils/format-duration';
 import classic from 'ember-classic-decorator';
 
 @classic
 export default class StatsTimeSeries extends LineChart {
+  layout = layout;
+
   xProp = 'timestamp';
   yProp = 'percent';
   timeseries = true;
diff --git a/ui/app/components/svg-patterns.js b/ui/app/components/svg-patterns.js
new file mode 100644
index 000000000000..0e97ba0b77f5
--- /dev/null
+++ b/ui/app/components/svg-patterns.js
@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+import { tagName } from '@ember-decorators/component';
+
+@tagName('')
+export default class SvgPatterns extends Component {
+}
diff --git a/ui/app/templates/application.hbs b/ui/app/templates/application.hbs
index 46da1ce78ef1..c2ed3ae814a2 100644
--- a/ui/app/templates/application.hbs
+++ b/ui/app/templates/application.hbs
@@ -1,6 +1,6 @@
 <HeadLayout />
 {{title (if system.shouldShowRegions (concat system.activeRegion " - ")) "Nomad" separator=" - "}}
-{{partial "svg-patterns"}}
+<SvgPatterns />
 {{#unless error}}
   {{outlet}}
 {{else}}
diff --git a/ui/app/templates/clients/index.hbs b/ui/app/templates/clients/index.hbs
index 7c58f73cac51..1fb413a4be13 100644
--- a/ui/app/templates/clients/index.hbs
+++ b/ui/app/templates/clients/index.hbs
@@ -1,7 +1,7 @@
 {{title "Clients"}}
 <section class="section">
   {{#if isForbidden}}
-    {{partial "partials/forbidden-message"}}
+    <ForbiddenMessage />
   {{else}}
     <div class="toolbar">
       <div class="toolbar-item">
diff --git a/ui/app/templates/clients/loading.hbs b/ui/app/templates/clients/loading.hbs
index ae06c3078ee9..1b60ae2223ed 100644
--- a/ui/app/templates/clients/loading.hbs
+++ b/ui/app/templates/clients/loading.hbs
@@ -1 +1 @@
-<section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
+<section class="section has-text-centered"><LoadingSpinner /></section>
diff --git a/ui/app/templates/components/global-header.hbs b/ui/app/templates/components/global-header.hbs
index e129a42c3212..7f7c2e4f71ac 100644
--- a/ui/app/templates/components/global-header.hbs
+++ b/ui/app/templates/components/global-header.hbs
@@ -1,10 +1,10 @@
 <nav class="navbar is-primary">
   <div class="navbar-brand">
     <span data-test-header-gutter-toggle class="gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
-      {{partial "partials/hamburger-menu"}}
+      <HamburgerMenu />
     </span>
     <LinkTo @route="jobs" class="navbar-item is-logo">
-      {{partial "partials/nomad-logo"}}
+      <NomadLogo />
     </LinkTo>
   </div>
   {{#unless (media "isMobile")}}
diff --git a/ui/app/templates/components/gutter-menu.hbs b/ui/app/templates/components/gutter-menu.hbs
index 37b78f715a58..959ff6b82e8a 100644
--- a/ui/app/templates/components/gutter-menu.hbs
+++ b/ui/app/templates/components/gutter-menu.hbs
@@ -2,10 +2,10 @@
   <div class="gutter {{if isOpen "is-open"}}">
     <header class="collapsed-menu {{if isOpen "is-open"}}">
       <span data-test-gutter-gutter-toggle class="gutter-toggle" aria-label="menu" onclick={{action onHamburgerClick}}>
-        {{partial "partials/hamburger-menu"}}
+        <HamburgerMenu />
       </span>
       <span class="logo-container">
-        {{partial "partials/nomad-logo"}}
+        <NomadLogo />
       </span>
     </header>
     <aside class="menu">
diff --git a/ui/app/templates/partials/hamburger-menu.hbs b/ui/app/templates/components/hamburger-menu.hbs
similarity index 100%
rename from ui/app/templates/partials/hamburger-menu.hbs
rename to ui/app/templates/components/hamburger-menu.hbs
diff --git a/ui/app/templates/components/job-page/parts/body.hbs b/ui/app/templates/components/job-page/parts/body.hbs
index 4a2b8f89f499..a47d0f49d3fe 100644
--- a/ui/app/templates/components/job-page/parts/body.hbs
+++ b/ui/app/templates/components/job-page/parts/body.hbs
@@ -1,4 +1,4 @@
-{{partial "jobs/job/subnav"}}
+<JobSubnav @job={{@job}} />
 <section class="section">
   {{yield}}
 </section>
diff --git a/ui/app/templates/jobs/job/subnav.hbs b/ui/app/templates/components/job-subnav.hbs
similarity index 53%
rename from ui/app/templates/jobs/job/subnav.hbs
rename to ui/app/templates/components/job-subnav.hbs
index b5c2b6761dbd..0fd390e4a3c4 100644
--- a/ui/app/templates/jobs/job/subnav.hbs
+++ b/ui/app/templates/components/job-subnav.hbs
@@ -1,12 +1,12 @@
 <div data-test-subnav="job" class="tabs is-subnav">
   <ul>
-    <li data-test-tab="overview"><LinkTo @route="jobs.job.index" @model={{job}} @activeClass="is-active">Overview</LinkTo></li>
-    <li data-test-tab="definition"><LinkTo @route="jobs.job.definition" @model={{job}} @activeClass="is-active">Definition</LinkTo></li>
-    <li data-test-tab="versions"><LinkTo @route="jobs.job.versions" @model={{job}} @activeClass="is-active">Versions</LinkTo></li>
+    <li data-test-tab="overview"><LinkTo @route="jobs.job.index" @model={{@job}} @activeClass="is-active">Overview</LinkTo></li>
+    <li data-test-tab="definition"><LinkTo @route="jobs.job.definition" @model={{@job}} @activeClass="is-active">Definition</LinkTo></li>
+    <li data-test-tab="versions"><LinkTo @route="jobs.job.versions" @model={{@job}} @activeClass="is-active">Versions</LinkTo></li>
     {{#if job.supportsDeployments}}
-      <li data-test-tab="deployments"><LinkTo @route="jobs.job.deployments" @model={{job}} @activeClass="is-active">Deployments</LinkTo></li>
+      <li data-test-tab="deployments"><LinkTo @route="jobs.job.deployments" @model={{@job}} @activeClass="is-active">Deployments</LinkTo></li>
     {{/if}}
-    <li data-test-tab="allocations"><LinkTo @route="jobs.job.allocations" @model={{job}} @activeClass="is-active">Allocations</LinkTo></li>
-    <li data-test-tab="evaluations"><LinkTo @route="jobs.job.evaluations" @model={{job}} @activeClass="is-active">Evaluations</LinkTo></li>
+    <li data-test-tab="allocations"><LinkTo @route="jobs.job.allocations" @model={{@job}} @activeClass="is-active">Allocations</LinkTo></li>
+    <li data-test-tab="evaluations"><LinkTo @route="jobs.job.evaluations" @model={{@job}} @activeClass="is-active">Evaluations</LinkTo></li>
   </ul>
 </div>
diff --git a/ui/app/templates/partials/loading-spinner.hbs b/ui/app/templates/components/loading-spinner.hbs
similarity index 100%
rename from ui/app/templates/partials/loading-spinner.hbs
rename to ui/app/templates/components/loading-spinner.hbs
diff --git a/ui/app/templates/partials/nomad-logo.hbs b/ui/app/templates/components/nomad-logo.hbs
similarity index 100%
rename from ui/app/templates/partials/nomad-logo.hbs
rename to ui/app/templates/components/nomad-logo.hbs
diff --git a/ui/app/templates/components/stats-time-series.hbs b/ui/app/templates/components/stats-time-series.hbs
deleted file mode 100644
index 494fc7ebf007..000000000000
--- a/ui/app/templates/components/stats-time-series.hbs
+++ /dev/null
@@ -1 +0,0 @@
-{{partial "components/line-chart"}}
diff --git a/ui/app/templates/csi/plugins/index.hbs b/ui/app/templates/csi/plugins/index.hbs
index a50cca38d5ca..174b19419603 100644
--- a/ui/app/templates/csi/plugins/index.hbs
+++ b/ui/app/templates/csi/plugins/index.hbs
@@ -7,7 +7,7 @@
 </div>
 <section class="section">
   {{#if isForbidden}}
-    {{partial "partials/forbidden-message"}}
+    <ForbiddenMessage />
   {{else}}
     <div class="toolbar">
       <div class="toolbar-item">
diff --git a/ui/app/templates/csi/volumes/index.hbs b/ui/app/templates/csi/volumes/index.hbs
index 528d02de0ed2..17b259de4c5c 100644
--- a/ui/app/templates/csi/volumes/index.hbs
+++ b/ui/app/templates/csi/volumes/index.hbs
@@ -7,7 +7,7 @@
 </div>
 <section class="section">
   {{#if isForbidden}}
-    {{partial "partials/forbidden-message"}}
+    <ForbiddenMessage />
   {{else}}
     <div class="toolbar">
       <div class="toolbar-item">
diff --git a/ui/app/templates/exec-loading.hbs b/ui/app/templates/exec-loading.hbs
index 1304be4e807f..ecea678564c2 100644
--- a/ui/app/templates/exec-loading.hbs
+++ b/ui/app/templates/exec-loading.hbs
@@ -2,7 +2,7 @@
 <nav class="navbar is-popup">
   <div class="navbar-brand">
     <div class="navbar-item is-logo">
-      {{partial "partials/nomad-logo"}}
+      <NomadLogo />
     </div>
   </div>
 
@@ -13,5 +13,5 @@
 </nav>
 
 <div class="exec-window loading">
-  {{partial "partials/loading-spinner"}}
+  <LoadingSpinner />
 </div>
\ No newline at end of file
diff --git a/ui/app/templates/exec.hbs b/ui/app/templates/exec.hbs
index 8d853b487d9f..9b5b853298c8 100644
--- a/ui/app/templates/exec.hbs
+++ b/ui/app/templates/exec.hbs
@@ -2,7 +2,7 @@
 <nav class="navbar is-popup">
   <div class="navbar-brand">
     <div class="navbar-item is-logo">
-      {{partial "partials/nomad-logo"}}
+      <NomadLogo />
     </div>
   </div>
     {{#if system.shouldShowRegions}}
diff --git a/ui/app/templates/jobs/index.hbs b/ui/app/templates/jobs/index.hbs
index a5e76785eabe..6b8d966533d5 100644
--- a/ui/app/templates/jobs/index.hbs
+++ b/ui/app/templates/jobs/index.hbs
@@ -1,7 +1,7 @@
 {{title "Jobs"}}
 <section class="section">
   {{#if isForbidden}}
-    {{partial "partials/forbidden-message"}}
+    <ForbiddenMessage />
   {{else}}
     <div class="toolbar">
       <div class="toolbar-item">
diff --git a/ui/app/templates/jobs/job/allocations.hbs b/ui/app/templates/jobs/job/allocations.hbs
index 2f20508089c5..d49d3678e377 100644
--- a/ui/app/templates/jobs/job/allocations.hbs
+++ b/ui/app/templates/jobs/job/allocations.hbs
@@ -1,5 +1,5 @@
 {{title "Job " job.name " allocations"}}
-{{partial "jobs/job/subnav"}}
+<JobSubnav @job={{job}} />
 <section class="section">
   {{#if allocations.length}}
     <div class="content">
diff --git a/ui/app/templates/jobs/job/definition.hbs b/ui/app/templates/jobs/job/definition.hbs
index 1ad50bfaaacc..747f96137393 100644
--- a/ui/app/templates/jobs/job/definition.hbs
+++ b/ui/app/templates/jobs/job/definition.hbs
@@ -1,5 +1,5 @@
 {{title "Job " job.name " definition"}}
-{{partial "jobs/job/subnav"}}
+<JobSubnav @job={{job}} />
 <section class="section">
   {{#unless isEditing}}
     <div class="boxed-section">
diff --git a/ui/app/templates/jobs/job/deployments.hbs b/ui/app/templates/jobs/job/deployments.hbs
index eb0739a1f8da..f5c78332ba13 100644
--- a/ui/app/templates/jobs/job/deployments.hbs
+++ b/ui/app/templates/jobs/job/deployments.hbs
@@ -1,5 +1,5 @@
 {{title "Job " job.name " deployments"}}
-{{partial "jobs/job/subnav"}}
+<JobSubnav @job={{job}} />
 <section class="section">
   <JobDeploymentsStream @deployments={{model.deployments}} />
 </section>
diff --git a/ui/app/templates/jobs/job/evaluations.hbs b/ui/app/templates/jobs/job/evaluations.hbs
index 863af33497da..704985b63f4a 100644
--- a/ui/app/templates/jobs/job/evaluations.hbs
+++ b/ui/app/templates/jobs/job/evaluations.hbs
@@ -1,5 +1,5 @@
 {{title "Job " job.name " evaluations"}}
-{{partial "jobs/job/subnav"}}
+<JobSubnav @job={{job}} />
 <section class="section">
   {{#if sortedEvaluations.length}}
     <ListTable
diff --git a/ui/app/templates/jobs/job/loading.hbs b/ui/app/templates/jobs/job/loading.hbs
index 911d511739dc..cb2c34b85225 100644
--- a/ui/app/templates/jobs/job/loading.hbs
+++ b/ui/app/templates/jobs/job/loading.hbs
@@ -1,2 +1,2 @@
-{{partial "jobs/job/subnav"}}
-<section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
+<JobSubnav @job={{job}} />
+<section class="section has-text-centered"><LoadingSpinner /></section>
diff --git a/ui/app/templates/jobs/job/versions.hbs b/ui/app/templates/jobs/job/versions.hbs
index c28dc43be07b..55f187555ecc 100644
--- a/ui/app/templates/jobs/job/versions.hbs
+++ b/ui/app/templates/jobs/job/versions.hbs
@@ -1,5 +1,5 @@
 {{title "Job " job.name " versions"}}
-{{partial "jobs/job/subnav"}}
+<JobSubnav @job={{job}} />
 <section class="section">
   <JobVersionsStream @versions={{model.versions}} @verbose={{true}} />
 </section>
diff --git a/ui/app/templates/jobs/loading.hbs b/ui/app/templates/jobs/loading.hbs
index ae06c3078ee9..1b60ae2223ed 100644
--- a/ui/app/templates/jobs/loading.hbs
+++ b/ui/app/templates/jobs/loading.hbs
@@ -1 +1 @@
-<section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
+<section class="section has-text-centered"><LoadingSpinner /></section>
diff --git a/ui/app/templates/loading.hbs b/ui/app/templates/loading.hbs
index 78d3b07d9a0c..c70be1061705 100644
--- a/ui/app/templates/loading.hbs
+++ b/ui/app/templates/loading.hbs
@@ -1,3 +1,3 @@
 <PageLayout>
-  <section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
+  <section class="section has-text-centered"><LoadingSpinner /></section>
 </PageLayout>
diff --git a/ui/app/templates/partials/forbidden-message.hbs b/ui/app/templates/partials/forbidden-message.hbs
deleted file mode 100644
index bfa7cd0e805a..000000000000
--- a/ui/app/templates/partials/forbidden-message.hbs
+++ /dev/null
@@ -1,10 +0,0 @@
-<div data-test-error class="empty-message">
-  <h3 data-test-error-title class="empty-message-headline">Not Authorized</h3>
-  <p data-test-error-message class="empty-message-body">
-    {{#if token.secret}}
-      Your <LinkTo @route="settings.tokens">ACL token</LinkTo> does not provide the required permissions. Contact your administrator if this is an error.
-    {{else}}
-      Provide an <LinkTo @route="settings.tokens">ACL token</LinkTo> with requisite permissions to view this.
-    {{/if}}
-  </p>
-</div>
diff --git a/ui/app/templates/servers/index.hbs b/ui/app/templates/servers/index.hbs
index 12211c8b0556..b0a02fc95fb5 100644
--- a/ui/app/templates/servers/index.hbs
+++ b/ui/app/templates/servers/index.hbs
@@ -1,7 +1,7 @@
 {{title "Servers"}}
 <section class="section">
   {{#if isForbidden}}
-    {{partial "partials/forbidden-message"}}
+    <ForbiddenMessage />
   {{else}}
     <ListPagination
       @source={{sortedAgents}}
diff --git a/ui/app/templates/servers/loading.hbs b/ui/app/templates/servers/loading.hbs
index f1647480ccec..11a9bb9fbece 100644
--- a/ui/app/templates/servers/loading.hbs
+++ b/ui/app/templates/servers/loading.hbs
@@ -1 +1 @@
-  <section class="section has-text-centered">{{partial "partials/loading-spinner"}}</section>
+  <section class="section has-text-centered"><LoadingSpinner /></section>
diff --git a/ui/config/deprecation-workflow.js b/ui/config/deprecation-workflow.js
index 7742a99dec24..e7c8c41fed43 100644
--- a/ui/config/deprecation-workflow.js
+++ b/ui/config/deprecation-workflow.js
@@ -7,5 +7,6 @@ self.deprecationWorkflow.config = {
     { handler: 'throw', matchId: 'ember-console.deprecate-logger' },
     { handler: 'throw', matchId: 'ember-test-helpers.rendering-context.jquery-element' },
     { handler: 'throw', matchId: 'ember-cli-page-object.is-property' },
+    { handler: 'throw', matchId: 'ember-views.partial' },
   ],
 };
diff --git a/ui/stories/components/header.stories.js b/ui/stories/components/header.stories.js
index 22b8a0a96835..5ffc82e00a29 100644
--- a/ui/stories/components/header.stories.js
+++ b/ui/stories/components/header.stories.js
@@ -11,10 +11,10 @@ export let Header = () => {
       <nav class="navbar is-primary">
         <div class="navbar-brand">
           <span class="gutter-toggle" aria-label="menu">
-            {{partial "partials/hamburger-menu"}}
+            <HamburgerMenu />
           </span>
           <span class="navbar-item is-logo">
-            {{partial "partials/nomad-logo"}}
+            <NomadLogo />
           </span>
         </div>
         <div class="navbar-end">