diff --git a/app/frontend/src/components/admin/FormComponentsProactiveHelp.vue b/app/frontend/src/components/admin/FormComponentsProactiveHelp.vue
index 844c89b78..e424f2922 100644
--- a/app/frontend/src/components/admin/FormComponentsProactiveHelp.vue
+++ b/app/frontend/src/components/admin/FormComponentsProactiveHelp.vue
@@ -1,172 +1,80 @@
-<script>
-import { mapActions, mapState } from 'pinia';
+<script setup>
+import { storeToRefs } from 'pinia';
+import { computed, onMounted, ref, watch } from 'vue';
 
 import GeneralLayout from '~/components/infolinks/GeneralLayout.vue';
 import { useAdminStore } from '~/store/admin';
+import { FormComponentProactiveHelpValues } from '~/utils/constants';
 
-export default {
-  components: {
-    GeneralLayout,
-  },
-  data() {
-    return {
-      layout: {
-        'Basic Layout': [
-          'Text/Images',
-          'Columns - 2',
-          'Columns - 3',
-          'Columns - 4',
-          'Tabs',
-          'Panel',
-        ],
-        'Basic Fields': [
-          'Text Field',
-          'Multi-line Text',
-          'Select List',
-          'Checkbox',
-          'Checkbox Group',
-          'Radio Group',
-          'Number',
-          'Phone Number',
-          'Email',
-          'Date / Time',
-          'Day',
-        ],
-        'Advanced Layout': [
-          'HTML Element',
-          'Content',
-          'Columns',
-          'Field Set',
-          'Panel',
-          'Table',
-          'Tabs',
-          'Well',
-        ],
-        'Advanced Fields': [
-          'Text Field',
-          'Email',
-          'Text Area',
-          'Url',
-          'Number',
-          'Phone Number',
-          'Tags',
-          'Address',
-          'Password',
-          'Date / Time',
-          'Checkbox',
-          'Day',
-          'Time',
-          'Select Boxes',
-          'Select',
-          'Currency',
-          'Radio',
-          'Survey',
-          'Signature',
-        ],
-        'Advanced Data': [
-          'Hidden',
-          'Container',
-          'Data Map',
-          'Data Grid',
-          'Edit Grid',
-          'Tree',
-        ],
-        'BC Government': ['File Upload', 'Business Name Search', 'BC Address'],
-      },
-      isPanelOpened: new Map(),
-      groupComponentsList: [],
-    };
-  },
-  computed: {
-    ...mapState(useAdminStore, ['fcProactiveHelp', 'fcProactiveHelpGroupList']),
-    groupList() {
-      return this.extractGroups();
-    },
-  },
-  watch: {
-    fcProactiveHelp() {
-      this.listFCProactiveHelp();
-    },
-  },
-  mounted() {
-    this.listFCProactiveHelp();
-  },
-  methods: {
-    ...mapActions(useAdminStore, ['listFCProactiveHelp']),
-    onExpansionPanelClick(groupName) {
-      if (
-        this.isPanelOpened.get(groupName) === undefined ||
-        !this.isPanelOpened.get(groupName)
-      ) {
-        this.isPanelOpened.set(groupName, true);
-        this.groupComponentsList = this.extractGroupComponents(groupName);
-      } else {
-        this.isPanelOpened.set(groupName, false);
-      }
+const loading = ref(false);
 
-      for (let key of this.isPanelOpened.keys()) {
-        if (key !== groupName) {
-          this.isPanelOpened.set(key, false);
-        }
-      }
-    },
-
-    //extract form builder layout groups.
-    extractGroups() {
-      let allgroups = [];
-      for (let [title] of Object.entries(this.layout)) {
-        if (title) {
-          allgroups.push(title);
-        }
-      }
-      return allgroups;
-    },
-
-    //extract all components in the select group in form builder
-    extractGroupComponents(groupName) {
-      let groupComponents = [];
-      for (let [title, components] of Object.entries(this.layout)) {
-        if (title && title === groupName && components) {
-          for (let componentName of components) {
-            groupComponents.push({ componentName: componentName });
-          }
-        }
+const adminStore = useAdminStore();
+
+const { fcProactiveHelp, fcProactiveHelpGroupList } = storeToRefs(adminStore);
+const formComponentGroupNames = computed(() =>
+  Object.keys(FormComponentProactiveHelpValues).filter((name) => name !== '')
+);
+
+watch(fcProactiveHelp, async () => {
+  await refreshData();
+});
+
+onMounted(async () => {
+  await refreshData();
+});
+
+async function refreshData() {
+  loading.value = true;
+  await adminStore.listFCProactiveHelp();
+  loading.value = false;
+}
+
+//extract all components in the select group in form builder
+function extractGroupComponents(groupName) {
+  let groupComponents = [];
+  for (let [title, components] of Object.entries(
+    FormComponentProactiveHelpValues
+  )) {
+    if (title && title === groupName && components) {
+      for (let componentName of components) {
+        groupComponents.push({ componentName: componentName });
       }
-      return groupComponents;
-    },
-  },
-};
+    }
+  }
+  return groupComponents;
+}
 </script>
 
 <template>
   <div class="mt-5">
-    <v-expansion-panels
-      class="nrmc-expand-collapse"
-      data-cy="info_link_expansion_panels"
-    >
-      <v-expansion-panel
-        v-for="(groupName, index) in groupList"
-        :key="index"
-        @click="onExpansionPanelClick(groupName)"
+    <v-skeleton-loader :loading="loading">
+      <v-expansion-panels
+        class="nrmc-expand-collapse"
+        data-cy="info_link_expansion_panels"
       >
-        <v-expansion-panel-title>
-          <div class="header">
-            <strong>{{ groupName }}</strong>
-          </div>
-        </v-expansion-panel-title>
-        <v-expansion-panel-text>
-          <GeneralLayout
-            :group-name="groupName"
-            :layout-list="groupComponentsList"
-            :components-list="
-              fcProactiveHelpGroupList && fcProactiveHelpGroupList[groupName]
-                ? fcProactiveHelpGroupList[groupName]
-                : []
-            "
-          />
-        </v-expansion-panel-text>
-      </v-expansion-panel>
-    </v-expansion-panels>
+        <v-expansion-panel
+          v-for="(groupName, index) in formComponentGroupNames"
+          :key="index"
+        >
+          <v-expansion-panel-title>
+            <div class="header">
+              <strong>{{ groupName }}</strong>
+            </div>
+          </v-expansion-panel-title>
+          <v-expansion-panel-text>
+            <GeneralLayout
+              :group-name="groupName"
+              :form-component-names="extractGroupComponents(groupName)"
+              :form-component-data="
+                fcProactiveHelpGroupList && fcProactiveHelpGroupList[groupName]
+                  ? fcProactiveHelpGroupList[groupName]
+                  : []
+              "
+            />
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </v-skeleton-loader>
   </div>
 </template>
 
diff --git a/app/frontend/src/components/forms/PrintOptions.vue b/app/frontend/src/components/forms/PrintOptions.vue
index 99c7a3451..e6b0c4d46 100644
--- a/app/frontend/src/components/forms/PrintOptions.vue
+++ b/app/frontend/src/components/forms/PrintOptions.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
-import { onBeforeUnmount, computed, ref, watch } from 'vue';
+import { onBeforeUnmount, computed, ref, watch, nextTick } from 'vue';
 
 import { createDownload } from '~/composables/printOptions';
 import { formService, utilsService } from '~/services';
@@ -51,6 +51,8 @@ const defaultTemplateFilename = ref('');
 const defaultTemplateExtension = ref('');
 const displayTemplatePrintButton = ref(false);
 const isValidFile = ref(true);
+const isValidSize = ref(true);
+const fileInput = ref(null);
 const fileInputKey = ref(0);
 const validFileExtensions = ref(['txt', 'docx', 'html', 'odt', 'pptx', 'xlsx']);
 const defaultExportFileTypes = ref(['pdf']);
@@ -64,6 +66,7 @@ const { isRTL, form } = storeToRefs(formStore);
 const files = computed(() => templateForm.value.files);
 const formId = computed(() => (properties.f ? properties.f : form.value.id));
 const validationRules = computed(() => [
+  isValidSize.value || t('trans.documentTemplate.fileSizeError'),
   isValidFile.value || t('trans.documentTemplate.invalidFileMessage'),
 ]);
 
@@ -268,8 +271,16 @@ async function fetchDefaultTemplate() {
   }
 }
 
