diff --git a/src/components/editor.vue b/src/components/editor.vue
index 1e23940b3..4f137b8d3 100644
--- a/src/components/editor.vue
+++ b/src/components/editor.vue
@@ -324,7 +324,9 @@ export default class EditorV extends Vue {
         }
 
         setTimeout(() => {
-            const routeData = this.$router.resolve({ name: 'preview' });
+            const routeData = this.$router.resolve({
+                path: `/${this.configLang}/editor-preview/${this.uuid}`
+            });
             const previewTab = window.open(routeData.href, '_blank');
             (previewTab as Window).props = {
                 config: JSON.parse(JSON.stringify(this.configs[this.configLang])),
diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
index 43e7d96ba..7fbf54968 100644
--- a/src/components/metadata-editor.vue
+++ b/src/components/metadata-editor.vue
@@ -1288,28 +1288,28 @@ export default class MetadataEditorV extends Vue {
         }
     }
 
-    highlightNext() {
+    highlightNext(): void {
         if (this.highlightedIndex < this.getStorylines.length - 1) {
             this.highlightedIndex++;
             this.scrollIntoView();
         }
     }
 
-    highlightPrevious() {
+    highlightPrevious(): void {
         if (this.highlightedIndex > 0) {
             this.highlightedIndex--;
             this.scrollIntoView();
         }
     }
 
-    selectHighlighted() {
+    selectHighlighted(): void {
         if (this.highlightedIndex !== -1) {
             const selectedStoryline = this.getStorylines[this.highlightedIndex];
             this.selectUuid(selectedStoryline.uuid);
         }
     }
 
-    scrollIntoView() {
+    scrollIntoView(): void {
         this.$nextTick(() => {
             const container = this.$el.querySelector('.overflow-y-auto');
             const activeItem = container.querySelector('li.bg-gray-300');
diff --git a/src/components/preview.vue b/src/components/preview.vue
index b14b7c676..456cc85ee 100644
--- a/src/components/preview.vue
+++ b/src/components/preview.vue
@@ -15,6 +15,10 @@
                 <div class="w-mobile-full truncate">
                     <span class="font-semibold text-lg m-1">{{ config.title }}</span>
                 </div>
+
+                <button @click="changeLang" class="editor-button bg-black text-white hover:bg-gray-900">
+                    <span class="inline-block">{{ lang === 'en' ? $t('editor.lang.fr') : $t('editor.lang.en') }}</span>
+                </button>
             </header>
 
             <storylines-intro :config="config.introSlide" :configFileStructure="configFileStructure" />
@@ -81,15 +85,20 @@ export default class StoryPreviewV extends Vue {
     } = { en: undefined, fr: undefined };
 
     created(): void {
-        const uid = this.$route.params.uid as string;
+        this.uid = this.$route.params.uid as string;
         this.lang = this.$route.params.lang as string;
 
-        if (uid) {
+        // if config file structure passed from session (from main editor page)
+        if (window.props) {
+            this.config = window.props.config;
+            this.configFileStructure = window.props.configFileStructure;
+            this.loadStatus = 'loaded';
+        } else {
             this.savedProduct = true;
             // attempt to fetch saved config file from the server (TODO: setup as express route?)
-            fetch(this.apiUrl + `/retrieve/${uid}`).then((res: Response) => {
+            fetch(this.apiUrl + `/retrieve/${this.uid}`).then((res: Response) => {
                 if (res.status === 404) {
-                    console.error(`There does not exist a saved product with UID ${uid}.`);
+                    console.error(`There does not exist a saved product with UID ${this.uid}.`);
                     // redirect to canada.ca 404 page on invalid URL params
                     // window.location.href = 'https://www.canada.ca/errors/404.html';
                 } else {
@@ -102,7 +111,7 @@ export default class StoryPreviewV extends Vue {
                             const rampConfigFolder = configZip.folder('ramp-config');
 
                             this.configFileStructure = {
-                                uuid: uid,
+                                uuid: this.uid,
                                 zip: configZip,
                                 configs: this.configs as unknown as { [key: string]: StoryRampConfig },
                                 assets: {
@@ -116,7 +125,7 @@ export default class StoryPreviewV extends Vue {
                                 rampConfig: rampConfigFolder as JSZip
                             };
 
-                            const configFile = configZip.file(`${uid}_${this.lang}.json`);
+                            const configFile = configZip.file(`${this.uid}_${this.lang}.json`);
                             configFile?.async('string').then((configContent: string) => {
                                 const config = JSON.parse(configContent) as StoryRampConfig;
                                 this.config = config;
@@ -136,10 +145,6 @@ export default class StoryPreviewV extends Vue {
                         .catch((error: AxiosError) => console.log(error.response || error));
                 });
             });
-        } else {
-            this.config = window.props.config;
-            this.configFileStructure = window.props.configFileStructure;
-            this.loadStatus = 'loaded';
         }
 
         // set page lang
@@ -148,9 +153,16 @@ export default class StoryPreviewV extends Vue {
         this.$i18n.locale = this.lang;
     }
 
+    // reload preview page with FR config
+    changeLang(): void {
+        this.$router
+            .push({ name: 'preview', params: { lang: this.lang === 'en' ? 'fr' : 'en', uid: this.uid } })
+            .then(() => this.$router.go(0));
+    }
+
     updateActiveIndex(idx: number): void {
         this.activeChapterIndex = idx;
-        //determine header height
+        // determine header height
         const headerH = document.getElementById('story-header');
         if (headerH) {
             this.headerHeight = headerH.clientHeight;
diff --git a/src/router/index.ts b/src/router/index.ts
index bd1beb921..115fa0344 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -49,16 +49,10 @@ const routes = [
         props: true,
         meta: { title: 'editor.window.title' }
     },
-    {
-        path: '/:lang/editor-preview',
-        component: StoryPreviewV,
-        name: 'preview',
-        props: true,
-        meta: { title: 'story.window.title' }
-    },
     {
         path: '/:lang/editor-preview/:uid',
         component: StoryPreviewV,
+        name: 'preview',
         meta: { title: 'story.window.title' }
     }
 ];