diff --git a/nomad/job_endpoint.go b/nomad/job_endpoint.go
index b355640d40f9..dae43c70c3c1 100644
--- a/nomad/job_endpoint.go
+++ b/nomad/job_endpoint.go
@@ -2429,5 +2429,11 @@ func (j *Job) TagVersion(args *structs.JobApplyTagRequest, reply *structs.JobTag
 	}
 
 	reply.Index = index
+	if args.Tag != nil {
+		reply.Name = args.Tag.Name
+		reply.Description = args.Tag.Description
+		reply.TaggedTime = args.Tag.TaggedTime
+	}
+
 	return nil
 }
diff --git a/ui/app/adapters/version-tag.js b/ui/app/adapters/version-tag.js
new file mode 100644
index 000000000000..4ffc55f71cbf
--- /dev/null
+++ b/ui/app/adapters/version-tag.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+// @ts-check
+
+import ApplicationAdapter from './application';
+import classic from 'ember-classic-decorator';
+
+@classic
+export default class VersionTagAdapter extends ApplicationAdapter {
+  urlForCreateRecord(_modelName, model) {
+    const tagName = model.attr('name');
+    const jobName = model.attr('jobName');
+    return `${this.buildURL()}/job/${jobName}/versions/${tagName}/tag`;
+  }
+
+  async deleteTag(jobName, tagName) {
+    let deletion = this.ajax(
+      this.urlForDeleteRecord(jobName, tagName),
+      'DELETE'
+    );
+    return deletion;
+  }
+
+  urlForDeleteRecord(jobName, tagName) {
+    return `${this.buildURL()}/job/${jobName}/versions/${tagName}/tag`;
+  }
+}
diff --git a/ui/app/components/job-version.js b/ui/app/components/job-version.js
index e05c54b8f708..5422d04fbbb4 100644
--- a/ui/app/components/job-version.js
+++ b/ui/app/components/job-version.js
@@ -3,30 +3,50 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import { action, computed } from '@ember/object';
-import { classNames } from '@ember-decorators/component';
+import { alias } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 import { task } from 'ember-concurrency';
 import messageForError from 'nomad-ui/utils/message-from-adapter-error';
-import classic from 'ember-classic-decorator';
 
 const changeTypes = ['Added', 'Deleted', 'Edited'];
 
