diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/thumbnailGenerator.spec.js b/contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/thumbnailGenerator.spec.js
index fef6d48296..d1cb615a48 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/thumbnailGenerator.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/__tests__/thumbnailGenerator.spec.js
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import ThumbnailGenerator from '../thumbnails/ThumbnailGenerator';
 import { factory } from '../../../store';
 
-function makeWrapper(filePath) {
+async function makeWrapper(filePath) {
   const store = factory();
   const handleFiles = jest.fn(() => true);
 
@@ -22,7 +22,10 @@ function makeWrapper(filePath) {
   const generateVideoThumbnail = jest.spyOn(wrapper.vm, 'generateVideoThumbnail');
   generateVideoThumbnail.mockImplementation(() => Promise.resolve());
 
-  return [wrapper, { fileExists, generateVideoThumbnail, handleFiles }];
+  const handleGenerated = jest.spyOn(wrapper.vm, 'handleGenerated');
+  handleGenerated.mockImplementation(() => {});
+
+  return [wrapper, { fileExists, generateVideoThumbnail, handleFiles, handleGenerated }];
 }
 
 describe('thumbnailGenerator', () => {
@@ -30,22 +33,22 @@ describe('thumbnailGenerator', () => {
 
   it.each(
     ['test.mp4', 'test.webm', 'test.mp3'],
-    'correct generation code should be called',
-    fileName => {
-      [wrapper, mocks] = makeWrapper(fileName);
-      wrapper.vm.generate();
+    'correct generation code should be called for %s',
+    async fileName => {
+      [wrapper, mocks] = await makeWrapper(fileName);
+      await wrapper.vm.generate();
       expect(mocks.generateVideoThumbnail).toHaveBeenCalled();
     },
   );
 
-  it('error alert should show if the file path is an unrecognized type', () => {
-    [wrapper, mocks] = makeWrapper('test.wut');
-    wrapper.vm.generate();
+  it('error alert should show if the file path is an unrecognized type', async () => {
+    [wrapper, mocks] = await makeWrapper('test.wut');
+    await wrapper.vm.generate();
     expect(wrapper.vm.showErrorAlert).toBe(true);
   });
 
   it('handleGenerated should not call handleFiles if cancelled', async () => {
-    [wrapper, mocks] = makeWrapper('test.wut');
+    [wrapper, mocks] = await makeWrapper('test.wut');
     await wrapper.setData({ cancelled: true });
     wrapper.vm.handleGenerated('');
     expect(mocks.handleFiles).not.toHaveBeenCalled();
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ThumbnailGenerator.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ThumbnailGenerator.vue
index c43bc6920f..ba9354ea76 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ThumbnailGenerator.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ThumbnailGenerator.vue
@@ -1,11 +1,14 @@
 <template>
 
   <div>
-    <Alert
-      v-model="showErrorAlert"
-      :header="$tr('thumbnailGenerationFailedHeader')"
-      :text="$tr('thumbnailGenerationFailedText')"
-    />
+    <KModal
+      v-if="showErrorAlert"
+      :title="$tr('thumbnailGenerationFailedHeader')"
+      :submitText="$tr('closeButtonLabel')"
+      @submit="showErrorAlert = false"
+    >
+      <p>{{ $tr('thumbnailGenerationFailedText') }}</p>
+    </KModal>
     <slot :generate="generate"></slot>
   </div>
 
@@ -22,7 +25,6 @@
   import epubJS from 'epubjs';
   import PDFJSWorker from '!!file-loader!pdfjs-dist/build/pdf.worker.min.js';
   import client from 'shared/client';
-  import Alert from 'shared/views/Alert';
   import { ASPECT_RATIO, THUMBNAIL_WIDTH } from 'shared/constants';
   // Based off of solution here: https://github.com/mozilla/pdf.js/issues/7612#issuecomment-576807171
   const pdfJSLib = require('pdfjs-dist');
@@ -32,9 +34,7 @@
 
   export default {
     name: 'ThumbnailGenerator',
-    components: {
-      Alert,
-    },
+    components: {},
     props: {
       filePath: {
         type: String,
@@ -241,6 +241,7 @@
       thumbnailGenerationFailedHeader: 'Unable to generate thumbnail',
       thumbnailGenerationFailedText: 'There was a problem generating a thumbnail',
       generatedDefaultFilename: 'Generated thumbnail',
+      closeButtonLabel: 'OK',
     },
   };
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/Alert.vue b/contentcuration/contentcuration/frontend/shared/views/Alert.vue
deleted file mode 100644
index 0c09df0f40..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/Alert.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-
-  <MessageDialog
-    v-model="open"
-    :header="header"
-    :text="text"
-  >
-    <slot></slot>
-    <VCheckbox
-      v-if="messageId"
-      v-model="dontShowAgain"
-      color="primary"
-      :label="$tr('dontShowAgain')"
-    />
-    <template #buttons="{ close }">
-      <VSpacer />
-      <VBtn
-        depressed
-        color="primary"
-        data-test="ok"
-        @click="close"
-      >
-        {{ $tr('closeButtonLabel') }}
-      </VBtn>
-    </template>
-  </MessageDialog>
-
-</template>
-
-
-<script>
-
-  import MessageDialog from './MessageDialog';
-
-  export default {
-    name: 'Alert',
-    components: {
-      MessageDialog,
-    },
-    props: {
-      value: {
-        type: Boolean,
-        default: false,
-      },
-      header: {
-        type: String,
-        required: true,
-      },
-      text: {
-        type: String,
-        required: true,
-      },
-      messageId: {
-        type: String,
-        required: false,
-        default: null,
-      },
-    },
-    computed: {
-      open: {
-        get() {
-          return Boolean(!this.dontShowAgain && this.value);
-        },
-        set(open) {
-          this.$emit('input', open);
-        },
-      },
-      dontShowAgain: {
-        get() {
-          return this.messageId
-            ? Boolean(localStorage[`dont_show_messages_${this.messageId}`])
-            : false;
-        },
-        set(value) {
-          if (value) {
-            localStorage[`dont_show_messages_${this.messageId}`] = true;
-          } else {
-            delete localStorage[`dont_show_messages_${this.messageId}`];
-          }
-        },
-      },
-    },
-    methods: {
-      /**
-       * @public
-       */
-      prompt() {
-        this.open = true;
-      },
-    },
-    $trs: {
-      closeButtonLabel: 'OK',
-      dontShowAgain: "Don't show this message again",
-    },
-  };
-
-</script>
-
-
-<style lang="scss" scoped>
-
-  ::v-deep label {
-    margin: 0;
-    font-weight: normal;
-  }
-
-  .v-input--checkbox {
-    margin-bottom: -25px;
-  }
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/alert.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/alert.spec.js
deleted file mode 100644
index 24887aaf5c..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/alert.spec.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { mount } from '@vue/test-utils';
-import Alert from '../Alert.vue';
-
-function makeWrapper() {
-  return mount(Alert, {
-    attachTo: document.body,
-    propsData: {
-      header: '',
-      text: '',
-      messageId: 'testmessageid',
-      value: true,
-    },
-  });
-}
-
-describe('alert', () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = makeWrapper();
-  });
-
-  afterEach(() => {
-    wrapper.destroy();
-    delete localStorage['dont_show_messages_testmessageid'];
-  });
-
-  it('clicking OK button should dismiss alert', () => {
-    wrapper.find('[data-test="ok"]').trigger('click');
-    expect(wrapper.emitted('input')[0][0]).toBe(false);
-  });
-
-  it("should not prompt if don't show again is submitted", () => {
-    localStorage['dont_show_messages_testmessageid'] = true;
-    wrapper = makeWrapper();
-    expect(wrapper.vm.open).toBe(false);
-  });
-});
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue b/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
index 42882b4f0f..1a3acb3abc 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Uploader.vue
@@ -22,38 +22,48 @@
       data-test="upload-dialog"
       @change="handleFiles($event.target.files)"
     >
-    <Alert
-      v-model="showUnsupportedFilesAlert"
-      :header="$tr('unsupportedFilesHeader')"
-      :text="unsupportedFilesText"
-    />
-    <Alert
-      v-model="showTooLargeFilesAlert"
-      :header="$tr('tooLargeFilesHeader')"
-      :text="
-        $tr('maxFileSizeText', {
-          count: tooLargeFiles.length,
-          size: formatFileSize(maxFileSize),
-        })
-      "
-    />
-    <Alert
-      v-model="showStorageExceededAlert"
-      :header="$tr('noStorageHeader')"
-      text=""
+    <KModal
+      v-if="showUnsupportedFilesAlert"
+      :title="$tr('unsupportedFilesHeader')"
+      :submitText="$tr('closeButtonLabel')"
+      @submit="showUnsupportedFilesAlert = false"
     >
-      <template #default>
-        <div class="storage-alert">
-          <p>{{ $tr('uploadSize', { size: formatFileSize(totalUploadSize) }) }}</p>
-          <p>
-            {{ $tr('remainingStorage', { size: formatFileSize(availableSpace) }) }}
-          </p>
-          <div class="storage-usage">
-            <FileStorage />
-          </div>
+      <p>{{ unsupportedFilesText }}</p>
+    </KModal>
+    <KModal
+      v-if="showTooLargeFilesAlert"
+      :title="$tr('tooLargeFilesHeader')"
+      :submitText="$tr('closeButtonLabel')"
+      @submit="showTooLargeFilesAlert = false"
+    >
+      <p>
+        {{
+          $tr('maxFileSizeText', {
+            count: tooLargeFiles.length,
+            size: formatFileSize(maxFileSize),
+          })
+        }}
+      </p>
+    </KModal>
+    <KModal
+      v-if="showStorageExceededAlert"
+      :title="$tr('noStorageHeader')"
+      :submitText="$tr('closeButtonLabel')"
+      @submit="showStorageExceededAlert = false"
+    >
+      <div class="storage-alert">
+        <p>{{ $tr('uploadSize', { size: formatFileSize(totalUploadSize) }) }}</p>
+        <p>
+          {{ $tr('remainingStorage', { size: formatFileSize(availableSpace) }) }}
+        </p>
+        <div
+          class="storage-usage"
+          :style="{ color: $themeTokens.annotation }"
+        >
+          <FileStorage />
         </div>
-      </template>
-    </Alert>
+      </div>
+    </KModal>
   </div>
 
 </template>
@@ -67,19 +77,16 @@
   import uniq from 'lodash/uniq';
   import flatMap from 'lodash/flatMap';
   import isFunction from 'lodash/isFunction';
-
   import { validateFile } from '../../vuex/file/validation';
   import FileStorage from './FileStorage';
   import FileDropzone from './FileDropzone';
   import { MAX_FILE_SIZE } from 'shared/constants';
   import { fileSizeMixin } from 'shared/mixins';
-  import Alert from 'shared/views/Alert';
   import { FormatPresetsList } from 'shared/leUtils/FormatPresets';
 
   export default {
     name: 'Uploader',
     components: {
-      Alert,
       FileStorage,
       FileDropzone,
     },
@@ -260,6 +267,7 @@
       tooLargeFilesHeader: 'Max file size exceeded',
       maxFileSizeText:
         '{count, plural,\n =1 {# file will not be uploaded.}\n other {# files will not be uploaded.}} File size must be under {size}',
+      closeButtonLabel: 'OK',
     },
   };
 
@@ -275,7 +283,6 @@
   .storage-usage {
     margin-top: -5px;
     font-size: 10pt;
-    color: gray;
   }
 
 </style>