diff --git a/components/PromptModal.vue b/components/PromptModal.vue
index c7c7947376..6720d2eefb 100644
--- a/components/PromptModal.vue
+++ b/components/PromptModal.vue
@@ -4,16 +4,13 @@ import { isArray } from '@/utils/array';
 import AsyncButton from '@/components/AsyncButton';
 import Card from '@/components/Card';
 import Banner from '@/components/Banner';
-import SaveAsRKETemplateDialog from '@/components/SaveAsRKETemplateDialog';
+import { importDialog } from '@/utils/dynamic-importer';
 
 export default {
   components: {
     Card,
     AsyncButton,
     Banner,
-    // Need to include all of the dialogs here
-    // Would be nice if this could be done dynamically
-    SaveAsRKETemplateDialog,
   },
 
   data() {
@@ -38,7 +35,7 @@ export default {
     },
 
     component() {
-      return this.modalData?.component;
+      return importDialog(this.modalData?.component);
     },
   },
 
diff --git a/components/SaveAsRKETemplateDialog.vue b/components/dialog/SaveAsRKETemplateDialog.vue
similarity index 100%
rename from components/SaveAsRKETemplateDialog.vue
rename to components/dialog/SaveAsRKETemplateDialog.vue
diff --git a/utils/dynamic-importer.js b/utils/dynamic-importer.js
index fa9cb28f52..e7c46a0146 100644
--- a/utils/dynamic-importer.js
+++ b/utils/dynamic-importer.js
@@ -66,3 +66,11 @@ export function loadProduct(name) {
   // Note: directly returns the import, not a function
   return import(/* webpackChunkName: "product" */ `@/config/product/${ name }`);
 }
+
+export function importDialog(name) {
+  if ( !name ) {
+    throw new Error('Name required');
+  }
+
+  return () => import(/* webpackChunkName: "dialog" */ `@/components/dialog/${name}`);
+}