diff --git a/src/components/dynamic-editor.vue b/src/components/dynamic-editor.vue
index 5fa2eb2ad..a2152f5db 100644
--- a/src/components/dynamic-editor.vue
+++ b/src/components/dynamic-editor.vue
@@ -92,6 +92,9 @@
                     :centerSlide="centerSlide"
                     :dynamicSelected="dynamicSelected"
                     @slide-edit="$emit('slide-edit')"
+                    @shared-asset="(oppositeAssetPath: string, sharedAssetPath: string, oppositeLang: string) => {
+                        $emit('shared-asset', oppositeAssetPath, sharedAssetPath, oppositeLang);
+                    }"
                 ></component>
             </div>
         </div>
diff --git a/src/components/editor.vue b/src/components/editor.vue
index 3e883825d..b56a13762 100644
--- a/src/components/editor.vue
+++ b/src/components/editor.vue
@@ -242,6 +242,14 @@
                     @slide-change="selectSlide"
                     @slides-updated="updateSlides"
                     @open-metadata-modal="$vfm.open('metadata-edit-modal')"
+                    @shared-asset="(oppositeAssetPath: string, sharedAssetPath: string, oppositeLang: string) => {
+                        $emit('shared-asset', oppositeAssetPath, sharedAssetPath, oppositeLang);
+                    }"
+                    @process-panel="
+                        (panel, callback, ...args) => {
+                            $emit('process-panel', panel, callback, ...args);
+                        }
+                    "
                     :configFileStructure="configFileStructure"
                     :lang="configLang"
                     :sourceCounts="sourceCounts"
@@ -259,6 +267,14 @@
                     @slides-updated="updateSlides"
                     @open-metadata-modal="$vfm.open('metadata-edit-modal')"
                     @close-sidebar="closeSidebar"
+                    @shared-asset="(oppositeAssetPath: string, sharedAssetPath: string, oppositeLang: string) => {
+                        $emit('shared-asset', oppositeAssetPath, sharedAssetPath, oppositeLang);
+                    }"
+                    @process-panel="
+                        (panel, callback, ...args) => {
+                            $emit('process-panel', panel, callback, ...args);
+                        }
+                    "
                     :configFileStructure="configFileStructure"
                     :lang="configLang"
                     :sourceCounts="sourceCounts"
@@ -278,6 +294,9 @@
                     :slideIndex="slideIndex"
                     :isLast="slideIndex === slides.length - 1"
                     :uid="uuid"
+                    @shared-asset="(oppositeAssetPath: string, sharedAssetPath: string, oppositeLang: string) => {
+                        $emit('shared-asset', oppositeAssetPath, sharedAssetPath, oppositeLang);
+                    }"
                     @slide-change="selectSlide"
                     @slide-edit="onSlidesEdited"
                     @custom-slide-updated="updateCustomSlide"
@@ -312,14 +331,17 @@
 <script lang="ts">
 import { Options, Prop, Vue, Watch } from 'vue-property-decorator';
 import {
+    BasePanel,
     ConfigFileStructure,
     HelpSection,
+    ImagePanel,
     MetadataContent,
     MultiLanguageSlide,
     Slide,
     SourceCounts,
     StoryRampConfig,
-    TextPanel
+    TextPanel,
+    VideoPanel
 } from '@/definitions';
 import { VueSpinnerOval } from 'vue3-spinners';
 import axios from 'axios';
@@ -448,15 +470,19 @@ export default class EditorV extends Vue {
             panel: [{ type: 'loading-page' }, { type: 'loading-page' }]
         };
 