-@classic
-@classNames('job-version', 'boxed-section')
 export default class JobVersion extends Component {
-  version = null;
-  isOpen = false;
+  @service store;
+  @service notifications;
+  @service router;
+
+  @alias('args.version') version;
+  @tracked isOpen = false;
+  @tracked isEditing = false;
+  @tracked editableTag;
 
   // Passes through to the job-diff component
   verbose = true;
 
-  @service router;
+  constructor() {
+    super(...arguments);
+    this.initializeEditableTag();
+  }
+
+  initializeEditableTag() {
+    if (this.version.taggedVersion) {
+      this.editableTag = this.store.createRecord('versionTag', {
+        name: this.version.taggedVersion.name,
+        description: this.version.taggedVersion.description,
+      });
+    } else {
+      this.editableTag = this.store.createRecord('versionTag');
+    }
+    this.editableTag.versionNumber = this.version.number;
+    this.editableTag.jobName = this.version.get('job.plainId');
+  }
 
   @computed('version.diff')
   get changeCount() {
-    const diff = this.get('version.diff');
+    const diff = this.version.diff;
     const taskGroups = diff.TaskGroups || [];
 
     if (!diff) {
@@ -44,36 +64,34 @@ export default class JobVersion extends Component {
 
   @computed('version.{number,job.version}')
   get isCurrent() {
-    return this.get('version.number') === this.get('version.job.version');
+    return this.version.number === this.version.get('job.version');
   }
 
   @action
   toggleDiff() {
-    this.toggleProperty('isOpen');
+    this.isOpen = !this.isOpen;
   }
 
   @task(function* () {
     try {
-      const versionBeforeReversion = this.get('version.job.version');
-
+      const versionBeforeReversion = this.version.get('job.version');
       yield this.version.revertTo();
-      yield this.version.job.reload();
-
-      const versionAfterReversion = this.get('version.job.version');
+      yield this.version.get('job').reload();
 
+      const versionAfterReversion = this.version.get('job.version');
       if (versionBeforeReversion === versionAfterReversion) {
-        this.handleError({
+        this.args.handleError({
           level: 'warn',
           title: 'Reversion Had No Effect',
           description:
             'Reverting to an identical older version doesn’t produce a new version',
         });
       } else {
-        const job = this.get('version.job');
+        const job = this.version.get('job');
         this.router.transitionTo('jobs.job.index', job.get('idWithNamespace'));
       }
     } catch (e) {
-      this.handleError({
+      this.args.handleError({
         level: 'danger',
         title: 'Could Not Revert',
         description: messageForError(e, 'revert'),
@@ -81,6 +99,80 @@ export default class JobVersion extends Component {
     }
   })
   revertTo;
+
+  @action
+  handleKeydown(event) {
+    if (event.key === 'Escape') {
+      this.cancelEditTag();
+    }
+  }
+
+  @action
+  toggleEditTag() {
+    this.isEditing = !this.isEditing;
+  }
+
+  @action
+  async saveTag(event) {
+    event.preventDefault();
+    try {
+      if (!this.editableTag.name) {
+        this.notifications.add({
+          title: 'Error Tagging Job Version',
+          message: 'Tag name is required',
+          color: 'critical',
+        });
+        return;
+      }
+      const savedTag = await this.editableTag.save();
+      this.version.taggedVersion = savedTag;
+      this.version.taggedVersion.setProperties({
+        ...savedTag.toJSON(),
+      });
+      this.initializeEditableTag();
+      this.isEditing = false;
+
+      this.notifications.add({
+        title: 'Job Version Tagged',
+        color: 'success',
+      });
+    } catch (error) {
+      console.log('error tagging job version', error);
+      this.notifications.add({
+        title: 'Error Tagging Job Version',
+        message: messageForError(error),
+        color: 'critical',
+      });
+    }
+  }
+
+  @action
+  cancelEditTag() {
+    this.isEditing = false;
+    this.initializeEditableTag();
+  }
+
+  @action
+  async deleteTag() {
+    try {
+      await this.store
+        .adapterFor('version-tag')
+        .deleteTag(this.editableTag.jobName, this.editableTag.name);
+      this.notifications.add({
+        title: 'Job Version Un-Tagged',
+        color: 'success',
+      });
+      this.version.taggedVersion = null;
+      this.initializeEditableTag();
+      this.isEditing = false;
+    } catch (error) {
+      this.notifications.add({
+        title: 'Error Un-Tagging Job Version',
+        message: messageForError(error),
+        color: 'critical',
+      });
+    }
+  }
 }
 
 const flatten = (accumulator, array) => accumulator.concat(array);
diff --git a/ui/app/models/job-version.js b/ui/app/models/job-version.js
index c4a0ef5f7291..8fc1b3700b0e 100644
--- a/ui/app/models/job-version.js
+++ b/ui/app/models/job-version.js
@@ -4,6 +4,7 @@
  */
 
 import Model from '@ember-data/model';
+import { fragment } from 'ember-data-model-fragments/attributes';
 import { attr, belongsTo } from '@ember-data/model';
 
 export default class JobVersion extends Model {
@@ -12,6 +13,7 @@ export default class JobVersion extends Model {
   @attr('date') submitTime;
   @attr('number') number;
   @attr() diff;
+  @fragment('version-tag') taggedVersion;
 
   revertTo() {
     return this.store.adapterFor('job-version').revertTo(this);
diff --git a/ui/app/models/version-tag.js b/ui/app/models/version-tag.js
new file mode 100644
index 000000000000..6aec72a602c7
--- /dev/null
+++ b/ui/app/models/version-tag.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Fragment from 'ember-data-model-fragments/fragment';
+import { attr } from '@ember-data/model';
+
+export default class VersionTagModel extends Fragment {
+  @attr() name;
+  @attr() description;
+  @attr() taggedTime;
+  @attr('number') versionNumber;
+  @attr('string') jobName;
+}
diff --git a/ui/app/serializers/job-version.js b/ui/app/serializers/job-version.js
index 4982501588e7..814b3b4e6557 100644
--- a/ui/app/serializers/job-version.js
+++ b/ui/app/serializers/job-version.js
@@ -13,6 +13,13 @@ export default class JobVersionSerializer extends ApplicationSerializer {
     number: 'Version',
   };
 
+  normalize(typeHash, hash) {
+    if (hash.TaggedVersion) {
+      hash.TaggedVersion.VersionNumber = hash.Version;
+    }
+    return super.normalize(typeHash, hash);
+  }
+
   normalizeFindHasManyResponse(store, modelClass, hash, id, requestType) {
     const zippedVersions = hash.Versions.map((version, index) =>
       assign({}, version, {
diff --git a/ui/app/serializers/version-tag.js b/ui/app/serializers/version-tag.js
new file mode 100644
index 000000000000..d6b4ab3e9c6d
--- /dev/null
+++ b/ui/app/serializers/version-tag.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+// @ts-check
+import ApplicationSerializer from './application';
+import { inject as service } from '@ember/service';
+
+export default class VersionTagSerializer extends ApplicationSerializer {
+  @service store;
+
+  serialize(snapshot, options) {
+    const hash = super.serialize(snapshot, options);
+    hash.Version = hash.VersionNumber;
+    return hash;
+  }
+}
diff --git a/ui/app/styles/components/timeline.scss b/ui/app/styles/components/timeline.scss
index bb60059d3066..89908d66693d 100644
--- a/ui/app/styles/components/timeline.scss
+++ b/ui/app/styles/components/timeline.scss
@@ -61,5 +61,80 @@
     > .boxed-section {
       margin-bottom: 0;
     }
+
+    .job-version {
+      margin-bottom: 0;
+      & > .boxed-section {
+        box-shadow: var(--token-surface-high-box-shadow);
+        border-radius: 0.25rem;
+        header,
+        footer {
+          border: none;
+          padding: 0.75rem;
+        }
+
+        footer {
+          background-color: var(--token-color-surface-faint);
+          border-top: 1px solid var(--token-color-border-faint);
+          display: grid;
+          grid-template-columns: auto auto;
+          align-items: center;
+          gap: 0.5rem;
+          & > .tag-options {
+            justify-self: start;
+            display: grid;
+            grid-template-areas: 'name description save cancel delete';
+            grid-template-columns: auto 1fr auto auto auto;
+            gap: 0.5rem;
+            align-items: center;
+
+            // Match the height of HDS:Button's @size="small"
+            input {
+              padding: 0.375rem 0.6875rem;
+              line-height: 100%;
+            }
+
+            .tag-button-primary {
+              grid-area: name;
+              background-color: var(--token-color-surface-highlight);
+              color: var(--token-color-foreground-highlight-on-surface);
+              border-color: var(--token-color-foreground-highlight);
+              &:focus:before {
+                border-color: var(--token-color-foreground-highlight);
+              }
+              &:hover {
+                background-color: var(--token-color-border-highlight);
+              }
+            }
+            .tag-button-secondary {
+              grid-area: name;
+            }
+            .tag-description {
+              grid-area: description;
+              font-style: italic;
+              font-size: 0.875rem;
+              white-space: no-wrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              text-wrap: nowrap;
+              max-width: 100%;
+            }
+            & > .tag-name {
+              grid-area: name;
+            }
+          }
+          & > .version-options {
+            justify-self: end;
+          }
+
+          &.editing {
+            grid-template-columns: 1fr;
+            & > .tag-options {
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
   }
 }
diff --git a/ui/app/templates/components/job-version.hbs b/ui/app/templates/components/job-version.hbs
index 19cceffe0ca5..b901fdef8db4 100644
--- a/ui/app/templates/components/job-version.hbs
+++ b/ui/app/templates/components/job-version.hbs
@@ -3,55 +3,112 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<div class="boxed-section-head is-light inline-definitions">
-  Version #{{this.version.number}}
-  <span class="bumper-left pair is-faded">
-    <span class="term">Stable</span>
-    <span class="badge is-light is-faded" data-test-version-stability><code>{{this.version.stable}}</code></span>
-  </span>
-  <span class="pair is-faded">
-    <span class="term">Submitted</span>
-    <span data-test-version-submit-time class="submit-date">{{format-ts this.version.submitTime}}</span>
-  </span>
-  <div class="pull-right">
-    {{#unless this.isCurrent}}
-      {{#if (can "run job" namespace=this.version.job.namespace)}}
-        <TwoStepButton
-          data-test-revert-to
-          @classes={{hash
-            idleButton="is-warning is-outlined"
-            confirmButton="is-warning"}}
-          @alignRight={{true}}
-          @idleText="Revert Version"
-          @cancelText="Cancel"
-          @confirmText="Yes, Revert Version"
-          @confirmationMessage="Are you sure you want to revert to this version?"
-          @inlineText={{true}}
-          @fadingBackground={{true}}
-          @awaitingConfirmation={{this.revertTo.isRunning}}
-          @onConfirm={{perform this.revertTo}} />
+<section class="job-version">
+  <div class="boxed-section {{if this.version.taggedVersion "tagged"}}" data-test-tagged-version={{if this.version.taggedVersion "true" "false"}}>
+    <header class="boxed-section-head is-light inline-definitions">
+      Version #{{this.version.number}}
+      <span class="bumper-left pair is-faded">
+        <span class="term">Stable</span>
+        <span class="badge is-light is-faded" data-test-version-stability><code>{{this.version.stable}}</code></span>
+      </span>
+      <span class="pair is-faded">
+        <span class="term">Submitted</span>
+        <span data-test-version-submit-time class="submit-date">{{format-ts this.version.submitTime}}</span>
+      </span>
+      <div class="pull-right">
+        {{#if this.version.diff}}
+          <Hds::Button
+            class="is-light is-small"
+            @size="small"
+            @text="{{if this.isOpen "Hide" "See"}} {{this.changeCount}} {{pluralize "Change" this.changeCount}}"
+            @color="tertiary"
+            @icon={{if this.isOpen "chevron-up" "chevron-down"}}
+            @iconPosition="trailing"
+            {{on "click" (action "toggleDiff")}}
+          />
+        {{else}}
+          <div class="is-fixed-width is-size-7 has-text-centered">No Changes</div>
+        {{/if}}
+      </div>
+    </header>
+    {{#if this.isOpen}}
+      <div class="boxed-section-body is-dark">
+        <JobDiff @diff={{this.version.diff}} @verbose={{this.verbose}} />
+      </div>
+    {{/if}}
+    <footer class="boxed-section-foot {{if this.isEditing "editing"}}">
+      {{#if this.isEditing}}
+        <form class="tag-options" autocomplete="off" {{on "submit" (action "saveTag")}}>
+          {{! template-lint-disable no-down-event-binding }}
+          <Hds::Form::TextInput::Field
+            data-test-tag-name-input
+            @label="Tag Name"
+            placeholder="Tag Name"
+            @value={{this.editableTag.name}}
+            @size="small"
+            {{on "input" (action (mut this.editableTag.name) value="target.value") }}
+            {{on "keydown" (action this.handleKeydown)}}
+            autofocus
+          />
+          <Hds::Form::TextInput::Field
+            data-test-tag-description-input
+            @label="Tag Description"
+            placeholder="Tag Description"
+            @value={{this.editableTag.description}}
+            {{on "input" (action (mut this.editableTag.description) value="target.value") }}
+            {{on "keydown" (action this.handleKeydown)}}
+          />
+          {{! template-lint-enable no-down-event-binding }}
+          <Hds::Button data-test-tag-save-button type="submit" @text="Save" @color="primary" @size="small" @isInline={{true}} {{on "click" this.saveTag}} />
+          <Hds::Button @text="Cancel" @color="secondary" @size="small" @isInline={{true}} {{on "click" (action "cancelEditTag")}} />
+          {{#if this.version.taggedVersion}}
+            <Hds::Button data-test-tag-delete-button @text="Delete" @color="critical" @size="small" @isInline={{true}} {{on "click" (action "deleteTag")}} />
+          {{/if}}
+        </form>
+
       {{else}}
-        <button
-          data-test-revert-to
-          type="button"
-          class="button is-warning is-outlined is-small tooltip"
-          disabled
-          aria-label="You don’t have permission to revert"
-        >
-          Revert
-        </button>
+        <div class="tag-options">
+          {{#if this.version.taggedVersion}}
+            <Hds::Button class="tag-button-primary" @text={{this.version.taggedVersion.name}} @color="primary" @size="small" @icon="tag" @iconPosition="leading" @isInline={{true}} {{on "click" (action "toggleEditTag")}} />
+          {{else}}
+            <Hds::Button class="tag-button-secondary" @text="Tag this version" @color="secondary" @size="small" @icon="tag" @iconPosition="leading" @isInline={{true}} {{on "click" (action "toggleEditTag")}} />
+          {{/if}}
+          <span class="tag-description" title={{this.version.taggedVersion.description}}>
+              {{this.version.taggedVersion.description}}
+          </span>
+        </div>
+        <div class="version-options">
+          {{#unless this.isCurrent}}
+            {{#if (can "run job" namespace=this.version.job.namespace)}}
+              <TwoStepButton
+                data-test-revert-to
+                @classes={{hash
+                  idleButton="is-warning is-outlined"
+                  confirmButton="is-warning"}}
+                @fadingBackground={{true}}
+                @idleText="Revert Version"
+                @cancelText="Cancel"
+                @confirmText="Yes, Revert Version"
+                @confirmationMessage="Are you sure you want to revert to this version?"
+                @inlineText={{true}}
+                @size="small"
+                @awaitingConfirmation={{this.revertTo.isRunning}}
+                @onConfirm={{perform this.revertTo}} />
+            {{else}}
+              <Hds::Button
+                data-test-revert-to
+                class="is-fixed-width"
+                disabled
+                @size="small"
+                @color="secondary"
+                @isInline={{true}}
+                @text="Revert"
+                title="You don’t have permission to revert"
+              />
+            {{/if}}
+          {{/unless}}
+        </div>
       {{/if}}
-    {{/unless}}
-
-    {{#if this.version.diff}}
-      <button class="button is-light is-small is-fixed-width" {{action "toggleDiff"}} type="button">{{this.changeCount}} {{pluralize "Change" this.changeCount}}</button>
-    {{else}}
-      <div class="is-fixed-width is-size-7 has-text-centered">No Changes</div>
-    {{/if}}
-  </div>
-</div>
-{{#if this.isOpen}}
-  <div class="boxed-section-body is-dark">
-    <JobDiff @diff={{this.version.diff}} @verbose={{this.verbose}} />
+    </footer>
   </div>
-{{/if}}
+</section>
diff --git a/ui/app/templates/components/two-step-button.hbs b/ui/app/templates/components/two-step-button.hbs
index 4931e3983b7a..a25a29353767 100644
--- a/ui/app/templates/components/two-step-button.hbs
+++ b/ui/app/templates/components/two-step-button.hbs
@@ -6,7 +6,7 @@
 {{#if this.isIdle}}
   <Hds::Button
     data-test-idle-button
-    @size="medium"
+    @size={{@size}}
     @text={{@idleText}}
     @color="critical"
     disabled={{@disabled}}
@@ -20,7 +20,7 @@
   </span>
   <Hds::Button
     data-test-cancel-button
-    @size="medium"
+    @size={{@size}}
     @text={{@cancelText}}
     @color="secondary"
     class="is-inline"
@@ -32,7 +32,7 @@
   />
   <Hds::Button
     data-test-confirm-button
-    @size="medium"
+    @size={{@size}}
     @text={{if this.awaitingConfirmation "Loading..." @confirmText}}
     @color="critical"
     class="is-inline"
diff --git a/ui/mirage/config.js b/ui/mirage/config.js
index dcb3155e880d..2067aa081a69 100644
--- a/ui/mirage/config.js
+++ b/ui/mirage/config.js
@@ -457,6 +457,31 @@ export default function () {
     return this.serialize(jobVersions.where({ jobId: params.id }));
   });
 
+  this.post(
+    '/job/:id/versions/:version/tag',
+    function ({ jobVersions }, { params }) {
+      // Create a new version tag
+      const tag = server.create('version-tag', {
+        jobVersion: jobVersions.findBy({
+          jobId: params.id,
+          version: params.version,
+        }),
+        name: params.name,
+        description: params.description,
+      });
+      return this.serialize(tag);
+    }
+  );
+
+  this.delete(
+    '/job/:id/versions/:version/tag',
+    function ({ jobVersions }, { params }) {
+      return this.serialize(
+        jobVersions.findBy({ jobId: params.id, version: params.version })
+      );
+    }
+  );
+
   this.get('/job/:id/deployments', function ({ deployments }, { params }) {
     return this.serialize(deployments.where({ jobId: params.id }));
   });
diff --git a/ui/mirage/factories/job-version.js b/ui/mirage/factories/job-version.js
index caadbf745085..f7aedc01fbbb 100644
--- a/ui/mirage/factories/job-version.js
+++ b/ui/mirage/factories/job-version.js
@@ -31,6 +31,9 @@ export default Factory.extend({
   // Directive to restrict any related deployments from having a status other than 'running'
   activeDeployment: false,
 
+  // version tags
+  taggedVersion: null,
+
   afterCreate(version, server) {
     const args = [
       'deployment',
diff --git a/ui/mirage/scenarios/default.js b/ui/mirage/scenarios/default.js
index bcd33646a955..a333ca5e5042 100644
--- a/ui/mirage/scenarios/default.js
+++ b/ui/mirage/scenarios/default.js
@@ -341,6 +341,42 @@ function smallCluster(server) {
 
   //#endregion Active Deployment
 
+  // #region Version Tags
+  const versionTaggedJob = server.create('job', {
+    name: 'version-tag-job',
+    id: 'version-tag-job',
+    namespaceId: 'default',
+    noDeployments: true,
+  });
+
+  server.create('job-version', {
+    job: versionTaggedJob,
+    namespace: 'default',
+    version: 0,
+  });
+
+  server.create('job-version', {
+    job: versionTaggedJob,
+    namespace: 'default',
+    version: 1,
+    taggedVersion: {
+      Name: 'burrito',
+      Description: 'A delicious version',
+    },
+  });
+
+  server.create('job-version', {
+    job: versionTaggedJob,
+    namespace: 'default',
+    version: 2,
+    taggedVersion: {
+      Name: 'enchilada',
+      Description: 'A version with just a hint of spice',
+    },
+  });
+
+  // #endregion Version Tags
+
   server.create('job', {
     name: 'hcl-definition-job',
     id: 'display-hcl',
diff --git a/ui/tests/acceptance/job-versions-test.js b/ui/tests/acceptance/job-versions-test.js
index 06fc98ab94d2..452d962a619b 100644
--- a/ui/tests/acceptance/job-versions-test.js
+++ b/ui/tests/acceptance/job-versions-test.js
@@ -5,7 +5,7 @@
 
 /* eslint-disable qunit/require-expect */
 /* eslint-disable qunit/no-conditional-assertions */
-import { currentURL } from '@ember/test-helpers';
+import { currentURL, click, typeIn } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
@@ -13,7 +13,7 @@ import a11yAudit from 'nomad-ui/tests/helpers/a11y-audit';
 import Versions from 'nomad-ui/tests/pages/jobs/job/versions';
 import Layout from 'nomad-ui/tests/pages/layout';
 import moment from 'moment';
-
+import percySnapshot from '@percy/ember';
 let job;
 let namespace;
 let versions;
@@ -30,6 +30,21 @@ module('Acceptance | job versions', function (hooks) {
     job = server.create('job', {
       namespaceId: namespace.id,
       createAllocations: false,
+      noDeployments: true,
+    });
+
+    // Create some versions
+    server.create('job-version', {
+      job: job,
+      version: 0,
+    });
+    server.create('job-version', {
+      job: job,
+      version: 1,
+      taggedVersion: {
+        Name: 'test-tag',
+        Description: 'A tag with a brief description',
+      },
     });
     versions = server.db.jobVersions.where({ jobId: job.id });
 
@@ -170,6 +185,142 @@ module('Acceptance | job versions', function (hooks) {
     assert.ok(Versions.error.isPresent, 'Error message is shown');
     assert.equal(Versions.error.title, 'Not Found', 'Error message is for 404');
   });
+
+  test('version tags are displayed', async function (assert) {
+    // Both a tagged version and an untagged version are present
+    assert.dom('[data-test-tagged-version="true"]').exists();
+    assert.dom('[data-test-tagged-version="false"]').exists();
+
+    // The tagged version has a button indicating a tag name and description
+    assert
+      .dom('[data-test-tagged-version="true"] .tag-button-primary')
+      .hasText('test-tag');
+    assert
+      .dom('[data-test-tagged-version="true"] .tag-description')
+      .hasText('A tag with a brief description');
+
+    // The untagged version has no tag button or description
+    assert
+      .dom('[data-test-tagged-version="false"] .tag-button-primary')
+      .doesNotExist();
+    assert
+      .dom('[data-test-tagged-version="false"] .tag-description')
+      .hasText('', 'Tag description is empty');
+
+    await percySnapshot(assert, {
+      percyCSS: `
+        .timeline-note {
+          display: none;
+        }
+        .submit-date {
+          visibility: hidden;
+        }
+      `,
+    });
+  });
+
+  test('existing version tags can be edited', async function (assert) {
+    // Clicking the tag button puts it into edit mode
+    assert
+      .dom('[data-test-tagged-version="true"] .boxed-section-foot')
+      .doesNotHaveClass('editing');
+    await click('[data-test-tagged-version="true"] .tag-button-primary');
+    assert
+      .dom('[data-test-tagged-version="true"] .boxed-section-foot')
+      .hasClass('editing');
+
+    // equivalent of backspacing existing
+    document.querySelector('[data-test-tag-name-input]').value = '';
+    document.querySelector('[data-test-tag-description-input]').value = '';
+
+    await typeIn(
+      '[data-test-tagged-version="true"] [data-test-tag-name-input]',
+      'new-tag'
+    );
+    await typeIn(
+      '[data-test-tagged-version="true"] [data-test-tag-description-input]',
+      'new-description'
+    );
+
+    // Clicking the save button commits the changes
+    await click(
+      '[data-test-tagged-version="true"] [data-test-tag-save-button]'
+    );
+    assert
+      .dom('[data-test-tagged-version="true"] .tag-button-primary')
+      .hasText('new-tag');
+    assert
+      .dom('[data-test-tagged-version="true"] .tag-description')
+      .hasText('new-description');
+
+    assert
+      .dom('.flash-message.alert.alert-success')
+      .exists('Shows a success toast notification on edit.');
+
+    // Tag can subsequently be deleted
+    await click('[data-test-tagged-version="true"] .tag-button-primary');
+    await click(
+      '[data-test-tagged-version="true"] [data-test-tag-delete-button]'
+    );
+    assert.dom('[data-test-tagged-version="true"]').doesNotExist();
+  });
+
+  test('new version tags can be created', async function (assert) {
+    // Clicking the tag button puts it into edit mode
+    assert
+      .dom('[data-test-tagged-version="false"] .boxed-section-foot')
+      .doesNotHaveClass('editing');
+    await click('[data-test-tagged-version="false"] .tag-button-secondary');
+    assert
+      .dom('[data-test-tagged-version="false"] .boxed-section-foot')
+      .hasClass('editing');
+
+    assert
+      .dom('[data-test-tagged-version="false"] [data-test-tag-delete-button]')
+      .doesNotExist();
+
+    // Clicking the save button commits the changes
+    await click(
+      '[data-test-tagged-version="false"] [data-test-tag-save-button]'
+    );
+
+    assert
+      .dom('.flash-message.alert.alert-critical')
+      .exists('Shows an error toast notification without a tag name.');
+
+    await typeIn(
+      '[data-test-tagged-version="false"] [data-test-tag-name-input]',
+      'new-tag'
+    );
+    await typeIn(
+      '[data-test-tagged-version="false"] [data-test-tag-description-input]',
+      'new-description'
+    );
+
+    // Clicking the save button commits the changes
+    await click(
+      '[data-test-tagged-version="false"] [data-test-tag-save-button]'
+    );
+
+    assert
+      .dom('[data-test-tagged-version="false"]')
+      .doesNotExist('Both versions now have tags');
+
+    assert
+      .dom('.flash-message.alert.alert-success')
+      .exists('Shows a success toast notification on edit.');
+
+    await percySnapshot(assert, {
+      percyCSS: `
+        .timeline-note {
+          display: none;
+        }
+        .submit-date {
+          visibility: hidden;
+        }
+      `,
+    });
+  });
 });
 
 module('Acceptance | job versions (with client token)', function (hooks) {