diff --git a/src/app.vue b/src/app.vue
index e2a0351d..b892b25f 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -29,7 +29,7 @@ export default class App extends Vue {
 </script>
 
 <style lang="scss">
-$font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+$font-list: 'Segoe UI', system-ui, ui-sans-serif, Tahoma, Geneva, Verdana, sans-serif;
 
 .ovwContainer .layerTile {
     max-width: initial;
diff --git a/src/components/editor.vue b/src/components/editor.vue
index f40bfd41..b4ecacf6 100644
--- a/src/components/editor.vue
+++ b/src/components/editor.vue
@@ -372,10 +372,11 @@ export default class EditorV extends Vue {
 }
 
 .editor-input {
-    padding: 5px 10px;
+    padding: 10px 10px;
     margin-top: 5px;
     border: 1px solid black;
     display: inline;
+    border-radius: 5px;
 }
 
 .editor-container .input-error {
@@ -389,6 +390,11 @@ export default class EditorV extends Vue {
     transition-duration: 0.2s;
 }
 
+.editor-forms-button {
+    padding: 11px 15px;
+    border-radius: 5px;
+}
+
 .editor-button:hover:enabled {
     background-color: #dbdbdb;
     color: black;
diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue
index 710d713e..bc9a4f7f 100644
--- a/src/components/metadata-editor.vue
+++ b/src/components/metadata-editor.vue
@@ -2,192 +2,45 @@
     <!-- If the configuration file is being fetched, display a spinner to indicate loading. -->
     <div class="editor-container">
         <template v-if="!loadEditor">
-            <div class="px-20 py-5">
-                <div class="flex">
-                    <div class="flex flex-1 text-2xl font-bold mb-5">
+            <div>
+                <header
+                    class="flex flex-col md:flex-row justify-between border-b-2 border-black px-10 md:px-20 pt-10 pb-5 mb-5"
+                >
+                    <div class="flex flex-1 my-2 mx-auto md:mx-0 text-2xl md:text-3xl font-semibold">
                         {{ editExisting ? $t('editor.editProduct') : $t('editor.createProduct') }}
                     </div>
-                    <button class="editor-button" @click="swapLang()">
-                        {{ configLang === 'en' ? $t('editor.frenchConfig') : $t('editor.englishConfig') }}
-                    </button>
-                </div>
-                <div class="border py-5 w-5/6">
-                    <div v-if="renaming" class="flex flex-row items-center">
-                        <label class="editor-label"> {{ $t('editor.uuid.new') }}: </label>
-                        <input
-                            class="editor-input w-1/3 mt-0"
-                            type="text"
-                            @input="
-                                error = false;
-                                checkUuid(true);
-                            "
-                            v-model="changeUuid"
-                            :class="{ 'input-error': error || !reqFields.uuid }"
-                        />
-                        <button
-                            @click="renameProduct"
-                            class="editor-button bg-black text-white hover:bg-gray-800"
-                            :class="{ 'input-error': error }"
-                            :disabled="changeUuid.length === 0 || checkingUuid || warning === 'rename'"
-                        >
-                            {{ $t('editor.rename') }}
-                        </button>
-
-                        <!-- If config is loading, display a small spinner. -->
-                        <div class="inline-flex align-middle mb-1" v-if="checkingUuid">
-                            <spinner size="24px" color="#009cd1" class="mx-2 my-auto"></spinner>
-                        </div>
-                    </div>
-                    <div v-else class="flex flex-row items-center">
-                        <label class="editor-label">
-                            <span class="text-red-500" v-if="'uuid' in reqFields">*</span>
-                            {{ $t('editor.uuid') }}:
-                        </label>
-                        <div class="relative w-1/3 inline-block">
-                            <input
-                                class="editor-input w-full mt-0"
-                                type="text"
-                                @input="
-                                    error = false;
-                                    reqFields.uuid = true;
-                                    checkUuid();
-                                "
-                                v-model.trim="uuid"
-                                @focus="showDropdown = true"
-                                @blur="showDropdown = false"
-                                @keydown.down.prevent="highlightNext"
-                                @keydown.up.prevent="highlightPrevious"
-                                @keydown.enter.prevent="selectHighlighted"
-                                :class="{ 'input-error': error || !reqFields.uuid }"
-                            />
-                            <div
-                                class="absolute z-10 w-full bg-white border border-gray-200 mt-1 max-h-60vh overflow-y-auto"
-                                v-show="showDropdown"
-                            >
-                                <ul>
-                                    <li
-                                        v-for="(storyline, index) in getStorylines"
-                                        :key="storyline.uuid"
-                                        @mousedown.prevent="selectUuid(storyline.uuid)"
-                                        :class="[
-                                            'p-2 hover:bg-gray-100 cursor-pointer',
-                                            storyline.isUserStoryline ? 'bg-gray-200' : '',
-                                            { 'bg-gray-300': highlightedIndex === index }
-                                        ]"
-                                    >
-                                        <div>
-                                            {{ storyline.uuid }} - <b>{{ getTitle(storyline) }}</b>
-                                        </div>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-
-                        <button
-                            @click="generateRemoteConfig"
-                            class="editor-button bg-black text-white hover:bg-gray-800"
-                            :class="{ 'input-error': error }"
-                            v-if="editExisting"
-                        >
-                            {{ $t('editor.load') }}
-                        </button>
-
-                        <button
-                            @click="fetchHistory"
-                            class="bg-black editor-button text-white hover:bg-gray-800"
-                            :class="{ 'input-error': error }"
-                            v-if="editExisting"
+                    <div class="flex flex-row md:flex-col gap-3 items-center md:items-stretch justify-around text-right">
+                        <router-link
+                            v-if="!currentRoute.includes('index-ca-en.html') && !currentRoute.includes('index-ca-fr.html')"
+                            :to="{
+                                name: editExisting ? 'metadataExisting' : 'metadataNew',
+                                params: { lang: currLang === 'en' ? 'fr' : 'en' }
+                            }"
                         >
-                            {{ $t('editor.viewHistory') }}
-                        </button>
-
-                        <!-- If config is loading, display a small spinner. -->
-                        <div class="inline-flex align-middle mb-1" v-if="loadStatus === 'loading'">
-                            <spinner size="24px" color="#009cd1" class="mx-2 my-auto"></spinner>
-                        </div>
-
-                        <div v-if="editExisting" class="ml-10">
-                            <ul>
-                                <li
-                                    v-for="history in storylineHistory"
-                                    :key="history.id"
-                                    @click="selectHistory(history)"
-                                    class="p-2 cursor-pointer"
-                                    :class="{ 'bg-blue-200': selectedHistory && history.id === selectedHistory.id }"
-                                >
-                                    {{ formatDate(history.created) }}
-                                </li>
-                            </ul>
-                            <button
-                                :disabled="!selectedHistory || selectedHistory.storylineUUID !== uuid"
-                                class="editor-button bg-black text-white hover:bg-gray-800"
-                                @click="loadHistory()"
-                            >
-                                {{ $t('editor.loadPrevious') }}
-                            </button>
-                        </div>
+                            <a class="sub-link">
+                                {{ currLang === 'en' ? 'Français' : 'English' }}
+                            </a>
+                        </router-link>
+                        <a class="sub-link" @click="swapLang()" tabindex="0">
+                            {{ configLang === 'en' ? $t('editor.frenchConfig') : $t('editor.englishConfig') }}
+                        </a>
                     </div>
-                    <div>
-                        <!-- Display a warning if there is one. -->
-                        <span v-if="warning !== 'none'" class="text-yellow-500 rounded p-1">
-                            <div class="editor-label"></div>
-                            <span class="align-middle inline-block mr-1 pb-1 fill-current">
-                                <svg
-                                    clip-rule="evenodd"
-                                    fill-rule="evenodd"
-                                    stroke-linejoin="round"
-                                    stroke-miterlimit="2"
-                                    viewBox="0 0 24 24"
-                                    width="18"
-                                    height="18"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                >
-                                    <path
-                                        d="m2.095 19.886 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm9.907-6.881c-.414 0-.75.336-.75.75v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.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 text-sm">{{
-                                $t(`editor.warning.${warning}`)
-                            }}</span
-                            ><br />
-                        </span>
-
-                        <!-- Warning displayed if product is being renamed. -->
-                        <span v-if="!renaming && renamed" class="text-yellow-500 rounded p-1">
-                            <div class="editor-label"></div>
-                            <span class="align-middle inline-block mr-1 pb-1 fill-current">
-                                <svg
-                                    clip-rule="evenodd"
-                                    fill-rule="evenodd"
-                                    stroke-linejoin="round"
-                                    stroke-miterlimit="2"
-                                    viewBox="0 0 24 24"
-                                    width="18"
-                                    height="18"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                >
-                                    <path
-                                        d="m2.095 19.886 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm9.907-6.881c-.414 0-.75.336-.75.75v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.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 text-sm"
-                                >{{
-                                    $t('editor.changingUuid', {
-                                        changeUuid: renamed
-                                    })
-                                }} </span
-                            ><br />
-                        </span>
+                </header>
+                <section class="px-10 md:px-20 py-5">
+                    <h1 v-if="editExisting" class="text-2xl font-semibold">
+                        {{ $t('editor.editMetadata.editExistingHeader') }}
+                    </h1>
+
+                    <p v-if="editExisting" class="text-md mb-10">
+                        {{ $t('editor.metadata.uuidInstructions') }}
+                    </p>
 
+                    <section>
+                        <label class="font-bold mb-0">{{ $t('editor.uuid') }} <span class="text-red-500 font-normal">{{ $t('editor.uuid.required') }}</span></label>
                         <!-- Button to switch between loading and renaming product UUIDs. -->
                         <span v-if="editExisting && loadStatus == 'loaded'" class="p-1">
-                            <div class="editor-label"></div>
                             <button
-                                class="align-center inline-block select-none text-sm"
+                                class="ml-10 sub-link inline-block select-none text-sm"
                                 @click="
                                     renaming = !renaming;
                                     changeUuid = '';
@@ -197,34 +50,312 @@
                                 {{ renaming ? $t('editor.cancel') : $t('editor.changeUuid') }}
                             </button>
                         </span>
-                    </div>
-                </div>
-                <br />
-                <div class="mb-4">
-                    <h3 class="editor-h3">{{ $t('editor.productDetails') }}</h3>
-                    <p>
-                        {{ $t('editor.metadata.instructions') }}
-                    </p>
-                </div>
-                <metadata-content
-                    :metadata="metadata"
-                    @metadata-changed="updateMetadata"
-                    @logo-changed="onFileChange"
-                    @logo-source-changed="onLogoSourceInput"
-                ></metadata-content>
+                        
+                        <label>{{ !editExisting ? $t('editor.metadata.newUuidInstructions') : '' }}</label>
+
+                        <div class="pb-5 pt-2">
+                            <div v-if="renaming" class="flex flex-row items-center w-full md:w-3/4">
+                                <label class="mr-6 ml-3"> {{ $t('editor.uuid.new') }}: </label>
+                                <input
+                                    class="editor-input mt-0 flex-2"
+                                    type="text"
+                                    @input="
+                                        error = false;
+                                        checkUuid(true);
+                                    "
+                                    v-model="changeUuid"
+                                    v-on:keyup.enter="renameProduct"
+                                    :class="{
+                                        'input-error': error || !reqFields.uuid,
+                                        'input-warning': warning === 'rename'
+                                    }"
+                                />
+                                <button
+                                    @click="renameProduct"
+                                    class="editor-button editor-forms-button bg-black text-white hover:bg-gray-800"
+                                    :class="{ 'input-error': error }"
+                                    :disabled="changeUuid.length === 0 || checkingUuid || warning === 'rename'"
+                                >
+                                    {{ $t('editor.rename') }}
+                                </button>
+
+                                <!-- If config is loading, display a small spinner. -->
+                                <div class="inline-flex align-middle mb-1" v-if="checkingUuid">
+                                    <spinner size="24px" color="#009cd1" class="mx-2 my-auto"></spinner>
+                                </div>
+                            </div>
+                            <div v-else class="flex flex-row items-center">
+                                <div class="flex flex-row items-center w-full">
+                                    <div class="relative w-full md:w-3/5 inline-block">
+                                        <!-- Note: 'search'-type inputs will delete their inputted data if you press ESC. -->
+                                        <input
+                                            class="editor-input w-full mt-0"
+                                            :disabled="loadStatus === 'loading'"
+                                            type="search"
+                                            @input="
+                                                error = false;
+                                                reqFields.uuid = true;
+                                                checkUuid();
+                                            "
+                                            v-model.trim="uuid"
+                                            v-on:keyup.enter="
+                                                () => {
+                                                    generateRemoteConfig().then(fetchHistory);
+                                                }
+                                            "
+                                            @focus="showDropdown = true"
+                                            @blur="showDropdown = false"
+                                            @keydown.down.prevent="highlightNext"
+                                            @keydown.up.prevent="highlightPrevious"
+                                            @keydown.enter.prevent="selectHighlighted"
+                                            :class="{
+                                                'input-error': error || !reqFields.uuid,
+                                                'input-success': loadStatus === 'loaded',
+                                                'input-warning': !renaming && renamed
+                                            }"
+                                        />
+                                        <div
+                                            class="absolute z-10 w-full bg-white border border-gray-200 mt-1 max-h-60vh overflow-y-auto"
+                                            v-show="showDropdown"
+                                        >
+                                            <ul>
+                                                <li
+                                                    v-for="(storyline, index) in getStorylines"
+                                                    :key="storyline.uuid"
+                                                    @mousedown.prevent="selectUuid(storyline.uuid)"
+                                                    :class="[
+                                                        'p-2 hover:bg-gray-100 cursor-pointer',
+                                                        storyline.isUserStoryline ? 'bg-gray-200' : '',
+                                                        { 'bg-gray-300': highlightedIndex === index }
+                                                    ]"
+                                                >
+                                                    <div>
+                                                        {{ storyline.uuid }} - <b>{{ getTitle(storyline) }}</b>
+                                                    </div>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                    <button
+                                        @click="
+                                            () => {
+                                                generateRemoteConfig().then(fetchHistory);
+                                            }
+                                        "
+                                        class="editor-button editor-forms-button bg-black text-white hover:bg-gray-800"
+                                        :class="{ 'input-error': error }"
+                                        :disabled="loadStatus === 'loading'"
+                                        v-if="editExisting"
+                                    >
+                                        {{ $t('editor.load') }}
+                                    </button>
+                                </div>
+                            </div>
+                            <section class="flex flex-col gap-5 mt-10" v-if="loadStatus === 'loading'">
+                                <!-- If config is loading, display a small spinner. -->
+                                <p>
+                                    {{ $t('editor.editMetadata.loading') }}
+                                </p>
+                                <div class="align-middle mb-1">
+                                    <spinner size="65px" thickness="20" color="#009cd1" class="mx-2 my-auto"></spinner>
+                                </div>
+                                <div class="flex">
+                                    <a class="sub-link text-left" @click="controller.abort">{{
+                                        $t('editor.editMetadata.load.cancel')
+                                    }}</a>
+                                </div>
+                            </section>
+
+                            <div>
+                                <!-- Display a warning if there is one. -->
+                                <span
+                                    v-if="warning !== 'none'"
+                                    class="flex flex-row items-center text-yellow-500 rounded p-1"
+                                >
+                                    <span class="sm:ml-28 align-middle inline-block mr-1 fill-current">
+                                        <svg
+                                            clip-rule="evenodd"
+                                            fill-rule="evenodd"
+                                            stroke-linejoin="round"
+                                            stroke-miterlimit="2"
+                                            viewBox="0 0 24 24"
+                                            width="18"
+                                            height="18"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                            <path
+                                                d="m2.095 19.886 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm9.907-6.881c-.414 0-.75.336-.75.75v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.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>
+                                    <div>
+                                        <span class="inline-block select-none text-sm">{{
+                                            $t(`editor.warning.${warning}`)
+                                        }}</span>
+                                    </div>
+                                    <br />
+                                </span>
+
+                                <!-- Warning displayed if product is being renamed. -->
+                                <span
+                                    v-if="!renaming && renamed"
+                                    class="flex flex-row items-center text-yellow-500 rounded p-1"
+                                >
+                                    <!-- <div class="editor-label"></div> -->
+                                    <span class="align-middle inline-block mr-1 fill-current">
+                                        <svg
+                                            clip-rule="evenodd"
+                                            fill-rule="evenodd"
+                                            stroke-linejoin="round"
+                                            stroke-miterlimit="2"
+                                            viewBox="0 0 24 24"
+                                            width="18"
+                                            height="18"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                            <path
+                                                d="m2.095 19.886 9.248-16.5c.133-.237.384-.384.657-.384.272 0 .524.147.656.384l9.248 16.5c.064.115.096.241.096.367 0 .385-.309.749-.752.749h-18.496c-.44 0-.752-.36-.752-.749 0-.126.031-.252.095-.367zm9.907-6.881c-.414 0-.75.336-.75.75v3.5c0 .414.336.75.75.75s.75-.336.75-.75v-3.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>
+                                    <div>
+                                        <span class="inline-block select-none text-sm"
+                                            >{{
+                                                $t('editor.changingUuid', {
+                                                    changeUuid: renamed
+                                                })
+                                            }}
+                                        </span>
+                                    </div>
+                                    <br />
+                                </span>
+                            </div>
+                        </div>
+                    </section>
+
+                    <br />
+
+                    <section v-if="!(editExisting && loadStatus !== 'loaded')">
+                        <section v-if="editExisting" class="pb-10">
+                            <h1 class="text-2xl font-semibold">
+                                {{ $t('editor.editMetadata.versionHistory.header') }}
+                            </h1>
+                            <p>
+                                {{
+                                    storylineHistory.length === 0
+                                        ? $t('editor.editMetadata.versionHistory.noResults')
+                                        : $t('editor.editMetadata.versionHistory.resultsFound')
+                                }}
+                            </p>
+                            <div class="flex flex-col gap-5 pt-5" v-if="storylineHistory.length !== 0">
+                                <div class="flex">
+                                    <button
+                                        class="editor-button editor-forms-button m-0 border border-black"
+                                        @click="() => (showHistory = !showHistory)"
+                                    >
+                                        {{
+                                            showHistory
+                                                ? $t('editor.editMetadata.versionHistory.buttonHide')
+                                                : $t('editor.editMetadata.versionHistory.buttonShow')
+                                        }}
+                                    </button>
+                                </div>
+
+                                <!-- Version history table -->
+                                <table v-show="showHistory" class="shadow-lg bg-white w-full md:w-3/4 lg:w-1/2">
+                                    <colgroup>
+                                        <col class="w-3/5" />
+                                        <col span="2" />
+                                    </colgroup>
+                                    <tr>
+                                        <td
+                                            style="background-color: #e7e7e7"
+                                            class="font-bold border-b border-solid border-black"
+                                        >
+                                            <div class="m-2 mr-0 ml-3">
+                                                {{ $t('editor.editMetadata.versionHistory.saveDate') }}
+                                            </div>
+                                        </td>
+                                        <td
+                                            style="background-color: #e7e7e7"
+                                            class="font-bold border-b border-solid border-black"
+                                        >
+                                            <div class="ml-0">
+                                                {{ $t('editor.editMetadata.versionHistory.actions') }}
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    <tr v-for="(historyItem, idx) in storylineHistory" :key="idx">
+                                        <td
+                                            style="background-color: #f9f9f9"
+                                            class="border-b border-solid pl-4"
+                                            :class="
+                                                idx === storylineHistory.length - 1 ? 'border-black' : 'border-gray-200'
+                                            "
+                                        >
+                                            {{ historyItem.created }}
+                                        </td>
+                                        <td
+                                            style="background-color: #f9f9f9"
+                                            class="border-b border-solid py-3 pr-3"
+                                            :class="
+                                                idx === storylineHistory.length - 1 ? 'border-black' : 'border-gray-200'
+                                            "
+                                        >
+                                            <button
+                                                class="editor-button editor-forms-button m-0 border border-black"
+                                                @click="
+                                                    () => {
+                                                        selectHistory(historyItem);
+                                                        loadHistory();
+                                                    }
+                                                "
+                                            >
+                                                <span>{{ $t('editor.editMetadata.versionHistory.load') }}</span>
+                                            </button>
+                                        </td>
+                                    </tr>
+                                </table>
+                            </div>
+                        </section>
+
+                        <div class="mb-4">
+                            <h1 class="text-2xl font-semibold">{{ $t('editor.productDetails') }}</h1>
+                            <p>
+                                {{ $t('editor.metadata.instructions') }}
+                            </p>
+                        </div>
+                        <metadata-content
+                            :metadata="metadata"
+                            @metadata-changed="updateMetadata"
+                            @logo-changed="onFileChange"
+                            @logo-source-changed="onLogoSourceInput"
+                        ></metadata-content>
+                        <button
+                            v-if="editExisting"
+                            @click="saveMetadata(true)"
+                            class="editor-button editor-forms-button"
+                        >
+                            {{ $t('editor.saveChanges') }}
+                        </button>
+                    </section>
+                </section>
             </div>
 
