diff --git a/src/components/editor.vue b/src/components/editor.vue
index 3e883825d..a0c1fcda9 100644
--- a/src/components/editor.vue
+++ b/src/components/editor.vue
@@ -4,102 +4,111 @@
         <!-- Should prevent stuff in the background from being scrolled or interacted with. Click it to close the sidebar -->
         <div id="overlay" class="overlay" @click="closeSidebar"></div>
         <!-- Header bar -->
-        <div
-            class="editor-header md:sticky flex md:gap-3 items-center border-b border-black bg-gray-200 py-2 px-2 z-10 flex-wrap"
-        >
-            <div class="flex flex-col gap-2 mx-0.5">
-                <!-- Back to landing page button -->
-                <router-link
-                    :to="{ name: 'home' }"
-                    class="flex justify-center h-full w-full"
-                    v-tippy="{
-                        delay: '200',
-                        placement: 'right',
-                        content: $t('editor.returnToLanding'),
-                        animateFill: true
-                    }"
-                    target
-                    :aria-label="$t('editor.returnToLanding')"
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18.001" viewBox="0 0 18 18.001">
-                        <path
-                            id="logout-Icon-SVG-098767893"
-                            d="M5.808,13.782v1.406A2.816,2.816,0,0,0,8.621,18h7.067A2.816,2.816,0,0,0,18.5,15.188V2.813A2.816,2.816,0,0,0,15.687,0H8.621A2.816,2.816,0,0,0,5.808,2.813V4.219a.7.7,0,0,0,1.406,0V2.813A1.408,1.408,0,0,1,8.621,1.406h7.067a1.408,1.408,0,0,1,1.406,1.406V15.188a1.408,1.408,0,0,1-1.406,1.406H8.621a1.408,1.408,0,0,1-1.406-1.406V13.782a.7.7,0,0,0-1.406,0ZM1.014,7.793,2.589,6.218a.7.7,0,0,1,.994.994l-1.12,1.12h8.443a.7.7,0,1,1,0,1.406H2.463l1.12,1.12a.7.7,0,1,1-.994.994L1.014,10.279A1.76,1.76,0,0,1,1.014,7.793Zm0,0"
-                            transform="translate(-0.5)"
-                        />
-                    </svg>
-                </router-link>
-                <!-- Open mobile sidebar hamburger button -->
-                <!-- Only shows up on small viewport widths -->
-                <button
-                    @click="openSidebar"
-                    class="editor-button toc-popup-button bg-transparent border-none md:hidden"
-                >
-                    <svg
-                        class="m-2"
-                        xmlns="http://www.w3.org/2000/svg"
-                        xmlns:xlink="http://www.w3.org/1999/xlink"
-                        x="0px"
-                        y="0px"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 122.88 95.95"
-                        style="enable-background: new 0 0 122.88 95.95"
-                        xml:space="preserve"
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
-                    >
-                        <g>
-                            <path
-                                class="st0"
-                                d="M8.94,0h105c4.92,0,8.94,4.02,8.94,8.94l0,0c0,4.92-4.02,8.94-8.94,8.94h-105C4.02,17.88,0,13.86,0,8.94l0,0 C0,4.02,4.02,0,8.94,0L8.94,0z M8.94,78.07h105c4.92,0,8.94,4.02,8.94,8.94l0,0c0,4.92-4.02,8.94-8.94,8.94h-105 C4.02,95.95,0,91.93,0,87.01l0,0C0,82.09,4.02,78.07,8.94,78.07L8.94,78.07z M8.94,39.03h105c4.92,0,8.94,4.02,8.94,8.94l0,0 c0,4.92-4.02,8.94-8.94,8.94h-105C4.02,56.91,0,52.89,0,47.97l0,0C0,43.06,4.02,39.03,8.94,39.03L8.94,39.03z"
-                            />
-                        </g>
-                    </svg>
-                </button>
-            </div>
+        <div class="sticky top-0" style="z-index: 150">
+            <div class="editor-header-upper sticky top-0 bg-white border-b border-black max-h-full">
+                <div class="flex flex-row justify-between items-center px-3 py-0.5 md:py-0">
+                    <div class="flex flex-row items-center gap-2">
+                        <!-- Back to landing page button -->
+                        <router-link
+                            :to="{ name: 'home' }"
+                            class=""
+                            target
+                            :aria-label="$t('editor.returnToLanding')"
+                            tabindex="-1"
+                        >
+                            <button
+                                class="editor-button py-2 md:py-1.5 my-1 md:my-1.5 flex flex-row items-center md:gap-2 w-fit"
+                                truncate-trigger
+                                tabindex="0"
+                            >
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    width="18"
+                                    height="18.001"
+                                    viewBox="0 0 18 18.001"
+                                >
+                                    <path
+                                        id="logout-Icon-SVG-098767893"
+                                        d="M5.808,13.782v1.406A2.816,2.816,0,0,0,8.621,18h7.067A2.816,2.816,0,0,0,18.5,15.188V2.813A2.816,2.816,0,0,0,15.687,0H8.621A2.816,2.816,0,0,0,5.808,2.813V4.219a.7.7,0,0,0,1.406,0V2.813A1.408,1.408,0,0,1,8.621,1.406h7.067a1.408,1.408,0,0,1,1.406,1.406V15.188a1.408,1.408,0,0,1-1.406,1.406H8.621a1.408,1.408,0,0,1-1.406-1.406V13.782a.7.7,0,0,0-1.406,0ZM1.014,7.793,2.589,6.218a.7.7,0,0,1,.994.994l-1.12,1.12h8.443a.7.7,0,1,1,0,1.406H2.463l1.12,1.12a.7.7,0,1,1-.994.994L1.014,10.279A1.76,1.76,0,0,1,1.014,7.793Zm0,0"
+                                        transform="translate(-0.5)"
+                                    />
+                                </svg>
+                                <p
+                                    class="mobile-hidden-text border md:border-0 border-black font-medium"
+                                    v-truncate="{
+                                        externalTrigger: true,
+                                        options: {
+                                            delay: '200',
+                                            placement: 'bottom',
+                                            content: $t('editor.returnToLanding'),
+                                            animateFill: true,
+                                            touch: ['hold', 500],
+                                            offset: [0, 20]
+                                        }
+                                    }"
+                                >
+                                    {{ $t('editor.leaveEditor') }}
+                                </p>
+                            </button>
+                        </router-link>
+
+                        <!-- Open mobile sidebar hamburger button -->
+                        <!-- Only shows up on small viewport widths -->
+                        <button
+                            @click="openSidebar"
+                            class="editor-button self-center bg-transparent border border-gray-700 my-0 md:hidden"
+                            v-tippy="{
+                                delay: '200',
+                                placement: 'bottom',
+                                content: $t('editor.openSidebar'),
+                                animateFill: true,
+                                touch: ['hold', 500],
+                                offset: [0, 2]
+                            }"
+                        >
+                            <svg
+                                class="inline self-center mb-1"
+                                xmlns="http://www.w3.org/2000/svg"
+                                xmlns:xlink="http://www.w3.org/1999/xlink"
+                                x="0px"
+                                y="0px"
+                                width="15"
+                                height="15"
+                                viewBox="0 0 122.88 95.95"
+                                style="enable-background: new 0 0 122.88 95.95"
+                                xml:space="preserve"
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                            >
+                                <g>
+                                    <path
+                                        class="st0"
+                                        d="M8.94,0h105c4.92,0,8.94,4.02,8.94,8.94l0,0c0,4.92-4.02,8.94-8.94,8.94h-105C4.02,17.88,0,13.86,0,8.94l0,0 C0,4.02,4.02,0,8.94,0L8.94,0z M8.94,78.07h105c4.92,0,8.94,4.02,8.94,8.94l0,0c0,4.92-4.02,8.94-8.94,8.94h-105 C4.02,95.95,0,91.93,0,87.01l0,0C0,82.09,4.02,78.07,8.94,78.07L8.94,78.07z M8.94,39.03h105c4.92,0,8.94,4.02,8.94,8.94l0,0 c0,4.92-4.02,8.94-8.94,8.94h-105C4.02,56.91,0,52.89,0,47.97l0,0C0,43.06,4.02,39.03,8.94,39.03L8.94,39.03z"
+                                    />
+                                </g>
+                            </svg>
+                        </button>
+                    </div>
 