+        const newLang = lang || this.configLang || 'en';
+        if (this.configLang !== newLang) {
+            this.$emit('lang-change', newLang);
+        }
+
         setTimeout(() => {
             if (index === -1 || !this.loadSlides) {
                 this.currentSlide = '';
             } else {
-                const selectedLang = (lang ?? this.configLang) as keyof MultiLanguageSlide;
+                const selectedLang = newLang as keyof MultiLanguageSlide;
                 const selectedSlide = this.loadSlides[index][selectedLang];
                 this.currentSlide = selectedSlide ?? '';
             }
-
             this.slideIndex = index;
             (this.$refs.slide as SlideEditorV).panelIndex = 0;
             (this.$refs.slide as SlideEditorV).advancedEditorView = false;
diff --git a/src/components/helpers/image-preview.vue b/src/components/helpers/image-preview.vue
index bd25eaf60..a97c2b956 100644
--- a/src/components/helpers/image-preview.vue
+++ b/src/components/helpers/image-preview.vue
@@ -17,7 +17,7 @@
             <div class="flex-grow image-container">
                 <img
                     class="image-file object-cover"
-                    :title="imageFile.id"
+                    :title="imageFile.id.split('/').at(-1)"
                     :src="imageFile.src"
                     :alt="imageFile.altText"
                 />
diff --git a/src/components/image-editor.vue b/src/components/image-editor.vue
index d11713e13..211ba284f 100644
--- a/src/components/image-editor.vue
+++ b/src/components/image-editor.vue
@@ -152,6 +152,7 @@ import { Options, Prop, Vue } from 'vue-property-decorator';
 import { ConfigFileStructure, ImageFile, ImagePanel, PanelType, SlideshowPanel, SourceCounts } from '@/definitions';
 import draggable from 'vuedraggable';
 import ImagePreviewV from './helpers/image-preview.vue';
+import JSZip from 'jszip';
 
 @Options({
     components: {
@@ -208,34 +209,24 @@ export default class ImageEditorV extends Vue {
                 // Check if the config file exists in the ZIP folder first.
                 const assetSrc = `${image.src.substring(image.src.indexOf('/') + 1)}`;
                 const filename = image.src.replace(/^.*[\\/]/, '');
-                const assetFile = this.configFileStructure.zip.file(assetSrc);
+                const compressedAssetFile = this.configFileStructure.zip.file(assetSrc);
                 const assetType = assetSrc.split('.').at(-1);
 
-                if (assetFile) {
-                    if (assetType != 'svg') {
-                        this.imagePreviewPromises.push(
-                            assetFile.async('blob').then((res: Blob) => {
-                                return {
-                                    ...image,
-                                    id: filename ? filename : image.src,
-                                    src: URL.createObjectURL(res)
-                                } as ImageFile;
-                            })
-                        );
-                    } else {
-                        this.imagePreviewPromises.push(
-                            assetFile.async('text').then((res) => {
-                                const imageFile = new File([res], filename, {
+                if (compressedAssetFile) {
+                    this.imagePreviewPromises.push(
+                        compressedAssetFile.async(assetType !== 'svg' ? 'blob' : 'text').then((assetFile) => {
+                            if (assetType === 'svg') {
+                                assetFile = new File([assetFile], filename, {
                                     type: 'image/svg+xml'
                                 });
-                                return {
-                                    ...image,
-                                    id: filename ? filename : image.src,
-                                    src: URL.createObjectURL(imageFile)
-                                } as ImageFile;
-                            })
-                        );
-                    }
+                            }
+                            return {
+                                ...image,
+                                id: image.src,
+                                src: URL.createObjectURL(assetFile)
+                            } as ImageFile;
+                        })
+                    );
                 }
             });
 
@@ -244,36 +235,210 @@ export default class ImageEditorV extends Vue {
                 this.imagePreviews = res;
                 this.imagePreviewsLoading = false;
             });
-
             this.slideshowCaption = this.panel.caption as string;
         }
     }
 
+    // TODO: move method into a plugin. That way it isn't repeated in the metadata/video editors
+    // Converts a file into a promise that resolves to an ArrayBuffer containing the files data
+    readBinaryData(file: File): Promise<ArrayBuffer> {
+        return new Promise((resolve, reject) => {
+            const fileReader = new FileReader();
+            fileReader.onload = () => {
+                resolve(fileReader.result);
+            };
+            fileReader.onerror = () => {
+                reject(new Error('Could not load file reader'));
+            };
+            fileReader.readAsArrayBuffer(file);
+        });
+    }
+
+    // TODO: move method into a plugin. That way it isn't repeated in the metadata/video editors
+    // Converts a file into a promise that resolves to its has, as an array of 8-bit integers
+    obtainHashData(file: File): Promise<Uint8Array> {
+        return this.readBinaryData(file)
+            .then((res) => {
+                res = new Uint8Array(res);
+                return window.crypto.subtle.digest('SHA-256', res);
+            })
+            .then((res) => {
+                res = new Uint8Array(res);
+                return res;
+            });
+    }
+
+    // TODO: move method into a plugin. That way it isn't repeated in the metadata/video editors
+    /**
+     * Helper used to find all instances of the specified file in the specified asset folder
+     * @param file File that was uploaded
+     * @param folder The asset folder withinn which we should be searching
+     * @param checkNested Flag that indicates whether we should consider assets with nested subfolders
+     */
+    filesInAssetFolder(file: File, folder: string, checkNested = true): Array<Promise<string>> {
+        // Here, if a file in the specified folder has the same name and hash as the file uploaded, then we consider the
+        // two to be the same. Otherwise, we consider them to be different. We even consider if the asset is within a
+        // subfolder of the specified folder, so long as the name and hash of the file is the same. There may be more than one
+        // instance of the specified asset in the specified folder, albeit in seperate subfolders, hence why we collect
+        // an array of duplicate asset promises
+        const sharedAssetPromises = [];
+        this.configFileStructure.assets[folder].forEach((relativePath, compressedBinary) => {
+            const assetName = checkNested ? relativePath.split('/').at(-1) : relativePath;
+
+            // Only compare the hashes of two files when they have the exact same name
+            if (assetName === file.name) {
+                sharedAssetPromises.push(
+                    this.compareFiles(file, compressedBinary, assetName).then((fileSame) =>
+                        fileSame ? relativePath : 'N/A'
+                    )
+                );
+            }
+        });
+
+        return sharedAssetPromises;
+    }
+
+    // TODO: move method into a plugin. That way it isn't repeated in the metadata/video editors
+    /**
+     * Compares the hashes of two files
+     * @param file File that was uploaded
+     * @param compressedBinary Compressed binary file from configFileStructure
+     * @param compressedName The name of the compressed binary file
+     */
+    async compareFiles(file: File, compressedBinary: JSZip.JSZipObject, compressedName: string): Promise<boolean> {
+        const fileHash = await this.obtainHashData(file);
+        const compressedType = compressedName.split('.').at(-1);
+
+        return compressedBinary
+            .async(compressedType !== 'svg' ? 'blob' : 'text')
+            .then((assetFile) => {
+                if (compressedType === 'svg') {
+                    assetFile = new File([assetFile], compressedName, {
+                        type: 'image/svg+xml'
+                    });
+                }
+                return this.obtainHashData(assetFile);
+            })
+            .then((hash) => {
+                return hash.join() === fileHash.join();
+            });
+    }
+
+    // TODO: move method into a plugin. That way it isn't repeated in the metadata/video editors
+    // Helper for onFileChange and dropImages. Maps a File object to an ImageFile object
+    async addUploadedFile(file: File): Promise<ImageFile> {
+        const oppositeLang = this.lang === 'en' ? 'fr' : 'en';
+        const sharedAssetPaths = await Promise.all(this.filesInAssetFolder(file, 'shared', false));
+        let inSharedAsset = false;
+        let oppositeSourceCount = 0;
+        let newAssetName = file.name;
+        let uploadSource = `${this.configFileStructure.uuid}/assets/shared/${file.name}`;
+
+        // Should contain either 0 or 1 promise.
+        sharedAssetPaths.forEach((sharedAssetPath) => {
+            inSharedAsset = sharedAssetPath !== 'N/A';
+        });
+
+        // If the asset is already in the shared asset folder, we do not need to do anything. We can assume that it
+        // does not exist in the opposite lang's asset folder (i.e. we assume shared asset system is working correctly)
+        if (!inSharedAsset) {
+            const oppositeAssetPaths = await Promise.all(this.filesInAssetFolder(file, oppositeLang));
+            // If the current promise contains 'N/A', then the current path refers to an asset in the opposite asset
+            // folder that has the same name, but different contents, as the asset uploaded. In this case we do
+            // nothing, as this asset is not a valid duplicate.
+            for (const oppositeAssetPath of oppositeAssetPaths) {
+                if (oppositeAssetPath !== 'N/A') {
+                    const oppositeFileSource = `${this.configFileStructure.uuid}/assets/${oppositeLang}/${oppositeAssetPath}`;
+                    oppositeSourceCount += this.sourceCounts[oppositeFileSource] ?? 0;
+                    this.sourceCounts[oppositeFileSource] = 0;
+                    this.configFileStructure.assets[oppositeLang].remove(oppositeAssetPath);
+
+                    // Add asset to shared folder if asset is yet to be moved to the shared folder. If an asset with the
+                    // same name, but different content, is already in the shared folder, we must give the asset we are
+                    // uploading a unique name. Otherwise the existing asset will be overwritten
+                    if (!inSharedAsset) {
+                        let i = 2;
+                        while (this.configFileStructure.assets['shared'].file(newAssetName)) {
+                            // If the updated name is the same as a file that already exists in the shared asset folder,
+                            // we must compare that file with the uploaded file, since they wouldnt have been compared
+                            // on the first run due to having different names (Such an asset COULD also be in the shared
+                            // or opposite lang asset folder, since a new name is now being used. However we shouldn't
+                            // execute this entire method again just for an edge case like a name change, so we can
+                            // leave this as is for now)
+                            if (i > 2) {
+                                const filesEqual = await this.compareFiles(
+                                    file,
+                                    this.configFileStructure.assets['shared'].file(newAssetName),
+                                    newAssetName
+                                );
+                                if (filesEqual) break;
+                            }
+                            newAssetName = `${file.name.split('.').at(0)}(${i}).${file.name.split('.').at(-1)}`;
+                            i++;
+                        }
+                        uploadSource = `${this.configFileStructure.uuid}/assets/shared/${newAssetName}`;
+                        this.configFileStructure.assets['shared'].file(newAssetName, file);
+                        inSharedAsset = true;
+                    }
+                    this.$emit('shared-asset', oppositeFileSource, uploadSource, oppositeLang); // must be emitted for each duplicate asset
+                }
+            }
+        }
+
+        // If the asset uploaded is in the shared asset folder, then no need to upload to the current langs assets folder
+        if (!inSharedAsset) {
+            const currAssetPaths = await Promise.all(this.filesInAssetFolder(file, this.lang, false));
+            // Should contain either 0 or 1 promise.
+            // Need to use await here
+            for (const currAssetPath of currAssetPaths) {
+                // If asset w/ same name but different contents is in curr lang asset folder, set name in curr lang
+                // asset folder to a unique name, to avoid overwriting an existing file.
+                if (currAssetPath === 'N/A') {
+                    let i = 2;
+                    while (this.configFileStructure.assets[this.lang].file(newAssetName)) {
+                        // If the updated name is the same as a file that already exists in the current langs asset folder,
+                        // we must compare that file with the uploaded file, since they wouldnt have been compared
+                        // on the first run due to having different names
+                        if (i > 2) {
+                            const filesEqual = await this.compareFiles(
+                                file,
+                                this.configFileStructure.assets[this.lang].file(newAssetName),
+                                newAssetName
+                            );
+                            if (filesEqual) break;
+                        }
+                        newAssetName = `${file.name.split('.').at(0)}(${i}).${file.name.split('.').at(-1)}`;
+                        i++;
+                    }
+                }
+            }
+            uploadSource = `${this.configFileStructure.uuid}/assets/${this.lang}/${newAssetName}`;
+            this.configFileStructure.assets[this.lang].file(newAssetName, file);
+        }
+
+        if (this.sourceCounts[uploadSource]) {
+            this.sourceCounts[uploadSource] += 1 + oppositeSourceCount;
+        } else {
+            this.sourceCounts[uploadSource] = 1 + oppositeSourceCount;
+        }
+
+        let imageSrc = URL.createObjectURL(file);
+        return {
+            id: uploadSource,
+            altText: '',
+            caption: '',
+            src: imageSrc
+        };
+    }
+
     onFileChange(e: Event): void {
         // create object URL(s) to display image(s)
         const filelist = Array.from((e.target as HTMLInputElement).files as ArrayLike<File>);
-        this.imagePreviews.push(
-            ...filelist.map((file: File) => {
-                // Add the uploaded images to the product ZIP file.
-                const uploadSource = `${this.configFileStructure.uuid}/assets/${this.lang}/${file.name}`;
-                this.configFileStructure.assets[this.lang].file(file.name, file);
-
-                if (this.sourceCounts[uploadSource]) {
-                    this.sourceCounts[uploadSource] += 1;
-                } else {
-                    this.sourceCounts[uploadSource] = 1;
-                }
-
-                let imageSrc = URL.createObjectURL(file);
-                return {
-                    id: file.name,
-                    altText: '',
-                    caption: '',
-                    src: imageSrc
-                };
-            })
-        );
-        this.onImagesEdited();
+        const filePromises = filelist.map((file: File) => this.addUploadedFile(file));
+        Promise.all(filePromises).then((files) => {
+            this.imagePreviews.push(...files);
+            this.onImagesEdited();
+        });
     }
 
     dropImages(e: DragEvent): void {
@@ -285,41 +450,27 @@ export default class ImageEditorV extends Vue {
                 files = [files[0]];
             }
 
-            this.imagePreviews.push(
-                ...files.map((file: File) => {
-                    // Add the uploaded images to the product ZIP file.
-                    const uploadSource = `${this.configFileStructure.uuid}/assets/${this.lang}/${file.name}`;
-                    this.configFileStructure.assets[this.lang].file(file.name, file);
-
-                    if (this.sourceCounts[uploadSource]) {
-                        this.sourceCounts[uploadSource] += 1;
-                    } else {
-                        this.sourceCounts[uploadSource] = 1;
-                    }
+            const filePromises = files.map((file: File) => this.addUploadedFile(file));
+            Promise.all(filePromises).then((files) => {
+                this.imagePreviews.push(...files);
+                this.onImagesEdited();
+            });
 
-                    let imageSrc = URL.createObjectURL(file);
-                    return {
-                        id: file.name,
-                        altText: '',
-                        caption: '',
-                        src: imageSrc
-                    };
-                })
-            );
             this.dragging = false;
         }
-        this.onImagesEdited();
     }
 
     deleteImage(img: ImageFile): void {
         const idx = this.imagePreviews.findIndex((file: ImageFile) => file.id === img.id);
         if (idx !== -1) {
-            const fileSource = `${this.configFileStructure.uuid}/assets/${this.lang}/${this.imagePreviews[idx].id}`;
+            const assetFolder = this.imagePreviews[idx].id.split('/')[2];
+            const assetSource = this.imagePreviews[idx].id;
+            const assetRelativePath = this.imagePreviews[idx].id.split('/').slice(3).join('/');
 
             // Remove the image from the product ZIP file.
-            this.sourceCounts[fileSource] -= 1;
-            if (this.sourceCounts[fileSource] === 0) {
-                this.configFileStructure.assets[this.lang].remove(this.imagePreviews[idx].id);
+            this.sourceCounts[assetSource] -= 1;
+            if (this.sourceCounts[assetSource] === 0) {
+                this.configFileStructure.assets[assetFolder].remove(assetRelativePath);
                 URL.revokeObjectURL(this.imagePreviews[idx].src);
             }
             this.imagePreviews.splice(idx, 1);
@@ -355,18 +506,20 @@ export default class ImageEditorV extends Vue {
                     // @ts-ignore
                     (this.panel as ImagePanel)[key] = imageFile[key];
                 });
-
-                (this.panel as ImagePanel).src = `${this.configFileStructure.uuid}/assets/${this.lang}/${imageFile.id}`;
+                (this.panel as ImagePanel).src = imageFile.id;
             } else {
                 // Otherwise, convert this to a slideshow panel.
                 this.panel.type = PanelType.Slideshow;
                 this.panel.caption = this.slideshowCaption ?? undefined;
 
-                // Turn each of the image configs into an image panel and add them to the slidesow.
+                // Turn each of the image configs into an image panel and add them to the slideshow.
                 (this.panel as SlideshowPanel).items = this.imagePreviews.map((imageFile: ImageFile) => {
+                    const imageSrc = imageFile.id;
+                    const imageId = imageFile.id.split('/').at(-1);
                     return {
                         ...imageFile,
-                        src: `${this.configFileStructure.uuid}/assets/${this.lang}/${imageFile.id}`,
+                        src: imageSrc,
+                        id: imageId,
                         type: PanelType.Image
                     } as ImagePanel;
                 });
diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
index 59eebfff2..74dfd7e5e 100644
--- a/src/components/metadata-editor.vue
+++ b/src/components/metadata-editor.vue
@@ -499,10 +499,13 @@
                 :configLang="configLang"
                 :saving="saving"
                 :unsavedChanges="unsavedChanges"
+                @shared-asset="updateToSharedAsset"
+                @process-panel="panelHelper"
                 @save-changes="onSave"
                 @save-status="updateSaveStatus"
                 @refresh-config="refreshConfig"
                 @export-product="exportProduct"
+                @lang-change="changeLang"
                 ref="mainEditor"
             >
                 <!-- Metadata editing modal inside the editor -->
@@ -745,7 +748,7 @@ export default class MetadataEditorV extends Vue {
     };
     slides: MultiLanguageSlide[] = [];
     sourceCounts: SourceCounts = {};
-    sessionExpired: boolean = false;
+    sessionExpired = false;
     totalTime = import.meta.env.VITE_APP_CURR_ENV ? Number(import.meta.env.VITE_SESSION_END) : 30;
 
     mounted(): void {
@@ -776,7 +779,6 @@ export default class MetadataEditorV extends Vue {
             this.metadata.tocOrientation = 'vertical';
             this.metadata.returnTop = true;
         }
-
         // Find which view to render based on route
         if (this.$route.name === 'editor') {
             this.loadEditor = true;
@@ -896,12 +898,12 @@ export default class MetadataEditorV extends Vue {
         this.handleSessionTimeout();
     }
 
-    processAsset(asset: string | undefined, name: string): Promise<any> {
-        if (!asset) return Promise.resolve();
+    processAsset(assetPath: string | undefined, name: string): Promise<any> {
+        if (!assetPath) return Promise.resolve();
 
         // Load asset (if provided).
         return new Promise((res) => {
-            const assetSrc = `assets/${this.configLang}/${name}`;
+            const assetSrc = assetPath.split('/').slice(1).join('/'); // Omit product UUID
             const assetFile = this.configFileStructure?.zip.file(assetSrc);
             const assetType = assetSrc.split('.').at(-1);
 
@@ -928,12 +930,12 @@ export default class MetadataEditorV extends Vue {
                 }
             } else {
                 // If it doesn't exist, maybe it's a remote file?
-                fetch(asset).then((data: Response) => {
+                fetch(assetPath).then((data: Response) => {
                     if (data.status !== 404) {
                         data.blob().then((blob: Blob) => {
                             res({
                                 file: new File([blob], name),
-                                preview: asset,
+                                preview: assetPath,
                                 external: true // indicates that this is an external asset
                             });
                         });
@@ -943,9 +945,13 @@ export default class MetadataEditorV extends Vue {
         });
     }
 
+    changeLang(lang: string): void {
+        this.configLang = lang;
+    }
+
     /**
      * Open current editor config as a new Storylines product in new tab.
-     * Note: Preview button on metadata editor will only show when editing an existing product, not cwhen creating a new one
+     * Note: Preview button on metadata editor will only show when editing an existing product, not when creating a new one
      * This is a design decision, can change if we decide that people would want to preview new products for some reason
      */
     preview(): void {
@@ -1007,7 +1013,7 @@ export default class MetadataEditorV extends Vue {
         if (!this.metadata.logoName) {
             config.introSlide.logo.src = '';
         } else if (!this.metadata.logoName.includes('http')) {
-            config.introSlide.logo.src = `${this.uuid}/assets/${this.configLang}/${this.logoImage?.name}`;
+            config.introSlide.logo.src = `${this.uuid}/assets/shared/${this.logoImage?.name}`;
         } else {
             config.introSlide.logo.src = this.metadata.logoName;
         }
@@ -1016,7 +1022,7 @@ export default class MetadataEditorV extends Vue {
         if (!this.metadata.introBgName) {
             config.introSlide.backgroundImage = '';
         } else if (!this.metadata.introBgName.includes('http')) {
-            config.introSlide.backgroundImage = `${this.uuid}/assets/${this.configLang}/${this.introBgImage?.name}`;
+            config.introSlide.backgroundImage = `${this.uuid}/assets/shared/${this.introBgImage?.name}`;
         } else {
             config.introSlide.backgroundImage = this.metadata.introBgName;
         }
@@ -1418,6 +1424,10 @@ export default class MetadataEditorV extends Vue {
                 this.incrementSourceCount((configs[lang] as StoryRampConfig).introSlide.logo.src);
             }
 
+            if (configs[lang].introSlide.backgroundImage) {
+                this.incrementSourceCount((configs[lang] as StoryRampConfig).introSlide.backgroundImage);
+            }
+
             configs[lang]?.slides.forEach((slide) => {
                 if (Object.keys(slide).length !== 0) {
                     (slide as Slide).panel.forEach((panel) => {
@@ -1472,6 +1482,267 @@ export default class MetadataEditorV extends Vue {
         }
     }
 
+    decrementSourceCount(src: string): void {
+        if (this.sourceCounts[src]) {
+            this.sourceCounts[src] -= 1;
+        }
+        if (this.sourceCounts[src] <= 0) {
+            const relativePath = src.split('/').slice(1).join('/');
+            this.configFileStructure.zip.remove(relativePath);
+        }
+    }
+
+    /**
+     * Executes a callback for each ImagePanel/VideoPanel within the provided BasePanel
+     *
+     * @param panel The panel which we are processing
+     * @param callback The callback function that is called on each ImagePanel/VideoPanel in the provided BasePanel
+     * @param callbackArgs The additional argument(s) for the callback function (can be empty)
+     */
+    panelHelper(panel: BasePanel, callback: (panel: ImagePanel | VideoPanel, ...args) => void, ...callbackArgs): void {
+        switch (panel.type) {
+            case 'slideshow':
+                panel.items.forEach((item) => this.panelHelper(item, callback, ...callbackArgs));
+                break;
+            case 'dynamic':
+                panel.children.forEach((child) => this.panelHelper(child.panel, callback, ...callbackArgs));
+                break;
+            case 'image':
+            case 'video':
+                callback(panel, ...callbackArgs);
+        }
+    }
+
+    /**
+     * Updates the source of an asset from the opposite lang's assets folder to the shared assets folder
+     *
+     * @param oppositeAssetPath Path of the asset within the opposite langs asset folder that has been moved
+     * @param sharedAssetName Path of the asset within the shared asset folder
+     * @param oppositeLang Language from which the asset was removed
+     */
+    updateToSharedAsset(oppositeAssetPath: string, sharedAssetPath: string, oppositeLang: string): void {
+        const oppositeConfig = this.configs[oppositeLang];
+
+        const updateAssetSrc = (panel: ImagePanel | VideoPanel, oppositeAssetPath: string, sharedAssetPath: string) => {
+            if (panel.src) {
+                if (panel.src === oppositeAssetPath) {
+                    panel.src = sharedAssetPath;
+                }
+            }
+        };
+
+        // Need to check logo seperately
+        if (oppositeConfig.introSlide.logo.src === oppositeAssetPath) {
+            oppositeConfig.introSlide.logo.src = sharedAssetPath;
+        }
+
+        oppositeConfig?.slides.forEach((slide) => {
+            slide.panel.forEach((panel) => {
+                this.panelHelper(panel, updateAssetSrc, oppositeAssetPath, sharedAssetPath);
+            });
+        });
+
+        this.updateSaveStatus(true);
+    }
+
+    // TODO: move method into a plugin. That way it isn't repeated in the image/video editors
+    // (maybe wait until after migration to composition api is complete?)
+    // Converts a file into a promise that resolves to an ArrayBuffer containing the files data
+    readBinaryData(file: File): Promise<ArrayBuffer> {
+        return new Promise((resolve, reject) => {
+            const fileReader = new FileReader();
+            fileReader.onload = () => {
+                resolve(fileReader.result);
+            };
+            fileReader.onerror = () => {
+                reject(new Error('Could not load file reader'));
+            };
+            fileReader.readAsArrayBuffer(file);
+        });
+    }
+
+    // TODO: move method into a plugin. That way it isn't repeated in the image/video editors
+    // Converts a file into a promise that resolves to its hash, as an array of 8-bit integers
+    obtainHashData(file: File): Promise<Uint8Array> {
+        return this.readBinaryData(file)
+            .then((res) => {
+                res = new Uint8Array(res);
+                return window.crypto.subtle.digest('SHA-256', res);
+            })
+            .then((res) => {
+                res = new Uint8Array(res);
+                return res;
+            });
+    }
+
+    // TODO: move method into a plugin. That way it isn't repeated in the image/video editors
+    /**
+     * Helper used to find all instances of the specified file in the specified asset folder
+     *
+     * @param file File that was uploaded
+     * @param folder The asset folder withinn which we should be searching
+     * @param checkNested Flag that indicates whether we should consider assets with nested subfolders
+     */
+    filesInAssetFolder(file: File, folder: string, checkNested = true): Array<Promise<string>> {
+        // Here, if a file in the specified folder has the same name and hash as the file uploaded, then we consider the
+        // two to be the same. Otherwise, we consider them to be different. We even consider if the asset is within a
+        // subfolder of the specified folder, so long as the name and hash of the file is the same. There may be more than one
+        // instance of the specified asset in the specified folder, albeit in seperate subfolders, hence why we collect
+        // an array of duplicate asset promises
+        const sharedAssetPromises = [];
+        this.configFileStructure.assets[folder].forEach((relativePath, compressedBinary) => {
+            const assetName = checkNested ? relativePath.split('/').at(-1) : relativePath;
+            if (assetName === file.name) {
+                sharedAssetPromises.push(
+                    this.compareFiles(file, compressedBinary, assetName).then((fileSame) =>
+                        fileSame ? relativePath : 'N/A'
+                    )
+                );
+            }
+        });
+
+        return sharedAssetPromises;
+    }
+
+    // TODO: move method into a plugin. That way it isn't repeated in the image/video editors
+    /**
+     * Compares the hashes of two files
+     *
+     * @param file File that was uploaded
+     * @param compressedBinary Compressed binary file from configFileStructure
+     * @param compressedName The name of the compressed binary file
+     */
+    async compareFiles(file: File, compressedBinary: JSZip.JSZipObject, compressedName: string): Promise<boolean> {
+        const fileHash = await this.obtainHashData(file);
+        const compressedType = compressedName.split('.').at(-1);
+
+        return compressedBinary
+            .async(compressedType !== 'svg' ? 'blob' : 'text')
+            .then((assetFile) => {
+                if (compressedType === 'svg') {
+                    assetFile = new File([assetFile], compressedName, {
+                        type: 'image/svg+xml'
+                    });
+                }
+                return this.obtainHashData(assetFile);
+            })
+            .then((hash) => {
+                return hash.join() === fileHash.join();
+            });
+    }
+
+    // TODO: move method into a plugin. That way it isn't repeated in the image/video editors
+    /**
+     * Helper used to upload a new asset for the current langs config. Only needed when uploading a new asset to an
+     * existing config (not when creating a new product). Here, an asset can either be a logo or a background image
+     *
+     * @param asset The asset being uploaded
+     * @param config The config within which the asset was uploaded
+     * @param type The type of asset being uploaded (either a logo or background image)
+     */
+    async uploadAsset(asset: File, config: StoryRampConfig, type: 'logo' | 'backgroundImage'): Promise<void> {
+        const oppositeLang = this.configLang === 'en' ? 'fr' : 'en';
+        const sharedAssetPaths = await Promise.all(this.filesInAssetFolder(asset, 'shared', false));
+        let inSharedAsset = false;
+        let oppositeSourceCount = 0;
+        let newAssetName = asset.name;
+        let uploadSource = `${this.configFileStructure.uuid}/assets/shared/${asset.name}`;
+
+        // Should contain either 0 or 1 promise.
+        sharedAssetPaths.forEach((sharedAssetPath) => {
+            inSharedAsset = sharedAssetPath !== 'N/A';
+        });
+
+        if (!inSharedAsset) {
+            const oppositeAssetPaths = await Promise.all(this.filesInAssetFolder(asset, oppositeLang));
+            // If the current promise is empty, then the current path refers to an asset in the opposite asset
+            // folder that has the same name, but different contents, as the asset uploaded. In this case we do
+            // nothing, as this asset is not a valid duplicate.
+            for (const oppositeAssetPath of oppositeAssetPaths) {
+                if (oppositeAssetPath !== 'N/A') {
+                    const oppositeFileSource = `${this.configFileStructure.uuid}/assets/${oppositeLang}/${oppositeAssetPath}`;
+                    oppositeSourceCount += this.sourceCounts[oppositeFileSource] ?? 0;
+                    this.sourceCounts[oppositeFileSource] = 0;
+                    this.configFileStructure.assets[oppositeLang].remove(oppositeAssetPath);
+
+                    // Add asset to shared folder if asset is yet to be moved to the shared folder. If an asset with the
+                    // same name, but different content, is already in the shared folder, we must give the asset we are
+                    // uploading a unique name. Otherwise the existing asset will be overwritten
+                    if (!inSharedAsset) {
+                        let i = 2;
+                        while (this.configFileStructure.assets['shared'].file(newAssetName)) {
+                            // If the updated name is the same as a file that already exists in the shared asset folder,
+                            // we must compare that file with the uploaded file, since they wouldnt have been compared
+                            // on the first run due to having different names
+                            if (i > 2) {
+                                const filesEqual = await this.compareFiles(
+                                    asset,
+                                    this.configFileStructure.assets[this.configLang].file(newAssetName),
+                                    newAssetName
+                                );
+                                if (filesEqual) break;
+                            }
+                            newAssetName = `${asset.name.split('.').at(0)}(${i}).${asset.name.split('.').at(-1)}`;
+                            i++;
+                        }
+                        uploadSource = `${this.configFileStructure.uuid}/assets/shared/${newAssetName}`;
+                        this.configFileStructure.assets['shared'].file(newAssetName, asset);
+                        inSharedAsset = true;
+                    }
+                    this.updateToSharedAsset(oppositeFileSource, uploadSource, oppositeLang);
+                }
+            }
+        }
+
+        // If the asset uploaded is in the shared asset folder, then no need to upload to the current langs assets folder
+        if (!inSharedAsset) {
+            const currAssetPaths = await Promise.all(this.filesInAssetFolder(asset, this.configLang, false));
+            // Should contain either 0 or 1 promise.
+            for (const currAssetPath of currAssetPaths) {
+                // If asset w/ same name but different contents is in curr lang asset folder, set name in curr lang
+                // asset folder to a unique name, to avoid overwriting an existing file.
+                if (currAssetPath === 'N/A') {
+                    let i = 2;
+                    while (this.configFileStructure.assets[this.configLang].file(newAssetName)) {
+                        // If the updated name is the same as a file that already exists in the current langs asset folder,
+                        // we must compare that file with the uploaded file, since they wouldnt have been compared
+                        // on the first run due to having different names
+                        if (i > 2) {
+                            const filesEqual = await this.compareFiles(
+                                asset,
+                                this.configFileStructure.assets[this.configLang].file(newAssetName),
+                                newAssetName
+                            );
+                            if (filesEqual) break;
+                        }
+                        newAssetName = `${asset.name.split('.').at(0)}(${i}).${asset.name.split('.').at(-1)}`;
+                        i++;
+                    }
+                }
+            }
+            uploadSource = `${this.configFileStructure.uuid}/assets/${this.configLang}/${newAssetName}`;
+            this.configFileStructure.assets[this.configLang].file(newAssetName, asset);
+        }
+
+        // Check if the asset src is the same as before. If it's not, then we increment the source count of the new
+        // asset source. We also decrement source count of previous asset, as it has now been replaced
+        if (type === 'backgroundImage') {
+            if (config.introSlide.backgroundImage !== uploadSource) {
+                this.incrementSourceCount(uploadSource);
+                this.decrementSourceCount(config.introSlide.backgroundImage);
+                this.sourceCounts[uploadSource] += oppositeSourceCount;
+                config.introSlide.backgroundImage = uploadSource;
+            }
+        } else {
+            if (config.introSlide.logo.src !== uploadSource) {
+                this.incrementSourceCount(uploadSource);
+                this.decrementSourceCount(config.introSlide.logo.src);
+                this.sourceCounts[uploadSource] += oppositeSourceCount;
+                config.introSlide.logo.src = uploadSource;
+            }
+        }
+    }
+
     /**
      * Generates or loads a ZIP file and creates required project folders if needed.
      * Returns an object that makes it easy to access any specific folder.
@@ -1487,7 +1758,8 @@ export default class MetadataEditorV extends Vue {
             configs: this.configs as unknown as { [key: string]: StoryRampConfig },
             assets: {
                 en: (assetsFolder as JSZip).folder('en') as JSZip,
-                fr: (assetsFolder as JSZip).folder('fr') as JSZip
+                fr: (assetsFolder as JSZip).folder('fr') as JSZip,
+                shared: (assetsFolder as JSZip).folder('shared') as JSZip
             },
             charts: {
                 en: (chartsFolder as JSZip).folder('en') as JSZip,
@@ -1496,16 +1768,16 @@ export default class MetadataEditorV extends Vue {
             rampConfig: rampConfigFolder as JSZip
         };
 
-        // Upload each file in the `uploadFiles` array to the ZIP folder. This is typically (and currently only) used
-        // for the product logo and the introduction slide background image.
+        // Upload each file in the `uploadFiles` array to the shared ZIP folder (due to cloning of configs in
+        // generateNewConfig()). This is typically (and currently only) used for the product logo and the introduction
+        // slide background image.
         if (uploadFiles !== undefined) {
             uploadFiles.forEach((file) => {
                 if (file) {
-                    this.configFileStructure!.assets[this.configLang].file(file?.name, file);
+                    this.configFileStructure.assets['shared'].file(file?.name, file);
                 }
             });
         }
-
         return this.loadConfig();
     }
 
@@ -1546,7 +1818,7 @@ export default class MetadataEditorV extends Vue {
         // Load in project data.
         if (this.configs[this.configLang]) {
             this.useConfig(this.configs[this.configLang] as StoryRampConfig);
-            this.findSources(this.configs);
+            this.findSources(this.configs); // increments source counts for all panels
             // Update router path
             if (this.reloadExisting) {
                 this.loadEditor = true;
@@ -1577,19 +1849,12 @@ export default class MetadataEditorV extends Vue {
         // Load product logo and the introduction slide background image (if provided).
         const logoAsset = config.introSlide.logo?.src;
         const introBgAsset = config.introSlide.backgroundImage;
-
-        // If the logo source is provided, grab the path without the UUID and the file name.
-
-        const logoPath = logoAsset ? logoAsset.substring(logoAsset.indexOf('/') + 1) : undefined;
         const logoName = logoAsset ? logoAsset.split('/')[logoAsset.split('/').length - 1] : '';
-
-        // Grab the asset file name.
-        const introBgPath = introBgAsset ? introBgAsset.substring(introBgAsset.indexOf('/') + 1) : undefined;
         const introBgName = introBgAsset ? introBgAsset.split('/')[introBgAsset.split('/').length - 1] : '';
 
         // Load in the data from the logo and intro slide background image. If one of these assets is missing, the promise will resolve with undefined.
         Promise.all([
-            this.processAsset(logoPath, logoName).then((logoData) => {
+            this.processAsset(logoAsset, logoName).then((logoData) => {
                 if (logoData) {
                     this.metadata.logoAltText = config.introSlide.logo?.altText ? config.introSlide.logo.altText : '';
                     this.logoImage = logoData.file;
@@ -1601,7 +1866,7 @@ export default class MetadataEditorV extends Vue {
                     this.metadata.logoPreview = '';
                 }
             }),
-            this.processAsset(introBgPath, introBgName).then((introBgData) => {
+            this.processAsset(introBgAsset, introBgName).then((introBgData) => {
                 if (introBgData) {
                     this.introBgImage = introBgData.file;
                     this.metadata.introBgPreview = introBgData.preview;
@@ -1664,10 +1929,10 @@ export default class MetadataEditorV extends Vue {
         const frFileName = `${this.uuid}_fr.json`;
 
         // Replace undefined slides with empty objects
-        this.configs.en!.slides = this.configs.en!.slides.map((slide) => {
+        this.configs.en.slides = this.configs.en?.slides.map((slide) => {
             return slide ?? {};
         });
-        this.configs.fr!.slides = this.configs.fr!.slides.map((slide) => {
+        this.configs.fr.slides = this.configs.fr?.slides.map((slide) => {
             return slide ?? {};
         });
         this.loadSlides(this.configs);
@@ -1822,10 +2087,11 @@ export default class MetadataEditorV extends Vue {
     }
 
     /**
-     * Called when `Save Changes` is pressed on metadata page. Save metadata content fields
-     * to config file. If `publish` is set to true, publish to server as well.
+     * Called when `Save Changes` or `Next` (for existing products only) is pressed on metadata page, as well as when
+     * `Done` is pressed in the metadata editor within editor-main. Save metadata content fields to config file. If
+     * `publish` is set to true, publish to server as well.
      */
-    saveMetadata(publish = false): void {
+    async saveMetadata(publish = false): Promise<void> {
         // update metadata content to existing config only if it has been successfully loaded
         const config = this.configs[this.configLang];
         if (config !== undefined) {
@@ -1852,24 +2118,16 @@ export default class MetadataEditorV extends Vue {
             if (!this.metadata.logoName) {
                 config.introSlide.logo.src = '';
             } else if (!this.metadata.logoName.includes('http')) {
-                config.introSlide.logo.src = `${this.uuid}/assets/${this.configLang}/${this.logoImage?.name}`;
-                this.configFileStructure?.assets[this.configLang].file(
-                    this.logoImage?.name as string,
-                    this.logoImage as File
-                );
+                await this.uploadAsset(this.logoImage as File, config, 'logo');
             } else {
                 config.introSlide.logo.src = this.metadata.logoName;
             }
 
-            // If the introduction slide background image doesn't include HTTP, assume it's a local file.
+            // If the introduction slide's background image doesn't include HTTP, assume it's a local file.
             if (!this.metadata.introBgName) {
                 config.introSlide.backgroundImage = '';
             } else if (!this.metadata.introBgName.includes('http')) {
-                config.introSlide.backgroundImage = `${this.uuid}/assets/${this.configLang}/${this.introBgImage?.name}`;
-                this.configFileStructure?.assets[this.configLang].file(
-                    this.introBgImage?.name as string,
-                    this.introBgImage as File
-                );
+                await this.uploadAsset(this.introBgImage as File, config, 'backgroundImage');
             } else {
                 config.introSlide.backgroundImage = this.metadata.introBgName;
             }
@@ -2095,8 +2353,9 @@ export default class MetadataEditorV extends Vue {
             if (this.loadExisting) {
                 if (this.configs[this.configLang] !== undefined && this.uuid === this.configFileStructure?.uuid) {
                     this.loadEditor = true;
-                    this.saveMetadata(false);
-                    this.updateEditorPath();
+                    this.saveMetadata(false).then(() => {
+                        this.updateEditorPath();
+                    });
                 } else {
                     Message.error(this.$t('editor.editMetadata.message.error.noConfig'));
                 }
diff --git a/src/components/slide-editor.vue b/src/components/slide-editor.vue
index 5fe1b4f9f..2195cfff8 100644
--- a/src/components/slide-editor.vue
+++ b/src/components/slide-editor.vue
@@ -336,7 +336,12 @@
                     ref="editor"
                     :config="currentSlide"
                     @slide-edit="$emit('slide-edit')"
-                    @config-edited="(slideConfig: Slide, save?: boolean = false) => $emit('custom-slide-updated', slideConfig, save, lang)"
+                    @config-edited="(slideConfig: Slide, save?: boolean = false) => {
+                        $emit('custom-slide-updated', slideConfig, save, lang)
+                    }"
+                    @shared-asset="(oppositeAssetPath: string, sharedAssetPath: string, oppositeLang: string) => {
+                        $emit('shared-asset', oppositeAssetPath, sharedAssetPath, oppositeLang);
+                    }"
                     v-if="advancedEditorView"
                 ></custom-editor>
                 <component
@@ -350,6 +355,9 @@
                     :sourceCounts="sourceCounts"
                     :centerSlide="centerSlide"
                     :dynamicSelected="dynamicSelected"
+                    @shared-asset="(oppositeAssetPath: string, sharedAssetPath: string, oppositeLang: string) => {
+                        $emit('shared-asset', oppositeAssetPath, sharedAssetPath, oppositeLang);
+                    }"
                     @slide-edit="(changedFromDefault: boolean = true) => {
                         $emit('slide-edit');
 
@@ -495,7 +503,7 @@ export default class SlideEditorV extends Vue {
         this.centerPanel = this.currentSlide.centerPanel ?? false;
         this.centerSlide = this.currentSlide.centerSlide ?? false;
         this.includeInToc = this.currentSlide.includeInToc ?? true;
-        this.onePanelOnly = this.currentSlide?.rightOnly || this.currentSlide?.panel.length === 1;
+        this.onePanelOnly = this.currentSlide?.rightOnly || this.currentSlide?.panel?.length === 1;
     }
 
     /**
diff --git a/src/components/slide-toc.vue b/src/components/slide-toc.vue
index 4d04d1678..2d3623c63 100644
--- a/src/components/slide-toc.vue
+++ b/src/components/slide-toc.vue
@@ -372,8 +372,8 @@ import {
     DynamicPanel,
     ImagePanel,
     MapPanel,
-    Slide,
     MultiLanguageSlide,
+    Slide,
     SlideshowPanel,
     SourceCounts,
     TextPanel,
@@ -405,7 +405,7 @@ export default class SlideTocV extends Vue {
     @Prop() configFileStructure!: ConfigFileStructure;
     @Prop() lang!: string;
     @Prop() sourceCounts!: SourceCounts;
-    @Prop() closeSidebar!: Function;
+    @Prop() closeSidebar!: () => void;
     @Prop({ default: false }) isMobileSidebar!: boolean;
 
     defaultBlankSlide: Slide = {
@@ -462,6 +462,7 @@ export default class SlideTocV extends Vue {
      * @param currLang The config to delete, either 'en' for English of 'fr' for French.
      */
     deleteConfig(slides: MultiLanguageSlide, currLang: 'en' | 'fr'): void {
+        slides[currLang].panels.forEach((panel: BasePanel) => this.removeSourceHelper(panel));
         slides[currLang] = undefined;
         this.$emit('slides-updated', this.slides);
     }
@@ -480,9 +481,71 @@ export default class SlideTocV extends Vue {
 
     // Assumes that you've already checked that the other lang DOES have a config.
     copyConfigFromOtherLang(index: number, currLang: keyof MultiLanguageSlide): void {
-        this.slides[index][currLang] = JSON.parse(JSON.stringify(this.slides[index][currLang === 'en' ? 'fr' : 'en']));
-        this.$emit('slides-updated', this.slides);
-        this.$emit('slide-change', index, currLang);
+        const oppositeLang = currLang === 'en' ? 'fr' : 'en';
+        // Called on each image/video panel in the opposite lang's config (at the provided index)
+        // The asset within this panel (assuming one exists) must be moved to the shared folder (if its not already
+        // there). However, we must check beforehand whether an asset with the same name and contents already exists
+        // in the shared folder (in which case we do nothing), and if an asset with the same name and different
+        // contents already exists in the shared folder (in which case we give the asset uploaded to the shared
+        // asset folder a unique name)
+        const oppositeToSharedFolder = (panel: ImagePanel | VideoPanel, oppositeLang: string): void => {
+            if (panel.src) {
+                const assetSrc = panel.src.split('/');
+                const fileName = assetSrc.at(-1);
+                const assetType = fileName.split('.').at(-1);
+                let inSharedAssets = assetSrc[2] === 'shared';
+                let sharedFileSource = `${this.configFileStructure.uuid}/assets/shared/${fileName}`;
+
+                // If the asset for this panel refers to the opposite lang's asset folder, we will assume that there
+                // is no asset in the shared asset folder with the same name and contents as this asset. Otherwise
+                // it would have already been moved there upon being uploaded
+                if (!inSharedAssets) {
+                    const oppositeFileSource = panel.src;
+                    const oppositeRelativePath = assetSrc.slice(3).join('/');
+                    let sharedAssetName = fileName;
+                    let compressedFile = this.configFileStructure.assets[oppositeLang].file(oppositeRelativePath);
+                    let i = 2;
+
+                    // If an asset with the same name, but different content, is already in the shared folder, we must
+                    // give the asset we are uploading a unique name. Otherwise the existing asset will be overwritten
+                    while (this.configFileStructure.assets['shared'].file(sharedAssetName)) {
+                        sharedAssetName = `${compressedFile.name.split('.').at(0)}(${i}).${compressedFile.name
+                            .split('.')
+                            .at(-1)}`;
+                        i++;
+                    }
+                    sharedFileSource = `${this.configFileStructure.uuid}/assets/shared/${sharedAssetName}`;
+
+                    compressedFile.async(assetType !== 'svg' ? 'blob' : 'text').then((assetFile) => {
+                        if (assetType === 'svg') {
+                            assetFile = new File([assetFile], fileName, {
+                                type: 'image/svg+xml'
+                            });
+                        }
+                        this.configFileStructure.assets[oppositeLang].remove(oppositeRelativePath);
+                        this.configFileStructure.assets['shared'].file(sharedAssetName, assetFile);
+                        this.sourceCounts[sharedFileSource] = this.sourceCounts[oppositeFileSource] ?? 0;
+                        this.sourceCounts[oppositeFileSource] = 0;
+                        this.$emit('shared-asset', oppositeFileSource, sharedFileSource, oppositeLang);
+                    });
+                }
+                this.sourceCounts[sharedFileSource] += 1;
+            }
+        };
+
+        this.slides[index][oppositeLang].panel.forEach((panel) => {
+            this.$emit('process-panel', panel, oppositeToSharedFolder, oppositeLang);
+        });
+
+        // TODO: find better alternative to setTimeout. This code MUST execute after the callback above executes on each
+        // panel in the opposite lang's slide. Otherwise it will copy the contents of the opposite config before its
+        // src values are updated
+        setTimeout(() => {
+            this.slides[index][currLang].panel.forEach((panel) => this.removeSourceHelper(panel));
+            this.slides[index][currLang] = JSON.parse(JSON.stringify(this.slides[index][oppositeLang]));
+            this.$emit('slides-updated', this.slides);
+            this.$emit('slide-change', index, currLang);
+        }, 300);
     }
 
     /**
@@ -502,6 +565,16 @@ export default class SlideTocV extends Vue {
      */
     copySlide(index: number): void {
         this.slides.splice(index + 1, 0, cloneDeep(this.slides[index]));
+
+        // increment source count of each asset in this slide
+        const incrementSourceCounts = (panel: ImagePanel | VideoPanel) => {
+            if (panel.src) {
+                this.sourceCounts[panel.src] += 1;
+            }
+        };
+        this.slides[index].en.panel.forEach((panel) => this.$emit('process-panel', panel, incrementSourceCounts));
+        this.slides[index].fr.panel.forEach((panel) => this.$emit('process-panel', panel, incrementSourceCounts));
+
         this.$emit('slides-updated', this.slides);
         this.selectSlide(index + 1, this.lang);
         Message.success(this.$t('editor.slide.copy.success'));
diff --git a/src/components/slideshow-editor.vue b/src/components/slideshow-editor.vue
index 595ddc302..5c9132b8f 100644
--- a/src/components/slideshow-editor.vue
+++ b/src/components/slideshow-editor.vue
@@ -95,6 +95,9 @@
                         :lang="lang"
                         :sourceCounts="sourceCounts"
                         :allowMany="false"
+                        @shared-asset="(oppositeAssetPath: string, sharedAssetName: string, oppositeLang: string) => {
+                            $emit('shared-asset', oppositeAssetPath, sharedAssetName, oppositeLang);
+                        }"
                     ></component>
                     <div class="mt-3 w-full flex justify-end">
                         <button
@@ -117,6 +120,9 @@
                         :sourceCounts="sourceCounts"
                         :key="editingIdx + panel.items[editingIdx].type"
                         :allowMany="false"
+                        @shared-asset="(oppositeAssetPath: string, sharedAssetName: string, oppositeLang: string) => {
+                            $emit('shared-asset', oppositeAssetPath, sharedAssetName, oppositeLang);
+                        }"
                     ></component>
                     <div class="mt-3 w-full flex justify-end">
                         <button class="editor-button bg-black text-white hover:bg-gray-800" @click="saveItem()">
diff --git a/src/components/video-editor.vue b/src/components/video-editor.vue
index c51d13cf2..eee8b7bd9 100644
--- a/src/components/video-editor.vue
+++ b/src/components/video-editor.vue
@@ -128,6 +128,7 @@ import { ConfigFileStructure, SourceCounts, VideoFile, VideoPanel } from '@/defi
 import Message from 'vue-m-message';
 import draggable from 'vuedraggable';
 import VideoPreviewV from './helpers/video-preview.vue';
+import JSZip from 'jszip';
 
 @Options({
     components: {
@@ -171,7 +172,7 @@ export default class VideoEditorV extends Vue {
                     this.videoPreviewPromise = assetFile.async('blob').then((res: Blob) => {
                         return {
                             ...this.panel,
-                            id: filename ? filename : this.panel.src,
+                            id: this.panel.src,
                             src: URL.createObjectURL(res)
                         } as VideoFile;
                     });
@@ -200,26 +201,192 @@ export default class VideoEditorV extends Vue {
         }
     }
 
+    // TODO: move method into a plugin. That way it isn't repeated in the metadata/image editors
+    // Converts a file into a promise that resolves to an ArrayBuffer containing the files data
+    readBinaryData(file: File): Promise<ArrayBuffer> {
+        return new Promise((resolve, reject) => {
+            const fileReader = new FileReader();
+            fileReader.onload = () => {
+                resolve(fileReader.result);
+            };
+            fileReader.onerror = () => {
+                reject(new Error('Could not load file reader'));
+            };
+            fileReader.readAsArrayBuffer(file);
+        });
+    }
+
+    // TODO: move method into a plugin. That way it isn't repeated in the metadata/image editors
+    // Converts a file into a promise that resolves to its has, as an array of 8-bit integers
+    obtainHashData(file: File): Promise<Uint8Array> {
+        return this.readBinaryData(file)
+            .then((res) => {
+                res = new Uint8Array(res);
+                return window.crypto.subtle.digest('SHA-256', res);
+            })
+            .then((res) => {
+                res = new Uint8Array(res);
+                return res;
+            });
+    }
+
+    // TODO: move method into a plugin. That way it isn't repeated in the metadata/image editors
+    /**
+     * Helper used to find all instances of the specified file in the specified asset folder
+     * @param file File that was uploaded
+     * @param folder The asset folder withinn which we should be searching
+     * @param checkNested Flag that indicates whether we should consider assets with nested subfolders
+     */
+    filesInAssetFolder(file: File, folder: string, checkNested = true): Array<Promise<string>> {
+        // Here, if a file in the specified folder has the same name and hash as the file uploaded, then we consider the
+        // two to be the same. Otherwise, we consider them to be different. We even consider if the asset is within a
+        // subfolder of the specified folder, so long as the name and hash of the file is the same. There may be more than one
+        // instance of the specified asset in the specified folder, albeit in seperate subfolders, hence why we collect
+        // an array of duplicate asset promises
+        const sharedAssetPromises = [];
+        this.configFileStructure.assets[folder].forEach((relativePath, compressedBinary) => {
+            const assetName = checkNested ? relativePath.split('/').at(-1) : relativePath;
+            if (assetName === file.name) {
+                sharedAssetPromises.push(
+                    this.compareFiles(file, compressedBinary, assetName).then((fileSame) =>
+                        fileSame ? relativePath : 'N/A'
+                    )
+                );
+            }
+        });
+
+        return sharedAssetPromises;
+    }
+
+    // TODO: move method into a plugin. That way it isn't repeated in the metadata/image editors
+    /**
+     * Compares the hashes of two files
+     * @param file File that was uploaded
+     * @param compressedBinary Compressed binary file from configFileStructure
+     * @param compressedName The name of the compressed binary file
+     */
+    async compareFiles(file: File, compressedBinary: JSZip.JSZipObject, compressedName: string): Promise<boolean> {
+        const fileHash = await this.obtainHashData(file);
+        const compressedType = compressedName.split('.').at(-1);
+
+        return compressedBinary
+            .async(compressedType !== 'svg' ? 'blob' : 'text')
+            .then((assetFile) => {
+                if (compressedType === 'svg') {
+                    assetFile = new File([assetFile], compressedName, {
+                        type: 'image/svg+xml'
+                    });
+                }
+                return this.obtainHashData(assetFile);
+            })
+            .then((hash) => {
+                return hash.join() === fileHash.join();
+            });
+    }
+
+    // TODO: move method into a plugin. That way it isn't repeated in the metadata/image editors
     // adds an uploaded file that is either a: video, transcript or captions
-    addUploadedFile(file: File, type: string): void {
-        const uploadSource = `${this.configFileStructure.uuid}/assets/${this.lang}/${file.name}`;
-        this.configFileStructure.assets[this.lang].file(file.name, file);
+    async addUploadedFile(file: File, type: string): Promise<void> {
+        const oppositeLang = this.lang === 'en' ? 'fr' : 'en';
+        const sharedAssetPaths = await Promise.all(this.filesInAssetFolder(file, 'shared', false));
+        let inSharedAsset = false;
+        let oppositeSourceCount = 0;
+        let newAssetName = file.name;
+        let uploadSource = `${this.configFileStructure.uuid}/assets/shared/${file.name}`;
+
+        // Should contain either 0 or 1 promise.
+        sharedAssetPaths.forEach((sharedAssetPath) => {
+            inSharedAsset = sharedAssetPath !== 'N/A';
+        });
+
+        if (!inSharedAsset) {
+            const oppositeAssetPaths = await Promise.all(this.filesInAssetFolder(file, oppositeLang));
+            // If the current promise is empty, then the current path refers to an asset in the opposite asset folder that
+            // has the same name, but different contents, as the asset uploaded. In this case we do nothing, as this asset
+            // is not a valid duplicate.
+            for (const oppositeAssetPath of oppositeAssetPaths) {
+                if (oppositeAssetPath !== 'N/A') {
+                    const oppositeFileSource = `${this.configFileStructure.uuid}/assets/${oppositeLang}/${oppositeAssetPath}`;
+                    oppositeSourceCount += this.sourceCounts[oppositeFileSource] ?? 0;
+                    this.sourceCounts[oppositeFileSource] = 0;
+                    this.configFileStructure.assets[oppositeLang].remove(oppositeAssetPath);
+
+                    // Add asset to shared folder if asset is yet to be moved to the shared folder. If an asset with the
+                    // same name, but different content, is already in the shared folder, we must give the asset we are
+                    // uploading a unique name. Otherwise the existing asset will be overwritten
+                    if (!inSharedAsset) {
+                        let i = 2;
+                        while (this.configFileStructure.assets['shared'].file(newAssetName)) {
+                            // If the updated name is the same as a file that already exists in the shared asset folder,
+                            // we must compare that file with the uploaded file, since they wouldnt have been compared
+                            // on the first run due to having different names
+                            if (i > 2) {
+                                const filesEqual = await this.compareFiles(
+                                    file,
+                                    this.configFileStructure.assets['shared'].file(newAssetName),
+                                    newAssetName
+                                );
+                                if (filesEqual) break;
+                            }
+                            newAssetName = `${file.name.split('.').at(0)}(${i}).${file.name.split('.').at(-1)}`;
+                            i++;
+                        }
+                        uploadSource = `${this.configFileStructure.uuid}/assets/shared/${newAssetName}`;
+                        this.configFileStructure.assets['shared'].file(newAssetName, file);
+                        inSharedAsset = true;
+                    }
+                    this.$emit('shared-asset', oppositeFileSource, uploadSource, oppositeLang); // must be emitted for each duplicate asset
+                }
+            }
+        }
+
+        // If the asset uploaded is in the shared asset folder, then no need to upload to the current langs assets folder
+        if (!inSharedAsset) {
+            const currAssetPaths = await Promise.all(this.filesInAssetFolder(file, this.lang, false));
+            // Should contain either 0 or 1 promise.
+            for (const currAssetPath of currAssetPaths) {
+                // If asset w/ same name but different contents is in curr lang asset folder, set name in curr lang
+                // asset folder to a unique name, to avoid overwriting an existing file.
+                if (currAssetPath === 'N/A') {
+                    let i = 2;
+                    while (this.configFileStructure.assets[this.lang].file(newAssetName)) {
+                        // If the updated name is the same as a file that already exists in the current langs asset folder,
+                        // we must compare that file with the uploaded file, since they wouldnt have been compared
+                        // on the first run due to having different names
+                        if (i > 2) {
+                            const filesEqual = await this.compareFiles(
+                                file,
+                                this.configFileStructure.assets[this.lang].file(newAssetName),
+                                newAssetName
+                            );
+                            if (filesEqual) break;
+                        }
+                        newAssetName = `${file.name.split('.').at(0)}(${i}).${file.name.split('.').at(-1)}`;
+                        i++;
+                    }
+                }
+            }
+            uploadSource = `${this.configFileStructure.uuid}/assets/${this.lang}/${newAssetName}`;
+            this.configFileStructure.assets[this.lang].file(newAssetName, file);
+        }
+
         if (this.sourceCounts[uploadSource]) {
-            this.sourceCounts[uploadSource] += 1;
+            this.sourceCounts[uploadSource] += 1 + oppositeSourceCount;
         } else {
-            this.sourceCounts[uploadSource] = 1;
+            this.sourceCounts[uploadSource] = 1 + oppositeSourceCount;
         }
 
         // check if source file is creating a new video or uploading captions/transcript for current video
         const fileSrc = URL.createObjectURL(file);
         if (type === 'src') {
+            const assetName = inSharedAsset ? newAssetName : file.name;
             this.videoPreview = {
-                id: file.name,
-                title: this.videoPreview.title || file.name,
+                id: uploadSource,
+                title: assetName,
                 videoType: 'local',
                 src: fileSrc
             };
-            this.findFileType(file.name);
+            this.findFileType(assetName);
         } else {
             this.videoPreview[type as 'caption' | 'transcript'] = fileSrc;
         }
@@ -301,13 +468,25 @@ export default class VideoEditorV extends Vue {
     dropVideo(e: DragEvent): void {
         if (e.dataTransfer !== null) {
             const file = [...e.dataTransfer.files][0];
-            this.addUploadedFile(file, 'src');
-            this.dragging = false;
+            this.addUploadedFile(file, 'src').then(() => {
+                this.dragging = false;
+            });
         }
         this.onVideoEdited();
     }
 
     deleteVideo(): void {
+        if (this.videoPreview.videoType === 'local') {
+            const videoSource = this.videoPreview.id;
+            const videoFolder = this.videoPreview.id.split('/')[2];
+            const videoRelativePath = this.videoPreview.id.split('/').slice(3).join('/');
+
+            this.sourceCounts[videoSource] -= 1;
+            if (this.sourceCounts[videoSource] === 0) {
+                this.configFileStructure.assets[videoFolder].remove(videoRelativePath);
+                URL.revokeObjectURL(this.videoPreview.src);
+            }
+        }
         (this.$refs.videoFileInput as HTMLInputElement).value = '';
         this.videoPreview = {};
         this.onVideoEdited();
@@ -318,10 +497,8 @@ export default class VideoEditorV extends Vue {
             // save all changes to panel config (cannot directly set to avoid prop mutate)
             this.panel.title = this.videoPreview.title;
             this.panel.videoType = this.videoPreview.videoType;
-            this.panel.src =
-                this.videoPreview.videoType === 'local'
-                    ? `${this.configFileStructure.uuid}/assets/${this.lang}/${this.videoPreview.id}`
-                    : this.videoPreview.src;
+
+            this.panel.src = this.videoPreview.videoType === 'local' ? this.videoPreview.id : this.videoPreview.src;
             this.panel.caption = this.videoPreview.caption ? this.videoPreview.caption : '';
             this.panel.transcript = this.videoPreview.transcript ? this.videoPreview.transcript : '';
         }