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/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/utils/constants.js b/app/frontend/src/utils/constants.js
index 83efe0333..f55b8e7e5 100755
--- a/app/frontend/src/utils/constants.js
+++ b/app/frontend/src/utils/constants.js
@@ -172,3 +172,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/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 1eb4add91..c82038574 100644
--- a/app/frontend/tests/unit/components/infolinks/ProactiveHelpPreviewDialog.spec.js
+++ b/app/frontend/tests/unit/components/infolinks/ProactiveHelpPreviewDialog.spec.js
@@ -1,16 +1,13 @@
-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';
 
 describe('ProactiveHelpPreviewDialog.vue', () => {
-  const getSubmissionUsersSpy = vi.spyOn(rbacService, 'getSubmissionUsers');
   const pinia = createTestingPinia();
   const router = createRouter({
     history: createWebHistory(),
@@ -18,20 +15,8 @@ describe('ProactiveHelpPreviewDialog.vue', () => {
   });
 
   setActivePinia(pinia);
-  const formStore = useFormStore(pinia);
-
-  beforeEach(() => {
-    getSubmissionUsersSpy.mockReset();
-    formStore.$reset();
-  });
-
-  afterAll(() => {
-    getSubmissionUsersSpy.mockRestore();
-  });
 
   it('renders', () => {
-    formStore.form.name = 'myForm';
-    getSubmissionUsersSpy.mockImplementation(() => ({ data: [] }));
     const wrapper = mount(ProactiveHelpPreviewDialog, {
       props: {
         component: {
@@ -55,4 +40,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');
+  });
 });