-            <div class="flex flex-1 flex-col gap-0.5 md:flex-row justify-between">
-                <!-- Storylines project title and UUID -->
-                <div class="flex flex-col">
-                    <span class="font-semibold text-lg">{{ metadata.title }}</span>
-                    <span :class="metadata.title ? 'text-xs' : ''">UUID: {{ uuid }}</span>
-                </div>
-                <span class="ml-auto"></span>
-                <div class="flex items-center flex-wrap gap-1">
-                    <!-- Reset changes button -->
-                    <button
-                        v-if="unsavedChanges"
-                        @click="$vfm.open(`reload-config`)"
-                        class="editor-button border-2 border-red-700 text-red-700 rounded p-1 m-0"
-                        v-tippy="{
-                            delay: '200',
-                            placement: 'bottom',
-                            content: $t('editor.resetChanges'),
-                            animateFill: true
-                        }"
-                    >
-                        <svg
-                            class="inline"
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 24 24"
-                            width="18px"
-                            height="18px"
+                    <div class="space-x-2 flex flex-row items-center">
+                        <!-- Unsaved changes indicator -->
+                        <div
+                            v-if="unsavedChanges"
+                            class="text-red-700 flex flex-row items-center w-auto"
+                            v-tippy="{
+                                delay: '200',
+                                placement: 'bottom',
+                                content: $t('editor.unsavedChanges'),
+                                animateFill: true,
+                                touch: ['hold', 500]
+                            }"
+                            tabindex="0"
                         >
-                            <path
-                                d="M 2 2 L 4.9394531 4.9394531 C 3.1262684 6.7482143 2 9.2427079 2 12 C 2 17.514 6.486 22 12 22 C 17.514 22 22 17.514 22 12 C 22 6.486 17.514 2 12 2 L 12 4 C 16.411 4 20 7.589 20 12 C 20 16.411 16.411 20 12 20 C 7.589 20 4 16.411 4 12 C 4 9.7940092 4.9004767 7.7972757 6.3496094 6.3496094 L 9 9 L 9 2 L 2 2 z"
-                            />
-                        </svg>
-                        <span class="font-normal ml-1">{{ $t('editor.resetChanges') }}</span>
-                    </button>
-                    <!-- Unsaved changes indicator -->
-                    <transition name="fade">
-                        <span v-if="unsavedChanges" class="border-2 border-red-700 text-red-700 rounded p-1">
-                            <span class="align-middle inline-block mr-1 pb-1 fill-current"
-                                ><svg
+                            <div class="mr-1 pb-1 fill-current">
+                                <svg
                                     clip-rule="evenodd"
                                     fill-rule="evenodd"
-                                    class="fill-red-600"
+                                    class="mt-1 fill-current"
                                     width="18"
                                     height="18"
                                     stroke-linejoin="round"
@@ -108,131 +117,316 @@
                                     xmlns="http://www.w3.org/2000/svg"
                                 >
                                     <path