-function validateFileExtension(event) {
+function validateFile(event) {
   if (event.length > 0) {
+    // validate file size
+    if (event[0].size > 25000000) {
+      isValidSize.value = false;
+    } else {
+      isValidSize.value = true;
+    }
+
+    // validate file extension
     const fileExtension = event[0].name.split('.').pop();
     // reset the outputFileName when a new file is uploaded
     templateForm.value.outputFileName = event[0].name
@@ -294,13 +305,21 @@ function validateFileExtension(event) {
       );
     }
     isValidFile.value = true;
+    isValidSize.value = true;
   }
 }
 
 function handleFileUpload(event) {
   fileInputKey.value += 1;
   templateForm.value.files = event;
-  validateFileExtension(event);
+  validateFile(event);
+
+  //force immediate validation as the v-file-input is bound to the :key
+  nextTick(() => {
+    if (fileInput.value) {
+      fileInput.value.validate();
+    }
+  });
 }
 
 defineExpose({
@@ -308,11 +327,12 @@ defineExpose({
   createDownload,
   fetchDefaultTemplate,
   isValidFile,
+  isValidSize,
   selectedOption,
   templateForm,
   timeout,
   uploadExportFileTypes,
-  validateFileExtension,
+  validateFile,
 });
 </script>
 
@@ -446,6 +466,7 @@ defineExpose({
                   value="upload"
                 ></v-radio>
                 <v-file-input
+                  ref="fileInput"
                   :key="fileInputKey"
                   v-model="templateForm.files"
                   :class="{ label: isRTL }"
@@ -482,7 +503,11 @@ defineExpose({
                         id="file-input-submit"
                         variant="flat"
                         class="btn-file-input-submit px-4"
-                        :disabled="!displayTemplatePrintButton || !isValidFile"
+                        :disabled="
+                          !displayTemplatePrintButton ||
+                          !isValidFile ||
+                          !isValidSize
+                        "
                         color="primary"
                         :loading="loading"
                         v-bind="props"
diff --git a/app/frontend/src/components/forms/SubmissionsTable.vue b/app/frontend/src/components/forms/SubmissionsTable.vue
index 96b03b39e..4cc954038 100644
--- a/app/frontend/src/components/forms/SubmissionsTable.vue
+++ b/app/frontend/src/components/forms/SubmissionsTable.vue
@@ -41,9 +41,9 @@ const filterIgnore = ref([
   },
 ]);
 const forceTableRefresh = ref(0);
-const itemsPerPage = ref(10);
+const itemsPP = ref(10);
 const loading = ref(true);
-const page = ref(1);
+const currentPage = ref(1);
 const restoreItem = ref({});
 const selectedSubmissions = ref([]);
 const serverItems = ref([]);
@@ -52,7 +52,7 @@ const showDeleteDialog = ref(false);
 const showRestoreDialog = ref(false);
 const singleSubmissionDelete = ref(false);
 const singleSubmissionRestore = ref(false);
-const sortBy = ref({});
+const sort = ref({});
 const firstDataLoad = ref(true);
 // When filtering, this data will not be preselected when clicking reset
 const tableFilterIgnore = ref([
@@ -306,26 +306,26 @@ function onShowColumnDialog() {
   showColumnsDialog.value = true;
 }
 
-async function updateTableOptions({ pg, itemsPP, sort }) {
-  if (pg) {
-    page.value = pg;
+async function updateTableOptions({ page, itemsPerPage, sortBy }) {
+  if (page) {
+    currentPage.value = page;
   }
-  if (sort?.length > 0) {
-    if (sort[0].key === 'date') {
-      sortBy.value.column = 'createdAt';
-    } else if (sort[0].key === 'submitter') {
-      sortBy.value.column = 'createdBy';
-    } else if (sort[0].key === 'status') {
-      sortBy.value.column = 'formSubmissionStatusCode';
+  if (sortBy?.length > 0) {
+    if (sortBy[0].key === 'date') {
+      sort.value.column = 'createdAt';
+    } else if (sortBy[0].key === 'submitter') {
+      sort.value.column = 'createdBy';
+    } else if (sortBy[0].key === 'status') {
+      sort.value.column = 'formSubmissionStatusCode';
     } else {
-      sortBy.value.column = sort[0].key;
+      sort.value.column = sortBy[0].key;
     }
-    sortBy.value.order = sort[0].order;
+    sort.value.order = sortBy[0].order;
   } else {
-    sortBy.value = {};
+    sort.value = {};
   }
-  if (itemsPP) {
-    itemsPerPage.value = itemsPP;
+  if (itemsPerPage) {
+    itemsPP.value = itemsPerPage;
   }
   if (!firstDataLoad.value) {
     await refreshSubmissions();
@@ -336,11 +336,11 @@ async function updateTableOptions({ pg, itemsPP, sort }) {
 async function getSubmissionData() {
   let criteria = {
     formId: properties.formId,
-    itemsPerPage: itemsPerPage.value,
-    page: page.value - 1,
+    itemsPerPage: itemsPP.value,
+    page: currentPage.value - 1,
     filterformSubmissionStatusCode: true,
     paginationEnabled: true,
-    sortBy: sortBy.value,
+    sortBy: sort.value,
     search: search.value,
     searchEnabled: search.value.length > 0 ? true : false,
     createdAt: Object.values({
@@ -539,11 +539,11 @@ defineExpose({
   getSubmissionData,
   handleSearch,
   HEADERS,
-  itemsPerPage,
+  itemsPP,
   multiDeleteMessage,
   multiRestoreMessage,
   onShowColumnDialog,
-  page,
+  currentPage,
   restoreSub,
   serverItems,
   showColumnsDialog,
@@ -554,7 +554,7 @@ defineExpose({
   singleRestoreMessage,
   singleSubmissionDelete,
   singleSubmissionRestore,
-  sortBy,
+  sort,
   updateFilter,
   userColumns,
   USER_PREFERENCES,
@@ -691,7 +691,7 @@ defineExpose({
       hover
       :items-length="totalSubmissions"
       class="submissions-table"
-      :items-per-page="itemsPerPage"
+      :items-per-page="itemsPP"
       :headers="HEADERS"
       item-value="submissionId"
       :items="serverItems"
diff --git a/app/frontend/src/components/forms/manage/DocumentTemplate.vue b/app/frontend/src/components/forms/manage/DocumentTemplate.vue
index fa1f8d21a..a15b0ce28 100644
--- a/app/frontend/src/components/forms/manage/DocumentTemplate.vue
+++ b/app/frontend/src/components/forms/manage/DocumentTemplate.vue
@@ -27,6 +27,7 @@ const headers = ref([
 const loading = ref(true);
 const isFileInputEmpty = ref(true);
 const isValidFile = ref(true);
+const isValidSize = ref(true);
 const techdocsLinkTemplateUpload = ref(
   'https://developer.gov.bc.ca/docs/default/component/chefs-techdocs/Capabilities/Functionalities/CDOGS-Template-Upload/'
 );
@@ -38,6 +39,7 @@ const notificationStore = useNotificationStore();
 const { form, isRTL } = storeToRefs(useFormStore());
 
 const validationRules = computed(() => [
+  isValidSize.value || t('trans.documentTemplate.fileSizeError'),
   isValidFile.value || t('trans.documentTemplate.invalidFileMessage'),
 ]);
 
@@ -83,6 +85,15 @@ function handleFileInput(event) {
   if (event && event.length > 0) {
     isFileInputEmpty.value = false;
     uploadedFile = event[0];
+
+    // validate file size
+    if (uploadedFile.size > 25000000) {
+      isValidSize.value = false;
+    } else {
+      isValidSize.value = true;
+    }
+
+    // validate file extension
     const fileExtension = event[0].name.split('.').pop();
     if (validFileExtensions.includes(fileExtension)) {
       isValidFile.value = true;
@@ -92,6 +103,7 @@ function handleFileInput(event) {
   } else {
     isFileInputEmpty.value = true;
     isValidFile.value = true;
+    isValidSize.value = true;
   }
 }
 
@@ -120,12 +132,21 @@ async function handleFileUpload() {
       ...NotificationTypes.SUCCESS,
     });
   } catch (e) {
-    notificationStore.addNotification({
-      text: t('trans.documentTemplate.uploadError'),
-      consoleError: t('trans.documentTemplate.uploadError', {
-        error: e.message,
-      }),
-    });
+    if (e.response.status === 413) {
+      notificationStore.addNotification({
+        text: t('trans.documentTemplate.fileSizeError'),
+        consoleError: t('trans.documentTemplate.fileSizeError', {
+          error: e.message,
+        }),
+      });
+    } else {
+      notificationStore.addNotification({
+        text: t('trans.documentTemplate.uploadError'),
+        consoleError: t('trans.documentTemplate.uploadError', {
+          error: e.message,
+        }),
+      });
+    }
   } finally {
     loading.value = false;
   }
@@ -196,6 +217,7 @@ defineExpose({
   handleFileInput,
   isFileInputEmpty,
   isValidFile,
+  isValidSize,
   uploadedFile,
 });
 </script>
@@ -322,7 +344,10 @@ defineExpose({
     </v-file-input>
     <v-btn
       :disabled="
-        !isValidFile || isFileInputEmpty || documentTemplates.length >= 1
+        !isValidFile ||
+        !isValidSize ||
+        isFileInputEmpty ||
+        documentTemplates.length >= 1
       "
       color="primary"
       :title="$t('trans.documentTemplate.upload')"
diff --git a/app/frontend/src/components/infolinks/GeneralLayout.vue b/app/frontend/src/components/infolinks/GeneralLayout.vue
index 10284a5f4..002279cd9 100644
--- a/app/frontend/src/components/infolinks/GeneralLayout.vue
+++ b/app/frontend/src/components/infolinks/GeneralLayout.vue
@@ -1,138 +1,144 @@
-<script>
-import { mapActions, mapState } from 'pinia';
+<script setup>
+import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
+import { computed, onMounted, ref } from 'vue';
 
 import ProactiveHelpDialog from '~/components/infolinks/ProactiveHelpDialog.vue';
 import ProactiveHelpPreviewDialog from '~/components/infolinks/ProactiveHelpPreviewDialog.vue';
 import { useFormStore } from '~/store/form';
 import { useAdminStore } from '~/store/admin';
 
-export default {
-  components: {
-    ProactiveHelpDialog,
-    ProactiveHelpPreviewDialog,
+const { t, locale } = useI18n({ useScope: 'global' });
+
+const properties = defineProps({
+  // This is a list of the components that exist in this grouping
+  formComponentNames: {
+    type: Array,
+    required: true,
   },
-  props: {
-    layoutList: {
-      type: Array,
-      required: true,
-    },
-    componentsList: {
-      type: Array,
-      default: () => [],
-    },
-    groupName: {
-      type: String,
-      required: true,
-    },
+  // This is the actual component data
+  formComponentData: {
+    type: Array,
+    default: () => [],
   },
-  setup() {
-    const { t, locale } = useI18n({ useScope: 'global' });
-
-    return { t, locale };
+  groupName: {
+    type: String,
+    required: true,
   },
-  data() {
-    return {
-      component: {},
-      componentName: '',
-      loading: false,
-      publish: [],
-      publishStatus: 'UNPUBLISHED',
-      showDialog: false,
-      showPreviewDialog: false,
-    };
+});
+
+const component = ref({});
+const loading = ref(false);
+const publish = ref([]);
+const showEditProactiveHelpDialog = ref(false);
+const showPreviewDialog = ref(false);
+
+const adminStore = useAdminStore();
+const formStore = useFormStore();
+
+const { fcProactiveHelpImageUrl } = storeToRefs(adminStore);
+const { isRTL } = storeToRefs(formStore);
+
+const headers = computed(() => [
+  {
+    title: t('trans.generalLayout.formTitle'),
+    align: 'start',
+    key: 'componentName',
+    width: '1%',
   },
-  computed: {
-    ...mapState(useFormStore, ['isRTL']),
-    ...mapState(useAdminStore, ['fcProactiveHelpImageUrl']),
-    headers() {
-      return [
-        {
-          title: this.$t('trans.generalLayout.formTitle'),
-          align: 'start',
-          key: 'componentName',
-          width: '1%',
-        },
-        {
-          title: this.$t('trans.generalLayout.actions'),
-          align: 'end',
-          key: 'actions',
-          filterable: false,
-          sortable: false,
-          width: '1%',
-        },
-      ];
-    },
+  {
+    title: t('trans.generalLayout.actions'),
+    align: 'end',
+    key: 'actions',
+    filterable: false,
+    sortable: false,
+    width: '1%',
   },
-  mounted() {
-    let idx = 0;
-    for (let layoutItem of this.layoutList) {
-      for (let component of this.componentsList) {
-        if (component.componentName === layoutItem.componentName) {
-          this.publish[idx] = component.status;
-        }
+]);
+
+onMounted(() => {
+  for (let [
+    idx,
+    formComponentName,
+  ] of properties.formComponentNames.entries()) {
+    for (let formComponentData of properties.formComponentData) {
+      if (formComponentData.componentName === formComponentName.componentName) {
+        publish.value[idx] = formComponentData.status;
       }
-      idx++;
     }
-  },
-  methods: {
-    ...mapActions(useAdminStore, [
-      'getFCProactiveHelpImageUrl',
-      'updateFCProactiveHelpStatus',
-    ]),
-    //used to open form component help information dialog
-    onDialog() {
-      this.showDialog = !this.showDialog;
-    },
+  }
+});
 
-    //used to open form component help information preview dialog
-    onPreviewDialog() {
-      this.showPreviewDialog = !this.showPreviewDialog;
-    },
+// Toggles the visibility of the edit proactive help dialog
+function toggleEditProactiveHelpDialog() {
+  showEditProactiveHelpDialog.value = !showEditProactiveHelpDialog.value;
+}
 
-    canDisabled(compName) {
-      return (
-        this.componentsList.filter(
-          (component) => component.componentName === compName
-        ).length == 0
-      );
-    },
+// Should preview the proactive help dialog
+function togglePreviewDialog() {
+  showPreviewDialog.value = !showPreviewDialog.value;
+}
 
-    onOpenDialog(compName) {
-      this.getComponent(compName);
-      this.onDialog();
-    },
+function isPreviewEnabled(compName) {
+  return (
+    properties.formComponentData.filter((component) => {
+      return component.componentName === compName;
+    }).length == 0
+  );
+}
 
-    async onOpenPreviewDialog(compName) {
-      const item = this.componentsList.find(
-        (item) => item.componentName === compName
-      );
-      await this.getFCProactiveHelpImageUrl(item.id);
-      this.getComponent(item.componentName);
-      this.onPreviewDialog();
-    },
+function onOpenEditDialog(compName) {
+  setComponent(compName);
+  toggleEditProactiveHelpDialog();
+}
 
-    getComponent(compName) {
-      if (compName) {
-        this.componentName = compName;
-        this.component = this.componentsList.find((obj) => {
-          return obj.componentName === this.componentName;
-        });
-      }
-    },
+async function onOpenPreviewDialog(compName) {
+  loading.value = true;
+  const item = properties.formComponentData.find(
+    (item) => item.componentName === compName
+  );
+  await adminStore.getFCProactiveHelpImageUrl(item.id);
+  setComponent(item.componentName);
+  togglePreviewDialog();
+  loading.value = false;
+}
 
-    onSwitchChange(compName, index) {
-      for (const comp of this.componentsList) {
-        if (comp.componentName === compName) {
-          this.updateFCProactiveHelpStatus({
-            componentId: comp.id,
-            publishStatus: this.publish[index],
-          });
-        }
-      }
-    },
-  },
-};
+/*
+ * Sets the component data for the dialogs to use.
+ *
+ * @param compName The name of the component
+ */
+function setComponent(compName) {
+  if (compName) {
+    component.value = properties.formComponentData.find((obj) => {
+      return obj.componentName === compName;
+    });
+  }
+}
+
+async function onSwitchChange(compName, index) {
+  loading.value = true;
+  for (const comp of properties.formComponentData) {
+    if (comp.componentName === compName) {
+      await adminStore.updateFCProactiveHelpStatus({
+        componentId: comp.id,
+        publishStatus: publish.value[index],
+      });
+    }
+  }
+  loading.value = false;
+}
+
+defineExpose({
+  component,
+  isPreviewEnabled,
+  onOpenEditDialog,
+  onOpenPreviewDialog,
+  onSwitchChange,
+  publish,
+  showEditProactiveHelpDialog,
+  toggleEditProactiveHelpDialog,
+});
 </script>
 
 <template>
@@ -143,7 +149,7 @@ export default {
       hide-default-header
       hide-default-footer
       disable-pagination
-      :items="layoutList"
+      :items="formComponentNames"
       :loading="loading"
       :loading-text="$t('trans.generalLayout.loadingText')"
       :lang="locale"
@@ -164,7 +170,7 @@ export default {
               size="small"
               variant="text"
               :title="$t('trans.generalLayout.edit')"
-              @click="onOpenDialog(item.componentName)"
+              @click="onOpenEditDialog(item.componentName)"
             >
               <v-icon icon="mdi:mdi-pencil-box-outline"></v-icon>
               <span
@@ -181,7 +187,7 @@ export default {
               color="primary"
               variant="text"
               size="small"
-              :disabled="canDisabled(item.componentName)"
+              :disabled="isPreviewEnabled(item.componentName)"
               :title="$t('trans.generalLayout.preview')"
               @click="onOpenPreviewDialog(item.componentName)"
             >
@@ -195,55 +201,45 @@ export default {
             </v-btn>
           </div>
           <div>
-            <v-btn
-              data-cy="status_button"
-              color="primary"
-              variant="text"
-              size="small"
-              :title="
-                publish[index]
-                  ? $t('trans.generalLayout.published')
-                  : $t('trans.generalLayout.unpublished')
-              "
-              :disabled="canDisabled(item.componentName)"
+            <v-switch
+              v-model="publish[index]"
+              :class="{ 'dir-ltl': isRTL }"
+              density="compact"
+              hide-details
+              color="success"
+              @update:model-value="onSwitchChange(item.componentName, index)"
             >
-              <v-switch
-                v-model="publish[index]"
-                :class="{ 'dir-ltl': isRTL }"
-                density="compact"
-                hide-details
-                color="success"
-                @update:model-value="onSwitchChange(item.componentName, index)"
-              ></v-switch>
-              <span
-                style="width: 120px !important; font-size: 16px"
-                class="d-none d-sm-flex"
-                :lang="locale"
-                >{{
-                  publish[index]
-                    ? $t('trans.generalLayout.published')
-                    : $t('trans.generalLayout.unpublished')
-                }}</span
-              >
-            </v-btn>
+              <template #label>
+                <span
+                  style="width: 120px !important; font-size: 16px"
+                  class="d-none d-sm-flex"
+                  :lang="locale"
+                  >{{
+                    publish[index]
+                      ? $t('trans.generalLayout.published')
+                      : $t('trans.generalLayout.unpublished')
+                  }}</span
+                >
+              </template>
+            </v-switch>
           </div>
         </div>
       </template>
     </v-data-table>
     <ProactiveHelpDialog
-      v-if="showDialog"
-      :show-dialog="showDialog"
+      v-if="showEditProactiveHelpDialog"
+      :show-dialog="showEditProactiveHelpDialog"
       :group-name="groupName"
-      :component-name="componentName"
+      :component-name="component.componentName"
       :component="component"
-      @close-dialog="onDialog"
+      @close-dialog="toggleEditProactiveHelpDialog"
     />
     <ProactiveHelpPreviewDialog
       v-if="showPreviewDialog"
       :show-dialog="showPreviewDialog"
       :fc-proactive-help-image-url="fcProactiveHelpImageUrl"
       :component="component"
-      @close-dialog="onPreviewDialog"
+      @close-dialog="togglePreviewDialog"
     />
   </div>
 </template>
diff --git a/app/frontend/src/components/infolinks/ProactiveHelpDialog.vue b/app/frontend/src/components/infolinks/ProactiveHelpDialog.vue
index 99b54a85b..3aff3a9d8 100644
--- a/app/frontend/src/components/infolinks/ProactiveHelpDialog.vue
+++ b/app/frontend/src/components/infolinks/ProactiveHelpDialog.vue
@@ -1,131 +1,154 @@
-<script>
-import { mapState, mapActions } from 'pinia';
+<script setup>
+import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
+import { ref, watch } from 'vue';
 
 import { useAdminStore } from '~/store/admin';
 import { useFormStore } from '~/store/form';
 
-export default {
-  props: {
-    showDialog: { type: Boolean, required: true },
-    component: { type: Object, default: () => {} },
-    componentName: { type: String, require: true, default: '' },
-    groupName: { type: String, required: true },
-  },
-  emits: ['close-dialog'],
-  setup() {
-    const { t, locale } = useI18n({ useScope: 'global' });
+const { t, locale } = useI18n({ useScope: 'global' });
+
+const properties = defineProps({
+  showDialog: { type: Boolean, required: true },
+  component: { type: Object, default: () => {} },
+  componentName: { type: String, require: true, default: '' },
+  groupName: { type: String, required: true },
+});
+
+const emit = defineEmits(['close-dialog']);
 
-    return { t, locale };
+const adminStore = useAdminStore();
+const formStore = useFormStore();
+
+const { isRTL } = storeToRefs(formStore);
+
+const componentId = ref(
+  properties.component?.id ? properties.component.id : undefined
+);
+const componentName = ref(
+  properties.component?.componentName
+    ? properties.component.componentName
+    : properties.componentName
+);
+const description = ref(
+  properties.component?.description ? properties.component.description : ''
+);
+const dialog = ref(properties.showDialog);
+const files = ref([]);
+const isLinkEnabled = ref(
+  properties.component?.isLinkEnabled ? properties.component.isLinkEnabled : ''
+);
+const image = ref('');
+const imageSizeError = ref(false);
+const imageName = ref(
+  properties.component?.imageName ? properties.component.imageName : ''
+);
+const imagePlaceholder = ref(
+  properties.component?.imageName ? properties.component.imageName : undefined
+);
+const linkError = ref(false);
+const moreHelpInfoLink = ref(
+  properties.component?.externalLink ? properties.component.externalLink : ''
+);
+const rules = ref([
+  (value) => {
+    return (
+      !value ||
+      !value.length ||
+      value[0].size < 500000 ||
+      t('trans.proactiveHelpDialog.largeImgTxt')
+    );
   },
-  data() {
-    return {
-      componentId: this?.component?.id ? this.component.id : undefined,
-      componentName_: this?.component?.componentName
-        ? this.component.componentName
-        : this.componentName,
-      description: this?.component?.description
-        ? this.component.description
-        : '',
-      dialog: this.showDialog,
-      files: [],
-      isLinkEnabled: this?.component?.isLinkEnabled
-        ? this.component.isLinkEnabled
-        : '',
-      image: '',
-      imageSizeError: false,
-      imageName: this?.component?.imageName ? this.component.imageName : '',
-      imagePlaceholder: this?.component?.imageName
-        ? this.component.imageName
-        : undefined,
-      linkError: false,
-      moreHelpInfoLink: this?.component?.externalLink
-        ? this.component.externalLink
-        : '',
-      rules: [
-        (value) => {
-          return (
-            !value ||
-            !value.length ||
-            value[0].size < 500000 ||
-            this.$t('trans.proactiveHelpDialog.largeImgTxt')
-          );
-        },
-      ],
+]);
+
+watch(
+  () => properties.showDialog,
+  (value) => {
+    dialog.value = value;
+  }
+);
+
+watch(componentName, (value) => {
+  componentName.value = value;
+});
+
+function onCloseDialog() {
+  resetDialog();
+  emit('close-dialog');
+}
+
+function validateLinkUrl() {
+  let error = false;
+  linkError.value = false;
+  if (isLinkEnabled.value && moreHelpInfoLink.value === '') {
+    error = true;
+    linkError.value = true;
+  }
+  return error;
+}
+
+async function selectImage() {
+  imageSizeError.value = false;
+  const img = files.value[0];
+  if (img.size > 500000) {
+    imageSizeError.value = true;
+  } else {
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      image.value = e.target.result;
+      imageName.value = img.name;
     };
-  },
-  computed: {
-    ...mapState(useFormStore, ['isRTL']),
-  },
-  watch: {
-    showDialog(value) {
-      this.dialog = value;
-    },
-    componentName_(value) {
-      this.componentName_ = value;
-    },
-  },
-  methods: {
-    ...mapActions(useAdminStore, ['addFCProactiveHelp']),
-    onCloseDialog() {
-      this.resetDialog();
-      this.$emit('close-dialog');
-    },
-    validateLinkUrl() {
-      let error = false;
-      this.linkError = false;
-      if (this.isLinkEnabled && this.moreHelpInfoLink === '') {
-        error = true;
-        this.linkError = true;
-      }
-      return error;
-    },
-    async selectImage() {
-      const img = this.files[0];
-      const reader = new FileReader();
-      reader.onload = async (e) => {
-        this.image = e.target.result;
-        this.imageName = img.name;
-      };
-      if (img) {
-        await reader.readAsDataURL(img);
-      }
-    },
-    submit() {
-      if (!this.validateLinkUrl()) {
-        this.imageName = this.image !== '' ? this.imageName : '';
-        this.moreHelpInfoLink = !this.isLinkEnabled
-          ? ''
-          : this.moreHelpInfoLink;
-        this.addFCProactiveHelp({
-          componentId: this.componentId,
-          componentName: this.componentName_,
-          image: this.image,
-          externalLink: this.moreHelpInfoLink,
-          groupName: this.groupName,
-          description: this.description,
-          status:
-            this.component && this.component.status
-              ? this.component.status
-              : false,
-          isLinkEnabled: this.isLinkEnabled,
-          imageName: this.imageName,
-        });
-        this.onCloseDialog();
-      }
-    },
-    resetDialog() {
-      this.componentName_ = '';
-      this.moreHelpInfoLink = '';
-      this.isLinkEnabled = false;
-      this.image = '';
-      this.imageName = '';
-      this.imagePlaceholder = undefined;
-      this.linkError = false;
-      this.description = '';
-    },
-  },
-};
+    if (img) {
+      await reader.readAsDataURL(img);
+    }
+  }
+}
+
+async function submit() {
+  if (!validateLinkUrl()) {
+    imageName.value = image.value !== '' ? imageName.value : '';
+    moreHelpInfoLink.value = !isLinkEnabled.value ? '' : moreHelpInfoLink.value;
+    await adminStore.addFCProactiveHelp({
+      componentId: componentId.value,
+      componentName: componentName.value,
+      image: image.value,
+      externalLink: moreHelpInfoLink.value,
+      groupName: properties.groupName,
+      description: description.value,
+      status:
+        properties.component && properties.component.status
+          ? properties.component.status
+          : false,
+      isLinkEnabled: isLinkEnabled.value,
+      imageName: imageName.value,
+    });
+    onCloseDialog();
+  }
+}
+
+function resetDialog() {
+  componentName.value = '';
+  moreHelpInfoLink.value = '';
+  isLinkEnabled.value = false;
+  image.value = '';
+  imageName.value = '';
+  imagePlaceholder.value = undefined;
+  linkError.value = false;
+  description.value = '';
+}
+
+defineExpose({
+  files,
+  imageSizeError,
+  isLinkEnabled,
+  linkError,
+  moreHelpInfoLink,
+  onCloseDialog,
+  resetDialog,
+  rules,
+  selectImage,
+  validateLinkUrl,
+});
 </script>
 
 <template>
@@ -173,7 +196,7 @@ export default {
             >
               {{ $t('trans.proactiveHelpDialog.componentName') }}
             </span>
-            <span class="blueColorWrapper" v-text="componentName_" />
+            <span class="blueColorWrapper" v-text="componentName" />
           </v-row>
           <v-row class="mt-1" no-gutters>
             <v-col>
diff --git a/app/frontend/src/components/infolinks/ProactiveHelpPreviewDialog.vue b/app/frontend/src/components/infolinks/ProactiveHelpPreviewDialog.vue
index dc66afe6d..ded3203ff 100644
--- a/app/frontend/src/components/infolinks/ProactiveHelpPreviewDialog.vue
+++ b/app/frontend/src/components/infolinks/ProactiveHelpPreviewDialog.vue
@@ -1,40 +1,31 @@
-<script>
-import { mapState } from 'pinia';
+<script setup>
 import { useI18n } from 'vue-i18n';
+import { ref, watch } from 'vue';
 
-import { useFormStore } from '~/store/form';
+const { locale } = useI18n({ useScope: 'global' });
 
-export default {
-  props: {
-    showDialog: { type: Boolean, required: true },
-    component: { type: Object, default: () => {} },
-    fcProactiveHelpImageUrl: undefined,
-  },
-  emits: ['close-dialog'],
-  setup() {
-    const { locale } = useI18n({ useScope: 'global' });
+const properties = defineProps({
+  showDialog: { type: Boolean, required: true },
+  component: { type: Object, default: () => {} },
+  fcProactiveHelpImageUrl: undefined,
+});
 
-    return { locale };
-  },
-  data() {
-    return {
-      dialog: this.showDialog,
-    };
-  },
-  computed: {
-    ...mapState(useFormStore, ['isRTL']),
-  },
-  watch: {
-    showDialog(value) {
-      this.dialog = value;
-    },
-  },
-  methods: {
-    onCloseDialog() {
-      this.$emit('close-dialog');
-    },
-  },
-};
+const emit = defineEmits(['close-dialog']);
+
+const dialog = ref(properties.showDialog);
+
+watch(
+  () => properties.showDialog,
+  (value) => {
+    dialog.value = value;
+  }
+);
+
+function onCloseDialog() {
+  emit('close-dialog');
+}
+
+defineExpose({ onCloseDialog });
 </script>
 
 <template>
diff --git a/app/frontend/src/internationalization/trans/chefs/ar/ar.json b/app/frontend/src/internationalization/trans/chefs/ar/ar.json
index 949e70408..f661cf1b6 100644
--- a/app/frontend/src/internationalization/trans/chefs/ar/ar.json
+++ b/app/frontend/src/internationalization/trans/chefs/ar/ar.json
@@ -84,7 +84,8 @@
     "deleteSuccess": "تم حذف القالب بنجاح.",
     "deleteError": "حدث خطأ أثناء حذف القالب.",
     "fetchError": "حدث خطأ أثناء جلب القالب.",
-    "info": "قم بتحميل قالب لاستخدام خدمة توليد الوثائق المشتركة (CDOGS)"
+    "info": "قم بتحميل قالب لاستخدام خدمة توليد الوثائق المشتركة (CDOGS)",
+    "fileSizeError": "يجب أن يكون حجم الملف أقل من 25 ميغابايت."
   },
   "formSettings": {
     "pressToAddMultiEmail": "اضغط على <kbd>مفتاح الإدخال</kbd> أو <kbd>،</kbd> أو <kbd>مسافة</kbd> لإضافة عناوين بريد إلكتروني متعددة",
diff --git a/app/frontend/src/internationalization/trans/chefs/de/de.json b/app/frontend/src/internationalization/trans/chefs/de/de.json
index c35fa2d65..c2115567f 100644
--- a/app/frontend/src/internationalization/trans/chefs/de/de.json
+++ b/app/frontend/src/internationalization/trans/chefs/de/de.json
@@ -84,7 +84,8 @@
     "deleteSuccess": "Vorlage erfolgreich gelöscht.",
     "deleteError": "Beim Löschen der Vorlage ist ein Fehler aufgetreten.",
     "fetchError": "Beim Abrufen der Vorlage ist ein Fehler aufgetreten.",
-    "info": "Laden Sie eine Vorlage hoch, um den Gemeinsamen Dokumenterstellungsdienst (CDOGS) zu verwenden"
+    "info": "Laden Sie eine Vorlage hoch, um den Gemeinsamen Dokumenterstellungsdienst (CDOGS) zu verwenden",
+    "fileSizeError": "Die Dateigröße muss weniger als 25 MB betragen."
   },
   "formSettings": {
     "pressToAddMultiEmail": "Drücken Sie <kbd>die Eingabetaste</kbd> oder <kbd>die Leertaste</kbd> oder <kbd>,</kbd> um mehrere E-Mail-Adressen hinzuzufügen",
diff --git a/app/frontend/src/internationalization/trans/chefs/en/en.json b/app/frontend/src/internationalization/trans/chefs/en/en.json
index 182747575..74196626e 100644
--- a/app/frontend/src/internationalization/trans/chefs/en/en.json
+++ b/app/frontend/src/internationalization/trans/chefs/en/en.json
@@ -82,7 +82,8 @@
     "deleteSuccess": "Template deleted successfully.",
     "deleteError": "An error occurred while deleting the template.",
     "fetchError": "An error occurred while fetching the template.",
-    "info": "Upload a template to use the Common Document Generation Service (CDOGS)"
+    "info": "Upload a template to use the Common Document Generation Service (CDOGS)",
+    "fileSizeError": "File size must be less than 25MB."
   },
   "eventStreamConfig": {
     "info": "Configure Event Stream for your form.",
diff --git a/app/frontend/src/internationalization/trans/chefs/es/es.json b/app/frontend/src/internationalization/trans/chefs/es/es.json
index aa005e6c0..22ddb28aa 100644
--- a/app/frontend/src/internationalization/trans/chefs/es/es.json
+++ b/app/frontend/src/internationalization/trans/chefs/es/es.json
@@ -84,7 +84,8 @@
     "deleteSuccess": "Plantilla eliminada exitosamente.",
     "deleteError": "Ocurrió un error al eliminar la plantilla.",
     "fetchError": "Ocurrió un error al obtener la plantilla.",
-    "info": "Sube una plantilla para usar el Servicio de Generación de Documentos Comunes (CDOGS)"
+    "info": "Sube una plantilla para usar el Servicio de Generación de Documentos Comunes (CDOGS)",
+    "fileSizeError": "El tamaño del archivo debe ser menor de 25 MB."
   },
   "formSettings": {
     "pressToAddMultiEmail": "Presiona <kbd>enter</kbd> o <kbd>,</kbd> o <kbd>espacio</kbd> para agregar varias direcciones de correo electrónico",
diff --git a/app/frontend/src/internationalization/trans/chefs/fa/fa.json b/app/frontend/src/internationalization/trans/chefs/fa/fa.json
index 29cd29556..be613f2e8 100644
--- a/app/frontend/src/internationalization/trans/chefs/fa/fa.json
+++ b/app/frontend/src/internationalization/trans/chefs/fa/fa.json
@@ -84,7 +84,8 @@
     "deleteSuccess": "قالب با موفقیت حذف شد.",
     "deleteError": "خطایی در هنگام حذف قالب رخ داد.",
     "fetchError": "خطایی در هنگام دریافت قالب رخ داد.",
-    "info": "قالبی را بارگذاری کنید تا از خدمات تولید سند مشترک (CDOGS) استفاده کنید"
+    "info": "قالبی را بارگذاری کنید تا از خدمات تولید سند مشترک (CDOGS) استفاده کنید",
+    "fileSizeError": "اندازه فایل باید کمتر از 25 مگابایت باشد."
   },
   "formSettings": {
     "pressToAddMultiEmail": "برای افزودن چندین آدرس ایمیل، <kbd>اینتر</kbd> یا <kbd>،</kbd> یا <kbd>فاصله</kbd> را فشار دهید",
diff --git a/app/frontend/src/internationalization/trans/chefs/fr/fr.json b/app/frontend/src/internationalization/trans/chefs/fr/fr.json
index 0d287188f..11a37d431 100644
--- a/app/frontend/src/internationalization/trans/chefs/fr/fr.json
+++ b/app/frontend/src/internationalization/trans/chefs/fr/fr.json
@@ -84,7 +84,8 @@
     "deleteSuccess": "Modèle supprimé avec succès.",
     "deleteError": "Une erreur s'est produite lors de la suppression du modèle.",
     "fetchError": "Une erreur s'est produite lors de la récupération du modèle.",
-    "info": "Téléchargez un modèle pour utiliser le Service de Génération de Documents Communs (CDOGS)"
+    "info": "Téléchargez un modèle pour utiliser le Service de Génération de Documents Communs (CDOGS)",
+    "fileSizeError": "La taille du fichier doit être inférieure à 25 Mo."
   },
   "formSettings": {
     "pressToAddMultiEmail": "Appuyez sur <kbd>entrée</kbd> ou <kbd>,</kbd> ou <kbd>espace</kbd> pour ajouter plusieurs adresses e-mail",
diff --git a/app/frontend/src/internationalization/trans/chefs/hi/hi.json b/app/frontend/src/internationalization/trans/chefs/hi/hi.json
index bf23ba611..bf2b7c9c8 100644
--- a/app/frontend/src/internationalization/trans/chefs/hi/hi.json
+++ b/app/frontend/src/internationalization/trans/chefs/hi/hi.json
@@ -84,7 +84,8 @@
     "deleteSuccess": "टेम्पलेट सफलतापूर्वक हटाया गया।",
     "deleteError": "टेम्पलेट हटाते समय एक त्रुटि हुई।",
     "fetchError": "टेम्पलेट प्राप्त करते समय एक त्रुटि हुई।",
-    "info": "कॉमन डॉक्युमेंट जनरेशन सर्विस (CDOGS) का उपयोग करने के लिए एक टेम्पलेट अपलोड करें"
+    "info": "कॉमन डॉक्युमेंट जनरेशन सर्विस (CDOGS) का उपयोग करने के लिए एक टेम्पलेट अपलोड करें",
+    "fileSizeError": "फ़ाइल का आकार 25MB से कम होना चाहिए।"
   },
   "formSettings": {
     "pressToAddMultiEmail": "एकाधिक ईमेल पते जोड़ने के लिए <kbd>एंटर</kbd> या <kbd>,</kbd> या <kbd>स्पेस</kbd> दबाएँ",
diff --git a/app/frontend/src/internationalization/trans/chefs/it/it.json b/app/frontend/src/internationalization/trans/chefs/it/it.json
index d614f6798..077d2f0cb 100644
--- a/app/frontend/src/internationalization/trans/chefs/it/it.json
+++ b/app/frontend/src/internationalization/trans/chefs/it/it.json
@@ -84,7 +84,8 @@
     "deleteSuccess": "Template eliminato con successo.",
     "deleteError": "Si è verificato un errore durante l'eliminazione del template.",
     "fetchError": "Si è verificato un errore durante il recupero del template.",
-    "info": "Carica un template per utilizzare il Servizio di Generazione Documenti Comuni (CDOGS)"
+    "info": "Carica un template per utilizzare il Servizio di Generazione Documenti Comuni (CDOGS)",
+    "fileSizeError": "La dimensione del file deve essere inferiore a 25 MB."
   },
   "formSettings": {
     "pressToAddMultiEmail": "Premi <kbd>invio</kbd> o <kbd>,</kbd> o <kbd>spazio</kbd> per aggiungere più indirizzi email",
diff --git a/app/frontend/src/internationalization/trans/chefs/ja/ja.json b/app/frontend/src/internationalization/trans/chefs/ja/ja.json
index 4db0ec2c4..0d0326376 100644
--- a/app/frontend/src/internationalization/trans/chefs/ja/ja.json
+++ b/app/frontend/src/internationalization/trans/chefs/ja/ja.json
@@ -84,7 +84,8 @@
     "deleteSuccess": "テンプレートが正常に削除されました。",
     "deleteError": "テンプレートの削除中にエラーが発生しました。",
     "fetchError": "テンプレートの取得中にエラーが発生しました。",
-    "info": "共通ドキュメント生成サービス（CDOGS）を使用するためのテンプレートをアップロードしてください"
+    "info": "共通ドキュメント生成サービス（CDOGS）を使用するためのテンプレートをアップロードしてください",
+    "fileSizeError": "ファイルサイズは25MB以下でなければなりません。"
   },
   "formSettings": {
     "pressToAddMultiEmail": "<kbd>Enter</kbd>または<kbd>、</kbd>または<kbd>スペース</kbd>を押して複数の電子メール アドレスを追加します",
diff --git a/app/frontend/src/internationalization/trans/chefs/ko/ko.json b/app/frontend/src/internationalization/trans/chefs/ko/ko.json
index f59332df6..171bf2ed3 100644
--- a/app/frontend/src/internationalization/trans/chefs/ko/ko.json
+++ b/app/frontend/src/internationalization/trans/chefs/ko/ko.json
@@ -84,7 +84,8 @@
     "deleteSuccess": "템플릿이 성공적으로 삭제되었습니다.",
     "deleteError": "템플릿 삭제 중 오류가 발생했습니다.",
     "fetchError": "템플릿 가져오기 중 오류가 발생했습니다.",
-    "info": "공통 문서 생성 서비스(CDOGS)를 사용하기 위해 템플릿을 업로드하십시오"
+    "info": "공통 문서 생성 서비스(CDOGS)를 사용하기 위해 템플릿을 업로드하십시오",
+    "fileSizeError": "파일 크기는 25MB 이하여야 합니다."
   },
   "formSettings": {
     "pressToAddMultiEmail": "여러 이메일 주소를 추가하려면 <kbd>enter</kbd> 또는 <kbd>,</kbd> 또는 <kbd>space를</kbd> 누르십시오.",
diff --git a/app/frontend/src/internationalization/trans/chefs/pa/pa.json b/app/frontend/src/internationalization/trans/chefs/pa/pa.json
index 1c04cf1c7..4175c49ef 100644
--- a/app/frontend/src/internationalization/trans/chefs/pa/pa.json
+++ b/app/frontend/src/internationalization/trans/chefs/pa/pa.json
@@ -84,7 +84,8 @@
     "deleteSuccess": "ਟੈਂਪਲੇਟ ਸਫਲਤਾਪੂਰਵਕ ਮਿਟਾਈ ਗਈ।",
     "deleteError": "ਟੈਂਪਲੇਟ ਮਿਟਾਉਣ ਸਮੇਂ ਇੱਕ ਗਲਤੀ ਆਈ।",
     "fetchError": "ਟੈਂਪਲੇਟ ਲਿਆਉਣ ਸਮੇਂ ਇੱਕ ਗਲਤੀ ਆਈ।",
-    "info": "ਕੌਮਨ ਦਸਤਾਵੇਜ਼ ਜਨਰੇਸ਼ਨ ਸਰਵਿਸ (CDOGS) ਵਰਤਣ ਲਈ ਇੱਕ ਟੈਂਪਲੇਟ ਅੱਪਲੋਡ ਕਰੋ"
+    "info": "ਕੌਮਨ ਦਸਤਾਵੇਜ਼ ਜਨਰੇਸ਼ਨ ਸਰਵਿਸ (CDOGS) ਵਰਤਣ ਲਈ ਇੱਕ ਟੈਂਪਲੇਟ ਅੱਪਲੋਡ ਕਰੋ",
+    "fileSizeError": "ਫਾਈਲ ਦਾ ਆਕਾਰ 25MB ਤੋਂ ਘੱਟ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।"
   },
   "formSettings": {
     "pressToAddMultiEmail": "ਕਈ ਈਮੇਲ ਪਤੇ ਜੋੜਨ ਲਈ <kbd>ਐਂਟਰ</kbd> <kbd>ਜਾਂ</kbd> <kbd>ਸਪੇਸ</kbd> ਦਬਾਓ",
diff --git a/app/frontend/src/internationalization/trans/chefs/pt/pt.json b/app/frontend/src/internationalization/trans/chefs/pt/pt.json
index b3a4e6528..2855f8a04 100644
--- a/app/frontend/src/internationalization/trans/chefs/pt/pt.json
+++ b/app/frontend/src/internationalization/trans/chefs/pt/pt.json
@@ -84,7 +84,8 @@
     "deleteSuccess": "Modelo excluído com sucesso.",
     "deleteError": "Ocorreu um erro ao excluir o modelo.",
     "fetchError": "Ocorreu um erro ao buscar o modelo.",
-    "info": "Carregue um modelo para usar o Serviço de Geração de Documentos Comuns (CDOGS)"
+    "info": "Carregue um modelo para usar o Serviço de Geração de Documentos Comuns (CDOGS)",
+    "fileSizeError": "O tamanho do arquivo deve ser menor que 25 MB."
   },
   "formSettings": {
     "pressToAddMultiEmail": "Pressione <kbd>enter</kbd> ou <kbd>,</kbd> ou <kbd>espaço</kbd> para adicionar vários endereços de e-mail",
diff --git a/app/frontend/src/internationalization/trans/chefs/ru/ru.json b/app/frontend/src/internationalization/trans/chefs/ru/ru.json
index 8af28b6fc..e54aaebbe 100644
--- a/app/frontend/src/internationalization/trans/chefs/ru/ru.json
+++ b/app/frontend/src/internationalization/trans/chefs/ru/ru.json
@@ -84,7 +84,8 @@
     "deleteSuccess": "Шаблон успешно удален.",
     "deleteError": "Произошла ошибка при удалении шаблона.",
     "fetchError": "Произошла ошибка при получении шаблона.",
-    "info": "Загрузите шаблон для использования Общей службы генерации документов (CDOGS)"
+    "info": "Загрузите шаблон для использования Общей службы генерации документов (CDOGS)",
+    "fileSizeError": "Размер файла должен быть менее 25 МБ."
   },
   "formSettings": {
     "pressToAddMultiEmail": "Нажмите <kbd>Enter</kbd> или <kbd>пробел</kbd> <kbd>,</kbd> чтобы добавить несколько адресов электронной почты.",
diff --git a/app/frontend/src/internationalization/trans/chefs/tl/tl.json b/app/frontend/src/internationalization/trans/chefs/tl/tl.json
index bccdaa983..a6df3828c 100644
--- a/app/frontend/src/internationalization/trans/chefs/tl/tl.json
+++ b/app/frontend/src/internationalization/trans/chefs/tl/tl.json
@@ -84,7 +84,8 @@
     "deleteSuccess": "Matagumpay na natanggal ang template.",
     "deleteError": "Nagkaroon ng error habang tinatanggal ang template.",
     "fetchError": "Nagkaroon ng error habang kinukuha ang template.",
-    "info": "Mag-upload ng template upang gamitin ang Common Document Generation Service (CDOGS)"
+    "info": "Mag-upload ng template upang gamitin ang Common Document Generation Service (CDOGS)",
+    "fileSizeError": "Ang laki ng file ay dapat mas mababa sa 25MB."
   },
   "formSettings": {
     "pressToAddMultiEmail": "Pindutin <kbd>ang enter</kbd> o <kbd>,</kbd> o <kbd>space</kbd> para magdagdag ng maraming email address",
diff --git a/app/frontend/src/internationalization/trans/chefs/uk/uk.json b/app/frontend/src/internationalization/trans/chefs/uk/uk.json
index e915db0de..1ba0d44f5 100644
--- a/app/frontend/src/internationalization/trans/chefs/uk/uk.json
+++ b/app/frontend/src/internationalization/trans/chefs/uk/uk.json
@@ -84,7 +84,8 @@
     "deleteSuccess": "Шаблон успішно видалено.",
     "deleteError": "Під час видалення шаблону сталася помилка.",
     "fetchError": "Під час отримання шаблону сталася помилка.",
-    "info": "Завантажте шаблон, щоб використовувати Спільний сервіс генерації документів (CDOGS)"
+    "info": "Завантажте шаблон, щоб використовувати Спільний сервіс генерації документів (CDOGS)",
+    "fileSizeError": "Розмір файлу має бути менше 25 МБ."
   },
   "formSettings": {
     "pressToAddMultiEmail": "Щоб додати кілька електронних адрес, натисніть <kbd>enter</kbd> або <kbd>,</kbd> або <kbd>пробіл</kbd>",
diff --git a/app/frontend/src/internationalization/trans/chefs/vi/vi.json b/app/frontend/src/internationalization/trans/chefs/vi/vi.json
index 09b45483a..430c073ad 100644
--- a/app/frontend/src/internationalization/trans/chefs/vi/vi.json
+++ b/app/frontend/src/internationalization/trans/chefs/vi/vi.json
@@ -84,7 +84,8 @@
     "deleteSuccess": "Xóa mẫu thành công.",
     "deleteError": "Có lỗi xảy ra khi xóa mẫu.",
     "fetchError": "Có lỗi xảy ra khi lấy mẫu.",
-    "info": "Tải lên một mẫu để sử dụng Dịch vụ Tạo Tài liệu Chung (CDOGS)"
+    "info": "Tải lên một mẫu để sử dụng Dịch vụ Tạo Tài liệu Chung (CDOGS)",
+    "fileSizeError": "Kích thước tệp phải nhỏ hơn 25MB."
   },
   "formSettings": {
     "pressToAddMultiEmail": "Nhấn <kbd>enter</kbd> hoặc <kbd>,</kbd> hoặc <kbd>dấu cách</kbd> để thêm nhiều địa chỉ email",
diff --git a/app/frontend/src/internationalization/trans/chefs/zh/zh.json b/app/frontend/src/internationalization/trans/chefs/zh/zh.json
index a093b928c..531af0a66 100644
--- a/app/frontend/src/internationalization/trans/chefs/zh/zh.json
+++ b/app/frontend/src/internationalization/trans/chefs/zh/zh.json
@@ -84,7 +84,8 @@
     "deleteSuccess": "模板删除成功。",
     "deleteError": "删除模板时发生错误。",
     "fetchError": "获取模板时发生错误。",
-    "info": "上传模板以使用公共文档生成服务（CDOGS）"
+    "info": "上传模板以使用公共文档生成服务（CDOGS）",
+    "fileSizeError": "文件大小必须小于25MB。"
   },
   "formSettings": {
     "pressToAddMultiEmail": "按<kbd>Enter</kbd>或<kbd>,</kbd>或<kbd>空格键</kbd>添加多个电子邮件地址",
diff --git a/app/frontend/src/internationalization/trans/chefs/zhTW/zh-TW.json b/app/frontend/src/internationalization/trans/chefs/zhTW/zh-TW.json
index a0020fd7b..3761d8d46 100644
--- a/app/frontend/src/internationalization/trans/chefs/zhTW/zh-TW.json
+++ b/app/frontend/src/internationalization/trans/chefs/zhTW/zh-TW.json
@@ -84,7 +84,8 @@
     "deleteSuccess": "範本成功刪除。",
     "deleteError": "刪除範本時發生錯誤。",
     "fetchError": "獲取範本時發生錯誤。",
-    "info": "上傳範本以使用公共文檔生成服務（CDOGS）"
+    "info": "上傳範本以使用公共文檔生成服務（CDOGS）",
+    "fileSizeError": "檔案大小必須小於25MB。"
   },
   "formSettings": {
     "pressToAddMultiEmail": "按<kbd>Enter</kbd>或<kbd>,</kbd>或<kbd>空格鍵</kbd>添加多個電子郵件地址",
diff --git a/app/frontend/src/utils/constants.js b/app/frontend/src/utils/constants.js
index f1fa63c33..1af63296c 100755
--- a/app/frontend/src/utils/constants.js
+++ b/app/frontend/src/utils/constants.js
@@ -174,3 +174,68 @@ export const ExportLargeData = Object.freeze({
   MAX_RECORDS: 300, // Maximum number of submissions after that we gonna upload the export to Cloud and send user a download link via email
   MAX_FIELDS: 30, // Maximum number of fields in a form after that we gonna upload the export to Cloud and send user a download link via email
 });
+
+/** Constants for the form components proactive help */
+export const FormComponentProactiveHelpValues = Object.freeze({
+  'Basic Layout': [
+    'Text/Images',
+    'Columns - 2',
+    'Columns - 3',
+    'Columns - 4',
+    'Tabs',
+    'Panel',
+  ],
+  'Basic Fields': [
+    'Text Field',
+    'Multi-line Text',
+    'Select List',
+    'Checkbox',
+    'Checkbox Group',
+    'Radio Group',
+    'Number',
+    'Phone Number',
+    'Email',
+    'Date / Time',
+    'Day',
+  ],
+  'Advanced Layout': [
+    'HTML Element',
+    'Content',
+    'Columns',
+    'Field Set',
+    'Panel',
+    'Table',
+    'Tabs',
+    'Well',
+  ],
+  'Advanced Fields': [
+    'Text Field',
+    'Email',
+    'Text Area',
+    'Url',
+    'Number',
+    'Phone Number',
+    'Tags',
+    'Address',
+    'Password',
+    'Date / Time',
+    'Checkbox',
+    'Day',
+    'Time',
+    'Select Boxes',
+    'Select',
+    'Currency',
+    'Radio',
+    'Survey',
+    'Signature',
+  ],
+  'Advanced Data': [
+    'Hidden',
+    'Container',
+    'Data Map',
+    'Data Grid',
+    'Edit Grid',
+    'Tree',
+  ],
+  'BC Government': ['File Upload', 'Business Name Search', 'BC Address'],
+});
diff --git a/app/frontend/tests/unit/components/admin/FormComponentsProactiveHelp.spec.js b/app/frontend/tests/unit/components/admin/FormComponentsProactiveHelp.spec.js
index 8a6c095e9..fefcc1482 100644
--- a/app/frontend/tests/unit/components/admin/FormComponentsProactiveHelp.spec.js
+++ b/app/frontend/tests/unit/components/admin/FormComponentsProactiveHelp.spec.js
@@ -1,23 +1,25 @@
-import { mount } from '@vue/test-utils';
+import { flushPromises, mount } from '@vue/test-utils';
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
 import { expect, vi } from 'vitest';
 
 import FormComponentsProactiveHelp from '~/components/admin/FormComponentsProactiveHelp.vue';
+import { useAdminStore } from '~/store/admin';
+import { FormComponentProactiveHelpValues } from '~/utils/constants';
 
 describe('Dashboard.vue', () => {
   const pinia = createTestingPinia();
   setActivePinia(pinia);
-  const extractGroupComponentsSpy = vi.spyOn(
-    FormComponentsProactiveHelp.methods,
-    'extractGroupComponents'
-  );
+  const adminStore = useAdminStore(pinia);
+  const listFCProactiveHelpSpy = vi.spyOn(adminStore, 'listFCProactiveHelp');
+  listFCProactiveHelpSpy.mockImplementation(() => {});
   beforeEach(() => {
-    extractGroupComponentsSpy.mockReset();
+    adminStore.$reset();
+    listFCProactiveHelpSpy.mockReset();
   });
 
   afterAll(() => {
-    extractGroupComponentsSpy.mockRestore();
+    listFCProactiveHelpSpy.mockRestore();
   });
 
   it('renders', async () => {
@@ -30,7 +32,12 @@ describe('Dashboard.vue', () => {
       },
     });
 
-    wrapper.vm.onExpansionPanelClick('Basic Layout');
-    expect(extractGroupComponentsSpy).toHaveBeenCalledTimes(1);
+    await flushPromises();
+
+    expect(listFCProactiveHelpSpy).toHaveBeenCalledTimes(1);
+
+    for (let [title] of Object.entries(FormComponentProactiveHelpValues)) {
+      expect(wrapper.html()).toContain(title);
+    }
   });
 });
diff --git a/app/frontend/tests/unit/components/forms/PrintOptions.spec.js b/app/frontend/tests/unit/components/forms/PrintOptions.spec.js
index ff04aec26..5214dfbfd 100644
--- a/app/frontend/tests/unit/components/forms/PrintOptions.spec.js
+++ b/app/frontend/tests/unit/components/forms/PrintOptions.spec.js
@@ -275,7 +275,7 @@ describe('PrintOptions.vue', () => {
     expect(addNotificationSpy).toHaveBeenCalledTimes(1);
   });
 
-  it('validateFileExtension should remove the file extension from uploadExportFileTypes when the file input is cleared', async () => {
+  it('validateFile should remove the file extension from uploadExportFileTypes when the file input is cleared', async () => {
     let submission = undefined;
     formStore.form = {
       id: 0,
@@ -302,11 +302,11 @@ describe('PrintOptions.vue', () => {
     };
     // Since this isn't in uploadExportFileTypes then it should be removed from uploadExportFileTypes
     wrapper.vm.uploadExportFileTypes = ['pdf', 'txt'];
-    wrapper.vm.validateFileExtension([]);
+    wrapper.vm.validateFile([]);
     expect(wrapper.vm.uploadExportFileTypes).toEqual(['pdf']);
   });
 
-  it('validateFileExtension should set the output filename and set isValidFile to true if the file extension is valid', async () => {
+  it('validateFile should set the output filename and set isValidFile to true if the file extension is valid', async () => {
     let submission = undefined;
     formStore.form = {
       id: 0,
@@ -332,7 +332,7 @@ describe('PrintOptions.vue', () => {
       files: [],
     };
     wrapper.vm.uploadExportFileTypes = ['pdf'];
-    wrapper.vm.validateFileExtension([
+    wrapper.vm.validateFile([
       {
         name: 'filename.txt',
       },
@@ -341,7 +341,7 @@ describe('PrintOptions.vue', () => {
     expect(wrapper.vm.isValidFile).toBeTruthy();
   });
 
-  it('validateFileExtension should set the output filename and set isValidFile to false if the file extension is invalid', async () => {
+  it('validateFile should set the output filename and set isValidFile to false if the file extension is invalid', async () => {
     let submission = undefined;
     formStore.form = {
       id: 0,
@@ -367,7 +367,7 @@ describe('PrintOptions.vue', () => {
       files: [],
     };
     wrapper.vm.uploadExportFileTypes = ['pdf'];
-    wrapper.vm.validateFileExtension([
+    wrapper.vm.validateFile([
       {
         name: 'filename.zip',
       },
diff --git a/app/frontend/tests/unit/components/forms/SubmissionsTable.spec.js b/app/frontend/tests/unit/components/forms/SubmissionsTable.spec.js
index 9ceaf82d3..3c94f627d 100644
--- a/app/frontend/tests/unit/components/forms/SubmissionsTable.spec.js
+++ b/app/frontend/tests/unit/components/forms/SubmissionsTable.spec.js
@@ -734,70 +734,70 @@ describe('SubmissionsTable.vue', () => {
     // should refresh submissions
     expect(getFormPreferencesForCurrentUserSpy).toBeCalledTimes(0);
     expect(fetchSubmissionsSpy).toBeCalledTimes(0);
-    expect(wrapper.vm.page).toEqual(1);
-    expect(wrapper.vm.sortBy).toEqual({});
-    expect(wrapper.vm.itemsPerPage).toEqual(10);
+    expect(wrapper.vm.currentPage).toEqual(1);
+    expect(wrapper.vm.sort).toEqual({});
+    expect(wrapper.vm.itemsPP).toEqual(10);
 
     getFormPreferencesForCurrentUserSpy.mockReset();
     fetchSubmissionsSpy.mockReset();
 
     await wrapper.vm.updateTableOptions({
-      pg: 5,
-      itemsPP: 2,
-      sort: [{ key: 'date', order: 'desc' }],
+      page: 5,
+      itemsPerPage: 2,
+      sortBy: [{ key: 'date', order: 'desc' }],
     });
     // should not refresh submissions
     wrapper.vm.firstDataLoad = true;
     expect(getFormPreferencesForCurrentUserSpy).toBeCalledTimes(0);
     expect(fetchSubmissionsSpy).toBeCalledTimes(0);
-    expect(wrapper.vm.page).toEqual(5);
-    expect(wrapper.vm.sortBy).toEqual({ column: 'createdAt', order: 'desc' });
-    expect(wrapper.vm.itemsPerPage).toEqual(2);
+    expect(wrapper.vm.currentPage).toEqual(5);
+    expect(wrapper.vm.sort).toEqual({ column: 'createdAt', order: 'desc' });
+    expect(wrapper.vm.itemsPP).toEqual(2);
 
     await wrapper.vm.updateTableOptions({
-      pg: 5,
-      itemsPP: 2,
-      sort: [{ key: 'submitter', order: 'desc' }],
+      page: 5,
+      itemsPerPage: 2,
+      sortBy: [{ key: 'submitter', order: 'desc' }],
     });
     // should not refresh submissions
     wrapper.vm.firstDataLoad = true;
     expect(getFormPreferencesForCurrentUserSpy).toBeCalledTimes(0);
     expect(fetchSubmissionsSpy).toBeCalledTimes(0);
-    expect(wrapper.vm.page).toEqual(5);
-    expect(wrapper.vm.sortBy).toEqual({ column: 'createdBy', order: 'desc' });
-    expect(wrapper.vm.itemsPerPage).toEqual(2);
+    expect(wrapper.vm.currentPage).toEqual(5);
+    expect(wrapper.vm.sort).toEqual({ column: 'createdBy', order: 'desc' });
+    expect(wrapper.vm.itemsPP).toEqual(2);
 
     await wrapper.vm.updateTableOptions({
-      pg: 5,
-      itemsPP: 2,
-      sort: [{ key: 'status', order: 'desc' }],
+      page: 5,
+      itemsPerPage: 2,
+      sortBy: [{ key: 'status', order: 'desc' }],
     });
     // should not refresh submissions
     wrapper.vm.firstDataLoad = true;
     expect(getFormPreferencesForCurrentUserSpy).toBeCalledTimes(0);
     expect(fetchSubmissionsSpy).toBeCalledTimes(0);
-    expect(wrapper.vm.page).toEqual(5);
-    expect(wrapper.vm.sortBy).toEqual({
+    expect(wrapper.vm.currentPage).toEqual(5);
+    expect(wrapper.vm.sort).toEqual({
       column: 'formSubmissionStatusCode',
       order: 'desc',
     });
-    expect(wrapper.vm.itemsPerPage).toEqual(2);
+    expect(wrapper.vm.itemsPP).toEqual(2);
 
     await wrapper.vm.updateTableOptions({
-      pg: 5,
-      itemsPP: 2,
-      sort: [{ key: 'something', order: 'desc' }],
+      page: 5,
+      itemsPerPage: 2,
+      sortBy: [{ key: 'something', order: 'desc' }],
     });
     // should not refresh submissions
     wrapper.vm.firstDataLoad = true;
     expect(getFormPreferencesForCurrentUserSpy).toBeCalledTimes(0);
     expect(fetchSubmissionsSpy).toBeCalledTimes(0);
-    expect(wrapper.vm.page).toEqual(5);
-    expect(wrapper.vm.sortBy).toEqual({
+    expect(wrapper.vm.currentPage).toEqual(5);
+    expect(wrapper.vm.sort).toEqual({
       column: 'something',
       order: 'desc',
     });
-    expect(wrapper.vm.itemsPerPage).toEqual(2);
+    expect(wrapper.vm.itemsPP).toEqual(2);
   });
 
   it('getSubmissionData will fetchSubmissions in different ways', async () => {
diff --git a/app/frontend/tests/unit/components/forms/manage/DocumentTemplate.spec.js b/app/frontend/tests/unit/components/forms/manage/DocumentTemplate.spec.js
index d4b8f8b8b..b78ddddfc 100644
--- a/app/frontend/tests/unit/components/forms/manage/DocumentTemplate.spec.js
+++ b/app/frontend/tests/unit/components/forms/manage/DocumentTemplate.spec.js
@@ -341,7 +341,9 @@ describe('DocumentTemplate.vue', () => {
       'documentTemplateCreate'
     );
     documentTemplateCreateSpy.mockImplementation(() => {
-      throw new Error('Error');
+      const error = new Error('Error');
+      error.response = { status: 500 };
+      throw error;
     });
     const wrapper = mount(DocumentTemplate, {
       global: {
diff --git a/app/frontend/tests/unit/components/infolinks/GeneralLayout.spec.js b/app/frontend/tests/unit/components/infolinks/GeneralLayout.spec.js
index 1b4112791..8f7dad40f 100644
--- a/app/frontend/tests/unit/components/infolinks/GeneralLayout.spec.js
+++ b/app/frontend/tests/unit/components/infolinks/GeneralLayout.spec.js
@@ -1,17 +1,20 @@
 // @vitest-environment happy-dom
 // happy-dom is required to access window.location
 
-import { mount } from '@vue/test-utils';
+import { flushPromises, mount, shallowMount } from '@vue/test-utils';
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
 import { createRouter, createWebHistory } from 'vue-router';
-import { expect, vi } from 'vitest';
+import { beforeEach, expect, vi } from 'vitest';
 
 import getRouter from '~/router';
 import GeneralLayout from '~/components/infolinks/GeneralLayout.vue';
+import { useAdminStore } from '~/store/admin';
+import { faL } from '@fortawesome/free-solid-svg-icons';
 
 describe('GeneralLayout.vue', () => {
   const pinia = createTestingPinia();
+  const adminStore = useAdminStore(pinia);
   const router = createRouter({
     history: createWebHistory(),
     routes: getRouter().getRoutes(),
@@ -19,18 +22,29 @@ describe('GeneralLayout.vue', () => {
 
   setActivePinia(pinia);
 
-  it('onOpenDialog()', async () => {
-    const getComponentSpy = vi.spyOn(GeneralLayout.methods, 'getComponent');
-    const onDialogSpy = vi.spyOn(GeneralLayout.methods, 'onDialog');
+  beforeEach(() => {
+    adminStore.$reset();
+  });
+
+  it('renders', async () => {
     const wrapper = mount(GeneralLayout, {
       props: {
-        componentsList: [
-          { componentName: 'content', status: true },
-          { componentName: 'textfiled', status: false },
+        formComponentData: [
+          {
+            componentName: 'Text/Images',
+            description:
+              'See Also: Content component and HTML Element component in the "advanced layout" section',
+            externalLink: 'http://link.com',
+            groupName: 'Basic Layout',
+            id: '123-456',
+            imageName: 'image.jpeg',
+            isLinkEnabled: true,
+            status: true,
+          },
         ],
-        layoutList: [
-          { componentName: 'content' },
-          { componentName: 'textfiled' },
+        formComponentNames: [
+          { componentName: 'Text/Images' },
+          { componentName: 'Columns - 2' },
         ],
         groupName: '',
       },
@@ -42,21 +56,32 @@ describe('GeneralLayout.vue', () => {
         },
       },
     });
-    //wrapper.vm.onOpenDialog('Text Field');
-    //expect(getComponentSpy).toHaveBeenCalledTimes(1);
-    //expect(onDialogSpy).toHaveBeenCalledTimes(1);
+
+    await flushPromises();
+
+    expect(wrapper.html()).toContain('Text/Images');
+    expect(wrapper.html()).toContain('Columns - 2');
   });
 
-  it('onPreviewDialog()', async () => {
-    const wrapper = mount(GeneralLayout, {
+  it('toggleProactiveHelpDialog should toggle the boolean for showProactiveHelpDialog', async () => {
+    const wrapper = shallowMount(GeneralLayout, {
       props: {
-        componentsList: [
-          { componentName: 'content', status: true },
-          { componentName: 'textfiled', status: false },
+        formComponentData: [
+          {
+            componentName: 'Text/Images',
+            description:
+              'See Also: Content component and HTML Element component in the "advanced layout" section',
+            externalLink: 'http://link.com',
+            groupName: 'Basic Layout',
+            id: '123-456',
+            imageName: 'image.jpeg',
+            isLinkEnabled: true,
+            status: true,
+          },
         ],
-        layoutList: [
-          { componentName: 'content' },
-          { componentName: 'textfiled' },
+        formComponentNames: [
+          { componentName: 'Text/Images' },
+          { componentName: 'Columns - 2' },
         ],
         groupName: '',
       },
@@ -68,20 +93,102 @@ describe('GeneralLayout.vue', () => {
         },
       },
     });
-    //wrapper.vm.onPreviewDialog();
-    //expect(wrapper.vm.showPreviewDialog).toBe(true);
+
+    expect(wrapper.vm.showEditProactiveHelpDialog).toBeFalsy();
+    wrapper.vm.toggleEditProactiveHelpDialog();
+    expect(wrapper.vm.showEditProactiveHelpDialog).toBeTruthy();
   });
 
-  it('onDialog()', async () => {
-    const wrapper = mount(GeneralLayout, {
+  it('togglePreviewDialog should toggle the boolean for showPreviewDialog', async () => {
+    const wrapper = shallowMount(GeneralLayout, {
+      props: {
+        formComponentData: [
+          {
+            componentName: 'Text/Images',
+            description:
+              'See Also: Content component and HTML Element component in the "advanced layout" section',
+            externalLink: 'http://link.com',
+            groupName: 'Basic Layout',
+            id: '123-456',
+            imageName: 'image.jpeg',
+            isLinkEnabled: true,
+            status: true,
+          },
+        ],
+        formComponentNames: [
+          { componentName: 'Text/Images' },
+          { componentName: 'Columns - 2' },
+        ],
+        groupName: '',
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: {
+          ProactiveHelpDialog: true,
+          ProactiveHelpPreviewDialog: true,
+        },
+      },
+    });
+
+    expect(wrapper.vm.showPreviewDialog).toBeFalsy();
+    wrapper.vm.togglePreviewDialog();
+    expect(wrapper.vm.showPreviewDialog).toBeTruthy();
+  });
+
+  it('isPreviewEnabled takes a component name and returns true if an admin has previously set data for a form component proactive help and false otherwise', async () => {
+    const wrapper = shallowMount(GeneralLayout, {
+      props: {
+        formComponentData: [
+          {
+            componentName: 'Text/Images',
+            description:
+              'See Also: Content component and HTML Element component in the "advanced layout" section',
+            externalLink: 'http://link.com',
+            groupName: 'Basic Layout',
+            id: '123-456',
+            imageName: 'image.jpeg',
+            isLinkEnabled: true,
+            status: true,
+          },
+        ],
+        formComponentNames: [
+          { componentName: 'Text/Images' },
+          { componentName: 'Columns - 2' },
+        ],
+        groupName: '',
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: {
+          ProactiveHelpDialog: true,
+          ProactiveHelpPreviewDialog: true,
+        },
+      },
+    });
+
+    expect(wrapper.vm.isPreviewEnabled('Text/Images')).toBeFalsy();
+    expect(wrapper.vm.isPreviewEnabled('Columns - 2')).toBeTruthy();
+  });
+
+  it('onOpenEditDialog should set the component data and toggle the boolean for showProactiveHelpDialog', async () => {
+    const wrapper = shallowMount(GeneralLayout, {
       props: {
-        componentsList: [
-          { componentName: 'content', status: true },
-          { componentName: 'textfiled', status: false },
+        formComponentData: [
+          {
+            componentName: 'Text/Images',
+            description:
+              'See Also: Content component and HTML Element component in the "advanced layout" section',
+            externalLink: 'http://link.com',
+            groupName: 'Basic Layout',
+            id: '123-456',
+            imageName: 'image.jpeg',
+            isLinkEnabled: true,
+            status: true,
+          },
         ],
-        layoutList: [
-          { componentName: 'content' },
-          { componentName: 'textfiled' },
+        formComponentNames: [
+          { componentName: 'Text/Images' },
+          { componentName: 'Columns - 2' },
         ],
         groupName: '',
       },
@@ -93,7 +200,129 @@ describe('GeneralLayout.vue', () => {
         },
       },
     });
-    //wrapper.vm.onDialog();
-    //expect(wrapper.vm.showDialog).toBe(true);
+
+    expect(wrapper.vm.showEditProactiveHelpDialog).toBeFalsy();
+    expect(wrapper.vm.component).toEqual({});
+    wrapper.vm.onOpenEditDialog('Text/Images');
+    expect(wrapper.vm.component).toEqual({
+      componentName: 'Text/Images',
+      description:
+        'See Also: Content component and HTML Element component in the "advanced layout" section',
+      externalLink: 'http://link.com',
+      groupName: 'Basic Layout',
+      id: '123-456',
+      imageName: 'image.jpeg',
+      isLinkEnabled: true,
+      status: true,
+    });
+    expect(wrapper.vm.showEditProactiveHelpDialog).toBeTruthy();
+  });
+
+  it('onOpenPreviewDialog should get the image URL, set the component data and toggle the boolean for showPreviewDialog', async () => {
+    const wrapper = shallowMount(GeneralLayout, {
+      props: {
+        formComponentData: [
+          {
+            componentName: 'Text/Images',
+            description:
+              'See Also: Content component and HTML Element component in the "advanced layout" section',
+            externalLink: 'http://link.com',
+            groupName: 'Basic Layout',
+            id: '123-456',
+            imageName: 'image.jpeg',
+            isLinkEnabled: true,
+            status: true,
+          },
+        ],
+        formComponentNames: [
+          { componentName: 'Text/Images' },
+          { componentName: 'Columns - 2' },
+        ],
+        groupName: '',
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: {
+          ProactiveHelpDialog: true,
+          ProactiveHelpPreviewDialog: true,
+        },
+      },
+    });
+
+    const getFCProactiveHelpImageUrlSpy = vi.spyOn(
+      adminStore,
+      'getFCProactiveHelpImageUrl'
+    );
+    getFCProactiveHelpImageUrlSpy.mockImplementation(() => {});
+
+    expect(wrapper.vm.showPreviewDialog).toBeFalsy();
+    expect(wrapper.vm.component).toEqual({});
+    await wrapper.vm.onOpenPreviewDialog('Text/Images');
+    expect(getFCProactiveHelpImageUrlSpy).toBeCalledTimes(1);
+    expect(getFCProactiveHelpImageUrlSpy).toBeCalledWith('123-456');
+    expect(wrapper.vm.component).toEqual({
+      componentName: 'Text/Images',
+      description:
+        'See Also: Content component and HTML Element component in the "advanced layout" section',
+      externalLink: 'http://link.com',
+      groupName: 'Basic Layout',
+      id: '123-456',
+      imageName: 'image.jpeg',
+      isLinkEnabled: true,
+      status: true,
+    });
+    expect(wrapper.vm.showPreviewDialog).toBeTruthy();
+  });
+
+  it('onSwitchChange will set the published status for a component based on the switch value', async () => {
+    const wrapper = shallowMount(GeneralLayout, {
+      props: {
+        formComponentData: [
+          {
+            componentName: 'Text/Images',
+            description:
+              'See Also: Content component and HTML Element component in the "advanced layout" section',
+            externalLink: 'http://link.com',
+            groupName: 'Basic Layout',
+            id: '123-456',
+            imageName: 'image.jpeg',
+            isLinkEnabled: true,
+            status: true,
+          },
+        ],
+        formComponentNames: [
+          { componentName: 'Text/Images' },
+          { componentName: 'Columns - 2' },
+        ],
+        groupName: '',
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: {
+          ProactiveHelpDialog: true,
+          ProactiveHelpPreviewDialog: true,
+        },
+      },
+    });
+
+    const updateFCProactiveHelpStatusSpy = vi.spyOn(
+      adminStore,
+      'updateFCProactiveHelpStatus'
+    );
+    updateFCProactiveHelpStatusSpy.mockImplementation(() => {});
+    await wrapper.vm.onSwitchChange('Text/Images', 0);
+    expect(updateFCProactiveHelpStatusSpy).toBeCalledTimes(1);
+    expect(updateFCProactiveHelpStatusSpy).toBeCalledWith({
+      componentId: '123-456',
+      publishStatus: true,
+    });
+    wrapper.vm.publish[0] = false;
+    updateFCProactiveHelpStatusSpy.mockReset();
+    await wrapper.vm.onSwitchChange('Text/Images', 0);
+    expect(updateFCProactiveHelpStatusSpy).toBeCalledTimes(1);
+    expect(updateFCProactiveHelpStatusSpy).toBeCalledWith({
+      componentId: '123-456',
+      publishStatus: false,
+    });
   });
 });
diff --git a/app/frontend/tests/unit/components/infolinks/ProactiveHelpDialog.spec.js b/app/frontend/tests/unit/components/infolinks/ProactiveHelpDialog.spec.js
index d64797a30..15b24e2f0 100644
--- a/app/frontend/tests/unit/components/infolinks/ProactiveHelpDialog.spec.js
+++ b/app/frontend/tests/unit/components/infolinks/ProactiveHelpDialog.spec.js
@@ -1,18 +1,55 @@
 // @vitest-environment happy-dom
 // happy-dom is required to access window.location
 
-import { mount } from '@vue/test-utils';
+import { flushPromises, mount, shallowMount } from '@vue/test-utils';
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
 import { createRouter, createWebHistory } from 'vue-router';
 import { expect, vi } from 'vitest';
-import { nextTick } from 'vue';
 
 import getRouter from '~/router';
 import ProactiveHelpDialog from '~/components/infolinks/ProactiveHelpDialog.vue';
+import { useAdminStore } from '~/store/admin';
+
+const STUBS = {
+  VRow: {
+    template: '<div class="v-row-stub"><slot /></div>',
+  },
+  VCol: {
+    template: '<div class="v-col-stub"><slot /></div>',
+  },
+  VDialog: {
+    template: '<div class="v-dialog-stub"><slot /></div>',
+  },
+  VCard: {
+    template: '<div class="v-card-stub"><slot /></div>',
+  },
+  VContainer: {
+    template: '<div class="v-container-stub"><slot /></div>',
+  },
+  VTextField: {
+    template: '<div class="v-text-field-stub"><slot /></div>',
+  },
+  VCheckbox: {
+    template: '<div class="v-checkbox-stub"><slot /></div>',
+  },
+  VTextArea: {
+    template: '<div class="v-text-area-stub"><slot /></div>',
+  },
+  VIcon: {
+    template: '<div class="v-icon-stub"><slot /></div>',
+  },
+  VFileInput: {
+    template: '<div class="v-file-input-stub"><slot /></div>',
+  },
+  VBtn: {
+    template: '<div class="v-btn-stub"><slot /></div>',
+  },
+};
 
 describe('ProactiveHelpDialog.vue', () => {
   const pinia = createTestingPinia();
+  const adminStore = useAdminStore(pinia);
   const router = createRouter({
     history: createWebHistory(),
     routes: getRouter().getRoutes(),
@@ -20,8 +57,176 @@ describe('ProactiveHelpDialog.vue', () => {
 
   setActivePinia(pinia);
 
-  it('resetDialog', async () => {
+  it('renders', async () => {
     const wrapper = mount(ProactiveHelpDialog, {
+      props: {
+        component: {
+          componentName: 'content',
+          description: 'dump text',
+          imageUrl: 'https://dumpurl.com',
+          moreHelpInfoLink: 'https://dumpurl.com',
+        },
+        componentName: 'content',
+        groupName: 'test',
+        showDialog: true,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: STUBS,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.html()).toContain('content');
+  });
+
+  it('rules should return largeImgTxt if it fails', () => {
+    const wrapper = shallowMount(ProactiveHelpDialog, {
+      props: {
+        component: {
+          componentName: 'content',
+          description: 'dump text',
+          imageUrl: 'https://dumpurl.com',
+          moreHelpInfoLink: 'https://dumpurl.com',
+        },
+        groupName: 'test',
+        showDialog: true,
+      },
+      global: {
+        plugins: [router, pinia],
+      },
+    });
+
+    expect(wrapper.vm.rules[0]([{ size: 5000000 }])).toEqual(
+      'trans.proactiveHelpDialog.largeImgTxt'
+    );
+  });
+
+  it('onCloseDialog should call resetDialog and emit close-dialog', () => {
+    const wrapper = shallowMount(ProactiveHelpDialog, {
+      props: {
+        component: {
+          componentName: 'content',
+          description: 'dump text',
+          imageUrl: 'https://dumpurl.com',
+          moreHelpInfoLink: 'https://dumpurl.com',
+        },
+        groupName: 'test',
+        showDialog: true,
+      },
+      global: {
+        plugins: [router, pinia],
+      },
+    });
+
+    wrapper.vm.onCloseDialog();
+    expect(wrapper.emitted()).toHaveProperty('close-dialog');
+  });
+
+  it('validateLinkUrl should return true and set linkError to true if isLinkEnabled and moreHelpInfoLink is blank otherwise false', () => {
+    const wrapper = shallowMount(ProactiveHelpDialog, {
+      props: {
+        component: {
+          componentName: 'content',
+          description: 'dump text',
+          imageUrl: 'https://dumpurl.com',
+          moreHelpInfoLink: 'https://dumpurl.com',
+        },
+        groupName: 'test',
+        showDialog: true,
+      },
+      global: {
+        plugins: [router, pinia],
+      },
+    });
+
+    expect(wrapper.vm.validateLinkUrl()).toBeFalsy();
+    expect(wrapper.vm.linkError).toBeFalsy();
+    wrapper.vm.isLinkEnabled = true;
+    wrapper.vm.moreHelpInfoLink = '';
+    expect(wrapper.vm.validateLinkUrl()).toBeTruthy();
+    expect(wrapper.vm.linkError).toBeTruthy();
+  });
+
+  it('selectImage will set imageSizeError to true if the image size is too large', async () => {
+    const wrapper = shallowMount(ProactiveHelpDialog, {
+      props: {
+        component: {
+          componentName: 'content',
+          description: 'dump text',
+          imageUrl: 'https://dumpurl.com',
+          moreHelpInfoLink: 'https://dumpurl.com',
+        },
+        groupName: 'test',
+        showDialog: true,
+      },
+      global: {
+        plugins: [router, pinia],
+      },
+    });
+
+    wrapper.vm.files = [{ size: 50000000 }];
+    await wrapper.vm.selectImage();
+    expect(wrapper.vm.imageSizeError).toBeTruthy();
+  });
+
+  it('selectImage will set imageSizeError to true if the image size is too large', async () => {
+    const wrapper = shallowMount(ProactiveHelpDialog, {
+      props: {
+        component: {
+          componentName: 'content',
+          description: 'dump text',
+          imageUrl: 'https://dumpurl.com',
+          moreHelpInfoLink: 'https://dumpurl.com',
+        },
+        groupName: 'test',
+        showDialog: true,
+      },
+      global: {
+        plugins: [router, pinia],
+      },
+    });
+
+    window.FileReader = function () {
+      this.readAsDataURL = vi.fn();
+      this.onerror = null;
+    };
+
+    wrapper.vm.files = [{ size: 1 }];
+
+    await wrapper.vm.selectImage();
+    expect(wrapper.vm.imageSizeError).toBeFalsy();
+  });
+
+  it('submit will call addFCProactiveHelp then emit close-dialog', async () => {
+    const wrapper = shallowMount(ProactiveHelpDialog, {
+      props: {
+        component: {
+          componentName: 'content',
+          description: 'dump text',
+          imageUrl: 'https://dumpurl.com',
+          moreHelpInfoLink: 'https://dumpurl.com',
+        },
+        groupName: 'test',
+        showDialog: true,
+      },
+      global: {
+        plugins: [router, pinia],
+      },
+    });
+
+    const addFCProactiveHelpSpy = vi.spyOn(adminStore, 'addFCProactiveHelp');
+    addFCProactiveHelpSpy.mockImplementation(() => {});
+
+    await wrapper.vm.submit();
+
+    expect(addFCProactiveHelpSpy).toBeCalledTimes(1);
+    expect(wrapper.emitted()).toHaveProperty('close-dialog');
+  });
+
+  it('resetDialog', async () => {
+    const wrapper = shallowMount(ProactiveHelpDialog, {
       props: {
         component: {
           componentName: 'content',
@@ -38,7 +243,6 @@ describe('ProactiveHelpDialog.vue', () => {
     });
 
     wrapper.vm.resetDialog();
-    await nextTick();
     expect(wrapper.vm.description).toBe('');
   });
 });
diff --git a/app/frontend/tests/unit/components/infolinks/ProactiveHelpPreviewDialog.spec.js b/app/frontend/tests/unit/components/infolinks/ProactiveHelpPreviewDialog.spec.js
index c5a767b12..9475bcd62 100644
--- a/app/frontend/tests/unit/components/infolinks/ProactiveHelpPreviewDialog.spec.js
+++ b/app/frontend/tests/unit/components/infolinks/ProactiveHelpPreviewDialog.spec.js
@@ -1,17 +1,17 @@
-import { mount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
 import { createRouter, createWebHistory } from 'vue-router';
-import { beforeEach, expect, vi } from 'vitest';
+import { expect } from 'vitest';
 
-import { rbacService } from '~/services';
 import getRouter from '~/router';
 import ProactiveHelpPreviewDialog from '~/components/infolinks/ProactiveHelpPreviewDialog.vue';
+
 import { useFormStore } from '~/store/form';
 import { useAppStore } from '~/store/app';
 
+
 describe('ProactiveHelpPreviewDialog.vue', () => {
-  const getSubmissionUsersSpy = vi.spyOn(rbacService, 'getSubmissionUsers');
   const pinia = createTestingPinia();
   const router = createRouter({
     history: createWebHistory(),
@@ -19,6 +19,7 @@ describe('ProactiveHelpPreviewDialog.vue', () => {
   });
 
   setActivePinia(pinia);
+
   const formStore = useFormStore(pinia);
   const appStore = useAppStore(pinia);
 
@@ -32,9 +33,8 @@ describe('ProactiveHelpPreviewDialog.vue', () => {
     getSubmissionUsersSpy.mockRestore();
   });
 
+
   it('renders', () => {
-    formStore.form.name = 'myForm';
-    getSubmissionUsersSpy.mockImplementation(() => ({ data: [] }));
     const wrapper = mount(ProactiveHelpPreviewDialog, {
       props: {
         component: {
@@ -58,4 +58,30 @@ describe('ProactiveHelpPreviewDialog.vue', () => {
 
     expect(wrapper.text()).toContain('content').toContain('dump description');
   });
+
+  it('onCloseDialog should emit close-dialog', () => {
+    const wrapper = shallowMount(ProactiveHelpPreviewDialog, {
+      props: {
+        component: {
+          componentName: 'content',
+          description: 'dump description',
+          imageUrl: 'https://dumpurl.com',
+          moreHelpInfoLink: 'https://dumpurl.com',
+        },
+        showDialog: true,
+      },
+      global: {
+        plugins: [router, pinia],
+        stubs: {
+          VDialog: {
+            name: 'VDialog',
+            template: '<div class="v-dialog-stub"><slot /></div>',
+          },
+        },
+      },
+    });
+
+    wrapper.vm.onCloseDialog();
+    expect(wrapper.emitted()).toHaveProperty('close-dialog');
+  });
 });