diff --git a/src/main.ts b/src/main.ts
index 5a175fa..5f87f9f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,7 +2,7 @@ import {MarkdownView, Notice, parseYaml, Plugin, stringifyYaml, TFile, TFolder}
 import {getDefaultSettings, MediaDbPluginSettings, MediaDbSettingTab} from './settings/Settings';
 import {APIManager} from './api/APIManager';
 import {MediaTypeModel} from './models/MediaTypeModel';
-import {dateTimeToString, markdownTable, replaceIllegalFileNameCharactersInString} from './utils/Utils';
+import {CreateNoteOptions, dateTimeToString, markdownTable, replaceIllegalFileNameCharactersInString} from './utils/Utils';
 import {OMDbAPI} from './api/apis/OMDbAPI';
 import {MALAPI} from './api/apis/MALAPI';
 import {WikipediaAPI} from './api/apis/WikipediaAPI';
@@ -179,9 +179,9 @@ export default class MediaDbPlugin extends Plugin {
 				return;
 			}
 
-			proceed = await this.modalHelper.openPreviewModal(selectResults, async () => {
-				return true;
-			})
+			proceed = await this.modalHelper.openPreviewModal({elements: selectResults}, async (previewModalData) => {
+				return previewModalData.confirmed;
+			});
 		}
 
 		await this.createMediaDbNotes(selectResults);
@@ -194,14 +194,14 @@ export default class MediaDbPlugin extends Plugin {
 		while (!proceed) {
 			idSearchResult = await this.modalHelper.openIdSearchModal({}, async (idSearchModalData) => {
 				return await this.apiManager.queryDetailedInfoById(idSearchModalData.query, idSearchModalData.api);
-			})
+			});
 			if (!idSearchResult) {
 				return;
 			}
 
-			proceed = await this.modalHelper.openPreviewModal([idSearchResult], async () => {
-				return true;
-			})
+			proceed = await this.modalHelper.openPreviewModal({elements: [idSearchResult]}, async (previewModalData) => {
+				return previewModalData.confirmed;
+			});
 		}
 
 		await this.createMediaDbNoteFromModel(idSearchResult, {attachTemplate: true, openNote: true});
@@ -226,11 +226,11 @@ export default class MediaDbPlugin extends Plugin {
 		return detailModels;
 	}
 