+                                        class="fill-current"
                                         d="m12.002 21.534c5.518 0 9.998-4.48 9.998-9.998s-4.48-9.997-9.998-9.997c-5.517 0-9.997 4.479-9.997 9.997s4.48 9.998 9.997 9.998zm0-1.5c-4.69 0-8.497-3.808-8.497-8.498s3.807-8.497 8.497-8.497 8.498 3.807 8.498 8.497-3.808 8.498-8.498 8.498zm0-6.5c-.414 0-.75-.336-.75-.75v-5.5c0-.414.336-.75.75-.75s.75.336.75.75v5.5c0 .414-.336.75-.75.75zm-.002 3c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z"
                                         fill-rule="nonzero"
                                     />
                                 </svg>
-                            </span>
-                            <span class="align-center inline-block select-none">{{ $t('editor.unsavedChanges') }}</span>
-                        </span>
-                    </transition>
-                    <slot name="langModal" v-bind="{ unsavedChanges: unsavedChanges }"></slot>
-                    <!-- Preview dropdown -->
-                    <div class="dropdown editor-button">
-                        <!-- The "Preview" button - hover over it to show the options -->
-                        <button class="dropbtn flex gap-2 items-center cursor-default">
-                            <p>{{ $t('editor.preview') }}</p>
+                            </div>
+                            <p class="mobile-hidden-text select-none">{{ $t('editor.unsavedChanges') }}</p>
+                        </div>
+                        <!-- Reset changes button -->
+                        <button
+                            :disabled="!unsavedChanges"
+                            @click="$vfm.open(`reload-config`)"
+                            class="editor-button flex flex-row border border-gray-700 text-gray-800 rounded my-0"
+                            truncate-trigger
+                        >
+                            <svg
+                                class="inline fill-current mb-0.5"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 24 24"
+                                width="18px"
+                                height="18px"
+                                style="margin-top: 3px; margin-bottom: 3px"
+                            >
+                                <path
+                                    d="M 2 2 L 4.9394531 4.9394531 C 3.1262684 6.7482143 2 9.2427079 2 12 C 2 17.514 6.486 22 12 22 C 17.514 22 22 17.514 22 12 C 22 6.486 17.514 2 12 2 L 12 4 C 16.411 4 20 7.589 20 12 C 20 16.411 16.411 20 12 20 C 7.589 20 4 16.411 4 12 C 4 9.7940092 4.9004767 7.7972757 6.3496094 6.3496094 L 9 9 L 9 2 L 2 2 z"
+                                />
+                            </svg>
+                            <span
+                                class="mobile-hidden-text font-medium md:ml-1"
+                                v-truncate="{
+                                    externalTrigger: true,
+                                    options: {
+                                        delay: '200',
+                                        placement: 'bottom',
+                                        content: $t('editor.resetChanges'),
+                                        animateFill: true,
+                                        touch: ['hold', 500],
+                                        offset: [-10, 32]
+                                    }
+                                }"
+                                >{{ $t('editor.resetChanges') }}</span
+                            >
+                        </button>
+
+                        <!-- Save changes button -->
+                        <button
+                            @click="saveChanges"
+                            class="editor-button flex flex-row md:gap-1.5 items-center m-0 bg-black text-white hover:bg-gray-900 border border-black"
+                            :disabled="!unsavedChanges || saving"
+                            truncate-trigger
+                        >
                             <svg
                                 xmlns="http://www.w3.org/2000/svg"
                                 xmlns:xlink="http://www.w3.org/1999/xlink"
                                 x="0px"
                                 y="0px"
-                                viewBox="0 0 122.88 66.91"
-                                style="enable-background: new 0 0 122.88 66.91"
+                                viewBox="0 0 122.73 122.88"
+                                style="margin-top: 3px; margin-bottom: 3px; enable-background: new 0 0 122.73 122.88"
                                 xml:space="preserve"
-                                height="12"
-                                width="12"
-                                class="fill-current transform rotate-180"
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                height="18px"
+                                width="18px"
                             >
                                 <g>
                                     <path
