diff --git a/contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue b/contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue
deleted file mode 100644
index 023f248673..0000000000
--- a/contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-
-  <MessageDialog
-    v-model="show"
-    :header="title"
-    :text="text"
-  >
-    <div
-      v-if="errorText"
-      class="error-text lighten-4 ma-3 pa-2 red red--text"
-    >
-      {{ errorText }}
-    </div>
-    <template #buttons="{ close }">
-      <VBtn
-        flat
-        data-test="close"
-        @click="close"
-      >
-        {{ cancelButtonText }}
-      </VBtn>
-      <VBtn
-        color="primary"
-        dark
-        data-test="confirm"
-        :disabled="disableSubmit"
-        @click="$emit('confirm')"
-      >
-        {{ confirmButtonText }}
-      </VBtn>
-    </template>
-  </MessageDialog>
-
-</template>
-
-
-<script>
-
-  import MessageDialog from 'shared/views/MessageDialog';
-
-  export default {
-    name: 'ConfirmationDialog',
-    components: { MessageDialog },
-    props: {
-      value: {
-        type: Boolean,
-        default: false,
-      },
-      title: {
-        type: String,
-        required: true,
-      },
-      text: {
-        type: String,
-        required: true,
-      },
-      confirmButtonText: {
-        type: String,
-        required: true,
-      },
-      cancelButtonText: {
-        type: String,
-        default: 'Cancel',
-      },
-      errorText: {
-        type: String,
-        default: '',
-      },
-      disableSubmit: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    computed: {
-      show: {
-        get() {
-          return this.value;
-        },
-        set(value) {
-          this.$emit('input', value);
-        },
-      },
-    },
-  };
-
-</script>
-
-
-<style lang="scss" scoped></style>
diff --git a/contentcuration/contentcuration/frontend/administration/components/__tests__/confirmationDialog.spec.js b/contentcuration/contentcuration/frontend/administration/components/__tests__/confirmationDialog.spec.js
deleted file mode 100644
index 1fa1616c03..0000000000
--- a/contentcuration/contentcuration/frontend/administration/components/__tests__/confirmationDialog.spec.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { mount } from '@vue/test-utils';
-import ConfirmationDialog from '../ConfirmationDialog.vue';
-
-function makeWrapper() {
-  return mount(ConfirmationDialog, {
-    propsData: {
-      title: 'title',
-      text: 'text',
-      confirmButtonText: 'confirm',
-    },
-  });
-}
-
-describe('confirmationDialog', () => {
-  let wrapper;
-  beforeEach(() => {
-    wrapper = makeWrapper();
-  });
-  it('should emit input with false value on close', () => {
-    wrapper.find('[data-test="close"]').trigger('click');
-    expect(wrapper.emitted('input')[0][0]).toBe(false);
-  });
-  it('should emit confirm event when confirm button is clicked', () => {
-    wrapper.find('[data-test="confirm"]').trigger('click');
-    expect(wrapper.emitted('confirm')).toHaveLength(1);
-  });
-});
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue
index 8d494e8899..50d1377594 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue
@@ -13,72 +13,65 @@
       />
       <p
         v-else-if="savedSearches.length === 0"
-        class="grey--text pa-2"
+        :style="{ color: $themeTokens.annotation }"
+        class="empty-state"
       >
         {{ $tr('noSavedSearches') }}
       </p>
-      <VList v-else>
-        <template v-for="(search, index) in savedSearches">
-          <VListTile
-            :key="index"
-            class="py-2"
-          >
-            <VListTileContent>
-              <VListTileTitle>
-                <ActionLink
-                  class="font-weight-bold"
-                  :to="searchResultsRoute(search)"
-                  :text="search.name"
-                  @click="dialog = false"
-                />
-              </VListTileTitle>
-              <VListTileSubTitle class="metadata">
-                <span>
-                  {{ $formatRelative(search.created, { now: new Date() }) }}
-                </span>
-                <span>
-                  {{ $tr('filterCount', { count: searchFilterCount(search) }) }}
-                </span>
-              </VListTileSubTitle>
-            </VListTileContent>
-
-            <VListTileAction>
-              <IconButton
-                icon="clear"
-                color="grey"
-                :text="$tr('deleteAction')"
-                @click="handleClickDelete(search.id)"
-              />
-            </VListTileAction>
-          </VListTile>
-          <VDivider
-            v-if="index < savedSearches.length - 1"
-            :key="index + 'divider'"
-          />
-        </template>
-      </VList>
+      <ul
+        v-else
+        class="saved-searches-list"
+      >
+        <li
+          v-for="search in savedSearches"
+          :key="search.id"
+          :style="itemStyle"
+          class="search-item"
+        >
+          <div class="search-content">
+            <div class="search-title">
+              <KRouterLink
+                :to="searchResultsRoute(search)"
+                class="notranslate saved-search-link"
+                @click="dialog = false"
+              >
+                {{ search.name }}
+              </KRouterLink>
+            </div>
+            <div
+              class="metadata"
+              :style="{ color: $themeTokens.annotation }"
+            >
+              <span>
+                {{ $formatRelative(search.created, { now: new Date() }) }}
+              </span>
+              <span>
+                {{ $tr('filterCount', { count: searchFilterCount(search) }) }}
+              </span>
+            </div>
+          </div>
+
+          <div class="search-actions">
+            <KIconButton
+              icon="clear"
+              :tooltip="$tr('deleteAction')"
+              @click="handleClickDelete(search.id)"
+            />
+          </div>
+        </li>
+      </ul>
     </KModal>
 
-    <MessageDialog
-      v-model="showDelete"
-      :header="$tr('deleteSearchTitle')"
-      :text="$tr('deleteConfirmation')"
+    <KModal
+      v-if="showDelete"
+      :title="$tr('deleteSearchTitle')"
+      :cancelText="$tr('cancelAction')"
+      :submitText="$tr('deleteAction')"
+      @cancel="handleCancel"
+      @submit="handleDeleteConfirm"
     >
-      <template #buttons>
-        <VBtn
-          flat
-          @click="handleCancel"
-        >
-          {{ $tr('cancelAction') }}
-        </VBtn>
-        <VBtn
-          color="primary"
-          @click="handleDeleteConfirm"
-        >
-          {{ $tr('deleteAction') }}
-        </VBtn>
-      </template>
-    </MessageDialog>
+      <p>{{ $tr('deleteConfirmation') }}</p>
+    </KModal>
   </div>
 
 </template>
@@ -87,16 +80,10 @@
 <script>
 
   import { mapActions, mapGetters } from 'vuex';
-  import MessageDialog from 'shared/views/MessageDialog';
-  import IconButton from 'shared/views/IconButton';
 
   export default {
     name: 'SavedSearchesModal',
     inject: ['RouteNames'],
-    components: {
-      MessageDialog,
-      IconButton,
-    },
     props: {
       value: {
         type: Boolean,
@@ -120,6 +107,11 @@
           this.$emit('input', value);
         },
       },
+      itemStyle() {
+        return {
+          borderBottom: `1px solid ${this.$themeTokens.fineLine}`,
+        };
+      },
     },
     mounted() {
       this.loading = true;
@@ -189,14 +181,48 @@
 
 <style scoped lang="scss">
 
+  .saved-searches-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .search-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 0;
+
+    &:last-child {
+      border-bottom: unset;
+    }
+  }
+
+  .search-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .search-title {
+    margin-bottom: 4px;
+  }
+
+  .saved-search-link {
+    font-weight: 600;
+  }
+
   .metadata {
-    color: var(--v-grey-darken2);
+    font-size: 14px;
 
     span:not(:last-child)::after {
       margin: 0 4px;
-      color: var(--v-grey-base);
       content: '•';
     }
   }
 
+  .search-actions {
+    flex-shrink: 0;
+    margin-left: 16px;
+  }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/MessageDialog.vue b/contentcuration/contentcuration/frontend/shared/views/MessageDialog.vue
deleted file mode 100644
index 833e9a6022..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/MessageDialog.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-
-  <VDialog
-    v-model="dialog"
-    v-bind="$attrs"
-    width="400"
-  >
-    <VCard class="px-2 py-3">
-      <VCardTitle class="pb-0">
-        <h1 class="font-weight-bold title">
-          {{ header }}
-        </h1>
-      </VCardTitle>
-
-      <VCardText
-        class="pb-4 pt-3"
-        data-test="text"
-      >
-        <p>{{ text }}</p>
-        <slot></slot>
-      </VCardText>
-      <VCardActions data-test="buttons">
-        <VSpacer />
-        <slot
-          name="buttons"
-          :close="close"
-        ></slot>
-      </VCardActions>
-    </VCard>
-  </VDialog>
-
-</template>
-
-
-<script>
-
-  export default {
-    name: 'MessageDialog',
-    props: {
-      value: {
-        type: Boolean,
-        default: false,
-      },
-      header: {
-        type: String,
-        required: true,
-      },
-      text: {
-        type: String,
-        required: false,
-        default: '',
-      },
-    },
-    computed: {
-      dialog: {
-        get() {
-          return this.value;
-        },
-        set(value) {
-          this.$emit('input', value);
-        },
-      },
-    },
-    methods: {
-      close() {
-        this.dialog = false;
-      },
-    },
-  };
-
-</script>
-
-
-<style lang="scss" scoped>
-
-  p {
-    font-size: 12pt;
-  }
-
-  ::v-deep .v-btn {
-    font-weight: bold;
-  }
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/messageDialog.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/messageDialog.spec.js
deleted file mode 100644
index e86a1b2c1b..0000000000
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/messageDialog.spec.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { mount } from '@vue/test-utils';
-import MessageDialog from '../MessageDialog';
-
-function makeWrapper(options) {
-  return mount(MessageDialog, {
-    propsData: {
-      header: 'header',
-      text: 'text',
-    },
-    ...options,
-  });
-}
-
-describe('messageDialog', () => {
-  it('header and text should render properly from props', () => {
-    const wrapper = makeWrapper();
-    expect(wrapper.find('[data-test="text"]').text()).toEqual('text');
-  });
-  it('slots should render content correctly', () => {
-    const wrapper = makeWrapper({
-      slots: {
-        default: ['new text'],
-        buttons: ['buttons'],
-      },
-    });
-    expect(wrapper.find('[data-test="text"]').text()).toContain('new text');
-    expect(wrapper.find('[data-test="buttons"]').text()).toContain('buttons');
-  });
-  it('close should emit an input event to close the modal', () => {
-    const wrapper = makeWrapper();
-    wrapper.vm.close();
-    expect(wrapper.emitted('input')[0][0]).toBe(false);
-  });
-});