-	async createMediaDbNoteFromModel(mediaTypeModel: MediaTypeModel, options: { attachTemplate?: boolean, attachFile?: TFile, openNote?: boolean }): Promise<void> {
+	async createMediaDbNoteFromModel(mediaTypeModel: MediaTypeModel, options: CreateNoteOptions): Promise<void> {
 		try {
 			console.debug('MDB | creating new note');
 
-			let fileContent = await this.generateMediaDbNoteContents(mediaTypeModel, {attachTemplate: options.attachTemplate, attachFile: options.attachFile});
+			let fileContent = await this.generateMediaDbNoteContents(mediaTypeModel, options);
 
 			await this.createNote(this.mediaTypeManager.getFileName(mediaTypeModel), fileContent, options.openNote);
 		} catch (e) {
@@ -239,15 +239,13 @@ export default class MediaDbPlugin extends Plugin {
 		}
 	}
 
-	async generateMediaDbNoteContents(mediaTypeModel: MediaTypeModel, options: {attachTemplate?: boolean, attachFile?: TFile}) {
+	async generateMediaDbNoteContents(mediaTypeModel: MediaTypeModel, options: CreateNoteOptions) {
 		let fileMetadata = this.modelPropertyMapper.convertObject(mediaTypeModel.toMetaDataObject());
 		let fileContent = '';
+		const template = options.attachTemplate ? await this.mediaTypeManager.getTemplate(mediaTypeModel, this.app) : '';
 
 		({fileMetadata, fileContent} = await this.attachFile(fileMetadata, fileContent, options.attachFile));
-		({
-			fileMetadata,
-			fileContent,
-		} = await this.attachTemplate(fileMetadata, fileContent, options.attachTemplate ? await this.mediaTypeManager.getTemplate(mediaTypeModel, this.app) : ''));
+		({fileMetadata, fileContent} = await this.attachTemplate(fileMetadata, fileContent, template));
 
 		fileContent = `---\n${this.settings.useCustomYamlStringifier ? YAMLConverter.toYaml(fileMetadata) : stringifyYaml(fileMetadata)}---\n` + fileContent;
 		return fileContent;
diff --git a/src/modals/MediaDbPreviewModal.ts b/src/modals/MediaDbPreviewModal.ts
index 51268ca..6e4934d 100644
--- a/src/modals/MediaDbPreviewModal.ts
+++ b/src/modals/MediaDbPreviewModal.ts
@@ -1,70 +1,78 @@
-import { MarkdownRenderer, Modal, Setting, TFile } from "obsidian";
-import MediaDbPlugin from "src/main";
-import { MediaTypeModel } from "src/models/MediaTypeModel";
+import {ButtonComponent, MarkdownRenderer, Modal, Setting} from 'obsidian';
+import MediaDbPlugin from 'src/main';
+import {MediaTypeModel} from 'src/models/MediaTypeModel';
+import {PREVIEW_MODAL_DEFAULT_OPTIONS, PreviewModalData, PreviewModalOptions} from '../utils/ModalHelper';
+import {CreateNoteOptions} from '../utils/Utils';
 
 export class MediaDbPreviewModal extends Modal {
-    selectedSearchResults: MediaTypeModel[];
-    options: { attachTemplate: boolean, attachFile: TFile};
-    submitCallback: (res: boolean) => void;
-    closeCallback: (err?: Error) => void;
-    plugin: MediaDbPlugin;
-    searchBtn: any;
-    cancelButton: any;
-    submitButton: any;
-    busy: any;
+	plugin: MediaDbPlugin;
 
-    constructor(plugin: MediaDbPlugin, mediaTypeModel: MediaTypeModel[], options: any) {
-        super(plugin.app);
-        this.plugin = plugin;
-        this.selectedSearchResults = mediaTypeModel;
-        this.options = options;
-    }
+	createNoteOptions: CreateNoteOptions;
+	elements: MediaTypeModel[];
+	isBusy: boolean;
+	title: string;
+	cancelButton: ButtonComponent;
+	submitButton: ButtonComponent;
 
-    setSubmitCallback(submitCallback: (res: boolean) => void): void {
-        this.submitCallback = submitCallback;
-    }
+	submitCallback: (previewModalData: PreviewModalData) => void;
+	closeCallback: (err?: Error) => void;
 
-    setCloseCallback(closeCallback: (err?: Error) => void): void {
-        this.closeCallback = closeCallback;
-    }
+	constructor(plugin: MediaDbPlugin, previewModalOptions: PreviewModalOptions) {
+		previewModalOptions = Object.assign({}, PREVIEW_MODAL_DEFAULT_OPTIONS, previewModalOptions);
 
-    async preview(): Promise<void> {
-        let { contentEl } = this;
-        for (let result of this.selectedSearchResults) {
-            let fileContent = await this.plugin.generateMediaDbNoteContents(result, { attachTemplate: this.options.attachTemplate, attachFile: this.options.attachFile });
-            this.contentEl.createEl("h3", {text: result.englishTitle});
-            const fileDiv = this.contentEl.createDiv();
-            fileContent = `\n${fileContent}\n`;
-            MarkdownRenderer.renderMarkdown(fileContent, fileDiv, null, null);
-        }
+		super(plugin.app);
 
-        contentEl.createDiv({ cls: 'media-db-plugin-spacer' });
+		this.plugin = plugin;
+		this.title = previewModalOptions.modalTitle;
+		this.elements = previewModalOptions.elements;
+		this.createNoteOptions = previewModalOptions.createNoteOptions;
+	}
 
-        const bottomSettingRow = new Setting(contentEl);
-        bottomSettingRow.addButton(btn => {
-            btn.setButtonText('Cancel');
-            btn.onClick(() => this.closeCallback());
-            btn.buttonEl.addClass('media-db-plugin-button');
-            this.cancelButton = btn;
-        });
-        bottomSettingRow.addButton(btn => {
-            btn.setButtonText('Ok');
-            btn.setCta();
-            btn.onClick(() => this.submitCallback(true));
-            btn.buttonEl.addClass('media-db-plugin-button');
-            this.submitButton = btn;
-        })
-    }
+	setSubmitCallback(submitCallback: (previewModalData: PreviewModalData) => void): void {
+		this.submitCallback = submitCallback;
+	}
 
-    submit() {
-        if (!this.busy) {
-            this.busy = true;
-            this.submitButton.setButtonText('Creating entry...');
-            this.submitCallback(true);
-        }
-    }
+	setCloseCallback(closeCallback: (err?: Error) => void): void {
+		this.closeCallback = closeCallback;
+	}
 
-    onOpen(): void {
-        this.preview()
-    }
-}
\ No newline at end of file
+	async preview(): Promise<void> {
+		let {contentEl} = this;
+		contentEl.addClass('media-db-plugin-preview-modal');
+
+		contentEl.createEl('h2', {text: this.title});
+
+		const previewWrapper = contentEl.createDiv({cls: 'media-db-plugin-preview-wrapper'});
+
+		for (let result of this.elements) {
+			previewWrapper.createEl('h3', {text: result.englishTitle});
+			const fileDiv = previewWrapper.createDiv();
+
+			let fileContent = await this.plugin.generateMediaDbNoteContents(result, this.createNoteOptions);
+			fileContent = `\n${fileContent}\n`;
+
+			MarkdownRenderer.renderMarkdown(fileContent, fileDiv, null, null);
+		}
+
+		contentEl.createDiv({cls: 'media-db-plugin-spacer'});
+
+		const bottomSettingRow = new Setting(contentEl);
+		bottomSettingRow.addButton(btn => {
+			btn.setButtonText('Cancel');
+			btn.onClick(() => this.closeCallback());
+			btn.buttonEl.addClass('media-db-plugin-button');
+			this.cancelButton = btn;
+		});
+		bottomSettingRow.addButton(btn => {
+			btn.setButtonText('Ok');
+			btn.setCta();
+			btn.onClick(() => this.submitCallback({confirmed: true}));
+			btn.buttonEl.addClass('media-db-plugin-button');
+			this.submitButton = btn;
+		});
+	}
+
+	onOpen(): void {
+		this.preview();
+	}
+}
diff --git a/src/modals/SelectModal.ts b/src/modals/SelectModal.ts
index 5f726ee..b3a3a87 100644
--- a/src/modals/SelectModal.ts
+++ b/src/modals/SelectModal.ts
@@ -79,11 +79,11 @@ export abstract class SelectModal<T> extends Modal {
 	async onOpen() {
 		const {contentEl} = this;
 
+		contentEl.addClass('media-db-plugin-select-modal');
+
 		contentEl.createEl('h2', {text: this.title});
 		contentEl.createEl('p', {text: this.description});
 
-		contentEl.addClass('media-db-plugin-select-modal');
-
 		this.elementWrapper = contentEl.createDiv({cls: 'media-db-plugin-select-wrapper'});
 		this.elementWrapper.tabIndex = 0;
 
diff --git a/src/settings/PropertyMappingModelComponent.svelte b/src/settings/PropertyMappingModelComponent.svelte
index a0a3b68..6fe5227 100644
--- a/src/settings/PropertyMappingModelComponent.svelte
+++ b/src/settings/PropertyMappingModelComponent.svelte
@@ -46,16 +46,16 @@
 						<div class="media-db-plugin-property-mapping-to">
 							<input type="text" spellcheck="false" bind:value="{property.newProperty}">
 						</div>
-					{ /if   }
-				{ /if   }
+					{ /if    }
+				{ /if    }
 			</div>
-		{ /each   }
+		{ /each    }
 	</div>
 	{ #if !validationResult?.res }
 		<div class="media-db-plugin-property-mapping-validation">
 			{validationResult?.err?.message}
 		</div>
-	{ /if   }
+	{ /if    }
 	<button
 		class="media-db-plugin-property-mappings-save-button {validationResult?.res ? 'mod-cta' : 'mod-muted'}"
 		on:click={() => { if(model.validate().res) save(model) }}>Save
diff --git a/src/settings/PropertyMappingModelsComponent.svelte b/src/settings/PropertyMappingModelsComponent.svelte
index 3bb71b0..3e7e7fa 100644
--- a/src/settings/PropertyMappingModelsComponent.svelte
+++ b/src/settings/PropertyMappingModelsComponent.svelte
@@ -3,10 +3,7 @@
 	import PropertyMappingModelComponent from './PropertyMappingModelComponent.svelte';
 
 	export let models: PropertyMappingModel[] = [];
-
 	export let save: (model: PropertyMappingModel) => void;
-
-	// TODO: validate all the mappings before saving.
 </script>
 
 <style>
@@ -16,7 +13,7 @@
 <div class="setting-item" style="display: flex; gap: 10px; flex-direction: column; align-items: stretch;">
 	{ #each models as model }
 		<PropertyMappingModelComponent model={model} save={save}></PropertyMappingModelComponent>
-	{ /each   }
+	{ /each    }
 
 	<!--
 		<pre>{JSON.stringify(models, null, 4)}</pre>
diff --git a/src/utils/ModalHelper.ts b/src/utils/ModalHelper.ts
index 9e432dd..8ca3bee 100644
--- a/src/utils/ModalHelper.ts
+++ b/src/utils/ModalHelper.ts
@@ -4,7 +4,8 @@ import {MediaTypeModel} from '../models/MediaTypeModel';
 import {MediaDbSearchResultModal} from '../modals/MediaDbSearchResultModal';
 import {Notice} from 'obsidian';
 import MediaDbPlugin from '../main';
-import { MediaDbPreviewModal } from 'src/modals/MediaDbPreviewModal';
+import {MediaDbPreviewModal} from 'src/modals/MediaDbPreviewModal';
+import {CreateNoteOptions} from './Utils';
 
 
 export enum ModalResultCode {
@@ -47,10 +48,21 @@ export interface SelectModalResult {
 	error?: Error,
 }
 
+/**
+ * Object containing the data {@link ModalHelper.createPreviewModal} returns.
+ * On {@link ModalResultCode.SUCCESS} this contains {@link PreviewModalData}.
+ * On {@link ModalResultCode.ERROR} this contains a reference to that error.
+ */
+export interface PreviewModalResult {
+	code: ModalResultCode.SUCCESS | ModalResultCode.CLOSE | ModalResultCode.ERROR,
+	data?: PreviewModalData,
+	error?: Error,
+}
+
 /**
  * The data the advanced search modal returns.
- * query: the query string
- * apis: the selected APIs
+ * - query: the query string
+ * - apis: the selected APIs
  */
 export interface AdvancedSearchModalData {
 	query: string,
@@ -59,8 +71,8 @@ export interface AdvancedSearchModalData {
 
 /**
  * The data the id search modal returns.
- * query: the query string
- * apis: the selected APIs
+ * - query: the query string
+ * - apis: the selected APIs
  */
 export interface IdSearchModalData {
 	query: string,
@@ -69,17 +81,25 @@ export interface IdSearchModalData {
 
 /**
  * The data the select modal returns.
- * selected: the selected items
+ * - selected: the selected items
  */
 export interface SelectModalData {
 	selected: MediaTypeModel[],
 }
 
+/**
+ * The data the preview modal returns.
+ * - confirmed: whether the selected element has been confirmed
+ */
+export interface PreviewModalData {
+	confirmed: boolean,
+}
+
 /**
  * Options for the advanced search modal.
- * modalTitle: the title of the modal
- * preselectedAPIs: a list of preselected APIs
- * prefilledSearchString: prefilled query
+ * - modalTitle: the title of the modal
+ * - preselectedAPIs: a list of preselected APIs
+ * - prefilledSearchString: prefilled query
  */
 export interface AdvancedSearchModalOptions {
 	modalTitle?: string,
@@ -89,9 +109,9 @@ export interface AdvancedSearchModalOptions {
 
 /**
  * Options for the id search modal.
- * modalTitle: the title of the modal
- * preselectedAPIs: a list of preselected APIs
- * prefilledSearchString: prefilled query
+ * - modalTitle: the title of the modal
+ * - preselectedAPIs: a list of preselected APIs
+ * - prefilledSearchString: prefilled query
  */
 export interface IdSearchModalOptions {
 	modalTitle?: string,
@@ -101,10 +121,10 @@ export interface IdSearchModalOptions {
 
 /**
  * Options for the select modal.
- * modalTitle: the title of the modal
- * elements: the elements the user can select from
- * multiSelect: whether to allow multiselect
- * skipButton: whether to add a skip button to the modal
+ * - modalTitle: the title of the modal
+ * - elements: the elements the user can select from
+ * - multiSelect: whether to allow multiselect
+ * - skipButton: whether to add a skip button to the modal
  */
 export interface SelectModalOptions {
 	modalTitle?: string,
@@ -113,6 +133,17 @@ export interface SelectModalOptions {
 	skipButton?: boolean,
 }
 
+/**
+ * Options for the preview modal.
+ * - modalTitle: the title of the modal
+ * - elements: the elements to preview
+ */
+export interface PreviewModalOptions {
+	modalTitle?: string,
+	elements?: MediaTypeModel[],
+	createNoteOptions?: CreateNoteOptions,
+}
+
 export const ADVANCED_SEARCH_MODAL_DEFAULT_OPTIONS: AdvancedSearchModalOptions = {
 	modalTitle: 'Media DB Advanced Search',
 	preselectedAPIs: [],
@@ -132,6 +163,12 @@ export const SELECT_MODAL_OPTIONS_DEFAULT: SelectModalOptions = {
 	skipButton: false,
 };
 
+export const PREVIEW_MODAL_DEFAULT_OPTIONS: PreviewModalOptions = {
+	modalTitle: 'Media DB Preview',
+	elements: [],
+	createNoteOptions: {attachTemplate: true},
+};
+
 /**
  * A class providing multiple usefull functions for dealing with the plugins modals.
  */
@@ -332,33 +369,42 @@ export class ModalHelper {
 		}
 	}
 
-	async createPreviewModal(mediaTypeModel: MediaTypeModel[]): Promise<{ result: boolean, previewModal: MediaDbPreviewModal }> {
+	async createPreviewModal(previewModalOptions: PreviewModalOptions): Promise<{ previewModalResult: PreviewModalResult, previewModal: MediaDbPreviewModal }> {
 		//todo: handle attachFile for existing files
-		const modal = new MediaDbPreviewModal(this.plugin, mediaTypeModel, { attachTemplate: true, attachFile: false });
-		const booleanResult: boolean = await new Promise((resolve, reject) => {
-			modal.setSubmitCallback(res => resolve(res));
+		const modal = new MediaDbPreviewModal(this.plugin, previewModalOptions);
+		const res: PreviewModalResult = await new Promise((resolve, reject) => {
+			modal.setSubmitCallback(res => resolve({code: ModalResultCode.SUCCESS, data: res}));
 			modal.setCloseCallback(err => {
 				if (err) {
-					reject(err);
+					resolve({code: ModalResultCode.ERROR, error: err});
 				}
-				resolve(undefined);
+				resolve({code: ModalResultCode.CLOSE});
 			});
 
 			modal.open();
 		});
-		return { result: booleanResult, previewModal: modal };
+		return {previewModalResult: res, previewModal: modal};
 	}
 
-	async openPreviewModal(mediaModels: MediaTypeModel[], submitCallback: (result: boolean) => Promise<boolean>): Promise<boolean> {
-		const { result, previewModal } = await this.createPreviewModal(mediaModels);
-		if (!result) {
+	async openPreviewModal(previewModalOptions: PreviewModalOptions, submitCallback: (previewModalData: PreviewModalData) => Promise<boolean>): Promise<boolean> {
+		const {previewModalResult, previewModal} = await this.createPreviewModal(previewModalOptions);
+
+		if (previewModalResult.code === ModalResultCode.ERROR) {
+			// there was an error in the modal itself
+			console.warn(previewModalResult.error);
+			new Notice(previewModalResult.error.toString());
 			previewModal.close();
-			return;
+			return undefined;
+		}
+
+		if (previewModalResult.code === ModalResultCode.CLOSE) {
+			// modal is already being closed
+			return undefined;
 		}
 
 		try {
 			let callbackRes: boolean;
-			callbackRes = await submitCallback(result);
+			callbackRes = await submitCallback(previewModalResult.data);
 			previewModal.close();
 			return callbackRes;
 		} catch (e) {
diff --git a/src/utils/Utils.ts b/src/utils/Utils.ts
index 7dc60d2..ac65955 100644
--- a/src/utils/Utils.ts
+++ b/src/utils/Utils.ts
@@ -1,4 +1,5 @@
 import {MediaTypeModel} from '../models/MediaTypeModel';
+import {TFile} from 'obsidian';
 
 
 export const pluginName: string = 'obsidian-media-db-plugin';
@@ -159,12 +160,18 @@ export function dateTimeToString(dateTime: Date) {
 	return `${dateToString(dateTime)} ${timeToString(dateTime)}`;
 }
 
+/**
+ * @deprecated
+ */
 export class UserCancelError extends Error {
 	constructor(message: string) {
 		super(message);
 	}
 }
 
+/**
+ * @deprecated
+ */
 export class UserSkipError extends Error {
 	constructor(message: string) {
 		super(message);
@@ -194,3 +201,14 @@ export class PropertyMappingNameConflictError extends Error {
 		super(message);
 	}
 }
+
+/**
+ * - attachTemplate: whether to attach the template (DEFAULT: false)
+ * - attachFie: a file to attach (DEFAULT: undefined)
+ * - openNote: whether to open the note after creation (DEFAULT: false)
+ */
+export interface CreateNoteOptions {
+	attachTemplate?: boolean,
+	attachFile?: TFile,
+	openNote?: boolean,
+}
diff --git a/styles.css b/styles.css
index 3414a7c..f30748b 100644
--- a/styles.css
+++ b/styles.css
@@ -52,6 +52,16 @@ small.media-db-plugin-list-text{
 	background: var(--background-secondary-alt);
 }
 
+.media-db-plugin-preview-modal {
+	display: flex;
+	flex-direction: column;
+}
+
+.media-db-plugin-preview-wrapper {
+	flex: 1;
+	overflow-y: auto;
+}
+
 .media-db-plugin-spacer {
 	margin-bottom: 10px;
 }