-                                        d="M11.68,64.96c-2.72,2.65-7.08,2.59-9.73-0.14c-2.65-2.72-2.59-7.08,0.13-9.73L56.87,1.97l4.8,4.93l-4.81-4.95 c2.74-2.65,7.1-2.58,9.76,0.15c0.08,0.08,0.15,0.16,0.23,0.24L120.8,55.1c2.72,2.65,2.78,7.01,0.13,9.73 c-2.65,2.72-7,2.78-9.73,0.14L61.65,16.5L11.68,64.96L11.68,64.96z"
+                                        class="st0 fill-current"
+                                        d="M109.5,113.68L109.5,113.68l-6.09,0c-0.4,0-0.73-0.32-0.73-0.72V69.48l0-0.1c0-0.9-0.17-1.65-0.49-2.22 c-0.06-0.11-0.14-0.22-0.2-0.31c-0.06-0.09-0.16-0.18-0.23-0.27l-0.02-0.02c-0.3-0.3-0.68-0.53-1.12-0.69l-0.25-0.07l-0.04-0.01 l-0.01,0c-0.41-0.11-0.88-0.17-1.38-0.17h-0.05l-0.08,0H36.75c-0.89,0-1.62,0.17-2.18,0.49l-0.02,0.01l-0.27,0.17l-0.04,0.04 c-0.09,0.07-0.18,0.15-0.27,0.23l-0.02,0.02l-0.01,0.01c-0.62,0.63-0.92,1.57-0.92,2.82l0,0.04l0,43.54h0 c0,0.4-0.33,0.72-0.73,0.72l-9.85,0c0,0,0,0,0,0c-0.19,0-0.38-0.08-0.51-0.21L9.87,101.41c-0.18-0.14-0.29-0.36-0.29-0.59l0-87.91 l0-0.08c0-0.83,0.15-1.52,0.44-2.07l0,0c0.05-0.11,0.11-0.2,0.17-0.29l0.02-0.03c0.07-0.11,0.19-0.18,0.25-0.29l0.01-0.02 l0.02-0.02l0,0c0.25-0.25,0.57-0.45,0.92-0.59l0.04-0.02l0.02-0.01l0.02-0.01l0.18-0.06v0l0.01-0.01c0.42-0.14,0.9-0.2,1.44-0.21 l0.09-0.01l26.21,0c0.4,0,0.73,0.32,0.73,0.72v28.75c0,0.52,0.05,1.03,0.13,1.5c0.09,0.46,0.15,0.98,0.39,1.34l0.01,0.02l0,0.01v0 c0.18,0.44,0.42,0.87,0.67,1.25c0.24,0.37,0.56,0.77,0.9,1.13l0.02,0.02l0,0.01l0.01,0c0.48,0.5,0.94,1.15,1.62,1.27l0.01,0l0.01,0 l0.01,0.01l0.32,0.17l0,0l0.4,0.18v0l0.01,0l0,0l0,0v0c0.33,0.14,0.67,0.26,1,0.34l0.01,0l0.03,0l0.01,0l0.03,0l0.26,0.05v0 c0.45,0.09,0.93,0.14,1.42,0.14l0.02,0h47.8c1.03,0,1.98-0.18,2.85-0.53l0.01-0.01c0.87-0.36,1.67-0.9,2.39-1.61l0.03-0.03 c0.36-0.36,0.69-0.75,0.96-1.16c0.26-0.38,0.58-0.76,0.66-1.22l0-0.01l0.01-0.01l0.01-0.02c0.18-0.43,0.34-0.88,0.41-1.34l0-0.03 c0.09-0.47,0.13-0.97,0.13-1.49V9.92c0-0.4,0.33-0.73,0.73-0.73h6c0.58,0,1.09,0.07,1.54,0.21c0.48,0.15,0.89,0.39,1.2,0.7 c0.68,0.67,0.88,1.67,0.9,2.59l0.01,0.09v0.05l0,0.02v97.19c0,0.56-0.07,1.07-0.21,1.51l-0.01,0.03v0l0,0.02l-0.08,0.22l0,0 l-0.02,0.06l-0.09,0.2l-0.01,0.04l-0.02,0.04l0,0l-0.03,0.06l-0.15,0.22l0,0l-0.05,0.08l-0.14,0.17l-0.06,0.07 c-0.15,0.16-0.33,0.3-0.53,0.42c-0.17,0.1-0.36,0.19-0.55,0.26l-0.06,0.02c-0.16,0.05-0.34,0.1-0.53,0.14l-0.02,0l-0.01,0l-0.02,0 l-0.09,0.01l-0.02,0l0,0l-0.02,0c-0.22,0.03-0.49,0.05-0.76,0.06H109.5L109.5,113.68z M53.93,104.43c-1.66,0-3-1.34-3-3 c0-1.66,1.34-3,3-3h31.12c1.66,0,3,1.34,3,3c0,1.66-1.34,3-3,3H53.93L53.93,104.43z M53.93,89.03c-1.66,0-3-1.34-3-3s1.34-3,3-3 h31.12c1.66,0,3,1.34,3,3s-1.34,3-3,3H53.93L53.93,89.03z M94.03,9.39l-45.32-0.2v25.86H48.7c0,0.46,0.06,0.86,0.17,1.2 c0.03,0.06,0.04,0.1,0.07,0.15c0.09,0.23,0.22,0.44,0.4,0.61l0.03,0.03v0c0.06,0.06,0.11,0.1,0.17,0.15 c0.06,0.05,0.13,0.09,0.2,0.14c0.39,0.23,0.92,0.34,1.58,0.34v0l40.1,0.25v0l0,0v0c0.91,0,1.57-0.21,1.98-0.63 c0.42-0.43,0.63-1.1,0.63-2.02h0V9.39L94.03,9.39z M41.91,73.23h53.07v0c0.35,0,0.65,0.29,0.65,0.64l0,39.17 c0,0.35-0.29,0.65-0.65,0.65H41.91v0c-0.35,0-0.65-0.29-0.65-0.64l0-39.17C41.26,73.52,41.56,73.23,41.91,73.23L41.91,73.23 L41.91,73.23z M9.68,0h104.26c4.91,0,8.79,3.86,8.79,8.79V114c0,4.95-3.9,8.88-8.79,8.88l-96.61,0l-0.24-0.25L1.05,106.6L0,105.9 V8.76C0,3.28,4.81,0,9.68,0L9.68,0L9.68,0z"
                                     />
                                 </g>
                             </svg>
+                            <span
+                                class="mobile-hidden-text font-medium"
+                                v-truncate="{
+                                    externalTrigger: true,
+                                    options: {
+                                        delay: '200',
+                                        placement: 'bottom',
+                                        content: $t('editor.saveChanges'),
+                                        animateFill: true,
+                                        touch: ['hold', 500],
+                                        offset: [-10, 20]
+                                    }
+                                }"
+                                >{{ saving ? $t('editor.savingChanges') : $t('editor.saveChanges') }}</span
+                            >
+                            <span v-if="saving" class="align-middle inline-block px-1">
+                                <spinner size="16px" color="#009cd1" class="ml-1 mb-1"></spinner>
+                            </span>
                         </button>