-            <div class="flex mt-8">
-                <button v-if="editExisting" @click="saveMetadata(true)" class="editor-button">
-                    {{ $t('editor.saveChanges') }}
-                </button>
+            <div class="flex px-10 md:px-20 py-5 mt-8">
+                <router-link :to="{ name: 'home' }" target>
+                    <button class="editor-button editor-forms-button m-0 border border-black">
+                        {{ $t('editor.back') }}
+                    </button>
+                </router-link>
+
                 <div class="ml-auto">
-                    <router-link :to="{ name: 'home' }" target>
-                        <button class="editor-button">{{ $t('editor.back') }}</button>
-                    </router-link>
                     <button
                         @click="warning === 'none' ? continueToEditor() : $vfm.open(`confirm-uuid-overwrite`)"
-                        class="editor-button bg-black text-white"
+                        class="editor-button editor-forms-button m-0 bg-black text-white"
+                        :class="{ hidden: editExisting && loadStatus !== 'loaded' }"
                     >
                         {{ $t('editor.next') }}
                     </button>
@@ -258,7 +389,7 @@
             >
                 <template v-slot:langModal="slotProps">
                     <button
-                        class="editor-button"
+                        class="editor-button editor-forms-button"
                         @click.stop="slotProps.unsavedChanges ? $vfm.open(`change-lang`) : swapLang()"
                     >
                         {{ configLang === 'en' ? $t('editor.frenchConfig') : $t('editor.englishConfig') }}