-                        <!-- The two preview language config options: English and French -->
-                        <div class="dropdown-content">
-                            <!-- English config button -->
-                            <button @click.stop="preview('en')" class="border-b border-gray-400">
-                                {{ $t('editor.lang.en') }}
-                            </button>
-                            <!-- French config button -->
-                            <button @click.stop="preview('fr')">{{ $t('editor.lang.fr') }}</button>
-                        </div>
+
+                        <!-- ENG/FR page toggle -->
+                        <router-link
+                            target
+                            v-if="uuid && !currentRoute.includes('index-ca')"
+                            :to="{
+                                name: 'editor',
+                                params: { lang: currentRoute.includes('#/en') ? 'fr' : 'en', uid: uuid }
+                            }"
+                            class="underline text-black font-medium px-2"
+                        >
+                            <a>
+                                {{ currentRoute.includes('#/en') ? 'Français' : 'English' }}
+                            </a>
+                        </router-link>
                     </div>
-                    <!-- Save changes button -->
-                    <button
-                        @click="saveChanges"
-                        class="editor-button m-0 bg-black text-white hover:bg-gray-900 border border-black"
-                        :disabled="saving"
-                    >
-                        <span class="inline-block">{{
-                            saving ? $t('editor.savingChanges') : $t('editor.saveChanges')
-                        }}</span>
-                        <span v-if="saving" class="align-middle inline-block px-1">
-                            <spinner size="16px" color="#009cd1" class="ml-1 mb-1"></spinner>
-                        </span>
-                    </button>
-                    <!-- Help button -->
-                    <button
-                        @click="$vfm.open(`help-panel`)"
-                        class="bg-white border border-black rounded-full w-9 h-9 hover:bg-gray-100"
-                        v-tippy="{
-                            delay: '200',
-                            placement: 'top',
-                            content: $t('help.title'),
-                            animateFill: true
-                        }"
-                    >
-                        <span class="bottom-0 question-mark-button"> ? </span>
-                    </button>
-
-                    <!-- Export button -->
-                    <button
-                        @click="exportProduct"
-                        class="bg-white border border-black rounded-full w-9 h-9 flex items-center justify-center hover:bg-gray-100"
-                        v-tippy="{
-                            delay: '200',
-                            placement: 'top',
-                            content: $t('editor.export'),
-                            animateFill: true
-                        }"
-                        :aria-label="$t('editor.export')"
-                    >
-                        <span class="bottom-0 question-mark-button">
-                            <svg
-                                width="20px"
-                                height="20px"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                                stroke="#000000"
-                                stroke-width="0.336"
+                </div>
+            </div>
+
+            <div class="editor-header">
+                <div class="flex items-center border-b border-black bg-gray-200 py-2 px-3 flex-wrap">
+                    <div class="flex flex-1 flex-col gap-0.5 md:flex-row justify-between">
+                        <!-- Storylines project title and UUID -->
+                        <div class="flex flex-col">
+                            <span
+                                tabindex="0"
+                                class="font-semibold text-lg line-clamp-1 leading-snug"
+                                v-truncate="{
+                                    options: {
+                                        delay: '200',
+                                        placement: 'bottom-start',
+                                        content: metadata.title,
+                                        animateFill: true,
+                                        touch: ['hold', 500]
+                                    }
+                                }"
+                                >{{ metadata.title }}</span
                             >
-                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-                                <g
-                                    id="SVGRepo_tracerCarrier"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke="#CCCCCC"
-                                    stroke-width="0.288"
-                                ></g>
-                                <g id="SVGRepo_iconCarrier">
-                                    <path
-                                        d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z"
-                                        fill="#000"
-                                    ></path>
-                                    <path
-                                        d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z"
-                                        fill="#000"
-                                    ></path>
-                                </g>
-                            </svg>
-                        </span>
-                    </button>
+                            <span
+                                tabindex="0"
+                                class="line-clamp-1"
+                                :class="metadata.title ? 'text-xs' : ''"
+                                v-truncate="{
+                                    options: {
+                                        delay: '200',
+                                        placement: 'bottom-start',
+                                        content: uuid,
+                                        animateFill: true,
+                                        touch: ['hold', 500]
+                                    }
+                                }"
+                                >{{ $t('editor.uuid') }}: {{ uuid }}</span
+                            >
+                        </div>
+                        <span class="ml-auto"></span>
+                        <div class="flex items-center flex-nowrap gap-1 justify-between md:justify-start">
+                            <slot name="langModal" v-bind="{ unsavedChanges: unsavedChanges }"></slot>
+                            <!-- Preview dropdown -->
+                            <div class="dropdown editor-button">
+                                <!-- The "Preview" button - hover over it to show the options -->
+                                <button class="dropbtn flex gap-2 items-center cursor-default">
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                                        x="0px"
+                                        y="0px"
+                                        viewBox="0 0 122.88 83.78"
+                                        style="enable-background: new 0 0 122.88 83.78"
+                                        xml:space="preserve"
+                                        width="18px"
+                                        height="18px"
+                                        class="my-0 md:my-0.5 lg:my-0"
+                                    >
+                                        <g>
+                                            <path
+                                                class="fill-current"
+                                                d="M95.73,10.81c10.53,7.09,19.6,17.37,26.48,29.86l0.67,1.22l-0.67,1.21c-6.88,12.49-15.96,22.77-26.48,29.86 C85.46,79.88,73.8,83.78,61.44,83.78c-12.36,0-24.02-3.9-34.28-10.81C16.62,65.87,7.55,55.59,0.67,43.1L0,41.89l0.67-1.22 c6.88-12.49,15.95-22.77,26.48-29.86C37.42,3.9,49.08,0,61.44,0C73.8,0,85.45,3.9,95.73,10.81L95.73,10.81z M60.79,22.17l4.08,0.39 c-1.45,2.18-2.31,4.82-2.31,7.67c0,7.48,5.86,13.54,13.1,13.54c2.32,0,4.5-0.62,6.39-1.72c0.03,0.47,0.05,0.94,0.05,1.42 c0,11.77-9.54,21.31-21.31,21.31c-11.77,0-21.31-9.54-21.31-21.31C39.48,31.71,49.02,22.17,60.79,22.17L60.79,22.17L60.79,22.17z M109,41.89c-5.5-9.66-12.61-17.6-20.79-23.11c-8.05-5.42-17.15-8.48-26.77-8.48c-9.61,0-18.71,3.06-26.76,8.48 c-8.18,5.51-15.29,13.45-20.8,23.11c5.5,9.66,12.62,17.6,20.8,23.1c8.05,5.42,17.15,8.48,26.76,8.48c9.62,0,18.71-3.06,26.77-8.48 C96.39,59.49,103.5,51.55,109,41.89L109,41.89z"
+                                            />
+                                        </g>
+                                    </svg>
+                                    <p>{{ $t('editor.preview') }}</p>
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                                        x="0px"
+                                        y="0px"
+                                        viewBox="0 0 122.88 66.91"
+                                        style="enable-background: new 0 0 122.88 66.91"
+                                        xml:space="preserve"
+                                        height="12"
+                                        width="12"
+                                        class="fill-current transform rotate-180"
+                                    >
+                                        <g>
+                                            <path
+                                                d="M11.68,64.96c-2.72,2.65-7.08,2.59-9.73-0.14c-2.65-2.72-2.59-7.08,0.13-9.73L56.87,1.97l4.8,4.93l-4.81-4.95 c2.74-2.65,7.1-2.58,9.76,0.15c0.08,0.08,0.15,0.16,0.23,0.24L120.8,55.1c2.72,2.65,2.78,7.01,0.13,9.73 c-2.65,2.72-7,2.78-9.73,0.14L61.65,16.5L11.68,64.96L11.68,64.96z"
+                                            />
+                                        </g>
+                                    </svg>
+                                </button>
+                                <!-- The two preview language config options: English and French -->
+                                <div class="dropdown-content w-full">
+                                    <!-- English config button -->
+                                    <button @click.stop="preview('en')" class="border-b border-gray-400">
+                                        {{ $t('editor.lang.en') }}
+                                    </button>
+                                    <!-- French config button -->
+                                    <button @click.stop="preview('fr')">{{ $t('editor.lang.fr') }}</button>
+                                </div>
+                            </div>
+                            <div class="flex flex-row gap-1">
+                                <!-- Export button -->
+                                <button
+                                    @click="exportProduct"
+                                    class="bg-white border border-black rounded-full w-9 h-9 flex items-center justify-center hover:bg-gray-100"
+                                    v-tippy="{
+                                        delay: '200',
+                                        placement: 'bottom',
+                                        content: $t('editor.export'),
+                                        animateFill: true,
+                                        touch: ['hold', 500]
+                                    }"
+                                    :aria-label="$t('editor.export')"
+                                >
+                                    <span class="bottom-0 question-mark-button">
+                                        <svg
+                                            width="20px"
+                                            height="20px"
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            stroke="#000000"
+                                            stroke-width="0.336"
+                                        >
+                                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                                            <g
+                                                id="SVGRepo_tracerCarrier"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                                stroke="#CCCCCC"
+                                                stroke-width="0.288"
+                                            ></g>
+                                            <g id="SVGRepo_iconCarrier">
+                                                <path
+                                                    d="M12.5535 16.5061C12.4114 16.6615 12.2106 16.75 12 16.75C11.7894 16.75 11.5886 16.6615 11.4465 16.5061L7.44648 12.1311C7.16698 11.8254 7.18822 11.351 7.49392 11.0715C7.79963 10.792 8.27402 10.8132 8.55352 11.1189L11.25 14.0682V3C11.25 2.58579 11.5858 2.25 12 2.25C12.4142 2.25 12.75 2.58579 12.75 3V14.0682L15.4465 11.1189C15.726 10.8132 16.2004 10.792 16.5061 11.0715C16.8118 11.351 16.833 11.8254 16.5535 12.1311L12.5535 16.5061Z"
+                                                    fill="#000"
+                                                ></path>
+                                                <path
+                                                    d="M3.75 15C3.75 14.5858 3.41422 14.25 3 14.25C2.58579 14.25 2.25 14.5858 2.25 15V15.0549C2.24998 16.4225 2.24996 17.5248 2.36652 18.3918C2.48754 19.2919 2.74643 20.0497 3.34835 20.6516C3.95027 21.2536 4.70814 21.5125 5.60825 21.6335C6.47522 21.75 7.57754 21.75 8.94513 21.75H15.0549C16.4225 21.75 17.5248 21.75 18.3918 21.6335C19.2919 21.5125 20.0497 21.2536 20.6517 20.6516C21.2536 20.0497 21.5125 19.2919 21.6335 18.3918C21.75 17.5248 21.75 16.4225 21.75 15.0549V15C21.75 14.5858 21.4142 14.25 21 14.25C20.5858 14.25 20.25 14.5858 20.25 15C20.25 16.4354 20.2484 17.4365 20.1469 18.1919C20.0482 18.9257 19.8678 19.3142 19.591 19.591C19.3142 19.8678 18.9257 20.0482 18.1919 20.1469C17.4365 20.2484 16.4354 20.25 15 20.25H9C7.56459 20.25 6.56347 20.2484 5.80812 20.1469C5.07435 20.0482 4.68577 19.8678 4.40901 19.591C4.13225 19.3142 3.9518 18.9257 3.85315 18.1919C3.75159 17.4365 3.75 16.4354 3.75 15Z"
+                                                    fill="#000"
+                                                ></path>
+                                            </g>
+                                        </svg>
+                                    </span>
+                                </button>
+
+                                <!-- Help button -->
+                                <button
+                                    @click="$vfm.open(`help-panel`)"
+                                    class="bg-white border border-black rounded-full w-9 h-9 hover:bg-gray-100"
+                                    v-tippy="{
+                                        delay: '200',
+                                        placement: 'bottom',
+                                        content: $t('help.title'),
+                                        animateFill: true,
+                                        touch: ['hold', 500]
+                                    }"
+                                >
+                                    <span class="bottom-0 question-mark-button"> ? </span>
+                                </button>
+
+                                <!-- Feedback button -->
+                                <button
+                                    class="bg-white border border-black rounded-full w-9 h-9 hover:bg-gray-100"
+                                    v-tippy="{
+                                        delay: '200',
+                                        placement: 'bottom',
+                                        content: $t('editor.feedback'),
+                                        animateFill: true,
+                                        touch: ['hold', 500]
+                                    }"
+                                >
+                                    <a
+                                        class="flex items-center justify-center"
+                                        :href="`mailto:applicationsdecartographieweb-webmappingapplications@ec.gc.ca?subject=${$t(
+                                            'editor.feedback.subject'
+                                        )}`"
+                                    >
+                                        <svg
+                                            width="18"
+                                            height="18"
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                            <g>
+                                                <path
+                                                    id="Vector"
+                                                    d="M15 19C15 16.7909 12.3137 15 9 15C5.68629 15 3 16.7909 3 19M16.8281 5.17188C17.1996 5.54331 17.4942 5.98427 17.6952 6.46957C17.8962 6.95487 17.9999 7.47533 17.9999 8.00062C17.9999 8.52591 17.8963 9.04497 17.6953 9.53027C17.4943 10.0156 17.1996 10.457 16.8281 10.8285M19 3C19.6566 3.65661 20.1775 4.43612 20.5328 5.29402C20.8882 6.15192 21.0718 7.07127 21.0718 7.99985C21.0718 8.92844 20.8886 9.84815 20.5332 10.7061C20.1778 11.564 19.6566 12.3435 19 13.0001M9 12C6.79086 12 5 10.2091 5 8C5 5.79086 6.79086 4 9 4C11.2091 4 13 5.79086 13 8C13 10.2091 11.2091 12 9 12Z"
+                                                    stroke="#000000"
+                                                    stroke-width="2"
+                                                    stroke-linecap="round"
+                                                    stroke-linejoin="round"
+                                                />
+                                            </g>
+                                        </svg>
+                                    </a>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
+
         <!-- Body content -->
         <div class="editor-body flex">
             <!-- Left side -->
-
             <!-- Sidebar, desktop version -->
-            <div
-                id="sidebar-desktop flex flex-col"
-                class="w-80 flex-shrink-0 border-r border-black editor-toc hidden md:block"
-            >
+            <div id="sidebar-desktop" class="w-80 flex flex-col flex-shrink-0 border-r border-black editor-toc hidden">
                 <!-- ToC -->
                 <slide-toc
                     class="flex-1"
@@ -283,16 +477,6 @@
                     @custom-slide-updated="updateCustomSlide"
                     :sourceCounts="sourceCounts"
                 ></slide-editor>
-                <!-- Give feedback button -->
-                <div class="footer text-right pr-5 editor-button h-fit">
-                    <a
-                        :href="`mailto:applicationsdecartographieweb-webmappingapplications@ec.gc.ca?subject=${$t(
-                            'editor.feedback.subject'
-                        )}`"
-                    >
-                        {{ $t('editor.feedback') }}
-                    </a>
-                </div>
             </div>
         </div>
 
@@ -357,6 +541,8 @@ export default class EditorV extends Vue {
     @Prop() saving!: boolean;
     @Prop() unsavedChanges!: boolean;
 
+    currentRoute = window.location.href;
+
     // Form properties.
     uuid = '';
     logoImage: undefined | File = undefined;
@@ -602,11 +788,12 @@ window.addEventListener('resize', () => {
     margin: 0 auto;
 
     height: 100vh;
-    width: 100vw;
+    width: 100%;
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr;
+    grid-template-rows: auto auto 1fr;
     grid-template-areas:
+        'header-upper'
         'header'
         'main';
 }
@@ -676,15 +863,19 @@ select:focus {
     padding: 0.25 0.25em !important;
 }
 
+.editor-header-upper {
+    grid-area: 'header-upper';
+    z-index: 150;
+}
+
 .editor-header {
     grid-area: header;
-    top: -1px;
-    padding-top: 9px;
+    z-index: 150;
 }
 
 .editor-body {
     grid-area: main;
-    overflow: hidden;
+    overflow: auto;
 }
 
 .fade-enter-active,
@@ -721,8 +912,7 @@ select:focus {
 @media only screen and (min-width: 768px) {
     .editor-area {
         overflow-y: auto;
-        //height: calc(100vh - 80px);
-        height: calc(calc(var(--vh, 1vh) * 100) - 100px);
+        height: 100%;
     }
 }
 
@@ -757,7 +947,6 @@ select:focus {
     display: none;
     position: absolute;
     background-color: white;
-    min-width: 110px;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     z-index: 1;
     border: 1px solid lightgray;
@@ -791,7 +980,7 @@ select:focus {
 }
 
 #sidebar-mobile {
-    z-index: 21; // should be on top
+    z-index: 201 !important; // should be on top
     height: 100%;
     width: 0; /* Initial width is 0 to be hidden */
     max-width: 100%;
@@ -810,7 +999,35 @@ select:focus {
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5); /* Translucent black */
-    z-index: 20; /* Ensure it appears just under the sidebar */
+    z-index: 199; /* Ensure it appears just under the sidebar */
     display: none; /* Initially hidden */
 }
+
+.line-clamp-1 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+}
+
+.mobile-hidden-text {
+    width: auto;
+}
+
+@media only screen and (min-width: 768px) {
+    #sidebar-desktop {
+        display: block !important;
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .mobile-hidden-text {
+        width: 0 !important;
+        height: 0 !important;
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+        border: none;
+    }
+}
 </style>
diff --git a/src/components/home.vue b/src/components/home.vue
index 3fdb3c867..215646616 100644
--- a/src/components/home.vue
+++ b/src/components/home.vue
@@ -4,7 +4,7 @@
             <h1 class="text-4xl">{{ $t('editor.respectTitle') }}</h1>
             <router-link
                 :to="{ name: 'home', params: { lang: currLang === 'en' ? 'fr' : 'en' } }"
-                v-if="sourceFile !== 'index-ca-en.html#' && sourceFile !== 'index-ca-fr.html#'"
+                v-if="!sourceFile.includes('index-ca')"
             >
                 <div class="underline">{{ `${currLang === 'en' ? 'Français' : 'English'}` }}</div>
             </router-link>
@@ -134,7 +134,7 @@
                         class="border-b border-solid"
                         :class="idx === userStorylines.length - 1 ? 'border-black' : 'border-gray-200'"
                     >
-                        <div class="m-2 mt-4 ml-3">UUID: {{ storyline.uuid }}</div>
+                        <div class="m-2 mt-4 ml-3">{{ $t('editor.uuid') }}: {{ storyline.uuid }}</div>
                         <div class="m-2 mb-4 ml-3">
                             {{ $t('editor.previousProducts.productInfo.title') + ': ' + storyline.titleEN }}
                         </div>
diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
index 524db50a8..3407714d5 100644
--- a/src/components/metadata-editor.vue
+++ b/src/components/metadata-editor.vue
@@ -17,9 +17,7 @@
                     >
                         <!-- ENG/FR page toggle -->
                         <router-link
-                            v-if="
-                                !currentRoute.includes('index-ca-en.html') && !currentRoute.includes('index-ca-fr.html')
-                            "
+                            v-if="!currentRoute.includes('index-ca')"
                             :to="{
                                 name: editExisting ? 'metadataExisting' : 'metadataNew',
                                 params: { lang: currLang === 'en' ? 'fr' : 'en' }
diff --git a/src/lang/lang.csv b/src/lang/lang.csv
index 5f4583c5d..c27282d01 100644
--- a/src/lang/lang.csv
+++ b/src/lang/lang.csv
@@ -91,7 +91,7 @@ editor.editProduct,Edit Existing Storylines Product,1,Modifier un produit de sc
 editor.editMetadata,Edit project metadata,1,Mod. les métadonnées,1
 editor.productDetails,Storylines product details,1,Détails du produit de scénarios,1
 editor.metadata.instructions.new,Fill in metadata details about your new Storylines product.,1,Inscrivez les métadonnées de votre nouveau produit de scénario.,1
-editor.metadata.instructions.existing,View or edit metadata details about your Storylines product. Use the "Preview" button to see what your slides will look like.,1,Affichez ou modifiez les détails des métadonnées de votre produit Storylines. Utilisez le bouton « Aperçu » pour voir à quoi ressembleront vos diapositives.,0
+editor.metadata.instructions.existing,View or edit metadata details about your Storylines product. Use the 'Preview' button to see what your slides will look like.,1,Affichez ou modifiez les détails des métadonnées de votre produit Storylines. Utilisez le bouton «Aperçu» pour voir à quoi ressembleront vos diapositives.,0
 editor.uuid,UUID,1,UUID,0
 editor.uuid.required,(required),1,(obligatoire),0
 editor.uuid.new,New UUID,1,New UUID,0
@@ -122,6 +122,8 @@ editor.export,Export,1,Exporter,0
 editor.export.success,Export successful,1,Exportation réussie,0
 editor.export.error,Export failed,1,Échec de l’exportation,0
 editor.rename,Rename,1,Rename,0
+editor.openSidebar,Open sidebar,1,Ouvrir la barre latérale,0
+editor.leaveEditor,Leave Editor,1,Quitter l'éditeur,0
 editor.loadPrevious,Load Previous,1,Charger le précédent,0
 editor.viewHistory,View Previous,1,Voir précédent,0
 editor.browse,Browse,1,Parcourir,1
@@ -133,14 +135,14 @@ editor.confirm,Confirm,1,Confirmer,1
 editor.cancel,Cancel,1,Annuler,1
 editor.caption.placeholder,Add a caption,1,Ajouter une légende,0
 editor.unsavedChanges,Unsaved changes,1,Modifications non enregistrées,1
-editor.saveChanges,Save changes,1,Enregistrer les modifications,1
-editor.discardChanges,Discard changes,1,Annuler les modifications,0
+editor.saveChanges,Save,1,Enregistrer,1
+editor.discardChanges,Discard changes,1,Annuler,0
 editor.label.or,or,1,ou,1
 editor.label.browse,browse,1,parcourir,1
 editor.label.upload,to upload,1,téléverser,1
 editor.savingChanges,Saving...,1,Enregistrement...,1
 editor.confirmOverwrite,Are you sure you want to overwrite product '{uuid}'?,1,Are you sure you want to overwrite product '{uuid}'?,0
-editor.resetChanges,Reset Changes,1,Annuler les modifications,1
+editor.resetChanges,Reset Changes,1,Annuler,1
 editor.refreshChanges.modal,"Are you sure you want to reload the product? All unsaved changes will be lost.",1,"Voulez-vous vraiment recharger ce produit? Toute modification non enregistrée sera perdue.",1
 editor.changeLang.modal,"Are you sure you want to switch languages? Unsaved changes may be lost.",1,"Voulez-vous vraiment changer de langue? Toute modification non enregistrée sera perdue.",1
 editor.frenchConfig,View French Config,1,Afficher la configuration en français,1