@@ -285,10 +416,10 @@
                         ></metadata-content>
                         <div class="w-full flex justify-end">
                             <button
-                                class="editor-button bg-black text-white hover:bg-gray-800"
+                                class="editor-button editor-forms-button bg-black text-white hover:bg-gray-800"
                                 @click="saveMetadata(false)"
                             >
-                                Done
+                                {{ $t('editor.done') }}
                             </button>
                         </div>
                     </vue-final-modal>
@@ -372,6 +503,8 @@ interface History {
 export default class MetadataEditorV extends Vue {
     @Prop({ default: true }) editExisting!: boolean; // true if editing existing storylines product, false if new product
 
+    currentRoute = window.location.href;
+
     configs: {
         [key: string]: StoryRampConfig | undefined;
     } = { en: undefined, fr: undefined };
@@ -384,16 +517,20 @@ export default class MetadataEditorV extends Vue {
     error = false; // whether an error has occurred
     warning: 'none' | 'uuid' | 'rename' = 'none'; // used for duplicate uuid warning
     configLang = 'en';
+    currLang = 'en'; // page language
     showDropdown = false;
     highlightedIndex = -1;
 
     storylineHistory: History[] = [];
     selectedHistory: History | null = null;
+    showHistory = false;
 
     // Saving properties.
     saving = false;
     unsavedChanges = false;
 
+    controller = new AbortController();
+
     apiUrl = import.meta.env.VITE_APP_CURR_ENV ? import.meta.env.VITE_APP_API_URL : 'http://localhost:6040';
 
     // Form properties.
@@ -423,6 +560,10 @@ export default class MetadataEditorV extends Vue {
     slides: Slide[] = [];
     sourceCounts: SourceCounts = {};
 
+    mounted(): void {
+        this.currLang = (this.$route.params.lang as string) || 'en';
+    }
+
     created(): void {
         this.loadExisting = this.editExisting;
 
@@ -563,56 +704,68 @@ export default class MetadataEditorV extends Vue {
     /**
      * Provided with a UID, retrieve the project contents from the file server.
      */
-    generateRemoteConfig(): void {
+    async generateRemoteConfig(): Promise<void> {
         this.loadStatus = 'loading';
 
+        // Create a new AbortController for each fetch attempt
+        // as they get 'used up' after each successful abort() call
+        this.controller = new AbortController();
+
         // Reset fields
         this.baseUuid = this.uuid;
         this.renamed = '';
         this.changeUuid = '';
 
         // Attempt to fetch the project from the server.
-        fetch(this.apiUrl + `/retrieve/${this.uuid}`)
-            .then((res: Response) => {
-                if (res.status === 404) {
-                    // Product not found.
-                    Message.error(`The requested UUID '${this.uuid ?? ''}' does not exist.`);
-                    this.error = true;
-                    this.loadStatus = 'waiting';
-                    this.clearConfig();
-                } else {
-                    const configZip = new JSZip();
-                    // Files retrieved. Convert them into a JSZip object.
-                    res.blob().then((file: Blob) => {
-                        configZip.loadAsync(file).then(() => {
-                            this.configFileStructureHelper(configZip);
+        try {
+            const res = await fetch(this.apiUrl + `/retrieve/${this.uuid}`, { signal: this.controller.signal });
+
+            if (res.status === 404) {
+                // Product not found.
+                Message.error(this.$t('editor.warning.uuidNotFound', this.uuid));
+                this.error = true;
+                this.loadStatus = 'waiting';
+                this.clearConfig();
+                return; // Exit early if product is not found
+            }
+
+            const configZip = new JSZip();
+            const file = await res.blob();
+            await configZip.loadAsync(file);
+            this.configFileStructureHelper(configZip);
+
+            // Fetch messages after the product has been retrieved
+            const messageRes = await fetch(this.apiUrl + `/retrieveMessages`);
+            if (messageRes.ok) {
+                const data = await messageRes.json();
+
+                if (import.meta.env.VITE_APP_CURR_ENV) {
+                    try {
+                        await axios.post(import.meta.env.VITE_APP_NET_API_URL + '/api/log/create', {
+                            messages: data.messages
                         });
-                    });
+                    } catch (axiosError: any) {
+                        console.error(axiosError.response || axiosError);
+                    }
                 }
-
-                fetch(this.apiUrl + `/retrieveMessages`)
-                    .then((res: any) => {
-                        if (res.ok) return res.json();
-                    })
-                    .then((data) => {
-                        if (import.meta.env.VITE_APP_CURR_ENV) {
-                            axios
-                                .post(import.meta.env.VITE_APP_NET_API_URL + '/api/log/create', {
-                                    messages: data.messages
-                                })
-                                .catch((error: any) => console.log(error.response || error));
-                        }
-                    })
-                    .catch((error: any) => console.log(error.response || error));
-            })
-            .catch(() => {
-                Message.error(`Failed to load product, no response from server`);
-                this.loadStatus = 'loaded';
-            });
+            }
+            return Promise.resolve();
+        } catch (err: any) {
+            if (err.name === 'AbortError' || err instanceof PointerEvent) {
+                Message.success(this.$t('editor.editMetadata.retrievalAborted'));
+            } else {
+                Message.error(this.$t('editor.warning.retrievalFailed'));
+            }
+            this.loadStatus = 'waiting';
+            return Promise.reject();
+        }
     }
 
     fetchHistory(): void {
-        if (this.uuid === undefined) Message.error(`You must first enter a UUID`);
+        // Note: This part probably doesn't need an manual abort() trigger to kill on load cancel,
+        // as the history should be much smaller and quicker to fetch than the config
+
+        if (this.uuid === undefined) Message.error(this.$t('editor.warning.mustEnterUuid'));
 
         if (import.meta.env.VITE_APP_CURR_ENV) {
             axios
@@ -1433,5 +1586,35 @@ $font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         max-height: 150px;
         display: inline;
     }
+
+    .sub-link {
+        color: blue;
+        margin: 0;
+        padding: 0;
+        text-decoration: underline;
+        cursor: pointer;
+        font-weight: normal;
+        font-size: 0.875rem /* 14px */;
+        line-height: 1.25rem /* 20px */;
+        user-select: none;
+    }
+
+    .sub-link:hover {
+        color: rgb(87, 176, 253);
+    }
+
+    .sub-link:active {
+        color: rgb(87, 211, 253);
+    }
+
+    .input-success {
+        border-color: rgb(0, 189, 0);
+        outline-color: rgb(0, 189, 0);
+    }
+
+    .input-warning {
+        border-color: #eab308;
+        outline-color: #eab308;
+    }
 }
 </style>
diff --git a/src/lang/lang.csv b/src/lang/lang.csv
index bdf6fdd0..33e3b6da 100644
--- a/src/lang/lang.csv
+++ b/src/lang/lang.csv
@@ -32,13 +32,32 @@ editor.configOverwrite,Are you sure you want to overwrite product '{uuid}'?,1,Ê
 editor.createProduct,Create New Storylines Product,1,Créer un nouveau produit de scénarios,1
 editor.editProduct,Edit Existing Storylines Product,1,Modifier un produit de scénarios,1
 editor.editMetadata,Edit Project Metadata,1,Modifier les métadonnées d’un projet,1
+editor.editMetadata.load.cancel,Cancel load,1,Annuler le chargement,0
+editor.editMetadata.editExistingHeader,Choose Storylines Product,1,Choisissez le produit Storylines,0
+editor.editMetadata.loading,Storyline product is loading. Larger products can take a while to load. Thank you for your patience.,1,Le produit Storyline est en cours de chargement. Le chargement des produits plus volumineux peut prendre un certain temps. Merci pour votre patience.,0
+editor.editMetadata.versionHistory.buttonShow,Show previous versions of product,1,Afficher les versions précédentes du produit,0
+editor.editMetadata.versionHistory.buttonHide,Hide previous versions,1,Masquer les versions précédentes,0
+editor.editMetadata.versionHistory.header,Version History,1,Historique des versions,0
+editor.editMetadata.versionHistory.resultsFound,"We detected previous versions of this storylines product. If you wish to restore a previous version, please click 'Show previous versions of product'.",1,"Nous avons détecté des versions précédentes de ce produit Storylines. Si vous souhaitez restaurer une version précédente, veuillez cliquer sur « Afficher les versions précédentes du produit ».",0
+editor.editMetadata.versionHistory.noResults,There are no previous versions of this storylines product.,1,Il n’existe aucune version précédente de ce produit Storylines.,0
+editor.editMetadata.versionHistory.load,Load this version,1,Charger cette version,0
+editor.editMetadata.versionHistory.actions,Actions,1,Actes,0
+editor.editMetadata.versionHistory.saveDate,Save Date,1,Enregistrer la date,0
+editor.editMetadata.retrievalAborted,Product retrieval manually aborted.,1,Récupération du produit interrompue manuellement.,0
+editor.done,Done,1,Fini,0
 editor.productDetails,Storylines product details,1,Détails du produit de scénarios,1
 editor.metadata.instructions,Fill in metadata details about your new Storylines product. Use the "Preview" button to see what your slides will look like.,1,Inscrivez les métadonnées de votre nouveau produit de scénario. Utilisez la fonction « Afficher l’aperçu » pour voir à quoi ressemblent vos diapositives.,1
-editor.uuid,UUID,1,UUID,1
+editor.uuid,UUID,1,UUID,0
+editor.uuid.required,(required),1,(obligatoire),0
 editor.uuid.new,New UUID,1,New UUID,0
+editor.warning.mustEnterUuid,You must first enter a UUID.,1,Vous devez d'abord saisir un UUID.,0
+editor.warning.retrievalFailed,"Failed to load product, no response from server.",1,"Échec du chargement du produit, aucune réponse du serveur.",0
 editor.warning.uuid,UUID already exists. Saving this will overwrite existing product.,1,L’IDUU existe déjà. Enregistrer ce produit écrasera le produit existant.,1
+editor.warning.uuidNotFound,"The requested UUID '{uuid}' does not exist.",1,"L'UUID {uuid} ​​demandé n'existe pas",0
+editor.metadata.uuidInstructions,"Please enter the UUID of an existing storylines product, then click the 'Load' button.",1,"Veuillez saisir l'UUID d'un produit de scénario existant, puis cliquez sur le bouton « Charger ».",0
+editor.metadata.newUuidInstructions,"Enter a unique ID for your new storyline. One has been auto-generated for you, but you can also enter your own.",1,"Entrez un identifiant unique pour votre nouveau scénario. Un a été généré automatiquement pour vous, mais vous pouvez également saisir le vôtre.",0
 editor.warning.rename,UUID already in use. Please choose a different ID.,1,UUID déjà utilisé. Veuillez choisir un autre identifiant.,0
-editor.changeUuid,Click here to change UUID,1,Click here to change UUID,0
+editor.changeUuid,Click here to change UUID,1,Cliquez ici pour changer,0
 editor.changingUuid,You are changing this product UUID to {changeUuid}. Save changes required.,1,You are changing this product UUID to {changeUuid}. Save changes required.,0
 editor.title,Title,1,Titre,1
 editor.logo,Logo,1,Logo,1